# Plan de Desarrollo - Vistas Web SIRYC
## Sistema de Mantenimiento de Peajes

---

## 📋 Resumen de Módulos

| Prioridad | Módulo | Vistas | Complejidad | Estimado |
|-----------|--------|--------|-------------|----------|
| 🔴 Alta | Calendario | 2 | Alta | 4-5h |
| 🔴 Alta | Mantenimientos | 3 | Alta | 5-6h |
| 🔴 Alta | Aprobaciones | 2 | Media | 3h |
| 🟠 Media | Monitoreo | 1 | Alta | 4h |
| 🟠 Media | Alertas | 2 | Media | 3h |
| 🟡 Normal | Usuarios | 3 | Media | 3h |
| 🟡 Normal | Roles | 2 | Media | 2h |
| 🟢 Baja | Catálogos | 2 | Baja | 2h |
| 🟢 Baja | Inventario | 2 | Media | 2h |
| 🟢 Baja | Reportes | 3 | Media | 4h |

---

## 🎨 Lineamientos de Diseño

### Principios
- **Sin degradados exagerados** - Fondos sólidos con sutiles variaciones
- **Microinteracciones** - Transiciones suaves en hover y focus
- **Espaciado generoso** - Aire entre elementos para legibilidad
- **Iconografía consistente** - Font Awesome 6 en todo el sistema
- **Estados visuales claros** - Colores semánticos para cada estado

### Paleta de Colores
```css
Primary (SIRYC):     #1a3a5c
Secondary (MACROGRAM): #f57c00
Success:             #28a745
Warning:             #ffc107
Danger:              #dc3545
Info:                #17a2b8
Background:          #f4f6f9
Cards:               #ffffff
Text Primary:        #2c3e50
Text Muted:          #6c757d
```

### Componentes Personalizados a Usar
1. **Cards con borde lateral** - Indicador de estado/tipo
2. **Tablas con filtros inline** - Sin modales para filtros
3. **Timeline vertical** - Para historiales
4. **Stepper horizontal** - Para procesos multi-paso
5. **Badges con iconos** - Estados descriptivos
6. **Empty states ilustrados** - Mensajes cuando no hay datos
7. **Action bars flotantes** - Acciones contextuales

---

## 📅 FASE 1: OPERACIONES (Prioridad Alta)

### 1.1 Calendario de Mantenimientos
**Ruta:** `/calendario`

#### Vista Principal (index)
```
┌─────────────────────────────────────────────────────────────┐
│ [Header: Título + Botones Acción]                           │
├─────────────────────────────────────────────────────────────┤
│ [Filtros: Concesión | Centro | Técnico | Estado]  [Semana]  │
├─────────────────────────────────────────────────────────────┤
│        LUN    MAR    MIE    JUE    VIE    SAB    DOM        │
│ ┌────┐┌────┐┌────┐┌────┐┌────┐┌────┐┌────┐                 │
│ │ 3  ││ 5  ││ 2  ││ 4  ││ 6  ││ 1  ││ 0  │ ← Contadores    │
│ └────┘└────┘└────┘└────┘└────┘└────┘└────┘                 │
│                                                             │
│ [Lista de mantenimientos del día seleccionado]              │
│ ┌─────────────────────────────────────────────────────────┐│
│ │ 🔧 Peaje Norte - Vía 1 | Técnico: Juan | ● Programado   ││
│ │ 🔧 Peaje Sur - Vía 3  | Técnico: Pedro | ● En proceso   ││
│ └─────────────────────────────────────────────────────────┘│
└─────────────────────────────────────────────────────────────┘
```

**Características:**
- Vista semanal tipo agenda (no calendario tradicional)
- Drag & drop para reprogramar (fase futura)
- Click en día para ver detalle
- Colores por estado en cada celda
- Panel lateral con detalle del día

#### Modal/Panel: Programar Mantenimiento
- Formulario en panel deslizable desde la derecha
- Selección de centro → carga vías automáticamente
- Selección de técnico con disponibilidad visible
- Validación de conflictos en tiempo real

