9.3 KiB
9.3 KiB
Construction Components Specification
Version: 1.0.0 Fecha: 2025-12-05 Modulos: MAI-002, MAI-003, MAI-005
Project Components
ProjectCard
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
interface ProjectListProps {
projects: Project[];
loading?: boolean;
emptyMessage?: string;
onClick?: (project: Project) => void;
onEdit?: (project: Project) => void;
onDelete?: (project: Project) => void;
}
ProjectGrid
interface ProjectGridProps {
projects: Project[];
columns?: 2 | 3 | 4;
loading?: boolean;
onClick?: (project: Project) => void;
}
ProjectKanban
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
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
interface ProjectStatusTimelineProps {
projectId: string;
history: StatusChange[];
}
interface StatusChange {
status: ProjectStatus;
changedAt: Date;
changedBy: User;
notes?: string;
}
Development Components
DevelopmentCard
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
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
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
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
interface BudgetOverviewProps {
budget: Budget;
showVariance?: boolean;
}
// Muestra
- Total presupuestado vs ejecutado
- Grafico de barras por categoria
- Porcentaje de ejecucion
- Alertas de desviacion
BudgetTable
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
interface BudgetFormProps {
projectId: string;
budget?: Budget;
onSubmit: (data: CreateBudgetDto) => void;
onCancel: () => void;
}
// Permite crear/editar presupuesto
// Importar desde Excel
// Agregar partidas manualmente
BudgetItemEditor
interface BudgetItemEditorProps {
item?: BudgetItem;
parentId?: string;
onSave: (data: CreateBudgetItemDto) => void;
onCancel: () => void;
}
BudgetChart
interface BudgetChartProps {
budget: Budget;
type: 'bar' | 'pie' | 'treemap';
groupBy: 'category' | 'phase' | 'contractor';
}
BudgetVarianceAlert
interface BudgetVarianceAlertProps {
budgetId: string;
threshold: number; // porcentaje de desviacion para alertar
onAction?: () => void;
}
Progress Components
ProgressDashboard
interface ProgressDashboardProps {
projectId: string;
}
// Contenido
- Avance global (gauge)
- Avance por fase (barras)
- Curva S (lineas)
- Timeline de hitos
ProgressCurve (Curva S)
interface ProgressCurveProps {
data: ProgressData[];
showPlanned?: boolean;
showActual?: boolean;
showProjected?: boolean;
height?: number;
}
interface ProgressData {
date: Date;
planned: number;
actual: number;
projected?: number;
}
PhaseProgress
interface PhaseProgressProps {
phases: Phase[];
currentPhase?: string;
onPhaseClick?: (phaseId: string) => void;
}
// Muestra progreso por fase
// Indicador de fase actual
// Fechas de inicio/fin
ActivityList
interface ActivityListProps {
activities: Activity[];
onActivityClick?: (activity: Activity) => void;
onStatusChange?: (activityId: string, status: ActivityStatus) => void;
showDependencies?: boolean;
}
GanttChart
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
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
interface MilestoneTimelineProps {
milestones: Milestone[];
orientation?: 'horizontal' | 'vertical';
onMilestoneClick?: (id: string) => void;
}
Schedule Components
ScheduleCalendar
interface ScheduleCalendarProps {
activities: Activity[];
view: 'month' | 'week' | 'day';
onDateClick?: (date: Date) => void;
onActivityClick?: (activity: Activity) => void;
onActivityMove?: (activityId: string, newDate: Date) => void;
}
ResourceCalendar
interface ResourceCalendarProps {
resources: Resource[];
assignments: ResourceAssignment[];
view: 'week' | 'month';
onAssign?: (resourceId: string, date: Date) => void;
}
CriticalPathView
interface CriticalPathViewProps {
tasks: CriticalPathTask[];
highlightCritical?: boolean;
}
Estimate Components
EstimateForm
interface EstimateFormProps {
projectId?: string;
estimate?: Estimate;
onSubmit: (data: CreateEstimateDto) => void;
onCancel: () => void;
templates?: EstimateTemplate[];
}
EstimateLineItems
interface EstimateLineItemsProps {
items: EstimateItem[];
editable?: boolean;
onAdd?: () => void;
onUpdate?: (itemId: string, data: Partial<EstimateItem>) => void;
onDelete?: (itemId: string) => void;
}
EstimatePDF
interface EstimatePDFProps {
estimate: Estimate;
template?: 'standard' | 'detailed' | 'summary';
}
// Genera PDF para impresion/descarga
// Incluye logo de empresa, terminos, etc.
Dashboard Widgets
ProjectSummaryWidget
interface ProjectSummaryWidgetProps {
projectId: string;
}
// Resumen rapido del proyecto
// Metricas clave
// Links a secciones
ActiveProjectsWidget
interface ActiveProjectsWidgetProps {
limit?: number;
onViewAll?: () => void;
}
UpcomingMilestonesWidget
interface UpcomingMilestonesWidgetProps {
days?: number;
onMilestoneClick?: (id: string) => void;
}
BudgetHealthWidget
interface BudgetHealthWidgetProps {
projectId?: string; // null = todos los proyectos
}
// Indicador de salud financiera
// Verde/Amarillo/Rojo segun desviacion
TeamWorkloadWidget
interface TeamWorkloadWidgetProps {
teamId?: string;
period?: 'week' | 'month';
}
Ultima actualizacion: 2025-12-05