# 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