---

### 1.2 Mantenimientos
**Ruta:** `/mantenimientos`

#### Vista Principal (index)
```
┌─────────────────────────────────────────────────────────────┐
│ Mantenimientos                              [+ Nuevo] [📥]  │
├─────────────────────────────────────────────────────────────┤
│ [Tabs: Todos | Hoy | Pendientes | En Proceso | Completados] │
├─────────────────────────────────────────────────────────────┤
│ 🔍 Buscar...   [Fecha ▼] [Centro ▼] [Técnico ▼] [Estado ▼] │
├─────────────────────────────────────────────────────────────┤
│ ┌─ Card Mantenimiento ─────────────────────────────────────┐│
│ │ #1234                                      ● PROGRAMADO  ││
│ │ ─────────────────────────────────────────────────────────││
│ │ 📍 Peaje Norte - Vía 1          📅 05/02/2026           ││
│ │ 👤 Juan Pérez                   🕐 08:00 - 12:00        ││
│ │ ─────────────────────────────────────────────────────────││
│ │ [Ver Detalle]  [Editar]  [···]                          ││
│ └─────────────────────────────────────────────────────────┘│
│                                                             │
│ [Paginación]                                                │
└─────────────────────────────────────────────────────────────┘
```

**Características:**
- Vista en cards (no tabla) para mejor UX
- Tabs para filtrado rápido por estado
- Búsqueda instantánea
- Acciones rápidas sin necesidad de entrar al detalle

#### Vista Detalle (show)
```
┌─────────────────────────────────────────────────────────────┐
│ ← Volver    Mantenimiento #1234                    [Acción] │
├───────────────────────────────────┬─────────────────────────┤
│                                   │                         │
│  INFORMACIÓN GENERAL              │  ESTADO ACTUAL          │
│  ───────────────────              │  ─────────────          │
│  Centro: Peaje Norte              │  ┌─────────────────┐    │
│  Vía: Vía 1                       │  │  ● EN PROCESO   │    │
│  Fecha: 05/02/2026                │  │  Desde: 10:30   │    │
│  Técnico: Juan Pérez              │  └─────────────────┘    │
│                                   │                         │
│  CHECKLIST                        │  TIMELINE               │
│  ─────────                        │  ────────               │
│  ☑ Revisión equipos (5/5)         │  10:30 → En camino     │
│  ☐ Limpieza (0/3)                 │  11:00 → En sitio      │
│  ☐ Pruebas (0/4)                  │  11:15 → Iniciado      │
│                                   │                         │
├───────────────────────────────────┴─────────────────────────┤
│  EVIDENCIAS FOTOGRÁFICAS                                    │
│  ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐                           │
│  │ 📷  │ │ 📷  │ │ 📷  │ │  +  │                           │
│  └─────┘ └─────┘ └─────┘ └─────┘                           │
└─────────────────────────────────────────────────────────────┘
```

**Características:**
- Layout de 2 columnas (info + estado)
- Timeline visual del progreso
- Galería de evidencias con lightbox
- Checklist interactivo (según permisos)
- Acciones contextuales según estado

---

### 1.3 Aprobaciones
**Ruta:** `/aprobaciones`

#### Vista Principal (index)
```
┌─────────────────────────────────────────────────────────────┐
│ Aprobaciones Pendientes                        [📊 Resumen] │
├─────────────────────────────────────────────────────────────┤
│ [Tabs: Pendientes (5) | Aprobados | Rechazados | Todos]     │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│ ┌─ Card Aprobación ────────────────────────────────────────┐│
│ │ ⏳ PENDIENTE DE APROBACIÓN           Hace 2 horas        ││
│ │ ─────────────────────────────────────────────────────────││
│ │ #1234 - Peaje Norte                                      ││
│ │ Técnico: Juan Pérez | Duración: 3h 45m                   ││
│ │ ─────────────────────────────────────────────────────────││
│ │ Checklist: 12/12 ✓  |  Fotos: 8  |  Observaciones: 2     ││
│ │ ─────────────────────────────────────────────────────────││
│ │         [Ver Detalle]    [✓ Aprobar]    [✗ Rechazar]     ││
│ └─────────────────────────────────────────────────────────┘│
│                                                             │
└─────────────────────────────────────────────────────────────┘
```

