import { Head, router, useForm } from '@inertiajs/react'; import { Award, ArrowLeft, RefreshCw, CheckCircle2 } from 'lucide-react'; import { useState, useMemo } from 'react'; import { toast } from 'sonner'; import { Button } from '@/components/ui/button'; import { Card } from '@/components/ui/card'; import { Label } from '@/components/ui/label'; import AppLayout from '@/layouts/app-layout'; interface Project { id: number; name: string; key: string; } interface LicenceMaster { id: number; name: string; required_for: string | null; } interface LicenceMapping { project_id: number; licence_id: number; is_required: boolean; start_date: string | null; end_date: string | null; status: string; remarks: string | null; } interface Props { projects: Project[]; activeProjectId: number | null; licences: LicenceMaster[]; mappings: Record; } export default function ProjectLicencesPage({ projects, activeProjectId: initialActiveProjectId, licences, mappings, }: Props) { const [selectedProjectId, setSelectedProjectId] = useState( initialActiveProjectId || '', ); // Form for updating mapping const form = useForm({ project_id: '', licence_id: '', is_required: true, start_date: '', end_date: '', status: 'pending', remarks: '', }); const handleProjectChange = (id: number | '') => { setSelectedProjectId(id); router.get( '/project-licences', { project_id: id }, { preserveState: true }, ); }; const handleSave = (licenceId: number, currentMapping?: LicenceMapping) => { if (!selectedProjectId) { toast.error('Please select a project first.'); return; } // We use the mapping from the page state or defaults const rowElement = document.getElementById(`row-${licenceId}`); if (!rowElement) return; const isRequiredVal = (rowElement.querySelector('[name="is_required"]') as HTMLInputElement)?.checked; const statusVal = (rowElement.querySelector('[name="status"]') as HTMLSelectElement)?.value || 'pending'; const startDateVal = (rowElement.querySelector('[name="start_date"]') as HTMLInputElement)?.value || ''; const endDateVal = (rowElement.querySelector('[name="end_date"]') as HTMLInputElement)?.value || ''; const remarksVal = (rowElement.querySelector('[name="remarks"]') as HTMLInputElement)?.value || ''; router.post( '/project-licences', { project_id: selectedProjectId, licence_id: licenceId, is_required: isRequiredVal ? 1 : 0, status: statusVal, start_date: startDateVal || null, end_date: endDateVal || null, remarks: remarksVal || null, }, { onSuccess: () => { toast.success('Licence mapping updated successfully.'); }, onError: () => { toast.error('Failed to update licence mapping.'); }, }, ); }; return ( <>

{/* Header */}

Project Licence Management

Configure and track clearances and licenses on a project-by-project basis.

{/* Project Selector Card */}

Select Active Project

{/* Licences Mapping Table */} {selectedProjectId ? (

{licences.map((licence) => { const mapping = mappings[licence.id]; return ( ); })}

Licence Name	Required	Status	Start Date	End Date	Remarks	Actions
{licence.name} {licence.required_for && ( Required for: {licence.required_for} )}

) : (

No Project Selected

Please select a project from the dropdown list above to configure licence compliance mappings.

)}

); }