f400106b09
- 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>
332 lines
10 KiB
Markdown
332 lines
10 KiB
Markdown
# SIO Frontend - Sistema Integral de Operaciones
|
|
|
|
## Drenax - Sistema de Gestion de Servicios
|
|
|
|
---
|
|
|
|
## Informacion General
|
|
|
|
| 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 |
|
|
|
|
---
|
|
|
|
## Arquitectura del Sistema
|
|
|
|
```
|
|
┌─────────────────────────────────────┐
|
|
│ SIO FRONTEND │
|
|
│ Angular 8 + Material │
|
|
│ Puerto: 4200 │
|
|
└─────────────────┬───────────────────┘
|
|
│ HTTPS
|
|
▼
|
|
┌─────────────────────────────────────┐
|
|
│ SIO BACKEND │
|
|
│ Laravel 5.5 (API) │
|
|
│ Puerto: 8000 │
|
|
└─────────────────────────────────────┘
|
|
```
|
|
|
|
---
|
|
|
|
## Estructura del Proyecto
|
|
|
|
```
|
|
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
|
|
```
|
|
|
|
---
|
|
|
|
## Modulos del Sistema
|
|
|
|
### 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
|