**Características:**
- Acciones de aprobar/rechazar directas
- Resumen de cumplimiento visible
- Badge de tiempo de espera
- Modal de confirmación con campo de observaciones

---

## 📡 FASE 2: MONITOREO (Prioridad Media)

### 2.1 Mapa en Vivo
**Ruta:** `/monitoreo`

```
┌─────────────────────────────────────────────────────────────┐
│ Monitoreo en Vivo                    🔴 5 activos | ⏱ Live │
├───────────────────────────────────────┬─────────────────────┤
│                                       │ TÉCNICOS ACTIVOS    │
│                                       │ ────────────────    │
│         [MAPA INTERACTIVO]            │ ┌─────────────────┐ │
│                                       │ │ 👤 Juan Pérez   │ │
│     🔵 Centro                         │ │ 📍 Peaje Norte  │ │
│     🟢 Técnico en sitio               │ │ ● En proceso    │ │
│     🟡 Técnico en camino              │ │ ⏱ 1h 30m       │ │
│     🔴 Alerta                         │ └─────────────────┘ │
│                                       │                     │
│                                       │ ┌─────────────────┐ │
│                                       │ │ 👤 Pedro López  │ │
│                                       │ │ 📍 En camino    │ │
│                                       │ │ ● En ruta       │ │
│                                       │ └─────────────────┘ │
├───────────────────────────────────────┴─────────────────────┤
│ [Timeline de eventos del día]                               │
└─────────────────────────────────────────────────────────────┘
```

**Características:**
- Mapa con Leaflet (OpenStreetMap)
- Actualización en tiempo real (polling 30s)
- Marcadores personalizados por estado
- Panel lateral con lista de técnicos
- Click en marcador muestra info del mantenimiento

---

### 2.2 Alertas
**Ruta:** `/alertas`

#### Vista Principal
```
┌─────────────────────────────────────────────────────────────┐
│ Centro de Alertas                              [⚙ Configurar]│
├─────────────────────────────────────────────────────────────┤
│ [Tabs: 🔴 Activas (3) | 🟡 En Proceso | ✓ Resueltas]        │
├─────────────────────────────────────────────────────────────┤
│ [Filtro: Tipo ▼] [Prioridad ▼] [Fecha ▼]                    │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│ ┌─ Alerta Alta ────────────────────────────────────────────┐│
│ │🔴│ NO INICIO DESPUÉS DE 11AM                             ││
│ │  │ ───────────────────────────────────────────────────── ││
│ │  │ Técnico Juan Pérez no ha iniciado el mantenimiento    ││
│ │  │ #1234 programado para hoy.                            ││
│ │  │ ───────────────────────────────────────────────────── ││
│ │  │ 📍 Peaje Norte | ⏱ Hace 45 min                        ││
│ │  │ [Gestionar] [Contactar Técnico] [Ignorar]             ││
│ └──┴───────────────────────────────────────────────────────┘│
│                                                             │
└─────────────────────────────────────────────────────────────┘
```

---

## 👥 FASE 3: ADMINISTRACIÓN (Prioridad Normal)

### 3.1 Usuarios
**Ruta:** `/usuarios`

```
┌─────────────────────────────────────────────────────────────┐
│ Gestión de Usuarios                            [+ Nuevo]    │
├─────────────────────────────────────────────────────────────┤
│ 🔍 Buscar...        [Perfil ▼] [Estado ▼]    [Vista: ≡ ⊞]  │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│ ┌──────────────────────────────────────────────────────────┐│
│ │ 👤 | Nombre          | Email           | Perfil  | Estado││
│ ├──────────────────────────────────────────────────────────┤│
│ │ JC │ Juan Carlos     │ jc@mail.com     │ Técnico │ ●     ││
│ │ MP │ María Pérez     │ mp@mail.com     │ Admin   │ ●     ││
│ │ RL │ Roberto López   │ rl@mail.com     │ Mesa    │ ○     ││
│ └──────────────────────────────────────────────────────────┘│
│                                                             │
│ [1] [2] [3] ... [10]                                        │
└─────────────────────────────────────────────────────────────┘
```

