# Construction Components Specification
**Version:** 1.0.0
**Fecha:** 2025-12-05
**Modulos:** MAI-002, MAI-003, MAI-005
---
## Project Components
### ProjectCard
```tsx
interface ProjectCardProps {
project: Project;
onClick?: (id: string) => void;
showProgress?: boolean;
showBudget?: boolean;
variant?: 'compact' | 'detailed';
}
// Estructura
{showProgress && }
{showBudget && }
```
### ProjectList
```tsx
interface ProjectListProps {
projects: Project[];
loading?: boolean;
emptyMessage?: string;
onClick?: (project: Project) => void;
onEdit?: (project: Project) => void;
onDelete?: (project: Project) => void;
}
```
### ProjectGrid
```tsx
interface ProjectGridProps {
projects: Project[];
columns?: 2 | 3 | 4;
loading?: boolean;
onClick?: (project: Project) => void;
}
```
### ProjectKanban
```tsx
interface ProjectKanbanProps {
projects: Project[];
columns: KanbanColumn[];
onMove?: (projectId: string, newStatus: ProjectStatus) => void;
onClick?: (project: Project) => void;
}
interface KanbanColumn {
id: ProjectStatus;
title: string;
color: string;
}
```
### ProjectForm
```tsx
interface ProjectFormProps {
project?: Project; // edit mode
onSubmit: (data: CreateProjectDto | UpdateProjectDto) => void;
onCancel: () => void;
loading?: boolean;
}
// Campos
- code: Input (requerido, max 20)
- name: Input (requerido, max 200)
- description: TextArea (opcional)
- status: Select (enum ProjectStatus)
- startDate: DatePicker
- endDate: DatePicker
- clientId: Select (lista de clientes)
- managerId: Select (lista de usuarios)
- address: AddressForm (subform)
```
### ProjectStatusTimeline
```tsx
interface ProjectStatusTimelineProps {
projectId: string;
history: StatusChange[];
}
interface StatusChange {
status: ProjectStatus;
changedAt: Date;
changedBy: User;
notes?: string;
}
```
---
## Development Components
### DevelopmentCard
```tsx
interface DevelopmentCardProps {
development: Development;
onClick?: (id: string) => void;
showUnits?: boolean;
}
// Muestra
- Nombre del desarrollo
- Tipo (horizontal/vertical)
- Unidades totales vs vendidas
- Mapa de ubicacion (miniatura)
```
### DevelopmentMap
```tsx
interface DevelopmentMapProps {
developments: Development[];
center?: LatLng;
zoom?: number;
onDevelopmentClick?: (id: string) => void;
showClusters?: boolean;
}
// Integrado con Leaflet/Mapbox
// Muestra marcadores por desarrollo
// Clusters para multiples desarrollos
```
### UnitGrid
```tsx
interface UnitGridProps {
units: Unit[];
onUnitClick?: (unit: Unit) => void;
onStatusChange?: (unitId: string, status: UnitStatus) => void;
layout: 'grid' | 'list' | 'floor-plan';
}
// Vista de grid muestra unidades por estado
// Colores segun estado: disponible, reservada, vendida, entregada
```
### FloorPlanViewer
```tsx
interface FloorPlanViewerProps {
imageUrl: string;
units: UnitPosition[];
onUnitClick?: (unitId: string) => void;
interactive?: boolean;
}
interface UnitPosition {
unitId: string;
x: number;
y: number;
width: number;
height: number;
status: UnitStatus;
}
```
---
## Budget Components
### BudgetOverview
```tsx
interface BudgetOverviewProps {
budget: Budget;
showVariance?: boolean;
}
// Muestra
- Total presupuestado vs ejecutado
- Grafico de barras por categoria
- Porcentaje de ejecucion
- Alertas de desviacion
```
### BudgetTable
```tsx
interface BudgetTableProps {
items: BudgetItem[];
editable?: boolean;
onUpdate?: (itemId: string, data: Partial) => void;
showActuals?: boolean;
expandable?: boolean;
}
// Columnas
- Codigo
- Concepto
- Unidad
- Cantidad
- Precio Unitario
- Importe Presupuestado
- Importe Ejecutado (si showActuals)
- Variacion (si showVariance)
```
### BudgetForm
```tsx
interface BudgetFormProps {
projectId: string;
budget?: Budget;
onSubmit: (data: CreateBudgetDto) => void;
onCancel: () => void;
}
// Permite crear/editar presupuesto
// Importar desde Excel
// Agregar partidas manualmente
```
### BudgetItemEditor
```tsx
interface BudgetItemEditorProps {
item?: BudgetItem;
parentId?: string;
onSave: (data: CreateBudgetItemDto) => void;
onCancel: () => void;
}
```
### BudgetChart
```tsx
interface BudgetChartProps {
budget: Budget;
type: 'bar' | 'pie' | 'treemap';
groupBy: 'category' | 'phase' | 'contractor';
}
```
### BudgetVarianceAlert
```tsx
interface BudgetVarianceAlertProps {
budgetId: string;
threshold: number; // porcentaje de desviacion para alertar
onAction?: () => void;
}
```
---
## Progress Components
### ProgressDashboard
```tsx
interface ProgressDashboardProps {
projectId: string;
}
// Contenido
- Avance global (gauge)
- Avance por fase (barras)
- Curva S (lineas)
- Timeline de hitos
```
### ProgressCurve (Curva S)
```tsx
interface ProgressCurveProps {
data: ProgressData[];
showPlanned?: boolean;
showActual?: boolean;
showProjected?: boolean;
height?: number;
}
interface ProgressData {
date: Date;
planned: number;
actual: number;
projected?: number;
}
```
### PhaseProgress
```tsx
interface PhaseProgressProps {
phases: Phase[];
currentPhase?: string;
onPhaseClick?: (phaseId: string) => void;
}
// Muestra progreso por fase
// Indicador de fase actual
// Fechas de inicio/fin
```
### ActivityList
```tsx
interface ActivityListProps {
activities: Activity[];
onActivityClick?: (activity: Activity) => void;
onStatusChange?: (activityId: string, status: ActivityStatus) => void;
showDependencies?: boolean;
}
```
### GanttChart
```tsx
interface GanttChartProps {
tasks: GanttTask[];
startDate: Date;
endDate: Date;
viewMode: 'day' | 'week' | 'month';
onTaskClick?: (taskId: string) => void;
onTaskUpdate?: (taskId: string, start: Date, end: Date) => void;
showProgress?: boolean;
showDependencies?: boolean;
}
interface GanttTask {
id: string;
name: string;
start: Date;
end: Date;
progress: number;
dependencies?: string[];
children?: GanttTask[];
}
```
### ProgressEntryForm
```tsx
interface ProgressEntryFormProps {
activityId: string;
onSubmit: (data: CreateProgressEntryDto) => void;
onCancel: () => void;
}
// Campos
- reportDate: DatePicker
- progressPercentage: NumberInput (0-100)
- quantityCompleted: NumberInput
- notes: TextArea
- photos: FileUpload (imagenes)
```
### MilestoneTimeline
```tsx
interface MilestoneTimelineProps {
milestones: Milestone[];
orientation?: 'horizontal' | 'vertical';
onMilestoneClick?: (id: string) => void;
}
```
---
## Schedule Components
### ScheduleCalendar
```tsx
interface ScheduleCalendarProps {
activities: Activity[];
view: 'month' | 'week' | 'day';
onDateClick?: (date: Date) => void;
onActivityClick?: (activity: Activity) => void;
onActivityMove?: (activityId: string, newDate: Date) => void;
}
```
### ResourceCalendar
```tsx
interface ResourceCalendarProps {
resources: Resource[];
assignments: ResourceAssignment[];
view: 'week' | 'month';
onAssign?: (resourceId: string, date: Date) => void;
}
```
### CriticalPathView
```tsx
interface CriticalPathViewProps {
tasks: CriticalPathTask[];
highlightCritical?: boolean;
}
```
---
## Estimate Components
### EstimateForm
```tsx
interface EstimateFormProps {
projectId?: string;
estimate?: Estimate;
onSubmit: (data: CreateEstimateDto) => void;
onCancel: () => void;
templates?: EstimateTemplate[];
}
```
### EstimateLineItems
```tsx
interface EstimateLineItemsProps {
items: EstimateItem[];
editable?: boolean;
onAdd?: () => void;
onUpdate?: (itemId: string, data: Partial) => void;
onDelete?: (itemId: string) => void;
}
```
### EstimatePDF
```tsx
interface EstimatePDFProps {
estimate: Estimate;
template?: 'standard' | 'detailed' | 'summary';
}
// Genera PDF para impresion/descarga
// Incluye logo de empresa, terminos, etc.
```
---
## Dashboard Widgets
### ProjectSummaryWidget
```tsx
interface ProjectSummaryWidgetProps {
projectId: string;
}
// Resumen rapido del proyecto
// Metricas clave
// Links a secciones
```
### ActiveProjectsWidget
```tsx
interface ActiveProjectsWidgetProps {
limit?: number;
onViewAll?: () => void;
}
```
### UpcomingMilestonesWidget
```tsx
interface UpcomingMilestonesWidgetProps {
days?: number;
onMilestoneClick?: (id: string) => void;
}
```
### BudgetHealthWidget
```tsx
interface BudgetHealthWidgetProps {
projectId?: string; // null = todos los proyectos
}
// Indicador de salud financiera
// Verde/Amarillo/Rojo segun desviacion
```
### TeamWorkloadWidget
```tsx
interface TeamWorkloadWidgetProps {
teamId?: string;
period?: 'week' | 'month';
}
```
---
*Ultima actualizacion: 2025-12-05*