401 lines
11 KiB
Markdown
401 lines
11 KiB
Markdown
# 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*
|