# Construction Pages Specification

**Version:** 1.0.0
**Fecha:** 2025-12-05
**Modulos:** MAI-002, MAI-003, MAI-005

---

## Project Pages

### ProjectsPage

**Ruta:** `/projects`

**Descripcion:** Lista y gestion de todos los proyectos.

**Layout:**
```
+--------------------------------------------------+
| PageHeader: Proyectos                    [+ Nuevo] |
+--------------------------------------------------+
| SearchInput | FilterBar | ViewToggle              |
+--------------------------------------------------+
| ViewMode: List / Grid / Kanban                    |
|                                                   |
| [Project Cards / Table / Kanban Board]            |
|                                                   |
+--------------------------------------------------+
| Pagination                                        |
+--------------------------------------------------+
```

**Componentes:**
- PageHeader
- SearchInput
- FilterBar (status, dateRange, client, manager)
- ViewToggle (list, grid, kanban)
- ProjectList / ProjectGrid / ProjectKanban
- Pagination
- CreateProjectModal

**Estado:**
- filters: ProjectFilters
- viewMode: 'list' | 'grid' | 'kanban'
- selectedProjectId: string | null

**Hooks:**
- useProjects(filters)
- useConstructionStore()

---

### ProjectDetailPage

**Ruta:** `/projects/:id`

**Descripcion:** Vista detallada de un proyecto con todas sus secciones.

**Layout:**
```
+--------------------------------------------------+
| Breadcrumbs: Dashboard > Proyectos > PRJ-001      |
+--------------------------------------------------+
| PageHeader: Proyecto Valle Verde                  |
| Status: EN_EJECUCION  |  [Editar] [Acciones v]    |
+--------------------------------------------------+
| Tabs: General | Presupuesto | Avances | Docs | ...
+--------------------------------------------------+
| Tab Content                                       |
|                                                   |
|                                                   |
+--------------------------------------------------+
```

**Tabs:**
1. **General** - Informacion basica, equipo, timeline
2. **Presupuesto** - BudgetOverview, BudgetTable
3. **Avances** - ProgressDashboard, GanttChart
4. **Cronograma** - ScheduleCalendar, MilestoneTimeline
5. **Documentos** - DocumentList, FileUpload
6. **Cumplimiento** - ComplianceStatus (si aplica)
7. **Finanzas** - Resumen financiero

**Hooks:**
- useProject(id)
- useProjectBudget(id)
- useProjectProgress(id)

---

### BudgetPage

**Ruta:** `/projects/:id/budget`

**Descripcion:** Gestion completa del presupuesto del proyecto.

**Layout:**
```
+--------------------------------------------------+
| Breadcrumbs                                       |
+--------------------------------------------------+
| PageHeader: Presupuesto - PRJ-001        [Export] |
+--------------------------------------------------+
| BudgetOverview                                    |
| +---------------+ +---------------+ +-----------+ |
| | Presupuestado | | Ejecutado     | | Variacion | |
| | $5,000,000    | | $3,200,000    | | -5.2%     | |
| +---------------+ +---------------+ +-----------+ |
+--------------------------------------------------+
| Tabs: Partidas | Graficos | Comparativo          |
+--------------------------------------------------+
| BudgetTable (expandable, editable)               |
| - Categoria A                                     |
|   - Partida A.1                                  |
|   - Partida A.2                                  |
| - Categoria B                                     |
+--------------------------------------------------+
```

**Componentes:**
- BudgetOverview
- BudgetTable (expandable tree)
- BudgetChart
- BudgetVarianceAlert
- ImportExcelModal
- AddItemModal

---

### ProgressPage

**Ruta:** `/projects/:id/progress`

**Descripcion:** Seguimiento detallado del avance del proyecto.

**Layout:**
```
+--------------------------------------------------+
| PageHeader: Avances - PRJ-001                     |
+--------------------------------------------------+
| +-------------------+ +-------------------------+ |
| | Overall Progress  | |    Progress Curve       | |
| |      [72%]        | |    (Curva S)            | |
| +-------------------+ +-------------------------+ |
+--------------------------------------------------+
| Tabs: Por Fase | Gantt | Actividades | Historial |
+--------------------------------------------------+
| PhaseProgress / GanttChart / ActivityList        |
+--------------------------------------------------+
```

**Componentes:**
- GaugeChart (avance global)
- ProgressCurve
- PhaseProgress
- GanttChart
- ActivityList
- ProgressEntryForm
- PhotoGallery

---

## Development Pages

### DevelopmentsPage

**Ruta:** `/developments`

**Descripcion:** Lista de desarrollos inmobiliarios.

**Layout:**
```
+--------------------------------------------------+
| PageHeader: Desarrollos                   [+ Nuevo]|
+--------------------------------------------------+
| Tabs: Lista | Mapa                                |
+--------------------------------------------------+
| DevelopmentList / DevelopmentMap                  |
+--------------------------------------------------+
```

**Componentes:**
- DevelopmentCard
- DevelopmentList
- DevelopmentMap (Leaflet)
- CreateDevelopmentModal

