748 lines
33 KiB
TypeScript
748 lines
33 KiB
TypeScript
import React, { useState, useMemo, useEffect } from 'react';
|
|
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
|
|
import { Head, router, usePage } from '@inertiajs/react';
|
|
import { Badge } from '@/Components/ui/badge';
|
|
import { Check, AlertTriangle, Sparkles } from 'lucide-react';
|
|
import { MaterialCatalogModal, MaterialOption } from '@modules/MaterialLogistics/resources/js/Pages/Requisitions/MaterialCatalogModal';
|
|
import LaborLookupModal from '../../Components/LaborLookupModal';
|
|
import EquipmentLookupModal from '../../Components/EquipmentLookupModal';
|
|
import { ProjectWizardProps, Labor, Equipment } from '../../types/project-wizard';
|
|
import Step1Details from './Wizard/Step1Details';
|
|
import Step2Tasks from './Wizard/Step2Tasks';
|
|
import Step3Materials from './Wizard/Step3Materials';
|
|
import Step4Manpower from './Wizard/Step4Manpower';
|
|
import Step5Equipment from './Wizard/Step5Equipment';
|
|
import Step6Estimation from './Wizard/Step6Estimation';
|
|
import Step7Submit from './Wizard/Step7Submit';
|
|
|
|
export default function Wizard({
|
|
project,
|
|
step: currentStep,
|
|
employees,
|
|
projects = [],
|
|
classifications = [],
|
|
materials = [],
|
|
materialGroups = [],
|
|
labors = [],
|
|
equipments = [],
|
|
teams = []
|
|
}: ProjectWizardProps) {
|
|
const { errors } = usePage<any>().props;
|
|
const [step, setStep] = useState(currentStep);
|
|
const [catalogModalOpen, setCatalogModalOpen] = useState(false);
|
|
|
|
const [laborModalOpen, setLaborModalOpen] = useState(false);
|
|
const [activeLaborRowIdx, setActiveLaborRowIdx] = useState<number | null>(null);
|
|
|
|
const [equipmentModalOpen, setEquipmentModalOpen] = useState(false);
|
|
const [activeEquipmentRowIdx, setActiveEquipmentRowIdx] = useState<number | null>(null);
|
|
|
|
// Step 1 Local State (Project Details)
|
|
const [step1Details, setStep1Details] = useState<any>(() => ({
|
|
name: project.name || '',
|
|
project_type: project.project_type || 'standard',
|
|
classifications: project.classifications || [],
|
|
is_unprofitable: project.is_unprofitable || false,
|
|
location: project.location || '',
|
|
client_name: project.client_name || '',
|
|
start_date: (project as any).start_date || '',
|
|
target_end_date: (project as any).target_end_date || '',
|
|
contract_duration: (project as any).contract_duration || '',
|
|
description: (project as any).description || '',
|
|
pm_id: (project as any).pm_id ? String((project as any).pm_id) : '',
|
|
contract_value: project.contract_value || '',
|
|
parent_project_id: project.parent_project_id ? String(project.parent_project_id) : '',
|
|
}));
|
|
|
|
// Step 2 Local States (Tasks & Milestones)
|
|
const [localMilestones, setLocalMilestones] = useState<any[]>(() => {
|
|
return project.milestones ? project.milestones.map(m => ({
|
|
ulid: m.ulid,
|
|
name: m.name,
|
|
weight_percentage: String(m.weight_percentage),
|
|
target_date: m.planned_date ? m.planned_date.substring(0, 10) : (m.target_date ? m.target_date.substring(0, 10) : '')
|
|
})) : [];
|
|
});
|
|
const [localTasks, setLocalTasks] = useState<any[]>(() => {
|
|
return project.tasks.length > 0 ? project.tasks.map(t => ({
|
|
ulid: t.ulid,
|
|
name: t.name,
|
|
description: t.description || '',
|
|
milestone_ulid: t.milestone?.ulid || '',
|
|
start_date: t.start_date || '',
|
|
end_date: t.end_date || ''
|
|
})) : [];
|
|
});
|
|
const [prepopulateMilestones, setPrepopulateMilestones] = useState(false);
|
|
|
|
// Step 3 Local States (Material Estimates)
|
|
const [localEstimates, setLocalEstimates] = useState<any[]>(() => {
|
|
return project.materials_estimates.length > 0 ? project.materials_estimates.map(e => ({
|
|
material_ulid: e.material.ulid,
|
|
material_name: e.material.name,
|
|
unit: e.material.unit,
|
|
estimated_qty: String(e.estimated_qty),
|
|
unit_cost: String(e.unit_cost)
|
|
})) : [];
|
|
});
|
|
|
|
// Step 4 Local States (Manpower/Labor allocations)
|
|
const [localLabor, setLocalLabor] = useState<any[]>(() => {
|
|
const list: any[] = [];
|
|
project.tasks.forEach(t => {
|
|
if (t.task_labors && t.task_labors.length > 0) {
|
|
const bundleGroups: { [key: string]: any[] } = {};
|
|
|
|
t.task_labors.forEach((tl: any) => {
|
|
if (tl.allocation_type === 'bundle' && tl.bundle_name) {
|
|
const bKey = `${t.ulid}_${tl.bundle_name}`;
|
|
if (!bundleGroups[bKey]) {
|
|
bundleGroups[bKey] = [];
|
|
}
|
|
bundleGroups[bKey].push(tl);
|
|
} else {
|
|
list.push({
|
|
type: 'trade',
|
|
task_ulid: t.ulid,
|
|
task_name: t.name,
|
|
labor_ulid: tl.labor?.ulid || '',
|
|
name: tl.labor?.name || 'Labor Trade',
|
|
category: tl.labor?.category || 'skilled',
|
|
unit: 'hrs',
|
|
unit_rate: Number(tl.labor?.hourly_rate || 0),
|
|
quantity: String(tl.estimated_hours),
|
|
estimated_hours: String(tl.estimated_hours)
|
|
});
|
|
}
|
|
});
|
|
|
|
Object.values(bundleGroups).forEach(group => {
|
|
const first = group[0];
|
|
list.push({
|
|
type: 'bundle',
|
|
task_ulid: t.ulid,
|
|
task_name: t.name,
|
|
name: first.bundle_name,
|
|
unit: first.bundle_unit || 'm²',
|
|
quantity: String(first.bundle_quantity || 10),
|
|
unit_rate: Number(first.bundle_unit_rate || 0),
|
|
bundle_items: group.map((tl: any) => ({
|
|
labor_name: tl.labor?.name || 'Trade',
|
|
category: tl.labor?.category || 'skilled',
|
|
rate_per_sqm: Number(tl.bundle_unit_rate || 0) / group.length,
|
|
estimated_hourly_rate: Number(tl.labor?.hourly_rate || 0)
|
|
}))
|
|
});
|
|
});
|
|
}
|
|
});
|
|
return list;
|
|
});
|
|
|
|
// Step 5 Local States (Equipment allocations)
|
|
const [localEquipment, setLocalEquipment] = useState<any[]>(() => {
|
|
const list: any[] = [];
|
|
project.tasks.forEach(t => {
|
|
if (t.task_equipments && t.task_equipments.length > 0) {
|
|
t.task_equipments.forEach((te: any) => {
|
|
list.push({
|
|
task_ulid: t.ulid,
|
|
task_name: t.name,
|
|
equipment_ulid: te.equipment?.ulid || '',
|
|
estimated_hours: String(te.estimated_hours)
|
|
});
|
|
});
|
|
}
|
|
});
|
|
return list;
|
|
});
|
|
|
|
// Step 7 Local States (Approval Submission)
|
|
const [submissionNotes, setSubmissionNotes] = useState('');
|
|
|
|
// Step 4 Team Roster / Personnel Pool Local States
|
|
const [selectedUserUlids, setSelectedUserUlids] = useState<string[]>(() => {
|
|
return project.personnel ? project.personnel.map((p: any) => p.ulid) : [];
|
|
});
|
|
|
|
const [selectedTeamUlids, setSelectedTeamUlids] = useState<string[]>(() => {
|
|
const activePersonnelUlids = project.personnel ? project.personnel.map((p: any) => p.ulid) : [];
|
|
return teams.filter(t => t.users && t.users.length > 0 && t.users.every((u: any) => activePersonnelUlids.includes(u.ulid))).map(t => t.ulid);
|
|
});
|
|
|
|
// Prepopulate default milestones locally when toggle checked
|
|
useEffect(() => {
|
|
if (prepopulateMilestones && localMilestones.length === 0) {
|
|
const projectStart = project.start_date ? new Date(project.start_date) : new Date();
|
|
const projectEnd = project.target_end_date ? new Date(project.target_end_date) : new Date(Date.now() + 90 * 86400000);
|
|
const totalTime = Math.max(0, projectEnd.getTime() - projectStart.getTime());
|
|
|
|
const defaults = [
|
|
{ name: 'Mobilization', weight_percentage: '5', fraction: 0.05 },
|
|
{ name: 'Earthworks & Foundation', weight_percentage: '15', fraction: 0.20 },
|
|
{ name: 'Structural Works', weight_percentage: '25', fraction: 0.45 },
|
|
{ name: 'Roofing & Waterproofing', weight_percentage: '15', fraction: 0.60 },
|
|
{ name: 'Architectural Finishing', weight_percentage: '20', fraction: 0.80 },
|
|
{ name: 'MEP Rough-In', weight_percentage: '10', fraction: 0.90 },
|
|
{ name: 'Final Inspection & Punch List', weight_percentage: '5', fraction: 0.95 },
|
|
{ name: 'Turnover', weight_percentage: '5', fraction: 1.00 }
|
|
];
|
|
|
|
setLocalMilestones(defaults.map(d => {
|
|
const targetDate = new Date(projectStart.getTime() + (totalTime * d.fraction));
|
|
return {
|
|
name: d.name,
|
|
weight_percentage: d.weight_percentage,
|
|
target_date: targetDate.toISOString().split('T')[0]
|
|
};
|
|
}));
|
|
}
|
|
}, [prepopulateMilestones]);
|
|
|
|
// Financial Summaries
|
|
const formatCurrency = (v: string | number) => {
|
|
return new Intl.NumberFormat('en-PH', { style: 'currency', currency: 'PHP' }).format(Number(v));
|
|
};
|
|
|
|
const calculatedLaborCost = useMemo(() => {
|
|
return localLabor.reduce((sum, item) => {
|
|
if (item.type === 'bundle') {
|
|
const rate = Number(item.unit_rate || 0);
|
|
const area = Number(item.quantity || 0);
|
|
return sum + (area * rate);
|
|
} else {
|
|
const rateObj = labors.find(r => r.ulid === item.labor_ulid);
|
|
const rate = rateObj ? Number(rateObj.hourly_rate) : Number(item.unit_rate || 0);
|
|
const hours = Number(item.quantity || item.estimated_hours || 0);
|
|
return sum + (hours * rate);
|
|
}
|
|
}, 0);
|
|
}, [localLabor, labors]);
|
|
|
|
const calculatedEquipmentCost = useMemo(() => {
|
|
return localEquipment.reduce((sum, item) => {
|
|
const rateObj = equipments.find(r => r.ulid === item.equipment_ulid);
|
|
const rate = rateObj ? Number(rateObj.hourly_rate) : 0;
|
|
return sum + (Number(item.estimated_hours) * rate);
|
|
}, 0);
|
|
}, [localEquipment, equipments]);
|
|
|
|
const calculatedMaterialsCost = useMemo(() => {
|
|
return localEstimates.reduce((sum, item) => {
|
|
return sum + (Number(item.estimated_qty) * Number(item.unit_cost));
|
|
}, 0);
|
|
}, [localEstimates]);
|
|
|
|
const totalEstimatedCost = calculatedMaterialsCost + calculatedLaborCost + calculatedEquipmentCost;
|
|
const contractValueNum = Number(project.contract_value);
|
|
const grossMarginVal = contractValueNum - totalEstimatedCost;
|
|
const grossMarginPct = contractValueNum > 0 ? (grossMarginVal / contractValueNum) * 100 : 0;
|
|
const isUnprofitableEst = grossMarginVal < 0 || project.is_unprofitable;
|
|
|
|
// Stepper Titles
|
|
const stepsList = [
|
|
{ id: 1, label: 'Details' },
|
|
{ id: 2, label: 'Tasks' },
|
|
{ id: 3, label: 'Materials' },
|
|
{ id: 4, label: 'Manpower' },
|
|
{ id: 5, label: 'Equipment' },
|
|
{ id: 6, label: 'Estimation' },
|
|
{ id: 7, label: 'Submit' }
|
|
];
|
|
|
|
// Navigation and Saves
|
|
const handleBack = () => {
|
|
if (step > 1) {
|
|
router.get(route('projects.wizard', [project.ulid, { step: step - 1 }]));
|
|
}
|
|
};
|
|
|
|
const handleSaveTasks = () => {
|
|
router.post(route('projects.wizard.tasks', project.ulid), {
|
|
prepopulate_milestones: prepopulateMilestones,
|
|
milestones: localMilestones,
|
|
tasks: localTasks
|
|
}, {
|
|
onSuccess: () => setStep(3)
|
|
});
|
|
};
|
|
|
|
const handleSaveEstimates = () => {
|
|
router.post(route('projects.wizard.estimates', project.ulid), {
|
|
estimates: localEstimates
|
|
}, {
|
|
onSuccess: () => setStep(4)
|
|
});
|
|
};
|
|
|
|
const handleSaveLabor = () => {
|
|
const flattenedLabor: any[] = [];
|
|
|
|
localLabor.forEach(item => {
|
|
const targetTaskUlid = (item.task_ulid && item.task_ulid !== 'general')
|
|
? item.task_ulid
|
|
: (project.tasks[0]?.ulid || '');
|
|
|
|
if (!targetTaskUlid) return;
|
|
|
|
if (item.type === 'bundle') {
|
|
const area = Number(item.quantity || 0);
|
|
const bundleItems = item.bundle_items || [];
|
|
const bundleRate = Number(item.unit_rate || 0);
|
|
|
|
bundleItems.forEach((bItem: any) => {
|
|
const matched = labors.find(l =>
|
|
l.name.toLowerCase().includes(bItem.labor_name.toLowerCase()) ||
|
|
bItem.labor_name.toLowerCase().includes(l.name.toLowerCase())
|
|
) || (labors.find(l => l.category === bItem.category) || labors[0]);
|
|
|
|
if (matched) {
|
|
const itemRatePerSqm = Number(bItem.rate_per_sqm || bItem.estimated_hourly_rate || 50);
|
|
const itemCost = itemRatePerSqm * area;
|
|
const hourlyRate = Number(matched.hourly_rate) || 100;
|
|
const hours = itemCost / hourlyRate;
|
|
|
|
flattenedLabor.push({
|
|
task_ulid: targetTaskUlid,
|
|
labor_ulid: matched.ulid,
|
|
allocation_type: 'bundle',
|
|
bundle_name: item.name,
|
|
bundle_unit: 'm²',
|
|
bundle_quantity: String(area),
|
|
bundle_unit_rate: String(bundleRate),
|
|
estimated_hours: (Math.round(hours * 100) / 100).toFixed(2)
|
|
});
|
|
}
|
|
});
|
|
} else {
|
|
if (item.labor_ulid) {
|
|
const rateObj = labors.find(r => r.ulid === item.labor_ulid);
|
|
flattenedLabor.push({
|
|
task_ulid: targetTaskUlid,
|
|
labor_ulid: item.labor_ulid,
|
|
allocation_type: 'trade',
|
|
bundle_name: null,
|
|
bundle_unit: 'hrs',
|
|
bundle_quantity: String(item.quantity || item.estimated_hours || 0),
|
|
bundle_unit_rate: String(rateObj ? rateObj.hourly_rate : (item.unit_rate || 0)),
|
|
estimated_hours: String(item.quantity || item.estimated_hours || 0)
|
|
});
|
|
}
|
|
}
|
|
});
|
|
|
|
router.post(route('projects.wizard.labor', project.ulid), {
|
|
labor: flattenedLabor,
|
|
team_ulids: selectedTeamUlids,
|
|
user_ulids: selectedUserUlids,
|
|
}, {
|
|
onSuccess: () => setStep(5)
|
|
});
|
|
};
|
|
|
|
const handleSaveEquipment = () => {
|
|
router.post(route('projects.wizard.equipment', project.ulid), {
|
|
equipment: localEquipment
|
|
}, {
|
|
onSuccess: () => setStep(6)
|
|
});
|
|
};
|
|
|
|
const handleSubmitApproval = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
router.post(route('projects.wizard.submit', project.ulid), {
|
|
notes: submissionNotes
|
|
});
|
|
};
|
|
|
|
const handleCatalogSelect = (selectedMaterials: MaterialOption[]) => {
|
|
const mapped = selectedMaterials.map(m => ({
|
|
material_ulid: m.ulid,
|
|
material_name: m.name,
|
|
unit: m.unit,
|
|
estimated_qty: '1',
|
|
unit_cost: String(m.unit_cost || 0)
|
|
}));
|
|
const filtered = mapped.filter(m => !localEstimates.some(e => e.material_ulid === m.material_ulid));
|
|
setLocalEstimates([...localEstimates, ...filtered]);
|
|
setCatalogModalOpen(false);
|
|
};
|
|
|
|
const handleCatalogAddKit = (group: any, quantityMultiplier: number) => {
|
|
if (!group.materials) return;
|
|
const mapped = group.materials.map((m: any) => ({
|
|
material_ulid: m.ulid,
|
|
material_name: m.name,
|
|
unit: m.unit,
|
|
estimated_qty: String((m.pivot?.quantity || 1) * quantityMultiplier),
|
|
unit_cost: String(m.unit_cost || 0)
|
|
}));
|
|
const updatedEstimates = [...localEstimates];
|
|
mapped.forEach((newItem: any) => {
|
|
const existingIdx = updatedEstimates.findIndex(e => e.material_ulid === newItem.material_ulid);
|
|
if (existingIdx > -1) {
|
|
const existingQty = Number(updatedEstimates[existingIdx].estimated_qty) || 0;
|
|
updatedEstimates[existingIdx].estimated_qty = String(existingQty + Number(newItem.estimated_qty));
|
|
} else {
|
|
updatedEstimates.push(newItem);
|
|
}
|
|
});
|
|
setLocalEstimates(updatedEstimates);
|
|
setCatalogModalOpen(false);
|
|
};
|
|
|
|
const handleSelectLabor = (labor: Labor) => {
|
|
if (activeLaborRowIdx !== null) {
|
|
setLocalLabor(prev => prev.map((item, i) => i === activeLaborRowIdx ? {
|
|
...item,
|
|
type: 'trade',
|
|
labor_ulid: labor.ulid,
|
|
name: labor.name,
|
|
category: labor.category,
|
|
unit: 'hrs',
|
|
unit_rate: Number(labor.hourly_rate),
|
|
quantity: item.quantity || item.estimated_hours || '40',
|
|
estimated_hours: item.quantity || item.estimated_hours || '40'
|
|
} : item));
|
|
} else {
|
|
setLocalLabor(prev => [
|
|
...prev,
|
|
{
|
|
type: 'trade',
|
|
task_ulid: 'general',
|
|
labor_ulid: labor.ulid,
|
|
name: labor.name,
|
|
category: labor.category,
|
|
unit: 'hrs',
|
|
unit_rate: Number(labor.hourly_rate),
|
|
quantity: '40',
|
|
estimated_hours: '40'
|
|
}
|
|
]);
|
|
}
|
|
setLaborModalOpen(false);
|
|
setActiveLaborRowIdx(null);
|
|
};
|
|
|
|
const handleAddLaborBundle = (bundle: any, crewMultiplier: number) => {
|
|
const ratePerSqm = bundle.items.reduce((sum: number, item: any) => sum + (item.rate_per_sqm || item.estimated_hourly_rate || 0), 0);
|
|
const sqmArea = crewMultiplier || 10;
|
|
|
|
const newBundleData = {
|
|
type: 'bundle',
|
|
bundle_id: bundle.id,
|
|
name: bundle.name,
|
|
job_type: bundle.job_type,
|
|
category: bundle.category,
|
|
unit: 'm²',
|
|
unit_rate: ratePerSqm,
|
|
quantity: String(sqmArea),
|
|
bundle_items: bundle.items
|
|
};
|
|
|
|
if (activeLaborRowIdx !== null) {
|
|
setLocalLabor(prev => prev.map((item, i) => i === activeLaborRowIdx ? {
|
|
...item,
|
|
...newBundleData,
|
|
task_ulid: item.task_ulid || 'general'
|
|
} : item));
|
|
} else {
|
|
setLocalLabor(prev => [
|
|
...prev,
|
|
{
|
|
...newBundleData,
|
|
task_ulid: 'general'
|
|
}
|
|
]);
|
|
}
|
|
setLaborModalOpen(false);
|
|
setActiveLaborRowIdx(null);
|
|
};
|
|
|
|
const handleSelectEquipment = (equipment: Equipment) => {
|
|
if (activeEquipmentRowIdx !== null) {
|
|
updateEquipmentAllocation(activeEquipmentRowIdx, 'equipment_ulid', equipment.ulid);
|
|
}
|
|
setEquipmentModalOpen(false);
|
|
setActiveEquipmentRowIdx(null);
|
|
};
|
|
|
|
// Task & Milestone Helpers
|
|
const addMilestone = () => {
|
|
setLocalMilestones([...localMilestones, { name: '', weight_percentage: '0' }]);
|
|
};
|
|
|
|
const removeMilestone = (idx: number) => {
|
|
setLocalMilestones(localMilestones.filter((_, i) => i !== idx));
|
|
};
|
|
|
|
const updateMilestone = (idx: number, field: string, val: string) => {
|
|
setLocalMilestones(localMilestones.map((m, i) => i === idx ? { ...m, [field]: val } : m));
|
|
};
|
|
|
|
const addTask = () => {
|
|
setLocalTasks([...localTasks, { name: '', description: '', milestone_ulid: '', start_date: '', end_date: '' }]);
|
|
};
|
|
|
|
const removeTask = (idx: number) => {
|
|
setLocalTasks(localTasks.filter((_, i) => i !== idx));
|
|
};
|
|
|
|
const updateTask = (idx: number, field: string, val: string) => {
|
|
setLocalTasks(localTasks.map((t, i) => i === idx ? { ...t, [field]: val } : t));
|
|
};
|
|
|
|
// Allocations Helpers
|
|
const addLaborAllocation = () => {
|
|
setLocalLabor([...localLabor, {
|
|
type: 'trade',
|
|
task_ulid: 'general',
|
|
labor_ulid: '',
|
|
name: '',
|
|
unit: 'hrs',
|
|
unit_rate: 0,
|
|
quantity: '40',
|
|
estimated_hours: '40'
|
|
}]);
|
|
};
|
|
|
|
const removeLaborAllocation = (idx: number) => {
|
|
setLocalLabor(localLabor.filter((_, i) => i !== idx));
|
|
};
|
|
|
|
const updateLaborAllocation = (idx: number, field: string, val: string) => {
|
|
setLocalLabor(localLabor.map((item, i) => {
|
|
if (i !== idx) return item;
|
|
const updated = { ...item, [field]: val };
|
|
if (field === 'quantity') {
|
|
updated.estimated_hours = val;
|
|
}
|
|
return updated;
|
|
}));
|
|
};
|
|
|
|
const addEquipmentAllocation = () => {
|
|
setLocalEquipment([...localEquipment, { task_ulid: '', equipment_ulid: '', estimated_hours: '0' }]);
|
|
};
|
|
|
|
const removeEquipmentAllocation = (idx: number) => {
|
|
setLocalEquipment(localEquipment.filter((_, i) => i !== idx));
|
|
};
|
|
|
|
const updateEquipmentAllocation = (idx: number, field: string, val: string) => {
|
|
setLocalEquipment(localEquipment.map((item, i) => i === idx ? { ...item, [field]: val } : item));
|
|
};
|
|
|
|
return (
|
|
<AuthenticatedLayout
|
|
header={
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h2 className="text-xl font-bold leading-tight text-slate-800 flex items-center gap-2">
|
|
<Sparkles className="h-5 w-5 text-emerald-500" /> Project Wizard: {project.name}
|
|
</h2>
|
|
<p className="text-xs text-slate-500 mt-0.5">{project.code} · Guided Project Estimation Setup</p>
|
|
</div>
|
|
<Badge className={
|
|
project.status === 'planning' ? 'bg-amber-50 text-amber-700 border-amber-100' : 'bg-emerald-50 text-emerald-700 border-emerald-100'
|
|
}>
|
|
{project.status.replace(/_/g, ' ')}
|
|
</Badge>
|
|
</div>
|
|
}
|
|
>
|
|
<Head title={`Setup Wizard: ${project.name}`} />
|
|
|
|
<div className="py-6 bg-slate-50/50 min-h-[calc(100vh-65px)]">
|
|
<div className="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8 space-y-6">
|
|
{/* Stepper Header */}
|
|
<div className="bg-white px-6 py-4 rounded-xl border border-slate-200/80 shadow-xs">
|
|
<div className="flex justify-between items-center relative">
|
|
<div className="absolute left-6 right-6 top-4 -translate-y-1/2 h-[2px] bg-slate-100 z-0 hidden md:block" />
|
|
|
|
{stepsList.map((s) => {
|
|
const isActive = step === s.id;
|
|
const isCompleted = step > s.id || project.current_wizard_step > s.id;
|
|
return (
|
|
<div key={s.id} className="flex flex-col items-center z-10 relative">
|
|
<div className={`h-8 w-8 rounded-full flex items-center justify-center font-bold text-xs border transition-all duration-200 ${
|
|
isActive
|
|
? 'bg-emerald-600 border-emerald-600 text-white shadow-xs'
|
|
: isCompleted
|
|
? 'bg-emerald-50 border-emerald-300 text-emerald-700'
|
|
: 'bg-white border-slate-200 text-slate-400'
|
|
}`}>
|
|
{isCompleted ? <Check className="h-4 w-4 stroke-[2.5px]" /> : s.id}
|
|
</div>
|
|
<span className={`text-[11px] mt-1.5 font-medium transition-all ${
|
|
isActive ? 'text-emerald-700 font-bold' : isCompleted ? 'text-slate-700' : 'text-slate-400'
|
|
}`}>{s.label}</span>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Step Content Container */}
|
|
<div className="bg-white rounded-2xl border border-slate-200/80 shadow-xs overflow-visible">
|
|
{Object.keys(errors || {}).length > 0 && (
|
|
<div className="p-4 bg-rose-50 border-b border-rose-100 text-rose-800 text-xs space-y-1">
|
|
<p className="font-bold text-rose-900 flex items-center gap-1.5">
|
|
<AlertTriangle className="h-4 w-4 text-rose-600 animate-pulse" />
|
|
Please correct the following errors before proceeding:
|
|
</p>
|
|
<ul className="list-disc pl-5 mt-1 space-y-0.5 font-medium">
|
|
{Object.entries(errors).map(([key, val]) => (
|
|
<li key={key}>{String(val)}</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
|
|
{step === 1 && (
|
|
<Step1Details
|
|
project={project}
|
|
step1Details={step1Details}
|
|
setStep1Details={setStep1Details}
|
|
errors={errors}
|
|
employees={employees}
|
|
projects={projects}
|
|
classifications={classifications}
|
|
onNext={() => setStep(2)}
|
|
/>
|
|
)}
|
|
|
|
{step === 2 && (
|
|
<Step2Tasks
|
|
localMilestones={localMilestones}
|
|
localTasks={localTasks}
|
|
prepopulateMilestones={prepopulateMilestones}
|
|
setPrepopulateMilestones={setPrepopulateMilestones}
|
|
addMilestone={addMilestone}
|
|
removeMilestone={removeMilestone}
|
|
updateMilestone={updateMilestone}
|
|
addTask={addTask}
|
|
removeTask={removeTask}
|
|
updateTask={updateTask}
|
|
handleBack={handleBack}
|
|
handleSaveTasks={handleSaveTasks}
|
|
/>
|
|
)}
|
|
|
|
{step === 3 && (
|
|
<Step3Materials
|
|
localEstimates={localEstimates}
|
|
setLocalEstimates={setLocalEstimates}
|
|
calculatedMaterialsCost={calculatedMaterialsCost}
|
|
formatCurrency={formatCurrency}
|
|
onOpenCatalog={() => setCatalogModalOpen(true)}
|
|
handleBack={handleBack}
|
|
handleSaveEstimates={handleSaveEstimates}
|
|
/>
|
|
)}
|
|
|
|
{step === 4 && (
|
|
<Step4Manpower
|
|
project={project}
|
|
localLabor={localLabor}
|
|
labors={labors}
|
|
employees={employees}
|
|
teams={teams}
|
|
selectedTeamUlids={selectedTeamUlids}
|
|
setSelectedTeamUlids={setSelectedTeamUlids}
|
|
selectedUserUlids={selectedUserUlids}
|
|
setSelectedUserUlids={setSelectedUserUlids}
|
|
addLaborAllocation={addLaborAllocation}
|
|
removeLaborAllocation={removeLaborAllocation}
|
|
updateLaborAllocation={updateLaborAllocation}
|
|
calculatedLaborCost={calculatedLaborCost}
|
|
formatCurrency={formatCurrency}
|
|
onOpenLaborCatalog={(idx) => {
|
|
setActiveLaborRowIdx(idx !== undefined ? idx : null);
|
|
setLaborModalOpen(true);
|
|
}}
|
|
handleBack={handleBack}
|
|
handleSaveLabor={handleSaveLabor}
|
|
/>
|
|
)}
|
|
|
|
{step === 5 && (
|
|
<Step5Equipment
|
|
project={project}
|
|
localEquipment={localEquipment}
|
|
equipments={equipments}
|
|
addEquipmentAllocation={addEquipmentAllocation}
|
|
removeEquipmentAllocation={removeEquipmentAllocation}
|
|
updateEquipmentAllocation={updateEquipmentAllocation}
|
|
calculatedEquipmentCost={calculatedEquipmentCost}
|
|
formatCurrency={formatCurrency}
|
|
onOpenEquipmentLookup={(idx) => {
|
|
setActiveEquipmentRowIdx(idx);
|
|
setEquipmentModalOpen(true);
|
|
}}
|
|
handleBack={handleBack}
|
|
handleSaveEquipment={handleSaveEquipment}
|
|
/>
|
|
)}
|
|
|
|
{step === 6 && (
|
|
<Step6Estimation
|
|
project={project}
|
|
isUnprofitableEst={isUnprofitableEst}
|
|
calculatedMaterialsCost={calculatedMaterialsCost}
|
|
calculatedLaborCost={calculatedLaborCost}
|
|
calculatedEquipmentCost={calculatedEquipmentCost}
|
|
totalEstimatedCost={totalEstimatedCost}
|
|
grossMarginVal={grossMarginVal}
|
|
grossMarginPct={grossMarginPct}
|
|
contractValueNum={contractValueNum}
|
|
formatCurrency={formatCurrency}
|
|
handleBack={handleBack}
|
|
onNext={() => setStep(7)}
|
|
/>
|
|
)}
|
|
|
|
{step === 7 && (
|
|
<Step7Submit
|
|
project={project}
|
|
errors={errors}
|
|
submissionNotes={submissionNotes}
|
|
setSubmissionNotes={setSubmissionNotes}
|
|
handleBack={handleBack}
|
|
handleSubmitApproval={handleSubmitApproval}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Modals */}
|
|
<MaterialCatalogModal
|
|
open={catalogModalOpen}
|
|
onOpenChange={setCatalogModalOpen}
|
|
onSelectMaterials={handleCatalogSelect}
|
|
onAddKit={handleCatalogAddKit}
|
|
materials={materials}
|
|
materialGroups={materialGroups}
|
|
/>
|
|
|
|
<LaborLookupModal
|
|
open={laborModalOpen}
|
|
onOpenChange={setLaborModalOpen}
|
|
labors={labors}
|
|
onSelectLabor={handleSelectLabor}
|
|
onAddLaborBundle={handleAddLaborBundle}
|
|
selectedLaborUlid={activeLaborRowIdx !== null ? localLabor[activeLaborRowIdx]?.labor_ulid : undefined}
|
|
/>
|
|
|
|
<EquipmentLookupModal
|
|
open={equipmentModalOpen}
|
|
onOpenChange={setEquipmentModalOpen}
|
|
equipments={equipments}
|
|
onSelectEquipment={handleSelectEquipment}
|
|
selectedEquipmentUlid={activeEquipmentRowIdx !== null ? localEquipment[activeEquipmentRowIdx]?.equipment_ulid : undefined}
|
|
/>
|
|
</AuthenticatedLayout>
|
|
);
|
|
}
|