Fixed UI inconsistencies
This commit is contained in:
@@ -52,7 +52,9 @@ export const SiteVisitsPage: React.FC = () => {
|
||||
const { success, error: toastError } = useToast();
|
||||
|
||||
const [selectedProjectId, setSelectedProjectId] = useState<string>('all');
|
||||
const [activeTab, setActiveTab] = useState<'visits' | 'feedback'>('visits');
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [statusFilter, setStatusFilter] = useState('all');
|
||||
|
||||
// Modals
|
||||
const [isVisitModalOpen, setIsVisitModalOpen] = useState(false);
|
||||
@@ -135,13 +137,17 @@ export const SiteVisitsPage: React.FC = () => {
|
||||
// Filtered & Sorted Visits
|
||||
const filteredVisits = useMemo(() => {
|
||||
return siteVisits.filter((v) => {
|
||||
return (
|
||||
const matchSearch =
|
||||
!searchTerm.trim() ||
|
||||
(v.inspectorName && v.inspectorName.toLowerCase().includes(searchTerm.toLowerCase())) ||
|
||||
(v.findings && v.findings.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]);
|
||||
}, [siteVisits, searchTerm, statusFilter]);
|
||||
|
||||
const { sortedData: sortedVisits, sortColumn: visitSortCol, sortDirection: visitSortDir, handleSort: handleVisitSort } =
|
||||
useTableSort(filteredVisits);
|
||||
@@ -149,9 +155,9 @@ export const SiteVisitsPage: React.FC = () => {
|
||||
// Exports
|
||||
const visitExportCols: ExportColumn<SiteVisit>[] = [
|
||||
{ header: 'Inspector Name', key: 'inspectorName' },
|
||||
{ header: 'Visit Date', accessor: (v) => formatDate(v.visitedAt) },
|
||||
{ header: 'Visit Date', key: 'visitedAt', format: (val) => formatDate(val) },
|
||||
{ header: 'Findings', key: 'findings' },
|
||||
{ header: 'Status', accessor: (v) => (v.status === ApprovalStatus.Approved ? 'Approved' : 'Pending') },
|
||||
{ header: 'Status', key: 'status', format: (val) => (val === ApprovalStatus.Approved ? 'Approved' : 'Pending') },
|
||||
];
|
||||
|
||||
const handleOpenEdit = (v: SiteVisit) => {
|
||||
@@ -185,36 +191,6 @@ export const SiteVisitsPage: React.FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2.5 flex-wrap relative z-10">
|
||||
<button
|
||||
onClick={() => refetchVisits()}
|
||||
disabled={fetchingVisits}
|
||||
className="flex items-center gap-2 px-3.5 py-2.5 rounded-xl text-xs font-semibold bg-slate-900/90 text-slate-300 hover:text-white border border-slate-800 hover:bg-slate-800/80 transition cursor-pointer"
|
||||
>
|
||||
<RefreshCw className={`w-3.5 h-3.5 ${fetchingVisits ? 'animate-spin text-emerald-400' : ''}`} />
|
||||
<span>Refresh</span>
|
||||
</button>
|
||||
|
||||
<ExportButton data={sortedVisits} columns={visitExportCols} filename="site_visits" title="Site Visits Log" />
|
||||
|
||||
<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-2 px-4 py-2.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-lg shadow-emerald-600/25 transition cursor-pointer"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
<span>Log Site Visit</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* KPI Cards */}
|
||||
@@ -260,118 +236,368 @@ export const SiteVisitsPage: React.FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Toolbar */}
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 border-b border-slate-800 pb-3">
|
||||
<div className="flex items-center gap-3 flex-wrap">
|
||||
<div className="flex items-center gap-2 text-xs text-slate-400">
|
||||
<FolderKanban className="w-3.5 h-3.5 text-emerald-400" />
|
||||
<span>Project:</span>
|
||||
<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"
|
||||
>
|
||||
{projects.map((p) => (
|
||||
<option key={p.id} value={p.id}>
|
||||
{p.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
{/* Tabs */}
|
||||
<div className="space-y-4">
|
||||
<div className="flex border-b border-slate-800 bg-[#0d121f]/80 px-2 sm:px-4 rounded-2xl backdrop-blur-sm overflow-x-auto gap-2">
|
||||
<button
|
||||
onClick={() => setActiveTab('visits')}
|
||||
className={`py-3.5 px-4 text-xs font-semibold border-b-2 transition-colors flex items-center gap-2 cursor-pointer whitespace-nowrap ${
|
||||
activeTab === 'visits'
|
||||
? 'border-emerald-500 text-emerald-400'
|
||||
: 'border-transparent text-slate-400 hover:text-slate-200'
|
||||
}`}
|
||||
>
|
||||
<MapPin className="w-4 h-4" />
|
||||
<span>Site Visit Reports ({siteVisits.length})</span>
|
||||
</button>
|
||||
|
||||
<div className="relative">
|
||||
<Search className="w-3.5 h-3.5 absolute left-3 top-2.5 text-slate-400" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search inspector / findings..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="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 w-48 sm:w-64"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setActiveTab('feedback')}
|
||||
className={`py-3.5 px-4 text-xs font-semibold border-b-2 transition-colors flex items-center gap-2 cursor-pointer whitespace-nowrap ${
|
||||
activeTab === 'feedback'
|
||||
? 'border-emerald-500 text-emerald-400'
|
||||
: 'border-transparent text-slate-400 hover:text-slate-200'
|
||||
}`}
|
||||
>
|
||||
<MessageSquare className="w-4 h-4" />
|
||||
<span>Field Observations & Feedback ({siteVisits.length})</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Table */}
|
||||
<div className="bg-[#0f1523]/80 backdrop-blur-md rounded-2xl border border-slate-800/80 shadow-xl overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr className="border-b border-slate-800/80 bg-slate-900/50 text-[11px] font-semibold text-slate-400 uppercase tracking-wider">
|
||||
<SortableTh column="inspectorName" currentColumn={visitSortCol} direction={visitSortDir} onSort={handleVisitSort}>
|
||||
Inspector Name
|
||||
</SortableTh>
|
||||
<SortableTh column="visitedAt" currentColumn={visitSortCol} direction={visitSortDir} onSort={handleVisitSort}>
|
||||
Inspection Date
|
||||
</SortableTh>
|
||||
<SortableTh column="findings" currentColumn={visitSortCol} direction={visitSortDir} onSort={handleVisitSort}>
|
||||
Field Observations & Findings
|
||||
</SortableTh>
|
||||
<SortableTh column="status" currentColumn={visitSortCol} direction={visitSortDir} onSort={handleVisitSort}>
|
||||
Verification Status
|
||||
</SortableTh>
|
||||
<th className="py-3 px-4 text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-800/60 text-xs">
|
||||
{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/30 transition">
|
||||
<td className="py-3.5 px-4 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 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">{getApprovalStatusBadge(v.status)}</td>
|
||||
<td className="py-3.5 px-4 text-right 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>
|
||||
<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>
|
||||
{/* Tab 1: Visits Table View */}
|
||||
{activeTab === 'visits' && (
|
||||
<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
|
||||
data={sortedVisits}
|
||||
columns={visitExportCols}
|
||||
filename={`site_visits_${new Date().toISOString().split('T')[0]}`}
|
||||
title="Site Visits Register"
|
||||
/>
|
||||
|
||||
<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 backdrop-blur-md rounded-2xl border border-slate-800/80 shadow-xl overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr className="border-b border-slate-800/80 bg-slate-900/50 text-[11px] font-semibold text-slate-400 uppercase tracking-wider">
|
||||
<SortableTh column="inspectorName" currentColumn={visitSortCol} direction={visitSortDir} onSort={handleVisitSort}>
|
||||
Inspector Name
|
||||
</SortableTh>
|
||||
<SortableTh column="visitedAt" currentColumn={visitSortCol} direction={visitSortDir} onSort={handleVisitSort}>
|
||||
Inspection Date
|
||||
</SortableTh>
|
||||
<SortableTh column="findings" currentColumn={visitSortCol} direction={visitSortDir} onSort={handleVisitSort}>
|
||||
Field Observations & Findings
|
||||
</SortableTh>
|
||||
<SortableTh column="status" currentColumn={visitSortCol} direction={visitSortDir} onSort={handleVisitSort}>
|
||||
Verification Status
|
||||
</SortableTh>
|
||||
<th className="py-3 px-4 text-right">Actions</th>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-800/60 text-xs">
|
||||
{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/30 transition">
|
||||
<td className="py-3.5 px-4 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 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">{getApprovalStatusBadge(v.status)}</td>
|
||||
<td className="py-3.5 px-4 text-right 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>
|
||||
<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>
|
||||
)}
|
||||
|
||||
{/* Tab 2: Field Observations & Feedback Cards */}
|
||||
{activeTab === 'feedback' && (
|
||||
<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
|
||||
data={sortedVisits}
|
||||
columns={visitExportCols}
|
||||
filename={`site_visits_${new Date().toISOString().split('T')[0]}`}
|
||||
title="Site Visits Register"
|
||||
/>
|
||||
|
||||
<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>
|
||||
|
||||
{loadingVisits ? (
|
||||
<div className="py-12 text-center text-slate-400 bg-[#0f1523]/80 rounded-2xl border border-slate-800">
|
||||
<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 observation cards...</span>
|
||||
</div>
|
||||
</div>
|
||||
) : sortedVisits.length === 0 ? (
|
||||
<div className="py-12 text-center text-slate-400 bg-[#0f1523]/80 rounded-2xl border border-slate-800">
|
||||
No site visit observations or feedback found matching criteria.
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{sortedVisits.map((v) => (
|
||||
<div
|
||||
key={v.id}
|
||||
className="bg-[#0f1523]/90 rounded-2xl border border-slate-800/80 p-5 shadow-xl hover:border-emerald-500/40 transition flex flex-col justify-between gap-4 relative overflow-hidden group"
|
||||
>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<div className="h-9 w-9 rounded-xl bg-emerald-500/10 border border-emerald-500/30 flex items-center justify-center text-emerald-400">
|
||||
<User className="w-4 h-4" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-sm font-bold text-white group-hover:text-emerald-300 transition">
|
||||
{v.inspectorName || 'Field Auditor'}
|
||||
</h4>
|
||||
<div className="flex items-center gap-2 text-[11px] text-slate-400">
|
||||
<Calendar className="w-3 h-3 text-slate-500" />
|
||||
<span>{formatDate(v.visitedAt)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>{getApprovalStatusBadge(v.status)}</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-900/70 p-3.5 rounded-xl border border-slate-800/60 text-xs text-slate-300 leading-relaxed max-h-36 overflow-y-auto">
|
||||
<p className="font-semibold text-slate-400 text-[10px] uppercase tracking-wider mb-1 flex items-center gap-1.5">
|
||||
<FileText className="w-3 h-3 text-emerald-400" /> Field Observations & Findings
|
||||
</p>
|
||||
{v.findings || 'No detailed findings recorded.'}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between pt-2 border-t border-slate-800/60 text-xs">
|
||||
<span className="text-[11px] text-slate-500 font-mono">ID #{v.id}</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => {
|
||||
setSelectedVisitForDetail(v);
|
||||
setIsDetailModalOpen(true);
|
||||
}}
|
||||
className="px-3 py-1 text-xs font-semibold text-emerald-400 hover:text-emerald-300 bg-emerald-950/50 hover:bg-emerald-900/50 border border-emerald-800/50 rounded-lg transition cursor-pointer flex items-center gap-1"
|
||||
>
|
||||
<MessageSquare className="w-3 h-3" />
|
||||
<span>Detailed Review</span>
|
||||
</button>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Modal: Create/Edit Site Visit */}
|
||||
|
||||
Reference in New Issue
Block a user