---

### DevelopmentDetailPage

**Ruta:** `/developments/:id`

**Descripcion:** Detalle del desarrollo con unidades.

**Layout:**
```
+--------------------------------------------------+
| PageHeader: Residencial Los Pinos                 |
+--------------------------------------------------+
| Summary Cards: Total Unidades | Vendidas | Disp. |
+--------------------------------------------------+
| Tabs: Unidades | Mapa | Ventas | Documentos       |
+--------------------------------------------------+
| UnitGrid / FloorPlanViewer / SalesChart          |
+--------------------------------------------------+
```

**Componentes:**
- DevelopmentSummary
- UnitGrid
- FloorPlanViewer
- SalesChart
- UnitDetailModal

---

## Estimate Pages

### EstimatesPage

**Ruta:** `/estimates`

**Descripcion:** Lista de presupuestos/cotizaciones.

**Layout:**
```
+--------------------------------------------------+
| PageHeader: Presupuestos                  [+ Nuevo]|
+--------------------------------------------------+
| SearchInput | FilterBar                           |
+--------------------------------------------------+
| DataTable: Estimates                              |
| | Numero | Cliente | Monto | Estado | Acciones |  |
+--------------------------------------------------+
```

---

### EstimateDetailPage

**Ruta:** `/estimates/:id`

**Descripcion:** Detalle y edicion de presupuesto.

**Layout:**
```
+--------------------------------------------------+
| PageHeader: Cotizacion #COT-2024-001              |
| Status: ENVIADA  |  [Editar] [PDF] [Enviar]       |
+--------------------------------------------------+
| Client Info | Project Info | Validity             |
+--------------------------------------------------+
| EstimateLineItems                                 |
| +--------------------------------------------+   |
| | Concepto | Cantidad | P.U. | Importe       |   |
| +--------------------------------------------+   |
| | Item 1   | 100 m2   | $500 | $50,000       |   |
| +--------------------------------------------+   |
|                              Subtotal: $50,000   |
|                              IVA: $8,000         |
|                              Total: $58,000      |
+--------------------------------------------------+
```

---

## Schedule Pages

### SchedulePage

**Ruta:** `/schedule`

**Descripcion:** Calendario general de actividades.

**Layout:**
```
+--------------------------------------------------+
| PageHeader: Calendario                            |
+--------------------------------------------------+
| ViewToggle: Mes | Semana | Dia | Gantt            |
+--------------------------------------------------+
| ScheduleCalendar / GanttChart                     |
+--------------------------------------------------+
```

---

## Dashboard Page

### ConstructionDashboardPage

**Ruta:** `/` (o `/dashboard`)

**Descripcion:** Dashboard principal del modulo de construccion.

**Layout:**
```
+--------------------------------------------------+
| PageHeader: Dashboard                             |
+--------------------------------------------------+
| +-------------------+ +-------------------+       |
| | Active Projects   | | Budget Overview   |       |
| | [12]              | | [Chart]           |       |
| +-------------------+ +-------------------+       |
+--------------------------------------------------+
| +-------------------+ +-------------------+       |
| | Upcoming Miles.   | | Team Workload     |       |
| | [List]            | | [Chart]           |       |
| +-------------------+ +-------------------+       |
+--------------------------------------------------+
| Recent Activity                                   |
| [Activity Feed]                                   |
+--------------------------------------------------+
```

**Widgets:**
- ProjectSummaryWidget
- ActiveProjectsWidget
- UpcomingMilestonesWidget
- BudgetHealthWidget
- TeamWorkloadWidget
- RecentActivityFeed

---

## Page States

### Loading State

```tsx
<PageSkeleton>
  <Skeleton variant="text" width="40%" height={32} />
  <Skeleton variant="rectangular" height={200} />
  <Skeleton variant="rectangular" height={400} />
</PageSkeleton>
```

### Error State

```tsx
<ErrorPage
  title="Error al cargar el proyecto"
  message={error.message}
  actions={
    <>
      <Button onClick={refetch}>Reintentar</Button>
      <Button variant="outline" onClick={() => navigate('/projects')}>
        Volver a proyectos
      </Button>
    </>
  }
/>
```

### Empty State

```tsx
<EmptyState
  icon={<ProjectsIcon />}
  title="Sin proyectos"
  description="Crea tu primer proyecto para comenzar"
  action={<Button onClick={openCreateModal}>Crear proyecto</Button>}
/>
```

---

## Navigation Flow

```
Dashboard
    |
    +-- Projects
    |       |
    |       +-- Project Detail
    |               |
    |               +-- Budget
    |               +-- Progress
    |               +-- Schedule
    |               +-- Documents
    |               +-- Compliance
    |
    +-- Developments
    |       |
    |       +-- Development Detail
    |               |
    |               +-- Units
    |               +-- Sales
    |
    +-- Estimates
    |       |
    |       +-- Estimate Detail
    |
    +-- Schedule (Calendar)
```

---

*Ultima actualizacion: 2025-12-05*