380 lines
18 KiB
TypeScript
380 lines
18 KiB
TypeScript
import { Input } from '@/Components/ui/input';
|
|
import { Label } from '@/Components/ui/label';
|
|
import { Textarea } from '@/Components/ui/textarea';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/Components/ui/card';
|
|
import {
|
|
Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
|
|
} from '@/Components/ui/select';
|
|
import { Button } from '@/Components/ui/button';
|
|
import { ChevronDown, ChevronUp, Building2, Search, CheckCircle2 } from 'lucide-react';
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, DialogFooter } from '@/Components/ui/dialog';
|
|
import { Avatar, AvatarFallback, AvatarImage } from '@/Components/ui/avatar';
|
|
import { Badge } from '@/Components/ui/badge';
|
|
import { useEffect, useMemo, useState } from 'react';
|
|
|
|
const MAIN_CONTRACTOR = 'Great SwissMetal Builders Corporation';
|
|
|
|
interface Employee {
|
|
id: number;
|
|
ulid: string;
|
|
name: string;
|
|
email?: string;
|
|
employee_profile?: {
|
|
department?: string;
|
|
position?: string;
|
|
phone?: string;
|
|
};
|
|
}
|
|
|
|
function ProjectManagerLookup({ employees, selectedId, onSelect }: { employees: Employee[], selectedId: string, onSelect: (id: string) => void }) {
|
|
const [open, setOpen] = useState(false);
|
|
const [search, setSearch] = useState('');
|
|
const [tempSelectedId, setTempSelectedId] = useState(selectedId);
|
|
|
|
const filteredEmployees = useMemo(() => {
|
|
if (!search) return employees;
|
|
const lowerSearch = search.toLowerCase();
|
|
return employees.filter(e =>
|
|
e.name.toLowerCase().includes(lowerSearch) ||
|
|
(e.email && e.email.toLowerCase().includes(lowerSearch)) ||
|
|
(e.employee_profile?.position && e.employee_profile.position.toLowerCase().includes(lowerSearch))
|
|
);
|
|
}, [employees, search]);
|
|
|
|
const handleConfirm = () => {
|
|
onSelect(tempSelectedId);
|
|
setOpen(false);
|
|
};
|
|
|
|
const handleOpenChange = (newOpen: boolean) => {
|
|
setOpen(newOpen);
|
|
if (newOpen) {
|
|
setTempSelectedId(selectedId);
|
|
setSearch('');
|
|
}
|
|
};
|
|
|
|
const selectedEmployee = employees.find(e => e.ulid === selectedId);
|
|
|
|
return (
|
|
<>
|
|
<Button
|
|
variant="outline"
|
|
role="combobox"
|
|
onClick={() => handleOpenChange(true)}
|
|
className={`w-full justify-between font-normal ${!selectedId ? 'text-muted-foreground' : ''}`}
|
|
>
|
|
{selectedEmployee ? (
|
|
<div className="flex items-center gap-2 truncate">
|
|
<Avatar className="h-6 w-6">
|
|
<AvatarFallback className="text-[10px]">{selectedEmployee.name.substring(0,2).toUpperCase()}</AvatarFallback>
|
|
</Avatar>
|
|
<span className="truncate">{selectedEmployee.name}</span>
|
|
{selectedEmployee.employee_profile?.position && (
|
|
<span className="text-xs text-muted-foreground hidden sm:inline-block truncate">
|
|
- {selectedEmployee.employee_profile.position}
|
|
</span>
|
|
)}
|
|
</div>
|
|
) : (
|
|
"Select Project Manager"
|
|
)}
|
|
<ChevronDown className="h-4 w-4 shrink-0 opacity-50" />
|
|
</Button>
|
|
<Dialog open={open} onOpenChange={handleOpenChange}>
|
|
<DialogContent className="max-w-2xl max-h-[85vh] flex flex-col p-0 gap-0">
|
|
<DialogHeader className="px-6 py-4 border-b">
|
|
<DialogTitle>Select Project Manager</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
<div className="px-6 py-4 border-b bg-muted/30">
|
|
<div className="relative">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
|
<Input
|
|
placeholder="Search by name, email, or position..."
|
|
value={search}
|
|
onChange={(e) => setSearch(e.target.value)}
|
|
className="pl-9 bg-background"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex-1 overflow-y-auto px-6 py-4 max-h-[400px]">
|
|
{filteredEmployees.length === 0 ? (
|
|
<div className="text-center py-8 text-muted-foreground">
|
|
No project managers found matching your search.
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
|
{filteredEmployees.map((emp) => {
|
|
const isSelected = tempSelectedId === emp.ulid;
|
|
return (
|
|
<div
|
|
key={emp.ulid}
|
|
onClick={() => setTempSelectedId(emp.ulid)}
|
|
className={`flex items-start gap-3 p-3 rounded-lg border cursor-pointer transition-colors ${
|
|
isSelected
|
|
? 'border-primary bg-primary/5 ring-1 ring-primary'
|
|
: 'border-border hover:bg-accent/50'
|
|
}`}
|
|
>
|
|
<Avatar className="h-10 w-10 shrink-0">
|
|
<AvatarFallback className="bg-primary/10 text-primary font-medium">
|
|
{emp.name.substring(0, 2).toUpperCase()}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center justify-between gap-1">
|
|
<p className="text-sm font-medium truncate">{emp.name}</p>
|
|
{isSelected && <CheckCircle2 className="h-4 w-4 text-primary shrink-0" />}
|
|
</div>
|
|
<p className="text-xs text-muted-foreground truncate" title={emp.email}>
|
|
{emp.email || 'No email provided'}
|
|
</p>
|
|
{emp.employee_profile?.position && (
|
|
<Badge variant="secondary" className="mt-1.5 text-[10px] font-normal px-1.5 py-0">
|
|
{emp.employee_profile.position}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<DialogFooter className="px-6 py-4 border-t bg-muted/20">
|
|
<Button variant="outline" onClick={() => setOpen(false)}>Cancel</Button>
|
|
<Button onClick={handleConfirm} disabled={!tempSelectedId}>Confirm Selection</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export interface ProjectFormData {
|
|
name: string;
|
|
client_name: string;
|
|
location: string;
|
|
start_date: string;
|
|
target_end_date: string;
|
|
contract_duration: string;
|
|
// Additional details
|
|
description: string;
|
|
pm_id: string;
|
|
contract_value: string;
|
|
}
|
|
|
|
interface Props {
|
|
data: ProjectFormData;
|
|
setData: <K extends keyof ProjectFormData>(key: K, value: ProjectFormData[K]) => void;
|
|
errors: Partial<Record<keyof ProjectFormData, string>>;
|
|
employees: Employee[];
|
|
}
|
|
|
|
export function ProjectForm({ data, setData, errors, employees }: Props) {
|
|
const [showAdvanced, setShowAdvanced] = useState(false);
|
|
|
|
const employeeSelectItems = useMemo(
|
|
() => employees.map(e => ({ value: e.ulid, label: e.name })),
|
|
[employees],
|
|
);
|
|
|
|
// Auto-calculate contract duration when both dates are set
|
|
useEffect(() => {
|
|
if (data.start_date && data.target_end_date) {
|
|
const start = new Date(data.start_date);
|
|
const end = new Date(data.target_end_date);
|
|
const diffMs = end.getTime() - start.getTime();
|
|
if (diffMs >= 0) {
|
|
const days = Math.round(diffMs / (1000 * 60 * 60 * 24)) + 1; // inclusive of start & end
|
|
setData('contract_duration', String(days));
|
|
}
|
|
}
|
|
}, [data.start_date, data.target_end_date]);
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Primary Fields — 1.1 to 1.7 */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Project Information</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
{/* 1.1 Project Name */}
|
|
<div>
|
|
<Label htmlFor="name">
|
|
<span className="text-xs text-muted-foreground mr-1.5">1.1</span>
|
|
Project Name <span className="text-red-500">*</span>
|
|
</Label>
|
|
<Input
|
|
id="name"
|
|
value={data.name}
|
|
onChange={(e) => setData('name', e.target.value)}
|
|
placeholder="e.g., Construction of FGEN-PPA Access Road"
|
|
/>
|
|
{errors.name && <p className="mt-1 text-sm text-red-500">{errors.name}</p>}
|
|
</div>
|
|
|
|
{/* 1.2 Project Location */}
|
|
<div>
|
|
<Label htmlFor="location">
|
|
<span className="text-xs text-muted-foreground mr-1.5">1.2</span>
|
|
Project Location
|
|
</Label>
|
|
<Input
|
|
id="location"
|
|
value={data.location}
|
|
onChange={(e) => setData('location', e.target.value)}
|
|
placeholder="e.g., Bolbok, Batangas City"
|
|
/>
|
|
</div>
|
|
|
|
{/* 1.3 Client */}
|
|
<div>
|
|
<Label htmlFor="client_name">
|
|
<span className="text-xs text-muted-foreground mr-1.5">1.3</span>
|
|
Client
|
|
</Label>
|
|
<Input
|
|
id="client_name"
|
|
value={data.client_name}
|
|
onChange={(e) => setData('client_name', e.target.value)}
|
|
placeholder="e.g., First Gen Corporation"
|
|
/>
|
|
</div>
|
|
|
|
{/* 1.4 Main Contractor — Hard-coded */}
|
|
<div>
|
|
<Label>
|
|
<span className="text-xs text-muted-foreground mr-1.5">1.4</span>
|
|
Main Contractor
|
|
</Label>
|
|
<div className="flex items-center gap-2 rounded-md border border-input bg-muted/50 px-3 py-2 text-sm">
|
|
<Building2 className="h-4 w-4 text-muted-foreground shrink-0" />
|
|
<span className="font-medium">{MAIN_CONTRACTOR}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 1.5 & 1.6 — Start Date / Project Completion */}
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<div>
|
|
<Label htmlFor="start_date">
|
|
<span className="text-xs text-muted-foreground mr-1.5">1.5</span>
|
|
Start Date
|
|
</Label>
|
|
<Input
|
|
id="start_date"
|
|
type="date"
|
|
value={data.start_date}
|
|
onChange={(e) => setData('start_date', e.target.value)}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label htmlFor="target_end_date">
|
|
<span className="text-xs text-muted-foreground mr-1.5">1.6</span>
|
|
Project Completion
|
|
</Label>
|
|
<Input
|
|
id="target_end_date"
|
|
type="date"
|
|
value={data.target_end_date}
|
|
onChange={(e) => setData('target_end_date', e.target.value)}
|
|
/>
|
|
{errors.target_end_date && <p className="mt-1 text-sm text-red-500">{errors.target_end_date}</p>}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 1.7 Contract Duration */}
|
|
<div>
|
|
<Label htmlFor="contract_duration">
|
|
<span className="text-xs text-muted-foreground mr-1.5">1.7</span>
|
|
Contract Duration
|
|
</Label>
|
|
<div className="flex items-center gap-2">
|
|
<Input
|
|
id="contract_duration"
|
|
type="number"
|
|
min="0"
|
|
value={data.contract_duration}
|
|
onChange={(e) => setData('contract_duration', e.target.value)}
|
|
className="max-w-[140px]"
|
|
placeholder="0"
|
|
/>
|
|
<span className="text-sm text-muted-foreground">days</span>
|
|
</div>
|
|
{data.start_date && data.target_end_date && (
|
|
<p className="mt-1 text-xs text-muted-foreground">
|
|
Auto-calculated from dates. You can override manually.
|
|
</p>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Collapsible Additional Details */}
|
|
<Card>
|
|
<CardHeader
|
|
className="cursor-pointer select-none"
|
|
onClick={() => setShowAdvanced(!showAdvanced)}
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<CardTitle className="text-base">Additional Details</CardTitle>
|
|
<Button variant="ghost" size="icon-sm" type="button">
|
|
{showAdvanced
|
|
? <ChevronUp className="h-4 w-4" />
|
|
: <ChevronDown className="h-4 w-4" />}
|
|
</Button>
|
|
</div>
|
|
</CardHeader>
|
|
|
|
{showAdvanced && (
|
|
<CardContent className="space-y-4 pt-0">
|
|
{/* Description */}
|
|
<div>
|
|
<Label htmlFor="description">Description</Label>
|
|
<Textarea
|
|
id="description"
|
|
value={data.description}
|
|
onChange={(e) => setData('description', e.target.value)}
|
|
rows={3}
|
|
placeholder="Brief project description..."
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
{/* Project Manager */}
|
|
<div>
|
|
<Label>Project Manager</Label>
|
|
<div className="mt-1">
|
|
<ProjectManagerLookup
|
|
employees={employees}
|
|
selectedId={data.pm_id}
|
|
onSelect={(v) => setData('pm_id', v)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Contract Value */}
|
|
<div>
|
|
<Label htmlFor="contract_value">Contract Value (PHP)</Label>
|
|
<Input
|
|
id="contract_value"
|
|
type="number"
|
|
step="0.01"
|
|
value={data.contract_value}
|
|
onChange={(e) => setData('contract_value', e.target.value)}
|
|
placeholder="0.00"
|
|
/>
|
|
{errors.contract_value && <p className="mt-1 text-sm text-red-500">{errors.contract_value}</p>}
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
)}
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|