diff --git a/README.md b/README.md index 2a995d7..d03b13e 100644 --- a/README.md +++ b/README.md @@ -1,27 +1,331 @@ -# Metronic Angular +# SIO Frontend - Sistema Integral de Operaciones -This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.3.7. +## Drenax - Sistema de Gestion de Servicios -## Development server +--- -Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. +## Informacion General -## Code scaffolding +| Campo | Valor | +|-------|-------| +| Nombre | SIO Frontend | +| Framework | Angular 8.3.29 | +| UI Library | Angular Material | +| Template | Metronic | +| Puerto Local | 4200 | +| URL Produccion | https://sio.consultoria-as.com | -Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. +--- -## Build +## Arquitectura del Sistema -Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build. +``` + ┌─────────────────────────────────────┐ + │ SIO FRONTEND │ + │ Angular 8 + Material │ + │ Puerto: 4200 │ + └─────────────────┬───────────────────┘ + │ HTTPS + ▼ + ┌─────────────────────────────────────┐ + │ SIO BACKEND │ + │ Laravel 5.5 (API) │ + │ Puerto: 8000 │ + └─────────────────────────────────────┘ +``` -## Running unit tests +--- -Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). +## Estructura del Proyecto -## Running end-to-end tests +``` +sio-frontend/ +├── src/ +│ ├── app/ +│ │ ├── core/ +│ │ │ ├── api/ # Servicios de comunicacion con API +│ │ │ ├── auth/ # Autenticacion y guards +│ │ │ └── models/ # Modelos de datos +│ │ └── views/ +│ │ └── pages/ +│ │ ├── agenda/ # Modulo Agenda +│ │ │ ├── calendario/ # Vista calendario diario +│ │ │ ├── agenda-medica/ # Agenda medica +│ │ │ ├── por-operador/ # Vista por operador +│ │ │ └── timeline/ # Vista timeline +│ │ ├── catalogos/ # Gestion de catalogos +│ │ │ ├── clientes/ # Clientes +│ │ │ ├── vehiculos/ # Vehiculos +│ │ │ ├── servicios/ # Tipos de servicios +│ │ │ └── usuarios/ # Usuarios del sistema +│ │ ├── dashboard/ # Dashboard principal +│ │ ├── encuesta/ # Encuestas de satisfaccion +│ │ ├── reportes/ # Modulo de reportes +│ │ └── servicios/ # Gestion de servicios +│ │ └── solicitudes-servicio/ +│ │ ├── historial-cambios/ # Historial de modificaciones +│ │ └── solicitudes-servicio-edit/ +│ └── environments/ +│ ├── environment.ts # Configuracion desarrollo +│ └── environment.prod.ts # Configuracion produccion +├── dist/ # Build compilado +├── angular.json # Configuracion Angular +├── package.json # Dependencias +└── tsconfig.json # Configuracion TypeScript +``` -Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). +--- -## Further help +## Modulos del Sistema -To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md). +### 1. Dashboard +- Vista general de estadisticas +- Servicios del dia actual +- Indicadores clave de rendimiento (KPIs) +- Accesos rapidos a funciones principales + +### 2. Agenda (Servicios Diarios) +- **Vista Diaria:** Navegacion dia a dia con servicios programados +- **Por Operador:** Servicios agrupados por operador asignado +- **Timeline:** Vista de linea de tiempo de servicios +- Filtros por sucursal, operador y estatus + +### 3. Servicios +- **Crear/Editar solicitudes de servicio** +- **Asignar operadores y vehiculos** +- **Gestionar estatus:** + - Pendiente (Amarillo) + - En Proceso (Azul) + - Realizado (Verde) + - Reprogramado (Naranja) + - Cancelado (Rojo) + - Negativo (Rojo claro) + - Sin Asignar (Gris) +- **Historial de cambios:** Tracking automatico de modificaciones +- **Evidencias:** Visualizacion de fotos del servicio + +### 4. Catalogos +- **Clientes:** Gestion de clientes con multiples domicilios +- **Vehiculos:** Flota vehicular con tipos y descripciones +- **Servicios:** Tipos de servicios ofrecidos +- **Formas de Pago:** Metodos de pago disponibles +- **Origenes:** Origen de las solicitudes + +### 5. Reportes +- Reportes de productividad por operador +- Servicios por periodo (diario/semanal/mensual) +- Encuestas de satisfaccion +- Capacidad aprovechada +- Exportacion a Excel/PDF + +--- + +## Roles y Permisos + +| Modulo | Admin | Atencion Cliente | Supervisor | Operador | +|--------|-------|------------------|------------|----------| +| Dashboard | Si | Si | Si | Si | +| Agenda | Si | Si | Si | No | +| Servicios (Ver) | Si | Si | Si | Si | +| Servicios (Editar) | Si | Si | Si | No | +| Catalogos | Si | No | No | No | +| Reportes | Si | Si | Si | No | +| Usuarios | Si | No | No | No | + +**Nota:** Usuarios con `permiso_especial = 1` pueden editar servicios independientemente de su rol. + +--- + +## Configuracion + +### Environment (Desarrollo) +```typescript +// src/environments/environment.ts +export const environment = { + production: false, + isMockEnabled: false, + authTokenKey: 'drence9d66b410c149d5992a30073637e4L5', + API: "http://localhost:8000/api/", + STORAGE: 'http://localhost:8000/storage/' +}; +``` + +### Environment (Produccion) +```typescript +// src/environments/environment.prod.ts +export const environment = { + production: true, + isMockEnabled: false, + authTokenKey: 'drence9d66b410c149d5992a30073637e4L5', + API: "https://sio-api.consultoria-as.com/api/", + STORAGE: 'https://sio-api.consultoria-as.com/storage/' +}; +``` + +--- + +## Instalacion + +### Requisitos +- Node.js 14.x +- NPM 6.x +- Angular CLI 8.3.29 + +### Pasos de Instalacion + +```bash +# Clonar repositorio +git clone https://git.consultoria-as.com/consultoria-as/Sio-Front.git +cd Sio-Front + +# Instalar dependencias +npm install + +# Instalar Angular CLI (si no esta instalado) +npm install -g @angular/cli@8.3.29 + +# Ejecutar en desarrollo +ng serve + +# Compilar para produccion +ng build --configuration=production +``` + +### Ejecutar en Produccion + +```bash +# Compilar +ng build --configuration=production + +# Servir archivos estaticos (usando http-server) +cd dist +http-server -p 4200 --cors +``` + +--- + +## Servicios API Consumidos + +### Autenticacion +| Metodo | Endpoint | Descripcion | +|--------|----------|-------------| +| POST | /api/login | Iniciar sesion | +| GET | /api/refresh | Refrescar token JWT | +| POST | /api/recoverpassword | Recuperar contrasena | + +### Servicios +| Metodo | Endpoint | Descripcion | +|--------|----------|-------------| +| GET | /api/atencionclientes/solicitud_servicios | Listar servicios | +| POST | /api/atencionclientes/solicitud_servicios | Crear servicio | +| GET | /api/atencionclientes/solicitud_servicios/{id} | Ver detalle | +| PUT | /api/atencionclientes/solicitud_servicios/{id} | Actualizar | +| POST | /api/atencionclientes/solicitud_servicios/agenda | Obtener agenda | +| GET | /api/atencionclientes/solicitud_servicios/{id}/historial | Ver historial | + +### Catalogos +| Metodo | Endpoint | Descripcion | +|--------|----------|-------------| +| GET | /api/atencionclientes/solicitud_servicios/clientes | Listar clientes | +| GET | /api/atencionclientes/solicitud_servicios/operadores | Listar operadores | +| GET | /api/atencionclientes/solicitud_servicios/vehiculos | Listar vehiculos | +| GET | /api/atencionclientes/solicitud_servicios/cat_servicios | Catalogo servicios | +| GET | /api/atencionclientes/solicitud_servicios/estatus_servicios | Catalogo estatus | + +--- + +## Funcionalidades Especiales + +### Historial de Cambios +El sistema registra automaticamente todos los cambios realizados a los servicios: +- Campo modificado +- Valor anterior y nuevo +- Usuario que realizo el cambio +- Fecha, hora e IP + +**Campos rastreados:** +- Estatus del servicio +- Operador asignado +- Vehiculo asignado +- Auxiliares (1, 2, 3) +- Costo del servicio +- Fecha de solicitud +- Duracion +- Comentarios + +### Validacion de Disponibilidad +Antes de asignar un operador o vehiculo, el sistema valida: +- Que no esten asignados a otro servicio en el mismo horario +- Disponibilidad de auxiliares +- Sugiere alternativas si hay conflictos + +--- + +## Comandos Utiles + +```bash +# Desarrollo +ng serve # Servidor de desarrollo +ng serve --host 0.0.0.0 # Accesible desde red local + +# Build +ng build # Build de desarrollo +ng build --configuration=production # Build de produccion + +# Generar componentes +ng generate component nombre # Nuevo componente +ng generate service nombre # Nuevo servicio +ng generate module nombre # Nuevo modulo + +# Tests +ng test # Unit tests +ng e2e # End-to-end tests + +# Linting +ng lint # Verificar codigo +``` + +--- + +## Troubleshooting + +### Error de CORS +- Verificar que el backend tenga configurado CORS correctamente +- Revisar que las URLs en environment apunten al servidor correcto + +### Login no funciona +- Verificar URL del API en environment +- Confirmar que el backend este ejecutandose +- Revisar consola del navegador para errores + +### Cambios no se reflejan +- Limpiar cache del navegador +- Recompilar la aplicacion: `ng build` +- Verificar que se este sirviendo la version correcta + +--- + +## Tecnologias Utilizadas + +- **Angular 8.3.29** - Framework principal +- **Angular Material** - Componentes UI +- **Metronic Template** - Template base +- **RxJS** - Programacion reactiva +- **TypeScript** - Lenguaje de programacion +- **SCSS** - Preprocesador CSS +- **JWT** - Autenticacion + +--- + +## Contacto + +| Campo | Valor | +|-------|-------| +| Sistema | SIO (Sistema Integral de Operaciones) | +| Empresa | Drenax | +| Dominio | consultoria-as.com | + +--- + +**Version:** 1.0 +**Ultima actualizacion:** 2026-01-17