101 lines
5.4 KiB
TypeScript
101 lines
5.4 KiB
TypeScript
import React from 'react';
|
|
import { Link } from '@inertiajs/react';
|
|
import { CardHeader, CardTitle, CardDescription } from '@/Components/ui/card';
|
|
import { Button } from '@/Components/ui/button';
|
|
import { Label } from '@/Components/ui/label';
|
|
import { Textarea } from '@/Components/ui/textarea';
|
|
import { CheckCircle2, AlertTriangle, ShieldCheck, ChevronLeft } from 'lucide-react';
|
|
import { ProjectWizardData } from '../../../types/project-wizard';
|
|
|
|
interface Step7SubmitProps {
|
|
project: ProjectWizardData;
|
|
errors: any;
|
|
submissionNotes: string;
|
|
setSubmissionNotes: (v: string) => void;
|
|
handleBack: () => void;
|
|
handleSubmitApproval: (e: React.FormEvent) => void;
|
|
}
|
|
|
|
export default function Step7Submit({
|
|
project,
|
|
errors,
|
|
submissionNotes,
|
|
setSubmissionNotes,
|
|
handleBack,
|
|
handleSubmitApproval
|
|
}: Step7SubmitProps) {
|
|
return (
|
|
<form onSubmit={handleSubmitApproval} className="p-6 space-y-6">
|
|
<CardHeader className="p-0 pb-4 border-b border-slate-100">
|
|
<CardTitle className="text-md font-semibold text-slate-800">Step 7: Submit Project for Approval</CardTitle>
|
|
<CardDescription className="text-xs">Once submitted, the estimation and task parameters will lock down. Approved project unlocks procurement (MR & PO).</CardDescription>
|
|
</CardHeader>
|
|
|
|
{errors && Object.keys(errors).length > 0 && (
|
|
<div className="p-4 rounded-xl border border-rose-250 bg-rose-50/75 text-rose-900 flex items-start gap-3 shadow-sm animate-pulse">
|
|
<AlertTriangle className="h-5 w-5 text-rose-600 shrink-0 mt-0.5" />
|
|
<div>
|
|
<h4 className="font-semibold text-sm">Please correct the following errors:</h4>
|
|
<ul className="list-disc pl-5 mt-1.5 space-y-1 text-xs text-rose-700">
|
|
{Object.entries(errors).map(([key, message]) => (
|
|
<li key={key}>{String(message)}</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{project.current_wizard_step >= 7 && project.status === 'planning' ? (
|
|
<div className="py-10 text-center space-y-3">
|
|
<CheckCircle2 className="mx-auto h-12 w-12 text-emerald-500 animate-bounce" />
|
|
<h3 className="text-md font-bold text-slate-800">Setup Submitted & Pending Review</h3>
|
|
<p className="text-xs text-slate-500 max-w-md mx-auto">
|
|
The project is currently under estimation review. Once standard manager approvals are finalized, the project status will move to In Progress and unlock materials requisitions.
|
|
</p>
|
|
<div className="pt-4 flex justify-center gap-3">
|
|
<Link href={route('projects.show', project.ulid)}>
|
|
<Button className="bg-slate-800 hover:bg-slate-900 text-white">Go to Overview</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-5 max-w-lg">
|
|
<div className="p-4 rounded-xl bg-slate-50 border border-slate-200/80 flex items-start gap-3">
|
|
<ShieldCheck className="h-5 w-5 text-emerald-600 shrink-0 mt-0.5" />
|
|
<div className="text-xs text-slate-600 space-y-1">
|
|
<p className="font-semibold text-slate-800 text-sm">Automated Higher-Up Approval Routing</p>
|
|
<p>Submitting will automatically route this project estimation to executive management (Admin / Super Admin) for single-approver review.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-1.5">
|
|
<Label htmlFor="notes" className="font-semibold text-slate-700">Review Notes (Optional)</Label>
|
|
<Textarea
|
|
id="notes"
|
|
placeholder="Add setup notes, estimation summaries, or project margin context..."
|
|
value={submissionNotes}
|
|
onChange={e => setSubmissionNotes(e.target.value)}
|
|
className={`border-slate-200 focus:border-emerald-500 focus:ring-emerald-500 mt-1 ${errors?.notes ? 'border-rose-400 focus:ring-rose-500 focus:border-rose-500' : ''}`}
|
|
rows={4}
|
|
/>
|
|
{errors?.notes && (
|
|
<span className="text-xs text-rose-600 mt-1 block font-medium">
|
|
{String(errors.notes)}
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex justify-between pt-6 border-t border-slate-100">
|
|
<Button type="button" variant="outline" onClick={handleBack}>
|
|
<ChevronLeft className="mr-2 h-4 w-4" /> Back
|
|
</Button>
|
|
<Button type="submit" className="bg-emerald-600 hover:bg-emerald-700 text-white font-medium">
|
|
<ShieldCheck className="mr-2 h-4 w-4" /> Submit for Approval
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</form>
|
|
);
|
|
}
|