rckrdmrd/erp-construccion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
main
erp-construccion/docs/06-frontend-specs/pages/PAGES-construction.md

11 KiB
Raw Permalink Blame History

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

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

Error State

<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

<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