Sistema de Liquidaciones - MarketMix 💰
Aplicación para calcular liquidaciones de los empleados de una empresa. Éste es un proyecto SPA (Single Page Application) desarrollado con VueJS que calcula los liquidaciones de empleados con distintos roles acorde a valores estipulados previamente por un administrador.
¿Cómo funciona? ⁉️
El proyecto consta de cinco interfaces:
- Login:
En ésta interfaz el usuario ingresa un pin único de cuatro dígitos que lo relaciona con un rol y su nombre. El pin se valida con la información almacenada en el objeto ./src/data/credentials.js, sí es correcto, se renderiza una interfaz para su rol (administrator, secretary, seller or assembler).
Aquí encontrará algunos pines para el acceso al login:
{
administrator: "1234",
secretaries:{
Paula: "2003",
...
},
sellers: {
Pedro: "1000",
...
},
assemblers: {
Ana: "1001",
...
}
}
- Administrator:
Tras ingresar el pin de acceso asignado para el administrador, se renderizará la interfaz gráfica para que el administrados asigne las variables globales para el cálculo de la liquidaciones y visualize un reporte géneral las liquidaciones realizadas hasta el momento.
Si el administrador no ha asignado las variables globales, NO SE DARÁ ACCESO A LAS OTRAS INTERFACES AUNQUE EL LOGIN PUEDA SER CORRECTO. Estás variables se almacenarán en el objeto ubicado en ./src/data/globalVariables.js.
Por otro lado, la información que visualizará el administrador se obtendrá del arreglo en la ruta ./src/data/liquidationsData.js, donde posterior a cada liquidación realizada se almacenará ésta última.
- Secretary, seller y assembler
En éstas interfaces el comportamiento es análogo entre sí. Se recibirán variables obligatorias para el cálculo de la liquidación en una vista minimalista ante el usuario. Inmediatamente se indique calcular la liquidación, se renderizará una pequeña tabla con información acerca de la liquidación.
Rutas y archivos 📂
- index.html (Estructura la página e indexa los estilos y lógica del programa).
- assets (Contiene contenido multimedia de la página).
- logo.ico (Logo a visualizar en la parte superior de la pestaña).
- css (Contiene los estilos css).
- style.css (Generalidades de los estilos).
- src (Contiene la lógica del programa).
- main.js (Lógica del programa en VueJS).
- methods (Métodos que interactúan con los eventos del cliente)