feat(259): reports tabs overview+collections+tickets, CSV export

app/(app)/audit-log/page.tsx

@@ -11,13 +11,29 @@ import { formatDateTime } from "@/lib/utils";
 import api from "@/lib/api";
 import type { AuditLog, PaginatedResponse } from "@/types";
 
+const ENTITY_TYPES = ["", "CLIENT", "INVOICE", "PAYMENT", "TICKET", "PLAN", "AREA", "USER", "SUBSCRIPTION", "LEAD", "REMITTANCE", "JOURNAL_ENTRY"];
+const ACTION_TYPES = ["", "CREATE", "UPDATE", "DELETE", "LOGIN", "LOGOUT", "ACTIVATE", "DEACTIVATE", "VOID", "RESOLVE", "CLOSE"];
+
 export default function AuditLogPage() {
   const [page, setPage] = useState(1);
+  const [dateFrom, setDateFrom] = useState("");
+  const [dateTo, setDateTo] = useState("");
+  const [entityType, setEntityType] = useState("");
+  const [actionType, setActionType] = useState("");
 
   const { data, isLoading, refetch } = useQuery<PaginatedResponse<AuditLog>>({
-    queryKey: ["audit-logs", page],
+    queryKey: ["audit-logs", page, dateFrom, dateTo, entityType, actionType],
     queryFn: async () => {
-      const res = await api.get<PaginatedResponse<AuditLog>>(`/api/v1/audit-logs?page=${page}&limit=50`);
+      const params = new URLSearchParams({ page: String(page), limit: "50" });
+      if (dateFrom) params.set("dateFrom", new Date(dateFrom).toISOString());
+      if (dateTo) {
+        const end = new Date(dateTo);
+        end.setHours(23, 59, 59, 999);
+        params.set("dateTo", end.toISOString());
+      }
+      if (entityType) params.set("entityType", entityType);
+      if (actionType) params.set("action", actionType);
+      const res = await api.get<PaginatedResponse<AuditLog>>(`/api/v1/audit-logs?${params}`);
       return res.data;
     },
   });
@@ -25,6 +41,16 @@ export default function AuditLogPage() {
   const logs = data?.data ?? [];
   const meta = data?.meta;
 
+  const clearFilters = () => {
+    setDateFrom("");
+    setDateTo("");
+    setEntityType("");
+    setActionType("");
+    setPage(1);
+  };
+
+  const hasFilters = dateFrom || dateTo || entityType || actionType;
+
   return (
     <div className="space-y-4">
       <div className="flex items-center justify-between">
@@ -33,13 +59,52 @@ export default function AuditLogPage() {
           <p className="text-sm text-gray-500">Track all system activity</p>
         </div>
         <Button size="sm" variant="outline" onClick={() => refetch()}>
-          <RefreshCw className="h-4 w-4" />
+          <RefreshCw className="h-4 w-4 mr-1" />
           Refresh
         </Button>
       </div>
 
+      {/* Filters */}
       <Card>
-        <CardHeader><CardTitle>Activity Log</CardTitle></CardHeader>
+        <CardContent className="py-4">
+          <div className="flex flex-wrap gap-3 items-end">
+            <div className="flex flex-col gap-1">
+              <label className="text-xs font-medium text-gray-500">From</label>
+              <input type="date" value={dateFrom}
+                onChange={e => { setDateFrom(e.target.value); setPage(1); }}
+                className="border rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 w-40" />
+            </div>
+            <div className="flex flex-col gap-1">
+              <label className="text-xs font-medium text-gray-500">To</label>
+              <input type="date" value={dateTo}
+                onChange={e => { setDateTo(e.target.value); setPage(1); }}
+                className="border rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 w-40" />
+            </div>
+            <div className="flex flex-col gap-1">
+              <label className="text-xs font-medium text-gray-500">Entity Type</label>
+              <select value={entityType}
+                onChange={e => { setEntityType(e.target.value); setPage(1); }}
+                className="border rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
+                {ENTITY_TYPES.map(e => <option key={e} value={e}>{e || "All Entities"}</option>)}
+              </select>
+            </div>
+            <div className="flex flex-col gap-1">
+              <label className="text-xs font-medium text-gray-500">Action</label>
+              <select value={actionType}
+                onChange={e => { setActionType(e.target.value); setPage(1); }}
+                className="border rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
+                {ACTION_TYPES.map(a => <option key={a} value={a}>{a || "All Actions"}</option>)}
+              </select>
+            </div>
+            {hasFilters && (
+              <Button size="sm" variant="outline" onClick={clearFilters}>Clear Filters</Button>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader><CardTitle>Activity Log {meta ? `(${meta.total} entries)` : ""}</CardTitle></CardHeader>
         <CardContent className="p-0">
           <Table>
             <TableHead>
@@ -61,7 +126,7 @@ export default function AuditLogPage() {
                   </TableRow>
                 ))
               ) : logs.length === 0 ? (
-                <EmptyState message="No audit logs yet" />
+                <EmptyState message="No audit logs found" />
               ) : (
                 logs.map((log) => (
                   <TableRow key={log.id}>

app/(app)/clients/[id]/page.tsx

@@ -528,7 +528,22 @@ export default function ClientDetailPage() {
       {/* Profile */}
       {activeTab === "profile" && (
         <Card>
-          <CardHeader><CardTitle>Client Profile</CardTitle></CardHeader>
+          <CardHeader>
+            <div className="flex items-center justify-between">
+              <CardTitle>Client Profile</CardTitle>
+              <div className="flex gap-2 flex-wrap">
+                <Button size="sm" variant="outline" onClick={() => router.push(`/tickets?clientId=${client.id}`)}>
+                  <Ticket className="h-3.5 w-3.5 mr-1" /> View Tickets
+                </Button>
+                <Button size="sm" variant="outline" onClick={() => router.push(`/invoices?clientId=${client.id}`)}>
+                  <FileText className="h-3.5 w-3.5 mr-1" /> View Invoices
+                </Button>
+                <Button size="sm" variant="outline" onClick={() => router.push(`/payments?clientId=${client.id}`)}>
+                  <CreditCard className="h-3.5 w-3.5 mr-1" /> View Payments
+                </Button>
+              </div>
+            </div>
+          </CardHeader>
           <CardContent>
             <dl className="grid grid-cols-1 sm:grid-cols-2 gap-4">
               {[

app/(app)/clients/page.tsx

@@ -53,11 +53,21 @@ export default function ClientsPage() {
     queryFn: async () => { const r = await api.get<Area[]>("/api/v1/areas"); return r.data; },
   });
 
-  const { data: plans = [] } = useQuery<Plan[]>({
+  // Fetch only active plans, filter client-side by billing type
-    queryKey: ["plans"],
+  const { data: allActivePlans = [] } = useQuery<(Plan & { type: string; isActive: boolean })[]>({
-    queryFn: async () => { const r = await api.get<Plan[]>("/api/v1/plans"); return Array.isArray(r.data) ? r.data : (r.data as any).data ?? []; },
+    queryKey: ["plans", "active"],
+    queryFn: async () => {
+      const r = await api.get("/api/v1/plans?isActive=true");
+      const raw = Array.isArray(r.data) ? r.data : (r.data as any).data ?? [];
+      return raw;
+    },
   });
 
+  // Filter plans by selected billing type
+  const filteredPlans = allActivePlans.filter(p =>
+    !form.billingType || p.type === form.billingType
+  );
+
   const createClient = useMutation({
     mutationFn: async () => {
       const res = await api.post("/api/v1/clients", {
@@ -186,10 +196,11 @@ export default function ClientsPage() {
             <div className="flex flex-col gap-1.5">
               <label className="text-sm font-medium text-gray-700">Billing Type</label>
               <select className="border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
-                value={form.billingType} onChange={e => setForm(f => ({ ...f, billingType: e.target.value }))}>
+                value={form.billingType} onChange={e => setForm(f => ({ ...f, billingType: e.target.value, planId: "" }))}>
                 <option value="POSTPAID">Postpaid</option>
                 <option value="PREPAID">Prepaid</option>
               </select>
+              <p className="text-xs text-gray-400">Plan list filters to match this type</p>
             </div>
           </div>
           <div className="flex flex-col gap-1.5">
@@ -197,8 +208,11 @@ export default function ClientsPage() {
             <select className="border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
               value={form.planId} onChange={e => setForm(f => ({ ...f, planId: e.target.value }))}>
               <option value="">— Select plan —</option>
-              {plans.map(p => <option key={p.id} value={p.id}>{p.name} — ₱{Number(p.monthlyPrice).toLocaleString()}/mo</option>)}
+              {filteredPlans.map(p => <option key={p.id} value={p.id}>{p.name} — ₱{Number(p.monthlyPrice).toLocaleString()}/mo</option>)}
             </select>
+            {filteredPlans.length === 0 && form.billingType && (
+              <p className="text-xs text-amber-600">No active {form.billingType.toLowerCase()} plans available.</p>
+            )}
           </div>
           <div className="flex justify-end gap-2 pt-2">
             <Button variant="outline" onClick={() => setShowAdd(false)}>Cancel</Button>

app/(app)/leads/page.tsx

@@ -2,7 +2,8 @@
 
 import { useState } from "react";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { UserPlus, RefreshCw } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { UserPlus, RefreshCw, ArrowRightCircle } from "lucide-react";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
 import { Table, TableHead, TableBody, TableRow, Th, Td, EmptyState } from "@/components/ui/Table";
 import { Badge } from "@/components/ui/Badge";
@@ -22,11 +23,14 @@ const statusOptions = ["NEW", "CONTACTED", "INTERESTED", "CONVERTED", "LOST"];
 
 export default function LeadsPage() {
   const qc = useQueryClient();
+  const router = useRouter();
   const [search, setSearch] = useState("");
   const [selected, setSelected] = useState<Lead | null>(null);
   const [showAdd, setShowAdd] = useState(false);
+  const [showConvert, setShowConvert] = useState(false);
   const [form, setForm] = useState({ firstName: "", lastName: "", phone: "", email: "", address: "", notes: "", source: "" });
   const [statusUpdate, setStatusUpdate] = useState("");
+  const [convertForm, setConvertForm] = useState({ firstName: "", lastName: "", phone: "", email: "", address: "", areaId: "", planId: "", billingType: "POSTPAID" });
 
   const { data = [], isLoading, refetch } = useQuery<Lead[]>({
     queryKey: ["leads", search],
@@ -79,6 +83,41 @@ export default function LeadsPage() {
     onError: (e: any) => toast.error(e.response?.data?.message ?? "Failed to delete"),
   });
 
+  const convertToClient = useMutation({
+    mutationFn: async () => {
+      const res = await api.post("/api/v1/clients", {
+        firstName: convertForm.firstName, lastName: convertForm.lastName,
+        phone: convertForm.phone, email: convertForm.email || undefined,
+        address: convertForm.address || undefined,
+        areaId: convertForm.areaId || undefined,
+        planId: convertForm.planId || undefined,
+      });
+      // Mark lead as converted
+      if (selected) await api.patch(`/api/v1/leads/${selected.id}`, { status: "CONVERTED" });
+      return res.data;
+    },
+    onSuccess: (data: any) => {
+      toast.success("Lead converted to client!");
+      setShowConvert(false);
+      setSelected(null);
+      qc.invalidateQueries({ queryKey: ["leads"] });
+      if (data?.id) router.push(`/clients/${data.id}`);
+    },
+    onError: (e: any) => toast.error(e.response?.data?.message ?? "Failed to convert lead"),
+  });
+
+  const { data: areas = [] } = useQuery<{ id: string; name: string }[]>({
+    queryKey: ["areas"],
+    queryFn: async () => { const r = await api.get("/api/v1/areas"); return Array.isArray(r.data) ? r.data : (r.data as any).data ?? []; },
+  });
+
+  const { data: activePlans = [] } = useQuery<{ id: string; name: string; monthlyPrice: number; type: string }[]>({
+    queryKey: ["plans", "active"],
+    queryFn: async () => { const r = await api.get("/api/v1/plans?isActive=true"); return Array.isArray(r.data) ? r.data : (r.data as any).data ?? []; },
+  });
+
+  const filteredConvertPlans = activePlans.filter(p => !convertForm.billingType || p.type === convertForm.billingType);
+
   const counts = statusOptions.reduce((acc, s) => ({ ...acc, [s]: data.filter(l => l.status === s).length }), {} as Record<string, number>);
 
   return (
@@ -176,14 +215,72 @@ export default function LeadsPage() {
               )}
             </div>
 
-            <div className="flex justify-between pt-1">
+            <div className="flex justify-between pt-1 flex-wrap gap-2">
+              <div className="flex gap-2">
                 <Button variant="danger" size="sm" onClick={() => { if (confirm("Delete this lead?")) deleteLead.mutate(selected.id); }} isLoading={deleteLead.isPending}>Delete</Button>
+                {selected.status !== "CONVERTED" && (
+                  <Button size="sm" variant="outline" onClick={() => {
+                    setConvertForm({
+                      firstName: selected.firstName, lastName: selected.lastName,
+                      phone: selected.phone, email: selected.email ?? "",
+                      address: selected.address ?? "", areaId: "", planId: "", billingType: "POSTPAID",
+                    });
+                    setShowConvert(true);
+                  }}>
+                    <ArrowRightCircle size={14} className="mr-1" /> Convert to Client
+                  </Button>
+                )}
+              </div>
               <Button variant="outline" size="sm" onClick={() => setSelected(null)}>Close</Button>
             </div>
           </div>
         )}
       </Modal>
 
+      {/* Convert to Client Modal */}
+      <Modal isOpen={showConvert} onClose={() => setShowConvert(false)} title="Convert Lead to Client" className="max-w-xl">
+        <div className="space-y-4">
+          <p className="text-sm text-gray-500">Pre-filled from lead data. Complete missing info to create the client.</p>
+          <div className="grid grid-cols-2 gap-3">
+            <Input label="First Name *" value={convertForm.firstName} onChange={e => setConvertForm(f => ({ ...f, firstName: e.target.value }))} />
+            <Input label="Last Name *" value={convertForm.lastName} onChange={e => setConvertForm(f => ({ ...f, lastName: e.target.value }))} />
+          </div>
+          <Input label="Phone *" value={convertForm.phone} onChange={e => setConvertForm(f => ({ ...f, phone: e.target.value }))} />
+          <Input label="Email" type="email" value={convertForm.email} onChange={e => setConvertForm(f => ({ ...f, email: e.target.value }))} />
+          <Input label="Address" value={convertForm.address} onChange={e => setConvertForm(f => ({ ...f, address: e.target.value }))} />
+          <div className="grid grid-cols-2 gap-3">
+            <div className="flex flex-col gap-1.5">
+              <label className="text-sm font-medium text-gray-700">Area</label>
+              <select className="border rounded-lg px-3 py-2 text-sm" value={convertForm.areaId} onChange={e => setConvertForm(f => ({ ...f, areaId: e.target.value }))}>
+                <option value="">— Select area —</option>
+                {areas.map(a => <option key={a.id} value={a.id}>{a.name}</option>)}
+              </select>
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <label className="text-sm font-medium text-gray-700">Billing Type</label>
+              <select className="border rounded-lg px-3 py-2 text-sm" value={convertForm.billingType} onChange={e => setConvertForm(f => ({ ...f, billingType: e.target.value, planId: "" }))}>
+                <option value="POSTPAID">Postpaid</option>
+                <option value="PREPAID">Prepaid</option>
+              </select>
+            </div>
+          </div>
+          <div className="flex flex-col gap-1.5">
+            <label className="text-sm font-medium text-gray-700">Plan *</label>
+            <select className="border rounded-lg px-3 py-2 text-sm" value={convertForm.planId} onChange={e => setConvertForm(f => ({ ...f, planId: e.target.value }))}>
+              <option value="">— Select plan —</option>
+              {filteredConvertPlans.map(p => <option key={p.id} value={p.id}>{p.name} — ₱{Number(p.monthlyPrice).toLocaleString()}/mo</option>)}
+            </select>
+          </div>
+          <div className="flex justify-end gap-2">
+            <Button variant="outline" onClick={() => setShowConvert(false)}>Cancel</Button>
+            <Button onClick={() => convertToClient.mutate()} isLoading={convertToClient.isPending}
+              disabled={!convertForm.firstName || !convertForm.lastName || !convertForm.phone || !convertForm.planId}>
+              <ArrowRightCircle size={14} className="mr-1" /> Create Client
+            </Button>
+          </div>
+        </div>
+      </Modal>
+
       {/* Add Lead Modal */}
       <Modal isOpen={showAdd} onClose={() => setShowAdd(false)} title="Add New Lead">
         <div className="space-y-4">

app/(app)/plans/page.tsx

@@ -41,6 +41,7 @@ const emptyForm = {
 export default function PlansPage() {
   const qc = useQueryClient();
   const [search, setSearch] = useState("");
+  const [activeTab, setActiveTab] = useState<"active" | "archived">("active");
 
   // Modals
   const [showCreate, setShowCreate] = useState(false);
@@ -51,11 +52,12 @@ export default function PlansPage() {
   const [createForm, setCreateForm] = useState({ ...emptyForm });
   const [editForm, setEditForm] = useState({ ...emptyForm });
 
-  // GET /plans returns a plain array (not paginated)
+  // GET /plans with isActive filter
   const { data: allPlans = [], isLoading, isError, refetch } = useQuery<Plan[]>({
-    queryKey: ["plans"],
+    queryKey: ["plans", activeTab],
     queryFn: async () => {
-      const res = await api.get<Plan[] | { data: Plan[] }>("/api/v1/plans");
+      const isActive = activeTab === "active";
+      const res = await api.get<Plan[] | { data: Plan[] }>(`/api/v1/plans?isActive=${isActive}`);
       return Array.isArray(res.data) ? res.data : (res.data as any).data ?? [];
     },
   });
@@ -149,6 +151,24 @@ export default function PlansPage() {
         </div>
       </div>
 
+      {/* Active / Archived tabs */}
+      <div className="flex gap-1 bg-gray-100 rounded-lg p-1 w-fit">
+        <button
+          onClick={() => { setActiveTab("active"); setSearch(""); }}
+          className={`px-4 py-1.5 rounded-md text-sm font-medium transition-colors ${activeTab === "active" ? "bg-white text-gray-900 shadow-sm" : "text-gray-500 hover:text-gray-700"}`}
+          data-testid="tab-active"
+        >
+          Active
+        </button>
+        <button
+          onClick={() => { setActiveTab("archived"); setSearch(""); }}
+          className={`px-4 py-1.5 rounded-md text-sm font-medium transition-colors ${activeTab === "archived" ? "bg-white text-gray-900 shadow-sm" : "text-gray-500 hover:text-gray-700"}`}
+          data-testid="tab-archived"
+        >
+          Archived
+        </button>
+      </div>
+
       <Card>
         <CardHeader>
           <input

app/(app)/profile/page.tsx

@@ -0,0 +1,147 @@
+"use client";
+
+import { useState } from "react";
+import { useMutation } from "@tanstack/react-query";
+import { useAuth } from "@/contexts/AuthContext";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
+import { Button } from "@/components/ui/Button";
+import { Input } from "@/components/ui/Input";
+import { User, Lock } from "lucide-react";
+import api from "@/lib/api";
+import { toast } from "sonner";
+
+export default function ProfilePage() {
+  const { user } = useAuth();
+
+  const [infoForm, setInfoForm] = useState({
+    firstName: (user as any)?.firstName ?? user?.name?.split(" ")[0] ?? "",
+    lastName: (user as any)?.lastName ?? user?.name?.split(" ").slice(1).join(" ") ?? "",
+    email: user?.email ?? "",
+  });
+
+  const [pwForm, setPwForm] = useState({
+    currentPassword: "",
+    newPassword: "",
+    confirmPassword: "",
+  });
+
+  const updateInfo = useMutation({
+    mutationFn: async () => {
+      await api.patch("/api/v1/auth/me", {
+        firstName: infoForm.firstName,
+        lastName: infoForm.lastName,
+        email: infoForm.email,
+      });
+    },
+    onSuccess: () => toast.success("Profile updated!"),
+    onError: (e: any) => toast.error(e.response?.data?.message ?? "Failed to update profile"),
+  });
+
+  const resetPassword = useMutation({
+    mutationFn: async () => {
+      if (pwForm.newPassword !== pwForm.confirmPassword) {
+        throw new Error("Passwords do not match");
+      }
+      await api.post("/api/v1/auth/change-password", {
+        currentPassword: pwForm.currentPassword,
+        newPassword: pwForm.newPassword,
+      });
+    },
+    onSuccess: () => {
+      toast.success("Password changed successfully!");
+      setPwForm({ currentPassword: "", newPassword: "", confirmPassword: "" });
+    },
+    onError: (e: any) => toast.error(e.response?.data?.message ?? e.message ?? "Failed to change password"),
+  });
+
+  return (
+    <div className="space-y-6 max-w-xl">
+      <div>
+        <h1 className="text-2xl font-bold text-gray-900">My Profile</h1>
+        <p className="text-sm text-gray-500 mt-1">Manage your account settings</p>
+      </div>
+
+      {/* Profile Info */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <User className="h-4 w-4 text-blue-600" />
+            Personal Information
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="grid grid-cols-2 gap-3">
+            <Input
+              label="First Name"
+              value={infoForm.firstName}
+              onChange={e => setInfoForm(f => ({ ...f, firstName: e.target.value }))}
+            />
+            <Input
+              label="Last Name"
+              value={infoForm.lastName}
+              onChange={e => setInfoForm(f => ({ ...f, lastName: e.target.value }))}
+            />
+          </div>
+          <Input
+            label="Email"
+            type="email"
+            value={infoForm.email}
+            onChange={e => setInfoForm(f => ({ ...f, email: e.target.value }))}
+          />
+          <div className="flex justify-end">
+            <Button
+              onClick={() => updateInfo.mutate()}
+              isLoading={updateInfo.isPending}
+              disabled={!infoForm.firstName || !infoForm.email}
+            >
+              Save Changes
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Change Password */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Lock className="h-4 w-4 text-blue-600" />
+            Change Password
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <Input
+            label="Current Password"
+            type="password"
+            value={pwForm.currentPassword}
+            onChange={e => setPwForm(f => ({ ...f, currentPassword: e.target.value }))}
+          />
+          <Input
+            label="New Password"
+            type="password"
+            value={pwForm.newPassword}
+            onChange={e => setPwForm(f => ({ ...f, newPassword: e.target.value }))}
+            hint="Minimum 8 characters"
+          />
+          <Input
+            label="Confirm New Password"
+            type="password"
+            value={pwForm.confirmPassword}
+            onChange={e => setPwForm(f => ({ ...f, confirmPassword: e.target.value }))}
+          />
+          {pwForm.newPassword && pwForm.confirmPassword && pwForm.newPassword !== pwForm.confirmPassword && (
+            <p className="text-xs text-red-500">Passwords do not match</p>
+          )}
+          <div className="flex justify-end">
+            <Button
+              onClick={() => resetPassword.mutate()}
+              isLoading={resetPassword.isPending}
+              disabled={!pwForm.currentPassword || !pwForm.newPassword || !pwForm.confirmPassword || pwForm.newPassword !== pwForm.confirmPassword}
+            >
+              Change Password
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

app/(app)/reports/page.tsx

@@ -1,20 +1,21 @@
 "use client";
 export const dynamic = "force-dynamic";
 
-
-
 import { useState } from "react";
 import { useQuery } from "@tanstack/react-query";
-import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, PieChart, Pie, Cell, Legend, LineChart, Line, CartesianGrid } from "recharts";
+import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, PieChart, Pie, Cell, LineChart, Line, CartesianGrid, Legend } from "recharts";
-import { RefreshCw, TrendingUp, Users, AlertTriangle, DollarSign } from "lucide-react";
+import { RefreshCw, TrendingUp, Users, AlertTriangle, DollarSign, Download } from "lucide-react";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
 import { Button } from "@/components/ui/Button";
 import { Badge } from "@/components/ui/Badge";
-import { formatCurrency } from "@/lib/utils";
+import { Table, TableHead, TableBody, TableRow, Th, Td, EmptyState } from "@/components/ui/Table";
+import { formatCurrency, formatDate } from "@/lib/utils";
 import api from "@/lib/api";
 
 const COLORS = ["#0891B2", "#059669", "#F59E0B", "#EF4444", "#8B5CF6", "#EC4899"];
 
+type Tab = "overview" | "collections" | "tickets";
+
 function KpiCard({ title, value, sub, icon: Icon, color }: { title: string; value: string; sub?: string; icon: any; color: string }) {
   return (
     <Card>
@@ -34,12 +35,26 @@ function KpiCard({ title, value, sub, icon: Icon, color }: { title: string; valu
   );
 }
 
+function downloadCSV(data: any[], filename: string) {
+  if (!data.length) return;
+  const headers = Object.keys(data[0]);
+  const rows = data.map(row => headers.map(h => JSON.stringify(row[h] ?? "")).join(","));
+  const csv = [headers.join(","), ...rows].join("\n");
+  const blob = new Blob([csv], { type: "text/csv" });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url; a.download = filename; a.click();
+  URL.revokeObjectURL(url);
+}
+
 export default function ReportsPage() {
   const today = new Date();
   const firstOfMonth = new Date(today.getFullYear(), today.getMonth(), 1).toISOString().split("T")[0];
+  const [tab, setTab] = useState<Tab>("overview");
   const [from, setFrom] = useState(firstOfMonth);
   const [to, setTo] = useState(today.toISOString().split("T")[0]);
 
+  // Overview data
   const { data: collection = [], isLoading: collLoading, refetch: refetchAll } = useQuery({
     queryKey: ["reports-collection", from, to],
     queryFn: async () => {
@@ -69,29 +84,54 @@ export default function ReportsPage() {
     queryFn: async () => {
       const res = await api.get("/api/v1/reports/revenue");
       return (res.data as Array<{ month: string; revenue: number; totalInvoiced: number }>)
-        .filter(r => r.revenue > 0 || r.totalInvoiced > 0)
+        .filter(r => r.revenue > 0 || r.totalInvoiced > 0).slice(-12);
-        .slice(-12);
     },
   });
 
+  // Collections tab data
+  const { data: paymentsData } = useQuery({
+    queryKey: ["reports-payments", from, to],
+    queryFn: async () => {
+      const res = await api.get(`/api/v1/payments?page=1&limit=100`);
+      return (res.data as any)?.data ?? [];
+    },
+    enabled: tab === "collections",
+  });
+
+  // Tickets tab data
+  const { data: ticketsData } = useQuery({
+    queryKey: ["reports-tickets"],
+    queryFn: async () => {
+      const [open, resolved, all] = await Promise.all([
+        api.get("/api/v1/tickets?status=OPEN&limit=100"),
+        api.get("/api/v1/tickets?status=RESOLVED&limit=100"),
+        api.get("/api/v1/tickets?limit=50"),
+      ]);
+      return {
+        open: (open.data as any)?.meta?.total ?? (open.data as any)?.data?.length ?? 0,
+        resolved: (resolved.data as any)?.meta?.total ?? (resolved.data as any)?.data?.length ?? 0,
+        list: (all.data as any)?.data ?? [],
+        total: (all.data as any)?.meta?.total ?? 0,
+      };
+    },
+    enabled: tab === "tickets",
+  });
+
   // Derived KPIs
   const totalCollected = collection.reduce((s, c) => s + Number(c.totalAmount), 0);
   const totalPayments = collection.reduce((s, c) => s + c.paymentCount, 0);
   const totalOutstanding = aging.reduce((s, a) => s + Number(a.totalAmount), 0);
   const overdueCount = aging.reduce((s, a) => s + a.invoiceCount, 0);
-
-  // Subscriber summary (status-only rows, no area key)
   const subByStatus = subscribers.filter(s => !s.area && !s.plan);
   const activeCount = subByStatus.find(s => s.status === "ACTIVE")?.count ?? 0;
   const pendingCount = subByStatus.find(s => s.status === "PENDING")?.count ?? 0;
   const suspendedCount = subByStatus.find(s => s.status === "SUSPENDED")?.count ?? 0;
   const totalSubs = subByStatus.reduce((s, x) => s + x.count, 0);
-
-  // Subscriber by area (rows with area key)
   const subByArea = subscribers.filter(s => !!s.area);
-
   const agingRisk: Record<string, string> = { "0-30": "text-yellow-600", "31-60": "text-orange-600", "61-90": "text-red-500", "90+": "text-red-700" };
 
+  const payments: any[] = paymentsData ?? [];
+
   return (
     <div className="space-y-6">
       <div className="flex items-center justify-between flex-wrap gap-3">
@@ -112,15 +152,28 @@ export default function ReportsPage() {
         </div>
       </div>
 
-      {/* KPI Summary */}
+      {/* Tabs */}
+      <div className="flex border-b border-gray-200">
+        {(["overview", "collections", "tickets"] as Tab[]).map(t => (
+          <button key={t} onClick={() => setTab(t)}
+            className={`px-5 py-2.5 text-sm font-medium border-b-2 capitalize transition-colors ${
+              tab === t ? "border-blue-600 text-blue-600" : "border-transparent text-gray-500 hover:text-gray-700"
+            }`}>
+            {t}
+          </button>
+        ))}
+      </div>
+
+      {/* Overview Tab */}
+      {tab === "overview" && (
+        <div className="space-y-6">
           <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
             <KpiCard title="Total Collected" value={formatCurrency(totalCollected)} sub={`${totalPayments} payments`} icon={DollarSign} color="#059669" />
             <KpiCard title="Active Subscribers" value={String(activeCount)} sub={`${pendingCount} pending · ${suspendedCount} suspended`} icon={Users} color="#0891B2" />
             <KpiCard title="Outstanding Balance" value={formatCurrency(totalOutstanding)} sub={`${overdueCount} overdue invoices`} icon={AlertTriangle} color="#EF4444" />
-        <KpiCard title="Total Subscribers" value={String(totalSubs)} sub={`across all statuses`} icon={TrendingUp} color="#8B5CF6" />
+            <KpiCard title="Total Subscribers" value={String(totalSubs)} sub="across all statuses" icon={TrendingUp} color="#8B5CF6" />
           </div>
 
-      {/* Collection Report */}
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
             <Card>
               <CardHeader><CardTitle>Collection by Collector</CardTitle></CardHeader>
@@ -131,63 +184,36 @@ export default function ReportsPage() {
                       <div className="space-y-2 mb-4">
                         {collection.map((c, i) => (
                           <div key={i} className="flex items-center justify-between py-2 border-b last:border-0">
-                        <div>
+                            <div><p className="text-sm font-medium text-gray-800">{c.collector}</p><p className="text-xs text-gray-400">{c.paymentCount} payments</p></div>
-                          <p className="text-sm font-medium text-gray-800">{c.collector}</p>
+                            <div className="text-right"><p className="text-sm font-bold text-green-700">{formatCurrency(c.totalAmount)}</p></div>
-                          <p className="text-xs text-gray-400">{c.paymentCount} payments</p>
-                        </div>
-                        <div className="text-right">
-                          <p className="text-sm font-bold text-green-700">{formatCurrency(c.totalAmount)}</p>
-                          <p className="text-xs text-gray-400">{totalCollected > 0 ? ((c.totalAmount / totalCollected) * 100).toFixed(1) : 0}%</p>
-                        </div>
                           </div>
                         ))}
-                    <div className="flex justify-between pt-1 font-semibold text-sm">
+                        <div className="flex justify-between pt-1 font-semibold text-sm"><span>Total</span><span className="text-green-700">{formatCurrency(totalCollected)}</span></div>
-                      <span>Total</span>
-                      <span className="text-green-700">{formatCurrency(totalCollected)}</span>
-                    </div>
                       </div>
                       <ResponsiveContainer width="100%" height={160}>
-                    <BarChart data={collection} margin={{ top: 0, right: 0, left: 0, bottom: 0 }}>
+                        <BarChart data={collection}><XAxis dataKey="collector" tick={{ fontSize: 11 }} /><YAxis tick={{ fontSize: 11 }} tickFormatter={v => `₱${(v/1000).toFixed(0)}k`} /><Tooltip formatter={(v: any) => formatCurrency(Number(v))} /><Bar dataKey="totalAmount" fill="#0891B2" radius={[4,4,0,0]} /></BarChart>
-                      <XAxis dataKey="collector" tick={{ fontSize: 11 }} />
-                      <YAxis tick={{ fontSize: 11 }} tickFormatter={v => `₱${(v/1000).toFixed(0)}k`} />
-                      <Tooltip formatter={(v: any) => formatCurrency(Number(v))} />
-                      <Bar dataKey="totalAmount" fill="#0891B2" radius={[4,4,0,0]} />
-                    </BarChart>
                       </ResponsiveContainer>
                     </>
                   )
                 }
               </CardContent>
             </Card>
-
-        {/* Aging Report */}
             <Card>
               <CardHeader><CardTitle>Accounts Receivable Aging</CardTitle></CardHeader>
               <CardContent>
                 <div className="space-y-3">
                   {aging.map((a) => (
                     <div key={a.bucket} className="flex items-center justify-between p-3 rounded-lg bg-gray-50">
-                  <div>
+                      <div><p className={`text-sm font-semibold ${agingRisk[a.bucket] ?? "text-gray-700"}`}>{a.bucket} days</p><p className="text-xs text-gray-400">{a.invoiceCount} invoices</p></div>
-                    <p className={`text-sm font-semibold ${agingRisk[a.bucket] ?? "text-gray-700"}`}>{a.bucket} days overdue</p>
+                      <p className={`text-base font-bold ${a.totalAmount > 0 ? agingRisk[a.bucket] ?? "text-gray-800" : "text-gray-400"}`}>{formatCurrency(a.totalAmount)}</p>
-                    <p className="text-xs text-gray-400">{a.invoiceCount} invoice{a.invoiceCount !== 1 ? "s" : ""}</p>
-                  </div>
-                  <div className="text-right">
-                    <p className={`text-base font-bold ${a.totalAmount > 0 ? agingRisk[a.bucket] ?? "text-gray-800" : "text-gray-400"}`}>
-                      {formatCurrency(a.totalAmount)}
-                    </p>
-                  </div>
                     </div>
                   ))}
-              <div className="flex justify-between px-3 py-2 bg-red-50 rounded-lg font-semibold text-sm">
+                  <div className="flex justify-between px-3 py-2 bg-red-50 rounded-lg font-semibold text-sm"><span className="text-red-700">Total Outstanding</span><span className="text-red-700">{formatCurrency(totalOutstanding)}</span></div>
-                <span className="text-red-700">Total Outstanding</span>
-                <span className="text-red-700">{formatCurrency(totalOutstanding)}</span>
-              </div>
                 </div>
               </CardContent>
             </Card>
           </div>
 
-      {/* Revenue Trend */}
           {revenue.length > 0 && (
             <Card>
               <CardHeader><CardTitle>Revenue Trend (Monthly)</CardTitle></CardHeader>
@@ -195,10 +221,8 @@ export default function ReportsPage() {
                 <ResponsiveContainer width="100%" height={220}>
                   <LineChart data={revenue} margin={{ top: 5, right: 20, left: 0, bottom: 5 }}>
                     <CartesianGrid strokeDasharray="3 3" stroke="#F1F5F9" />
-                <XAxis dataKey="month" tick={{ fontSize: 11 }} />
+                    <XAxis dataKey="month" tick={{ fontSize: 11 }} /><YAxis tick={{ fontSize: 11 }} tickFormatter={v => `₱${(v/1000).toFixed(0)}k`} />
-                <YAxis tick={{ fontSize: 11 }} tickFormatter={v => `₱${(v/1000).toFixed(0)}k`} />
+                    <Tooltip formatter={(v: any) => formatCurrency(Number(v))} /><Legend />
-                <Tooltip formatter={(v: any) => formatCurrency(Number(v))} />
-                <Legend />
                     <Line type="monotone" dataKey="revenue" stroke="#059669" strokeWidth={2} dot={false} name="Collected" />
                     <Line type="monotone" dataKey="totalInvoiced" stroke="#0891B2" strokeWidth={2} dot={false} name="Invoiced" strokeDasharray="4 2" />
                   </LineChart>
@@ -207,7 +231,6 @@ export default function ReportsPage() {
             </Card>
           )}
 
-      {/* Subscribers by Status + Area */}
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
             <Card>
               <CardHeader><CardTitle>Subscribers by Status</CardTitle></CardHeader>
@@ -215,44 +238,25 @@ export default function ReportsPage() {
                 {subByStatus.length === 0 ? <p className="text-sm text-gray-400 py-4 text-center">No subscriber data</p> : (
                   <div className="flex gap-6 items-center">
                     <ResponsiveContainer width="50%" height={160}>
-                  <PieChart>
+                      <PieChart><Pie data={subByStatus} dataKey="count" nameKey="status" cx="50%" cy="50%" outerRadius={60}>{subByStatus.map((_, i) => <Cell key={i} fill={COLORS[i % COLORS.length]} />)}</Pie><Tooltip /></PieChart>
-                    <Pie data={subByStatus} dataKey="count" nameKey="status" cx="50%" cy="50%" outerRadius={60} label={false}>
-                      {subByStatus.map((_, i) => <Cell key={i} fill={COLORS[i % COLORS.length]} />)}
-                    </Pie>
-                    <Tooltip />
-                  </PieChart>
                     </ResponsiveContainer>
                     <div className="space-y-2">
-                  {subByStatus.map((s, i) => (
+                      {subByStatus.map((s, i) => (<div key={s.status} className="flex items-center gap-2"><div className="w-3 h-3 rounded-full" style={{ backgroundColor: COLORS[i % COLORS.length] }} /><span className="text-sm text-gray-700">{s.status}</span><span className="text-sm font-bold ml-auto">{s.count}</span></div>))}
-                    <div key={s.status} className="flex items-center gap-2">
+                      <div className="border-t pt-1 flex justify-between text-sm font-semibold"><span>Total</span><span>{totalSubs}</span></div>
-                      <div className="w-3 h-3 rounded-full" style={{ backgroundColor: COLORS[i % COLORS.length] }} />
-                      <span className="text-sm text-gray-700">{s.status}</span>
-                      <span className="text-sm font-bold text-gray-900 ml-auto">{s.count}</span>
-                    </div>
-                  ))}
-                  <div className="border-t pt-1 flex justify-between text-sm font-semibold">
-                    <span>Total</span><span>{totalSubs}</span>
-                  </div>
                     </div>
                   </div>
                 )}
               </CardContent>
             </Card>
-
             {subByArea.length > 0 && (
               <Card>
                 <CardHeader><CardTitle>Active Subscribers by Area</CardTitle></CardHeader>
                 <CardContent>
                   <div className="space-y-2">
-                {subByArea.map((a) => (
+                    {subByArea.map(a => (
                       <div key={a.area} className="flex items-center justify-between py-2 border-b last:border-0">
-                    <span className="text-sm font-medium text-gray-800">{a.area}</span>
+                        <span className="text-sm font-medium">{a.area}</span>
-                    <div className="flex items-center gap-2">
+                        <div className="flex items-center gap-2"><div className="w-20 bg-gray-100 rounded-full h-2"><div className="h-2 rounded-full bg-blue-500" style={{ width: `${Math.min(100, (a.count / (activeCount || 1)) * 100)}%` }} /></div><span className="text-sm font-bold w-6 text-right">{a.count}</span></div>
-                      <div className="w-20 bg-gray-100 rounded-full h-2 overflow-hidden">
-                        <div className="h-2 rounded-full bg-blue-500" style={{ width: `${Math.min(100, (a.count / (activeCount || 1)) * 100)}%` }} />
-                      </div>
-                      <span className="text-sm font-bold text-gray-700 w-6 text-right">{a.count}</span>
-                    </div>
                       </div>
                     ))}
                   </div>
@@ -261,5 +265,85 @@ export default function ReportsPage() {
             )}
           </div>
         </div>
+      )}
+
+      {/* Collections Tab */}
+      {tab === "collections" && (
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <h2 className="text-lg font-semibold text-gray-800">Payment Collections</h2>
+            <Button size="sm" variant="outline" onClick={() => downloadCSV(payments.map(p => ({
+              Date: p.paymentDate ?? p.createdAt,
+              Client: p.client ? `${p.client.firstName} ${p.client.lastName}` : "",
+              Amount: p.amount, Channel: p.channel, Reference: p.referenceNumber ?? "", Notes: p.notes ?? "",
+            })), `collections-${from}-${to}.csv`)}>
+              <Download size={14} className="mr-1" /> Export CSV
+            </Button>
+          </div>
+          <Card>
+            <CardContent className="p-0">
+              <Table>
+                <TableHead>
+                  <TableRow><Th>Date</Th><Th>Client</Th><Th>Amount</Th><Th>Channel</Th><Th>Reference</Th><Th>Notes</Th></TableRow>
+                </TableHead>
+                <TableBody>
+                  {payments.length === 0 ? <EmptyState message="No payments found" /> :
+                    payments.map((p: any) => (
+                      <TableRow key={p.id}>
+                        <Td className="text-xs text-gray-500">{formatDate(p.paymentDate ?? p.createdAt)}</Td>
+                        <Td className="font-medium">{p.client ? `${p.client.firstName} ${p.client.lastName}` : "—"}</Td>
+                        <Td className="text-green-700 font-medium">{formatCurrency(Number(p.amount))}</Td>
+                        <Td><Badge variant="muted">{p.channel}</Badge></Td>
+                        <Td className="text-xs text-gray-400">{p.referenceNumber ?? "—"}</Td>
+                        <Td className="text-xs text-gray-400 max-w-[120px] truncate">{p.notes ?? "—"}</Td>
+                      </TableRow>
+                    ))
+                  }
+                </TableBody>
+              </Table>
+            </CardContent>
+          </Card>
+        </div>
+      )}
+
+      {/* Tickets Tab */}
+      {tab === "tickets" && (
+        <div className="space-y-4">
+          {ticketsData && (
+            <>
+              <div className="grid grid-cols-3 gap-4">
+                <Card><CardContent className="pt-5 text-center"><p className="text-3xl font-bold text-yellow-600">{ticketsData.open}</p><p className="text-sm text-gray-500 mt-1">Open</p></CardContent></Card>
+                <Card><CardContent className="pt-5 text-center"><p className="text-3xl font-bold text-green-600">{ticketsData.resolved}</p><p className="text-sm text-gray-500 mt-1">Resolved</p></CardContent></Card>
+                <Card><CardContent className="pt-5 text-center"><p className="text-3xl font-bold text-blue-600">{ticketsData.total}</p><p className="text-sm text-gray-500 mt-1">Total</p></CardContent></Card>
+              </div>
+              <Card>
+                <CardHeader><CardTitle>Recent Tickets</CardTitle></CardHeader>
+                <CardContent className="p-0">
+                  <Table>
+                    <TableHead>
+                      <TableRow><Th>Subject</Th><Th>Client</Th><Th>Type</Th><Th>Priority</Th><Th>Status</Th><Th>Created</Th></TableRow>
+                    </TableHead>
+                    <TableBody>
+                      {ticketsData.list.length === 0 ? <EmptyState message="No tickets found" /> :
+                        ticketsData.list.map((t: any) => (
+                          <TableRow key={t.id}>
+                            <Td className="font-medium max-w-[180px] truncate">{t.subject}</Td>
+                            <Td>{t.client ? `${t.client.firstName} ${t.client.lastName}` : "—"}</Td>
+                            <Td><Badge variant="muted">{t.type}</Badge></Td>
+                            <Td><Badge variant={t.priority === "HIGH" ? "warning" : "muted"}>{t.priority}</Badge></Td>
+                            <Td><Badge variant={t.status === "RESOLVED" ? "success" : t.status === "OPEN" ? "warning" : "muted"}>{t.status}</Badge></Td>
+                            <Td className="text-xs text-gray-400">{formatDate(t.createdAt)}</Td>
+                          </TableRow>
+                        ))
+                      }
+                    </TableBody>
+                  </Table>
+                </CardContent>
+              </Card>
+            </>
+          )}
+        </div>
+      )}
+    </div>
   );
 }

app/(app)/settings/page.tsx

@@ -238,6 +238,8 @@ function AreasSettings() {
   const [areaName, setAreaName] = useState("");
   const [zoneName, setZoneName] = useState("");
   const [zoneAreaId, setZoneAreaId] = useState("");
+  const [editArea, setEditArea] = useState<Area | null>(null);
+  const [editAreaName, setEditAreaName] = useState("");
 
   const { data: areas, isLoading, refetch } = useQuery<Area[]>({
     queryKey: ["areas"],
@@ -256,26 +258,31 @@ function AreasSettings() {
     mutationFn: async () => {
       await api.post("/api/v1/areas", { name: areaName });
     },
-    onSuccess: () => {
+    onSuccess: () => { toast.success("Area added"); setAreaName(""); setShowAddArea(false); refetch(); },
-      toast.success("Area added");
-      setAreaName("");
-      setShowAddArea(false);
-      refetch();
-    },
     onError: () => toast.error("Failed to add area"),
   });
 
+  const updateAreaMutation = useMutation({
+    mutationFn: async () => {
+      await api.patch(`/api/v1/areas/${editArea!.id}`, { name: editAreaName });
+    },
+    onSuccess: () => { toast.success("Area updated"); setEditArea(null); refetch(); },
+    onError: () => toast.error("Failed to update area"),
+  });
+
+  const deleteAreaMutation = useMutation({
+    mutationFn: async (id: string) => {
+      await api.delete(`/api/v1/areas/${id}`);
+    },
+    onSuccess: () => { toast.success("Area archived"); refetch(); },
+    onError: (e: any) => toast.error(e.response?.data?.message ?? "Failed to archive area"),
+  });
+
   const addZoneMutation = useMutation({
     mutationFn: async () => {
       await api.post("/api/v1/zones", { name: zoneName, areaId: zoneAreaId });
     },
-    onSuccess: () => {
+    onSuccess: () => { toast.success("Zone added"); setZoneName(""); setZoneAreaId(""); setShowAddZone(false); refetch(); },
-      toast.success("Zone added");
-      setZoneName("");
-      setZoneAreaId("");
-      setShowAddZone(false);
-      refetch();
-    },
     onError: () => toast.error("Failed to add zone"),
   });
 
@@ -287,21 +294,14 @@ function AreasSettings() {
         <CardHeader>
           <CardTitle>Areas & Zones</CardTitle>
           <div className="flex gap-2">
-            <Button size="sm" variant="outline" onClick={() => setShowAddArea(true)}>
+            <Button size="sm" variant="outline" onClick={() => setShowAddArea(true)}>+ Area</Button>
-              + Area
+            <Button size="sm" variant="outline" onClick={() => setShowAddZone(true)}>+ Zone</Button>
-            </Button>
-            <Button size="sm" variant="outline" onClick={() => setShowAddZone(true)}>
-              + Zone
-            </Button>
           </div>
         </CardHeader>
         <CardContent className="p-0">
           <Table>
             <TableHead>
-              <TableRow>
+              <TableRow><Th>Area Name</Th><Th>Zones</Th><Th>Actions</Th></TableRow>
-                <Th>Area Name</Th>
-                <Th>Zones</Th>
-              </TableRow>
             </TableHead>
             <TableBody>
               {isLoading ? (
@@ -309,6 +309,7 @@ function AreasSettings() {
                   <TableRow key={i}>
                     <Td><div className="h-4 w-32 animate-pulse bg-gray-100 rounded" /></Td>
                     <Td><div className="h-4 w-24 animate-pulse bg-gray-100 rounded" /></Td>
+                    <Td><div className="h-4 w-20 animate-pulse bg-gray-100 rounded" /></Td>
                   </TableRow>
                 ))
               ) : areaList.length === 0 ? (
@@ -318,9 +319,13 @@ function AreasSettings() {
                   <TableRow key={a.id}>
                     <Td className="font-medium">{a.name}</Td>
                     <Td className="text-sm text-gray-500">
-                      {a.zones?.length
+                      {a.zones?.length ? a.zones.map(z => z.name).join(", ") : <span className="text-gray-300">No zones</span>}
-                        ? a.zones.map((z) => z.name).join(", ")
+                    </Td>
-                        : <span className="text-gray-300">No zones</span>}
+                    <Td>
+                      <div className="flex gap-1">
+                        <Button size="sm" variant="ghost" onClick={() => { setEditArea(a); setEditAreaName(a.name); }}>Edit</Button>
+                        <Button size="sm" variant="ghost" onClick={() => { if (confirm(`Archive area "${a.name}"?`)) deleteAreaMutation.mutate(a.id); }}>Archive</Button>
+                      </div>
                     </Td>
                   </TableRow>
                 ))
@@ -330,20 +335,24 @@ function AreasSettings() {
         </CardContent>
       </Card>
 
+      {/* Edit Area Modal */}
+      <Modal isOpen={!!editArea} onClose={() => setEditArea(null)} title="Edit Area">
+        <form onSubmit={(e) => { e.preventDefault(); updateAreaMutation.mutate(); }} className="space-y-4">
+          <Input label="Area Name" value={editAreaName} onChange={(e) => setEditAreaName(e.target.value)} />
+          <div className="flex justify-end gap-2">
+            <Button type="button" variant="outline" size="sm" onClick={() => setEditArea(null)}>Cancel</Button>
+            <Button type="submit" size="sm" isLoading={updateAreaMutation.isPending} disabled={!editAreaName.trim()}>Save</Button>
+          </div>
+        </form>
+      </Modal>
+
       {/* Add Area Modal */}
       <Modal isOpen={showAddArea} onClose={() => setShowAddArea(false)} title="Add Area">
         <form onSubmit={(e) => { e.preventDefault(); addAreaMutation.mutate(); }} className="space-y-4">
-          <Input
+          <Input label="Area Name" value={areaName} onChange={(e) => setAreaName(e.target.value)} placeholder="e.g. North Sector" />
-            label="Area Name"
-            value={areaName}
-            onChange={(e) => setAreaName(e.target.value)}
-            placeholder="e.g. North Sector"
-          />
           <div className="flex justify-end gap-2">
             <Button type="button" variant="outline" size="sm" onClick={() => setShowAddArea(false)}>Cancel</Button>
-            <Button type="submit" size="sm" isLoading={addAreaMutation.isPending} disabled={!areaName.trim()}>
+            <Button type="submit" size="sm" isLoading={addAreaMutation.isPending} disabled={!areaName.trim()}>Add Area</Button>
-              Add Area
-            </Button>
           </div>
         </form>
       </Modal>
@@ -353,33 +362,16 @@ function AreasSettings() {
         <form onSubmit={(e) => { e.preventDefault(); addZoneMutation.mutate(); }} className="space-y-4">
           <div className="flex flex-col gap-1.5">
             <label className="text-sm font-medium text-gray-700">Area</label>
-            <select
+            <select className="block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
-              className="block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+              value={zoneAreaId} onChange={(e) => setZoneAreaId(e.target.value)}>
-              value={zoneAreaId}
-              onChange={(e) => setZoneAreaId(e.target.value)}
-            >
               <option value="">Select area</option>
-              {areaList.map((a) => (
+              {areaList.map(a => <option key={a.id} value={a.id}>{a.name}</option>)}
-                <option key={a.id} value={a.id}>{a.name}</option>
-              ))}
             </select>
           </div>
-          <Input
+          <Input label="Zone Name" value={zoneName} onChange={(e) => setZoneName(e.target.value)} placeholder="e.g. Zone 1" />
-            label="Zone Name"
-            value={zoneName}
-            onChange={(e) => setZoneName(e.target.value)}
-            placeholder="e.g. Zone 1"
-          />
           <div className="flex justify-end gap-2">
             <Button type="button" variant="outline" size="sm" onClick={() => setShowAddZone(false)}>Cancel</Button>
-            <Button
+            <Button type="submit" size="sm" isLoading={addZoneMutation.isPending} disabled={!zoneName.trim() || !zoneAreaId}>Add Zone</Button>
-              type="submit"
-              size="sm"
-              isLoading={addZoneMutation.isPending}
-              disabled={!zoneName.trim() || !zoneAreaId}
-            >
-              Add Zone
-            </Button>
           </div>
         </form>
       </Modal>
@@ -636,6 +628,8 @@ const ROLES = ["ADMIN", "STAFF", "COLLECTOR", "TECHNICIAN"];
 function UsersSettings() {
   const qc = useQueryClient();
   const [showAdd, setShowAdd] = useState(false);
+  const [resetPwUser, setResetPwUser] = useState<UserItem | null>(null);
+  const [newPassword, setNewPassword] = useState("");
   const [form, setForm] = useState({ firstName: "", lastName: "", email: "", password: "", phone: "", role: "STAFF" });
 
   const { data, isLoading, refetch } = useQuery<UserItem[]>({
@@ -671,6 +665,14 @@ function UsersSettings() {
     onError: (e: any) => toast.error(e.response?.data?.message ?? "Failed"),
   });
 
+  const resetPassword = useMutation({
+    mutationFn: async () => {
+      await api.patch(`/api/v1/users/${resetPwUser!.id}/password`, { newPassword });
+    },
+    onSuccess: () => { toast.success("Password reset!"); setResetPwUser(null); setNewPassword(""); },
+    onError: (e: any) => toast.error(e.response?.data?.message ?? "Failed to reset password"),
+  });
+
   const users = data ?? [];
 
   return (
@@ -693,17 +695,29 @@ function UsersSettings() {
               ) : users.length === 0 ? (
                 <EmptyState message="No users found" />
               ) : users.map(u => {
-                const role = u.roleAssignments?.[0]?.role ?? "—";
+                const roles = u.roleAssignments?.map(r => r.role) ?? [];
+                const primaryRole = roles[0] ?? "—";
                 return (
                   <TableRow key={u.id}>
                     <Td className="font-medium">{u.firstName} {u.lastName}<div className="text-xs text-gray-400">{u.phone ?? ""}</div></Td>
                     <Td className="text-sm text-gray-600">{u.email}</Td>
-                    <Td><Badge variant={role === "ADMIN" ? "danger" : role === "STAFF" ? "default" as any : "muted"}>{role}</Badge></Td>
+                    <Td>
+                      <div className="flex flex-wrap gap-1">
+                        {roles.length > 0 ? roles.map(r => (
+                          <Badge key={r} variant={r === "ADMIN" ? "danger" : r === "STAFF" ? "default" as any : "muted"}>{r}</Badge>
+                        )) : <Badge variant="muted">—</Badge>}
+                      </div>
+                    </Td>
                     <Td><Badge variant={u.isActive ? "success" : "muted"}>{u.isActive ? "Active" : "Inactive"}</Badge></Td>
                     <Td>
+                      <div className="flex gap-1 flex-wrap">
+                        <Button size="sm" variant="ghost" onClick={() => { setResetPwUser(u); setNewPassword(""); }}>
+                          Reset PW
+                        </Button>
                         <Button size="sm" variant="ghost" onClick={() => toggleActive.mutate({ id: u.id, isActive: u.isActive })}>
                           {u.isActive ? "Deactivate" : "Activate"}
                         </Button>
+                      </div>
                     </Td>
                   </TableRow>
                 );
@@ -713,6 +727,21 @@ function UsersSettings() {
         </CardContent>
       </Card>
 
+      {/* Reset Password Modal */}
+      <Modal isOpen={!!resetPwUser} onClose={() => setResetPwUser(null)} title={`Reset Password — ${resetPwUser ? `${resetPwUser.firstName} ${resetPwUser.lastName}` : ""}`}>
+        <div className="space-y-4">
+          <p className="text-sm text-gray-500">Enter a new password for this user. They will need to use this to log in.</p>
+          <Input label="New Password" type="password" value={newPassword}
+            onChange={e => setNewPassword(e.target.value)} hint="Minimum 8 characters" />
+          <div className="flex justify-end gap-2">
+            <Button variant="outline" onClick={() => setResetPwUser(null)}>Cancel</Button>
+            <Button onClick={() => resetPassword.mutate()} isLoading={resetPassword.isPending} disabled={newPassword.length < 8}>
+              Reset Password
+            </Button>
+          </div>
+        </div>
+      </Modal>
+
       <Modal isOpen={showAdd} onClose={() => setShowAdd(false)} title="Add New User">
         <div className="space-y-4">
           <div className="grid grid-cols-2 gap-3">

app/(app)/tickets/page.tsx

@@ -2,7 +2,8 @@
 
 import { useState } from "react";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { RefreshCw, Ticket, Plus, Send } from "lucide-react";
+import { RefreshCw, Ticket, Plus, Send, RotateCcw, User, MapPin, Zap } from "lucide-react";
+import { useAuth } from "@/contexts/AuthContext";
 import { Card, CardContent, CardHeader } from "@/components/ui/Card";
 import { Table, TableHead, TableBody, TableRow, Th, Td, EmptyState } from "@/components/ui/Table";
 import { Badge } from "@/components/ui/Badge";
@@ -34,11 +35,20 @@ const priorityVariant: Record<string, "danger" | "warning" | "muted"> = {
 const statusFilters = ["", "OPEN", "IN_PROGRESS", "RESOLVED", "CLOSED"];
 const typeFilters = ["", "SUPPORT", "BILLING", "INSTALLATION"];
 
+// Previous status mapping (revert flow)
+const prevStatus: Record<string, string> = {
+  CLOSED: "RESOLVED",
+  RESOLVED: "IN_PROGRESS",
+  IN_PROGRESS: "OPEN",
+};
+
 export default function TicketsPage() {
   const qc = useQueryClient();
+  const { user } = useAuth();
   const [search, setSearch] = useState("");
   const [statusFilter, setStatusFilter] = useState("");
   const [typeFilter, setTypeFilter] = useState("");
+  const [assignedToMe, setAssignedToMe] = useState(false);
   const [page, setPage] = useState(1);
   const [selected, setSelected] = useState<TicketItem | null>(null);
   const [showCreate, setShowCreate] = useState(false);
@@ -46,12 +56,13 @@ export default function TicketsPage() {
   const [newForm, setNewForm] = useState({ subject: "", description: "", type: "SUPPORT", priority: "NORMAL", clientSearch: "", clientId: "" });
 
   const { data, isLoading, refetch } = useQuery<PaginatedResponse<TicketItem>>({
-    queryKey: ["tickets", search, statusFilter, typeFilter, page],
+    queryKey: ["tickets", search, statusFilter, typeFilter, assignedToMe, page],
     queryFn: async () => {
       const params = new URLSearchParams({ page: String(page), limit: "20" });
       if (search) params.set("search", search);
       if (statusFilter) params.set("status", statusFilter);
       if (typeFilter) params.set("type", typeFilter);
+      if (assignedToMe && user?.id) params.set("assignedToId", user.id);
       const res = await api.get<PaginatedResponse<TicketItem>>(`/api/v1/tickets?${params}`);
       return res.data;
     },
@@ -109,6 +120,22 @@ export default function TicketsPage() {
     onError: (e: any) => toast.error(e.response?.data?.message ?? "Failed to create ticket"),
   });
 
+  const activateClient = useMutation({
+    mutationFn: async (clientId: string) => {
+      await api.patch(`/api/v1/clients/${clientId}`, { isActive: true });
+    },
+    onSuccess: () => { toast.success("Client activated! 🎉"); refetch(); refetchDetail(); },
+    onError: (e: any) => toast.error(e.response?.data?.message ?? "Failed to activate client"),
+  });
+
+  const revertStatus = useMutation({
+    mutationFn: async ({ id, status }: { id: string; status: string }) => {
+      await api.patch(`/api/v1/tickets/${id}`, { status });
+    },
+    onSuccess: () => { toast.success("Status reverted"); refetch(); refetchDetail(); qc.invalidateQueries({ queryKey: ["ticket"] }); },
+    onError: (e: any) => toast.error(e.response?.data?.message ?? "Failed"),
+  });
+
   const tickets = data?.data ?? [];
   const total = data?.meta?.total ?? 0;
   const detail = ticketDetail ?? selected;
@@ -150,6 +177,13 @@ export default function TicketsPage() {
                 </button>
               ))}
             </div>
+            <button
+              onClick={() => { setAssignedToMe(v => !v); setPage(1); }}
+              className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors ${assignedToMe ? "bg-green-600 text-white" : "bg-gray-100 text-gray-600 hover:bg-gray-200"}`}
+              title="Show only tickets assigned to me"
+            >
+              <User size={12} /> Assigned to me
+            </button>
           </div>
         </CardHeader>
         <CardContent className="p-0">
@@ -200,14 +234,43 @@ export default function TicketsPage() {
               <div><span className="text-gray-500">Status</span><p><Badge variant={statusVariant[detail.status] ?? "muted"}>{detail.status}</Badge></p></div>
               <div className="col-span-2"><span className="text-gray-500">Created</span><p>{formatDate(detail.createdAt)}</p></div>
               {detail.description && <div className="col-span-2"><span className="text-gray-500">Description</span><p className="mt-1 text-gray-800 whitespace-pre-wrap">{detail.description}</p></div>}
+              {/* Installation: show Google Maps link using client address */}
+              {detail.type === "INSTALLATION" && detail.client && (
+                <div className="col-span-2">
+                  <span className="text-gray-500">Map</span>
+                  <p className="mt-0.5">
+                    <a
+                      href={`https://www.google.com/maps/search/${encodeURIComponent([(ticketDetail as any)?.client?.address, detail.client.firstName + " " + detail.client.lastName].filter(Boolean).join(", "))}`}
+                      target="_blank" rel="noopener noreferrer"
+                      className="inline-flex items-center gap-1 text-blue-600 hover:underline text-sm"
+                    >
+                      <MapPin size={13} /> View on Google Maps
+                    </a>
+                  </p>
+                </div>
+              )}
             </div>
 
             {/* Status actions */}
+            <div className="flex gap-2 flex-wrap">
               {nextStatus[detail.status] && (
                 <Button size="sm" onClick={() => updateStatus.mutate({ id: detail.id, status: nextStatus[detail.status] })} isLoading={updateStatus.isPending}>
                   Move to {nextStatus[detail.status].replace("_", " ")}
                 </Button>
               )}
+              {prevStatus[detail.status] && (
+                <Button size="sm" variant="outline" onClick={() => revertStatus.mutate({ id: detail.id, status: prevStatus[detail.status] })} isLoading={revertStatus.isPending}>
+                  <RotateCcw size={13} className="mr-1" /> Revert to {prevStatus[detail.status].replace("_", " ")}
+                </Button>
+              )}
+              {/* Installation ticket RESOLVED → show Activate Client button */}
+              {detail.type === "INSTALLATION" && detail.status === "RESOLVED" && detail.clientId && (
+                <Button size="sm" variant="outline" onClick={() => activateClient.mutate(detail.clientId!)} isLoading={activateClient.isPending}
+                  className="text-green-700 border-green-300 hover:bg-green-50">
+                  <Zap size={13} className="mr-1" /> Activate Client
+                </Button>
+              )}
+            </div>
 
             {/* Comments */}
             <div>

src/components/layout/TopBar.tsx

@@ -2,6 +2,7 @@
 
 import { useAuth } from "@/contexts/AuthContext";
 import { Menu, LogOut, User } from "lucide-react";
+import Link from "next/link";
 
 interface TopBarProps {
   onMenuClick: () => void;
@@ -26,11 +27,11 @@ export function TopBar({ onMenuClick }: TopBarProps) {
       </div>
 
       <div className="flex items-center gap-3">
-        <div className="hidden sm:flex items-center gap-2 text-sm text-gray-600">
+        <Link href="/profile" className="hidden sm:flex items-center gap-2 text-sm text-gray-600 hover:text-blue-600 transition-colors rounded-lg px-2 py-1 hover:bg-blue-50">
           <User className="h-4 w-4 text-gray-400" />
           <span>{user?.name || user?.email || "User"}</span>
           <span className="text-xs text-gray-400 bg-gray-100 px-2 py-0.5 rounded-full">{user?.role}</span>
-        </div>
+        </Link>
         <button
           onClick={logout}
           className="flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm text-gray-600 hover:bg-red-50 hover:text-red-600 transition-colors"