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>
   );
 }