frontend v2 refactor and enhancements

.gitignore

@@ -19,4 +19,5 @@ User/android/app/release/
 User/android/app/debug/
 
 .vscode
-node_modules/
+node_modules/
+.next

Frontend/app/admin/departments/[id]/page.tsx

@@ -48,12 +48,11 @@ export default function DepartmentDetailPage() {
   const [loading, setLoading] = useState(true);
   const [showAddMember, setShowAddMember] = useState(false);
 
-  // Form State
   const [newMember, setNewMember] = useState({
     name: "",
     email: "",
     role: "worker",
-    password: "", // Required by backend
+    password: "",
     phone: "",
     city: "",
     max_workload: 10,
@@ -88,7 +87,7 @@ export default function DepartmentDetailPage() {
       await apiPost("/admin/members", {
         ...newMember,
         department_id: department.id,
-        locality: "General", // Default for now
+        locality: "General",
       });
       setShowAddMember(false);
       setNewMember({
@@ -100,7 +99,7 @@ export default function DepartmentDetailPage() {
         city: "",
         max_workload: 10,
       });
-      loadData(department.id); // Refresh list
+      loadData(department.id);
       alert("Member added successfully!");
     } catch (error: any) {
       alert(error.message || "Failed to add member");
@@ -110,8 +109,6 @@ export default function DepartmentDetailPage() {
   const handleDeleteMember = async (memberId: string) => {
     if (!confirm("Are you sure you want to remove this member?")) return;
     try {
-      // Assuming there is a delete endpoint, though strictly not in the original brief, it's good UX
-      // backend/api/routes/admin.py lines 612-624 supports DELETE /members/{member_id}
       const token = localStorage.getItem("supabase_token");
       await fetch(
         `${process.env.NEXT_PUBLIC_API_URL}/admin/members/${memberId}`,
@@ -128,7 +125,7 @@ export default function DepartmentDetailPage() {
 
   if (loading) {
     return (
-      <div className="p-8 text-center text-slate-500">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 text-center text-slate-500">
         Loading Department...
       </div>
     );
@@ -139,8 +136,7 @@ export default function DepartmentDetailPage() {
   }
 
   return (
-    <div className="max-w-6xl mx-auto space-y-8 p-6">
-      {/* Header */}
+    <div className="max-w-7xl mx-auto space-y-8 px-4 sm:px-6 lg:px-8 py-8">
       <div>
         <Link
           href="/admin/departments"
@@ -148,10 +144,10 @@ export default function DepartmentDetailPage() {
         >
           <ArrowLeft className="w-4 h-4" /> Back to Departments
         </Link>
-        <div className="flex justify-between items-start">
+        <div className="flex flex-col sm:flex-row sm:items-start justify-between gap-4">
           <div>
             <div className="flex items-center gap-3 mb-1">
-              <h1 className="text-3xl font-bold text-slate-900">
+              <h1 className="text-3xl font-black text-slate-900">
                 {department.name}
               </h1>
               <span className="bg-slate-100 text-slate-600 px-2 py-1 rounded text-sm font-mono font-bold border border-slate-200">
@@ -175,9 +171,8 @@ export default function DepartmentDetailPage() {
         </div>
       </div>
 
-      {/* Stats Cards */}
       <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-        <div className="card border-l-4 border-l-blue-500 p-6">
+        <div className="bg-white/80 backdrop-blur-md rounded-2xl border border-slate-200/70 shadow-urban-sm p-6">
           <div className="flex justify-between items-center">
             <div>
               <p className="text-sm font-bold text-slate-400 uppercase tracking-wider">
@@ -187,34 +182,31 @@ export default function DepartmentDetailPage() {
                 {members.length}
               </h3>
             </div>
-            <div className="h-10 w-10 bg-blue-50 rounded-lg flex items-center justify-center text-blue-600">
+            <div className="h-10 w-10 bg-urban-primary/10 rounded-lg flex items-center justify-center text-urban-primary">
               <Users className="w-6 h-6" />
             </div>
           </div>
         </div>
-        {/* Add more stats if available */}
       </div>
 
-      {/* Members Section */}
       <div className="space-y-6">
         <div className="flex justify-between items-center">
-          <h2 className="text-xl font-bold text-slate-900 flex items-center gap-2">
+          <h2 className="text-xl font-black text-slate-900 flex items-center gap-2">
             <Users className="w-5 h-5 text-slate-400" />
             Department Members
           </h2>
           <button
             onClick={() => setShowAddMember(true)}
-            className="btn-primary flex items-center gap-2"
+            className="px-4 py-2 bg-urban-primary text-white font-semibold rounded-xl hover:bg-emerald-600 transition flex items-center gap-2"
           >
             <Plus className="w-4 h-4" /> Add Worker
           </button>
         </div>
 
-        {/* Add Member Form (Inline/Expandable) */}
         {showAddMember && (
-          <div className="card bg-slate-50 border-slate-200 animate-in fade-in slide-in-from-top-4">
-            <div className="flex justify-between items-center mb-6 pb-4 border-b border-slate-200">
-              <h3 className="text-lg font-bold text-slate-800">
+          <div className="bg-white/80 backdrop-blur-md rounded-2xl border border-slate-200/70 shadow-urban-sm p-6">
+            <div className="flex justify-between items-center mb-6 pb-4 border-b border-slate-200/70">
+              <h3 className="text-lg font-black text-slate-800">
                 Add New Member
               </h3>
               <button
@@ -234,7 +226,7 @@ export default function DepartmentDetailPage() {
                 </label>
                 <input
                   required
-                  className="input w-full bg-white"
+                  className="w-full px-4 py-2.5 bg-white/70 border border-slate-300 rounded-xl text-slate-900 focus:ring-4 focus:ring-urban-primary/10 focus:border-urban-primary/40 outline-none"
                   placeholder="John Doe"
                   value={newMember.name}
                   onChange={(e) =>
@@ -249,7 +241,7 @@ export default function DepartmentDetailPage() {
                 <input
                   required
                   type="email"
-                  className="input w-full bg-white"
+                  className="w-full px-4 py-2.5 bg-white/70 border border-slate-300 rounded-xl text-slate-900 focus:ring-4 focus:ring-urban-primary/10 focus:border-urban-primary/40 outline-none"
                   placeholder="john@city.gov"
                   value={newMember.email}
                   onChange={(e) =>
@@ -262,7 +254,7 @@ export default function DepartmentDetailPage() {
                   Role
                 </label>
                 <select
-                  className="input w-full bg-white"
+                  className="w-full px-4 py-2.5 bg-white/70 border border-slate-300 rounded-xl text-slate-900 focus:ring-4 focus:ring-urban-primary/10 focus:border-urban-primary/40 outline-none"
                   value={newMember.role}
                   onChange={(e) =>
                     setNewMember({ ...newMember, role: e.target.value })
@@ -280,7 +272,7 @@ export default function DepartmentDetailPage() {
                 <input
                   required
                   type="password"
-                  className="input w-full bg-white"
+                  className="w-full px-4 py-2.5 bg-white/70 border border-slate-300 rounded-xl text-slate-900 focus:ring-4 focus:ring-urban-primary/10 focus:border-urban-primary/40 outline-none"
                   placeholder="••••••••"
                   value={newMember.password}
                   onChange={(e) =>
@@ -293,7 +285,7 @@ export default function DepartmentDetailPage() {
                   Phone (Optional)
                 </label>
                 <input
-                  className="input w-full bg-white"
+                  className="w-full px-4 py-2.5 bg-white/70 border border-slate-300 rounded-xl text-slate-900 focus:ring-4 focus:ring-urban-primary/10 focus:border-urban-primary/40 outline-none"
                   placeholder="+1 234..."
                   value={newMember.phone}
                   onChange={(e) =>
@@ -306,7 +298,7 @@ export default function DepartmentDetailPage() {
                   City (Optional)
                 </label>
                 <input
-                  className="input w-full bg-white"
+                  className="w-full px-4 py-2.5 bg-white/70 border border-slate-300 rounded-xl text-slate-900 focus:ring-4 focus:ring-urban-primary/10 focus:border-urban-primary/40 outline-none"
                   placeholder="East District"
                   value={newMember.city}
                   onChange={(e) =>
@@ -318,11 +310,14 @@ export default function DepartmentDetailPage() {
                 <button
                   type="button"
                   onClick={() => setShowAddMember(false)}
-                  className="btn-secondary"
+                  className="px-5 py-2.5 bg-white/80 text-slate-700 font-semibold rounded-xl border border-slate-300 hover:bg-slate-50 transition"
                 >
                   Cancel
                 </button>
-                <button type="submit" className="btn-primary">
+                <button
+                  type="submit"
+                  className="px-5 py-2.5 bg-urban-primary text-white font-semibold rounded-xl hover:bg-emerald-600 transition"
+                >
                   Create Member Account
                 </button>
               </div>
@@ -330,10 +325,9 @@ export default function DepartmentDetailPage() {
           </div>
         )}
 
-        {/* Members List */}
-        <div className="card p-0 overflow-hidden">
+        <div className="bg-white/80 backdrop-blur-md rounded-2xl border border-slate-200/70 shadow-urban-sm p-0 overflow-hidden">
           <table className="w-full text-left">
-            <thead className="bg-slate-50 border-b border-slate-200">
+            <thead className="bg-slate-50/80 border-b border-slate-200/70">
               <tr>
                 <th className="px-6 py-4 text-xs font-bold text-slate-500 uppercase tracking-wider">
                   Name / Email
@@ -356,7 +350,7 @@ export default function DepartmentDetailPage() {
               {members.map((member) => (
                 <tr
                   key={member.id}
-                  className="hover:bg-slate-50/50 transition-colors"
+                  className="hover:bg-urban-primary/5 transition-colors"
                 >
                   <td className="px-6 py-4">
                     <div className="flex items-center gap-3">
@@ -403,7 +397,7 @@ export default function DepartmentDetailPage() {
                     <div className="flex items-center gap-2">
                       <div className="w-24 h-2 bg-slate-100 rounded-full overflow-hidden">
                         <div
-                          className={`h-full rounded-full ${member.current_workload > 5 ? "bg-orange-500" : "bg-green-500"}`}
+                          className={`h-full rounded-full ${member.current_workload > 5 ? "bg-amber-500" : "bg-urban-primary"}`}
                           style={{
                             width: `${(member.current_workload / (member.max_workload || 10)) * 100}%`,
                           }}

Frontend/app/admin/departments/page.tsx

@@ -1,6 +1,7 @@
 "use client";
-import { useEffect, useState } from "react";
-import { apiGet, apiPost } from "@/lib/api";
+import { useState } from "react";
+import { apiPost } from "@/lib/api";
+import { useCachedFetch } from "@/hooks/useCachedFetch";
 import { Building2, Plus, Search } from "lucide-react";
 
 interface Department {
@@ -14,8 +15,6 @@ interface Department {
 }
 
 export default function DepartmentsPage() {
-  const [departments, setDepartments] = useState<Department[]>([]);
-  const [loading, setLoading] = useState(true);
   const [showForm, setShowForm] = useState(false);
   const [formData, setFormData] = useState({
     name: "",
@@ -23,21 +22,9 @@ export default function DepartmentsPage() {
     description: "",
     default_sla_hours: 48,
   });
-
-  useEffect(() => {
-    fetchDepartments();
-  }, []);
-
-  const fetchDepartments = async () => {
-    try {
-      const data = await apiGet<Department[]>("/admin/departments");
-      setDepartments(data);
-    } catch (error) {
-      console.error("Failed to fetch departments:", error);
-    } finally {
-      setLoading(false);
-    }
-  };
+  const { data, loading, revalidate } =
+    useCachedFetch<Department[]>("/admin/departments");
+  const departments = data || [];
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -50,7 +37,7 @@ export default function DepartmentsPage() {
         description: "",
         default_sla_hours: 48,
       });
-      fetchDepartments();
+      revalidate();
     } catch (error: unknown) {
       const message =
         error instanceof Error ? error.message : "Failed to create department";
@@ -60,31 +47,33 @@ export default function DepartmentsPage() {
 
   if (loading) {
     return (
-      <div className="text-slate-600 font-medium">Loading Departments...</div>
+      <div className="text-slate-600 font-medium max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        Loading Departments...
+      </div>
     );
   }
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-8 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
       <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
         <div>
-          <h2 className="text-2xl font-bold text-slate-900">Departments</h2>
-          <p className="text-sm text-slate-500">
+          <h2 className="text-2xl font-black text-slate-900">Departments</h2>
+          <p className="text-sm text-slate-500 font-medium">
             Organizational units and SLA configurations.
           </p>
         </div>
         <button
           onClick={() => setShowForm(true)}
-          className="px-4 py-2 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition shadow-sm flex items-center gap-2"
+          className="px-4 py-2 bg-urban-primary text-white font-semibold rounded-xl hover:bg-emerald-600 transition shadow-sm flex items-center gap-2"
         >
           <Plus className="w-4 h-4" /> New Department
         </button>
       </div>
 
       {showForm && (
-        <div className="bg-white rounded-xl shadow-lg border border-slate-200 overflow-hidden animate-in fade-in slide-in-from-top-4">
-          <div className="bg-slate-50 px-6 py-4 border-b border-slate-200">
-            <h2 className="text-lg font-bold text-slate-800">
+        <div className="bg-white/80 backdrop-blur-md rounded-2xl shadow-urban-md border border-slate-200/70 overflow-hidden">
+          <div className="bg-slate-50/80 px-6 py-4 border-b border-slate-200/70">
+            <h2 className="text-lg font-black text-slate-800">
               Create New Department
             </h2>
           </div>
@@ -100,7 +89,7 @@ export default function DepartmentsPage() {
                   onChange={(e) =>
                     setFormData({ ...formData, name: e.target.value })
                   }
-                  className="w-full px-4 py-2 bg-white border border-slate-300 rounded-lg text-slate-900 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none"
+                  className="w-full px-4 py-2.5 bg-white/70 border border-slate-300 rounded-xl text-slate-900 focus:ring-4 focus:ring-urban-primary/10 focus:border-urban-primary/40 outline-none"
                   placeholder="e.g., Public Works Department"
                   required
                 />
@@ -118,7 +107,7 @@ export default function DepartmentsPage() {
                       code: e.target.value.toUpperCase(),
                     })
                   }
-                  className="w-full px-4 py-2 bg-white border border-slate-300 rounded-lg text-slate-900 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none"
+                  className="w-full px-4 py-2.5 bg-white/70 border border-slate-300 rounded-xl text-slate-900 focus:ring-4 focus:ring-urban-primary/10 focus:border-urban-primary/40 outline-none"
                   placeholder="e.g., PWD"
                   required
                 />
@@ -138,7 +127,7 @@ export default function DepartmentsPage() {
                 onChange={(e) =>
                   setFormData({ ...formData, description: e.target.value })
                 }
-                className="w-full px-4 py-2 bg-white border border-slate-300 rounded-lg text-slate-900 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none"
+                className="w-full px-4 py-2.5 bg-white/70 border border-slate-300 rounded-xl text-slate-900 focus:ring-4 focus:ring-urban-primary/10 focus:border-urban-primary/40 outline-none"
                 rows={2}
                 placeholder="Brief description of responsibilities..."
               />
@@ -161,21 +150,21 @@ export default function DepartmentsPage() {
                     default_sla_hours: parseInt(e.target.value),
                   })
                 }
-                className="w-32 px-4 py-2 bg-white border border-slate-300 rounded-lg text-slate-900 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none"
+                className="w-32 px-4 py-2.5 bg-white/70 border border-slate-300 rounded-xl text-slate-900 focus:ring-4 focus:ring-urban-primary/10 focus:border-urban-primary/40 outline-none"
               />
             </div>
 
             <div className="flex gap-3 pt-2">
               <button
                 type="submit"
-                className="px-6 py-2 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition shadow-sm"
+                className="px-6 py-2.5 bg-urban-primary text-white font-semibold rounded-xl hover:bg-emerald-600 transition shadow-sm"
               >
                 Create Department
               </button>
               <button
                 type="button"
                 onClick={() => setShowForm(false)}
-                className="px-6 py-2 bg-white text-slate-700 font-medium rounded-lg border border-slate-300 hover:bg-slate-50 transition"
+                className="px-6 py-2.5 bg-white/80 text-slate-700 font-semibold rounded-xl border border-slate-300 hover:bg-slate-50 transition"
               >
                 Cancel
               </button>
@@ -186,7 +175,7 @@ export default function DepartmentsPage() {
 
       <div className="space-y-4">
         {departments.length === 0 ? (
-          <div className="text-center py-16 bg-white rounded-xl border border-slate-200">
+          <div className="text-center py-16 bg-white/70 backdrop-blur-md rounded-2xl border border-slate-200/70">
             <Building2 className="w-12 h-12 mx-auto text-slate-300" />
             <p className="text-slate-500 mt-4 text-lg">No departments found.</p>
             <p className="text-slate-400 text-sm">
@@ -194,9 +183,9 @@ export default function DepartmentsPage() {
             </p>
           </div>
         ) : (
-          <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
+          <div className="bg-white/70 backdrop-blur-md rounded-2xl shadow-urban-sm border border-slate-200/70 overflow-hidden">
             <table className="min-w-full divide-y divide-slate-200">
-              <thead className="bg-slate-50">
+              <thead className="bg-slate-50/80">
                 <tr>
                   <th className="px-6 py-4 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">
                     Department
@@ -214,10 +203,13 @@ export default function DepartmentsPage() {
               </thead>
               <tbody className="divide-y divide-slate-200">
                 {departments.map((dept) => (
-                  <tr key={dept.id} className="hover:bg-slate-50 transition">
+                  <tr
+                    key={dept.id}
+                    className="hover:bg-urban-primary/5 transition"
+                  >
                     <td className="px-6 py-4 whitespace-nowrap">
                       <div className="flex items-center">
-                        <div className="shrink-0 h-10 w-10 rounded-lg bg-blue-100 text-blue-600 flex items-center justify-center font-bold text-sm">
+                        <div className="shrink-0 h-10 w-10 rounded-xl bg-urban-primary/10 text-urban-primary flex items-center justify-center font-bold text-sm">
                           {dept.code}
                         </div>
                         <div className="ml-4">
@@ -242,7 +234,7 @@ export default function DepartmentsPage() {
                       <span
                         className={`px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full ${
                           dept.is_active
-                            ? "bg-green-100 text-green-800"
+                            ? "bg-emerald-100 text-emerald-800"
                             : "bg-red-100 text-red-800"
                         }`}
                       >

Frontend/app/admin/heatmap/page.tsx

@@ -1,6 +1,6 @@
 "use client";
-import { useEffect, useState } from "react";
-import { apiGet } from "@/lib/api";
+import { useMemo } from "react";
+import { useCachedFetch } from "@/hooks/useCachedFetch";
 import { Map } from "lucide-react";
 
 interface HeatmapData {
@@ -10,23 +10,10 @@ interface HeatmapData {
 }
 
 export default function HeatmapPage() {
-  const [data, setData] = useState<HeatmapData[]>([]);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    fetchHeatmap();
-  }, []);
-
-  const fetchHeatmap = async () => {
-    try {
-      const heatmapData = await apiGet<HeatmapData[]>("/admin/stats/heatmap");
-      setData(heatmapData);
-    } catch (error) {
-      console.error("Failed to fetch heatmap:", error);
-    } finally {
-      setLoading(false);
-    }
-  };
+  const { data, loading } = useCachedFetch<HeatmapData[]>(
+    "/admin/stats/heatmap",
+  );
+  const heatmapData = useMemo(() => data || [], [data]);
 
   const getIntensityColor = (count: number, max: number) => {
     const intensity = count / max;
@@ -37,61 +24,87 @@ export default function HeatmapPage() {
   };
 
   if (loading) {
-    return <div className="text-slate-600 font-medium">Loading Analytics...</div>;
+    return (
+      <div className="text-slate-600 font-medium max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        Loading Analytics...
+      </div>
+    );
   }
 
-  const maxCount = Math.max(...data.map((d) => d.count), 1);
+  const maxCount = Math.max(...heatmapData.map((d) => d.count), 1);
 
   return (
-    <div className="space-y-6">
-       <div>
-          <h2 className="text-2xl font-bold text-slate-900">Geographic Heatmap</h2>
-          <p className="text-sm text-slate-500">Distribution of issues across city districts.</p>
-       </div>
+    <div className="space-y-8 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      <div>
+        <h2 className="text-2xl font-black text-slate-900">
+          Geographic Heatmap
+        </h2>
+        <p className="text-sm text-slate-500 font-medium">
+          Distribution of issues across city districts.
+        </p>
+      </div>
 
-      <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm mb-8">
-         <div className="flex items-center justify-between">
-            <h2 className="text-lg font-bold text-slate-900">Issue Density by City</h2>
-            <div className="flex gap-4 text-xs font-semibold uppercase text-slate-500">
-              <div className="flex items-center gap-2"><div className="w-3 h-3 rounded-full bg-emerald-500"></div> Low</div>
-              <div className="flex items-center gap-2"><div className="w-3 h-3 rounded-full bg-amber-400"></div> Medium</div>
-              <div className="flex items-center gap-2"><div className="w-3 h-3 rounded-full bg-orange-500"></div> High</div>
-              <div className="flex items-center gap-2"><div className="w-3 h-3 rounded-full bg-red-600"></div> Critical</div>
+      <div className="bg-white/70 backdrop-blur-md p-6 rounded-2xl border border-slate-200/70 shadow-urban-sm">
+        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+          <h2 className="text-lg font-black text-slate-900">
+            Issue Density by City
+          </h2>
+          <div className="flex flex-wrap gap-4 text-xs font-semibold uppercase text-slate-500">
+            <div className="flex items-center gap-2">
+              <div className="w-3 h-3 rounded-full bg-emerald-500"></div> Low
             </div>
-         </div>
+            <div className="flex items-center gap-2">
+              <div className="w-3 h-3 rounded-full bg-amber-400"></div> Medium
+            </div>
+            <div className="flex items-center gap-2">
+              <div className="w-3 h-3 rounded-full bg-orange-500"></div> High
+            </div>
+            <div className="flex items-center gap-2">
+              <div className="w-3 h-3 rounded-full bg-red-600"></div> Critical
+            </div>
+          </div>
+        </div>
       </div>
 
-      {data.length === 0 ? (
-        <div className="text-center py-16 bg-white rounded-xl border border-slate-200">
-           <Map className="w-12 h-12 mx-auto text-slate-300" />
+      {heatmapData.length === 0 ? (
+        <div className="text-center py-16 bg-white/70 backdrop-blur-md rounded-2xl border border-slate-200/70">
+          <Map className="w-12 h-12 mx-auto text-slate-300" />
           <p className="text-slate-500 mt-2">No location data available yet.</p>
         </div>
       ) : (
         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
-          {data.map((item) => (
+          {heatmapData.map((item) => (
             <div
               key={item.city}
-              className="group relative bg-white overflow-hidden rounded-xl border border-slate-200 shadow-sm hover:shadow-md transition-all"
+              className="group relative bg-white/80 backdrop-blur-md overflow-hidden rounded-2xl border border-slate-200/70 shadow-urban-sm hover:shadow-urban-md transition-all"
             >
               <div className="absolute top-0 left-0 w-full h-1.5 bg-slate-100">
-                 <div 
-                    className={`h-full ${getIntensityColor(item.count, maxCount)}`} 
-                    style={{ width: `${(item.count / maxCount) * 100}%` }}
-                 ></div>
+                <div
+                  className={`h-full ${getIntensityColor(item.count, maxCount)}`}
+                  style={{ width: `${(item.count / maxCount) * 100}%` }}
+                ></div>
               </div>
 
               <div className="p-6">
-                 <div className="flex justify-between items-start mb-4">
-                    <h3 className="text-lg font-bold text-slate-900">{item.city}</h3>
-                    <span className={`w-8 h-8 flex items-center justify-center rounded-lg text-white font-bold text-sm ${getIntensityColor(item.count, maxCount)}`}>
-                      {Math.round((item.count / maxCount) * 10)}
-                    </span>
-                 </div>
-                 
-                 <div className="flex items-baseline gap-1">
-                    <span className="text-3xl font-extrabold text-slate-900">{item.count}</span>
-                    <span className="text-sm font-medium text-slate-500">issues</span>
-                 </div>
+                <div className="flex justify-between items-start mb-4">
+                  <h3 className="text-lg font-bold text-slate-900">
+                    {item.city}
+                  </h3>
+                  <span
+                    className={`w-8 h-8 flex items-center justify-center rounded-lg text-white font-bold text-sm ${getIntensityColor(item.count, maxCount)}`}
+                  >
+                    {Math.round((item.count / maxCount) * 10)}
+                  </span>
+                </div>
+
+                <div className="flex items-baseline gap-1">
+                  <span className="text-3xl font-extrabold text-slate-900">
+                    {item.count}
+                  </span>
+                  <span className="text-sm font-medium text-slate-500">
+                    issues
+                  </span>
+                </div>
               </div>
             </div>
           ))}

Frontend/app/admin/issues/[id]/page.tsx

@@ -194,15 +194,21 @@ export default function IssueDetailPage() {
 
   if (loading)
     return (
-      <div className="p-8 text-center text-slate-500">Loading details...</div>
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 text-center text-slate-500">
+        Loading details...
+      </div>
     );
   if (!data)
-    return <div className="p-8 text-center text-red-500">Issue not found</div>;
+    return (
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 text-center text-red-500">
+        Issue not found
+      </div>
+    );
 
   const { issue, department, worker, events } = data;
 
   return (
-    <div className="max-w-7xl mx-auto space-y-6">
+    <div className="max-w-7xl mx-auto space-y-8 px-4 sm:px-6 lg:px-8 py-8">
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-4">
           <Link
@@ -212,7 +218,7 @@ export default function IssueDetailPage() {
             <ArrowLeft className="w-5 h-5" />
           </Link>
           <div>
-            <h1 className="text-2xl font-bold text-slate-900 flex items-center gap-3">
+            <h1 className="text-2xl font-black text-slate-900 flex items-center gap-3">
               Issue #{issue.id.slice(0, 8)}
               <span
                 className={`text-sm px-2.5 py-0.5 rounded-full border font-medium uppercase tracking-wide 
@@ -240,14 +246,14 @@ export default function IssueDetailPage() {
               <button
                 onClick={() => handleReview("rejected")}
                 disabled={actionLoading}
-                className="px-4 py-2 text-sm font-medium text-red-600 bg-white border border-red-200 rounded-lg hover:bg-red-50"
+                className="px-4 py-2 text-sm font-semibold text-red-600 bg-white border border-red-200 rounded-xl hover:bg-red-50"
               >
                 Reject & Close
               </button>
               <button
                 onClick={() => handleReview("approved")}
                 disabled={actionLoading}
-                className="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700"
+                className="px-4 py-2 text-sm font-semibold text-white bg-urban-primary rounded-xl hover:bg-emerald-600"
               >
                 Approve & Assign
               </button>
@@ -259,14 +265,14 @@ export default function IssueDetailPage() {
               <button
                 onClick={() => handleResolutionReview("reject")}
                 disabled={actionLoading}
-                className="px-4 py-2 text-sm font-medium text-red-600 bg-white border border-red-200 rounded-lg hover:bg-red-50"
+                className="px-4 py-2 text-sm font-semibold text-red-600 bg-white border border-red-200 rounded-xl hover:bg-red-50"
               >
                 Reject Incomplete Work
               </button>
               <button
                 onClick={() => handleResolutionReview("approve")}
                 disabled={actionLoading}
-                className="px-4 py-2 text-sm font-medium text-white bg-green-600 rounded-lg hover:bg-green-700"
+                className="px-4 py-2 text-sm font-semibold text-white bg-emerald-600 rounded-xl hover:bg-emerald-700"
               >
                 Verify & Approve
               </button>
@@ -284,8 +290,8 @@ export default function IssueDetailPage() {
 
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
         <div className="lg:col-span-2 space-y-6">
-          <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm">
-            <h3 className="text-lg font-semibold text-slate-900 mb-4 flex items-center gap-2">
+          <div className="bg-white/80 backdrop-blur-md p-6 rounded-3xl border border-slate-200/70 shadow-urban-sm">
+            <h3 className="text-lg font-black text-slate-900 mb-4 flex items-center gap-2">
               <ImageIcon className="w-5 h-5 text-slate-400" />
               Evidence Photos
             </h3>
@@ -298,7 +304,7 @@ export default function IssueDetailPage() {
                   {issue.image_urls.map((url, idx) => (
                     <div
                       key={idx}
-                      className="aspect-video bg-slate-100 rounded-lg overflow-hidden border border-slate-200 relative group"
+                      className="aspect-video bg-slate-100 rounded-2xl overflow-hidden border border-slate-200 relative group"
                     >
                       <img
                         src={url}
@@ -329,14 +335,14 @@ export default function IssueDetailPage() {
                     {issue.annotated_urls.map((url, idx) => (
                       <div
                         key={idx}
-                        className="aspect-video bg-slate-100 rounded-lg overflow-hidden border border-blue-200 relative group"
+                        className="aspect-video bg-slate-100 rounded-2xl overflow-hidden border border-urban-primary/30 relative group"
                       >
                         <img
                           src={url}
                           alt={`Analyzed ${idx + 1}`}
                           className="w-full h-full object-cover"
                         />
-                        <div className="absolute top-2 left-2 bg-blue-500 text-white text-xs px-2 py-0.5 rounded-full font-semibold">
+                        <div className="absolute top-2 left-2 bg-urban-primary text-white text-xs px-2 py-0.5 rounded-full font-semibold">
                           AI Detected
                         </div>
                         <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
@@ -361,13 +367,13 @@ export default function IssueDetailPage() {
                     Work Completion Proof
                   </h4>
                   <div className="grid grid-cols-2 gap-4">
-                    <div className="aspect-video bg-slate-100 rounded-lg overflow-hidden border border-green-200 relative group">
+                    <div className="aspect-video bg-slate-100 rounded-2xl overflow-hidden border border-emerald-200 relative group">
                       <img
                         src={issue.proof_image_url}
                         alt="Work Proof"
                         className="w-full h-full object-cover"
                       />
-                      <div className="absolute top-2 left-2 bg-green-500 text-white text-xs px-2 py-0.5 rounded-full font-semibold">
+                      <div className="absolute top-2 left-2 bg-emerald-500 text-white text-xs px-2 py-0.5 rounded-full font-semibold">
                         Worker Proof
                       </div>
                       <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
@@ -386,15 +392,15 @@ export default function IssueDetailPage() {
               )}
 
               {issue.image_urls.length === 0 && !issue.proof_image_url && (
-                <div className="py-8 text-center text-slate-400 bg-slate-50 rounded-lg border border-dashed border-slate-300">
+                <div className="py-8 text-center text-slate-400 bg-slate-50 rounded-2xl border border-dashed border-slate-300">
                   No images attached
                 </div>
               )}
             </div>
           </div>
 
-          <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm">
-            <h3 className="text-lg font-semibold text-slate-900 mb-4 flex items-center gap-2">
+          <div className="bg-white/80 backdrop-blur-md p-6 rounded-3xl border border-slate-200/70 shadow-urban-sm">
+            <h3 className="text-lg font-black text-slate-900 mb-4 flex items-center gap-2">
               <Activity className="w-5 h-5 text-slate-400" />
               Analysis & Details
             </h3>
@@ -457,7 +463,7 @@ export default function IssueDetailPage() {
                     </label>
                     <button
                       onClick={() => setEditingPriority(!editingPriority)}
-                      className="p-1 opacity-0 group-hover:opacity-100 hover:bg-slate-100 rounded text-slate-400 hover:text-blue-500 transition-all"
+                      className="p-1 opacity-0 group-hover:opacity-100 hover:bg-slate-100 rounded text-slate-400 hover:text-urban-primary transition-all"
                       aria-label="Edit Priority"
                     >
                       <Pencil className="w-3 h-3" />
@@ -472,7 +478,7 @@ export default function IssueDetailPage() {
                         onChange={(e) =>
                           setSelectedPriority(Number(e.target.value))
                         }
-                        className="bg-white border rounded px-2 py-1 text-sm flex-1"
+                        className="bg-white border border-slate-200 rounded-lg px-2 py-1 text-sm flex-1 focus:ring-4 focus:ring-urban-primary/10 focus:border-urban-primary/40"
                       >
                         <option value="1">P1 - Critical</option>
                         <option value="2">P2 - High</option>
@@ -483,7 +489,7 @@ export default function IssueDetailPage() {
                         onClick={() =>
                           handleUpdate({ priority: selectedPriority })
                         }
-                        className="p-1.5 bg-blue-100 text-blue-600 rounded hover:bg-blue-200"
+                        className="p-1.5 bg-urban-primary/10 text-urban-primary rounded hover:bg-urban-primary/20"
                         aria-label="Save"
                       >
                         <Save className="w-4 h-4" />
@@ -519,14 +525,14 @@ export default function IssueDetailPage() {
         </div>
 
         <div className="space-y-6">
-          <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm">
-            <h3 className="text-sm font-bold text-slate-900 uppercase tracking-wide mb-4">
+          <div className="bg-white/80 backdrop-blur-md p-6 rounded-3xl border border-slate-200/70 shadow-urban-sm">
+            <h3 className="text-sm font-black text-slate-900 uppercase tracking-wide mb-4">
               Assignment
             </h3>
 
             <div className="space-y-4">
               <div className="flex items-start gap-3">
-                <div className="w-9 h-9 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
+                <div className="w-9 h-9 rounded-full bg-urban-primary/10 flex items-center justify-center text-urban-primary">
                   <Building2 className="w-5 h-5" />
                 </div>
                 <div>
@@ -541,7 +547,7 @@ export default function IssueDetailPage() {
                 <div className="absolute right-0 top-0 opacity-0 group-hover:opacity-100 transition-opacity">
                   <button
                     onClick={() => setEditingAssignment(!editingAssignment)}
-                    className="p-1 hover:bg-slate-100 rounded text-slate-400 hover:text-blue-500"
+                    className="p-1 hover:bg-slate-100 rounded text-slate-400 hover:text-urban-primary"
                     aria-label="Edit Assignment"
                   >
                     <Pencil className="w-3 h-3" />
@@ -559,7 +565,7 @@ export default function IssueDetailPage() {
                         aria-label="Select worker"
                         value={selectedWorker}
                         onChange={(e) => setSelectedWorker(e.target.value)}
-                        className="bg-white border rounded px-2 py-1 text-sm w-full"
+                        className="bg-white border border-slate-200 rounded-lg px-2 py-1 text-sm w-full focus:ring-4 focus:ring-urban-primary/10 focus:border-urban-primary/40"
                       >
                         <option value="">Unassigned</option>
                         {workers.map((w) => (
@@ -575,13 +581,13 @@ export default function IssueDetailPage() {
                               assigned_member_id: selectedWorker || null,
                             })
                           }
-                          className="flex-1 py-1 bg-blue-600 text-white text-xs rounded hover:bg-blue-700"
+                          className="flex-1 py-1 bg-urban-primary text-white text-xs rounded-lg hover:bg-emerald-600"
                         >
                           Save
                         </button>
                         <button
                           onClick={() => setEditingAssignment(false)}
-                          className="flex-1 py-1 bg-slate-200 text-slate-700 text-xs rounded hover:bg-slate-300"
+                          className="flex-1 py-1 bg-slate-200 text-slate-700 text-xs rounded-lg hover:bg-slate-300"
                         >
                           Cancel
                         </button>
@@ -604,7 +610,7 @@ export default function IssueDetailPage() {
 
               {issue.sla_deadline && (
                 <div className="pt-4 border-t border-slate-100">
-                  <div className="flex items-center gap-2 text-amber-600 bg-amber-50 px-3 py-2 rounded-lg">
+                  <div className="flex items-center gap-2 text-amber-600 bg-amber-50 px-3 py-2 rounded-xl">
                     <Clock className="w-4 h-4" />
                     <div>
                       <div className="text-[10px] font-bold uppercase">
@@ -620,8 +626,8 @@ export default function IssueDetailPage() {
             </div>
           </div>
 
-          <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm relative overflow-hidden">
-            <h3 className="text-sm font-bold text-slate-900 uppercase tracking-wide mb-6">
+          <div className="bg-white/80 backdrop-blur-md p-6 rounded-3xl border border-slate-200/70 shadow-urban-sm relative overflow-hidden">
+            <h3 className="text-sm font-black text-slate-900 uppercase tracking-wide mb-6">
               Activity Audit
             </h3>
 
@@ -632,7 +638,7 @@ export default function IssueDetailPage() {
             <div className="space-y-0 text-sm relative border-l-2 border-slate-100 ml-2">
               {events.map((event, idx) => (
                 <div key={idx} className="pl-6 pb-6 relative last:pb-0">
-                  <div className="absolute -left-2.25 top-0 w-4 h-4 rounded-full bg-white border-2 border-blue-500"></div>
+                  <div className="absolute -left-2.25 top-0 w-4 h-4 rounded-full bg-white border-2 border-urban-primary"></div>
                   <div className="flex flex-col">
                     <span className="font-semibold text-slate-900">
                       {event.agent || "System"}

Frontend/app/admin/issues/page.tsx

@@ -37,10 +37,10 @@ interface IssuesResponse {
 export default function IssuesPage() {
   const router = useRouter();
   const searchParams = useSearchParams();
-  
+
   const [page, setPage] = useState(1);
   const limit = 10;
-  
+
   const [search, setSearch] = useState("");
   const [status, setStatus] = useState<string>("");
   const [priority, setPriority] = useState<string>("");
@@ -79,7 +79,8 @@ export default function IssuesPage() {
     return `/admin/issues?${query.toString()}`;
   }, [page, limit, sort, order, debouncedSearch, status, priority]);
 
-  const { data: issuesData, loading } = useCachedFetch<IssuesResponse>(queryUrl);
+  const { data: issuesData, loading } =
+    useCachedFetch<IssuesResponse>(queryUrl);
 
   const issues = issuesData?.items || [];
   const meta: Meta = {
@@ -119,31 +120,31 @@ export default function IssuesPage() {
   };
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-8 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
       <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
         <div>
-          <h1 className="text-2xl font-bold text-slate-900 tracking-tight">
+          <h1 className="text-2xl font-black text-slate-900 tracking-tight">
             Issue Management
           </h1>
-          <p className="text-slate-500 text-sm">
+          <p className="text-slate-500 text-sm font-medium">
             Monitor, assign, and resolve reported city issues.
           </p>
         </div>
         <div className="flex items-center gap-2">
           <button
             onClick={() => setStatus("pending_verification")}
-            className="px-4 py-2 bg-orange-100 text-orange-800 text-sm font-medium rounded-lg hover:bg-orange-200 transition flex items-center gap-2 border border-orange-200"
+            className="px-4 py-2 bg-amber-100 text-amber-800 text-sm font-semibold rounded-xl hover:bg-amber-200 transition flex items-center gap-2 border border-amber-200"
           >
             <AlertCircle className="w-4 h-4" />
             Pending Reviews
           </button>
-          <button className="bg-slate-900 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-slate-800 transition">
+          <button className="bg-slate-900 text-white px-4 py-2 rounded-xl text-sm font-semibold hover:bg-slate-800 transition">
             Export CSV
           </button>
         </div>
       </div>
 
-      <div className="bg-white/60 backdrop-blur-md rounded-2xl border border-slate-200/60 shadow-urban-sm p-4 transition-all">
+      <div className="bg-white/70 backdrop-blur-md rounded-3xl border border-slate-200/70 shadow-urban-sm p-4 sm:p-6 transition-all">
         <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
           <div className="md:col-span-2 relative group">
             <Search className="absolute left-3 top-2.5 h-4 w-4 text-slate-400 group-focus-within:text-blue-500 transition-colors" />
@@ -152,7 +153,7 @@ export default function IssuesPage() {
               placeholder="Search by ID, description, or location..."
               value={search}
               onChange={(e) => setSearch(e.target.value)}
-              className="w-full pl-10 pr-4 py-2 text-sm border border-slate-200 bg-white/50 rounded-xl focus:outline-none focus:ring-4 focus:ring-blue-500/10 focus:border-blue-500/50 transition-all font-sans"
+              className="w-full pl-10 pr-4 py-2.5 text-sm border border-slate-200 bg-white/70 rounded-xl focus:outline-none focus:ring-4 focus:ring-urban-primary/10 focus:border-urban-primary/40 transition-all font-sans"
             />
           </div>
 
@@ -160,7 +161,7 @@ export default function IssuesPage() {
             aria-label="Filter by Status"
             value={status}
             onChange={(e) => setStatus(e.target.value)}
-            className="px-3 py-2 text-sm border border-slate-200 bg-white/50 rounded-xl focus:outline-none focus:ring-4 focus:ring-blue-500/10 focus:border-blue-500/50 transition-all font-sans"
+            className="px-3 py-2.5 text-sm border border-slate-200 bg-white/70 rounded-xl focus:outline-none focus:ring-4 focus:ring-urban-primary/10 focus:border-urban-primary/40 transition-all font-sans"
           >
             <option value="">All Statuses</option>
             <option value="reported">Reported</option>
@@ -177,7 +178,7 @@ export default function IssuesPage() {
             aria-label="Filter by Priority"
             value={priority}
             onChange={(e) => setPriority(e.target.value)}
-            className="px-3 py-2 text-sm border border-slate-200 bg-white/50 rounded-xl focus:outline-none focus:ring-4 focus:ring-blue-500/10 focus:border-blue-500/50 transition-all font-sans"
+            className="px-3 py-2.5 text-sm border border-slate-200 bg-white/70 rounded-xl focus:outline-none focus:ring-4 focus:ring-urban-primary/10 focus:border-urban-primary/40 transition-all font-sans"
           >
             <option value="">All Priorities</option>
             <option value="1">Critical (P1)</option>
@@ -193,7 +194,7 @@ export default function IssuesPage() {
             Loading issues...
           </div>
         ) : (
-          <div className="overflow-x-auto rounded-xl border border-slate-200/50">
+          <div className="overflow-x-auto rounded-2xl border border-slate-200/60 bg-white/60">
             <table className="w-full text-left border-collapse">
               <thead>
                 <tr className="border-b border-slate-200/60 text-xs uppercase text-slate-500 bg-slate-50/80 font-mono tracking-wider">
@@ -240,7 +241,7 @@ export default function IssuesPage() {
                   issues.map((issue) => (
                     <tr
                       key={issue.id}
-                      className="group hover:bg-blue-50/30 transition-colors duration-200"
+                      className="group hover:bg-urban-primary/5 transition-colors duration-200"
                     >
                       <td className="px-4 py-3">
                         <div className="flex items-center gap-3">
@@ -258,10 +259,10 @@ export default function IssuesPage() {
                             )}
                           </div>
                           <div>
-                            <div className="text-sm font-semibold text-slate-900 truncate max-w-50 font-display">
+                            <div className="text-sm font-semibold text-slate-900 truncate max-w-50">
                               {issue.category || "Uncategorized Issue"}
                             </div>
-                            <div className="text-xs text-slate-500 truncate max-w-50 font-sans">
+                            <div className="text-xs text-slate-500 truncate max-w-50">
                               {issue.description || "No description provided"}
                             </div>
                           </div>
@@ -301,7 +302,9 @@ export default function IssuesPage() {
                             <div className="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center text-[10px] font-bold text-blue-700 ring-2 ring-white shadow-sm">
                               {issue.assigned_to.charAt(0)}
                             </div>
-                            <span className="font-medium text-slate-700">{issue.assigned_to}</span>
+                            <span className="font-medium text-slate-700">
+                              {issue.assigned_to}
+                            </span>
                           </div>
                         ) : (
                           <span className="text-slate-400 italic text-xs">
@@ -315,7 +318,9 @@ export default function IssuesPage() {
                         )}
                       </td>
                       <td className="px-4 py-3 text-sm text-slate-600">
-                        <span className="font-medium">{new Date(issue.created_at).toLocaleDateString()}</span>
+                        <span className="font-medium">
+                          {new Date(issue.created_at).toLocaleDateString()}
+                        </span>
                         <div className="text-xs text-slate-400 font-mono">
                           {new Date(issue.created_at).toLocaleTimeString([], {
                             hour: "2-digit",
@@ -326,7 +331,7 @@ export default function IssuesPage() {
                       <td className="px-4 py-3 text-right">
                         <Link
                           href={`/admin/issues/${issue.id}`}
-                          className="inline-flex items-center gap-1.5 text-xs font-medium text-blue-600 hover:text-blue-800 bg-blue-50 px-2.5 py-1.5 rounded-lg border border-blue-100 hover:bg-blue-100 transition-colors"
+                          className="inline-flex items-center gap-1.5 text-xs font-semibold text-urban-primary hover:text-emerald-700 bg-urban-primary/10 px-2.5 py-1.5 rounded-lg border border-urban-primary/20 hover:bg-urban-primary/20 transition-colors"
                         >
                           View
                           <ChevronRight className="w-3.5 h-3.5" />
@@ -350,20 +355,22 @@ export default function IssuesPage() {
             <span className="font-semibold text-slate-900">
               {Math.min(meta.page * meta.limit, meta.total)}
             </span>{" "}
-            of <span className="font-semibold text-slate-900">{meta.total}</span> results
+            of{" "}
+            <span className="font-semibold text-slate-900">{meta.total}</span>{" "}
+            results
           </div>
           <div className="flex gap-2">
             <button
               onClick={() => handlePageChange(meta.page - 1)}
               disabled={meta.page === 1}
-              className="px-3.5 py-1.5 text-sm font-medium border border-slate-200 rounded-lg hover:bg-slate-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors text-slate-700"
+              className="px-3.5 py-1.5 text-sm font-semibold border border-slate-200 rounded-lg hover:bg-slate-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors text-slate-700"
             >
               Previous
             </button>
             <button
               onClick={() => handlePageChange(meta.page + 1)}
               disabled={meta.page === meta.pages}
-              className="px-3.5 py-1.5 text-sm font-medium border border-slate-200 rounded-lg hover:bg-slate-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors text-slate-700"
+              className="px-3.5 py-1.5 text-sm font-semibold border border-slate-200 rounded-lg hover:bg-slate-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors text-slate-700"
             >
               Next
             </button>

Frontend/app/admin/page.tsx

@@ -1,4 +1,4 @@
-"use client"
+"use client";
 import Link from "next/link";
 import { useCachedFetch } from "@/hooks/useCachedFetch";
 import {
@@ -49,9 +49,9 @@ export default function AdminDashboard() {
 
   if (loading) {
     return (
-      <div className="space-y-6">
-        <Skeleton className="h-8 w-48 mb-6" />
-        <div className="grid grid-cols-1 md:grid-cols-3 xl:grid-cols-6 gap-6">
+      <div className="space-y-8 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <Skeleton className="h-8 w-48" />
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-6">
           {Array.from({ length: 6 }).map((_, i) => (
             <Skeleton key={i} className="h-32 rounded-2xl" />
           ))}
@@ -70,23 +70,28 @@ export default function AdminDashboard() {
     stats?.issues_activity && stats.issues_activity.length > 0;
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-8 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
       <div className="flex items-center justify-between">
-        <h2 className="text-2xl font-bold text-slate-900 tracking-tight">
-          Overview
-        </h2>
+        <div>
+          <h2 className="text-2xl font-black text-slate-900 tracking-tight">
+            Overview
+          </h2>
+          <p className="text-sm text-slate-500 font-medium">
+            City operations at a glance
+          </p>
+        </div>
       </div>
 
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-6">
         <StatCard
           title="Departments"
           value={stats?.departments || 0}
-          icon={<Building2 className="w-5 h-5 text-blue-600" />}
+          icon={<Building2 className="w-5 h-5 text-urban-primary" />}
         />
         <StatCard
           title="Total Staff"
           value={stats?.members || 0}
-          icon={<Users className="w-5 h-5 text-purple-600" />}
+          icon={<Users className="w-5 h-5 text-amber-500" />}
         />
         <StatCard
           title="Total Issues"
@@ -106,7 +111,7 @@ export default function AdminDashboard() {
           <StatCard
             title="Needs Review"
             value={stats?.verification_needed || 0}
-            icon={<ClipboardCheck className="w-5 h-5 text-indigo-600" />}
+            icon={<ClipboardCheck className="w-5 h-5 text-urban-primary" />}
             alert={(stats?.verification_needed || 0) > 0}
           />
         </Link>
@@ -118,9 +123,9 @@ export default function AdminDashboard() {
       </div>
 
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-        <div className="lg:col-span-2 bg-white/60 backdrop-blur-md p-6 rounded-2xl border border-slate-200/60 shadow-urban-sm hover:shadow-urban-md transition-all">
-          <h3 className="text-lg font-bold text-slate-900 mb-6 flex items-center gap-2">
-            <span className="w-1 h-6 bg-blue-500 rounded-full"></span>
+        <div className="lg:col-span-2 bg-white/70 backdrop-blur-md p-6 rounded-3xl border border-slate-200/70 shadow-urban-sm hover:shadow-urban-md transition-all">
+          <h3 className="text-lg font-black text-slate-900 mb-6 flex items-center gap-3">
+            <span className="w-1.5 h-6 bg-urban-primary rounded-full"></span>
             Weekly Activity
           </h3>
           {hasActivityData ? (
@@ -139,13 +144,21 @@ export default function AdminDashboard() {
                     dataKey="name"
                     axisLine={false}
                     tickLine={false}
-                    tick={{ fill: "#64748B", fontSize: 12, fontFamily: 'var(--font-fira-sans)' }}
+                    tick={{
+                      fill: "#64748B",
+                      fontSize: 12,
+                      fontFamily: "var(--font-fira-sans)",
+                    }}
                     dy={10}
                   />
                   <YAxis
                     axisLine={false}
                     tickLine={false}
-                    tick={{ fill: "#64748B", fontSize: 12, fontFamily: 'var(--font-fira-sans)' }}
+                    tick={{
+                      fill: "#64748B",
+                      fontSize: 12,
+                      fontFamily: "var(--font-fira-sans)",
+                    }}
                   />
                   <Tooltip
                     cursor={{ fill: "#F1F5F9" }}
@@ -155,21 +168,24 @@ export default function AdminDashboard() {
                       boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1)",
                       backgroundColor: "rgba(255, 255, 255, 0.9)",
                       backdropFilter: "blur(4px)",
-                      fontFamily: 'var(--font-fira-sans)',
+                      fontFamily: "var(--font-fira-sans)",
                     }}
                   />
-                  <Legend iconType="circle" wrapperStyle={{ fontFamily: 'var(--font-fira-sans)' }} />
+                  <Legend
+                    iconType="circle"
+                    wrapperStyle={{ fontFamily: "var(--font-fira-sans)" }}
+                  />
                   <Bar
                     dataKey="reported"
                     name="Reported"
-                    fill="#3B82F6"
+                    fill="#0ea5a4"
                     radius={[4, 4, 0, 0]}
                     barSize={20}
                   />
                   <Bar
                     dataKey="resolved"
                     name="Resolved"
-                    fill="#10B981"
+                    fill="#22c55e"
                     radius={[4, 4, 0, 0]}
                     barSize={20}
                   />
@@ -183,9 +199,9 @@ export default function AdminDashboard() {
           )}
         </div>
 
-        <div className="bg-white/60 backdrop-blur-md p-6 rounded-2xl border border-slate-200/60 shadow-urban-sm hover:shadow-urban-md transition-all">
-          <h3 className="text-lg font-bold text-slate-900 mb-6 flex items-center gap-2">
-            <span className="w-1 h-6 bg-purple-500 rounded-full"></span>
+        <div className="bg-white/70 backdrop-blur-md p-6 rounded-3xl border border-slate-200/70 shadow-urban-sm hover:shadow-urban-md transition-all">
+          <h3 className="text-lg font-black text-slate-900 mb-6 flex items-center gap-3">
+            <span className="w-1.5 h-6 bg-amber-500 rounded-full"></span>
             Issues by Category
           </h3>
           {hasChartData ? (
@@ -209,17 +225,21 @@ export default function AdminDashboard() {
                       />
                     ))}
                   </Pie>
-                  <Tooltip 
+                  <Tooltip
                     contentStyle={{
                       borderRadius: "12px",
                       border: "1px solid rgba(226, 232, 240, 0.8)",
                       boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1)",
                       backgroundColor: "rgba(255, 255, 255, 0.9)",
                       backdropFilter: "blur(4px)",
-                      fontFamily: 'var(--font-fira-sans)',
+                      fontFamily: "var(--font-fira-sans)",
                     }}
                   />
-                  <Legend verticalAlign="bottom" height={36} wrapperStyle={{ fontFamily: 'var(--font-fira-sans)' }} />
+                  <Legend
+                    verticalAlign="bottom"
+                    height={36}
+                    wrapperStyle={{ fontFamily: "var(--font-fira-sans)" }}
+                  />
                 </PieChart>
               </ResponsiveContainer>
             </div>
@@ -246,7 +266,7 @@ function StatCard({
   alert?: boolean;
 }) {
   return (
-    <div className="bg-white/60 backdrop-blur-md p-6 rounded-2xl border border-slate-200/60 shadow-urban-sm hover:shadow-urban-md transition-all hover:-translate-y-1 group">
+    <div className="bg-white/70 backdrop-blur-md p-6 rounded-2xl border border-slate-200/70 shadow-urban-sm hover:shadow-urban-md transition-all hover:-translate-y-1 group">
       <div className="flex justify-between items-start mb-4">
         <div className="p-3 bg-white rounded-xl border border-slate-100 shadow-sm group-hover:scale-110 transition-transform duration-300">
           {icon}

Frontend/app/admin/review/page.tsx

@@ -1,6 +1,7 @@
 "use client";
-import { useEffect, useState } from "react";
-import { apiGet, apiPost } from "@/lib/api";
+import { useMemo, useState } from "react";
+import { apiPost } from "@/lib/api";
+import { useCachedFetch } from "@/hooks/useCachedFetch";
 import { CheckCircle2, XCircle } from "lucide-react";
 
 interface Issue {
@@ -16,28 +17,29 @@ interface Issue {
 }
 
 export default function ManualReviewPage() {
-  const [issues, setIssues] = useState<Issue[]>([]);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    fetchPendingIssues();
-  }, []);
+  const [removedIds, setRemovedIds] = useState<Set<string>>(new Set());
+  const { data, loading, revalidate } = useCachedFetch<{ items: Issue[] }>(
+    "/issues?state=reported",
+  );
 
-  const fetchPendingIssues = async () => {
-    try {
-      const data = await apiGet<{ items: Issue[] }>("/issues?state=reported");
-      setIssues(data.items || []);
-    } catch (error) {
-      console.error("Failed to fetch issues:", error);
-    } finally {
-      setLoading(false);
-    }
-  };
+  const issues = useMemo(() => data?.items || [], [data]);
+  const visibleIssues = useMemo(
+    () => issues.filter((issue) => !removedIds.has(issue.id)),
+    [issues, removedIds],
+  );
 
   const handleReview = async (id: string, status: "approved" | "rejected") => {
     try {
-      const data = await apiPost<{ message: string }>(`/admin/issues/${id}/review`, { status });
-      setIssues(prev => prev.filter(i => i.id !== id));
+      const data = await apiPost<{ message: string }>(
+        `/admin/issues/${id}/review`,
+        { status },
+      );
+      setRemovedIds((prev) => {
+        const next = new Set(prev);
+        next.add(id);
+        return next;
+      });
+      revalidate();
       alert(data.message);
     } catch (error) {
       console.error("Review failed", error);
@@ -46,71 +48,93 @@ export default function ManualReviewPage() {
   };
 
   if (loading) {
-    return <div className="text-slate-600 font-medium">Loading Reviews...</div>;
+    return (
+      <div className="text-slate-600 font-medium max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        Loading Reviews...
+      </div>
+    );
   }
 
   return (
-    <div className="space-y-6">
-      <div className="flex justify-between items-center">
-         <div>
-            <h2 className="text-2xl font-bold text-slate-900">Manual Review Queue</h2>
-            <p className="text-sm text-slate-500">Validate incoming citizen reports before assignment.</p>
-         </div>
-         <div className="bg-blue-600 text-white text-xs font-bold px-3 py-1.5 rounded-full shadow-sm">
-             {issues.length} Pending
-         </div>
+    <div className="space-y-8 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
+        <div>
+          <h2 className="text-2xl font-black text-slate-900">
+            Manual Review Queue
+          </h2>
+          <p className="text-sm text-slate-500 font-medium">
+            Validate incoming citizen reports before assignment.
+          </p>
+        </div>
+        <div className="bg-urban-primary text-white text-xs font-bold px-3 py-1.5 rounded-full shadow-sm">
+          {visibleIssues.length} Pending
+        </div>
       </div>
 
-      {issues.length === 0 ? (
-        <div className="text-center py-20 bg-white rounded-xl border border-slate-200 shadow-sm">
-          <CheckCircle2 className="w-12 h-12 mx-auto text-green-400" />
-          <p className="text-slate-900 font-medium mt-4 text-lg">All caught up!</p>
+      {visibleIssues.length === 0 ? (
+        <div className="text-center py-20 bg-white/70 backdrop-blur-md rounded-2xl border border-slate-200/70 shadow-urban-sm">
+          <CheckCircle2 className="w-12 h-12 mx-auto text-emerald-500" />
+          <p className="text-slate-900 font-medium mt-4 text-lg">
+            All caught up!
+          </p>
           <p className="text-slate-500">No issues pending manual review.</p>
         </div>
       ) : (
         <div className="grid gap-6">
-          {issues.map((issue) => (
-            <div key={issue.id} className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden flex flex-col md:flex-row">
+          {visibleIssues.map((issue) => (
+            <div
+              key={issue.id}
+              className="bg-white/80 backdrop-blur-md rounded-2xl border border-slate-200/70 shadow-urban-sm overflow-hidden flex flex-col md:flex-row"
+            >
               <div className="md:w-1/3 h-64 md:h-auto bg-slate-100 relative">
-                  {issue.images?.[0] ? (
-                      <img 
-                          src={issue.images[0].annotated_path || issue.images[0].file_path} 
-                          alt="Evidence" 
-                          className="w-full h-full object-cover"
-                      />
-                  ) : (
-                      <div className="flex items-center justify-center h-full text-slate-400">No Image</div>
-                  )}
+                {issue.images?.[0] ? (
+                  <img
+                    src={
+                      issue.images[0].annotated_path ||
+                      issue.images[0].file_path
+                    }
+                    alt="Evidence"
+                    className="w-full h-full object-cover"
+                  />
+                ) : (
+                  <div className="flex items-center justify-center h-full text-slate-400">
+                    No Image
+                  </div>
+                )}
               </div>
 
               <div className="p-6 md:w-2/3 flex flex-col justify-between">
-                  <div>
-                      <div className="flex justify-between items-start mb-2">
-                           <span className="px-2.5 py-0.5 rounded-full bg-slate-100 text-slate-600 text-xs font-bold uppercase">
-                              {issue.city}
-                           </span>
-                           <span className="text-xs text-slate-400">
-                              {new Date(issue.created_at).toLocaleDateString()}
-                           </span>
-                      </div>
-                      <h3 className="text-lg font-bold text-slate-900 mb-2">{issue.description || "No description"}</h3>
-                      <p className="text-slate-600 text-sm mb-4">{issue.full_address || issue.locality}</p>
+                <div>
+                  <div className="flex justify-between items-start mb-2">
+                    <span className="px-2.5 py-0.5 rounded-full bg-slate-100 text-slate-600 text-xs font-bold uppercase">
+                      {issue.city}
+                    </span>
+                    <span className="text-xs text-slate-400">
+                      {new Date(issue.created_at).toLocaleDateString()}
+                    </span>
                   </div>
+                  <h3 className="text-lg font-bold text-slate-900 mb-2">
+                    {issue.description || "No description"}
+                  </h3>
+                  <p className="text-slate-600 text-sm mb-4">
+                    {issue.full_address || issue.locality}
+                  </p>
+                </div>
 
-                  <div className="flex gap-4 mt-4 pt-4 border-t border-slate-100">
-                      <button 
-                          onClick={() => handleReview(issue.id, "approved")}
-                          className="flex-1 bg-green-600 hover:bg-green-700 text-white font-semibold py-2 px-4 rounded-lg transition shadow-sm flex items-center justify-center gap-2"
-                      >
-                          <CheckCircle2 className="w-4 h-4" /> Approve & Assign
-                      </button>
-                      <button 
-                          onClick={() => handleReview(issue.id, "rejected")}
-                          className="flex-1 bg-white border border-red-200 text-red-600 hover:bg-red-50 font-semibold py-2 px-4 rounded-lg transition flex items-center justify-center gap-2"
-                      >
-                          <XCircle className="w-4 h-4" /> Reject
-                      </button>
-                  </div>
+                <div className="flex flex-col sm:flex-row gap-3 mt-4 pt-4 border-t border-slate-100/70">
+                  <button
+                    onClick={() => handleReview(issue.id, "approved")}
+                    className="flex-1 bg-emerald-600 hover:bg-emerald-700 text-white font-semibold py-2.5 px-4 rounded-xl transition shadow-sm flex items-center justify-center gap-2"
+                  >
+                    <CheckCircle2 className="w-4 h-4" /> Approve & Assign
+                  </button>
+                  <button
+                    onClick={() => handleReview(issue.id, "rejected")}
+                    className="flex-1 bg-white border border-red-200 text-red-600 hover:bg-red-50 font-semibold py-2.5 px-4 rounded-xl transition flex items-center justify-center gap-2"
+                  >
+                    <XCircle className="w-4 h-4" /> Reject
+                  </button>
+                </div>
               </div>
             </div>
           ))}

Frontend/app/admin/workers/page.tsx

@@ -40,10 +40,22 @@ interface WorkerPerformance {
 }
 
 export default function WorkersPage() {
-  const { data: departmentsData, loading: deptLoading, revalidate: revalidateDept } = useCachedFetch<Department[]>("/admin/departments");
-  const { data: workersData, loading: workersLoading, revalidate: revalidateWorkers } = useCachedFetch<Worker[]>("/admin/members");
-  const { data: perfData, loading: perfLoading, revalidate: revalidatePerf } = useCachedFetch<WorkerPerformance[]>("/admin/workers/performance");
-  
+  const {
+    data: departmentsData,
+    loading: deptLoading,
+    revalidate: revalidateDept,
+  } = useCachedFetch<Department[]>("/admin/departments");
+  const {
+    data: workersData,
+    loading: workersLoading,
+    revalidate: revalidateWorkers,
+  } = useCachedFetch<Worker[]>("/admin/members");
+  const {
+    data: perfData,
+    loading: perfLoading,
+    revalidate: revalidatePerf,
+  } = useCachedFetch<WorkerPerformance[]>("/admin/workers/performance");
+
   const [showForm, setShowForm] = useState(false);
   const [formData, setFormData] = useState({
     name: "",
@@ -56,11 +68,11 @@ export default function WorkersPage() {
   const [search, setSearch] = useState("");
 
   const departments = departmentsData || [];
-  
+
   const workers = useMemo(() => {
     if (!workersData) return [];
-    const perfMap = new Map((perfData || []).map(p => [p.id, p]));
-    
+    const perfMap = new Map((perfData || []).map((p) => [p.id, p]));
+
     return workersData.map((w) => {
       const perf = perfMap.get(w.id);
       return {
@@ -106,14 +118,14 @@ export default function WorkersPage() {
 
   if (loading) {
     return (
-      <div className="space-y-6">
+      <div className="space-y-6 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
         <div className="flex justify-between items-center mb-6">
           <Skeleton className="h-10 w-64" />
           <Skeleton className="h-10 w-32" />
         </div>
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
           {Array.from({ length: 6 }).map((_, i) => (
-            <Skeleton key={i} className="h-48 rounded-xl" />
+            <Skeleton key={i} className="h-48 rounded-2xl" />
           ))}
         </div>
       </div>
@@ -130,28 +142,28 @@ export default function WorkersPage() {
     );
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-8 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
       <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
         <div>
-          <h2 className="text-2xl font-bold text-slate-900">
+          <h2 className="text-2xl font-black text-slate-900">
             Workforce Management
           </h2>
-          <p className="text-sm text-slate-500">
+          <p className="text-sm text-slate-500 font-medium">
             Manage field workers, assign tasks, and monitor performance.
           </p>
         </div>
         <button
           onClick={() => setShowForm(true)}
-          className="px-4 py-2 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition shadow-sm flex items-center gap-2"
+          className="px-4 py-2 bg-urban-primary text-white font-semibold rounded-xl hover:bg-emerald-600 transition shadow-sm flex items-center gap-2"
         >
           <Plus className="w-4 h-4" /> Enroll Worker
         </button>
       </div>
 
       {showForm && (
-        <div className="bg-white rounded-xl shadow-lg border border-slate-200 overflow-hidden animate-in fade-in slide-in-from-top-4">
-          <div className="bg-slate-50 px-6 py-4 border-b border-slate-200">
-            <h2 className="text-lg font-bold text-slate-800">
+        <div className="bg-white/80 backdrop-blur-md rounded-2xl shadow-urban-md border border-slate-200/70 overflow-hidden">
+          <div className="bg-slate-50/80 px-6 py-4 border-b border-slate-200/70">
+            <h2 className="text-lg font-black text-slate-800">
               New Worker Enrollment
             </h2>
           </div>
@@ -167,7 +179,7 @@ export default function WorkersPage() {
                   onChange={(e) =>
                     setFormData({ ...formData, name: e.target.value })
                   }
-                  className="w-full px-4 py-2 bg-white border border-slate-300 rounded-lg text-slate-900 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none"
+                  className="w-full px-4 py-2.5 bg-white/70 border border-slate-300 rounded-xl text-slate-900 focus:ring-4 focus:ring-urban-primary/10 focus:border-urban-primary/40 outline-none"
                   placeholder="e.g. John Doe"
                   required
                 />
@@ -182,7 +194,7 @@ export default function WorkersPage() {
                   onChange={(e) =>
                     setFormData({ ...formData, email: e.target.value })
                   }
-                  className="w-full px-4 py-2 bg-white border border-slate-300 rounded-lg text-slate-900 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none"
+                  className="w-full px-4 py-2.5 bg-white/70 border border-slate-300 rounded-xl text-slate-900 focus:ring-4 focus:ring-urban-primary/10 focus:border-urban-primary/40 outline-none"
                   placeholder="worker@city.gov"
                   required
                 />
@@ -199,7 +211,7 @@ export default function WorkersPage() {
                   onChange={(e) =>
                     setFormData({ ...formData, password: e.target.value })
                   }
-                  className="w-full px-4 py-2 bg-white border border-slate-300 rounded-lg text-slate-900 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none"
+                  className="w-full px-4 py-2.5 bg-white/70 border border-slate-300 rounded-xl text-slate-900 focus:ring-4 focus:ring-urban-primary/10 focus:border-urban-primary/40 outline-none"
                   required
                   minLength={8}
                   placeholder="••••••••"
@@ -215,7 +227,7 @@ export default function WorkersPage() {
                   onChange={(e) =>
                     setFormData({ ...formData, department_id: e.target.value })
                   }
-                  className="w-full px-4 py-2 bg-white border border-slate-300 rounded-lg text-slate-900 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none"
+                  className="w-full px-4 py-2.5 bg-white/70 border border-slate-300 rounded-xl text-slate-900 focus:ring-4 focus:ring-urban-primary/10 focus:border-urban-primary/40 outline-none"
                   required
                 >
                   <option value="">Select Department...</option>
@@ -231,14 +243,14 @@ export default function WorkersPage() {
             <div className="flex gap-3 pt-2">
               <button
                 type="submit"
-                className="px-6 py-2 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition shadow-sm"
+                className="px-6 py-2.5 bg-urban-primary text-white font-semibold rounded-xl hover:bg-emerald-600 transition shadow-sm"
               >
                 Enroll Worker
               </button>
               <button
                 type="button"
                 onClick={() => setShowForm(false)}
-                className="px-6 py-2 bg-white text-slate-700 font-medium rounded-lg border border-slate-300 hover:bg-slate-50 transition"
+                className="px-6 py-2.5 bg-white/80 text-slate-700 font-semibold rounded-xl border border-slate-300 hover:bg-slate-50 transition"
               >
                 Cancel
               </button>
@@ -249,16 +261,16 @@ export default function WorkersPage() {
 
       <div className="flex gap-4 mb-4">
         <div className="relative flex-1 max-w-sm">
-          <Search className="absolute left-3 top-2.5 h-4 w-4 text-slate-400" />
+          <Search className="absolute left-3 top-3 h-4 w-4 text-slate-400" />
           <input
             type="text"
             placeholder="Search workers by name or email..."
             value={search}
             onChange={(e) => setSearch(e.target.value)}
-            className="w-full pl-9 pr-4 py-2 bg-white border border-slate-200 rounded-lg text-sm focus:border-blue-500 outline-none"
+            className="w-full pl-9 pr-4 py-2.5 bg-white/70 border border-slate-200 rounded-xl text-sm focus:border-urban-primary/40 focus:ring-4 focus:ring-urban-primary/10 outline-none"
           />
         </div>
-        <button className="px-3 py-2 bg-white border border-slate-200 rounded-lg text-slate-600 flex items-center gap-2 hover:bg-slate-50">
+        <button className="px-3 py-2.5 bg-white/70 border border-slate-200 rounded-xl text-slate-600 flex items-center gap-2 hover:bg-slate-50">
           <Filter className="w-4 h-4" /> Filter
         </button>
       </div>
@@ -271,7 +283,7 @@ export default function WorkersPage() {
         </div>
 
         {filteredWorkers.length === 0 ? (
-          <div className="text-center py-16 bg-white rounded-xl border border-slate-200">
+          <div className="text-center py-16 bg-white/70 backdrop-blur-md rounded-2xl border border-slate-200/70">
             <HardHat className="w-12 h-12 mx-auto text-slate-300" />
             <p className="text-slate-500 mt-2">No field workers found.</p>
           </div>
@@ -280,11 +292,11 @@ export default function WorkersPage() {
             {filteredWorkers.map((worker) => (
               <div
                 key={worker.id}
-                className="bg-white p-5 rounded-xl border border-slate-200 shadow-sm hover:shadow-md transition-all"
+                className="bg-white/80 backdrop-blur-md p-5 rounded-2xl border border-slate-200/70 shadow-urban-sm hover:shadow-urban-md transition-all"
               >
                 <div className="flex justify-between items-start mb-4">
                   <div className="flex items-center gap-3">
-                    <div className="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center text-lg font-bold text-slate-700 border border-slate-200">
+                    <div className="w-10 h-10 rounded-full bg-urban-primary/10 flex items-center justify-center text-lg font-bold text-urban-primary border border-urban-primary/20">
                       {worker.name.charAt(0)}
                     </div>
                     <div>
@@ -301,7 +313,7 @@ export default function WorkersPage() {
                   )}
                 </div>
 
-                <div className="py-3 border-t border-slate-100 mb-3 space-y-2">
+                <div className="py-3 border-t border-slate-100/70 mb-3 space-y-2">
                   <div className="flex justify-between text-sm">
                     <span className="text-slate-500">Department</span>
                     <span className="font-medium text-slate-900">
@@ -343,7 +355,7 @@ export default function WorkersPage() {
                           ? "bg-red-500"
                           : worker.current_workload > worker.max_workload * 0.7
                             ? "bg-amber-500"
-                            : "bg-blue-600"
+                            : "bg-urban-primary"
                       }`}
                       style={{
                         width: `${Math.min(

Frontend/app/globals.css

@@ -1,11 +1,11 @@
 @import "tailwindcss";
 
 @theme {
-  --color-urban-primary: #3B82F6;
-  --color-urban-secondary: #60A5FA;
-  --color-urban-cta: #F97316;
-  --color-urban-bg: #F8FAFC;
-  --color-urban-text: #1E293B;
+  --color-urban-primary: #0ea5a4;
+  --color-urban-secondary: #f59e0b;
+  --color-urban-cta: #0f172a;
+  --color-urban-bg: #f6f7fb;
+  --color-urban-text: #0f172a;
 
   --color-slate-50: #f8fafc;
   --color-slate-100: #f1f5f9;
@@ -18,14 +18,14 @@
   --color-slate-800: #1e293b;
   --color-slate-900: #0f172a;
   --color-slate-950: #020617;
-  
-  --font-fira-code: 'Fira Code', monospace;
-  --font-fira-sans: 'Fira Sans', sans-serif;
-  
-  --shadow-urban-sm: 0 1px 2px rgba(0,0,0,0.05);
-  --shadow-urban-md: 0 4px 6px rgba(0,0,0,0.1);
-  --shadow-urban-lg: 0 10px 15px rgba(0,0,0,0.1);
-  --shadow-urban-xl: 0 20px 25px rgba(0,0,0,0.15);
+
+  --font-fira-code: "Fira Code", monospace;
+  --font-fira-sans: "Fira Sans", sans-serif;
+
+  --shadow-urban-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-urban-md: 0 4px 6px rgba(0, 0, 0, 0.1);
+  --shadow-urban-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
+  --shadow-urban-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
 }
 
 :root {
@@ -37,12 +37,33 @@
 }
 
 body {
-  background: var(--background);
+  background:
+    radial-gradient(
+      1200px 600px at 10% -10%,
+      rgba(14, 165, 164, 0.18),
+      transparent 60%
+    ),
+    radial-gradient(
+      1000px 500px at 90% -20%,
+      rgba(245, 158, 11, 0.18),
+      transparent 55%
+    ),
+    radial-gradient(
+      800px 400px at 50% 100%,
+      rgba(59, 130, 246, 0.12),
+      transparent 55%
+    ),
+    var(--background);
   color: var(--foreground);
   font-family: var(--font-fira-sans);
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   font-family: var(--font-fira-code);
 }
 
@@ -62,5 +83,71 @@ input:focus,
 select:focus,
 textarea:focus {
   border-color: var(--primary);
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); /* urban-primary 10% */
+  box-shadow: 0 0 0 3px rgba(14, 165, 164, 0.12);
+}
+
+::selection {
+  background: rgba(14, 165, 164, 0.2);
+  color: #0f172a;
+}
+
+.bg-mesh {
+  background-image:
+    radial-gradient(
+      circle at 20% 20%,
+      rgba(14, 165, 164, 0.2),
+      transparent 45%
+    ),
+    radial-gradient(
+      circle at 80% 10%,
+      rgba(245, 158, 11, 0.18),
+      transparent 45%
+    ),
+    radial-gradient(
+      circle at 30% 80%,
+      rgba(59, 130, 246, 0.15),
+      transparent 45%
+    );
+}
+
+.bg-grid {
+  background-image:
+    linear-gradient(rgba(15, 23, 42, 0.04) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(15, 23, 42, 0.04) 1px, transparent 1px);
+  background-size: 32px 32px;
+}
+
+.glass-panel {
+  background: rgba(255, 255, 255, 0.75);
+  backdrop-filter: blur(18px);
+  border: 1px solid rgba(148, 163, 184, 0.25);
+}
+
+.fade-up {
+  animation: fadeUp 0.7s ease-out both;
+}
+
+.float-slow {
+  animation: floatSlow 6s ease-in-out infinite;
+}
+
+@keyframes fadeUp {
+  from {
+    opacity: 0;
+    transform: translateY(18px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes floatSlow {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
 }

Frontend/app/page.tsx

@@ -1,18 +1,18 @@
 "use client";
 import Link from "next/link";
-import { 
-  Smartphone, 
-  Zap, 
-  Shield, 
-  ChevronRight, 
-  Radio, 
-  Activity, 
-  MapPin, 
+import {
+  Smartphone,
+  Zap,
+  Shield,
+  ChevronRight,
+  Radio,
+  Activity,
+  MapPin,
   CheckCircle2,
   Building2,
   Users,
   LayoutDashboard,
-  LogOut
+  LogOut,
 } from "lucide-react";
 import { useAuth } from "@/components/AuthProvider";
 
@@ -20,50 +20,45 @@ export default function LandingPage() {
   const { user, role, signOut } = useAuth();
 
   const getDashboardLink = () => {
-    if (role === 'admin') return '/admin';
-    if (role === 'worker') return '/worker';
-    return '/user';
+    if (role === "admin") return "/admin";
+    if (role === "worker") return "/worker";
+    return "/user";
   };
 
   return (
-    <div className="min-h-screen bg-slate-50 text-slate-900 font-sans selection:bg-blue-100 selection:text-blue-900 overflow-x-hidden">
-      {/* Background Mesh Gradients */}
-      <div className="fixed inset-0 z-0 opacity-60 pointer-events-none">
-        <div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-blue-200/50 rounded-full blur-[100px]" />
-        <div className="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-indigo-200/50 rounded-full blur-[100px]" />
-        <div className="absolute top-[20%] right-[10%] w-[30%] h-[30%] bg-cyan-200/40 rounded-full blur-[80px]" />
-      </div>
+    <div className="min-h-screen text-slate-900 font-sans selection:bg-emerald-100 selection:text-slate-900 overflow-x-hidden">
+      <div className="fixed inset-0 z-0 opacity-70 pointer-events-none bg-mesh" />
+      <div className="fixed inset-0 z-0 opacity-50 pointer-events-none bg-grid" />
 
-      {/* Navigation */}
-      <nav className="fixed top-0 w-full z-50 border-b border-slate-200 bg-white/80 backdrop-blur-xl transition-all">
+      <nav className="fixed top-0 w-full z-50 border-b border-slate-200/70 bg-white/70 backdrop-blur-xl transition-all">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="flex justify-between h-20 items-center">
             <div className="flex items-center gap-3 group cursor-default">
               <div className="relative">
                 <div className="absolute inset-0 bg-blue-500/20 blur-md opacity-0 group-hover:opacity-100 transition-opacity" />
-                <div className="relative w-10 h-10 bg-gradient-to-br from-blue-600 to-indigo-600 rounded-xl flex items-center justify-center text-white font-bold text-xl shadow-lg shadow-blue-500/30">
-                  <span className="text-white">U</span>
+                <div className="relative w-10 h-10 bg-gradient-to-br from-emerald-500 to-cyan-600 rounded-xl flex items-center justify-center text-white shadow-lg shadow-emerald-500/30">
+                  <MapPin className="w-5 h-5 text-white" />
                 </div>
               </div>
               <span className="text-xl font-bold tracking-tight text-slate-900">
-                Urban<span className="text-blue-600">Lens</span>
+                City<span className="text-emerald-600">Track</span>
               </span>
             </div>
-            
+
             <div className="hidden md:flex items-center gap-8">
-               <NavLink href="#features">Features</NavLink>
-               <NavLink href="#stats">Live Data</NavLink>
-               <NavLink href="#roadmap">Roadmap</NavLink>
+              <NavLink href="#features">Features</NavLink>
+              <NavLink href="#stats">Live Data</NavLink>
+              <NavLink href="#roadmap">Roadmap</NavLink>
             </div>
 
             <div className="flex gap-4 items-center">
               {user ? (
                 <>
-                  <button 
+                  <button
                     onClick={() => signOut()}
                     className="hidden sm:flex px-4 py-2 text-slate-500 hover:text-red-600 transition-colors"
                   >
-                   <LogOut className="w-5 h-5" />
+                    <LogOut className="w-5 h-5" />
                   </button>
                   <Link
                     href={getDashboardLink()}
@@ -79,11 +74,11 @@ export default function LandingPage() {
                     href="/signin"
                     className="px-5 py-2 text-slate-600 hover:text-slate-900 font-medium transition-colors hover:bg-slate-100 rounded-lg"
                   >
-                    Agent Login
+                    Login
                   </Link>
                   <Link
                     href="/signup"
-                    className="group relative px-6 py-2.5 bg-blue-600 hover:bg-blue-500 text-white font-semibold rounded-lg transition-all shadow-lg shadow-blue-500/30 overflow-hidden hover:-translate-y-0.5"
+                    className="group relative px-6 py-2.5 bg-emerald-600 hover:bg-emerald-500 text-white font-semibold rounded-lg transition-all shadow-lg shadow-emerald-500/30 overflow-hidden hover:-translate-y-0.5"
                   >
                     <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-700" />
                     <span className="relative flex items-center gap-2">
@@ -97,70 +92,123 @@ export default function LandingPage() {
         </div>
       </nav>
 
-      <main className="relative z-10 pt-20">
-        {/* Hero Section */}
-        <div className="relative border-b border-slate-200 bg-gradient-to-b from-transparent to-white/50">
-          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-32 text-center">
-            
-            <div className="inline-flex items-center gap-3 px-4 py-1.5 rounded-full bg-white border border-slate-200 shadow-sm mb-8 animate-fade-in-up">
-              <span className="relative flex h-2 w-2">
-                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
-                <span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
-              </span>
-              <span className="text-sm font-bold text-slate-600 font-mono tracking-wide">
-                SYSTEM ONLINE
-              </span>
-            </div>
+      <main className="relative z-10 pt-24">
+        <div className="relative border-b border-slate-200/70">
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 lg:py-32">
+            <div className="grid gap-12 lg:grid-cols-[1.1fr_0.9fr] items-center">
+              <div className="text-center lg:text-left">
+                <div className="inline-flex items-center gap-3 px-4 py-1.5 rounded-full bg-white border border-slate-200 shadow-sm mb-8 fade-up">
+                  <span className="relative flex h-2 w-2">
+                    <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
+                    <span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
+                  </span>
+                  <span className="text-sm font-bold text-slate-600 font-mono tracking-wide">
+                    SYSTEM ONLINE
+                  </span>
+                </div>
 
-            <h1 className="text-5xl md:text-7xl font-extrabold text-slate-900 tracking-tight mb-8 leading-tight">
-              City Infrastructure, <br />
-              <span className="bg-gradient-to-r from-blue-600 via-indigo-600 to-cyan-600 bg-clip-text text-transparent">
-                Reimagined by Intelligence.
-              </span>
-            </h1>
+                <h1 className="text-5xl md:text-6xl lg:text-7xl font-extrabold text-slate-900 tracking-tight mb-6 leading-[1.05]">
+                  City infrastructure,
+                  <span className="block bg-gradient-to-r from-emerald-600 via-cyan-600 to-blue-600 bg-clip-text text-transparent">
+                    remapped by intelligence.
+                  </span>
+                </h1>
 
-            <p className="text-xl text-slate-600 mb-12 max-w-2xl mx-auto leading-relaxed">
-              The advanced civic reporting platform powered by AI vision analysis, 
-              geo-spatial deduplication, and automated workforce routing.
-            </p>
+                <p className="text-lg md:text-xl text-slate-600 mb-10 max-w-2xl lg:max-w-none leading-relaxed">
+                  A civic response system that blends vision AI,
+                  geo-deduplication, and automated routing to turn every report
+                  into a verified, trackable action.
+                </p>
 
-            <div className="flex flex-col sm:flex-row gap-6 justify-center items-center mb-20">
-              <Link
-                href="/signup"
-                className="px-8 py-4 bg-slate-900 text-white font-bold rounded-xl shadow-xl shadow-slate-900/20 hover:shadow-slate-900/30 transition-all hover:-translate-y-1 flex items-center gap-2"
-              >
-                Report an Issue
-                <Smartphone className="w-5 h-5" />
-              </Link>
-              <Link
-                href="/signin"
-                className="px-8 py-4 bg-white text-slate-700 font-semibold rounded-xl border border-slate-200 hover:bg-slate-50 transition-all shadow-lg shadow-slate-200/50 hover:border-slate-300 flex items-center gap-2"
-              >
-                Track Status
-                <Activity className="w-5 h-5 text-blue-600" />
-              </Link>
-            </div>
+                <div className="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start items-center">
+                  <Link
+                    href="/signup"
+                    className="px-7 py-3.5 bg-slate-900 text-white font-bold rounded-xl shadow-xl shadow-slate-900/20 hover:shadow-slate-900/30 transition-all hover:-translate-y-1 flex items-center gap-2"
+                  >
+                    Report an Issue
+                    <Smartphone className="w-5 h-5" />
+                  </Link>
+                  <Link
+                    href="/signin"
+                    className="px-7 py-3.5 bg-white text-slate-700 font-semibold rounded-xl border border-slate-200 hover:bg-slate-50 transition-all shadow-lg shadow-slate-200/50 hover:border-slate-300 flex items-center gap-2"
+                  >
+                    Track Status
+                    <Activity className="w-5 h-5 text-emerald-600" />
+                  </Link>
+                </div>
+              </div>
+
+              <div className="glass-panel rounded-3xl p-6 md:p-8 shadow-urban-xl float-slow">
+                <div className="flex items-center justify-between mb-6">
+                  <div>
+                    <p className="text-xs uppercase tracking-[0.2em] text-slate-500 font-semibold">
+                      Ops Pulse
+                    </p>
+                    <p className="text-2xl font-bold text-slate-900">
+                      Live Command Board
+                    </p>
+                  </div>
+                  <div className="h-10 w-10 rounded-2xl bg-emerald-100 text-emerald-700 flex items-center justify-center">
+                    <Activity className="w-5 h-5" />
+                  </div>
+                </div>
 
-            {/* Live Stats Ticker */}
-            <div className="grid grid-cols-2 md:grid-cols-4 gap-4 max-w-5xl mx-auto">
-              <StatCard label="ISSUES RESOLVED" value="12,405" icon={CheckCircle2} color="text-emerald-500 bg-emerald-50" />
-              <StatCard label="ACTIVE AGENTS" value="84" icon={Users} color="text-blue-500 bg-blue-50" />
-              <StatCard label="AVG. REACTION" value="1.2hrs" icon={Zap} color="text-amber-500 bg-amber-50" />
-              <StatCard label="CITIES LIVE" value="3" icon={Building2} color="text-purple-500 bg-purple-50" />
+                <div id="stats" className="grid grid-cols-2 gap-4">
+                  <StatCard
+                    label="ISSUES RESOLVED"
+                    value="12,405"
+                    icon={CheckCircle2}
+                    color="text-emerald-600 bg-emerald-50"
+                  />
+                  <StatCard
+                    label="ACTIVE AGENTS"
+                    value="84"
+                    icon={Users}
+                    color="text-cyan-600 bg-cyan-50"
+                  />
+                  <StatCard
+                    label="AVG. REACTION"
+                    value="1.2hrs"
+                    icon={Zap}
+                    color="text-amber-600 bg-amber-50"
+                  />
+                  <StatCard
+                    label="CITIES LIVE"
+                    value="3"
+                    icon={Building2}
+                    color="text-slate-700 bg-slate-100"
+                  />
+                </div>
+
+                <div className="mt-6 rounded-2xl bg-slate-900 text-white p-4">
+                  <div className="flex items-center justify-between text-xs uppercase tracking-[0.2em] text-slate-300">
+                    <span>Routing</span>
+                    <span className="text-emerald-400">Auto-assign</span>
+                  </div>
+                  <p className="mt-3 text-sm text-slate-200">
+                    18 active tasks prioritized and dispatched to nearest teams.
+                  </p>
+                </div>
+              </div>
             </div>
           </div>
         </div>
 
-        {/* Features Grid */}
-        <div id="features" className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-32">
+        <div
+          id="features"
+          className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-28"
+        >
           <div className="text-center mb-16">
-            <h2 className="text-3xl font-bold text-slate-900 mb-4">Core Capabilities</h2>
+            <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">
+              Core Capabilities
+            </h2>
             <p className="text-slate-500 max-w-2xl mx-auto text-lg">
-              Built on a microservices architecture designed for scale, security, and speed.
+              Built on a microservices architecture designed for scale,
+              security, and speed.
             </p>
           </div>
-          
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
             <FeatureCard
               icon={<Radio className="w-8 h-8 text-blue-600" />}
               title="Geo-Spatial AI"
@@ -181,13 +229,68 @@ export default function LandingPage() {
             />
           </div>
         </div>
+
+        <div
+          id="roadmap"
+          className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-28"
+        >
+          <div className="glass-panel rounded-3xl p-8 md:p-12">
+            <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
+              <div>
+                <p className="text-xs uppercase tracking-[0.2em] text-slate-500 font-semibold">
+                  Roadmap
+                </p>
+                <h3 className="text-3xl font-bold text-slate-900 mt-2">
+                  Next deployments
+                </h3>
+                <p className="text-slate-500 mt-3 max-w-xl">
+                  Expanding to new municipal zones with predictive maintenance,
+                  citizen feedback loops, and real-time response SLAs.
+                </p>
+              </div>
+              <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 w-full md:w-auto">
+                <div className="rounded-2xl bg-white border border-slate-200 p-4">
+                  <p className="text-xs uppercase tracking-wide text-slate-400 font-semibold">
+                    Phase 1
+                  </p>
+                  <p className="text-lg font-bold text-slate-900 mt-2">
+                    North Zone
+                  </p>
+                  <p className="text-sm text-slate-500 mt-1">Q2 rollout</p>
+                </div>
+                <div className="rounded-2xl bg-white border border-slate-200 p-4">
+                  <p className="text-xs uppercase tracking-wide text-slate-400 font-semibold">
+                    Phase 2
+                  </p>
+                  <p className="text-lg font-bold text-slate-900 mt-2">
+                    Predictive SLA
+                  </p>
+                  <p className="text-sm text-slate-500 mt-1">Q3 launch</p>
+                </div>
+                <div className="rounded-2xl bg-white border border-slate-200 p-4">
+                  <p className="text-xs uppercase tracking-wide text-slate-400 font-semibold">
+                    Phase 3
+                  </p>
+                  <p className="text-lg font-bold text-slate-900 mt-2">
+                    Citizen Portal
+                  </p>
+                  <p className="text-sm text-slate-500 mt-1">Q4 release</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
       </main>
 
-      <footer className="border-t border-slate-200 bg-white py-12 relative z-10">
+      <footer className="border-t border-slate-200 bg-white/80 py-12 relative z-10">
         <div className="max-w-7xl mx-auto px-4 text-center">
           <div className="flex justify-center items-center gap-2 mb-8 opacity-75 hover:opacity-100 transition-opacity">
-            <div className="w-6 h-6 bg-slate-900 rounded-md flex items-center justify-center text-xs font-bold font-mono text-white">U</div>
-            <span className="text-sm font-bold tracking-wide text-slate-900">CityTracker SYSTEMS</span>
+            <div className="w-6 h-6 bg-slate-900 rounded-md flex items-center justify-center text-white">
+              <MapPin className="w-3.5 h-3.5" />
+            </div>
+            <span className="text-sm font-bold tracking-wide text-slate-900">
+              CityTracker SYSTEMS
+            </span>
           </div>
           <p className="text-slate-500 text-sm">
             © 2026 Dept. of Public Works. Secure. Efficient. Transparent.
@@ -198,35 +301,56 @@ export default function LandingPage() {
   );
 }
 
-function NavLink({ href, children }: { href: string; children: React.ReactNode }) {
+function NavLink({
+  href,
+  children,
+}: {
+  href: string;
+  children: React.ReactNode;
+}) {
   return (
-    <Link href={href} className="text-sm font-medium text-slate-500 hover:text-blue-600 transition-colors">
+    <Link
+      href={href}
+      className="text-sm font-medium text-slate-500 hover:text-emerald-600 transition-colors"
+    >
       {children}
     </Link>
-  )
+  );
 }
 
-function StatCard({ label, value, icon: Icon, color }: { label: string, value: string, icon: any, color: string }) {
+function StatCard({
+  label,
+  value,
+  icon: Icon,
+  color,
+}: {
+  label: string;
+  value: string;
+  icon: any;
+  color: string;
+}) {
   return (
     <div className="p-4 rounded-2xl bg-white border border-slate-200 shadow-sm hover:shadow-md hover:border-slate-300 transition-all group">
       <div className="flex items-center gap-3 mb-2">
         <div className={`p-1.5 rounded-lg ${color}`}>
           <Icon className="w-4 h-4" />
         </div>
-        <span className="text-xs font-mono text-slate-500 font-bold tracking-wider">{label}</span>
+        <span className="text-xs font-mono text-slate-500 font-bold tracking-wider">
+          {label}
+        </span>
       </div>
       <div className="text-2xl font-bold text-slate-900 group-hover:scale-105 transition-transform origin-left font-mono">
         {value}
       </div>
     </div>
-  )
+  );
 }
 
 function FeatureCard({
   icon,
   title,
   desc,
-  colorClass
+  colorClass,
 }: {
   icon: React.ReactNode;
   title: string;
@@ -235,11 +359,17 @@ function FeatureCard({
 }) {
   return (
     <div className="p-8 bg-white rounded-3xl border border-slate-200 shadow-xl shadow-slate-200/50 hover:shadow-2xl hover:shadow-slate-200/80 hover:-translate-y-1 transition-all group">
-      <div className={`w-16 h-16 ${colorClass} rounded-2xl flex items-center justify-center mb-6 border border-slate-100 group-hover:scale-110 transition-transform duration-300`}>
+      <div
+        className={`w-16 h-16 ${colorClass} rounded-2xl flex items-center justify-center mb-6 border border-slate-100 group-hover:scale-110 transition-transform duration-300`}
+      >
         {icon}
       </div>
-      <h3 className="text-xl font-bold text-slate-900 mb-3 tracking-tight">{title}</h3>
-      <p className="text-slate-500 leading-relaxed text-sm font-medium">{desc}</p>
+      <h3 className="text-xl font-bold text-slate-900 mb-3 tracking-tight">
+        {title}
+      </h3>
+      <p className="text-slate-500 leading-relaxed text-sm font-medium">
+        {desc}
+      </p>
     </div>
   );
 }

Frontend/app/user/issues/[id]/page.tsx

@@ -1,16 +1,13 @@
 "use client";
-import { useEffect, useState } from "react";
-import { useParams, useRouter } from "next/navigation";
+import { useParams } from "next/navigation";
 
 export const runtime = "edge";
-import { apiGet } from "@/lib/api";
+import { useCachedFetch } from "@/hooks/useCachedFetch";
+import { Skeleton } from "@/components/ui/Skeleton";
 import {
   ArrowLeft,
   MapPin,
-  Calendar,
-  CheckCircle2,
   Clock,
-  AlertTriangle,
   ImageIcon,
   Activity,
   Maximize2,
@@ -28,45 +25,40 @@ interface Issue {
   id: string;
   description: string;
   state: string;
-  city: string;
-  locality: string;
+  city: string | null;
+  locality: string | null;
   created_at: string;
-  full_address: string;
-  priority: number;
-  category: string;
-  confidence: number;
-  image_urls: string[];
-  annotated_urls: string[];
-  validation_source: string;
-  sla_deadline?: string;
-  is_duplicate: boolean;
-  history?: IssueEvent[];
+  updated_at: string;
+  full_address: string | null;
+  priority: number | null;
+  priority_reason: string | null;
+  category: string | null;
+  confidence: number | null;
+  detections_count: number | null;
+  validation_source: string | null;
+  geo_status: string | null;
+  is_duplicate: boolean | null;
+  parent_issue_id: string | null;
+  nearby_count: number | null;
+  department: string | null;
+  assigned_member: string | null;
+  image_urls: string[] | null;
+  annotated_urls: string[] | null;
+  proof_image_url: string | null;
+  sla_hours: number | null;
+  sla_deadline: string | null;
+  agent_flow: IssueEvent[] | null;
+  latitude: number | null;
+  longitude: number | null;
 }
 
 export default function UserIssueDetailPage() {
   const params = useParams();
-  const router = useRouter();
-  const [issue, setIssue] = useState<Issue | null>(null);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    if (params.id) {
-      fetchIssueDetails(params.id as string);
-    }
-  }, [params.id]);
-
-  const fetchIssueDetails = async (id: string) => {
-    try {
-      // Using generic endpoint - typically users can access their own issues
-      const data = await apiGet<Issue>(`/issues/${id}`);
-      setIssue(data);
-    } catch (error) {
-      console.error("Failed to fetch issue details:", error);
-      // alert("Failed to load issue details.");
-    } finally {
-      setLoading(false);
-    }
-  };
+  const issueId = typeof params.id === "string" ? params.id : params.id?.[0];
+  const { data: issue, loading } = useCachedFetch<Issue>(
+    issueId ? `/issues/${issueId}` : "",
+  );
+  const contentLoading = loading && !issue;
 
   const getStateBadge = (state: string) => {
     const styles: Record<string, string> = {
@@ -76,6 +68,10 @@ export default function UserIssueDetailPage() {
       resolved: "bg-emerald-100 text-emerald-800 border-emerald-200",
       closed: "bg-slate-100 text-slate-600 border-slate-200",
       rejected: "bg-red-100 text-red-800 border-red-200",
+      escalated: "bg-red-100 text-red-800 border-red-200",
+      validated: "bg-emerald-100 text-emerald-800 border-emerald-200",
+      pending_confirmation: "bg-slate-200 text-slate-700 border-slate-300",
+      pending_verification: "bg-indigo-100 text-indigo-800 border-indigo-200",
     };
     return (
       <span
@@ -86,287 +82,303 @@ export default function UserIssueDetailPage() {
     );
   };
 
-  if (loading) {
+  const formatText = (value: string | null | undefined) =>
+    value && value.trim() ? value : "—";
+
+  const formatDate = (value: string | null | undefined) =>
+    value ? new Date(value).toLocaleString() : "—";
+
+  const formatBool = (value: boolean | null | undefined) =>
+    value === null || value === undefined ? "—" : value ? "Yes" : "No";
+
+  const formatNumber = (value: number | null | undefined) =>
+    value === null || value === undefined ? "—" : value.toString();
+
+  const formatConfidence = (value: number | null | undefined) =>
+    value === null || value === undefined
+      ? "—"
+      : `${(value * 100).toFixed(1)}%`;
+
+  const formatCoords = (value: number | null | undefined) =>
+    value === null || value === undefined ? "—" : value.toFixed(6);
+
+  if (contentLoading) {
     return (
-      <div className="min-h-screen bg-urban-bg flex items-center justify-center">
-        <div className="animate-spin rounded-full h-10 w-10 border-t-2 border-b-2 border-urban-primary"></div>
+      <div className="min-h-screen bg-slate-50 flex items-center justify-center">
+        <div className="w-full max-w-7xl px-4 sm:px-6 lg:px-8">
+          <Skeleton className="h-20 w-full mb-8 rounded-3xl" />
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-10">
+            <div className="lg:col-span-2 space-y-8">
+              <Skeleton className="h-100 w-full rounded-3xl" />
+              <Skeleton className="h-50 w-full rounded-3xl" />
+            </div>
+            <Skeleton className="h-150 w-full rounded-3xl" />
+          </div>
+        </div>
       </div>
     );
   }
 
   if (!issue) {
     return (
-      <div className="min-h-screen bg-urban-bg p-8 flex flex-col items-center justify-center">
+      <div className="min-h-screen bg-transparent p-8 flex flex-col items-center justify-center">
         <h2 className="text-xl font-bold text-slate-700">Issue Not Found</h2>
-        <Link href="/user" className="mt-4 text-urban-primary hover:underline">
+        <Link
+          href="/user"
+          className="mt-4 text-urban-primary hover:underline font-bold"
+        >
           Return to Dashboard
         </Link>
       </div>
     );
   }
 
+  const addressText =
+    issue.full_address ||
+    [issue.locality, issue.city].filter(Boolean).join(", ") ||
+    "—";
+
+  const dataRows = [
+    { label: "Issue ID", value: issue.id },
+    { label: "State", value: formatText(issue.state) },
+    { label: "Category", value: formatText(issue.category) },
+    { label: "Description", value: formatText(issue.description) },
+    { label: "Full Address", value: addressText },
+    { label: "Locality", value: formatText(issue.locality) },
+    { label: "City", value: formatText(issue.city) },
+    { label: "Priority", value: formatNumber(issue.priority) },
+    { label: "Priority Reason", value: formatText(issue.priority_reason) },
+    { label: "Confidence", value: formatConfidence(issue.confidence) },
+    { label: "Detections", value: formatNumber(issue.detections_count) },
+    { label: "Validation Source", value: formatText(issue.validation_source) },
+    { label: "Geo Status", value: formatText(issue.geo_status) },
+    { label: "Duplicate", value: formatBool(issue.is_duplicate) },
+    { label: "Parent Issue", value: formatText(issue.parent_issue_id) },
+    { label: "Nearby Count", value: formatNumber(issue.nearby_count) },
+    { label: "Department", value: formatText(issue.department) },
+    { label: "Assigned Member", value: formatText(issue.assigned_member) },
+    { label: "SLA Hours", value: formatNumber(issue.sla_hours) },
+    { label: "SLA Deadline", value: formatDate(issue.sla_deadline) },
+    { label: "Created", value: formatDate(issue.created_at) },
+    { label: "Updated", value: formatDate(issue.updated_at) },
+    { label: "Latitude", value: formatCoords(issue.latitude) },
+    { label: "Longitude", value: formatCoords(issue.longitude) },
+  ];
+
   return (
-    <div className="min-h-screen bg-urban-bg font-sans pb-12">
-      {/* Ambient Background */}
-      <div className="fixed inset-0 pointer-events-none overflow-hidden z-0">
-        <div className="absolute top-[-10%] right-[-10%] w-[40%] h-[40%] bg-blue-400/10 rounded-full blur-[100px]"></div>
-        <div className="absolute bottom-[-10%] left-[-10%] w-[30%] h-[30%] bg-urban-primary/5 rounded-full blur-[80px]"></div>
-      </div>
+    <div className="min-h-screen bg-transparent font-sans pb-20">
+      <nav className="bg-white/80 backdrop-blur-md border-b border-slate-200 sticky top-0 z-50">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex justify-between h-20 items-center">
+            <Link href="/user" className="flex items-center gap-2 group">
+              <div className="w-10 h-10 bg-slate-100 rounded-xl flex items-center justify-center group-hover:bg-urban-primary transition-colors">
+                <ArrowLeft className="w-5 h-5 text-slate-600 group-hover:text-white" />
+              </div>
+              <div>
+                <h1 className="text-xl font-bold text-slate-900 leading-tight">
+                  Issue Details
+                </h1>
+                <p className="text-[10px] font-bold text-urban-primary uppercase tracking-widest">
+                  Back to Dashboard
+                </p>
+              </div>
+            </Link>
+          </div>
+        </div>
+      </nav>
 
-      <main className="relative z-10 max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      <main className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
         {/* Header */}
-        <div className="mb-8">
-          <Link
-            href="/user"
-            className="inline-flex items-center gap-2 text-slate-500 hover:text-urban-primary mb-4 transition-colors font-medium"
-          >
-            <ArrowLeft className="w-4 h-4" /> Back to Dashboard
-          </Link>
-          <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
-            <div>
-              <div className="flex items-center gap-3 mb-2">
-                <span className="font-mono text-slate-400 bg-white/50 px-2 py-0.5 rounded text-sm border border-slate-200">
-                  #{issue.id.slice(0, 8)}
+        <div className="mb-10 bg-white/50 backdrop-blur-sm p-8 rounded-3xl border border-white shadow-xl shadow-slate-200/50">
+          <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-8">
+            <div className="flex-1">
+              <div className="flex flex-wrap items-center gap-4 mb-4">
+                <span className="font-mono text-xs font-bold text-slate-400 bg-slate-100 px-3 py-1.5 rounded-full border border-slate-200 uppercase tracking-tighter">
+                  ID: {issue.id.slice(0, 12)}...
                 </span>
                 {getStateBadge(issue.state)}
+                <span className="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] px-3 py-1 border-l border-slate-200">
+                  {issue.category || "General"}
+                </span>
               </div>
-              <h1 className="text-3xl font-bold text-slate-900 tracking-tight">
+              <h1 className="text-3xl md:text-4xl font-black text-slate-900 tracking-tight leading-tight uppercase">
                 {issue.category || "Reported Issue"}
               </h1>
+              <p className="text-slate-600 font-medium text-lg mt-3 max-w-3xl">
+                {issue.description || "No description provided."}
+              </p>
+              <div className="flex flex-wrap items-center gap-6 mt-6">
+                <div className="flex items-center gap-2 text-slate-500 font-medium bg-slate-50 px-3 py-1.5 rounded-xl border border-slate-100">
+                  <MapPin className="w-4 h-4 text-urban-primary" />
+                  <span className="text-sm">{addressText}</span>
+                </div>
+                <div className="flex items-center gap-2 text-slate-500 font-medium bg-slate-50 px-3 py-1.5 rounded-xl border border-slate-100">
+                  <Clock className="w-4 h-4 text-amber-500" />
+                  <span className="text-sm">
+                    Reported {new Date(issue.created_at).toLocaleDateString()}
+                  </span>
+                </div>
+              </div>
             </div>
-            {issue.priority && (
-              <div className="text-right">
-                <div className="text-xs text-slate-400 font-bold uppercase tracking-wider mb-1">
-                  Priority Level
+
+            {issue.priority !== null && (
+              <div className="flex flex-col items-center lg:items-end gap-3 p-6 bg-white/70 backdrop-blur-sm rounded-2xl border border-slate-200 shadow-sm min-w-50">
+                <div className="text-[10px] font-black text-slate-400 uppercase tracking-widest">
+                  Priority Rating
                 </div>
                 <div
-                  className={`text-lg font-bold px-4 py-1 rounded-full border border-slate-200 inline-block bg-white shadow-sm ${
+                  className={`text-2xl font-black ${
                     issue.priority === 1
-                      ? "text-red-600 border-red-100 bg-red-50"
+                      ? "text-red-500"
                       : issue.priority === 2
-                        ? "text-orange-600 border-orange-100 bg-orange-50"
-                        : "text-slate-700"
+                        ? "text-orange-500"
+                        : "text-emerald-500"
                   }`}
                 >
                   {issue.priority === 1
                     ? "Critical"
                     : issue.priority === 2
-                      ? "High"
-                      : "Normal"}
+                      ? "High Priority"
+                      : "Standard"}
+                </div>
+                <div className="w-full h-1.5 bg-slate-100 rounded-full mt-2 overflow-hidden">
+                  <div
+                    className={`h-full transition-all duration-1000 ${
+                      issue.priority === 1
+                        ? "bg-red-500 w-full"
+                        : issue.priority === 2
+                          ? "bg-orange-500 w-2/3"
+                          : "bg-emerald-500 w-1/3"
+                    }`}
+                  />
                 </div>
               </div>
             )}
           </div>
         </div>
 
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
-          {/* Left Column: Details & Evidence */}
-          <div className="lg:col-span-2 space-y-8">
-            {/* Analysis & Location */}
-            <div className="card bg-white/80 backdrop-blur-md">
-              <div className="flex items-center gap-3 mb-6 pb-4 border-b border-slate-100">
-                <div className="p-2 bg-blue-50 text-blue-600 rounded-lg">
-                  <Activity className="w-5 h-5" />
-                </div>
-                <h2 className="text-lg font-bold text-slate-800">
-                  Issue Details & Analysis
-                </h2>
-              </div>
-
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
-                <div>
-                  <label className="text-xs font-bold text-slate-400 uppercase tracking-wider block mb-2">
-                    Description
-                  </label>
-                  <p className="text-slate-800 font-medium leading-relaxed bg-slate-50 p-3 rounded-lg border border-slate-100">
-                    {issue.description || "No description provided."}
-                  </p>
-                </div>
-                <div>
-                  <label className="text-xs font-bold text-slate-400 uppercase tracking-wider block mb-2">
-                    AI Confidence
-                  </label>
-                  <div className="flex items-center gap-2">
-                    <div className="h-2 flex-1 bg-slate-100 rounded-full overflow-hidden">
-                      <div
-                        className="h-full bg-urban-primary rounded-full"
-                        style={{ width: `${(issue.confidence || 0) * 100}%` }}
-                      ></div>
-                    </div>
-                    <span className="font-mono text-sm font-bold text-slate-700">
-                      {issue.confidence
-                        ? `${(issue.confidence * 100).toFixed(1)}%`
-                        : "N/A"}
-                    </span>
-                  </div>
-                </div>
+        <div className="max-w-5xl mx-auto space-y-10">
+          {/* Metadata Grid */}
+          <div className="bg-white/70 backdrop-blur-md rounded-3xl border border-slate-200 p-8 shadow-sm">
+            <div className="flex items-center gap-3 mb-8">
+              <div className="w-10 h-10 bg-urban-primary/10 rounded-xl flex items-center justify-center">
+                <Activity className="w-5 h-5 text-urban-primary" />
               </div>
+              <h2 className="text-xl font-black text-slate-900 uppercase tracking-tight">
+                System Analysis
+              </h2>
+            </div>
 
-              <div>
-                <label className="text-xs font-bold text-slate-400 uppercase tracking-wider block mb-2">
-                  Location
-                </label>
-                <div className="flex items-start gap-3 bg-slate-50 p-3 rounded-lg border border-slate-100">
-                  <MapPin className="w-5 h-5 text-urban-primary shrink-0 mt-0.5" />
-                  <div>
-                    <p className="text-slate-900 font-medium">
-                      {issue.full_address || issue.locality}
+            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8">
+              {dataRows
+                .filter(
+                  (row) =>
+                    row.value !== "—" &&
+                    row.value !== "" &&
+                    row.value !== null &&
+                    row.value !== undefined,
+                )
+                .map((row, i) => (
+                  <div key={i} className="group">
+                    <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest block mb-1 group-hover:text-urban-primary transition-colors">
+                      {row.label}
+                    </label>
+                    <p
+                      className="text-sm font-bold text-slate-700 truncate"
+                      title={row.value?.toString()}
+                    >
+                      {row.value}
                     </p>
-                    <p className="text-xs text-slate-500 mt-1">{issue.city}</p>
                   </div>
-                </div>
-              </div>
+                ))}
             </div>
+          </div>
 
-            {/* Evidence Gallery */}
-            <div className="card bg-white/80 backdrop-blur-md">
-              <div className="flex items-center gap-3 mb-6 pb-4 border-b border-slate-100">
-                <div className="p-2 bg-purple-50 text-purple-600 rounded-lg">
-                  <ImageIcon className="w-5 h-5" />
-                </div>
-                <h2 className="text-lg font-bold text-slate-800">
-                  Evidence & AI Vision
-                </h2>
+          <div className="bg-white/70 backdrop-blur-md rounded-3xl border border-slate-200 p-8 shadow-sm">
+            <div className="flex items-center gap-3 mb-8">
+              <div className="w-10 h-10 bg-purple-100 rounded-xl flex items-center justify-center">
+                <ImageIcon className="w-5 h-5 text-purple-600" />
               </div>
+              <h2 className="text-xl font-black text-slate-900 uppercase tracking-tight">
+                Visual Evidence
+              </h2>
+            </div>
 
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                {/* Original Image */}
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+              {issue.image_urls?.[0] ? (
                 <div className="space-y-3">
-                  <div className="flex justify-between items-center">
-                    <h3 className="text-sm font-bold text-slate-700">
-                      Original Photo
-                    </h3>
-                  </div>
-                  <div className="relative aspect-video bg-slate-100 rounded-xl overflow-hidden border border-slate-200 shadow-sm group">
-                    {issue.image_urls?.[0] ? (
-                      <>
-                        <img
-                          src={issue.image_urls[0]}
-                          alt="Original Issue"
-                          className="w-full h-full object-cover"
-                        />
-                        <div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors flex items-center justify-center opacity-0 group-hover:opacity-100">
-                          <a
-                            href={issue.image_urls[0]}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="bg-white/90 backdrop-blur text-slate-900 px-4 py-2 rounded-full text-sm font-bold shadow-lg flex items-center gap-2 transform translate-y-2 group-hover:translate-y-0 transition-all"
-                          >
-                            <Maximize2 className="w-4 h-4" /> View Full Size
-                          </a>
-                        </div>
-                      </>
-                    ) : (
-                      <div className="flex items-center justify-center h-full text-slate-400">
-                        <ImageIcon className="w-8 h-8 opacity-50" />
-                      </div>
-                    )}
+                  <p className="text-xs font-black text-slate-400 uppercase tracking-widest">
+                    Original Capture
+                  </p>
+                  <div className="relative aspect-video rounded-2xl overflow-hidden border border-slate-200 group">
+                    <img
+                      src={issue.image_urls[0]}
+                      alt="Evidence"
+                      className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
+                    />
+                    <div className="absolute inset-0 bg-linear-to-t from-black/40 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
                   </div>
                 </div>
+              ) : (
+                <div className="h-40 bg-slate-50 rounded-2xl border-2 border-dashed border-slate-200 flex flex-col items-center justify-center text-slate-400">
+                  <ImageIcon className="w-8 h-8 mb-2 opacity-20" />
+                  <p className="text-xs font-bold">No evidence attached</p>
+                </div>
+              )}
 
-                {/* AI Annotated Image */}
+              {issue.annotated_urls?.[0] && (
                 <div className="space-y-3">
-                  <div className="flex justify-between items-center">
-                    <h3 className="text-sm font-bold text-urban-primary flex items-center gap-2">
-                      <span className="w-2 h-2 rounded-full bg-urban-primary animate-pulse"></span>
-                      Vision Agent Analysis
-                    </h3>
-                  </div>
-                  <div className="relative aspect-video bg-slate-900 rounded-xl overflow-hidden border-2 border-urban-primary/20 shadow-lg shadow-urban-primary/5 group">
-                    {issue.annotated_urls?.[0] ? (
-                      <>
-                        <img
-                          src={issue.annotated_urls[0]}
-                          alt="AI Analysis"
-                          className="w-full h-full object-cover"
-                        />
-                        <div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors flex items-center justify-center opacity-0 group-hover:opacity-100">
-                          <a
-                            href={issue.annotated_urls[0]}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="bg-urban-primary/90 backdrop-blur text-white px-4 py-2 rounded-full text-sm font-bold shadow-lg flex items-center gap-2 transform translate-y-2 group-hover:translate-y-0 transition-all"
-                          >
-                            <Maximize2 className="w-4 h-4" /> Inspect Analysis
-                          </a>
-                        </div>
-                      </>
-                    ) : (
-                      <div className="flex flex-col items-center justify-center h-full text-slate-500 bg-slate-50/5">
-                        <Activity className="w-8 h-8 opacity-50 mb-2" />
-                        <span className="text-xs">
-                          Processing visualization...
-                        </span>
-                      </div>
-                    )}
-
-                    {/* Badge Overlay */}
-                    <div className="absolute bottom-3 right-3">
-                      <span className="bg-black/60 backdrop-blur-md text-white text-[10px] font-mono px-2 py-1 rounded border border-white/10 flex items-center gap-1.5">
-                        <div className="w-1.5 h-1.5 bg-green-400 rounded-full"></div>
-                        Object Detection v2
-                      </span>
-                    </div>
+                  <p className="text-xs font-black text-urban-primary uppercase tracking-widest">
+                    AI Vision Analysis
+                  </p>
+                  <div className="relative aspect-video rounded-2xl overflow-hidden border border-urban-primary/30 group">
+                    <img
+                      src={issue.annotated_urls[0]}
+                      alt="AI Analysis"
+                      className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
+                    />
+                    <div className="absolute inset-0 bg-linear-to-t from-urban-primary/40 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
                   </div>
                 </div>
-              </div>
-            </div>
-          </div>
-
-          {/* Right Column: Timeline */}
-          <div className="space-y-8">
-            <div className="card bg-white/80 backdrop-blur-md h-full">
-              <div className="flex items-center gap-3 mb-6 pb-4 border-b border-slate-100">
-                <div className="p-2 bg-slate-100 text-slate-600 rounded-lg">
-                  <Clock className="w-5 h-5" />
-                </div>
-                <h2 className="text-lg font-bold text-slate-800">
-                  Status Timeline
-                </h2>
-              </div>
+              )}
 
-              <div className="relative pl-4 border-l-2 border-slate-100 space-y-8 py-2">
-                {issue.state === "reported" && (
-                  <div className="relative">
-                    <span className="absolute -left-[21px] top-1 w-4 h-4 rounded-full border-2 border-blue-500 bg-white ring-4 ring-blue-50"></span>
-                    <h4 className="text-sm font-bold text-slate-900">
-                      Report Submitted
-                    </h4>
-                    <p className="text-xs text-slate-500 mt-1">
-                      Issue has been received and is being processed by our AI
-                      systems.
-                    </p>
-                    <span className="text-[10px] font-mono text-slate-400 mt-2 block">
-                      {new Date(issue.created_at).toLocaleString()}
-                    </span>
+              {issue.proof_image_url ? (
+                <div className="space-y-3">
+                  <p className="text-xs font-black text-slate-400 uppercase tracking-widest">
+                    Resolution Proof
+                  </p>
+                  <div className="relative aspect-video rounded-2xl overflow-hidden border border-emerald-200 group">
+                    <img
+                      src={issue.proof_image_url}
+                      alt="Proof"
+                      className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
+                    />
+                    <div className="absolute inset-0 bg-linear-to-t from-emerald-900/40 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
                   </div>
-                )}
-
-                {issue.state === "resolved" && (
-                  <div className="relative">
-                    <span className="absolute -left-[21px] top-1 w-4 h-4 rounded-full border-2 border-emerald-500 bg-emerald-500 ring-4 ring-emerald-50"></span>
-                    <h4 className="text-sm font-bold text-emerald-700">
-                      Issue Resolved
-                    </h4>
-                    <p className="text-xs text-slate-500 mt-1">
-                      Work has been completed and verified.
-                    </p>
+                </div>
+              ) : (
+                <div className="h-40 bg-slate-50 rounded-2xl border-2 border-dashed border-slate-200 flex flex-col items-center justify-center text-slate-400">
+                  <div className="w-8 h-8 bg-slate-200 rounded-full flex items-center justify-center mb-2 animate-pulse">
+                    <Clock className="w-4 h-4 text-slate-400" />
                   </div>
-                )}
-
-                {/* Default Start */}
-                <div className="relative opacity-60">
-                  <span className="absolute -left-[21px] top-1 w-4 h-4 rounded-full border-2 border-slate-300 bg-white"></span>
-                  <h4 className="text-sm font-bold text-slate-600">
-                    Issue Created
-                  </h4>
-                  <span className="text-[10px] font-mono text-slate-400 mt-1 block">
-                    {new Date(issue.created_at).toLocaleString()}
-                  </span>
+                  <p className="text-xs font-bold">Awaiting resolution proof</p>
                 </div>
-              </div>
+              )}
             </div>
           </div>
+
+          <div className="bg-white rounded-3xl p-8 border border-slate-200 shadow-sm max-w-2xl mx-auto text-center">
+            <h3 className="text-xs font-black text-slate-400 uppercase tracking-widest mb-4">
+              Support
+            </h3>
+            <p className="text-sm text-slate-600 mb-6 font-medium leading-relaxed">
+              If this issue remains unresolved or was flagged incorrectly,
+              please contact your local department office.
+            </p>
+            <button className="w-full md:w-auto px-12 py-4 bg-slate-100 hover:bg-slate-200 text-slate-900 text-xs font-black rounded-2xl uppercase tracking-widest transition-all">
+              Contact Support
+            </button>
+          </div>
         </div>
       </main>
     </div>

Frontend/app/user/page.tsx

@@ -1,28 +1,26 @@
 "use client";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
+import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useAuth } from "@/components/AuthProvider";
-import { apiGet } from "@/lib/api";
 import { useCachedFetch } from "@/hooks/useCachedFetch";
 import { Smartphone, FileText, MapPin } from "lucide-react";
-
-const API_URL = process.env.NEXT_PUBLIC_API_URL;
-if (!API_URL) throw new Error("Missing NEXT_PUBLIC_API_URL");
+import { Skeleton } from "@/components/ui/Skeleton";
 
 interface Issue {
   id: string;
   description: string;
-  priority: number;
+  priority: number | null;
   state: string;
-  city: string;
-  locality: string;
+  city: string | null;
+  locality: string | null;
+  full_address: string | null;
   created_at: string;
-  primary_category: string;
-  classification?: {
-    primary_category: string;
-    confidence: number;
-  };
-  images?: { file_path: string; annotated_path: string }[];
+  category: string | null;
+  confidence: number | null;
+  image_urls: string[];
+  annotated_urls: string[];
+  sla_deadline: string | null;
 }
 
 interface IssuesResponse {
@@ -43,12 +41,11 @@ export default function UserDashboard() {
 
   // Only fetch if user ID is available
   const fetchUrl = user?.id ? `/issues?user_id=${user.id}` : "";
-  const { data: issuesResponse, loading: issuesLoading } = useCachedFetch<IssuesResponse>(fetchUrl);
+  const { data: issuesResponse, loading: issuesLoading } =
+    useCachedFetch<IssuesResponse>(fetchUrl);
 
   const issues = issuesResponse?.items || [];
-  
-  // Create a combined loading state, but prioritize showing dashboard shell if auth is done
-  const contentLoading = authLoading || (issuesLoading && issues.length === 0);
+  const contentLoading = issuesLoading && !issuesResponse;
 
   const getStateBadge = (state: string) => {
     const styles: Record<string, string> = {
@@ -57,6 +54,10 @@ export default function UserDashboard() {
       in_progress: "bg-orange-100 text-orange-800",
       resolved: "bg-green-100 text-green-800",
       closed: "bg-slate-100 text-slate-600",
+      escalated: "bg-red-100 text-red-800",
+      validated: "bg-emerald-100 text-emerald-800",
+      pending_confirmation: "bg-slate-200 text-slate-700",
+      pending_verification: "bg-indigo-100 text-indigo-800",
     };
     return (
       <span
@@ -76,24 +77,38 @@ export default function UserDashboard() {
   }
 
   return (
-    <div className="min-h-screen bg-slate-50 font-sans">
-      <nav className="bg-white border-b border-slate-200 sticky top-0 z-50">
-        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="flex justify-between h-16 items-center">
-            <div>
-              <h1 className="text-xl font-bold text-slate-900">My Reports</h1>
-              <p className="text-xs text-slate-500">Citizen Portal</p>
-            </div>
-            <div className="flex items-center gap-4">
-              <div className="text-right hidden sm:block">
-                <p className="text-sm font-medium text-slate-900">
-                  {user?.user_metadata?.full_name || user?.email || "User"}
+    <div className="min-h-screen bg-transparent font-sans">
+      <nav className="bg-white/80 backdrop-blur-md border-b border-slate-200 sticky top-0 z-50">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex justify-between h-20 items-center">
+            <Link href="/" className="flex items-center gap-2 group">
+              <div className="w-10 h-10 bg-urban-primary rounded-xl flex items-center justify-center shadow-lg shadow-urban-primary/20 group-hover:scale-105 transition-transform">
+                <MapPin className="text-white w-6 h-6" />
+              </div>
+              <div>
+                <h1 className="text-xl font-bold text-slate-900 leading-tight">
+                  CityTrack
+                </h1>
+                <p className="text-[10px] font-bold text-urban-primary uppercase tracking-widest">
+                  Citizen Portal
+                </p>
+              </div>
+            </Link>
+
+            <div className="flex items-center gap-6">
+              <div className="text-right hidden md:block border-r border-slate-200 pr-6">
+                <p className="text-sm font-bold text-slate-900">
+                  {user?.user_metadata?.full_name ||
+                    user?.email?.split("@")[0] ||
+                    "Citizen"}
+                </p>
+                <p className="text-xs text-slate-500 font-medium">
+                  {user?.email}
                 </p>
-                <p className="text-xs text-slate-500">{user?.email}</p>
               </div>
               <button
                 onClick={signOut}
-                className="px-4 py-2 bg-white border border-slate-200 text-red-600 font-medium rounded-lg hover:bg-red-50 hover:border-red-100 transition shadow-sm"
+                className="px-5 py-2.5 bg-slate-900 text-white text-sm font-bold rounded-xl hover:bg-slate-800 transition-all shadow-lg shadow-slate-900/10 active:scale-95"
               >
                 Sign Out
               </button>
@@ -102,114 +117,203 @@ export default function UserDashboard() {
         </div>
       </nav>
 
-      <main className="max-w-5xl mx-auto px-4 py-8">
-        <div className="mb-8 p-6 bg-blue-50 border border-blue-100 rounded-xl flex items-start gap-4">
-          <div className="p-2 bg-blue-100 rounded-lg">
-            <Smartphone className="w-6 h-6 text-blue-600" />
-          </div>
-          <div>
-            <h3 className="text-blue-900 font-bold text-lg mb-1">
-              Make a New Report
+      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
+        <div className="mb-12 p-8 bg-gradient-to-br from-urban-primary to-emerald-600 rounded-2xl shadow-xl shadow-urban-primary/10 flex flex-col md:flex-row items-center justify-between gap-8 relative overflow-hidden group">
+          <div className="absolute top-0 right-0 w-64 h-64 bg-white/10 rounded-full blur-3xl -mr-32 -mt-32" />
+          <div className="relative z-10 text-center md:text-left">
+            <h3 className="text-white font-bold text-2xl mb-2">
+              Report an Issue
             </h3>
-            <p className="text-blue-700 leading-relaxed">
-              To ensure data accuracy and GPS verification, new issues must be
-              reported through the official{" "}
-              <strong>City Issue Mobile App</strong>.
+            <p className="text-emerald-50 max-w-xl leading-relaxed font-medium">
+              Notice something wrong in your neighborhood? Use our mobile app to
+              report issues with instant GPS tagging and AI verification.
             </p>
           </div>
+          <div className="relative z-10 flex flex-col sm:flex-row items-center gap-4">
+            <div className="flex items-center gap-3 bg-white/10 backdrop-blur-sm border border-white/20 px-4 py-3 rounded-xl">
+              <Smartphone className="w-6 h-6 text-white" />
+              <div className="text-left">
+                <p className="text-[10px] font-bold text-emerald-100 uppercase tracking-wider">
+                  Available for
+                </p>
+                <p className="text-sm font-bold text-white">Android & iOS</p>
+              </div>
+            </div>
+          </div>
         </div>
 
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10">
-          <div className="p-6 bg-white rounded-xl border border-slate-200 shadow-sm">
-            <p className="text-slate-500 text-sm font-medium uppercase tracking-wide">
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
+          <div className="p-6 bg-white/80 backdrop-blur-sm rounded-2xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
+            <p className="text-slate-500 text-[10px] font-bold uppercase tracking-widest mb-1">
               Total Reports
             </p>
-            <p className="text-3xl font-extrabold text-slate-900 mt-2">
-              {issues.length}
-            </p>
+            {contentLoading ? (
+              <Skeleton className="mt-2 h-10 w-24" />
+            ) : (
+              <p className="text-4xl font-black text-slate-900">
+                {issues.length}
+              </p>
+            )}
           </div>
-          <div className="p-6 bg-white rounded-xl border border-slate-200 shadow-sm">
-            <p className="text-slate-500 text-sm font-medium uppercase tracking-wide">
+          <div className="p-6 bg-white/80 backdrop-blur-sm rounded-2xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
+            <p className="text-emerald-600 text-[10px] font-bold uppercase tracking-widest mb-1">
               Resolved
             </p>
-            <p className="text-3xl font-extrabold text-emerald-600 mt-2">
-              {issues.filter((i) => i.state === "resolved").length}
-            </p>
+            {contentLoading ? (
+              <Skeleton className="mt-2 h-10 w-24" />
+            ) : (
+              <p className="text-4xl font-black text-emerald-600">
+                {issues.filter((i) => i.state === "resolved").length}
+              </p>
+            )}
           </div>
-          <div className="p-6 bg-white rounded-xl border border-slate-200 shadow-sm">
-            <p className="text-slate-500 text-sm font-medium uppercase tracking-wide">
-              In Progress
+          <div className="p-6 bg-white/80 backdrop-blur-sm rounded-2xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
+            <p className="text-amber-500 text-[10px] font-bold uppercase tracking-widest mb-1">
+              Active Cases
             </p>
-            <p className="text-3xl font-extrabold text-amber-500 mt-2">
-              {
-                issues.filter((i) =>
-                  ["assigned", "in_progress"].includes(i.state),
-                ).length
-              }
+            {contentLoading ? (
+              <Skeleton className="mt-2 h-10 w-24" />
+            ) : (
+              <p className="text-4xl font-black text-amber-500">
+                {
+                  issues.filter((i) =>
+                    [
+                      "reported",
+                      "assigned",
+                      "in_progress",
+                      "pending_verification",
+                    ].includes(i.state),
+                  ).length
+                }
+              </p>
+            )}
+          </div>
+          <div className="p-6 bg-white/80 backdrop-blur-sm rounded-2xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
+            <p className="text-urban-primary text-[10px] font-bold uppercase tracking-widest mb-1">
+              Efficiency
             </p>
+            {contentLoading ? (
+              <Skeleton className="mt-2 h-10 w-24" />
+            ) : (
+              <p className="text-4xl font-black text-urban-primary">
+                {issues.length > 0
+                  ? Math.round(
+                      (issues.filter((i) => i.state === "resolved").length /
+                        issues.length) *
+                        100,
+                    )
+                  : 0}
+                %
+              </p>
+            )}
           </div>
         </div>
 
-        <h2 className="text-xl font-bold text-slate-900 mb-6">
-          Recent Activity
-        </h2>
-
-        {issues.length === 0 ? (
-          <div className="text-center py-16 bg-white rounded-xl border border-slate-200 shadow-sm">
-            <FileText className="w-12 h-12 mx-auto text-slate-300" />
-            <p className="text-slate-900 font-medium text-lg mt-4">
-              No reports submitted yet
+        <div className="flex items-center justify-between mb-8">
+          <div>
+            <h2 className="text-2xl font-black text-slate-900">My Activity</h2>
+            <p className="text-sm text-slate-500 font-medium">
+              List of all reports submitted by you
             </p>
-            <p className="text-slate-500 mt-2">
-              Download the mobile app to start contributing to your city.
+          </div>
+        </div>
+
+        {contentLoading ? (
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            {Array.from({ length: 4 }).map((_, idx) => (
+              <div
+                key={`skeleton-${idx}`}
+                className="bg-white/60 p-6 rounded-2xl border border-slate-200 shadow-sm"
+              >
+                <div className="flex justify-between mb-4">
+                  <Skeleton className="h-6 w-24 rounded-full" />
+                  <Skeleton className="h-4 w-28" />
+                </div>
+                <Skeleton className="h-7 w-3/4 mb-4" />
+                <div className="space-y-2">
+                  <Skeleton className="h-4 w-full" />
+                  <Skeleton className="h-4 w-1/2" />
+                </div>
+              </div>
+            ))}
+          </div>
+        ) : issues.length === 0 ? (
+          <div className="text-center py-20 bg-white/40 backdrop-blur-sm rounded-2xl border-2 border-dashed border-slate-200">
+            <div className="w-20 h-20 bg-slate-100 rounded-full flex items-center justify-center mx-auto mb-6">
+              <FileText className="w-10 h-10 text-slate-300" />
+            </div>
+            <p className="text-slate-900 font-bold text-xl">No reports found</p>
+            <p className="text-slate-500 mt-2 max-w-sm mx-auto">
+              Your report history will appear here once you submit an issue
+              through the app.
             </p>
           </div>
         ) : (
-          <div className="space-y-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
             {issues.map((issue) => (
-              <div
+              <Link
                 key={issue.id}
-                className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow"
+                href={`/user/issues/${issue.id}`}
+                className="group bg-white hover:bg-slate-50 p-6 rounded-2xl border border-slate-200 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 flex flex-col h-full"
               >
-                <div className="flex flex-col sm:flex-row justify-between items-start gap-4 mb-4">
+                <div className="flex justify-between items-start mb-4">
                   <div className="flex items-center gap-3">
                     {getStateBadge(issue.state)}
-                    <span className="text-xs font-bold text-slate-500 uppercase tracking-wide px-2 border-l border-slate-200">
-                      {issue.classification?.primary_category ||
-                        issue.primary_category ||
-                        "General Issue"}
+                    <span className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">
+                      {issue.category || "General"}
                     </span>
                   </div>
-                  <span className="text-sm text-slate-400 font-medium">
+                  <span className="text-xs text-slate-400 font-bold bg-slate-50 px-2 py-1 rounded-md">
                     {new Date(issue.created_at).toLocaleDateString(undefined, {
-                      month: "long",
+                      month: "short",
                       day: "numeric",
                       year: "numeric",
                     })}
                   </span>
                 </div>
 
-                <h3 className="text-lg font-bold text-slate-900 mb-2">
+                <h3 className="text-lg font-bold text-slate-900 mb-3 line-clamp-2 min-h-[3.5rem] group-hover:text-urban-primary transition-colors">
                   {issue.description || "No description provided"}
                 </h3>
 
-                <div className="flex items-center gap-2 text-sm text-slate-500">
-                  <span className="flex items-center gap-1">
-                    <MapPin className="w-4 h-4 text-slate-400" />
-                    {issue.locality ? `${issue.locality}, ` : ""}
-                    {issue.city}
-                  </span>
+                <div className="mt-auto pt-4 border-t border-slate-100 space-y-3">
+                  <div className="flex items-center gap-2 text-sm text-slate-500">
+                    <div className="w-8 h-8 rounded-lg bg-slate-50 flex items-center justify-center flex-shrink-0">
+                      <MapPin className="w-4 h-4 text-urban-primary" />
+                    </div>
+                    <span className="line-clamp-1 font-medium">
+                      {issue.full_address ||
+                        [issue.locality, issue.city]
+                          .filter(Boolean)
+                          .join(", ") ||
+                        "Location pending"}
+                    </span>
+                  </div>
+
+                  {issue.image_urls?.[0] && (
+                    <div className="relative aspect-video rounded-xl overflow-hidden border border-slate-100 bg-slate-50 group-hover:shadow-inner">
+                      <img
+                        src={issue.image_urls[0]}
+                        alt="Issue"
+                        className="absolute inset-0 h-full w-full object-cover group-hover:scale-105 transition-transform duration-500"
+                      />
+                      <div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent" />
+                    </div>
+                  )}
                 </div>
-              </div>
+              </Link>
             ))}
           </div>
         )}
       </main>
 
-      <footer className="mt-12 py-8 bg-white border-t border-slate-200">
-        <div className="max-w-5xl mx-auto px-4 text-center">
-          <p className="text-sm text-slate-400">
-            2026 City Department of Public Works - Secure Citizen Portal
+      <footer className="mt-20 py-12 bg-white/80 backdrop-blur-md border-t border-slate-200">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center text-slate-500">
+          <p className="text-sm font-bold uppercase tracking-widest text-slate-400 mb-2">
+            Developed for CityTrack
+          </p>
+          <p className="text-xs font-medium">
+            Improving Urban Life with AI Governance
           </p>
         </div>
       </footer>

Frontend/app/worker/layout.tsx

@@ -5,7 +5,11 @@ import { useAuth } from "@/components/AuthProvider";
 import DashboardSidebar from "@/components/DashboardSidebar";
 import DashboardHeader from "@/components/DashboardHeader";
 
-export default function WorkerLayout({ children }: { children: React.ReactNode }) {
+export default function WorkerLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
   const { role, loading, signOut } = useAuth();
   const [mobileOpen, setMobileOpen] = useState(false);
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
@@ -20,20 +24,25 @@ export default function WorkerLayout({ children }: { children: React.ReactNode }
   if (loading) return null;
 
   return (
-    <div className="flex min-h-screen bg-slate-50 font-sans text-slate-900 overflow-hidden">
-      <DashboardSidebar 
-        role="worker" 
-        mobileOpen={mobileOpen} 
-        setMobileOpen={setMobileOpen} 
+    <div className="flex min-h-screen bg-urban-bg font-sans text-slate-900 overflow-hidden relative">
+      <DashboardSidebar
+        role="worker"
+        mobileOpen={mobileOpen}
+        setMobileOpen={setMobileOpen}
         desktopOpen={isSidebarOpen}
-        onLogout={signOut} 
+        onLogout={signOut}
       />
-      
-      <div className="flex-1 flex flex-col min-h-screen transition-all duration-300 h-screen overflow-hidden">
-        <DashboardHeader 
-            setMobileOpen={setMobileOpen}
-            toggleSidebar={() => setIsSidebarOpen(!isSidebarOpen)} 
-            title="Field Worker Portal" 
+
+      <div className="absolute top-0 left-0 w-full h-full pointer-events-none z-0 overflow-hidden">
+        <div className="absolute top-[-10%] right-[-5%] w-[40%] h-[40%] bg-urban-primary/5 rounded-full blur-[100px]"></div>
+        <div className="absolute bottom-[-10%] left-[-5%] w-[30%] h-[30%] bg-amber-500/5 rounded-full blur-[80px]"></div>
+      </div>
+
+      <div className="flex-1 flex flex-col min-h-screen transition-all duration-300 relative z-10 h-screen overflow-hidden">
+        <DashboardHeader
+          setMobileOpen={setMobileOpen}
+          toggleSidebar={() => setIsSidebarOpen(!isSidebarOpen)}
+          title="Field Worker Portal"
         />
         <main className="flex-1 overflow-x-hidden overflow-y-auto p-4 sm:p-6 lg:p-8">
           {children}

Frontend/app/worker/page.tsx

@@ -1,10 +1,7 @@
 "use client";
-import { useEffect, useState } from "react";
-// Removed duplicate imports
 import { useRouter } from "next/navigation";
 import Link from "next/link";
 import { useAuth } from "@/components/AuthProvider";
-import { apiGet } from "@/lib/api";
 import {
   Coffee,
   MapPin,
@@ -31,23 +28,17 @@ interface Task {
 
 import { useCachedFetch } from "@/hooks/useCachedFetch";
 
-// ... existing imports
-
 export default function WorkerDashboard() {
   const { user, role, loading: authLoading } = useAuth();
   const router = useRouter();
-  
-  // Use cached fetch for instant load + background update
+
   const { data: tasksData, loading: tasksLoading } = useCachedFetch<Task[]>(
-    role === "worker" ? "/worker/tasks" : "" 
+    role === "worker" ? "/worker/tasks" : "",
   );
 
   const tasks = tasksData || [];
-  
-  // Combine loading states
   const isLoading = authLoading || (tasksLoading && tasks.length === 0);
 
-
   const getPriorityBadge = (priority: number) => {
     const badges: Record<number, { bg: string; text: string; border: string }> =
       {
@@ -79,7 +70,9 @@ export default function WorkerDashboard() {
       <span
         className={`px-2.5 py-1 rounded-md text-xs font-bold border ${badge.bg} ${badge.text} ${badge.border} flex items-center gap-1.5`}
       >
-        <span className={`w-1.5 h-1.5 rounded-full ${priority === 1 ? 'bg-red-500' : priority === 2 ? 'bg-orange-500' : priority === 3 ? 'bg-amber-500' : 'bg-emerald-500'}`}></span>
+        <span
+          className={`w-1.5 h-1.5 rounded-full ${priority === 1 ? "bg-red-500" : priority === 2 ? "bg-orange-500" : priority === 3 ? "bg-amber-500" : "bg-emerald-500"}`}
+        ></span>
         {labels[priority] || "Unknown"}
       </span>
     );
@@ -113,20 +106,22 @@ export default function WorkerDashboard() {
   }
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-8 max-w-7xl mx-auto">
       <div className="flex justify-between items-center">
         <div>
-          <h2 className="text-2xl font-bold text-slate-900 tracking-tight">My Assignments</h2>
-          <p className="text-sm text-slate-500">
+          <h2 className="text-2xl font-black text-slate-900 tracking-tight">
+            My Assignments
+          </h2>
+          <p className="text-sm text-slate-500 font-medium">
             Tasks assigned to you for resolution.
           </p>
         </div>
       </div>
 
       <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
-        <div className="bg-white/60 backdrop-blur-md p-6 rounded-2xl border border-slate-200/60 shadow-urban-sm hover:shadow-urban-md transition-all">
+        <div className="bg-white/70 backdrop-blur-md p-6 rounded-2xl border border-slate-200/70 shadow-urban-sm hover:shadow-urban-md transition-all">
           <div className="flex items-center gap-3 mb-2">
-            <div className="p-2.5 bg-blue-50 text-blue-600 rounded-xl shadow-sm">
+            <div className="p-2.5 bg-urban-primary/10 text-urban-primary rounded-xl shadow-sm">
               <AlertCircle className="w-5 h-5" />
             </div>
             <h3 className="text-slate-500 font-bold text-xs uppercase tracking-wider font-mono">
@@ -136,12 +131,12 @@ export default function WorkerDashboard() {
           <p className="text-4xl font-extrabold text-slate-900 mt-2 tracking-tighter">
             {
               tasks.filter((t) =>
-                ["assigned", "in_progress", "rejected"].includes(t.state)
+                ["assigned", "in_progress", "rejected"].includes(t.state),
               ).length
             }
           </p>
         </div>
-        <div className="bg-white/60 backdrop-blur-md p-6 rounded-2xl border border-slate-200/60 shadow-urban-sm hover:shadow-urban-md transition-all">
+        <div className="bg-white/70 backdrop-blur-md p-6 rounded-2xl border border-slate-200/70 shadow-urban-sm hover:shadow-urban-md transition-all">
           <div className="flex items-center gap-3 mb-2">
             <div className="p-2.5 bg-amber-50 text-amber-600 rounded-xl shadow-sm">
               <Coffee className="w-5 h-5" />
@@ -153,24 +148,22 @@ export default function WorkerDashboard() {
           <p className="text-4xl font-extrabold text-slate-900 mt-2 tracking-tighter">
             {
               tasks.filter((t) =>
-                ["pending_verification", "resolved"].includes(t.state)
+                ["pending_verification", "resolved"].includes(t.state),
               ).length
             }
           </p>
         </div>
       </div>
 
-      <h3 className="text-lg font-bold text-slate-900 mb-4 flex items-center gap-2">
-        <span className="w-1 h-5 bg-blue-600 rounded-full"></span>
+      <h3 className="text-lg font-black text-slate-900 mb-4 flex items-center gap-2">
+        <span className="w-1.5 h-5 bg-urban-primary rounded-full"></span>
         Current Assignments
       </h3>
 
       {tasks.length === 0 ? (
-        <div className="text-center py-16 bg-white/40 backdrop-blur-sm rounded-2xl border border-slate-200/60 border-dashed">
+        <div className="text-center py-16 bg-white/60 backdrop-blur-sm rounded-2xl border border-slate-200/70 border-dashed">
           <Coffee className="w-12 h-12 mx-auto text-slate-300 mb-4" />
-          <p className="text-slate-900 font-bold text-lg">
-            All caught up!
-          </p>
+          <p className="text-slate-900 font-bold text-lg">All caught up!</p>
           <p className="text-slate-500 text-sm mt-1">
             Enjoy your break, no pending assignments.
           </p>
@@ -179,8 +172,8 @@ export default function WorkerDashboard() {
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
           {tasks.map((task) => (
             <Link key={task.id} href={`/worker/task/${task.id}`}>
-              <div className="h-full p-6 bg-white/70 backdrop-blur-md rounded-2xl border border-slate-200/60 shadow-urban-sm hover:shadow-urban-md hover:-translate-y-1 hover:border-blue-300/50 transition-all cursor-pointer group flex flex-col justify-between relative overflow-hidden">
-                <div className="absolute top-0 left-0 w-1 h-full bg-slate-200 group-hover:bg-blue-500 transition-colors"></div>
+              <div className="h-full p-6 bg-white/70 backdrop-blur-md rounded-2xl border border-slate-200/70 shadow-urban-sm hover:shadow-urban-md hover:-translate-y-1 hover:border-urban-primary/30 transition-all cursor-pointer group flex flex-col justify-between relative overflow-hidden">
+                <div className="absolute top-0 left-0 w-1 h-full bg-slate-200 group-hover:bg-urban-primary transition-colors"></div>
                 <div>
                   <div className="flex justify-between items-start mb-4 pl-2">
                     <div className="flex items-center gap-2 flex-wrap">
@@ -190,8 +183,8 @@ export default function WorkerDashboard() {
                           task.state === "pending_verification"
                             ? "bg-orange-50 text-orange-700 border-orange-200"
                             : task.state === "resolved"
-                            ? "bg-emerald-50 text-emerald-700 border-emerald-200"
-                            : "bg-slate-100 text-slate-600 border-slate-200"
+                              ? "bg-emerald-50 text-emerald-700 border-emerald-200"
+                              : "bg-slate-100 text-slate-600 border-slate-200"
                         }`}
                       >
                         {task.state === "pending_verification"
@@ -201,14 +194,14 @@ export default function WorkerDashboard() {
                     </div>
                   </div>
 
-                  <h3 className="text-xl font-bold text-slate-900 mb-2 pl-2 group-hover:text-blue-700 transition-colors line-clamp-2 tracking-tight">
+                  <h3 className="text-xl font-bold text-slate-900 mb-2 pl-2 group-hover:text-urban-primary transition-colors line-clamp-2 tracking-tight">
                     {task.description || "Issue Report"}
                   </h3>
 
                   <div className="py-3 pl-2 space-y-2.5">
                     <div className="flex items-center gap-2.5 text-sm text-slate-600">
                       <div className="p-1.5 bg-slate-100 rounded-md text-slate-500">
-                         <MapPin className="w-3.5 h-3.5" />
+                        <MapPin className="w-3.5 h-3.5" />
                       </div>
                       <span className="truncate font-medium">
                         {task.full_address || `${task.city}, ${task.locality}`}
@@ -230,7 +223,7 @@ export default function WorkerDashboard() {
                   <span className="text-xs text-slate-400 font-mono font-medium bg-slate-100 px-2 py-1 rounded">
                     ID: {task.id.slice(0, 8)}
                   </span>
-                  <span className="text-blue-600 text-sm font-bold flex items-center gap-1.5 group-hover:gap-2.5 transition-all bg-blue-50/50 px-3 py-1.5 rounded-lg border border-blue-100/50 group-hover:bg-blue-100 group-hover:border-blue-200">
+                  <span className="text-urban-primary text-sm font-bold flex items-center gap-1.5 group-hover:gap-2.5 transition-all bg-urban-primary/10 px-3 py-1.5 rounded-lg border border-urban-primary/20 group-hover:bg-urban-primary/20 group-hover:border-urban-primary/30">
                     Resolve <ArrowRight className="w-4 h-4" />
                   </span>
                 </div>

Frontend/app/worker/task/[id]/page.tsx

@@ -124,7 +124,9 @@ export default function TaskDetailPage() {
 
   if (loading) {
     return (
-      <div className="text-slate-600 font-medium">Loading Task Details...</div>
+      <div className="text-slate-600 font-medium max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        Loading Task Details...
+      </div>
     );
   }
 
@@ -134,7 +136,7 @@ export default function TaskDetailPage() {
         <p className="text-slate-500 text-lg">Task not found</p>
         <button
           onClick={() => router.back()}
-          className="mt-4 text-blue-600 font-medium hover:underline"
+          className="mt-4 text-urban-primary font-medium hover:underline"
         >
           Go Back
         </button>
@@ -143,7 +145,7 @@ export default function TaskDetailPage() {
   }
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-6 max-w-7xl mx-auto">
       <div className="flex items-center justify-between">
         <button
           onClick={() => router.back()}
@@ -155,7 +157,7 @@ export default function TaskDetailPage() {
           href={`https://www.google.com/maps?q=${task.latitude},${task.longitude}`}
           target="_blank"
           rel="noopener noreferrer"
-          className="px-5 py-2.5 bg-blue-600 text-white text-sm font-bold rounded-xl hover:bg-blue-700 transition shadow-lg hover:shadow-blue-500/30 flex items-center gap-2 transform hover:-translate-y-0.5"
+          className="px-5 py-2.5 bg-urban-primary text-white text-sm font-bold rounded-xl hover:bg-emerald-600 transition shadow-lg hover:shadow-emerald-500/30 flex items-center gap-2 transform hover:-translate-y-0.5"
         >
           <Navigation className="w-4 h-4" /> Navigation
         </a>
@@ -163,7 +165,7 @@ export default function TaskDetailPage() {
 
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
         <div className="space-y-6">
-          <div className="bg-white/60 backdrop-blur-md rounded-2xl border border-slate-200/60 shadow-urban-sm overflow-hidden">
+          <div className="bg-white/70 backdrop-blur-md rounded-2xl border border-slate-200/70 shadow-urban-sm overflow-hidden">
             {task.annotated_url ? (
               <div className="relative h-72 bg-slate-100 group">
                 <img
@@ -171,9 +173,9 @@ export default function TaskDetailPage() {
                   alt="Issue"
                   className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
                 />
-                <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-60"></div>
+                <div className="absolute inset-0 bg-linear-to-t from-black/50 to-transparent opacity-60"></div>
                 <div className="absolute bottom-4 left-4 text-white">
-                    <p className="font-bold text-lg text-shadow-sm">{task.category}</p>
+                  <p className="font-bold text-lg">{task.category}</p>
                 </div>
               </div>
             ) : (
@@ -184,15 +186,19 @@ export default function TaskDetailPage() {
 
             <div className="p-6">
               <div className="flex items-center gap-2 mb-4">
-                <span className={`px-2.5 py-1 rounded-md text-xs font-bold uppercase tracking-wide border ${
-                    task.state === 'pending_verification' ? 'bg-orange-50 text-orange-700 border-orange-200' :
-                    task.state === 'resolved' ? 'bg-emerald-50 text-emerald-700 border-emerald-200' :
-                    'bg-blue-50 text-blue-700 border-blue-200'
-                }`}>
+                <span
+                  className={`px-2.5 py-1 rounded-md text-xs font-bold uppercase tracking-wide border ${
+                    task.state === "pending_verification"
+                      ? "bg-orange-50 text-orange-700 border-orange-200"
+                      : task.state === "resolved"
+                        ? "bg-emerald-50 text-emerald-700 border-emerald-200"
+                        : "bg-urban-primary/10 text-urban-primary border-urban-primary/20"
+                  }`}
+                >
                   {task.state.replace("_", " ")}
                 </span>
                 <span className="text-xs font-bold text-slate-400 uppercase tracking-wider ml-auto">
-                   ID: {task.id.slice(0, 8)}
+                  ID: {task.id.slice(0, 8)}
                 </span>
               </div>
 
@@ -203,7 +209,7 @@ export default function TaskDetailPage() {
                 {task.full_address}
               </p>
 
-              <div className="grid grid-cols-2 gap-6 py-6 border-t border-slate-200/60">
+              <div className="grid grid-cols-2 gap-6 py-6 border-t border-slate-200/70">
                 <div>
                   <p className="text-xs font-bold text-slate-400 uppercase tracking-wide mb-1">
                     Reported On
@@ -227,9 +233,9 @@ export default function TaskDetailPage() {
           </div>
         </div>
 
-        <div className="bg-white/60 backdrop-blur-md rounded-2xl border border-slate-200/60 shadow-urban-sm p-8 h-fit sticky top-6">
-          <h2 className="text-xl font-bold text-slate-900 mb-6 border-b border-slate-200/60 pb-4 flex items-center gap-2">
-            <span className="w-1.5 h-6 bg-blue-600 rounded-full"></span>
+        <div className="bg-white/70 backdrop-blur-md rounded-2xl border border-slate-200/70 shadow-urban-sm p-8 h-fit sticky top-6">
+          <h2 className="text-xl font-black text-slate-900 mb-6 border-b border-slate-200/70 pb-4 flex items-center gap-2">
+            <span className="w-1.5 h-6 bg-urban-primary rounded-full"></span>
             Task Action
           </h2>
 
@@ -242,7 +248,7 @@ export default function TaskDetailPage() {
               </p>
               <button
                 onClick={handleStart}
-                className="w-full py-4 bg-blue-600 hover:bg-blue-700 text-white font-bold text-lg rounded-xl shadow-lg hover:shadow-blue-500/40 transition-all flex items-center justify-center gap-2 transform hover:-translate-y-1"
+                className="w-full py-4 bg-urban-primary hover:bg-emerald-600 text-white font-bold text-lg rounded-xl shadow-lg hover:shadow-emerald-500/40 transition-all flex items-center justify-center gap-2 transform hover:-translate-y-1"
               >
                 Start Task
               </button>
@@ -268,8 +274,8 @@ export default function TaskDetailPage() {
                   onClick={() => fileRef.current?.click()}
                   className={`w-full p-8 border-2 border-dashed rounded-2xl transition-all group ${
                     previewUrl
-                      ? "border-blue-500 bg-blue-50/50"
-                      : "border-slate-300 hover:border-blue-400 hover:bg-slate-50"
+                      ? "border-urban-primary bg-urban-primary/10"
+                      : "border-slate-300 hover:border-urban-primary/50 hover:bg-slate-50"
                   }`}
                 >
                   {previewUrl ? (
@@ -279,14 +285,14 @@ export default function TaskDetailPage() {
                         alt="Proof"
                         className="h-48 mx-auto rounded-xl shadow-md object-cover mb-4"
                       />
-                      <span className="text-sm font-bold text-blue-600 group-hover:text-blue-700">
+                      <span className="text-sm font-bold text-urban-primary group-hover:text-emerald-700">
                         Change Photo
                       </span>
                     </div>
                   ) : (
-                    <div className="flex flex-col items-center text-slate-400 group-hover:text-blue-500 transition-colors">
-                      <div className="p-4 bg-slate-100 rounded-full mb-3 group-hover:bg-blue-100 transition-colors">
-                         <Camera className="w-8 h-8" />
+                    <div className="flex flex-col items-center text-slate-400 group-hover:text-urban-primary transition-colors">
+                      <div className="p-4 bg-slate-100 rounded-full mb-3 group-hover:bg-urban-primary/10 transition-colors">
+                        <Camera className="w-8 h-8" />
                       </div>
                       <span className="font-bold">Tap to Upload Photo</span>
                     </div>
@@ -301,7 +307,7 @@ export default function TaskDetailPage() {
                 <textarea
                   value={notes}
                   onChange={(e) => setNotes(e.target.value)}
-                  className="w-full px-4 py-3 bg-white/50 border border-slate-200 rounded-xl text-slate-900 placeholder-slate-400 focus:outline-none focus:ring-4 focus:ring-blue-500/10 focus:border-blue-500 transition-all resize-none"
+                  className="w-full px-4 py-3 bg-white/50 border border-slate-200 rounded-xl text-slate-900 placeholder-slate-400 focus:outline-none focus:ring-4 focus:ring-urban-primary/10 focus:border-urban-primary/40 transition-all resize-none"
                   rows={4}
                   placeholder="Describe the repair work completed..."
                 />
@@ -325,7 +331,7 @@ export default function TaskDetailPage() {
           ) : task.state === "pending_verification" ? (
             <div className="text-center py-10 bg-orange-50/50 rounded-2xl border border-orange-100">
               <div className="w-16 h-16 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-4">
-                 <Loader2 className="w-8 h-8 text-orange-500 animate-spin" />
+                <Loader2 className="w-8 h-8 text-orange-500 animate-spin" />
               </div>
               <h3 className="text-xl font-bold text-orange-900 mb-2">
                 Under Review
@@ -337,7 +343,9 @@ export default function TaskDetailPage() {
           ) : (
             <div className="text-center py-10 bg-emerald-50/50 rounded-2xl border border-emerald-100">
               <div className="w-16 h-16 bg-emerald-100 rounded-full flex items-center justify-center mx-auto mb-4">
-                 <div className="w-8 h-8 text-emerald-600 font-bold text-2xl">✓</div>
+                <div className="w-8 h-8 text-emerald-600 font-bold text-2xl">
+                  ✓
+                </div>
               </div>
               <h3 className="text-xl font-bold text-emerald-900 mb-2">
                 Task Completed

Frontend/components/DashboardHeader.tsx

@@ -1,50 +1,53 @@
-
-
 "use client";
-import { useState } from "react";
 import { Search, Bell, Menu, User } from "lucide-react";
 
 interface HeaderProps {
-    setMobileOpen: (open: boolean) => void;
-    toggleSidebar?: () => void;
-    title?: string;
+  setMobileOpen: (open: boolean) => void;
+  toggleSidebar?: () => void;
+  title?: string;
 }
 
-export default function DashboardHeader({ setMobileOpen, toggleSidebar, title = "Dashboard" }: HeaderProps) {
-    return (
-        <header className="sticky top-0 z-30 flex h-16 w-full items-center justify-between border-b border-slate-200/60 bg-white/60 backdrop-blur-md px-4 shadow-sm sm:px-6 lg:px-8 transition-all duration-300">
-            <div className="flex items-center gap-4">
-                <button 
-                    onClick={() => {
-                        setMobileOpen(true); // Always open mobile menu
-                        toggleSidebar?.();   // Toggle desktop if function exists
-                    }}
-                    className="rounded-lg p-2 text-slate-500 hover:bg-slate-100/80 hover:text-slate-700 transition-colors"
-                >
-                    <Menu className="h-6 w-6" />
-                </button>
-                <h1 className="text-xl font-bold text-slate-900 tracking-tight hidden sm:block">{title}</h1>
-            </div>
+export default function DashboardHeader({
+  setMobileOpen,
+  toggleSidebar,
+  title = "Dashboard",
+}: HeaderProps) {
+  return (
+    <header className="sticky top-0 z-30 flex h-16 w-full items-center justify-between border-b border-slate-200/60 bg-white/70 backdrop-blur-md px-4 shadow-sm sm:px-6 lg:px-8 transition-all duration-300">
+      <div className="flex items-center gap-4">
+        <button
+          onClick={() => {
+            setMobileOpen(true);
+            toggleSidebar?.();
+          }}
+          className="rounded-lg p-2 text-slate-500 hover:bg-slate-100/80 hover:text-slate-700 transition-colors"
+        >
+          <Menu className="h-6 w-6" />
+        </button>
+        <h1 className="text-xl font-black text-slate-900 tracking-tight hidden sm:block">
+          {title}
+        </h1>
+      </div>
 
-            <div className="flex items-center gap-4">
-                <div className="hidden md:flex relative group">
-                    <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400 group-focus-within:text-blue-500 transition-colors" />
-                    <input 
-                        type="text" 
-                        placeholder="Search issues, workers..." 
-                        className="h-10 w-64 rounded-full border border-slate-200 bg-slate-50/50 pl-10 pr-4 text-sm outline-none transition-all placeholder:text-slate-400 focus:border-blue-500/50 focus:bg-white focus:ring-4 focus:ring-blue-500/10"
-                    />
-                </div>
+      <div className="flex items-center gap-4">
+        <div className="hidden md:flex relative group">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400 group-focus-within:text-urban-primary transition-colors" />
+          <input
+            type="text"
+            placeholder="Search issues, workers..."
+            className="h-10 w-64 rounded-full border border-slate-200 bg-slate-50/60 pl-10 pr-4 text-sm outline-none transition-all placeholder:text-slate-400 focus:border-urban-primary/40 focus:bg-white focus:ring-4 focus:ring-urban-primary/10"
+          />
+        </div>
 
-                <button className="relative rounded-full bg-white p-2.5 text-slate-500 shadow-sm ring-1 ring-slate-200 hover:text-blue-600 hover:ring-blue-200 transition-all">
-                    <Bell className="h-5 w-5" />
-                    <span className="absolute top-2 right-2.5 h-2 w-2 rounded-full bg-orange-500 ring-2 ring-white"></span>
-                </button>
+        <button className="relative rounded-full bg-white p-2.5 text-slate-500 shadow-sm ring-1 ring-slate-200 hover:text-urban-primary hover:ring-urban-primary/20 transition-all">
+          <Bell className="h-5 w-5" />
+          <span className="absolute top-2 right-2.5 h-2 w-2 rounded-full bg-amber-500 ring-2 ring-white"></span>
+        </button>
 
-                <div className="h-9 w-9 rounded-full bg-blue-100 flex items-center justify-center text-blue-700 font-bold border border-white shadow-sm ring-2 ring-blue-50">
-                    <User className="h-5 w-5" />
-                </div>
-            </div>
-        </header>
-    );
+        <div className="h-9 w-9 rounded-full bg-urban-primary/10 flex items-center justify-center text-urban-primary font-bold border border-white shadow-sm ring-2 ring-urban-primary/20">
+          <User className="h-5 w-5" />
+        </div>
+      </div>
+    </header>
+  );
 }

Frontend/components/DashboardSidebar.tsx

@@ -37,7 +37,6 @@ export default function DashboardSidebar({
 }: SidebarProps) {
   const pathname = usePathname();
 
-  // ... (links definition skipped for brevity if not changing, but we are inside function)
   const adminLinks = [
     { href: "/admin", label: "Overview", icon: LayoutDashboard },
     { href: "/admin/issues", label: "Issues", icon: ClipboardList },
@@ -70,14 +69,14 @@ export default function DashboardSidebar({
       >
         <div className="flex h-16 items-center px-6 border-b border-slate-100/50">
           <div className="flex items-center gap-2">
-            <div className="h-8 w-8 rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center shadow-lg shadow-blue-500/20">
-              <span className="text-white font-bold font-mono">U</span>
+            <div className="h-8 w-8 rounded-lg bg-gradient-to-br from-urban-primary to-emerald-600 flex items-center justify-center shadow-lg shadow-emerald-500/20">
+              <span className="text-white font-bold font-mono">C</span>
             </div>
             <span className="text-xl font-bold tracking-tight text-slate-900">
               CityTracker
             </span>
           </div>
-          <span className="ml-auto rounded-full bg-blue-50 px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider text-blue-600 ring-1 ring-blue-100">
+          <span className="ml-auto rounded-full bg-urban-primary/10 px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider text-urban-primary ring-1 ring-urban-primary/20">
             {role}
           </span>
         </div>
@@ -95,18 +94,18 @@ export default function DashboardSidebar({
                   className={cn(
                     "flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium transition-all duration-200 group relative overflow-hidden",
                     isActive
-                      ? "bg-blue-50 text-blue-700 shadow-sm ring-1 ring-blue-100"
+                      ? "bg-urban-primary/10 text-urban-primary shadow-sm ring-1 ring-urban-primary/20"
                       : "text-slate-500 hover:bg-slate-50 hover:text-slate-900",
                   )}
                 >
                   {isActive && (
-                    <div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-6 bg-blue-500 rounded-r-full" />
+                    <div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-6 bg-urban-primary rounded-r-full" />
                   )}
                   <Icon
                     className={cn(
                       "h-5 w-5 transition-transform group-hover:scale-110",
                       isActive
-                        ? "text-blue-600"
+                        ? "text-urban-primary"
                         : "text-slate-400 group-hover:text-slate-600",
                     )}
                   />