Sio-Front/README.md

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)

// 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)

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

# 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

# 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

# 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