635 lines
29 KiB
TypeScript
635 lines
29 KiB
TypeScript
import React, { useState, useMemo } from 'react';
|
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
|
import { useForm } from 'react-hook-form';
|
|
import { zodResolver } from '@hookform/resolvers/zod';
|
|
import { z } from 'zod';
|
|
import {
|
|
MapPin,
|
|
Calendar,
|
|
User,
|
|
Plus,
|
|
CheckCircle2,
|
|
AlertCircle,
|
|
RefreshCw,
|
|
Search,
|
|
MessageSquare,
|
|
Edit2,
|
|
FolderKanban,
|
|
FileText,
|
|
ShieldCheck,
|
|
Building,
|
|
Send,
|
|
Lock,
|
|
} from 'lucide-react';
|
|
import {
|
|
getProjects,
|
|
getProjectSiteVisits,
|
|
getSiteVisit,
|
|
createSiteVisit,
|
|
updateSiteVisit,
|
|
} from '../services/api';
|
|
import { Modal } from '../components/ui/Modal';
|
|
import { useToast } from '../components/ui/Toast';
|
|
import { HelpTooltip } from '../components/ui/HelpTooltip';
|
|
import { ExportButton } from '../components/ui/ExportButton';
|
|
import { ExportColumn } from '../utils/exportUtils';
|
|
import { useTableSort, SortableTh } from '../utils/tableSort';
|
|
import { useRbac } from '../auth/rbac';
|
|
import { ApprovalStatusBadge } from '../components/ui/StatusBadge';
|
|
import { SiteVisit, ApprovalStatus } from '../types';
|
|
import {
|
|
getApprovalStatusBadge,
|
|
formatDate,
|
|
APPROVAL_STATUS_OPTIONS,
|
|
} from '../lib/formatters';
|
|
|
|
const siteVisitSchema = z.object({
|
|
inspectorName: z.string().min(2, 'Inspector name required'),
|
|
visitedAt: z.string().min(4, 'Visit date is required'),
|
|
findings: z.string().min(5, 'Field findings and observations required'),
|
|
status: z.coerce.number().optional(),
|
|
});
|
|
|
|
type SiteVisitFormValues = z.infer<typeof siteVisitSchema>;
|
|
|
|
export const SiteVisitsPage: React.FC = () => {
|
|
const queryClient = useQueryClient();
|
|
const { success, error: toastError } = useToast();
|
|
const { canAdd, canApprove, canExport, canApproveRecord, isMaker } = useRbac();
|
|
|
|
const [selectedProjectId, setSelectedProjectId] = useState<string>('all');
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
const [statusFilter, setStatusFilter] = useState('all');
|
|
|
|
// Modals
|
|
const [isVisitModalOpen, setIsVisitModalOpen] = useState(false);
|
|
const [editingVisit, setEditingVisit] = useState<SiteVisit | null>(null);
|
|
|
|
const [selectedVisitForDetail, setSelectedVisitForDetail] = useState<SiteVisit | null>(null);
|
|
const [isDetailModalOpen, setIsDetailModalOpen] = useState(false);
|
|
|
|
// Queries
|
|
const { data: projects = [], isLoading: loadingProjects } = useQuery({
|
|
queryKey: ['projects'],
|
|
queryFn: () => getProjects(),
|
|
});
|
|
|
|
const effectiveProjectId = selectedProjectId !== 'all' ? selectedProjectId : projects[0]?.id;
|
|
|
|
const {
|
|
data: siteVisits = [],
|
|
isLoading: loadingVisits,
|
|
refetch: refetchVisits,
|
|
isFetching: fetchingVisits,
|
|
} = useQuery({
|
|
queryKey: ['siteVisits', effectiveProjectId],
|
|
queryFn: () => (effectiveProjectId ? getProjectSiteVisits(effectiveProjectId) : Promise.resolve([])),
|
|
enabled: !!effectiveProjectId,
|
|
});
|
|
|
|
// Forms
|
|
const visitForm = useForm<SiteVisitFormValues>({
|
|
resolver: zodResolver(siteVisitSchema),
|
|
defaultValues: {
|
|
inspectorName: '',
|
|
visitedAt: new Date().toISOString().split('T')[0],
|
|
findings: '',
|
|
status: ApprovalStatus.Pending,
|
|
},
|
|
});
|
|
|
|
// Mutations
|
|
const createVisitMutation = useMutation({
|
|
mutationFn: (vals: SiteVisitFormValues) => {
|
|
if (!effectiveProjectId) throw new Error('No project selected');
|
|
return createSiteVisit({
|
|
projectId: effectiveProjectId,
|
|
inspectorName: vals.inspectorName,
|
|
findings: vals.findings,
|
|
visitedAt: vals.visitedAt,
|
|
});
|
|
},
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['siteVisits'] });
|
|
setIsVisitModalOpen(false);
|
|
visitForm.reset();
|
|
success('Site Visit Logged', 'Field inspection recorded with inspector findings.');
|
|
},
|
|
onError: (err: unknown) => toastError('Logging Failed', err),
|
|
});
|
|
|
|
const updateVisitMutation = useMutation({
|
|
mutationFn: (vals: SiteVisitFormValues) => {
|
|
if (!editingVisit) throw new Error('No visit selected');
|
|
if (Number(editingVisit.status) === ApprovalStatus.Approved) {
|
|
throw new Error('Approved site visits are verified and immutable. No modifications are permitted.');
|
|
}
|
|
return updateSiteVisit({
|
|
siteVisitId: editingVisit.id,
|
|
inspectorName: vals.inspectorName,
|
|
findings: vals.findings,
|
|
status: vals.status ?? ApprovalStatus.Pending,
|
|
visitedAt: vals.visitedAt,
|
|
});
|
|
},
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['siteVisits'] });
|
|
setIsVisitModalOpen(false);
|
|
setEditingVisit(null);
|
|
visitForm.reset();
|
|
success('Site Visit Updated', 'Inspection report and verification status updated.');
|
|
},
|
|
onError: (err: unknown) => toastError('Update Failed', err),
|
|
});
|
|
|
|
// Filtered & Sorted Visits
|
|
const filteredVisits = useMemo(() => {
|
|
return siteVisits.filter((v) => {
|
|
const matchSearch =
|
|
!searchTerm.trim() ||
|
|
(v.inspectorName && v.inspectorName.toLowerCase().includes(searchTerm.toLowerCase())) ||
|
|
(v.findings && v.findings.toLowerCase().includes(searchTerm.toLowerCase()));
|
|
const matchStatus =
|
|
statusFilter === 'all' ||
|
|
(statusFilter === 'approved' && v.status === ApprovalStatus.Approved) ||
|
|
(statusFilter === 'pending' && v.status !== ApprovalStatus.Approved);
|
|
return matchSearch && matchStatus;
|
|
});
|
|
}, [siteVisits, searchTerm, statusFilter]);
|
|
|
|
const { sortedData: sortedVisits, sortColumn: visitSortCol, sortDirection: visitSortDir, handleSort: handleVisitSort } =
|
|
useTableSort(filteredVisits);
|
|
|
|
// Exports
|
|
const visitExportCols: ExportColumn<SiteVisit>[] = [
|
|
{ header: 'Inspector Name', key: 'inspectorName' },
|
|
{ header: 'Visit Date', key: 'visitedAt', format: (val) => formatDate(val) },
|
|
{ header: 'Findings', key: 'findings' },
|
|
{ header: 'Status', key: 'status', format: (val) => (val === ApprovalStatus.Approved ? 'Approved' : 'Pending') },
|
|
];
|
|
|
|
const handleOpenEdit = async (v: SiteVisit) => {
|
|
if (Number(v.status) === ApprovalStatus.Approved) {
|
|
toastError('Record Immutable', 'Approved site visits are verified and cannot be edited.');
|
|
return;
|
|
}
|
|
try {
|
|
const fresh = await getSiteVisit(v.id);
|
|
setEditingVisit(fresh);
|
|
visitForm.reset({
|
|
inspectorName: fresh.inspectorName || '',
|
|
visitedAt: fresh.visitedAt ? fresh.visitedAt.split('T')[0] : new Date().toISOString().split('T')[0],
|
|
findings: fresh.findings || '',
|
|
status: fresh.status ?? ApprovalStatus.Pending,
|
|
});
|
|
setIsVisitModalOpen(true);
|
|
} catch {
|
|
setEditingVisit(v);
|
|
visitForm.reset({
|
|
inspectorName: v.inspectorName || '',
|
|
visitedAt: v.visitedAt ? v.visitedAt.split('T')[0] : new Date().toISOString().split('T')[0],
|
|
findings: v.findings || '',
|
|
status: v.status ?? ApprovalStatus.Pending,
|
|
});
|
|
setIsVisitModalOpen(true);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-8 pb-16">
|
|
{/* Header Banner */}
|
|
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4 bg-gradient-to-r from-[#0d1322] via-[#0f172a] to-[#0d1322] p-6 sm:p-8 rounded-3xl border border-slate-800/80 shadow-2xl relative overflow-hidden">
|
|
<div className="absolute -right-10 -bottom-10 w-60 h-60 bg-emerald-600/10 rounded-full blur-3xl pointer-events-none" />
|
|
<div className="space-y-2 relative z-10">
|
|
<div className="flex items-center gap-3">
|
|
<div className="h-12 w-12 rounded-2xl bg-emerald-600/20 border border-emerald-500/30 flex items-center justify-center text-emerald-400 shadow-lg shadow-emerald-500/10">
|
|
<MapPin className="w-6 h-6" />
|
|
</div>
|
|
<div>
|
|
<div className="flex items-center gap-2.5 flex-wrap">
|
|
<h1 className="text-2xl sm:text-3xl font-bold tracking-tight text-white flex items-center gap-2.5">
|
|
Site Visits & Field Verification
|
|
</h1>
|
|
<HelpTooltip
|
|
title="Field Inspection & Verification"
|
|
content="Log physical site inspection reports, track verified evidence, document findings, and record governance approvals."
|
|
size="sm"
|
|
placement="bottom"
|
|
/>
|
|
</div>
|
|
<p className="text-xs sm:text-sm text-slate-400 mt-1">
|
|
Log physical inspection reports, record field findings, and capture project feedback.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* KPI Cards */}
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
<div className="bg-[#0f1523]/80 backdrop-blur-md p-5 rounded-2xl border border-slate-800/80 shadow-xl space-y-2">
|
|
<div className="flex items-center justify-between text-slate-400">
|
|
<div className="flex items-center gap-1.5">
|
|
<span className="text-xs font-semibold uppercase tracking-wider">Total Site Visits</span>
|
|
<HelpTooltip
|
|
title="Total Site Visits"
|
|
content="Total number of physical on-site inspection visits recorded across all projects."
|
|
size="sm"
|
|
/>
|
|
</div>
|
|
<MapPin className="w-4 h-4 text-emerald-400" />
|
|
</div>
|
|
<p className="text-2xl font-bold text-white">{siteVisits.length}</p>
|
|
<p className="text-[11px] text-slate-400">Field inspections logged</p>
|
|
</div>
|
|
|
|
<div className="bg-[#0f1523]/80 backdrop-blur-md p-5 rounded-2xl border border-slate-800/80 shadow-xl space-y-2">
|
|
<div className="flex items-center justify-between text-slate-400">
|
|
<div className="flex items-center gap-1.5">
|
|
<span className="text-xs font-semibold uppercase tracking-wider">Approved Reports</span>
|
|
<HelpTooltip
|
|
title="Approved Inspection Reports"
|
|
content="Field inspection reports formally approved and verified by project governance."
|
|
size="sm"
|
|
/>
|
|
</div>
|
|
<CheckCircle2 className="w-4 h-4 text-teal-400" />
|
|
</div>
|
|
<p className="text-2xl font-bold text-teal-400">
|
|
{siteVisits.filter((v) => v.status === ApprovalStatus.Approved).length}
|
|
</p>
|
|
<p className="text-[11px] text-slate-400">Verified by project governance</p>
|
|
</div>
|
|
|
|
<div className="bg-[#0f1523]/80 backdrop-blur-md p-5 rounded-2xl border border-slate-800/80 shadow-xl space-y-2">
|
|
<div className="flex items-center justify-between text-slate-400">
|
|
<div className="flex items-center gap-1.5">
|
|
<span className="text-xs font-semibold uppercase tracking-wider">Under Review</span>
|
|
<HelpTooltip
|
|
title="Pending Sign-Off"
|
|
content="Inspection findings and reports currently awaiting governance evaluation."
|
|
size="sm"
|
|
/>
|
|
</div>
|
|
<FileText className="w-4 h-4 text-amber-400" />
|
|
</div>
|
|
<p className="text-2xl font-bold text-amber-400">
|
|
{siteVisits.filter((v) => v.status === ApprovalStatus.Pending || v.status === ApprovalStatus.Review).length}
|
|
</p>
|
|
<p className="text-[11px] text-slate-400">Awaiting sign-off</p>
|
|
</div>
|
|
|
|
<div className="bg-[#0f1523]/80 backdrop-blur-md p-5 rounded-2xl border border-slate-800/80 shadow-xl space-y-2">
|
|
<div className="flex items-center justify-between text-slate-400">
|
|
<div className="flex items-center gap-1.5">
|
|
<span className="text-xs font-semibold uppercase tracking-wider">Audited Projects</span>
|
|
<HelpTooltip
|
|
title="Audited Projects"
|
|
content="Projects with registered physical site monitoring records and active inspection history."
|
|
size="sm"
|
|
/>
|
|
</div>
|
|
<Building className="w-4 h-4 text-blue-400" />
|
|
</div>
|
|
<p className="text-2xl font-bold text-blue-400">{projects.length}</p>
|
|
<p className="text-[11px] text-slate-400">Under physical monitoring</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Site Visits Register View */}
|
|
<div className="space-y-4">
|
|
<div className="flex flex-col lg:flex-row items-stretch lg:items-center justify-between gap-3 bg-[#0d121f]/60 p-3.5 rounded-2xl border border-slate-800/80">
|
|
<div className="flex items-center gap-2.5 flex-wrap flex-1">
|
|
{/* Search */}
|
|
<div className="relative flex-1 min-w-[200px] max-w-sm">
|
|
<Search className="w-3.5 h-3.5 absolute left-3 top-2.5 text-slate-400" />
|
|
<input
|
|
type="text"
|
|
placeholder="Search inspector name or findings..."
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
className="w-full bg-slate-900 border border-slate-800 rounded-xl pl-8 pr-3 py-1.5 text-xs text-white focus:outline-none focus:border-emerald-500 shadow-xs"
|
|
/>
|
|
</div>
|
|
|
|
{/* Status Filter */}
|
|
<div className="flex items-center gap-1.5 text-xs text-slate-400">
|
|
<select
|
|
value={statusFilter}
|
|
onChange={(e) => setStatusFilter(e.target.value)}
|
|
className="bg-slate-900 border border-slate-800 rounded-xl px-3 py-1.5 text-xs text-white focus:outline-none focus:border-emerald-500"
|
|
>
|
|
<option value="all">All Verification Statuses</option>
|
|
<option value="approved">Approved & Verified</option>
|
|
<option value="pending">Pending / Under Review</option>
|
|
</select>
|
|
</div>
|
|
|
|
{/* Project Selector */}
|
|
<div className="flex items-center gap-1.5 text-xs text-slate-400">
|
|
<FolderKanban className="w-3.5 h-3.5 text-emerald-400" />
|
|
<select
|
|
value={selectedProjectId}
|
|
onChange={(e) => setSelectedProjectId(e.target.value)}
|
|
className="bg-slate-900 border border-slate-800 rounded-xl px-3 py-1.5 text-xs text-white focus:outline-none focus:border-emerald-500 max-w-[180px] truncate"
|
|
>
|
|
{projects.map((p) => (
|
|
<option key={p.id} value={p.id}>
|
|
{p.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Actions: Refresh, Export, Log Site Visit */}
|
|
<div className="flex items-center gap-2 flex-wrap justify-end">
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
refetchVisits();
|
|
success('Refreshed', 'Site visit logs updated from API.');
|
|
}}
|
|
disabled={fetchingVisits}
|
|
className="flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-xs font-semibold bg-slate-900 text-slate-300 hover:text-white border border-slate-800 hover:bg-slate-800 transition cursor-pointer disabled:opacity-50"
|
|
title="Force refresh site visits"
|
|
>
|
|
<RefreshCw className={`w-3.5 h-3.5 text-emerald-400 ${fetchingVisits ? 'animate-spin' : ''}`} />
|
|
<span>Refresh</span>
|
|
</button>
|
|
|
|
<ExportButton
|
|
claim="site_visits"
|
|
data={sortedVisits}
|
|
columns={visitExportCols}
|
|
filename={`site_visits_${new Date().toISOString().split('T')[0]}`}
|
|
title="Site Visits Register"
|
|
/>
|
|
|
|
{canAdd('site_visits') && (
|
|
<button
|
|
onClick={() => {
|
|
setEditingVisit(null);
|
|
visitForm.reset({
|
|
inspectorName: '',
|
|
visitedAt: new Date().toISOString().split('T')[0],
|
|
findings: '',
|
|
status: ApprovalStatus.Pending,
|
|
});
|
|
setIsVisitModalOpen(true);
|
|
}}
|
|
className="flex items-center gap-1.5 px-3.5 py-1.5 rounded-xl text-xs font-semibold bg-gradient-to-r from-emerald-600 to-teal-600 text-white hover:from-emerald-500 hover:to-teal-500 shadow-md shadow-emerald-600/25 transition cursor-pointer"
|
|
>
|
|
<Plus className="w-3.5 h-3.5" />
|
|
<span>Log Site Visit</span>
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-[#0f1523]/80 rounded-2xl border border-slate-800/80 shadow-lg backdrop-blur-sm overflow-hidden">
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-left text-xs border-collapse">
|
|
<thead>
|
|
<tr className="bg-[#0d121f]/95 border-b border-slate-800/80 text-slate-400 uppercase tracking-wider font-semibold text-[11px]">
|
|
<SortableTh column="inspectorName" currentColumn={visitSortCol} direction={visitSortDir} onSort={handleVisitSort} className="py-3.5 px-5 whitespace-nowrap">
|
|
Inspector Name
|
|
</SortableTh>
|
|
<SortableTh column="visitedAt" currentColumn={visitSortCol} direction={visitSortDir} onSort={handleVisitSort} className="py-3.5 px-4 whitespace-nowrap">
|
|
Inspection Date
|
|
</SortableTh>
|
|
<SortableTh column="findings" currentColumn={visitSortCol} direction={visitSortDir} onSort={handleVisitSort} className="py-3.5 px-4 whitespace-nowrap">
|
|
Field Observations & Findings
|
|
</SortableTh>
|
|
<SortableTh column="status" currentColumn={visitSortCol} direction={visitSortDir} onSort={handleVisitSort} className="py-3.5 px-4 whitespace-nowrap">
|
|
Verification Status
|
|
</SortableTh>
|
|
<th className="py-3.5 px-5 text-right font-medium whitespace-nowrap">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-slate-800/60">
|
|
{loadingVisits ? (
|
|
<tr>
|
|
<td colSpan={5} className="py-12 text-center text-slate-400">
|
|
<div className="flex flex-col items-center gap-2">
|
|
<div className="w-6 h-6 border-2 border-emerald-500 border-t-transparent rounded-full animate-spin" />
|
|
<span>Loading site visit logs...</span>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
) : sortedVisits.length === 0 ? (
|
|
<tr>
|
|
<td colSpan={5} className="py-12 text-center text-slate-400">
|
|
No site visits recorded for this project yet.
|
|
</td>
|
|
</tr>
|
|
) : (
|
|
sortedVisits.map((v) => (
|
|
<tr key={v.id} className="hover:bg-slate-800/40 transition-colors">
|
|
<td className="py-3.5 px-5 whitespace-nowrap font-semibold text-white">
|
|
<div className="flex items-center gap-2">
|
|
<User className="w-3.5 h-3.5 text-emerald-400 shrink-0" />
|
|
<span>{v.inspectorName || 'Field Officer'}</span>
|
|
</div>
|
|
</td>
|
|
<td className="py-3.5 px-4 whitespace-nowrap text-slate-300 font-medium">
|
|
<div className="flex items-center gap-1.5 text-slate-300">
|
|
<Calendar className="w-3 h-3 text-slate-500" />
|
|
<span>{formatDate(v.visitedAt)}</span>
|
|
</div>
|
|
</td>
|
|
<td className="py-3.5 px-4 text-slate-300 max-w-sm truncate" title={v.findings || ''}>
|
|
{v.findings || 'No findings recorded.'}
|
|
</td>
|
|
<td className="py-3.5 px-4 whitespace-nowrap">
|
|
<ApprovalStatusBadge status={v.status} />
|
|
</td>
|
|
<td className="py-3.5 px-5 text-right whitespace-nowrap space-x-2">
|
|
<button
|
|
onClick={() => {
|
|
setSelectedVisitForDetail(v);
|
|
setIsDetailModalOpen(true);
|
|
}}
|
|
className="px-2.5 py-1 text-xs font-medium text-emerald-400 hover:text-emerald-300 bg-emerald-950/40 hover:bg-emerald-900/40 rounded-lg border border-emerald-800/40 transition cursor-pointer"
|
|
>
|
|
View & Feedback
|
|
</button>
|
|
{Number(v.status) === ApprovalStatus.Approved ? (
|
|
<span
|
|
className="p-1 text-emerald-400 cursor-default"
|
|
title="Approved site visits are verified and immutable."
|
|
>
|
|
<Lock className="w-3.5 h-3.5" />
|
|
</span>
|
|
) : (
|
|
<button
|
|
onClick={() => handleOpenEdit(v)}
|
|
className="p-1 text-slate-400 hover:text-white hover:bg-slate-800 rounded-lg transition cursor-pointer"
|
|
title="Edit site visit"
|
|
>
|
|
<Edit2 className="w-3.5 h-3.5" />
|
|
</button>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
))
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Modal: Create/Edit Site Visit */}
|
|
<Modal
|
|
isOpen={isVisitModalOpen}
|
|
onClose={() => setIsVisitModalOpen(false)}
|
|
title={editingVisit ? 'Edit Site Visit Report' : 'Log Project Site Visit'}
|
|
size="md"
|
|
>
|
|
<form
|
|
onSubmit={visitForm.handleSubmit((d) => (editingVisit ? updateVisitMutation.mutate(d) : createVisitMutation.mutate(d)))}
|
|
className="space-y-4"
|
|
>
|
|
<div>
|
|
<label className="block text-xs font-semibold text-slate-300 mb-1">Inspector / Officer Name *</label>
|
|
<input
|
|
{...visitForm.register('inspectorName')}
|
|
className="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-emerald-500"
|
|
placeholder="e.g. Dr. K. Mokoena (Lead M&E Auditor)"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-semibold text-slate-300 mb-1">Inspection Date *</label>
|
|
<input
|
|
type="date"
|
|
{...visitForm.register('visitedAt')}
|
|
className="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-emerald-500"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-semibold text-slate-300 mb-1">Field Findings & Observations *</label>
|
|
<textarea
|
|
rows={4}
|
|
{...visitForm.register('findings')}
|
|
className="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-emerald-500"
|
|
placeholder="Detail on-site verification, physical progress, equipment installed, and beneficiary feedback..."
|
|
/>
|
|
</div>
|
|
|
|
{editingVisit && (
|
|
<div>
|
|
<label className="block text-xs font-semibold text-slate-300 mb-1">Verification Status</label>
|
|
{Number(editingVisit.status) === ApprovalStatus.Approved ? (
|
|
<div
|
|
className="w-full bg-slate-900 border border-emerald-500/30 rounded-xl px-3 py-2 text-xs text-emerald-300 font-semibold flex items-center gap-1.5 cursor-default"
|
|
title="Approved site visits are immutable."
|
|
>
|
|
<Lock className="w-3.5 h-3.5 text-emerald-400" />
|
|
<span>Approved & Verified (Immutable - Cannot Be Changed)</span>
|
|
</div>
|
|
) : (
|
|
<select
|
|
{...visitForm.register('status')}
|
|
className="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-emerald-500"
|
|
>
|
|
{(() => {
|
|
const canApproveVisit = canApproveRecord('site_visits', editingVisit?.createdBy);
|
|
const isSelf = isMaker(editingVisit?.createdBy);
|
|
return APPROVAL_STATUS_OPTIONS.map((opt) => {
|
|
const isApprovedOpt = opt.value === ApprovalStatus.Approved;
|
|
const isOptDisabled = isApprovedOpt && !canApproveVisit;
|
|
let reason = '';
|
|
if (isApprovedOpt && !canApprove('site_visits')) {
|
|
reason = ' (Requires Update Permission)';
|
|
} else if (isApprovedOpt && isSelf) {
|
|
reason = ' (Maker-Checker: Cannot approve own record)';
|
|
}
|
|
return (
|
|
<option key={opt.value} value={opt.value} disabled={isOptDisabled}>
|
|
{opt.label}{reason}
|
|
</option>
|
|
);
|
|
});
|
|
})()}
|
|
</select>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex justify-end gap-3 pt-4 border-t border-slate-800">
|
|
<button
|
|
type="button"
|
|
onClick={() => setIsVisitModalOpen(false)}
|
|
className="px-4 py-2 rounded-xl text-xs font-semibold text-slate-400 hover:text-white hover:bg-slate-800 transition"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
disabled={createVisitMutation.isPending || updateVisitMutation.isPending}
|
|
className="px-4 py-2 rounded-xl text-xs font-semibold bg-emerald-600 hover:bg-emerald-500 text-white transition shadow-md shadow-emerald-600/30"
|
|
>
|
|
{editingVisit ? 'Update Report' : 'Save Site Visit'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</Modal>
|
|
|
|
{/* Modal: Detail & Feedback */}
|
|
{selectedVisitForDetail && (
|
|
<Modal
|
|
isOpen={isDetailModalOpen}
|
|
onClose={() => setIsDetailModalOpen(false)}
|
|
title={`Site Visit: ${selectedVisitForDetail.inspectorName || 'Field Inspection'}`}
|
|
size="lg"
|
|
>
|
|
<div className="space-y-6">
|
|
<div className="grid grid-cols-2 sm:grid-cols-3 gap-3 bg-slate-900/60 p-4 rounded-xl border border-slate-800">
|
|
<div>
|
|
<span className="text-[10px] uppercase font-semibold text-slate-400 block">Inspection Date</span>
|
|
<span className="text-xs font-bold text-white">{formatDate(selectedVisitForDetail.visitedAt)}</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-[10px] uppercase font-semibold text-slate-400 block">Status</span>
|
|
<div className="mt-0.5">
|
|
<ApprovalStatusBadge status={selectedVisitForDetail.status} />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<span className="text-[10px] uppercase font-semibold text-slate-400 block">Inspector</span>
|
|
<span className="text-xs font-bold text-emerald-400">{selectedVisitForDetail.inspectorName}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 className="text-xs font-bold text-white uppercase tracking-wider mb-2 flex items-center gap-2">
|
|
<FileText className="w-4 h-4 text-emerald-400" />
|
|
<span>Field Findings & Observations</span>
|
|
</h4>
|
|
<div className="p-4 bg-slate-900/60 rounded-xl border border-slate-800 text-xs text-slate-200 whitespace-pre-wrap leading-relaxed">
|
|
{selectedVisitForDetail.findings || 'No detailed findings recorded.'}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Feedback & Governance Notes Section */}
|
|
<div className="space-y-3 pt-4 border-t border-slate-800">
|
|
<h4 className="text-xs font-bold text-white uppercase tracking-wider flex items-center gap-2">
|
|
<MessageSquare className="w-4 h-4 text-blue-400" />
|
|
<span>Governance & Remediation Feedback</span>
|
|
</h4>
|
|
|
|
<div className="p-3 bg-blue-950/20 border border-blue-800/40 rounded-xl text-xs text-blue-300">
|
|
Site visit report is documented in the central monitoring audit ledger. You can update findings or sign off this
|
|
field evaluation using the edit report action.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|