# 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
<Card>
  <Header>
    <ProjectCode />
    <StatusBadge />
  </Header>
  <Body>
    <ProjectName />
    <ProjectDescription />
    {showProgress && <ProgressBar />}
    {showBudget && <BudgetSummary />}
  </Body>
  <Footer>
    <DateInfo />
    <AssignedTeam />
  </Footer>
</Card>
```

### 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<BudgetItem>) => 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<EstimateItem>) => 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*
