524 lines
9.3 KiB
Markdown
524 lines
9.3 KiB
Markdown
# 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*
|