**Características:**
- Avatar con iniciales
- Estado visual (activo/inactivo)
- Acciones en línea
- Modal para crear/editar
- Cambio de estado con confirmación

### 3.2 Roles y Permisos
```
┌─────────────────────────────────────────────────────────────┐
│ Roles y Permisos                                            │
├────────────────────────┬────────────────────────────────────┤
│ ROLES                  │ PERMISOS DEL ROL                   │
│ ──────                 │ ──────────────────                 │
│ ┌────────────────────┐ │                                    │
│ │ ● Administrador    │ │ [Módulo: Usuarios]                 │
│ ├────────────────────┤ │ ☑ Ver usuarios                     │
│ │ ○ Gerente          │ │ ☑ Crear usuarios                   │
│ ├────────────────────┤ │ ☑ Editar usuarios                  │
│ │ ○ Técnico          │ │ ☐ Eliminar usuarios                │
│ ├────────────────────┤ │                                    │
│ │ ○ Mesa de Ayuda    │ │ [Módulo: Mantenimientos]           │
│ └────────────────────┘ │ ☑ Ver mantenimientos               │
│                        │ ☑ Monitorear                       │
│ [+ Nuevo Rol]          │ ☐ Ejecutar                         │
│                        │                                    │
│                        │ [Guardar Cambios]                  │
└────────────────────────┴────────────────────────────────────┘
```

---

## 📊 FASE 4: REPORTES (Prioridad Baja)

### 4.1 Dashboard Gerencia
- KPIs grandes y visibles
- Gráficos de tendencia
- Comparativas mensuales
- Exportar a PDF

### 4.2 Dashboard Admin
- Métricas operativas
- Rendimiento por técnico
- Alertas por tipo
- Tiempos promedio

### 4.3 Reportes Consolidados
- Generador de reportes con filtros
- Exportación Excel/PDF
- Programación de envío automático

---

## 📦 FASE 5: CATÁLOGOS E INVENTARIO

### 5.1 Catálogos
- Gestión de centros/peajes
- Gestión de vías
- Estados de mantenimiento
- Tipos de checklist

### 5.2 Inventario
- Equipos por centro
- Estado de equipos
- Historial de mantenimientos por equipo

---

## 🛠 Componentes Reutilizables a Crear

1. **`_card-mantenimiento.blade.php`** - Card de mantenimiento
2. **`_card-alerta.blade.php`** - Card de alerta
3. **`_timeline.blade.php`** - Timeline vertical
4. **`_filtros.blade.php`** - Barra de filtros
5. **`_tabla-datos.blade.php`** - Tabla con ordenamiento
6. **`_modal-confirmacion.blade.php`** - Modal de confirmación
7. **`_empty-state.blade.php`** - Estado vacío
8. **`_avatar.blade.php`** - Avatar con iniciales
9. **`_badge-estado.blade.php`** - Badge de estado
10. **`_panel-lateral.blade.php`** - Panel deslizable

---

## 📝 Orden de Implementación

### Semana 1: Core Operativo
1. ✅ Dashboard (completado)
2. 🔄 Calendario
3. 🔄 Mantenimientos (index + show)

### Semana 2: Flujo de Trabajo
4. Aprobaciones
5. Alertas
6. Monitoreo

### Semana 3: Administración
7. Usuarios
8. Roles y Permisos
9. Catálogos

### Semana 4: Reportes y Pulido
10. Reportes
11. Inventario
12. Ajustes finales

---

## ¿Por dónde empezamos?

**Recomendación:** Iniciar con **Calendario** ya que:
- Es el punto de entrada para crear mantenimientos
- Define el flujo operativo principal
- Tiene dependencia con mantenimientos
- Es usado por múltiples roles

