docs: Actualizar README con documentacion completa del sistema

- Informacion general y arquitectura
- Estructura del proyecto
- Modulos del sistema (Dashboard, Agenda, Servicios, Catalogos, Reportes)
- Roles y permisos
- Configuracion de environments
- Guia de instalacion
- API endpoints consumidos
- Funcionalidades especiales (historial, validaciones)
- Comandos utiles y troubleshooting

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
SIO Admin
2026-01-18 02:29:06 +00:00
parent ddbfc3de6a
commit f400106b09

332
README.md
View File

@@ -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