From 9ba48de55b15509716995b7f1d06b6958b96125c Mon Sep 17 00:00:00 2001
From: Hermes Agent <hermes@litecharms.co.za>
Date: Sun, 27 Sep 2026 14:27:01 +0200
Subject: [PATCH] ui tweaks

---
 .../src/pages/ChangeManagementPage.tsx        |  21 +-
 .../src/pages/SiteVisitsPage.tsx              | 203 +-----------------
 2 files changed, 19 insertions(+), 205 deletions(-)

diff --git a/PostFundManagement.ConsoleUI/src/pages/ChangeManagementPage.tsx b/PostFundManagement.ConsoleUI/src/pages/ChangeManagementPage.tsx
index bbdd318..796a040 100644
--- a/PostFundManagement.ConsoleUI/src/pages/ChangeManagementPage.tsx
+++ b/PostFundManagement.ConsoleUI/src/pages/ChangeManagementPage.tsx
@@ -783,15 +783,26 @@ export const ChangeManagementPage: React.FC = () => {
                           </td>
                           <td className="py-3.5 px-5 text-right whitespace-nowrap space-x-2">
                             <button
-                              onClick={() => openResolveIssue(iss)}
-                              className="px-2.5 py-1 text-xs font-medium text-amber-400 hover:text-amber-300 bg-amber-950/40 hover:bg-amber-900/40 rounded-lg border border-amber-800/40 transition cursor-pointer"
+                              onClick={() => !isResolved && openResolveIssue(iss)}
+                              disabled={isResolved}
+                              className={`px-2.5 py-1 text-xs font-medium rounded-lg border transition ${
+                                isResolved
+                                  ? 'opacity-40 cursor-not-allowed text-slate-500 bg-slate-900/40 border-slate-800 pointer-events-none'
+                                  : 'text-amber-400 hover:text-amber-300 bg-amber-950/40 hover:bg-amber-900/40 border-amber-800/40 cursor-pointer'
+                              }`}
+                              title={isResolved ? 'Issue is already resolved' : 'Resolve issue'}
                             >
                               Resolve
                             </button>
                             <button
-                              onClick={() => openEditIssue(iss)}
-                              className="p-1 text-slate-400 hover:text-white hover:bg-slate-800 rounded-lg transition cursor-pointer"
-                              title="Edit issue"
+                              onClick={() => !isResolved && openEditIssue(iss)}
+                              disabled={isResolved}
+                              className={`p-1 rounded-lg transition inline-flex items-center justify-center ${
+                                isResolved
+                                  ? 'opacity-40 cursor-not-allowed text-slate-600 pointer-events-none'
+                                  : 'text-slate-400 hover:text-white hover:bg-slate-800 cursor-pointer'
+                              }`}
+                              title={isResolved ? 'Resolved issues cannot be edited' : 'Edit issue'}
                             >
                               <Edit2 className="w-3.5 h-3.5" />
                             </button>
diff --git a/PostFundManagement.ConsoleUI/src/pages/SiteVisitsPage.tsx b/PostFundManagement.ConsoleUI/src/pages/SiteVisitsPage.tsx
index f3ad7a4..91a2c8a 100644
--- a/PostFundManagement.ConsoleUI/src/pages/SiteVisitsPage.tsx
+++ b/PostFundManagement.ConsoleUI/src/pages/SiteVisitsPage.tsx
@@ -54,7 +54,6 @@ 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');
 
@@ -250,38 +249,9 @@ export const SiteVisitsPage: React.FC = () => {
         </div>
       </div>
 
-      {/* Tabs */}
+      {/* Site Visits Register View */}
       <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>
-
-          <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>
-
-        {/* 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 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">
@@ -449,174 +419,7 @@ export const SiteVisitsPage: React.FC = () => {
               </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>
-                          <ApprovalStatusBadge status={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>
+        </div>
 
       {/* Modal: Create/Edit Site Visit */}
       <Modal