Files
GSB-Construction/Modules/ProjectManagement/resources/js/Pages/Projects/Wizard/Step1Details.tsx

63 lines
2.1 KiB
TypeScript

import React from 'react';
import { router } from '@inertiajs/react';
import { Button } from '@/Components/ui/button';
import { ChevronRight } from 'lucide-react';
import { ProjectForm } from '../../../Components/ProjectForm';
import { ProjectWizardData, Employee } from '../../../types/project-wizard';
interface Step1DetailsProps {
project: ProjectWizardData;
step1Details: any;
setStep1Details: React.Dispatch<React.SetStateAction<any>>;
errors: any;
employees: Employee[];
projects: any[];
classifications?: any[];
onNext: () => void;
}
export default function Step1Details({
project,
step1Details,
setStep1Details,
errors,
employees,
projects,
classifications = [],
onNext
}: Step1DetailsProps) {
return (
<div className="p-5 md:p-6 space-y-6">
<div className="pb-4 border-b border-slate-100">
<h3 className="text-base font-bold text-slate-800">Step 1: Project Information</h3>
<p className="text-xs text-slate-500 mt-0.5">Review and update core project attributes, dates, and budget limits.</p>
</div>
<ProjectForm
data={step1Details}
setData={(field: any, value: any) => {
setStep1Details((prev: any) => ({ ...prev, [field]: value }));
}}
errors={errors || {}}
employees={employees}
projects={projects}
classifications={classifications}
/>
<div className="flex justify-between pt-5 border-t border-slate-100">
<div></div>
<Button
onClick={() => {
router.post(route('projects.wizard.save-details', project.ulid), step1Details, {
onSuccess: onNext
});
}}
className="bg-emerald-600 hover:bg-emerald-700 text-white font-medium"
>
Save & Next <ChevronRight className="ml-2 h-4 w-4" />
</Button>
</div>
</div>
);
}