Frontend version 1 complete

Frontend/.env.example

@@ -0,0 +1,3 @@
+NEXT_PUBLIC_API_URL=http://localhost:8000
+NEXT_PUBLIC_SUPABASE_URL=
+NEXT_PUBLIC_SUPABASE_ANON_KEY=

Frontend/.gitignore

@@ -1,41 +0,0 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.*
-.yarn/*
-!.yarn/patches
-!.yarn/plugins
-!.yarn/releases
-!.yarn/versions
-
-# testing
-/coverage
-
-# next.js
-/.next/
-/out/
-
-# production
-/build
-
-# misc
-.DS_Store
-*.pem
-
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-.pnpm-debug.log*
-
-# env files (can opt-in for committing if needed)
-.env*
-
-# vercel
-.vercel
-
-# typescript
-*.tsbuildinfo
-next-env.d.ts

Frontend/README.md

@@ -1,36 +0,0 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
-
-## Getting Started
-
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

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

@@ -0,0 +1,456 @@
+"use client";
+import { useEffect, useState } from "react";
+import { useParams, useRouter } from "next/navigation";
+
+export const runtime = "edge";
+import { apiGet, apiPost } from "@/lib/api";
+import {
+  ArrowLeft,
+  Users,
+  Plus,
+  Mail,
+  Phone,
+  Briefcase,
+  Shield,
+  MapPin,
+  Trash2,
+  MoreHorizontal,
+} from "lucide-react";
+import Link from "next/link";
+
+interface Department {
+  id: string;
+  name: string;
+  code: string;
+  description: string;
+  default_sla_hours: number;
+  is_active: boolean;
+  member_count: number;
+}
+
+interface Member {
+  id: string;
+  name: string;
+  email: string;
+  role: string;
+  current_workload: number;
+  max_workload: number;
+  is_active: boolean;
+  phone?: string;
+  city?: string;
+}
+
+export default function DepartmentDetailPage() {
+  const params = useParams();
+  const router = useRouter();
+  const [department, setDepartment] = useState<Department | null>(null);
+  const [members, setMembers] = useState<Member[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [showAddMember, setShowAddMember] = useState(false);
+
+  // Form State
+  const [newMember, setNewMember] = useState({
+    name: "",
+    email: "",
+    role: "worker",
+    password: "", // Required by backend
+    phone: "",
+    city: "",
+    max_workload: 10,
+  });
+
+  useEffect(() => {
+    if (params.id) {
+      loadData(params.id as string);
+    }
+  }, [params.id]);
+
+  const loadData = async (deptId: string) => {
+    try {
+      const [deptData, membersData] = await Promise.all([
+        apiGet<Department>(`/admin/departments/${deptId}`),
+        apiGet<Member[]>(`/admin/members?department_id=${deptId}`),
+      ]);
+      setDepartment(deptData);
+      setMembers(membersData);
+    } catch (error) {
+      console.error("Failed to load department data:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleAddMember = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!department) return;
+
+    try {
+      await apiPost("/admin/members", {
+        ...newMember,
+        department_id: department.id,
+        locality: "General", // Default for now
+      });
+      setShowAddMember(false);
+      setNewMember({
+        name: "",
+        email: "",
+        role: "worker",
+        password: "",
+        phone: "",
+        city: "",
+        max_workload: 10,
+      });
+      loadData(department.id); // Refresh list
+      alert("Member added successfully!");
+    } catch (error: any) {
+      alert(error.message || "Failed to add member");
+    }
+  };
+
+  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}`,
+        {
+          method: "DELETE",
+          headers: { Authorization: `Bearer ${token}` },
+        },
+      );
+      setMembers(members.filter((m) => m.id !== memberId));
+    } catch (error) {
+      console.error("Delete failed", error);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="p-8 text-center text-slate-500">
+        Loading Department...
+      </div>
+    );
+  }
+
+  if (!department) {
+    return <div className="p-8 text-center">Department not found</div>;
+  }
+
+  return (
+    <div className="max-w-6xl mx-auto space-y-8 p-6">
+      {/* Header */}
+      <div>
+        <Link
+          href="/admin/departments"
+          className="inline-flex items-center gap-2 text-slate-500 hover:text-urban-primary mb-4"
+        >
+          <ArrowLeft className="w-4 h-4" /> Back to Departments
+        </Link>
+        <div className="flex justify-between items-start">
+          <div>
+            <div className="flex items-center gap-3 mb-1">
+              <h1 className="text-3xl font-bold 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">
+                {department.code}
+              </span>
+            </div>
+            <p className="text-slate-500">
+              {department.description || "No description provided."}
+            </p>
+          </div>
+          <div className="flex gap-3">
+            <div className="text-right">
+              <div className="text-xs text-slate-400 font-bold uppercase tracking-wider mb-1">
+                SLA Limit
+              </div>
+              <div className="font-mono font-bold text-slate-700 bg-slate-50 px-3 py-1 rounded border border-slate-200">
+                {department.default_sla_hours}h
+              </div>
+            </div>
+          </div>
+        </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="flex justify-between items-center">
+            <div>
+              <p className="text-sm font-bold text-slate-400 uppercase tracking-wider">
+                Total Staff
+              </p>
+              <h3 className="text-3xl font-bold text-slate-900 mt-1">
+                {members.length}
+              </h3>
+            </div>
+            <div className="h-10 w-10 bg-blue-50 rounded-lg flex items-center justify-center text-blue-600">
+              <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">
+            <Users className="w-5 h-5 text-slate-400" />
+            Department Members
+          </h2>
+          <button
+            onClick={() => setShowAddMember(true)}
+            className="btn-primary 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">
+                Add New Member
+              </h3>
+              <button
+                onClick={() => setShowAddMember(false)}
+                className="text-slate-400 hover:text-slate-600"
+              >
+                Cancel
+              </button>
+            </div>
+            <form
+              onSubmit={handleAddMember}
+              className="grid grid-cols-1 md:grid-cols-2 gap-6"
+            >
+              <div>
+                <label className="text-sm font-bold text-slate-700 mb-1 block">
+                  Full Name
+                </label>
+                <input
+                  required
+                  className="input w-full bg-white"
+                  placeholder="John Doe"
+                  value={newMember.name}
+                  onChange={(e) =>
+                    setNewMember({ ...newMember, name: e.target.value })
+                  }
+                />
+              </div>
+              <div>
+                <label className="text-sm font-bold text-slate-700 mb-1 block">
+                  Email Address
+                </label>
+                <input
+                  required
+                  type="email"
+                  className="input w-full bg-white"
+                  placeholder="john@city.gov"
+                  value={newMember.email}
+                  onChange={(e) =>
+                    setNewMember({ ...newMember, email: e.target.value })
+                  }
+                />
+              </div>
+              <div>
+                <label className="text-sm font-bold text-slate-700 mb-1 block">
+                  Role
+                </label>
+                <select
+                  className="input w-full bg-white"
+                  value={newMember.role}
+                  onChange={(e) =>
+                    setNewMember({ ...newMember, role: e.target.value })
+                  }
+                >
+                  <option value="worker">Field Worker</option>
+                  <option value="officer">Department Officer</option>
+                  <option value="admin">Admin (Restricted)</option>
+                </select>
+              </div>
+              <div>
+                <label className="text-sm font-bold text-slate-700 mb-1 block">
+                  Initial Password
+                </label>
+                <input
+                  required
+                  type="password"
+                  className="input w-full bg-white"
+                  placeholder="••••••••"
+                  value={newMember.password}
+                  onChange={(e) =>
+                    setNewMember({ ...newMember, password: e.target.value })
+                  }
+                />
+              </div>
+              <div>
+                <label className="text-sm font-bold text-slate-700 mb-1 block">
+                  Phone (Optional)
+                </label>
+                <input
+                  className="input w-full bg-white"
+                  placeholder="+1 234..."
+                  value={newMember.phone}
+                  onChange={(e) =>
+                    setNewMember({ ...newMember, phone: e.target.value })
+                  }
+                />
+              </div>
+              <div>
+                <label className="text-sm font-bold text-slate-700 mb-1 block">
+                  City (Optional)
+                </label>
+                <input
+                  className="input w-full bg-white"
+                  placeholder="East District"
+                  value={newMember.city}
+                  onChange={(e) =>
+                    setNewMember({ ...newMember, city: e.target.value })
+                  }
+                />
+              </div>
+              <div className="md:col-span-2 pt-4 flex justify-end gap-3">
+                <button
+                  type="button"
+                  onClick={() => setShowAddMember(false)}
+                  className="btn-secondary"
+                >
+                  Cancel
+                </button>
+                <button type="submit" className="btn-primary">
+                  Create Member Account
+                </button>
+              </div>
+            </form>
+          </div>
+        )}
+
+        {/* Members List */}
+        <div className="card p-0 overflow-hidden">
+          <table className="w-full text-left">
+            <thead className="bg-slate-50 border-b border-slate-200">
+              <tr>
+                <th className="px-6 py-4 text-xs font-bold text-slate-500 uppercase tracking-wider">
+                  Name / Email
+                </th>
+                <th className="px-6 py-4 text-xs font-bold text-slate-500 uppercase tracking-wider">
+                  Role
+                </th>
+                <th className="px-6 py-4 text-xs font-bold text-slate-500 uppercase tracking-wider">
+                  Workload
+                </th>
+                <th className="px-6 py-4 text-xs font-bold text-slate-500 uppercase tracking-wider">
+                  Location
+                </th>
+                <th className="px-6 py-4 text-right text-xs font-bold text-slate-500 uppercase tracking-wider">
+                  Actions
+                </th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-slate-100">
+              {members.map((member) => (
+                <tr
+                  key={member.id}
+                  className="hover:bg-slate-50/50 transition-colors"
+                >
+                  <td className="px-6 py-4">
+                    <div className="flex items-center gap-3">
+                      <div
+                        className={`w-10 h-10 rounded-full flex items-center justify-center font-bold text-sm ${
+                          member.role === "admin"
+                            ? "bg-purple-100 text-purple-600"
+                            : member.role === "officer"
+                              ? "bg-blue-100 text-blue-600"
+                              : "bg-emerald-100 text-emerald-600"
+                        }`}
+                      >
+                        {member.name.charAt(0)}
+                      </div>
+                      <div>
+                        <div className="font-bold text-slate-900">
+                          {member.name}
+                        </div>
+                        <div className="text-xs text-slate-500 flex items-center gap-1">
+                          <Mail className="w-3 h-3" /> {member.email}
+                        </div>
+                      </div>
+                    </div>
+                  </td>
+                  <td className="px-6 py-4">
+                    <span
+                      className={`inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-bold uppercase tracking-wide border ${
+                        member.role === "worker"
+                          ? "bg-emerald-50 text-emerald-700 border-emerald-100"
+                          : member.role === "officer"
+                            ? "bg-blue-50 text-blue-700 border-blue-100"
+                            : "bg-purple-50 text-purple-700 border-purple-100"
+                      }`}
+                    >
+                      {member.role === "worker" ? (
+                        <Briefcase className="w-3 h-3" />
+                      ) : (
+                        <Shield className="w-3 h-3" />
+                      )}
+                      {member.role}
+                    </span>
+                  </td>
+                  <td className="px-6 py-4">
+                    <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"}`}
+                          style={{
+                            width: `${(member.current_workload / (member.max_workload || 10)) * 100}%`,
+                          }}
+                        ></div>
+                      </div>
+                      <span className="text-xs font-mono text-slate-500">
+                        {member.current_workload}/{member.max_workload || 10}
+                      </span>
+                    </div>
+                  </td>
+                  <td className="px-6 py-4">
+                    {member.city ? (
+                      <div className="flex items-center gap-1.5 text-sm text-slate-600">
+                        <MapPin className="w-4 h-4 text-slate-400" />
+                        {member.city}
+                      </div>
+                    ) : (
+                      <span className="text-slate-400 text-xs italic">
+                        Unassigned
+                      </span>
+                    )}
+                  </td>
+                  <td className="px-6 py-4 text-right">
+                    <button
+                      onClick={() => handleDeleteMember(member.id)}
+                      className="p-2 text-slate-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors"
+                      title="Remove Member"
+                    >
+                      <Trash2 className="w-4 h-4" />
+                    </button>
+                  </td>
+                </tr>
+              ))}
+              {members.length === 0 && (
+                <tr>
+                  <td
+                    colSpan={5}
+                    className="px-6 py-12 text-center text-slate-500"
+                  >
+                    No members found in this department.
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+}

Frontend/app/admin/departments/page.tsx

@@ -0,0 +1,267 @@
+"use client";
+import { useEffect, useState } from "react";
+import { apiGet, apiPost } from "@/lib/api";
+import { Building2, Plus, Search } from "lucide-react";
+
+interface Department {
+  id: string;
+  name: string;
+  code: string;
+  description: string;
+  default_sla_hours: number;
+  is_active: boolean;
+  member_count: number;
+}
+
+export default function DepartmentsPage() {
+  const [departments, setDepartments] = useState<Department[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [showForm, setShowForm] = useState(false);
+  const [formData, setFormData] = useState({
+    name: "",
+    code: "",
+    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 handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    try {
+      await apiPost("/admin/departments", formData);
+      setShowForm(false);
+      setFormData({
+        name: "",
+        code: "",
+        description: "",
+        default_sla_hours: 48,
+      });
+      fetchDepartments();
+    } catch (error: unknown) {
+      const message =
+        error instanceof Error ? error.message : "Failed to create department";
+      alert(message);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="text-slate-600 font-medium">Loading Departments...</div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <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">
+            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"
+        >
+          <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">
+              Create New Department
+            </h2>
+          </div>
+          <form onSubmit={handleSubmit} className="p-6 space-y-6">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <div>
+                <label className="block text-sm font-medium text-slate-700 mb-1">
+                  Department Name
+                </label>
+                <input
+                  type="text"
+                  value={formData.name}
+                  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"
+                  placeholder="e.g., Public Works Department"
+                  required
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-slate-700 mb-1">
+                  Code
+                </label>
+                <input
+                  type="text"
+                  value={formData.code}
+                  onChange={(e) =>
+                    setFormData({
+                      ...formData,
+                      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"
+                  placeholder="e.g., PWD"
+                  required
+                />
+              </div>
+            </div>
+
+            <div>
+              <label
+                className="block text-sm font-medium text-slate-700 mb-1"
+                htmlFor="dept-desc"
+              >
+                Description
+              </label>
+              <textarea
+                id="dept-desc"
+                value={formData.description}
+                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"
+                rows={2}
+                placeholder="Brief description of responsibilities..."
+              />
+            </div>
+
+            <div>
+              <label
+                className="block text-sm font-medium text-slate-700 mb-1"
+                htmlFor="dept-sla"
+              >
+                Default SLA (Hours)
+              </label>
+              <input
+                id="dept-sla"
+                type="number"
+                value={formData.default_sla_hours}
+                onChange={(e) =>
+                  setFormData({
+                    ...formData,
+                    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"
+              />
+            </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"
+              >
+                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"
+              >
+                Cancel
+              </button>
+            </div>
+          </form>
+        </div>
+      )}
+
+      <div className="space-y-4">
+        {departments.length === 0 ? (
+          <div className="text-center py-16 bg-white rounded-xl border border-slate-200">
+            <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">
+              Create your first organizational unit to get started.
+            </p>
+          </div>
+        ) : (
+          <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
+            <table className="min-w-full divide-y divide-slate-200">
+              <thead className="bg-slate-50">
+                <tr>
+                  <th className="px-6 py-4 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">
+                    Department
+                  </th>
+                  <th className="px-6 py-4 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">
+                    Details
+                  </th>
+                  <th className="px-6 py-4 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">
+                    Status
+                  </th>
+                  <th className="px-6 py-4 text-right text-xs font-semibold text-slate-500 uppercase tracking-wider">
+                    Staff Count
+                  </th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-slate-200">
+                {departments.map((dept) => (
+                  <tr key={dept.id} className="hover:bg-slate-50 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">
+                          {dept.code}
+                        </div>
+                        <div className="ml-4">
+                          <div className="text-sm font-bold text-slate-900">
+                            {dept.name}
+                          </div>
+                          <div className="text-xs text-slate-500">
+                            Code: {dept.code}
+                          </div>
+                        </div>
+                      </div>
+                    </td>
+                    <td className="px-6 py-4">
+                      <p className="text-sm text-slate-600 line-clamp-1">
+                        {dept.description || "-"}
+                      </p>
+                      <p className="text-xs text-slate-400 mt-0.5">
+                        SLA: {dept.default_sla_hours}h
+                      </p>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <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-red-100 text-red-800"
+                        }`}
+                      >
+                        {dept.is_active ? "Active" : "Inactive"}
+                      </span>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                      <span className="text-slate-900 font-bold">
+                        {dept.member_count}
+                      </span>
+                      <span className="text-slate-500 ml-1">staff</span>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

Frontend/app/admin/heatmap/page.tsx

@@ -0,0 +1,102 @@
+"use client";
+import { useEffect, useState } from "react";
+import { apiGet } from "@/lib/api";
+import { Map } from "lucide-react";
+
+interface HeatmapData {
+  city: string;
+  count: number;
+  priority_avg: number;
+}
+
+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 getIntensityColor = (count: number, max: number) => {
+    const intensity = count / max;
+    if (intensity > 0.75) return "bg-red-600";
+    if (intensity > 0.5) return "bg-orange-500";
+    if (intensity > 0.25) return "bg-amber-400";
+    return "bg-emerald-500";
+  };
+
+  if (loading) {
+    return <div className="text-slate-600 font-medium">Loading Analytics...</div>;
+  }
+
+  const maxCount = Math.max(...data.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="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>
+         </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" />
+          <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) => (
+            <div
+              key={item.city}
+              className="group relative bg-white overflow-hidden rounded-xl border border-slate-200 shadow-sm hover:shadow-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>
+
+              <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>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,660 @@
+"use client";
+
+export const runtime = "edge";
+
+import { useEffect, useState } from "react";
+import { apiGet, apiPost } from "@/lib/api";
+import { useParams, useRouter } from "next/navigation";
+import {
+  ArrowLeft,
+  MapPin,
+  Clock,
+  AlertTriangle,
+  CheckCircle2,
+  User,
+  Building2,
+  Calendar,
+  Activity,
+  Layers,
+  Image as ImageIcon,
+  ThumbsUp,
+  ThumbsDown,
+  MoreHorizontal,
+  Pencil,
+  Save,
+  X,
+} from "lucide-react";
+import Link from "next/link";
+
+interface IssueDetail {
+  issue: {
+    id: string;
+    description: string;
+    state: string;
+    priority: number;
+    latitude: number;
+    longitude: number;
+    city: string;
+    locality: string;
+    full_address: string;
+    image_urls: string[];
+    annotated_urls: string[];
+    proof_image_url: string | null;
+    created_at: string;
+    confidence: number;
+    category: string;
+    validation_source: string;
+    validation_reason: string;
+    is_duplicate: boolean;
+    sla_deadline: string;
+    assigned_member_id?: string;
+  };
+  department: {
+    id: string;
+    name: string;
+  } | null;
+  worker: {
+    id: string;
+    name: string;
+    email: string;
+  } | null;
+  events: {
+    id: string;
+    type: string;
+    agent: string;
+    data: string;
+    created_at: string;
+  }[];
+  duplicates: any[];
+}
+
+interface Worker {
+  id: string;
+  name: string;
+}
+
+export default function IssueDetailPage() {
+  const { id } = useParams();
+  const router = useRouter();
+  const [data, setData] = useState<IssueDetail | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [actionLoading, setActionLoading] = useState(false);
+
+  const [workers, setWorkers] = useState<Worker[]>([]);
+  const [editingAssignment, setEditingAssignment] = useState(false);
+  const [editingPriority, setEditingPriority] = useState(false);
+  const [selectedWorker, setSelectedWorker] = useState("");
+  const [selectedPriority, setSelectedPriority] = useState(0);
+
+  const API_URL = process.env.NEXT_PUBLIC_API_URL;
+  if (!API_URL) throw new Error("Missing NEXT_PUBLIC_API_URL");
+
+  useEffect(() => {
+    if (id) {
+      fetchIssueDetails();
+      fetchWorkers();
+    }
+  }, [id]);
+
+  const fetchWorkers = async () => {
+    try {
+      const res = await apiGet<Worker[]>("/admin/members?role=worker");
+      setWorkers(res || []);
+    } catch (e) {
+      console.error("Failed to fetch workers", e);
+    }
+  };
+
+  const fetchIssueDetails = async () => {
+    try {
+      const result = await apiGet<IssueDetail>(`/admin/issues/${id}/details`);
+      setData(result);
+      if (result) {
+        setSelectedPriority(result.issue.priority || 3);
+        setSelectedWorker(result.worker?.id || "");
+      }
+    } catch (error) {
+      console.error("Failed to fetch details:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleUpdate = async (updateData: any) => {
+    setActionLoading(true);
+    try {
+      const token = localStorage.getItem("token");
+      const headers: any = { "Content-Type": "application/json" };
+      if (token) headers["Authorization"] = `Bearer ${token}`;
+
+      const res = await fetch(`${API_URL}/admin/issues/${id}`, {
+        method: "PATCH",
+        headers,
+        body: JSON.stringify(updateData),
+      });
+
+      if (!res.ok) throw new Error("Failed to update");
+
+      await fetchIssueDetails();
+      setEditingAssignment(false);
+      setEditingPriority(false);
+    } catch (e) {
+      console.error(e);
+      alert("Update failed");
+    } finally {
+      setActionLoading(false);
+    }
+  };
+
+  const handleReview = async (status: "approved" | "rejected") => {
+    if (!confirm(`Are you sure you want to ${status} this issue?`)) return;
+    setActionLoading(true);
+    try {
+      await apiPost(`/admin/issues/${id}/review`, { status });
+      fetchIssueDetails();
+    } catch (error) {
+      console.error("Review failed:", error);
+      alert("Failed to update issue status.");
+    } finally {
+      setActionLoading(false);
+    }
+  };
+
+  const handleResolutionReview = async (action: "approve" | "reject") => {
+    const note = prompt(
+      action === "reject" ? "Reason for rejection:" : "Optional approval note:",
+    );
+    if (action === "reject" && !note) return;
+
+    setActionLoading(true);
+    try {
+      const token = localStorage.getItem("token");
+      const headers: any = { "Content-Type": "application/json" };
+      if (token) headers["Authorization"] = `Bearer ${token}`;
+
+      const res = await fetch(
+        `${API_URL}/admin/issues/${id}/approve_resolution`,
+        {
+          method: "POST",
+          headers,
+          body: JSON.stringify({ action, comment: note }),
+        },
+      );
+
+      if (!res.ok) throw new Error("Status update failed");
+
+      await fetchIssueDetails();
+    } catch (error) {
+      console.error("Resolution review failed:", error);
+      alert("Failed to update resolution status.");
+    } finally {
+      setActionLoading(false);
+    }
+  };
+
+  if (loading)
+    return (
+      <div className="p-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>;
+
+  const { issue, department, worker, events } = data;
+
+  return (
+    <div className="max-w-7xl mx-auto space-y-6">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-4">
+          <Link
+            href="/admin/issues"
+            className="p-2 hover:bg-slate-100 rounded-full text-slate-500"
+          >
+            <ArrowLeft className="w-5 h-5" />
+          </Link>
+          <div>
+            <h1 className="text-2xl font-bold 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 
+                ${
+                  issue.state === "reported"
+                    ? "bg-blue-50 text-blue-700 border-blue-200"
+                    : issue.state === "resolved"
+                      ? "bg-emerald-50 text-emerald-700 border-emerald-200"
+                      : "bg-slate-50 text-slate-700 border-slate-200"
+                }`}
+              >
+                {issue.state.replace("_", " ")}
+              </span>
+            </h1>
+            <p className="text-slate-500 text-sm flex items-center gap-2 mt-1">
+              <Calendar className="w-4 h-4" />
+              Reported on {new Date(issue.created_at).toLocaleString()}
+            </p>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-3">
+          {issue.state === "pending_confirmation" && (
+            <>
+              <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"
+              >
+                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"
+              >
+                Approve & Assign
+              </button>
+            </>
+          )}
+
+          {issue.state === "pending_verification" && (
+            <>
+              <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"
+              >
+                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"
+              >
+                Verify & Approve
+              </button>
+            </>
+          )}
+
+          <button
+            className="p-2 text-slate-400 hover:text-slate-600"
+            aria-label="More options"
+          >
+            <MoreHorizontal className="w-5 h-5" />
+          </button>
+        </div>
+      </div>
+
+      <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">
+              <ImageIcon className="w-5 h-5 text-slate-400" />
+              Evidence Photos
+            </h3>
+            <div className="space-y-6">
+              <div>
+                <h4 className="text-sm font-semibold text-slate-700 mb-3">
+                  Original Report
+                </h4>
+                <div className="grid grid-cols-2 gap-4">
+                  {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"
+                    >
+                      <img
+                        src={url}
+                        alt={`Original ${idx + 1}`}
+                        className="w-full h-full object-cover"
+                      />
+                      <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+                        <a
+                          href={url}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="text-white text-xs font-medium bg-white/20 px-3 py-1 rounded-full backdrop-blur-sm"
+                        >
+                          View Full
+                        </a>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              {issue.annotated_urls && issue.annotated_urls.length > 0 && (
+                <div>
+                  <h4 className="text-sm font-semibold text-slate-700 mb-3">
+                    AI Analysis
+                  </h4>
+                  <div className="grid grid-cols-2 gap-4">
+                    {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"
+                      >
+                        <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">
+                          AI Detected
+                        </div>
+                        <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+                          <a
+                            href={url}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="text-white text-xs font-medium bg-white/20 px-3 py-1 rounded-full backdrop-blur-sm"
+                          >
+                            View Full
+                          </a>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {issue.proof_image_url && (
+                <div>
+                  <h4 className="text-sm font-semibold text-slate-700 mb-3">
+                    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">
+                      <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">
+                        Worker Proof
+                      </div>
+                      <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+                        <a
+                          href={issue.proof_image_url}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="text-white text-xs font-medium bg-white/20 px-3 py-1 rounded-full backdrop-blur-sm"
+                        >
+                          View Full
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {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">
+                  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">
+              <Activity className="w-5 h-5 text-slate-400" />
+              Analysis & Details
+            </h3>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <div className="space-y-4">
+                <div>
+                  <label className="text-xs font-semibold text-slate-500 uppercase">
+                    Category
+                  </label>
+                  <div className="text-slate-900 font-medium">
+                    {issue.category || "Uncategorized"}
+                  </div>
+                  {issue.confidence > 0 && (
+                    <div className="text-xs text-slate-500">
+                      AI Confidence: {(issue.confidence * 100).toFixed(1)}%
+                    </div>
+                  )}
+                </div>
+                <div>
+                  <label className="text-xs font-semibold text-slate-500 uppercase">
+                    Description
+                  </label>
+                  <p className="text-slate-900 text-sm leading-relaxed">
+                    {issue.description || "No description provided."}
+                  </p>
+                </div>
+              </div>
+
+              <div className="space-y-4">
+                <div>
+                  <label className="text-xs font-semibold text-slate-500 uppercase">
+                    Location
+                  </label>
+                  <div className="flex items-start gap-2 text-slate-900">
+                    <MapPin className="w-4 h-4 text-slate-400 mt-0.5 shrink-0" />
+                    <div className="text-sm">
+                      <div className="font-medium">
+                        {issue.locality
+                          ? `${issue.locality}, ${issue.city}`
+                          : issue.city}
+                      </div>
+                      {issue.full_address && (
+                        <div className="text-slate-600 text-xs mt-0.5 leading-relaxed border-l-2 border-slate-200 pl-2 my-1">
+                          {issue.full_address}
+                        </div>
+                      )}
+                      <div className="text-slate-400 text-xs font-mono mt-1">
+                        {issue.latitude.toFixed(6)},{" "}
+                        {issue.longitude.toFixed(6)}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="group">
+                  <div className="flex items-center justify-between">
+                    <label className="text-xs font-semibold text-slate-500 uppercase">
+                      Priority
+                    </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"
+                      aria-label="Edit Priority"
+                    >
+                      <Pencil className="w-3 h-3" />
+                    </button>
+                  </div>
+
+                  {editingPriority ? (
+                    <div className="flex gap-2 mt-1">
+                      <select
+                        aria-label="Select priority"
+                        value={selectedPriority}
+                        onChange={(e) =>
+                          setSelectedPriority(Number(e.target.value))
+                        }
+                        className="bg-white border rounded px-2 py-1 text-sm flex-1"
+                      >
+                        <option value="1">P1 - Critical</option>
+                        <option value="2">P2 - High</option>
+                        <option value="3">P3 - Medium</option>
+                        <option value="4">P4 - Low</option>
+                      </select>
+                      <button
+                        onClick={() =>
+                          handleUpdate({ priority: selectedPriority })
+                        }
+                        className="p-1.5 bg-blue-100 text-blue-600 rounded hover:bg-blue-200"
+                        aria-label="Save"
+                      >
+                        <Save className="w-4 h-4" />
+                      </button>
+                      <button
+                        onClick={() => setEditingPriority(false)}
+                        className="p-1.5 bg-slate-100 text-slate-600 rounded hover:bg-slate-200"
+                        aria-label="Cancel"
+                      >
+                        <X className="w-4 h-4" />
+                      </button>
+                    </div>
+                  ) : (
+                    <div
+                      className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-sm font-bold mt-1
+                     ${
+                       issue.priority === 1
+                         ? "bg-red-100 text-red-700"
+                         : issue.priority === 2
+                           ? "bg-orange-100 text-orange-700"
+                           : issue.priority === 3
+                             ? "bg-yellow-100 text-yellow-700"
+                             : "bg-green-100 text-green-700"
+                     }`}
+                    >
+                      P{issue.priority} Level
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+        </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">
+              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">
+                  <Building2 className="w-5 h-5" />
+                </div>
+                <div>
+                  <div className="text-xs text-slate-500">Department</div>
+                  <div className="text-sm font-semibold text-slate-900">
+                    {department?.name || "Not Assigned"}
+                  </div>
+                </div>
+              </div>
+
+              <div className="flex items-start gap-3 group relative">
+                <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"
+                    aria-label="Edit Assignment"
+                  >
+                    <Pencil className="w-3 h-3" />
+                  </button>
+                </div>
+                <div className="w-9 h-9 rounded-full bg-slate-100 flex items-center justify-center text-slate-500 shrink-0">
+                  <User className="w-5 h-5" />
+                </div>
+                <div className="flex-1">
+                  <div className="text-xs text-slate-500">Worker</div>
+
+                  {editingAssignment ? (
+                    <div className="flex flex-col gap-2 mt-1">
+                      <select
+                        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"
+                      >
+                        <option value="">Unassigned</option>
+                        {workers.map((w) => (
+                          <option key={w.id} value={w.id}>
+                            {w.name}
+                          </option>
+                        ))}
+                      </select>
+                      <div className="flex gap-2">
+                        <button
+                          onClick={() =>
+                            handleUpdate({
+                              assigned_member_id: selectedWorker || null,
+                            })
+                          }
+                          className="flex-1 py-1 bg-blue-600 text-white text-xs rounded hover:bg-blue-700"
+                        >
+                          Save
+                        </button>
+                        <button
+                          onClick={() => setEditingAssignment(false)}
+                          className="flex-1 py-1 bg-slate-200 text-slate-700 text-xs rounded hover:bg-slate-300"
+                        >
+                          Cancel
+                        </button>
+                      </div>
+                    </div>
+                  ) : (
+                    <>
+                      <div className="text-sm font-semibold text-slate-900">
+                        {worker?.name || "Unassigned"}
+                      </div>
+                      {worker && (
+                        <div className="text-xs text-slate-400">
+                          {worker.email}
+                        </div>
+                      )}
+                    </>
+                  )}
+                </div>
+              </div>
+
+              {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">
+                    <Clock className="w-4 h-4" />
+                    <div>
+                      <div className="text-[10px] font-bold uppercase">
+                        SLA Deadline
+                      </div>
+                      <div className="text-xs font-semibold">
+                        {new Date(issue.sla_deadline).toLocaleString()}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </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">
+              Activity Audit
+            </h3>
+
+            <div className="absolute top-0 right-0 p-4 opacity-5">
+              <Layers className="w-24 h-24" />
+            </div>
+
+            <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="flex flex-col">
+                    <span className="font-semibold text-slate-900">
+                      {event.agent || "System"}
+                    </span>
+                    <span className="text-xs text-slate-500 mb-1">
+                      {new Date(event.created_at).toLocaleString()}
+                    </span>
+                    <span className="text-slate-600 bg-slate-50 p-2 rounded border border-slate-100">
+                      {event.data}
+                    </span>
+                  </div>
+                </div>
+              ))}
+              {events.length === 0 && (
+                <div className="pl-6 text-slate-400 italic">
+                  No activity recorded.
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

Frontend/app/admin/issues/page.tsx

@@ -0,0 +1,375 @@
+"use client";
+import { useEffect, useState, useMemo } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { Search, ChevronRight, AlertCircle, ArrowUpDown } from "lucide-react";
+import Link from "next/link";
+import { useCachedFetch } from "@/hooks/useCachedFetch";
+
+interface AdminIssueListItem {
+  id: string;
+  description: string;
+  state: string;
+  priority: number;
+  city: string;
+  created_at: string;
+  department: string;
+  assigned_to: string;
+  category: string;
+  thumbnail: string;
+  locality?: string;
+}
+
+interface Meta {
+  total: number;
+  page: number;
+  limit: number;
+  pages: number;
+}
+
+interface IssuesResponse {
+  items: AdminIssueListItem[];
+  total: number;
+  page: number;
+  limit: number;
+  pages: number;
+}
+
+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>("");
+  const [sort, setSort] = useState("created_at");
+  const [order, setOrder] = useState("desc");
+
+  const [debouncedSearch, setDebouncedSearch] = useState("");
+
+  useEffect(() => {
+    const statusParam = searchParams.get("status");
+    if (statusParam) {
+      setStatus(statusParam);
+    }
+  }, [searchParams]);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedSearch(search);
+    }, 500);
+    return () => clearTimeout(handler);
+  }, [search]);
+
+  // Construct Query URL dynamically
+  const queryUrl = useMemo(() => {
+    const query = new URLSearchParams({
+      page: page.toString(),
+      limit: limit.toString(),
+      sort_by: sort,
+      sort_order: order,
+    });
+
+    if (debouncedSearch) query.append("search", debouncedSearch);
+    if (status) query.append("status", status);
+    if (priority) query.append("priority", priority);
+
+    return `/admin/issues?${query.toString()}`;
+  }, [page, limit, sort, order, debouncedSearch, status, priority]);
+
+  const { data: issuesData, loading } = useCachedFetch<IssuesResponse>(queryUrl);
+
+  const issues = issuesData?.items || [];
+  const meta: Meta = {
+    total: issuesData?.total || 0,
+    page: issuesData?.page || 1,
+    limit: issuesData?.limit || 10,
+    pages: issuesData?.pages || 0,
+  };
+
+  const handlePageChange = (newPage: number) => {
+    if (newPage > 0 && newPage <= meta.pages) {
+      setPage(newPage);
+    }
+  };
+
+  const getStateBadge = (state: string) => {
+    const styles: Record<string, string> = {
+      reported: "bg-blue-100 text-blue-700 border-blue-200",
+      assigned: "bg-purple-100 text-purple-700 border-purple-200",
+      in_progress: "bg-amber-100 text-amber-700 border-amber-200",
+      pending_verification: "bg-orange-100 text-orange-700 border-orange-200",
+      resolved: "bg-emerald-100 text-emerald-700 border-emerald-200",
+      closed: "bg-slate-100 text-slate-600 border-slate-200",
+      escalated: "bg-red-100 text-red-700 border-red-200 animate-pulse",
+      rejected: "bg-gray-100 text-gray-500 border-gray-200 line-through",
+      verified: "bg-indigo-100 text-indigo-700 border-indigo-200",
+    };
+    return (
+      <span
+        className={`px-2.5 py-0.5 rounded-full text-xs font-semibold border ${
+          styles[state] || "bg-gray-100 text-gray-800"
+        }`}
+      >
+        {state.replace("_", " ").toUpperCase()}
+      </span>
+    );
+  };
+
+  return (
+    <div className="space-y-6">
+      <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">
+            Issue Management
+          </h1>
+          <p className="text-slate-500 text-sm">
+            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"
+          >
+            <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">
+            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="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" />
+            <input
+              type="text"
+              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"
+            />
+          </div>
+
+          <select
+            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"
+          >
+            <option value="">All Statuses</option>
+            <option value="reported">Reported</option>
+            <option value="verified">Verified</option>
+            <option value="assigned">Assigned</option>
+            <option value="in_progress">In Progress</option>
+            <option value="pending_verification">Pending Verification</option>
+            <option value="resolved">Resolved</option>
+            <option value="closed">Closed</option>
+            <option value="escalated">Escalated</option>
+          </select>
+
+          <select
+            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"
+          >
+            <option value="">All Priorities</option>
+            <option value="1">Critical (P1)</option>
+            <option value="2">High (P2)</option>
+            <option value="3">Medium (P3)</option>
+            <option value="4">Low (P4)</option>
+          </select>
+        </div>
+
+        {loading ? (
+          <div className="h-64 flex items-center justify-center text-slate-500">
+            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mr-2"></div>
+            Loading issues...
+          </div>
+        ) : (
+          <div className="overflow-x-auto rounded-xl border border-slate-200/50">
+            <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">
+                  <th className="px-4 py-3 font-semibold">Issue</th>
+                  <th className="px-4 py-3 font-semibold">Location</th>
+                  <th className="px-4 py-3 font-semibold">
+                    <button
+                      onClick={() => {
+                        setSort("priority");
+                        setOrder(order === "asc" ? "desc" : "asc");
+                      }}
+                      className="flex items-center gap-1 hover:text-slate-800 transition-colors"
+                    >
+                      Priority <ArrowUpDown className="w-3 h-3" />
+                    </button>
+                  </th>
+                  <th className="px-4 py-3 font-semibold">Status</th>
+                  <th className="px-4 py-3 font-semibold">Assigned To</th>
+                  <th className="px-4 py-3 font-semibold">
+                    <button
+                      onClick={() => {
+                        setSort("created_at");
+                        setOrder(order === "asc" ? "desc" : "asc");
+                      }}
+                      className="flex items-center gap-1 hover:text-slate-800 transition-colors"
+                    >
+                      Date <ArrowUpDown className="w-3 h-3" />
+                    </button>
+                  </th>
+                  <th className="px-4 py-3 font-semibold text-right">Action</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-slate-100">
+                {issues.length === 0 ? (
+                  <tr>
+                    <td
+                      colSpan={7}
+                      className="px-4 py-8 text-center text-slate-500"
+                    >
+                      No issues found matching your filters.
+                    </td>
+                  </tr>
+                ) : (
+                  issues.map((issue) => (
+                    <tr
+                      key={issue.id}
+                      className="group hover:bg-blue-50/30 transition-colors duration-200"
+                    >
+                      <td className="px-4 py-3">
+                        <div className="flex items-center gap-3">
+                          <div className="h-10 w-10 rounded-lg bg-slate-100 overflow-hidden shrink-0 relative border border-slate-200">
+                            {issue.thumbnail ? (
+                              <img
+                                src={issue.thumbnail}
+                                alt=""
+                                className="h-full w-full object-cover"
+                              />
+                            ) : (
+                              <div className="h-full w-full flex items-center justify-center text-slate-400">
+                                <AlertCircle className="w-5 h-5" />
+                              </div>
+                            )}
+                          </div>
+                          <div>
+                            <div className="text-sm font-semibold text-slate-900 truncate max-w-50 font-display">
+                              {issue.category || "Uncategorized Issue"}
+                            </div>
+                            <div className="text-xs text-slate-500 truncate max-w-50 font-sans">
+                              {issue.description || "No description provided"}
+                            </div>
+                          </div>
+                        </div>
+                      </td>
+                      <td className="px-4 py-3">
+                        <div className="flex flex-col">
+                          <span className="text-sm text-slate-700 font-medium">
+                            {issue.city || "Unknown"}
+                          </span>
+                          <span className="text-xs text-slate-500 truncate max-w-37.5">
+                            {issue.locality || ""}
+                          </span>
+                        </div>
+                      </td>
+                      <td className="px-4 py-3">
+                        <span
+                          className={`inline-flex items-center justify-center h-6 w-6 rounded-full text-xs font-bold border ${
+                            issue.priority === 1
+                              ? "bg-red-50 text-red-600 border-red-100"
+                              : issue.priority === 2
+                                ? "bg-orange-50 text-orange-600 border-orange-100"
+                                : issue.priority === 3
+                                  ? "bg-amber-50 text-amber-600 border-amber-100"
+                                  : "bg-green-50 text-green-600 border-green-100"
+                          }`}
+                        >
+                          P{issue.priority}
+                        </span>
+                      </td>
+                      <td className="px-4 py-3">
+                        {getStateBadge(issue.state)}
+                      </td>
+                      <td className="px-4 py-3 text-sm text-slate-600">
+                        {issue.assigned_to ? (
+                          <div className="flex items-center gap-2">
+                            <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>
+                          </div>
+                        ) : (
+                          <span className="text-slate-400 italic text-xs">
+                            Unassigned
+                          </span>
+                        )}
+                        {issue.department && (
+                          <div className="text-[10px] text-slate-400 mt-0.5 font-mono">
+                            {issue.department}
+                          </div>
+                        )}
+                      </td>
+                      <td className="px-4 py-3 text-sm text-slate-600">
+                        <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",
+                            minute: "2-digit",
+                          })}
+                        </div>
+                      </td>
+                      <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"
+                        >
+                          View
+                          <ChevronRight className="w-3.5 h-3.5" />
+                        </Link>
+                      </td>
+                    </tr>
+                  ))
+                )}
+              </tbody>
+            </table>
+          </div>
+        )}
+
+        <div className="flex items-center justify-between border-t border-slate-200/60 pt-4 mt-4">
+          <div className="text-sm text-slate-500">
+            Showing{" "}
+            <span className="font-semibold text-slate-900">
+              {(meta.page - 1) * meta.limit + 1}
+            </span>{" "}
+            to{" "}
+            <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
+          </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"
+            >
+              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"
+            >
+              Next
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

Frontend/app/admin/layout.tsx

@@ -0,0 +1,52 @@
+"use client";
+import { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { useAuth } from "@/components/AuthProvider";
+import DashboardSidebar from "@/components/DashboardSidebar";
+import DashboardHeader from "@/components/DashboardHeader";
+
+export default function AdminLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const { role, loading, signOut } = useAuth();
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false); // Closed by default
+  const router = useRouter();
+
+  useEffect(() => {
+    if (!loading && role !== "admin") {
+      router.push("/signin");
+    }
+  }, [loading, role, router]);
+
+  if (loading) return null;
+
+  return (
+    <div className="flex min-h-screen bg-urban-bg font-sans overflow-hidden relative">
+      <DashboardSidebar
+        role="admin"
+        mobileOpen={mobileOpen}
+        setMobileOpen={setMobileOpen}
+        desktopOpen={isSidebarOpen}
+        onLogout={signOut}
+      />
+
+      {/* Ambient Background - Global for Admin */}
+      <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-purple-500/5 rounded-full blur-[80px]"></div>
+      </div>
+
+      <div className="flex-1 flex flex-col min-w-0 transition-all duration-300 relative z-10 h-screen overflow-hidden">
+        <DashboardHeader 
+            setMobileOpen={setMobileOpen} 
+            toggleSidebar={() => setIsSidebarOpen(!isSidebarOpen)} 
+            title="Admin Console" 
+        />
+        <main className="flex-1 overflow-x-hidden overflow-y-auto">{children}</main>
+      </div>
+    </div>
+  );
+}

Frontend/app/admin/page.tsx

@@ -0,0 +1,269 @@
+"use client"
+import Link from "next/link";
+import { useCachedFetch } from "@/hooks/useCachedFetch";
+import {
+  Building2,
+  Users,
+  ClipboardList,
+  Clock,
+  CheckCircle2,
+  ClipboardCheck,
+} from "lucide-react";
+import { Skeleton } from "@/components/ui/Skeleton";
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  PieChart,
+  Pie,
+  Cell,
+  Legend,
+} from "recharts";
+
+interface Stats {
+  departments: number;
+  members: number;
+  total_issues: number;
+  pending_issues: number;
+  resolved_issues: number;
+  verification_needed: number;
+  issues_by_category: { name: string; value: number }[];
+  issues_activity: { name: string; reported: number; resolved: number }[];
+}
+
+export default function AdminDashboard() {
+  const { data: stats, loading } = useCachedFetch<Stats>("/admin/stats");
+
+  const COLORS = [
+    "#3B82F6",
+    "#10B981",
+    "#F59E0B",
+    "#EF4444",
+    "#8B5CF6",
+    "#EC4899",
+  ];
+
+  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">
+          {Array.from({ length: 6 }).map((_, i) => (
+            <Skeleton key={i} className="h-32 rounded-2xl" />
+          ))}
+        </div>
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          <Skeleton className="h-80 lg:col-span-2 rounded-2xl" />
+          <Skeleton className="h-80 rounded-2xl" />
+        </div>
+      </div>
+    );
+  }
+
+  const hasChartData =
+    stats?.issues_by_category && stats.issues_by_category.length > 0;
+  const hasActivityData =
+    stats?.issues_activity && stats.issues_activity.length > 0;
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <h2 className="text-2xl font-bold text-slate-900 tracking-tight">
+          Overview
+        </h2>
+      </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" />}
+        />
+        <StatCard
+          title="Total Staff"
+          value={stats?.members || 0}
+          icon={<Users className="w-5 h-5 text-purple-600" />}
+        />
+        <StatCard
+          title="Total Issues"
+          value={stats?.total_issues || 0}
+          icon={<ClipboardList className="w-5 h-5 text-slate-600" />}
+        />
+        <StatCard
+          title="Pending"
+          value={stats?.pending_issues || 0}
+          icon={<Clock className="w-5 h-5 text-amber-600" />}
+          alert={true}
+        />
+        <Link
+          href="/admin/issues?status=pending_verification"
+          className="block transform transition-transform hover:scale-105"
+        >
+          <StatCard
+            title="Needs Review"
+            value={stats?.verification_needed || 0}
+            icon={<ClipboardCheck className="w-5 h-5 text-indigo-600" />}
+            alert={(stats?.verification_needed || 0) > 0}
+          />
+        </Link>
+        <StatCard
+          title="Total Resolved"
+          value={stats?.resolved_issues || 0}
+          icon={<CheckCircle2 className="w-5 h-5 text-emerald-600" />}
+        />
+      </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>
+            Weekly Activity
+          </h3>
+          {hasActivityData ? (
+            <div className="h-80 w-full">
+              <ResponsiveContainer width="100%" height="100%">
+                <BarChart
+                  data={stats?.issues_activity || []}
+                  margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
+                >
+                  <CartesianGrid
+                    strokeDasharray="3 3"
+                    vertical={false}
+                    stroke="#E2E8F0"
+                  />
+                  <XAxis
+                    dataKey="name"
+                    axisLine={false}
+                    tickLine={false}
+                    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)' }}
+                  />
+                  <Tooltip
+                    cursor={{ fill: "#F1F5F9" }}
+                    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)',
+                    }}
+                  />
+                  <Legend iconType="circle" wrapperStyle={{ fontFamily: 'var(--font-fira-sans)' }} />
+                  <Bar
+                    dataKey="reported"
+                    name="Reported"
+                    fill="#3B82F6"
+                    radius={[4, 4, 0, 0]}
+                    barSize={20}
+                  />
+                  <Bar
+                    dataKey="resolved"
+                    name="Resolved"
+                    fill="#10B981"
+                    radius={[4, 4, 0, 0]}
+                    barSize={20}
+                  />
+                </BarChart>
+              </ResponsiveContainer>
+            </div>
+          ) : (
+            <div className="h-80 flex items-center justify-center text-slate-400">
+              No activity data available yet.
+            </div>
+          )}
+        </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>
+            Issues by Category
+          </h3>
+          {hasChartData ? (
+            <div className="h-80 w-full">
+              <ResponsiveContainer width="100%" height="100%">
+                <PieChart>
+                  <Pie
+                    data={stats?.issues_by_category}
+                    cx="50%"
+                    cy="50%"
+                    innerRadius={60}
+                    outerRadius={80}
+                    fill="#8884d8"
+                    paddingAngle={5}
+                    dataKey="value"
+                  >
+                    {stats?.issues_by_category?.map((entry, index) => (
+                      <Cell
+                        key={`cell-${index}`}
+                        fill={COLORS[index % COLORS.length]}
+                      />
+                    ))}
+                  </Pie>
+                  <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)',
+                    }}
+                  />
+                  <Legend verticalAlign="bottom" height={36} wrapperStyle={{ fontFamily: 'var(--font-fira-sans)' }} />
+                </PieChart>
+              </ResponsiveContainer>
+            </div>
+          ) : (
+            <div className="h-80 flex items-center justify-center text-slate-400">
+              No category data available yet.
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function StatCard({
+  title,
+  value,
+  icon,
+  alert = false,
+}: {
+  title: string;
+  value: number;
+  icon: React.ReactNode;
+  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="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}
+        </div>
+      </div>
+      <div>
+        <h3 className="text-slate-500 text-xs font-bold uppercase tracking-wider font-mono">
+          {title}
+        </h3>
+        <p
+          className={`text-3xl font-extrabold mt-2 tracking-tight ${
+            alert ? "text-amber-600" : "text-slate-900"
+          }`}
+        >
+          {value}
+        </p>
+      </div>
+    </div>
+  );
+}

Frontend/app/admin/review/page.tsx

@@ -0,0 +1,121 @@
+"use client";
+import { useEffect, useState } from "react";
+import { apiGet, apiPost } from "@/lib/api";
+import { CheckCircle2, XCircle } from "lucide-react";
+
+interface Issue {
+  id: string;
+  description: string;
+  state: string;
+  city: string;
+  locality: string;
+  created_at: string;
+  full_address: string;
+  images: { file_path: string; annotated_path: string }[];
+  priority: number;
+}
+
+export default function ManualReviewPage() {
+  const [issues, setIssues] = useState<Issue[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetchPendingIssues();
+  }, []);
+
+  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 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));
+      alert(data.message);
+    } catch (error) {
+      console.error("Review failed", error);
+      alert("Failed to review issue");
+    }
+  };
+
+  if (loading) {
+    return <div className="text-slate-600 font-medium">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>
+
+      {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>
+          <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">
+              <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>
+                  )}
+              </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 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>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

Frontend/app/admin/workers/page.tsx

@@ -0,0 +1,371 @@
+"use client";
+import { useMemo, useState } from "react";
+import { apiGet, apiPost } from "@/lib/api";
+import { useCachedFetch } from "@/hooks/useCachedFetch";
+import {
+  HardHat,
+  Plus,
+  Search,
+  Filter,
+  CheckCircle2,
+  AlertTriangle,
+  TrendingUp,
+} from "lucide-react";
+import { Skeleton } from "@/components/ui/Skeleton";
+
+interface Department {
+  id: string;
+  name: string;
+  code: string;
+}
+
+interface Worker {
+  id: string;
+  name: string;
+  email: string;
+  role: string;
+  department_id: string;
+  is_active: boolean;
+  current_workload: number;
+  max_workload: number;
+
+  resolved_total?: number;
+  efficiency?: number;
+}
+
+interface WorkerPerformance {
+  id: string;
+  resolved_total: number;
+  efficiency: number;
+}
+
+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 [showForm, setShowForm] = useState(false);
+  const [formData, setFormData] = useState({
+    name: "",
+    email: "",
+    password: "",
+    department_id: "",
+    role: "worker",
+  });
+
+  const [search, setSearch] = useState("");
+
+  const departments = departmentsData || [];
+  
+  const workers = useMemo(() => {
+    if (!workersData) return [];
+    const perfMap = new Map((perfData || []).map(p => [p.id, p]));
+    
+    return workersData.map((w) => {
+      const perf = perfMap.get(w.id);
+      return {
+        ...w,
+        resolved_total: perf?.resolved_total || 0,
+        efficiency: perf?.efficiency || 0,
+      };
+    });
+  }, [workersData, perfData]);
+
+  const loading = deptLoading || workersLoading || perfLoading;
+
+  const refreshAll = () => {
+    revalidateDept();
+    revalidateWorkers();
+    revalidatePerf();
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    try {
+      await apiPost("/admin/members", formData);
+      setShowForm(false);
+      setFormData({
+        name: "",
+        email: "",
+        password: "",
+        department_id: "",
+        role: "worker",
+      });
+      refreshAll();
+    } catch (error: unknown) {
+      const message =
+        error instanceof Error ? error.message : "Failed to create worker";
+      alert(message);
+    }
+  };
+
+  const getDepartmentName = (deptId: string) => {
+    const dept = departments.find((d) => d.id === deptId);
+    return dept ? dept.name : "Unassigned";
+  };
+
+  if (loading) {
+    return (
+      <div className="space-y-6">
+        <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" />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  const filteredWorkers = workers
+    .filter((w) => w.role !== "admin")
+    .filter(
+      (w) =>
+        search === "" ||
+        w.name.toLowerCase().includes(search.toLowerCase()) ||
+        w.email.toLowerCase().includes(search.toLowerCase()),
+    );
+
+  return (
+    <div className="space-y-6">
+      <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">
+            Workforce Management
+          </h2>
+          <p className="text-sm text-slate-500">
+            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"
+        >
+          <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">
+              New Worker Enrollment
+            </h2>
+          </div>
+          <form onSubmit={handleSubmit} className="p-6 space-y-6">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <div>
+                <label className="block text-sm font-medium text-slate-700 mb-1">
+                  Full Name
+                </label>
+                <input
+                  type="text"
+                  value={formData.name}
+                  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"
+                  placeholder="e.g. John Doe"
+                  required
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-slate-700 mb-1">
+                  Email Address
+                </label>
+                <input
+                  type="email"
+                  value={formData.email}
+                  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"
+                  placeholder="worker@city.gov"
+                  required
+                />
+              </div>
+            </div>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <div>
+                <label className="block text-sm font-medium text-slate-700 mb-1">
+                  Set Password
+                </label>
+                <input
+                  type="password"
+                  value={formData.password}
+                  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"
+                  required
+                  minLength={8}
+                  placeholder="••••••••"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-slate-700 mb-1">
+                  Assign Department
+                </label>
+                <select
+                  title="department"
+                  value={formData.department_id}
+                  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"
+                  required
+                >
+                  <option value="">Select Department...</option>
+                  {departments.map((d) => (
+                    <option key={d.id} value={d.id}>
+                      {d.name}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            </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"
+              >
+                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"
+              >
+                Cancel
+              </button>
+            </div>
+          </form>
+        </div>
+      )}
+
+      <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" />
+          <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"
+          />
+        </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">
+          <Filter className="w-4 h-4" /> Filter
+        </button>
+      </div>
+
+      <div className="space-y-4">
+        <div className="flex justify-between items-center px-1">
+          <p className="text-sm font-medium text-slate-500">
+            Active Workforce ({filteredWorkers.length})
+          </p>
+        </div>
+
+        {filteredWorkers.length === 0 ? (
+          <div className="text-center py-16 bg-white rounded-xl border border-slate-200">
+            <HardHat className="w-12 h-12 mx-auto text-slate-300" />
+            <p className="text-slate-500 mt-2">No field workers found.</p>
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {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"
+              >
+                <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">
+                      {worker.name.charAt(0)}
+                    </div>
+                    <div>
+                      <h3 className="font-bold text-slate-900 leading-tight">
+                        {worker.name}
+                      </h3>
+                      <p className="text-xs text-slate-500">{worker.email}</p>
+                    </div>
+                  </div>
+                  {!worker.is_active && (
+                    <span className="px-2 py-0.5 bg-red-100 text-red-700 text-xs font-bold rounded">
+                      INACTIVE
+                    </span>
+                  )}
+                </div>
+
+                <div className="py-3 border-t border-slate-100 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">
+                      {getDepartmentName(worker.department_id)}
+                    </span>
+                  </div>
+                  <div className="flex justify-between text-sm">
+                    <span className="text-slate-500">Efficiency</span>
+                    <span className="font-medium text-slate-900 flex items-center gap-1">
+                      {worker.efficiency}{" "}
+                      <span className="text-xs text-slate-400">/week</span>
+                      {worker.efficiency && worker.efficiency > 5 && (
+                        <TrendingUp className="w-3 h-3 text-green-500" />
+                      )}
+                    </span>
+                  </div>
+                  <div className="flex justify-between text-sm">
+                    <span className="text-slate-500">Total Resolved</span>
+                    <span className="font-medium text-slate-900 flex items-center gap-1">
+                      <CheckCircle2 className="w-3 h-3 text-green-500" />
+                      {worker.resolved_total}
+                    </span>
+                  </div>
+                </div>
+
+                <div>
+                  <div className="flex justify-between text-xs mb-1">
+                    <span className="text-slate-500 font-medium">
+                      Current Workload
+                    </span>
+                    <span className="text-slate-900 font-bold">
+                      {worker.current_workload} / {worker.max_workload}
+                    </span>
+                  </div>
+                  <div className="w-full bg-slate-100 rounded-full h-2 overflow-hidden">
+                    <div
+                      className={`h-full rounded-full transition-all duration-500 ${
+                        worker.current_workload >= worker.max_workload
+                          ? "bg-red-500"
+                          : worker.current_workload > worker.max_workload * 0.7
+                            ? "bg-amber-500"
+                            : "bg-blue-600"
+                      }`}
+                      style={{
+                        width: `${Math.min(
+                          (worker.current_workload /
+                            (worker.max_workload || 10)) *
+                            100,
+                          100,
+                        )}%`,
+                      }}
+                    ></div>
+                  </div>
+                  {worker.current_workload >= worker.max_workload && (
+                    <div className="mt-2 flex items-center gap-1 text-xs text-red-600 font-medium">
+                      <AlertTriangle className="w-3 h-3" /> Overloaded
+                    </div>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

Frontend/app/auth/callback/page.tsx

@@ -0,0 +1,43 @@
+"use client";
+import { useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { useAuth } from "@/components/AuthProvider";
+import { Loader2 } from "lucide-react";
+
+export default function AuthCallbackPage() {
+  const router = useRouter();
+  const { session, loading } = useAuth();
+
+  useEffect(() => {
+    if (!loading) {
+      if (session) {
+        const user = session.user;
+
+        const storedUser = localStorage.getItem("user");
+        if (storedUser) {
+          const parsed = JSON.parse(storedUser);
+          if (parsed.role === "admin") router.push("/admin");
+          else if (parsed.role === "worker") router.push("/worker");
+          else router.push("/user");
+        } else {
+          router.push("/user");
+        }
+      } else {
+        const timer = setTimeout(() => {
+          router.push("/signin?error=callback_timeout");
+        }, 3000);
+        return () => clearTimeout(timer);
+      }
+    }
+  }, [session, loading, router]);
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-slate-50">
+      <div className="text-center">
+        <Loader2 className="w-10 h-10 animate-spin text-blue-600 mx-auto mb-4" />
+        <h2 className="text-xl font-bold text-slate-800">Authenticating...</h2>
+        <p className="text-slate-500">Please wait while we log you in.</p>
+      </div>
+    </div>
+  );
+}

Frontend/app/globals.css

@@ -1,26 +1,66 @@
 @import "tailwindcss";
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
+@theme {
+  --color-urban-primary: #3B82F6;
+  --color-urban-secondary: #60A5FA;
+  --color-urban-cta: #F97316;
+  --color-urban-bg: #F8FAFC;
+  --color-urban-text: #1E293B;
 
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
+  --color-slate-50: #f8fafc;
+  --color-slate-100: #f1f5f9;
+  --color-slate-200: #e2e8f0;
+  --color-slate-300: #cbd5e1;
+  --color-slate-400: #94a3b8;
+  --color-slate-500: #64748b;
+  --color-slate-600: #475569;
+  --color-slate-700: #334155;
+  --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);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
+:root {
+  --background: var(--color-urban-bg);
+  --foreground: var(--color-urban-text);
+  --primary: var(--color-urban-primary);
+  --secondary: var(--color-urban-secondary);
+  --cta: var(--color-urban-cta);
 }
 
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: var(--font-fira-sans);
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-fira-code);
+}
+
+input,
+select,
+textarea {
+  border-width: 1px;
+  border-color: var(--color-slate-300);
+  outline: none;
+  font-family: var(--font-fira-sans);
+  border-radius: 8px;
+  padding: 12px 16px;
+  transition: border-color 0.2s;
+}
+
+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% */
 }

Frontend/app/layout.tsx

@@ -1,22 +1,28 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import { Fira_Sans, Fira_Code } from "next/font/google";
 import "./globals.css";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
+const firaSans = Fira_Sans({
   subsets: ["latin"],
+  weight: ["300", "400", "500", "600", "700"],
+  variable: "--font-fira-sans",
+  display: "swap",
 });
 
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
+const firaCode = Fira_Code({
   subsets: ["latin"],
+  weight: ["400", "500", "600", "700"],
+  variable: "--font-fira-code",
+  display: "swap",
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "UrbanLens - City Issue Reporter",
+  description: "Smart city issue tracking and resolution dashboard",
 };
 
+import { AuthProvider } from "@/components/AuthProvider";
+
 export default function RootLayout({
   children,
 }: Readonly<{
@@ -24,10 +30,8 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-        {children}
+      <body className={`${firaSans.variable} ${firaCode.variable} antialiased font-sans`}>
+        <AuthProvider>{children}</AuthProvider>
       </body>
     </html>
   );

Frontend/app/page.tsx

@@ -1,65 +1,245 @@
-import Image from "next/image";
+"use client";
+import Link from "next/link";
+import { 
+  Smartphone, 
+  Zap, 
+  Shield, 
+  ChevronRight, 
+  Radio, 
+  Activity, 
+  MapPin, 
+  CheckCircle2,
+  Building2,
+  Users,
+  LayoutDashboard,
+  LogOut
+} from "lucide-react";
+import { useAuth } from "@/components/AuthProvider";
+
+export default function LandingPage() {
+  const { user, role, signOut } = useAuth();
+
+  const getDashboardLink = () => {
+    if (role === 'admin') return '/admin';
+    if (role === 'worker') return '/worker';
+    return '/user';
+  };
 
-export default function Home() {
   return (
-    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the page.tsx file.
-          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
+    <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>
+
+      {/* Navigation */}
+      <nav className="fixed top-0 w-full z-50 border-b border-slate-200 bg-white/80 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>
+              </div>
+              <span className="text-xl font-bold tracking-tight text-slate-900">
+                Urban<span className="text-blue-600">Lens</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>
+            </div>
+
+            <div className="flex gap-4 items-center">
+              {user ? (
+                <>
+                  <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" />
+                  </button>
+                  <Link
+                    href={getDashboardLink()}
+                    className="group relative px-6 py-2.5 bg-slate-900 hover:bg-slate-800 text-white font-semibold rounded-lg transition-all shadow-lg hover:shadow-xl hover:-translate-y-0.5 flex items-center gap-2"
+                  >
+                    <LayoutDashboard className="w-4 h-4" />
+                    <span>Go to Dashboard</span>
+                  </Link>
+                </>
+              ) : (
+                <>
+                  <Link
+                    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
+                  </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"
+                  >
+                    <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">
+                      Get Started <ChevronRight className="w-4 h-4" />
+                    </span>
+                  </Link>
+                </>
+              )}
+            </div>
+          </div>
         </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
+      </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>
+
+            <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>
+
+            <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>
+
+            <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>
+
+            {/* 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>
+          </div>
+        </div>
+
+        {/* Features Grid */}
+        <div id="features" className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-32">
+          <div className="text-center mb-16">
+            <h2 className="text-3xl 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.
+            </p>
+          </div>
+          
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+            <FeatureCard
+              icon={<Radio className="w-8 h-8 text-blue-600" />}
+              title="Geo-Spatial AI"
+              desc="Automatically detects duplicate reports within a 50m radius using smart cluster analysis and GPS verification."
+              colorClass="bg-blue-50 group-hover:bg-blue-100/50"
             />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
+            <FeatureCard
+              icon={<Zap className="w-8 h-8 text-amber-500" />}
+              title="Vision Agent"
+              desc="Computer vision algorithms analyze uploaded photos to identify pothole severity, debris types, and hazards instantly."
+              colorClass="bg-amber-50 group-hover:bg-amber-100/50"
+            />
+            <FeatureCard
+              icon={<Shield className="w-8 h-8 text-emerald-600" />}
+              title="End-to-End Encryption"
+              desc="Citizen data is AES-256 encrypted at rest. Zero-knowledge protocols ensure maximum privacy."
+              colorClass="bg-emerald-50 group-hover:bg-emerald-100/50"
+            />
+          </div>
         </div>
       </main>
+
+      <footer className="border-t border-slate-200 bg-white 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">URBANLENS SYSTEMS</span>
+          </div>
+          <p className="text-slate-500 text-sm">
+            © 2026 Dept. of Public Works. Secure. Efficient. Transparent.
+          </p>
+        </div>
+      </footer>
+    </div>
+  );
+}
+
+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">
+      {children}
+    </Link>
+  )
+}
+
+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>
+      </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
+}: {
+  icon: React.ReactNode;
+  title: string;
+  desc: string;
+  colorClass: string;
+}) {
+  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`}>
+        {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>
     </div>
   );
 }

Frontend/app/signin/page.tsx

@@ -0,0 +1,232 @@
+"use client";
+import { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+import { createClient } from "@supabase/supabase-js";
+import { useAuth } from "@/components/AuthProvider";
+import { HardHat, ShieldCheck, AlertTriangle } from "lucide-react";
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL;
+if (!API_URL) throw new Error("Missing NEXT_PUBLIC_API_URL");
+const SUPABASE_URL = process.env.NEXT_PUBLIC_SUPABASE_URL || "";
+const SUPABASE_ANON_KEY = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY || "";
+
+const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
+
+type LoginType = "staff" | "user";
+type StaffRole = "admin" | "worker";
+
+export default function SignInPage() {
+  const { role } = useAuth();
+  const router = useRouter();
+
+  const [loginType, setLoginType] = useState<LoginType>("user");
+  const [staffRole, setStaffRole] = useState<StaffRole>("worker");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (role) {
+      if (role === "admin") router.replace("/admin");
+      else if (role === "worker") router.replace("/worker");
+      else router.replace("/user");
+    }
+  }, [role, router]);
+
+  const handleStaffLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError("");
+
+    try {
+      const res = await fetch(`${API_URL}/admin/login`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email, password, expected_role: staffRole }),
+      });
+
+      if (!res.ok) {
+        const data = await res.json();
+        throw new Error(data.detail || "Login failed");
+      }
+
+      const data = await res.json();
+      localStorage.setItem("token", data.access_token);
+      localStorage.setItem("user", JSON.stringify(data.user));
+
+      window.location.reload();
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : "Login failed";
+      setError(message);
+      setLoading(false);
+    }
+  };
+
+  const handleGoogleLogin = async () => {
+    setLoading(true);
+    try {
+      await supabase.auth.signInWithOAuth({
+        provider: "google",
+        options: {
+          redirectTo: `${window.location.origin}/auth/callback?next=/user`,
+        },
+      });
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : "Login failed";
+      setError(message);
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex flex-col bg-slate-50">
+      <nav className="px-8 py-6 bg-white border-b border-slate-200">
+        <div className="max-w-7xl mx-auto flex justify-between items-center">
+          <Link href="/" className="text-2xl font-bold text-slate-800">
+            CityIssue
+          </Link>
+          <span className="text-sm text-slate-500 font-medium">
+            Secure Login
+          </span>
+        </div>
+      </nav>
+
+      <div className="flex-1 flex items-center justify-center p-4">
+        <div className="w-full max-w-md bg-white rounded-xl shadow-lg border border-slate-100 p-8">
+          <div className="text-center mb-8">
+            <h2 className="text-2xl font-bold text-slate-800">Welcome Back</h2>
+            <p className="text-slate-500 mt-2">Access the municipal portal</p>
+          </div>
+
+          <div className="flex bg-slate-100 p-1 rounded-lg mb-8">
+            <button
+              onClick={() => setLoginType("user")}
+              className={`flex-1 py-2 text-sm font-semibold rounded-md transition-all ${
+                loginType === "user"
+                  ? "bg-white text-slate-900 shadow-sm"
+                  : "text-slate-500 hover:text-slate-700"
+              }`}
+            >
+              Citizen
+            </button>
+            <button
+              onClick={() => setLoginType("staff")}
+              className={`flex-1 py-2 text-sm font-semibold rounded-md transition-all ${
+                loginType === "staff"
+                  ? "bg-white text-slate-900 shadow-sm"
+                  : "text-slate-500 hover:text-slate-700"
+              }`}
+            >
+              Staff
+            </button>
+          </div>
+
+          {error && (
+            <div className="mb-6 p-4 bg-red-50 border border-red-100 rounded-lg text-red-600 text-sm font-medium flex items-center gap-2">
+              <AlertTriangle className="w-5 h-5" />
+              {error}
+            </div>
+          )}
+
+          {loginType === "user" ? (
+            <div className="space-y-4">
+              <button
+                onClick={handleGoogleLogin}
+                disabled={loading}
+                className="w-full py-3 px-4 bg-white border border-slate-300 hover:bg-slate-50 text-slate-700 font-semibold rounded-lg flex items-center justify-center gap-3 transition"
+              >
+                <img
+                  src="https://www.google.com/favicon.ico"
+                  alt="Google"
+                  className="w-5 h-5"
+                />
+                {loading ? "Connecting..." : "Continue with Google"}
+              </button>
+              <p className="text-xs text-slate-500 text-center mt-4">
+                Secure authentication via Supabase. We do not store your Google
+                password.
+              </p>
+            </div>
+          ) : (
+            <form onSubmit={handleStaffLogin} className="space-y-5">
+              <div className="grid grid-cols-2 gap-3">
+                <button
+                  type="button"
+                  onClick={() => setStaffRole("worker")}
+                  className={`py-2 px-3 text-sm font-medium rounded-lg border transition-all flex items-center justify-center gap-2 ${
+                    staffRole === "worker"
+                      ? "bg-blue-50 border-blue-200 text-blue-700"
+                      : "bg-white border-slate-200 text-slate-500 hover:border-slate-300"
+                  }`}
+                >
+                  <HardHat className="w-4 h-4" /> Field Worker
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setStaffRole("admin")}
+                  className={`py-2 px-3 text-sm font-medium rounded-lg border transition-all flex items-center justify-center gap-2 ${
+                    staffRole === "admin"
+                      ? "bg-purple-50 border-purple-200 text-purple-700"
+                      : "bg-white border-slate-200 text-slate-500 hover:border-slate-300"
+                  }`}
+                >
+                  <ShieldCheck className="w-4 h-4" /> Administrator
+                </button>
+              </div>
+
+              <div>
+                <label className="block text-sm font-semibold text-slate-700 mb-1">
+                  Official Email
+                </label>
+                <input
+                  type="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  className="w-full px-4 py-3 bg-white border border-slate-300 rounded-lg focus:ring-2 focus:ring-slate-800 focus:border-transparent transition text-slate-900"
+                  placeholder="name@city.gov"
+                  required
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-semibold text-slate-700 mb-1">
+                  Password
+                </label>
+                <input
+                  type="password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  className="w-full px-4 py-3 bg-white border border-slate-300 rounded-lg focus:ring-2 focus:ring-slate-800 focus:border-transparent transition text-slate-900"
+                  placeholder="••••••••"
+                  required
+                />
+              </div>
+
+              <button
+                type="submit"
+                disabled={loading}
+                className="w-full py-3 bg-slate-900 hover:bg-slate-800 text-white font-bold rounded-lg transition shadow-md disabled:opacity-70"
+              >
+                {loading ? "Verifying..." : "Access Portal"}
+              </button>
+            </form>
+          )}
+
+          <div className="mt-8 pt-6 border-t border-slate-100 text-center">
+            <p className="text-sm text-slate-500">
+              New citizen?{" "}
+              <Link
+                href="/signup"
+                className="text-blue-600 hover:text-blue-700 font-semibold"
+              >
+                Create account
+              </Link>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

Frontend/app/signup/page.tsx

@@ -0,0 +1,88 @@
+"use client";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+import { createClient } from "@supabase/supabase-js";
+
+const SUPABASE_URL = process.env.NEXT_PUBLIC_SUPABASE_URL || "";
+const SUPABASE_ANON_KEY = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY || "";
+
+const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
+
+export default function SignUpPage() {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const router = useRouter();
+
+  const handleGoogleSignUp = async () => {
+    setLoading(true);
+    setError("");
+    
+    try {
+      const { error } = await supabase.auth.signInWithOAuth({
+        provider: "google",
+        options: {
+          redirectTo: `${window.location.origin}/signin`,
+        },
+      });
+      
+      if (error) throw error;
+    } catch (err: any) {
+      setError(err.message);
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex flex-col bg-slate-50">
+      <nav className="px-8 py-6 bg-white border-b border-slate-200">
+        <div className="max-w-7xl mx-auto flex justify-between items-center">
+          <Link href="/" className="text-2xl font-bold text-slate-800">CityIssue</Link>
+        </div>
+      </nav>
+
+      <div className="flex-1 flex items-center justify-center p-4">
+        <div className="w-full max-w-md bg-white rounded-xl shadow-lg border border-slate-100 p-8">
+          <div className="text-center mb-8">
+            <h2 className="text-2xl font-bold text-slate-800">Create Account</h2>
+            <p className="text-slate-500 mt-2">Join as a citizen to report issues</p>
+          </div>
+
+          {error && (
+            <div className="mb-6 p-4 bg-red-50 border border-red-100 rounded-lg text-red-600 text-sm font-medium">
+              {error}
+            </div>
+          )}
+
+          <button
+            onClick={handleGoogleSignUp}
+            disabled={loading}
+            className="w-full py-4 px-4 bg-white border border-slate-300 hover:bg-slate-50 text-slate-700 font-bold rounded-lg flex items-center justify-center gap-3 transition shadow-sm"
+          >
+            <img src="https://www.google.com/favicon.ico" alt="Google" className="w-5 h-5" />
+            {loading ? "Creating..." : "Sign up with Google"}
+          </button>
+
+          <div className="mt-8 p-6 bg-blue-50 border border-blue-100 rounded-xl">
+            <div className="flex items-start gap-3">
+              <span className="text-2xl">📱</span>
+              <div>
+                <h4 className="text-sm font-bold text-blue-900 mb-1">Mobile App Recommended</h4>
+                <p className="text-xs text-blue-700 leading-relaxed">
+                  For the best experience, download our mobile app. It supports GPS-verified photo uploads which are required for official reports.
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <p className="mt-8 text-center text-sm text-slate-500">
+            Already have an account?{" "}
+            <Link href="/signin" className="text-blue-600 hover:text-blue-700 font-semibold">
+              Sign in
+            </Link>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,374 @@
+"use client";
+import { useEffect, useState } from "react";
+import { useParams, useRouter } from "next/navigation";
+
+export const runtime = "edge";
+import { apiGet } from "@/lib/api";
+import {
+  ArrowLeft,
+  MapPin,
+  Calendar,
+  CheckCircle2,
+  Clock,
+  AlertTriangle,
+  ImageIcon,
+  Activity,
+  Maximize2,
+} from "lucide-react";
+import Link from "next/link";
+
+interface IssueEvent {
+  id: string;
+  event_type: string;
+  created_at: string;
+  data: any;
+}
+
+interface Issue {
+  id: string;
+  description: string;
+  state: string;
+  city: string;
+  locality: string;
+  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[];
+}
+
+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 getStateBadge = (state: string) => {
+    const styles: Record<string, string> = {
+      reported: "bg-blue-100 text-blue-800 border-blue-200",
+      assigned: "bg-amber-100 text-amber-800 border-amber-200",
+      in_progress: "bg-orange-100 text-orange-800 border-orange-200",
+      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",
+    };
+    return (
+      <span
+        className={`px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider border ${styles[state] || styles.reported}`}
+      >
+        {state.replace("_", " ")}
+      </span>
+    );
+  };
+
+  if (loading) {
+    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>
+    );
+  }
+
+  if (!issue) {
+    return (
+      <div className="min-h-screen bg-urban-bg 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">
+          Return to Dashboard
+        </Link>
+      </div>
+    );
+  }
+
+  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>
+
+      <main className="relative z-10 max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        {/* 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)}
+                </span>
+                {getStateBadge(issue.state)}
+              </div>
+              <h1 className="text-3xl font-bold text-slate-900 tracking-tight">
+                {issue.category || "Reported Issue"}
+              </h1>
+            </div>
+            {issue.priority && (
+              <div className="text-right">
+                <div className="text-xs text-slate-400 font-bold uppercase tracking-wider mb-1">
+                  Priority Level
+                </div>
+                <div
+                  className={`text-lg font-bold px-4 py-1 rounded-full border border-slate-200 inline-block bg-white shadow-sm ${
+                    issue.priority === 1
+                      ? "text-red-600 border-red-100 bg-red-50"
+                      : issue.priority === 2
+                        ? "text-orange-600 border-orange-100 bg-orange-50"
+                        : "text-slate-700"
+                  }`}
+                >
+                  {issue.priority === 1
+                    ? "Critical"
+                    : issue.priority === 2
+                      ? "High"
+                      : "Normal"}
+                </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>
+
+              <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}
+                    </p>
+                    <p className="text-xs text-slate-500 mt-1">{issue.city}</p>
+                  </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>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                {/* Original Image */}
+                <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>
+                    )}
+                  </div>
+                </div>
+
+                {/* AI Annotated Image */}
+                <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>
+                  </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>
+                  </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>
+                )}
+
+                {/* 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>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}

Frontend/app/user/page.tsx

@@ -0,0 +1,218 @@
+"use client";
+import { useEffect, useState } from "react";
+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");
+
+interface Issue {
+  id: string;
+  description: string;
+  priority: number;
+  state: string;
+  city: string;
+  locality: string;
+  created_at: string;
+  primary_category: string;
+  classification?: {
+    primary_category: string;
+    confidence: number;
+  };
+  images?: { file_path: string; annotated_path: string }[];
+}
+
+interface IssuesResponse {
+  items: Issue[];
+}
+
+export default function UserDashboard() {
+  const { user, role, signOut, loading: authLoading } = useAuth();
+  const router = useRouter();
+
+  useEffect(() => {
+    if (!authLoading) {
+      if (role !== "user") {
+        router.push("/signin");
+      }
+    }
+  }, [authLoading, role, router]);
+
+  // 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 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 getStateBadge = (state: string) => {
+    const styles: Record<string, string> = {
+      reported: "bg-blue-100 text-blue-800",
+      assigned: "bg-yellow-100 text-yellow-800",
+      in_progress: "bg-orange-100 text-orange-800",
+      resolved: "bg-green-100 text-green-800",
+      closed: "bg-slate-100 text-slate-600",
+    };
+    return (
+      <span
+        className={`px-2.5 py-0.5 rounded-full text-xs font-semibold ${styles[state] || styles.reported}`}
+      >
+        {state.replace("_", " ").toUpperCase()}
+      </span>
+    );
+  };
+
+  if (authLoading) {
+    return (
+      <div className="min-h-screen bg-slate-50 flex items-center justify-center">
+        <div className="text-slate-600 font-medium">Loading Dashboard...</div>
+      </div>
+    );
+  }
+
+  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"}
+                </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"
+              >
+                Sign Out
+              </button>
+            </div>
+          </div>
+        </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
+            </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>
+          </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">
+              Total Reports
+            </p>
+            <p className="text-3xl font-extrabold text-slate-900 mt-2">
+              {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">
+              Resolved
+            </p>
+            <p className="text-3xl font-extrabold text-emerald-600 mt-2">
+              {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
+            </p>
+            <p className="text-3xl font-extrabold text-amber-500 mt-2">
+              {
+                issues.filter((i) =>
+                  ["assigned", "in_progress"].includes(i.state),
+                ).length
+              }
+            </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
+            </p>
+            <p className="text-slate-500 mt-2">
+              Download the mobile app to start contributing to your city.
+            </p>
+          </div>
+        ) : (
+          <div className="space-y-4">
+            {issues.map((issue) => (
+              <div
+                key={issue.id}
+                className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow"
+              >
+                <div className="flex flex-col sm:flex-row justify-between items-start gap-4 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>
+                  </div>
+                  <span className="text-sm text-slate-400 font-medium">
+                    {new Date(issue.created_at).toLocaleDateString(undefined, {
+                      month: "long",
+                      day: "numeric",
+                      year: "numeric",
+                    })}
+                  </span>
+                </div>
+
+                <h3 className="text-lg font-bold text-slate-900 mb-2">
+                  {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>
+              </div>
+            ))}
+          </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
+          </p>
+        </div>
+      </footer>
+    </div>
+  );
+}

Frontend/app/worker/layout.tsx

@@ -0,0 +1,44 @@
+"use client";
+import { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { useAuth } from "@/components/AuthProvider";
+import DashboardSidebar from "@/components/DashboardSidebar";
+import DashboardHeader from "@/components/DashboardHeader";
+
+export default function WorkerLayout({ children }: { children: React.ReactNode }) {
+  const { role, loading, signOut } = useAuth();
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+  const router = useRouter();
+
+  useEffect(() => {
+    if (!loading && role !== "worker") {
+      router.push("/signin");
+    }
+  }, [loading, role, router]);
+
+  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} 
+        desktopOpen={isSidebarOpen}
+        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" 
+        />
+        <main className="flex-1 overflow-x-hidden overflow-y-auto p-4 sm:p-6 lg:p-8">
+          {children}
+        </main>
+      </div>
+    </div>
+  );
+}

Frontend/app/worker/page.tsx

@@ -0,0 +1,244 @@
+"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,
+  ArrowRight,
+  AlertCircle,
+  Calendar,
+} from "lucide-react";
+import { Skeleton } from "@/components/ui/Skeleton";
+
+interface Task {
+  id: string;
+  description: string;
+  priority: number;
+  state: string;
+  city: string;
+  locality: string;
+  full_address: string;
+  latitude: number;
+  longitude: number;
+  image_url: string;
+  created_at: string;
+  sla_deadline: string;
+}
+
+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" : "" 
+  );
+
+  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 }> =
+      {
+        1: { bg: "bg-red-50", text: "text-red-700", border: "border-red-200" },
+        2: {
+          bg: "bg-orange-50",
+          text: "text-orange-700",
+          border: "border-orange-200",
+        },
+        3: {
+          bg: "bg-amber-50",
+          text: "text-amber-700",
+          border: "border-amber-200",
+        },
+        4: {
+          bg: "bg-emerald-50",
+          text: "text-emerald-700",
+          border: "border-emerald-200",
+        },
+      };
+    const labels: Record<number, string> = {
+      1: "Critical",
+      2: "High",
+      3: "Medium",
+      4: "Low",
+    };
+    const badge = badges[priority] || badges[3];
+    return (
+      <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>
+        {labels[priority] || "Unknown"}
+      </span>
+    );
+  };
+
+  if (isLoading) {
+    return (
+      <div className="space-y-6">
+        <div className="flex justify-between items-center">
+          <div className="space-y-2">
+            <Skeleton className="h-8 w-48" />
+            <Skeleton className="h-4 w-64" />
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
+          <Skeleton className="h-32 rounded-2xl" />
+          <Skeleton className="h-32 rounded-2xl" />
+          <Skeleton className="h-32 rounded-2xl" />
+        </div>
+
+        <Skeleton className="h-6 w-40 mb-4" />
+
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          {Array.from({ length: 4 }).map((_, i) => (
+            <Skeleton key={i} className="h-64 rounded-2xl" />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <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">
+            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="flex items-center gap-3 mb-2">
+            <div className="p-2.5 bg-blue-50 text-blue-600 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">
+              Active Tasks
+            </h3>
+          </div>
+          <p className="text-4xl font-extrabold text-slate-900 mt-2 tracking-tighter">
+            {
+              tasks.filter((t) =>
+                ["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="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" />
+            </div>
+            <h3 className="text-slate-500 font-bold text-xs uppercase tracking-wider font-mono">
+              Pending Review
+            </h3>
+          </div>
+          <p className="text-4xl font-extrabold text-slate-900 mt-2 tracking-tighter">
+            {
+              tasks.filter((t) =>
+                ["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>
+        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">
+          <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-500 text-sm mt-1">
+            Enjoy your break, no pending assignments.
+          </p>
+        </div>
+      ) : (
+        <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>
+                  <div className="flex justify-between items-start mb-4 pl-2">
+                    <div className="flex items-center gap-2 flex-wrap">
+                      {getPriorityBadge(task.priority)}
+                      <span
+                        className={`text-xs font-bold px-2.5 py-1 rounded-md 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-slate-100 text-slate-600 border-slate-200"
+                        }`}
+                      >
+                        {task.state === "pending_verification"
+                          ? "Under Review"
+                          : task.state.replace("_", " ")}
+                      </span>
+                    </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">
+                    {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" />
+                      </div>
+                      <span className="truncate font-medium">
+                        {task.full_address || `${task.city}, ${task.locality}`}
+                      </span>
+                    </div>
+                    {task.sla_deadline && (
+                      <div className="flex items-center gap-2.5 text-sm text-red-600 font-bold bg-red-50/50 p-2 rounded-lg border border-red-100/50 w-fit">
+                        <Calendar className="w-3.5 h-3.5 shrink-0" />
+                        <span>
+                          Due:{" "}
+                          {new Date(task.sla_deadline).toLocaleDateString()}
+                        </span>
+                      </div>
+                    )}
+                  </div>
+                </div>
+
+                <div className="pt-4 mt-2 border-t border-slate-100 pl-2 flex justify-between items-center">
+                  <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">
+                    Resolve <ArrowRight className="w-4 h-4" />
+                  </span>
+                </div>
+              </div>
+            </Link>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,354 @@
+"use client";
+import { useEffect, useState, useRef } from "react";
+import { useRouter, useParams } from "next/navigation";
+import { apiGet } from "@/lib/api";
+
+export const runtime = "edge";
+import { ArrowLeft, Camera, Navigation, Loader2 } from "lucide-react";
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL;
+if (!API_URL) throw new Error("Missing NEXT_PUBLIC_API_URL");
+
+interface Task {
+  id: string;
+  description: string;
+  priority: number;
+  state: string;
+  city: string;
+  locality: string;
+  full_address: string;
+  latitude: number;
+  longitude: number;
+  image_url: string;
+  annotated_url: string;
+  category: string;
+  created_at: string;
+  sla_deadline: string;
+}
+
+export default function TaskDetailPage() {
+  const [task, setTask] = useState<Task | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [submitting, setSubmitting] = useState(false);
+  const [notes, setNotes] = useState("");
+  const [proofImage, setProofImage] = useState<File | null>(null);
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+  const fileRef = useRef<HTMLInputElement>(null);
+  const router = useRouter();
+  const params = useParams();
+  const taskId = params.id as string;
+
+  useEffect(() => {
+    fetchTask();
+  }, [taskId]);
+
+  const fetchTask = async () => {
+    try {
+      const data = await apiGet<Task>(`/worker/tasks/${taskId}`);
+      setTask(data);
+    } catch (error) {
+      console.error("Failed to fetch task:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      setProofImage(file);
+      setPreviewUrl(URL.createObjectURL(file));
+    }
+  };
+
+  const handleStart = async () => {
+    const token = localStorage.getItem("token");
+    if (!token) {
+      router.push("/signin");
+      return;
+    }
+
+    try {
+      const res = await fetch(`${API_URL}/worker/tasks/${taskId}/start`, {
+        method: "POST",
+        headers: { Authorization: `Bearer ${token}` },
+      });
+
+      if (res.ok) {
+        fetchTask();
+      } else {
+        console.error("Failed to start task");
+      }
+    } catch (error) {
+      console.error("Error starting task:", error);
+    }
+  };
+
+  const handleComplete = async () => {
+    if (!proofImage) {
+      alert("Please upload a proof image");
+      return;
+    }
+
+    const token = localStorage.getItem("token");
+    if (!token) {
+      alert("Session expired. Please sign in again.");
+      router.push("/signin");
+      return;
+    }
+
+    setSubmitting(true);
+    try {
+      const formData = new FormData();
+      formData.append("proof_image", proofImage);
+      if (notes) formData.append("notes", notes);
+
+      const res = await fetch(`${API_URL}/worker/tasks/${taskId}/complete`, {
+        method: "POST",
+        headers: { Authorization: `Bearer ${token}` },
+        body: formData,
+      });
+
+      if (res.ok) {
+        router.push("/worker");
+      } else {
+        const data = await res.json();
+        alert(data.detail || "Failed to complete task");
+      }
+    } catch (error) {
+      console.error("Failed to complete task:", error);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="text-slate-600 font-medium">Loading Task Details...</div>
+    );
+  }
+
+  if (!task) {
+    return (
+      <div className="flex flex-col items-center justify-center py-12">
+        <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"
+        >
+          Go Back
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <button
+          onClick={() => router.back()}
+          className="text-slate-500 hover:text-slate-900 transition font-medium flex items-center gap-2 px-3 py-1.5 rounded-lg hover:bg-white/50"
+        >
+          <ArrowLeft className="w-5 h-5" /> Back to List
+        </button>
+        <a
+          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"
+        >
+          <Navigation className="w-4 h-4" /> Navigation
+        </a>
+      </div>
+
+      <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">
+            {task.annotated_url ? (
+              <div className="relative h-72 bg-slate-100 group">
+                <img
+                  src={task.annotated_url}
+                  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 bottom-4 left-4 text-white">
+                    <p className="font-bold text-lg text-shadow-sm">{task.category}</p>
+                </div>
+              </div>
+            ) : (
+              <div className="h-64 bg-slate-100 flex items-center justify-center text-slate-400">
+                No Image Available
+              </div>
+            )}
+
+            <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'
+                }`}>
+                  {task.state.replace("_", " ")}
+                </span>
+                <span className="text-xs font-bold text-slate-400 uppercase tracking-wider ml-auto">
+                   ID: {task.id.slice(0, 8)}
+                </span>
+              </div>
+
+              <h1 className="text-3xl font-extrabold text-slate-900 mb-2 tracking-tight">
+                {task.description || "Issue Report"}
+              </h1>
+              <p className="text-slate-600 mb-8 font-medium text-lg leading-relaxed">
+                {task.full_address}
+              </p>
+
+              <div className="grid grid-cols-2 gap-6 py-6 border-t border-slate-200/60">
+                <div>
+                  <p className="text-xs font-bold text-slate-400 uppercase tracking-wide mb-1">
+                    Reported On
+                  </p>
+                  <p className="text-slate-900 font-bold text-lg font-mono">
+                    {new Date(task.created_at).toLocaleDateString()}
+                  </p>
+                </div>
+                {task.sla_deadline && (
+                  <div>
+                    <p className="text-xs font-bold text-slate-400 uppercase tracking-wide mb-1">
+                      Deadline
+                    </p>
+                    <p className="text-red-600 font-bold text-lg font-mono">
+                      {new Date(task.sla_deadline).toLocaleDateString()}
+                    </p>
+                  </div>
+                )}
+              </div>
+            </div>
+          </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>
+            Task Action
+          </h2>
+
+          {task.state === "assigned" || task.state === "rejected" ? (
+            <div className="text-center py-6">
+              <p className="text-slate-600 mb-8 font-medium">
+                {task.state === "rejected"
+                  ? "This task was returned. Please review feedback and restart work."
+                  : "You are assigned to this task. Travel to the location and start the work."}
+              </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"
+              >
+                Start Task
+              </button>
+            </div>
+          ) : task.state === "in_progress" ? (
+            <>
+              <h3 className="font-bold text-slate-800 mb-4 text-sm uppercase tracking-wide">
+                Complete Resolution
+              </h3>
+              <div className="mb-6">
+                <label className="block text-sm font-bold text-slate-700 mb-2">
+                  Proof of Fix <span className="text-red-500">*</span>
+                </label>
+                <input
+                  title="image"
+                  ref={fileRef}
+                  type="file"
+                  accept="image/*"
+                  onChange={handleFileChange}
+                  className="hidden"
+                />
+                <button
+                  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"
+                  }`}
+                >
+                  {previewUrl ? (
+                    <div className="text-center">
+                      <img
+                        src={previewUrl}
+                        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">
+                        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>
+                      <span className="font-bold">Tap to Upload Photo</span>
+                    </div>
+                  )}
+                </button>
+              </div>
+
+              <div className="mb-6">
+                <label className="block text-sm font-bold text-slate-700 mb-2">
+                  Resolution Notes
+                </label>
+                <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"
+                  rows={4}
+                  placeholder="Describe the repair work completed..."
+                />
+              </div>
+
+              <button
+                onClick={handleComplete}
+                disabled={!proofImage || submitting}
+                className="w-full py-4 bg-emerald-600 hover:bg-emerald-700 text-white font-bold text-lg rounded-xl shadow-lg hover:shadow-emerald-500/40 transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2 transform hover:-translate-y-1 active:scale-95"
+              >
+                {submitting ? (
+                  <>
+                    <Loader2 className="w-6 h-6 animate-spin" />
+                    Submitting...
+                  </>
+                ) : (
+                  "Mark as Resolved"
+                )}
+              </button>
+            </>
+          ) : 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" />
+              </div>
+              <h3 className="text-xl font-bold text-orange-900 mb-2">
+                Under Review
+              </h3>
+              <p className="text-orange-700 font-medium px-4">
+                Your work has been submitted. Waiting for admin verification.
+              </p>
+            </div>
+          ) : (
+            <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>
+              <h3 className="text-xl font-bold text-emerald-900 mb-2">
+                Task Completed
+              </h3>
+              <p className="text-emerald-700 font-medium">
+                This issue has been successfully resolved and closed.
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

Frontend/components/AuthProvider.tsx

@@ -0,0 +1,141 @@
+"use client";
+import { createContext, useContext, useEffect, useState } from "react";
+import { createClient, Session, User } from "@supabase/supabase-js";
+import { useRouter, usePathname } from "next/navigation";
+
+const SUPABASE_URL = process.env.NEXT_PUBLIC_SUPABASE_URL || "";
+const SUPABASE_ANON_KEY = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY || "";
+
+const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
+
+interface AuthContextType {
+  user: User | null;
+  session: Session | null;
+  loading: boolean;
+  signOut: () => Promise<void>;
+  role: string | null;
+}
+
+const AuthContext = createContext<AuthContextType>({
+  user: null,
+  session: null,
+  loading: true,
+  signOut: async () => {},
+  role: null,
+});
+
+export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
+  const [user, setUser] = useState<User | null>(null);
+  const [session, setSession] = useState<Session | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [role, setRole] = useState<string | null>(null);
+  const router = useRouter();
+  const pathname = usePathname();
+
+  useEffect(() => {
+    supabase.auth.getSession().then(({ data: { session } }) => {
+      handleSession(session);
+    });
+
+    const {
+      data: { subscription },
+    } = supabase.auth.onAuthStateChange((_event, session) => {
+      handleSession(session);
+    });
+
+    return () => subscription.unsubscribe();
+  }, []);
+
+  const handleSession = async (session: Session | null) => {
+    setSession(session);
+
+    if (session?.user) {
+      setUser(session.user);
+
+      const storedUser = localStorage.getItem("user");
+      let currentRole = "user";
+
+      if (storedUser) {
+        try {
+          const parsed = JSON.parse(storedUser);
+          if (parsed.email === session.user.email) {
+            currentRole = parsed.role || "user";
+          }
+        } catch (e) {
+          console.error("Error parsing stored user", e);
+        }
+      }
+      setRole(currentRole);
+      redirectToDashboard(currentRole);
+    } else {
+      const storedUser = localStorage.getItem("user");
+      const token = localStorage.getItem("token");
+
+      if (storedUser && token) {
+        try {
+          const parsed = JSON.parse(storedUser);
+
+          if (["admin", "worker"].includes(parsed.role)) {
+            setUser({
+              id: parsed.id,
+              email: parsed.email,
+              user_metadata: { full_name: parsed.name },
+              app_metadata: {},
+              aud: "authenticated",
+              created_at: new Date().toISOString(),
+            } as User);
+
+            setRole(parsed.role);
+            redirectToDashboard(parsed.role);
+            setLoading(false);
+            return;
+          }
+        } catch (e) {
+          console.error("Error parsing stored staff user", e);
+        }
+      }
+
+      setUser(null);
+      setRole(null);
+
+      if (!["/signin", "/signup", "/"].includes(window.location.pathname)) {
+        router.push("/signin");
+      }
+    }
+
+    setLoading(false);
+  };
+
+  const redirectToDashboard = (role: string) => {
+    if (["/signin", "/signup"].includes(window.location.pathname)) {
+      if (role === "admin") router.push("/admin");
+      else if (role === "worker") router.push("/worker");
+      else router.push("/user");
+    }
+  };
+
+  const signOut = async () => {
+    await supabase.auth.signOut();
+    localStorage.removeItem("user");
+    localStorage.removeItem("token");
+    localStorage.removeItem("supabase_token");
+    setRole(null);
+    setUser(null);
+    setSession(null);
+    router.push("/signin");
+  };
+
+  return (
+    <AuthContext.Provider value={{ user, session, loading, signOut, role }}>
+      {!loading ? (
+        children
+      ) : (
+        <div className="min-h-screen flex items-center justify-center bg-slate-50">
+          <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-slate-900"></div>
+        </div>
+      )}
+    </AuthContext.Provider>
+  );
+};
+
+export const useAuth = () => useContext(AuthContext);

Frontend/components/DashboardHeader.tsx

@@ -0,0 +1,50 @@
+
+
+"use client";
+import { useState } from "react";
+import { Search, Bell, Menu, User } from "lucide-react";
+
+interface HeaderProps {
+    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>
+
+            <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>
+
+                <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>
+
+                <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>
+    );
+}

Frontend/components/DashboardSidebar.tsx

@@ -0,0 +1,127 @@
+"use client";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import {
+  LayoutDashboard,
+  ClipboardList,
+  CheckSquare,
+  HardHat,
+  Building2,
+  Map,
+  ListTodo,
+  Settings,
+  LogOut,
+  Menu,
+} from "lucide-react";
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+interface SidebarProps {
+  role: "admin" | "worker";
+  mobileOpen: boolean;
+  setMobileOpen: (open: boolean) => void;
+  desktopOpen: boolean;
+  onLogout: () => void;
+}
+
+export default function DashboardSidebar({
+  role,
+  mobileOpen,
+  setMobileOpen,
+  desktopOpen,
+  onLogout,
+}: 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 },
+    { href: "/admin/review", label: "Review Queue", icon: CheckSquare },
+    { href: "/admin/workers", label: "Workforce", icon: HardHat },
+    { href: "/admin/departments", label: "Departments", icon: Building2 },
+    { href: "/admin/heatmap", label: "Heatmap", icon: Map },
+  ];
+
+  const workerLinks = [{ href: "/worker", label: "My Tasks", icon: ListTodo }];
+
+  const links = role === "admin" ? adminLinks : workerLinks;
+
+  return (
+    <>
+      {mobileOpen && (
+        <div
+          className="fixed inset-0 z-40 bg-slate-900/20 backdrop-blur-sm lg:hidden"
+          onClick={() => setMobileOpen(false)}
+        />
+      )}
+
+      <aside
+        className={cn(
+          "fixed inset-y-0 left-0 z-50 bg-white/80 backdrop-blur-xl border-r border-slate-200/60 transition-all duration-300 ease-in-out shadow-urban-lg", // UrbanLens Light Glass
+          "lg:relative lg:translate-x-0 lg:shadow-none",
+          mobileOpen ? "translate-x-0" : "-translate-x-full",
+          desktopOpen ? "lg:w-72" : "lg:w-0 lg:overflow-hidden lg:border-r-0"
+        )}
+      >
+        <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>
+            <span className="text-xl font-bold tracking-tight text-slate-900">UrbanLens</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">
+            {role}
+          </span>
+        </div>
+
+        <div className="flex flex-col justify-between h-[calc(100vh-4rem)] p-4">
+          <nav className="space-y-1">
+            {links.map((link) => {
+              const Icon = link.icon;
+              const isActive = pathname === link.href;
+              return (
+                <Link
+                  key={link.href}
+                  href={link.href}
+                  onClick={() => setMobileOpen(false)}
+                  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"
+                      : "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" />
+                  )}
+                  <Icon className={cn("h-5 w-5 transition-transform group-hover:scale-110", isActive ? "text-blue-600" : "text-slate-400 group-hover:text-slate-600")} />
+                  <span className={isActive ? "ml-1.5" : ""}>{link.label}</span>
+                </Link>
+              );
+            })}
+          </nav>
+
+          <div className="border-t border-slate-100 pt-4 space-y-1">
+            <button className="flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium text-slate-500 hover:bg-slate-50 hover:text-slate-900 transition-colors">
+              <Settings className="h-5 w-5 text-slate-400" />
+              Settings
+            </button>
+            <button
+              onClick={onLogout}
+              className="flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium text-red-600 hover:bg-red-50 hover:text-red-700 transition-colors"
+            >
+              <LogOut className="h-5 w-5" />
+              Sign Out
+            </button>
+          </div>
+        </div>
+      </aside>
+    </>
+  );
+}

Frontend/components/ui/Loader.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+export function Loader({ size = "md", className = "" }: { size?: "sm" | "md" | "lg"; className?: string }) {
+  const sizeClasses = {
+    sm: "w-4 h-4 border-2",
+    md: "w-8 h-8 border-[3px]",
+    lg: "w-12 h-12 border-4",
+  };
+
+  return (
+    <div className={`flex items-center justify-center ${className}`}>
+      <div
+        className={`animate-spin rounded-full border-slate-200 border-t-blue-600 ${sizeClasses[size]}`}
+      ></div>
+    </div>
+  );
+}

Frontend/components/ui/Skeleton.tsx

@@ -0,0 +1,10 @@
+import { cn } from "@/lib/utils";
+
+export function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-slate-200/50", className)}
+      {...props}
+    />
+  );
+}

Frontend/hooks/useCachedFetch.ts

@@ -0,0 +1,123 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+
+const cache = new Map<string, { data: any; timestamp: number }>();
+const CACHE_TTL = 5 * 60 * 1000; // 5 minutes
+const CACHE_KEY_PREFIX = "urbanlens_cache_";
+
+// Helper to get full URL (duplicated logic, but safe for synchronous init)
+const getFullUrl = (url: string) => {
+  const baseUrl = process.env.NEXT_PUBLIC_API_URL || "";
+  return url.startsWith("http") ? url : `${baseUrl}${url}`;
+};
+
+export function useCachedFetch<T>(url: string, options?: RequestInit) {
+  const fullUrl = url ? getFullUrl(url) : "";
+
+  // 1. Initialize logic: Try memory cache -> Try localStorage -> Default null
+  const [data, setData] = useState<T | null>(() => {
+    if (!fullUrl) return null; // Skip if no URL
+    // Try memory first (fastest)
+    if (cache.has(fullUrl)) {
+      return cache.get(fullUrl)!.data;
+    }
+    // Try localStorage (persistence)
+    if (typeof window !== "undefined") {
+      try {
+        const stored = localStorage.getItem(CACHE_KEY_PREFIX + fullUrl);
+        if (stored) {
+          const parsed = JSON.parse(stored);
+          // Hydrate memory cache while we're at it
+          cache.set(fullUrl, parsed); 
+          return parsed.data;
+        }
+      } catch (e) {
+        console.warn("Cache parse error", e);
+      }
+    }
+    return null;
+  });
+
+  // Calculate generic initial loading state based on whether we found data
+  const [loading, setLoading] = useState(() => {
+    if (!fullUrl) return true; // Default to loading if waiting for URL? Or false? 
+    // Actually if URL is empty, we are "idle". Let's say loading=true if we expect a URL eventuall?
+    // Consistently, if URL is missing, we are NOT loading data yet because we can't.
+    // Ideally loading should be false if URL is empty, but let's stick to simple logic:
+    const cached = cache.get(fullUrl);
+    if (cached && Date.now() - cached.timestamp < CACHE_TTL) {
+      return false; 
+    }
+    return true; 
+  });
+
+  const [error, setError] = useState<Error | null>(null);
+
+  const fetchData = useCallback(async (isRevalidating = false) => {
+    if (!fullUrl) return; // Skip fetch if no URL
+
+    const cached = cache.get(fullUrl);
+    const isCacheValid = cached && (Date.now() - cached.timestamp < CACHE_TTL);
+
+    // If we have valid cache and we are NOT forcing a revalidate, stopping here is an option
+    // BUT the user wants "background sync", so we proceeds to fetch unless completely fresh? 
+    // Actually, "stale-while-revalidate" means we show cached, but fetch anyway.
+    
+    if (!isRevalidating) {
+      if (isCacheValid) {
+        setLoading(false); 
+      } else {
+        setLoading(true);
+      }
+    }
+
+    try {
+      const token = typeof window !== "undefined" ? localStorage.getItem("token") : null;
+      const headers = {
+        "Content-Type": "application/json",
+        ...(token ? { Authorization: `Bearer ${token}` } : {}),
+        ...options?.headers,
+      };
+
+      const res = await fetch(fullUrl, { ...options, headers });
+      
+      if (!res.ok) {
+        // If 401/403, we might want to handle it (though api.ts usually does)
+        if (res.status === 401) localStorage.removeItem("token");
+        throw new Error(`Fetch error: ${res.status}`);
+      }
+
+      const freshData = await res.json();
+      const cacheEntry = { data: freshData, timestamp: Date.now() };
+
+      // Update Memory
+      cache.set(fullUrl, cacheEntry);
+      
+      // Update LocalStorage
+      if (typeof window !== "undefined") {
+        try {
+          localStorage.setItem(CACHE_KEY_PREFIX + fullUrl, JSON.stringify(cacheEntry));
+        } catch (e) {
+           console.warn("Quota exceeded likely", e);
+        }
+      }
+
+      setData(freshData);
+      setError(null);
+    } catch (err) {
+      console.error("Fetch failed:", err);
+      if (!data) setError(err as Error); // Only show error if no cached data
+    } finally {
+      if (!isRevalidating) setLoading(false);
+    }
+  }, [fullUrl, JSON.stringify(options)]); 
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  const revalidate = () => fetchData(true);
+
+  return { data, loading, error, revalidate };
+}

Frontend/lib/api.ts

@@ -0,0 +1,126 @@
+"use client";
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL || "";
+const REQUEST_TIMEOUT_MS = 30000;
+const MAX_RETRIES = 2;
+
+class ApiError extends Error {
+  status: number;
+  constructor(message: string, status: number) {
+    super(message);
+    this.status = status;
+    this.name = "ApiError";
+  }
+}
+
+async function fetchWithTimeout(
+  url: string,
+  options: RequestInit,
+  timeout: number,
+): Promise<Response> {
+  const controller = new AbortController();
+  const timeoutId = setTimeout(() => controller.abort(), timeout);
+
+  try {
+    const response = await fetch(url, {
+      ...options,
+      signal: controller.signal,
+    });
+    return response;
+  } finally {
+    clearTimeout(timeoutId);
+  }
+}
+
+export async function apiRequest<T>(
+  endpoint: string,
+  options: RequestInit = {},
+  retries = 0,
+): Promise<T> {
+  const token =
+    typeof window !== "undefined" ? localStorage.getItem("token") : null;
+
+  if (!API_URL) {
+    throw new ApiError("API URL not configured", 500);
+  }
+
+  const headers: HeadersInit = {
+    "Content-Type": "application/json",
+    ...(token ? { Authorization: `Bearer ${token}` } : {}),
+    ...options.headers,
+  };
+
+  try {
+    const res = await fetchWithTimeout(
+      `${API_URL}${endpoint}`,
+      { ...options, headers },
+      REQUEST_TIMEOUT_MS,
+    );
+
+    if (res.status === 401 || res.status === 403) {
+      if (typeof window !== "undefined") {
+        localStorage.removeItem("token");
+        localStorage.removeItem("user");
+        window.location.href = "/signin";
+      }
+      throw new ApiError("Session expired. Please sign in again.", res.status);
+    }
+
+    if (res.status >= 500 && retries < MAX_RETRIES) {
+      await new Promise((r) => setTimeout(r, 1000 * (retries + 1)));
+      return apiRequest<T>(endpoint, options, retries + 1);
+    }
+
+    if (!res.ok) {
+      const data = await res.json().catch(() => ({}));
+      throw new ApiError(data.detail || "Request failed", res.status);
+    }
+
+    if (res.status === 204) {
+      return {} as T;
+    }
+
+    return res.json();
+  } catch (error) {
+    if (error instanceof ApiError) throw error;
+
+    if (error instanceof Error) {
+      if (error.name === "AbortError") {
+        throw new ApiError("Request timed out. Please try again.", 408);
+      }
+      if (retries < MAX_RETRIES) {
+        await new Promise((r) => setTimeout(r, 1000 * (retries + 1)));
+        return apiRequest<T>(endpoint, options, retries + 1);
+      }
+    }
+
+    throw new ApiError("Network error. Please check your connection.", 0);
+  }
+}
+
+export async function apiGet<T>(endpoint: string): Promise<T> {
+  return apiRequest<T>(endpoint, { method: "GET" });
+}
+
+export async function apiPost<T>(endpoint: string, body?: unknown): Promise<T> {
+  return apiRequest<T>(endpoint, {
+    method: "POST",
+    body: body ? JSON.stringify(body) : undefined,
+  });
+}
+
+export async function apiPatch<T>(
+  endpoint: string,
+  body?: unknown,
+): Promise<T> {
+  return apiRequest<T>(endpoint, {
+    method: "PATCH",
+    body: body ? JSON.stringify(body) : undefined,
+  });
+}
+
+export async function apiDelete(endpoint: string): Promise<void> {
+  await apiRequest(endpoint, { method: "DELETE" });
+}
+
+export { ApiError };

Frontend/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

Frontend/next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+import "./.next/dev/types/routes.d.ts";
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

Frontend/next.config.ts

@@ -1,7 +1,10 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  reactStrictMode: false,
+  experimental: {
+    optimizePackageImports: ['lucide-react', '@supabase/supabase-js'],
+  },
 };
 
 export default nextConfig;

Frontend/package-lock.json

@@ -8,9 +8,14 @@
       "name": "frontend",
       "version": "0.1.0",
       "dependencies": {
-        "next": "16.1.6",
+        "@supabase/supabase-js": "^2.90.1",
+        "clsx": "^2.1.1",
+        "lucide-react": "^0.562.0",
+        "next": "16.1.1",
         "react": "19.2.3",
-        "react-dom": "19.2.3"
+        "react-dom": "19.2.3",
+        "recharts": "^3.6.0",
+        "tailwind-merge": "^3.4.0"
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4",
@@ -18,7 +23,7 @@
         "@types/react": "^19",
         "@types/react-dom": "^19",
         "eslint": "^9",
-        "eslint-config-next": "16.1.6",
+        "eslint-config-next": "16.1.1",
         "tailwindcss": "^4",
         "typescript": "^5"
       }
@@ -37,9 +42,9 @@
       }
     },
     "node_modules/@babel/code-frame": {
-      "version": "7.29.0",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.0.tgz",
-      "integrity": "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==",
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.28.6.tgz",
+      "integrity": "sha512-JYgintcMjRiCvS8mMECzaEn+m3PfoQiyqukOMCCVQtoJGYJw8j/8LBJEiqkHLkfwCcs74E3pbAUFNg7d9VNJ+Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -52,9 +57,9 @@
       }
     },
     "node_modules/@babel/compat-data": {
-      "version": "7.29.0",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.29.0.tgz",
-      "integrity": "sha512-T1NCJqT/j9+cn8fvkt7jtwbLBfLC/1y1c7NtCeXFRgzGTsafi68MRv8yzkYSapBnFA6L3U2VSc02ciDzoAJhJg==",
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.28.6.tgz",
+      "integrity": "sha512-2lfu57JtzctfIrcGMz992hyLlByuzgIk58+hhGCxjKZ3rWI82NnVLjXcaTqkI2NvlcvOskZaiZ5kjUALo3Lpxg==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -62,21 +67,21 @@
       }
     },
     "node_modules/@babel/core": {
-      "version": "7.29.0",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.0.tgz",
-      "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.6.tgz",
+      "integrity": "sha512-H3mcG6ZDLTlYfaSNi0iOKkigqMFvkTKlGUYlD8GW7nNOYRrevuA46iTypPyv+06V3fEmvvazfntkBU34L0azAw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.29.0",
-        "@babel/generator": "^7.29.0",
+        "@babel/code-frame": "^7.28.6",
+        "@babel/generator": "^7.28.6",
         "@babel/helper-compilation-targets": "^7.28.6",
         "@babel/helper-module-transforms": "^7.28.6",
         "@babel/helpers": "^7.28.6",
-        "@babel/parser": "^7.29.0",
+        "@babel/parser": "^7.28.6",
         "@babel/template": "^7.28.6",
-        "@babel/traverse": "^7.29.0",
-        "@babel/types": "^7.29.0",
+        "@babel/traverse": "^7.28.6",
+        "@babel/types": "^7.28.6",
         "@jridgewell/remapping": "^2.3.5",
         "convert-source-map": "^2.0.0",
         "debug": "^4.1.0",
@@ -93,14 +98,14 @@
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.29.1",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.1.tgz",
-      "integrity": "sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw==",
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.28.6.tgz",
+      "integrity": "sha512-lOoVRwADj8hjf7al89tvQ2a1lf53Z+7tiXMgpZJL3maQPDxh0DgLMN62B2MKUOFcoodBHLMbDM6WAbKgNy5Suw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/parser": "^7.29.0",
-        "@babel/types": "^7.29.0",
+        "@babel/parser": "^7.28.6",
+        "@babel/types": "^7.28.6",
         "@jridgewell/gen-mapping": "^0.3.12",
         "@jridgewell/trace-mapping": "^0.3.28",
         "jsesc": "^3.0.2"
@@ -213,13 +218,13 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.29.0",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.0.tgz",
-      "integrity": "sha512-IyDgFV5GeDUVX4YdF/3CPULtVGSXXMLh1xVIgdCgxApktqnQV0r7/8Nqthg+8YLGaAtdyIlo2qIdZrbCv4+7ww==",
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.6.tgz",
+      "integrity": "sha512-TeR9zWR18BvbfPmGbLampPMW+uW1NZnJlRuuHso8i87QZNq2JRF9i6RgxRqtEq+wQGsS19NNTWr2duhnE49mfQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.29.0"
+        "@babel/types": "^7.28.6"
       },
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -244,18 +249,18 @@
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.29.0",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.0.tgz",
-      "integrity": "sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA==",
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.28.6.tgz",
+      "integrity": "sha512-fgWX62k02qtjqdSNTAGxmKYY/7FSL9WAS1o2Hu5+I5m9T0yxZzr4cnrfXQ/MX0rIifthCSs6FKTlzYbJcPtMNg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.29.0",
-        "@babel/generator": "^7.29.0",
+        "@babel/code-frame": "^7.28.6",
+        "@babel/generator": "^7.28.6",
         "@babel/helper-globals": "^7.28.0",
-        "@babel/parser": "^7.29.0",
+        "@babel/parser": "^7.28.6",
         "@babel/template": "^7.28.6",
-        "@babel/types": "^7.29.0",
+        "@babel/types": "^7.28.6",
         "debug": "^4.3.1"
       },
       "engines": {
@@ -263,9 +268,9 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.29.0",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.0.tgz",
-      "integrity": "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==",
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.6.tgz",
+      "integrity": "sha512-0ZrskXVEHSWIqZM/sQZ4EV3jZJXRkio/WCxaqKZP1g//CEWEPSfeZFcms4XeKBCHU0ZKnIkdJeU/kF+eRp5lBg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1035,15 +1040,15 @@
       }
     },
     "node_modules/@next/env": {
-      "version": "16.1.6",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-16.1.6.tgz",
-      "integrity": "sha512-N1ySLuZjnAtN3kFnwhAwPvZah8RJxKasD7x1f8shFqhncnWZn4JMfg37diLNuoHsLAlrDfM3g4mawVdtAG8XLQ==",
+      "version": "16.1.1",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-16.1.1.tgz",
+      "integrity": "sha512-3oxyM97Sr2PqiVyMyrZUtrtM3jqqFxOQJVuKclDsgj/L728iZt/GyslkN4NwarledZATCenbk4Offjk1hQmaAA==",
       "license": "MIT"
     },
     "node_modules/@next/eslint-plugin-next": {
-      "version": "16.1.6",
-      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-16.1.6.tgz",
-      "integrity": "sha512-/Qq3PTagA6+nYVfryAtQ7/9FEr/6YVyvOtl6rZnGsbReGLf0jZU6gkpr1FuChAQpvV46a78p4cmHOVP8mbfSMQ==",
+      "version": "16.1.1",
+      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-16.1.1.tgz",
+      "integrity": "sha512-Ovb/6TuLKbE1UiPcg0p39Ke3puyTCIKN9hGbNItmpQsp+WX3qrjO3WaMVSi6JHr9X1NrmthqIguVHodMJbh/dw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1051,9 +1056,9 @@
       }
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "16.1.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-16.1.6.tgz",
-      "integrity": "sha512-wTzYulosJr/6nFnqGW7FrG3jfUUlEf8UjGA0/pyypJl42ExdVgC6xJgcXQ+V8QFn6niSG2Pb8+MIG1mZr2vczw==",
+      "version": "16.1.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-16.1.1.tgz",
+      "integrity": "sha512-JS3m42ifsVSJjSTzh27nW+Igfha3NdBOFScr9C80hHGrWx55pTrVL23RJbqir7k7/15SKlrLHhh/MQzqBBYrQA==",
       "cpu": [
         "arm64"
       ],
@@ -1067,9 +1072,9 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "16.1.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-16.1.6.tgz",
-      "integrity": "sha512-BLFPYPDO+MNJsiDWbeVzqvYd4NyuRrEYVB5k2N3JfWncuHAy2IVwMAOlVQDFjj+krkWzhY2apvmekMkfQR0CUQ==",
+      "version": "16.1.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-16.1.1.tgz",
+      "integrity": "sha512-hbyKtrDGUkgkyQi1m1IyD3q4I/3m9ngr+V93z4oKHrPcmxwNL5iMWORvLSGAf2YujL+6HxgVvZuCYZfLfb4bGw==",
       "cpu": [
         "x64"
       ],
@@ -1083,9 +1088,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "16.1.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-16.1.6.tgz",
-      "integrity": "sha512-OJYkCd5pj/QloBvoEcJ2XiMnlJkRv9idWA/j0ugSuA34gMT6f5b7vOiCQHVRpvStoZUknhl6/UxOXL4OwtdaBw==",
+      "version": "16.1.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-16.1.1.tgz",
+      "integrity": "sha512-/fvHet+EYckFvRLQ0jPHJCUI5/B56+2DpI1xDSvi80r/3Ez+Eaa2Yq4tJcRTaB1kqj/HrYKn8Yplm9bNoMJpwQ==",
       "cpu": [
         "arm64"
       ],
@@ -1099,9 +1104,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "16.1.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-16.1.6.tgz",
-      "integrity": "sha512-S4J2v+8tT3NIO9u2q+S0G5KdvNDjXfAv06OhfOzNDaBn5rw84DGXWndOEB7d5/x852A20sW1M56vhC/tRVbccQ==",
+      "version": "16.1.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-16.1.1.tgz",
+      "integrity": "sha512-MFHrgL4TXNQbBPzkKKur4Fb5ICEJa87HM7fczFs2+HWblM7mMLdco3dvyTI+QmLBU9xgns/EeeINSZD6Ar+oLg==",
       "cpu": [
         "arm64"
       ],
@@ -1115,9 +1120,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "16.1.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-16.1.6.tgz",
-      "integrity": "sha512-2eEBDkFlMMNQnkTyPBhQOAyn2qMxyG2eE7GPH2WIDGEpEILcBPI/jdSv4t6xupSP+ot/jkfrCShLAa7+ZUPcJQ==",
+      "version": "16.1.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-16.1.1.tgz",
+      "integrity": "sha512-20bYDfgOQAPUkkKBnyP9PTuHiJGM7HzNBbuqmD0jiFVZ0aOldz+VnJhbxzjcSabYsnNjMPsE0cyzEudpYxsrUQ==",
       "cpu": [
         "x64"
       ],
@@ -1131,9 +1136,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "16.1.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-16.1.6.tgz",
-      "integrity": "sha512-oicJwRlyOoZXVlxmIMaTq7f8pN9QNbdes0q2FXfRsPhfCi8n8JmOZJm5oo1pwDaFbnnD421rVU409M3evFbIqg==",
+      "version": "16.1.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-16.1.1.tgz",
+      "integrity": "sha512-9pRbK3M4asAHQRkwaXwu601oPZHghuSC8IXNENgbBSyImHv/zY4K5udBusgdHkvJ/Tcr96jJwQYOll0qU8+fPA==",
       "cpu": [
         "x64"
       ],
@@ -1147,9 +1152,9 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "16.1.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-16.1.6.tgz",
-      "integrity": "sha512-gQmm8izDTPgs+DCWH22kcDmuUp7NyiJgEl18bcr8irXA5N2m2O+JQIr6f3ct42GOs9c0h8QF3L5SzIxcYAAXXw==",
+      "version": "16.1.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-16.1.1.tgz",
+      "integrity": "sha512-bdfQkggaLgnmYrFkSQfsHfOhk/mCYmjnrbRCGgkMcoOBZ4n+TRRSLmT/CU5SATzlBJ9TpioUyBW/vWFXTqQRiA==",
       "cpu": [
         "arm64"
       ],
@@ -1163,9 +1168,9 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "16.1.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.1.6.tgz",
-      "integrity": "sha512-NRfO39AIrzBnixKbjuo2YiYhB6o9d8v/ymU9m/Xk8cyVk+k7XylniXkHwjs4s70wedVffc6bQNbufk5v0xEm0A==",
+      "version": "16.1.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.1.1.tgz",
+      "integrity": "sha512-Ncwbw2WJ57Al5OX0k4chM68DKhEPlrXBaSXDCi2kPi5f4d8b3ejr3RRJGfKBLrn2YJL5ezNS7w2TZLHSti8CMw==",
       "cpu": [
         "x64"
       ],
@@ -1226,6 +1231,42 @@
         "node": ">=12.4.0"
       }
     },
+    "node_modules/@reduxjs/toolkit": {
+      "version": "2.11.2",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.11.2.tgz",
+      "integrity": "sha512-Kd6kAHTA6/nUpp8mySPqj3en3dm0tdMIgbttnQ1xFMVpufoj+ADi8pXLBsd4xzTRHQa7t/Jv8W5UnCuW4kuWMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/spec": "^1.0.0",
+        "@standard-schema/utils": "^0.3.0",
+        "immer": "^11.0.0",
+        "redux": "^5.0.1",
+        "redux-thunk": "^3.1.0",
+        "reselect": "^5.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.0 || ^18 || ^19",
+        "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-redux": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@reduxjs/toolkit/node_modules/immer": {
+      "version": "11.1.3",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-11.1.3.tgz",
+      "integrity": "sha512-6jQTc5z0KJFtr1UgFpIL3N9XSC3saRaI9PwWtzM2pSqkNGtiNkYY2OSwkOGDK2XcTRcLb1pi/aNkKZz0nxVH4Q==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
     "node_modules/@rtsao/scc": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
@@ -1233,6 +1274,98 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
+      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
+      "license": "MIT"
+    },
+    "node_modules/@standard-schema/utils": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
+      "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
+      "license": "MIT"
+    },
+    "node_modules/@supabase/auth-js": {
+      "version": "2.90.1",
+      "resolved": "https://registry.npmjs.org/@supabase/auth-js/-/auth-js-2.90.1.tgz",
+      "integrity": "sha512-vxb66dgo6h3yyPbR06735Ps+dK3hj0JwS8w9fdQPVZQmocSTlKUW5MfxSy99mN0XqCCuLMQ3jCEiIIUU23e9ng==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "2.8.1"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@supabase/functions-js": {
+      "version": "2.90.1",
+      "resolved": "https://registry.npmjs.org/@supabase/functions-js/-/functions-js-2.90.1.tgz",
+      "integrity": "sha512-x9mV9dF1Lam9qL3zlpP6mSM5C9iqMPtF5B/tU1Jj/F0ufX5mjDf9ghVBaErVxmrQJRL4+iMKWKY2GnODkpS8tw==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "2.8.1"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@supabase/postgrest-js": {
+      "version": "2.90.1",
+      "resolved": "https://registry.npmjs.org/@supabase/postgrest-js/-/postgrest-js-2.90.1.tgz",
+      "integrity": "sha512-jh6vqzaYzoFn3raaC0hcFt9h+Bt+uxNRBSdc7PfToQeRGk7PDPoweHsbdiPWREtDVTGKfu+PyPW9e2jbK+BCgQ==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "2.8.1"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@supabase/realtime-js": {
+      "version": "2.90.1",
+      "resolved": "https://registry.npmjs.org/@supabase/realtime-js/-/realtime-js-2.90.1.tgz",
+      "integrity": "sha512-PWbnEMkcQRuor8jhObp4+Snufkq8C6fBp+MchVp2qBPY1NXk/c3Iv3YyiFYVzo0Dzuw4nAlT4+ahuPggy4r32w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/phoenix": "^1.6.6",
+        "@types/ws": "^8.18.1",
+        "tslib": "2.8.1",
+        "ws": "^8.18.2"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@supabase/storage-js": {
+      "version": "2.90.1",
+      "resolved": "https://registry.npmjs.org/@supabase/storage-js/-/storage-js-2.90.1.tgz",
+      "integrity": "sha512-GHY+Ps/K/RBfRj7kwx+iVf2HIdqOS43rM2iDOIDpapyUnGA9CCBFzFV/XvfzznGykd//z2dkGZhlZZprsVFqGg==",
+      "license": "MIT",
+      "dependencies": {
+        "iceberg-js": "^0.8.1",
+        "tslib": "2.8.1"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@supabase/supabase-js": {
+      "version": "2.90.1",
+      "resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.90.1.tgz",
+      "integrity": "sha512-U8KaKGLUgTIFHtwEW1dgw1gK7XrdpvvYo7nzzqPx721GqPe8WZbAiLh/hmyKLGBYQ/mmQNr20vU9tWSDZpii3w==",
+      "license": "MIT",
+      "dependencies": {
+        "@supabase/auth-js": "2.90.1",
+        "@supabase/functions-js": "2.90.1",
+        "@supabase/postgrest-js": "2.90.1",
+        "@supabase/realtime-js": "2.90.1",
+        "@supabase/storage-js": "2.90.1"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
     "node_modules/@swc/helpers": {
       "version": "0.5.15",
       "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
@@ -1524,6 +1657,69 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@types/d3-array": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz",
+      "integrity": "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-ease": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-path": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
+      "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
+      "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
+    "node_modules/@types/d3-shape": {
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.8.tgz",
+      "integrity": "sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-path": "*"
+      }
+    },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
+      "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-timer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
+      "license": "MIT"
+    },
     "node_modules/@types/estree": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
@@ -1546,20 +1742,25 @@
       "license": "MIT"
     },
     "node_modules/@types/node": {
-      "version": "20.19.32",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.32.tgz",
-      "integrity": "sha512-Ez8QE4DMfhjjTsES9K2dwfV258qBui7qxUsoaixZDiTzbde4U12e1pXGNu/ECsUIOi5/zoCxAQxIhQnaUQ2VvA==",
-      "dev": true,
+      "version": "20.19.29",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.29.tgz",
+      "integrity": "sha512-YrT9ArrGaHForBaCNwFjoqJWmn8G1Pr7+BH/vwyLHciA9qT/wSiuOhxGCT50JA5xLvFBd6PIiGkE3afxcPE1nw==",
       "license": "MIT",
       "dependencies": {
         "undici-types": "~6.21.0"
       }
     },
+    "node_modules/@types/phoenix": {
+      "version": "1.6.7",
+      "resolved": "https://registry.npmjs.org/@types/phoenix/-/phoenix-1.6.7.tgz",
+      "integrity": "sha512-oN9ive//QSBkf19rfDv45M7eZPi0eEXylht2OLEXicu5b4KoQ1OzXIw+xDSGWxSxe1JmepRR/ZH283vsu518/Q==",
+      "license": "MIT"
+    },
     "node_modules/@types/react": {
-      "version": "19.2.13",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.13.tgz",
-      "integrity": "sha512-KkiJeU6VbYbUOp5ITMIc7kBfqlYkKA5KhEHVrGMmUUMt7NeaZg65ojdPk+FtNrBAOXNVM5QM72jnADjM+XVRAQ==",
-      "dev": true,
+      "version": "19.2.8",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.8.tgz",
+      "integrity": "sha512-3MbSL37jEchWZz2p2mjntRZtPt837ij10ApxKfgmXCTuHWagYg7iA5bqPw6C8BMPfwidlvfPI/fxOc42HLhcyg==",
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.2.2"
@@ -1575,18 +1776,33 @@
         "@types/react": "^19.2.0"
       }
     },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
+      "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/ws": {
+      "version": "8.18.1",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
+      "integrity": "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "8.54.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.54.0.tgz",
-      "integrity": "sha512-hAAP5io/7csFStuOmR782YmTthKBJ9ND3WVL60hcOjvtGFb+HJxH4O5huAcmcZ9v9G8P+JETiZ/G1B8MALnWZQ==",
+      "version": "8.53.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.53.0.tgz",
+      "integrity": "sha512-eEXsVvLPu8Z4PkFibtuFJLJOTAV/nPdgtSjkGoPpddpFk3/ym2oy97jynY6ic2m6+nc5M8SE1e9v/mHKsulcJg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/regexpp": "^4.12.2",
-        "@typescript-eslint/scope-manager": "8.54.0",
-        "@typescript-eslint/type-utils": "8.54.0",
-        "@typescript-eslint/utils": "8.54.0",
-        "@typescript-eslint/visitor-keys": "8.54.0",
+        "@typescript-eslint/scope-manager": "8.53.0",
+        "@typescript-eslint/type-utils": "8.53.0",
+        "@typescript-eslint/utils": "8.53.0",
+        "@typescript-eslint/visitor-keys": "8.53.0",
         "ignore": "^7.0.5",
         "natural-compare": "^1.4.0",
         "ts-api-utils": "^2.4.0"
@@ -1599,7 +1815,7 @@
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "@typescript-eslint/parser": "^8.54.0",
+        "@typescript-eslint/parser": "^8.53.0",
         "eslint": "^8.57.0 || ^9.0.0",
         "typescript": ">=4.8.4 <6.0.0"
       }
@@ -1615,16 +1831,16 @@
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "8.54.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.54.0.tgz",
-      "integrity": "sha512-BtE0k6cjwjLZoZixN0t5AKP0kSzlGu7FctRXYuPAm//aaiZhmfq1JwdYpYr1brzEspYyFeF+8XF5j2VK6oalrA==",
+      "version": "8.53.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.53.0.tgz",
+      "integrity": "sha512-npiaib8XzbjtzS2N4HlqPvlpxpmZ14FjSJrteZpPxGUaYPlvhzlzUZ4mZyABo0EFrOWnvyd0Xxroq//hKhtAWg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/scope-manager": "8.54.0",
-        "@typescript-eslint/types": "8.54.0",
-        "@typescript-eslint/typescript-estree": "8.54.0",
-        "@typescript-eslint/visitor-keys": "8.54.0",
+        "@typescript-eslint/scope-manager": "8.53.0",
+        "@typescript-eslint/types": "8.53.0",
+        "@typescript-eslint/typescript-estree": "8.53.0",
+        "@typescript-eslint/visitor-keys": "8.53.0",
         "debug": "^4.4.3"
       },
       "engines": {
@@ -1640,14 +1856,14 @@
       }
     },
     "node_modules/@typescript-eslint/project-service": {
-      "version": "8.54.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.54.0.tgz",
-      "integrity": "sha512-YPf+rvJ1s7MyiWM4uTRhE4DvBXrEV+d8oC3P9Y2eT7S+HBS0clybdMIPnhiATi9vZOYDc7OQ1L/i6ga6NFYK/g==",
+      "version": "8.53.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.53.0.tgz",
+      "integrity": "sha512-Bl6Gdr7NqkqIP5yP9z1JU///Nmes4Eose6L1HwpuVHwScgDPPuEWbUVhvlZmb8hy0vX9syLk5EGNL700WcBlbg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/tsconfig-utils": "^8.54.0",
-        "@typescript-eslint/types": "^8.54.0",
+        "@typescript-eslint/tsconfig-utils": "^8.53.0",
+        "@typescript-eslint/types": "^8.53.0",
         "debug": "^4.4.3"
       },
       "engines": {
@@ -1662,14 +1878,14 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "8.54.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.54.0.tgz",
-      "integrity": "sha512-27rYVQku26j/PbHYcVfRPonmOlVI6gihHtXFbTdB5sb6qA0wdAQAbyXFVarQ5t4HRojIz64IV90YtsjQSSGlQg==",
+      "version": "8.53.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.53.0.tgz",
+      "integrity": "sha512-kWNj3l01eOGSdVBnfAF2K1BTh06WS0Yet6JUgb9Cmkqaz3Jlu0fdVUjj9UI8gPidBWSMqDIglmEXifSgDT/D0g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.54.0",
-        "@typescript-eslint/visitor-keys": "8.54.0"
+        "@typescript-eslint/types": "8.53.0",
+        "@typescript-eslint/visitor-keys": "8.53.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -1680,9 +1896,9 @@
       }
     },
     "node_modules/@typescript-eslint/tsconfig-utils": {
-      "version": "8.54.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.54.0.tgz",
-      "integrity": "sha512-dRgOyT2hPk/JwxNMZDsIXDgyl9axdJI3ogZ2XWhBPsnZUv+hPesa5iuhdYt2gzwA9t8RE5ytOJ6xB0moV0Ujvw==",
+      "version": "8.53.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.53.0.tgz",
+      "integrity": "sha512-K6Sc0R5GIG6dNoPdOooQ+KtvT5KCKAvTcY8h2rIuul19vxH5OTQk7ArKkd4yTzkw66WnNY0kPPzzcmWA+XRmiA==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -1697,15 +1913,15 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "8.54.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.54.0.tgz",
-      "integrity": "sha512-hiLguxJWHjjwL6xMBwD903ciAwd7DmK30Y9Axs/etOkftC3ZNN9K44IuRD/EB08amu+Zw6W37x9RecLkOo3pMA==",
+      "version": "8.53.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.53.0.tgz",
+      "integrity": "sha512-BBAUhlx7g4SmcLhn8cnbxoxtmS7hcq39xKCgiutL3oNx1TaIp+cny51s8ewnKMpVUKQUGb41RAUWZ9kxYdovuw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.54.0",
-        "@typescript-eslint/typescript-estree": "8.54.0",
-        "@typescript-eslint/utils": "8.54.0",
+        "@typescript-eslint/types": "8.53.0",
+        "@typescript-eslint/typescript-estree": "8.53.0",
+        "@typescript-eslint/utils": "8.53.0",
         "debug": "^4.4.3",
         "ts-api-utils": "^2.4.0"
       },
@@ -1722,9 +1938,9 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "8.54.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.54.0.tgz",
-      "integrity": "sha512-PDUI9R1BVjqu7AUDsRBbKMtwmjWcn4J3le+5LpcFgWULN3LvHC5rkc9gCVxbrsrGmO1jfPybN5s6h4Jy+OnkAA==",
+      "version": "8.53.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.53.0.tgz",
+      "integrity": "sha512-Bmh9KX31Vlxa13+PqPvt4RzKRN1XORYSLlAE+sO1i28NkisGbTtSLFVB3l7PWdHtR3E0mVMuC7JilWJ99m2HxQ==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -1736,16 +1952,16 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "8.54.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.54.0.tgz",
-      "integrity": "sha512-BUwcskRaPvTk6fzVWgDPdUndLjB87KYDrN5EYGetnktoeAvPtO4ONHlAZDnj5VFnUANg0Sjm7j4usBlnoVMHwA==",
+      "version": "8.53.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.53.0.tgz",
+      "integrity": "sha512-pw0c0Gdo7Z4xOG987u3nJ8akL9093yEEKv8QTJ+Bhkghj1xyj8cgPaavlr9rq8h7+s6plUJ4QJYw2gCZodqmGw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/project-service": "8.54.0",
-        "@typescript-eslint/tsconfig-utils": "8.54.0",
-        "@typescript-eslint/types": "8.54.0",
-        "@typescript-eslint/visitor-keys": "8.54.0",
+        "@typescript-eslint/project-service": "8.53.0",
+        "@typescript-eslint/tsconfig-utils": "8.53.0",
+        "@typescript-eslint/types": "8.53.0",
+        "@typescript-eslint/visitor-keys": "8.53.0",
         "debug": "^4.4.3",
         "minimatch": "^9.0.5",
         "semver": "^7.7.3",
@@ -1790,9 +2006,9 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree/node_modules/semver": {
-      "version": "7.7.4",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
-      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
+      "version": "7.7.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
+      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
       "dev": true,
       "license": "ISC",
       "bin": {
@@ -1803,16 +2019,16 @@
       }
     },
     "node_modules/@typescript-eslint/utils": {
-      "version": "8.54.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.54.0.tgz",
-      "integrity": "sha512-9Cnda8GS57AQakvRyG0PTejJNlA2xhvyNtEVIMlDWOOeEyBkYWhGPnfrIAnqxLMTSTo6q8g12XVjjev5l1NvMA==",
+      "version": "8.53.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.53.0.tgz",
+      "integrity": "sha512-XDY4mXTez3Z1iRDI5mbRhH4DFSt46oaIFsLg+Zn97+sYrXACziXSQcSelMybnVZ5pa1P6xYkPr5cMJyunM1ZDA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.9.1",
-        "@typescript-eslint/scope-manager": "8.54.0",
-        "@typescript-eslint/types": "8.54.0",
-        "@typescript-eslint/typescript-estree": "8.54.0"
+        "@typescript-eslint/scope-manager": "8.53.0",
+        "@typescript-eslint/types": "8.53.0",
+        "@typescript-eslint/typescript-estree": "8.53.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -1827,13 +2043,13 @@
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "8.54.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.54.0.tgz",
-      "integrity": "sha512-VFlhGSl4opC0bprJiItPQ1RfUhGDIBokcPwaFH4yiBCaNPeld/9VeXbiPO1cLyorQi1G1vL+ecBk1x8o1axORA==",
+      "version": "8.53.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.53.0.tgz",
+      "integrity": "sha512-LZ2NqIHFhvFwxG0qZeLL9DvdNAHPGCY5dIRwBhyYeU+LfLhcStE1ImjsuTG/WaVh3XysGaeLW8Rqq7cGkPCFvw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.54.0",
+        "@typescript-eslint/types": "8.53.0",
         "eslint-visitor-keys": "^4.2.1"
       },
       "engines": {
@@ -2407,9 +2623,9 @@
       "license": "MIT"
     },
     "node_modules/baseline-browser-mapping": {
-      "version": "2.9.19",
-      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.19.tgz",
-      "integrity": "sha512-ipDqC8FrAl/76p2SSWKSI+H9tFwm7vYqXQrItCuiVPt26Km0jS+NzSsBWAaBusvSbQcfJG+JitdMm+wZAgTYqg==",
+      "version": "2.9.14",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.14.tgz",
+      "integrity": "sha512-B0xUquLkiGLgHhpPBqvl7GWegWBUNuujQ6kXd/r1U38ElPT6Ok8KZ8e+FpUGEc2ZoRQUzq/aUnaKFc/svWUGSg==",
       "license": "Apache-2.0",
       "bin": {
         "baseline-browser-mapping": "dist/cli.js"
@@ -2534,9 +2750,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001769",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001769.tgz",
-      "integrity": "sha512-BCfFL1sHijQlBGWBMuJyhZUhzo7wer5sVj9hqekB/7xn0Ypy+pER/edCYQm4exbXj4WiySGp40P8UuTh6w1srg==",
+      "version": "1.0.30001764",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001764.tgz",
+      "integrity": "sha512-9JGuzl2M+vPL+pz70gtMF9sHdMFbY9FJaQBi186cHKH3pSzDvzoUJUPV6fqiKIMyXbud9ZLg4F3Yza1vJ1+93g==",
       "funding": [
         {
           "type": "opencollective",
@@ -2576,6 +2792,15 @@
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
       "license": "MIT"
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -2629,9 +2854,130 @@
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "license": "ISC",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.1.tgz",
+      "integrity": "sha512-ryitBnaRbXQtgZ/gU50GSn6jQRwinSCQclpakXymvLd8ytTgE5bmSfgYcUxD7XYL34qHhFDyVk71qqKsfSyvmA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -2711,6 +3057,12 @@
         }
       }
     },
+    "node_modules/decimal.js-light": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
+      "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==",
+      "license": "MIT"
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -2793,9 +3145,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.286",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.286.tgz",
-      "integrity": "sha512-9tfDXhJ4RKFNerfjdCcZfufu49vg620741MNs26a9+bhLThdB+plgMeou98CAaHu/WATj2iHOOHTp1hWtABj2A==",
+      "version": "1.5.267",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.267.tgz",
+      "integrity": "sha512-0Drusm6MVRXSOJpGbaSVgcQsuB4hEkMpHXaVstcPmhu5LIedxs1xNK/nIxmQIU/RPC0+1/o0AVZfBTkTNJOdUw==",
       "dev": true,
       "license": "ISC"
     },
@@ -2807,14 +3159,14 @@
       "license": "MIT"
     },
     "node_modules/enhanced-resolve": {
-      "version": "5.19.0",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.19.0.tgz",
-      "integrity": "sha512-phv3E1Xl4tQOShqSte26C7Fl84EwUdZsyOuSSk9qtAGyyQs2s3jJzComh+Abf4g187lUUAvH+H26omrqia2aGg==",
+      "version": "5.18.4",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.4.tgz",
+      "integrity": "sha512-LgQMM4WXU3QI+SYgEc2liRgznaD5ojbmY3sb8LxyguVkIg5FxdpTkvk72te2R38/TGKxH634oLxXRGY6d7AP+Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "graceful-fs": "^4.2.4",
-        "tapable": "^2.3.0"
+        "tapable": "^2.2.0"
       },
       "engines": {
         "node": ">=10.13.0"
@@ -2997,6 +3349,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/es-toolkit": {
+      "version": "1.43.0",
+      "resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.43.0.tgz",
+      "integrity": "sha512-SKCT8AsWvYzBBuUqMk4NPwFlSdqLpJwmy6AP322ERn8W2YLIB6JBXnwMI2Qsh2gfphT3q7EKAxKb23cvFHFwKA==",
+      "license": "MIT",
+      "workspaces": [
+        "docs",
+        "benchmarks"
+      ]
+    },
     "node_modules/escalade": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
@@ -3081,13 +3443,13 @@
       }
     },
     "node_modules/eslint-config-next": {
-      "version": "16.1.6",
-      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-16.1.6.tgz",
-      "integrity": "sha512-vKq40io2B0XtkkNDYyleATwblNt8xuh3FWp8SpSz3pt7P01OkBFlKsJZ2mWt5WsCySlDQLckb1zMY9yE9Qy0LA==",
+      "version": "16.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-16.1.1.tgz",
+      "integrity": "sha512-55nTpVWm3qeuxoQKLOjQVciKZJUphKrNM0fCcQHAIOGl6VFXgaqeMfv0aKJhs7QtcnlAPhNVqsqRfRjeKBPIUA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@next/eslint-plugin-next": "16.1.6",
+        "@next/eslint-plugin-next": "16.1.1",
         "eslint-import-resolver-node": "^0.3.6",
         "eslint-import-resolver-typescript": "^3.5.2",
         "eslint-plugin-import": "^2.32.0",
@@ -3444,6 +3806,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/eventemitter3": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
+      "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==",
+      "license": "MIT"
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -3704,9 +4072,9 @@
       }
     },
     "node_modules/get-tsconfig": {
-      "version": "4.13.6",
-      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.13.6.tgz",
-      "integrity": "sha512-shZT/QMiSHc/YBLxxOkMtgSid5HFoauqCE3/exfsEcwg1WkeqjG+V40yBbBrsD+jW2HDXcs28xOfcbm2jI8Ddw==",
+      "version": "4.13.0",
+      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.13.0.tgz",
+      "integrity": "sha512-1VKTZJCwBrvbd+Wn3AOgQP/2Av+TfTCOlE4AcRJE72W1ksZXbAx8PPBR9RzgTeSPzlPMHrbANMH3LbltH73wxQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3890,6 +4258,15 @@
         "hermes-estree": "0.25.1"
       }
     },
+    "node_modules/iceberg-js": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/iceberg-js/-/iceberg-js-0.8.1.tgz",
+      "integrity": "sha512-1dhVQZXhcHje7798IVM+xoo/1ZdVfzOMIc8/rgVSijRK38EDqOJoGula9N/8ZI5RD8QTxNQtK/Gozpr+qUqRRA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -3900,6 +4277,16 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immer": {
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-10.2.0.tgz",
+      "integrity": "sha512-d/+XTN3zfODyjr89gM3mPq1WNX2B8pYsu7eORitdwyA2sBubnTl3laYlBk4sXY5FUa5qTZGBDPJICVbvqzjlbw==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
     "node_modules/import-fresh": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
@@ -3942,6 +4329,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/is-array-buffer": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
@@ -4024,9 +4420,9 @@
       }
     },
     "node_modules/is-bun-module/node_modules/semver": {
-      "version": "7.7.4",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
-      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
+      "version": "7.7.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
+      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
       "dev": true,
       "license": "ISC",
       "bin": {
@@ -4833,6 +5229,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.562.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.562.0.tgz",
+      "integrity": "sha512-82hOAu7y0dbVuFfmO4bYF1XEwYk/mEbM5E+b1jgci/udUBEE/R7LF5Ip0CCEmXe8AybRM8L+04eP+LGZeDvkiw==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.21",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
@@ -4949,12 +5354,12 @@
       "license": "MIT"
     },
     "node_modules/next": {
-      "version": "16.1.6",
-      "resolved": "https://registry.npmjs.org/next/-/next-16.1.6.tgz",
-      "integrity": "sha512-hkyRkcu5x/41KoqnROkfTm2pZVbKxvbZRuNvKXLRXxs3VfyO0WhY50TQS40EuKO9SW3rBj/sF3WbVwDACeMZyw==",
+      "version": "16.1.1",
+      "resolved": "https://registry.npmjs.org/next/-/next-16.1.1.tgz",
+      "integrity": "sha512-QI+T7xrxt1pF6SQ/JYFz95ro/mg/1Znk5vBebsWwbpejj1T0A23hO7GYEaVac9QUOT2BIMiuzm0L99ooq7k0/w==",
       "license": "MIT",
       "dependencies": {
-        "@next/env": "16.1.6",
+        "@next/env": "16.1.1",
         "@swc/helpers": "0.5.15",
         "baseline-browser-mapping": "^2.8.3",
         "caniuse-lite": "^1.0.30001579",
@@ -4968,14 +5373,14 @@
         "node": ">=20.9.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "16.1.6",
-        "@next/swc-darwin-x64": "16.1.6",
-        "@next/swc-linux-arm64-gnu": "16.1.6",
-        "@next/swc-linux-arm64-musl": "16.1.6",
-        "@next/swc-linux-x64-gnu": "16.1.6",
-        "@next/swc-linux-x64-musl": "16.1.6",
-        "@next/swc-win32-arm64-msvc": "16.1.6",
-        "@next/swc-win32-x64-msvc": "16.1.6",
+        "@next/swc-darwin-arm64": "16.1.1",
+        "@next/swc-darwin-x64": "16.1.1",
+        "@next/swc-linux-arm64-gnu": "16.1.1",
+        "@next/swc-linux-arm64-musl": "16.1.1",
+        "@next/swc-linux-x64-gnu": "16.1.1",
+        "@next/swc-linux-x64-musl": "16.1.1",
+        "@next/swc-win32-arm64-msvc": "16.1.1",
+        "@next/swc-win32-x64-msvc": "16.1.1",
         "sharp": "^0.34.4"
       },
       "peerDependencies": {
@@ -5403,9 +5808,76 @@
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true,
       "license": "MIT"
     },
+    "node_modules/react-redux": {
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
+      "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/use-sync-external-store": "^0.0.6",
+        "use-sync-external-store": "^1.4.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.2.25 || ^19",
+        "react": "^18.0 || ^19",
+        "redux": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/recharts": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-3.6.0.tgz",
+      "integrity": "sha512-L5bjxvQRAe26RlToBAziKUB7whaGKEwD3znoM6fz3DrTowCIC/FnJYnuq1GEzB8Zv2kdTfaxQfi5GoH0tBinyg==",
+      "license": "MIT",
+      "workspaces": [
+        "www"
+      ],
+      "dependencies": {
+        "@reduxjs/toolkit": "1.x.x || 2.x.x",
+        "clsx": "^2.1.1",
+        "decimal.js-light": "^2.5.1",
+        "es-toolkit": "^1.39.3",
+        "eventemitter3": "^5.0.1",
+        "immer": "^10.1.1",
+        "react-redux": "8.x.x || 9.x.x",
+        "reselect": "5.1.1",
+        "tiny-invariant": "^1.3.3",
+        "use-sync-external-store": "^1.2.2",
+        "victory-vendor": "^37.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-is": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/redux": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
+      "license": "MIT"
+    },
+    "node_modules/redux-thunk": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
+      "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "redux": "^5.0.0"
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
@@ -5450,6 +5922,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/reselect": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
+      "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==",
+      "license": "MIT"
+    },
     "node_modules/resolve": {
       "version": "1.22.11",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
@@ -5692,9 +6170,9 @@
       }
     },
     "node_modules/sharp/node_modules/semver": {
-      "version": "7.7.4",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
-      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
+      "version": "7.7.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
+      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
       "license": "ISC",
       "optional": true,
       "bin": {
@@ -6018,6 +6496,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/tailwind-merge": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.4.0.tgz",
+      "integrity": "sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "4.1.18",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.18.tgz",
@@ -6039,6 +6527,12 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
+      "license": "MIT"
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.15",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
@@ -6251,16 +6745,16 @@
       }
     },
     "node_modules/typescript-eslint": {
-      "version": "8.54.0",
-      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.54.0.tgz",
-      "integrity": "sha512-CKsJ+g53QpsNPqbzUsfKVgd3Lny4yKZ1pP4qN3jdMOg/sisIDLGyDMezycquXLE5JsEU0wp3dGNdzig0/fmSVQ==",
+      "version": "8.53.0",
+      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.53.0.tgz",
+      "integrity": "sha512-xHURCQNxZ1dsWn0sdOaOfCSQG0HKeqSj9OexIxrz6ypU6wHYOdX2I3D2b8s8wFSsSOYJb+6q283cLiLlkEsBYw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/eslint-plugin": "8.54.0",
-        "@typescript-eslint/parser": "8.54.0",
-        "@typescript-eslint/typescript-estree": "8.54.0",
-        "@typescript-eslint/utils": "8.54.0"
+        "@typescript-eslint/eslint-plugin": "8.53.0",
+        "@typescript-eslint/parser": "8.53.0",
+        "@typescript-eslint/typescript-estree": "8.53.0",
+        "@typescript-eslint/utils": "8.53.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -6297,7 +6791,6 @@
       "version": "6.21.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
       "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/unrs-resolver": {
@@ -6376,6 +6869,37 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/victory-vendor": {
+      "version": "37.3.6",
+      "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-37.3.6.tgz",
+      "integrity": "sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ==",
+      "license": "MIT AND ISC",
+      "dependencies": {
+        "@types/d3-array": "^3.0.3",
+        "@types/d3-ease": "^3.0.0",
+        "@types/d3-interpolate": "^3.0.1",
+        "@types/d3-scale": "^4.0.2",
+        "@types/d3-shape": "^3.1.0",
+        "@types/d3-time": "^3.0.0",
+        "@types/d3-timer": "^3.0.0",
+        "d3-array": "^3.1.6",
+        "d3-ease": "^3.0.1",
+        "d3-interpolate": "^3.0.1",
+        "d3-scale": "^4.0.2",
+        "d3-shape": "^3.1.0",
+        "d3-time": "^3.0.0",
+        "d3-timer": "^3.0.1"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -6460,9 +6984,9 @@
       }
     },
     "node_modules/which-typed-array": {
-      "version": "1.1.20",
-      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.20.tgz",
-      "integrity": "sha512-LYfpUkmqwl0h9A2HL09Mms427Q1RZWuOHsukfVcKRq9q95iQxdw0ix1JQrqbcDR9PH1QDwf5Qo8OZb5lksZ8Xg==",
+      "version": "1.1.19",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.19.tgz",
+      "integrity": "sha512-rEvr90Bck4WZt9HHFC4DJMsjvu7x+r6bImz0/BrbWb7A2djJ8hnZMrWnHo9F8ssv0OMErasDhftrfROTyqSDrw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -6491,6 +7015,27 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/ws": {
+      "version": "8.19.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.19.0.tgz",
+      "integrity": "sha512-blAT2mjOEIi0ZzruJfIhb3nps74PRWTCz1IjglWEEpQl5XS/UNama6u2/rjFkDDouqr4L67ry+1aGIALViWjDg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
@@ -6512,9 +7057,9 @@
       }
     },
     "node_modules/zod": {
-      "version": "4.3.6",
-      "resolved": "https://registry.npmjs.org/zod/-/zod-4.3.6.tgz",
-      "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
+      "version": "4.3.5",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-4.3.5.tgz",
+      "integrity": "sha512-k7Nwx6vuWx1IJ9Bjuf4Zt1PEllcwe7cls3VNzm4CQ1/hgtFUK2bRNG3rvnpPUhFjmqJKAKtjV576KnUkHocg/g==",
       "dev": true,
       "license": "MIT",
       "funding": {

Frontend/package.json

@@ -9,9 +9,14 @@
     "lint": "eslint"
   },
   "dependencies": {
-    "next": "16.1.6",
+    "@supabase/supabase-js": "^2.90.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.562.0",
+    "next": "16.1.1",
     "react": "19.2.3",
-    "react-dom": "19.2.3"
+    "react-dom": "19.2.3",
+    "recharts": "^3.6.0",
+    "tailwind-merge": "^3.4.0"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",
@@ -19,7 +24,7 @@
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "eslint": "^9",
-    "eslint-config-next": "16.1.6",
+    "eslint-config-next": "16.1.1",
     "tailwindcss": "^4",
     "typescript": "^5"
   }