feat: Tickets + Reports pages with real data and charts

app/(app)/reports/page.tsx

@@ -1,168 +1,193 @@
 'use client';
 
+import { useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
+import { api } from '@/lib/api';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Skeleton } from '@/components/ui/skeleton';
-import { api } from '@/lib/api';
-import {
-  BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer,
-  PieChart, Pie, Cell, Legend,
-} from 'recharts';
+import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Cell } from 'recharts';
 
-const PIE_COLORS = ['#0891B2', '#059669', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899'];
+const peso = (v: number) => '₱' + (v ?? 0).toLocaleString('en-PH', { minimumFractionDigits: 2 });
 
 export default function ReportsPage() {
-  const { data: collection, isLoading: loadingCollection } = useQuery({
-    queryKey: ['reports-collection'],
-    queryFn: async () => (await api.get('/api/v1/reports/collection')).data,
+  const [from, setFrom] = useState(() => {
+    const d = new Date();
+    d.setDate(1);
+    return d.toISOString().split('T')[0];
+  });
+  const [to, setTo] = useState(() => new Date().toISOString().split('T')[0]);
+
+  const { data: collection, isLoading: collLoading } = useQuery({
+    queryKey: ['reports', 'collection', from, to],
+    queryFn: async () => {
+      const res = await api.get(`/api/v1/reports/collection?from=${from}&to=${to}`);
+      return res.data as Array<{ collector: string; totalAmount: number; paymentCount: number }>;
+    },
   });
 
-  const { data: aging, isLoading: loadingAging } = useQuery({
-    queryKey: ['reports-aging'],
-    queryFn: async () => (await api.get('/api/v1/reports/aging')).data,
+  const { data: aging, isLoading: agingLoading } = useQuery({
+    queryKey: ['reports', 'aging'],
+    queryFn: async () => {
+      const res = await api.get('/api/v1/reports/aging');
+      return res.data as Array<{ bucket: string; invoiceCount: number; totalAmount: number }>;
+    },
   });
 
-  const { data: subscribers, isLoading: loadingSubs } = useQuery({
-    queryKey: ['reports-subscribers'],
-    queryFn: async () => (await api.get('/api/v1/reports/subscribers')).data,
+  const { data: subscribers, isLoading: subLoading } = useQuery({
+    queryKey: ['reports', 'subscribers'],
+    queryFn: async () => {
+      const res = await api.get('/api/v1/reports/subscribers');
+      return res.data as Array<{ plan: string; count: number; revenue: number }>;
+    },
   });
 
-  const { data: revenue, isLoading: loadingRevenue } = useQuery({
-    queryKey: ['reports-revenue'],
-    queryFn: async () => (await api.get('/api/v1/reports/revenue')).data,
+  const { data: revenue, isLoading: revLoading } = useQuery({
+    queryKey: ['reports', 'revenue'],
+    queryFn: async () => {
+      const res = await api.get('/api/v1/reports/revenue');
+      return res.data as Array<{ month: string; total: number }>;
+    },
   });
 
-  const { data: plans, isLoading: loadingPlans } = useQuery({
-    queryKey: ['reports-plans'],
-    queryFn: async () => (await api.get('/api/v1/reports/plans')).data,
-  });
-
-  const collectionList = Array.isArray(collection) ? collection : [];
-  const agingList = Array.isArray(aging) ? aging : [];
-  const revList = Array.isArray(revenue) ? revenue : [];
-  const planList = Array.isArray(plans) ? plans : [];
-
-  // Subscribers summary
-  const subSummary = subscribers ? [
-    { name: 'Active', value: (subscribers as any).active ?? 0 },
-    { name: 'Pending', value: (subscribers as any).pending ?? 0 },
-    { name: 'Suspended', value: (subscribers as any).suspended ?? 0 },
-    { name: 'Disconnected', value: (subscribers as any).disconnected ?? 0 },
-  ].filter(s => s.value > 0) : [];
-
   return (
     <div>
       <div className="mb-6">
-        <h1 className="text-2xl font-bold text-slate-800">Reports & Analytics</h1>
-        <p className="text-slate-500 text-sm mt-1">Business performance overview</p>
+        <h1 className="text-2xl font-bold text-slate-800">Reports</h1>
+        <p className="text-slate-500 text-sm mt-1">Financial and operational analytics</p>
       </div>
 
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-
-        {/* Revenue Trend */}
-        <Card className="lg:col-span-2">
-          <CardHeader><CardTitle className="text-base">Monthly Revenue (₱)</CardTitle></CardHeader>
+      {/* Collection Report */}
+      <Card className="border shadow-sm mb-6">
+        <CardHeader className="flex flex-row items-center justify-between pb-3">
+          <CardTitle className="text-base font-semibold text-slate-700">Collection Report</CardTitle>
+          <div className="flex gap-2 items-center">
+            <input type="date" value={from} onChange={(e) => setFrom(e.target.value)}
+              className="border rounded-md px-2 py-1 text-sm text-slate-700" />
+            <span className="text-slate-400 text-sm">to</span>
+            <input type="date" value={to} onChange={(e) => setTo(e.target.value)}
+              className="border rounded-md px-2 py-1 text-sm text-slate-700" />
+          </div>
+        </CardHeader>
         <CardContent>
-            {loadingRevenue ? <Skeleton className="h-48 w-full" /> : (
-              <ResponsiveContainer width="100%" height={200}>
-                <BarChart data={revList}>
-                  <CartesianGrid strokeDasharray="3 3" stroke="#f1f5f9" />
-                  <XAxis dataKey="month" tick={{ fontSize: 12 }} />
-                  <YAxis tick={{ fontSize: 12 }} tickFormatter={(v) => `₱${Number(v).toLocaleString()}`} />
-                  <Tooltip formatter={(v) => [`₱${Number(v).toLocaleString()}`, 'Revenue']} />
-                  <Bar dataKey="totalAmount" fill="#0891B2" radius={[4, 4, 0, 0]} />
-                </BarChart>
-              </ResponsiveContainer>
+          {collLoading ? (
+            <Skeleton className="h-32 w-full" />
+          ) : !collection?.length ? (
+            <p className="text-center text-slate-400 py-6">No collections in this period</p>
+          ) : (
+            <table className="w-full text-sm">
+              <thead>
+                <tr className="border-b">
+                  <th className="text-left py-2 font-medium text-slate-500">Collector</th>
+                  <th className="text-right py-2 font-medium text-slate-500">Payments</th>
+                  <th className="text-right py-2 font-medium text-slate-500">Total</th>
+                </tr>
+              </thead>
+              <tbody>
+                {collection?.map((row, i) => (
+                  <tr key={i} className="border-b">
+                    <td className="py-2 text-slate-700">{row.collector}</td>
+                    <td className="py-2 text-right text-slate-600">{row.paymentCount}</td>
+                    <td className="py-2 text-right font-semibold text-slate-800">{peso(row.totalAmount)}</td>
+                  </tr>
+                ))}
+                <tr className="bg-slate-50">
+                  <td className="py-2 font-semibold text-slate-700">Total</td>
+                  <td className="py-2 text-right font-semibold text-slate-700">
+                    {collection?.reduce((s, r) => s + r.paymentCount, 0)}
+                  </td>
+                  <td className="py-2 text-right font-semibold text-slate-800">
+                    {peso(collection?.reduce((s, r) => s + r.totalAmount, 0) ?? 0)}
+                  </td>
+                </tr>
+              </tbody>
+            </table>
           )}
         </CardContent>
       </Card>
 
-        {/* Subscriber Status */}
-        <Card>
-          <CardHeader><CardTitle className="text-base">Subscriber Status</CardTitle></CardHeader>
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
+        {/* Revenue Trend */}
+        <Card className="border shadow-sm">
+          <CardHeader>
+            <CardTitle className="text-base font-semibold text-slate-700">Revenue Trend (12 months)</CardTitle>
+          </CardHeader>
           <CardContent>
-            {loadingSubs ? <Skeleton className="h-48 w-full" /> : subSummary.length === 0 ? (
-              <p className="text-slate-400 text-sm text-center py-8">No data</p>
-            ) : (
+            {revLoading ? <Skeleton className="h-48 w-full" /> : (
               <ResponsiveContainer width="100%" height={200}>
-                <PieChart>
-                  <Pie data={subSummary} dataKey="value" nameKey="name" cx="50%" cy="50%" outerRadius={80} label={({ name, value }) => `${name}: ${value}`}>
-                    {subSummary.map((_, i) => <Cell key={i} fill={PIE_COLORS[i % PIE_COLORS.length]} />)}
-                  </Pie>
-                  <Tooltip />
-                </PieChart>
+                <BarChart data={revenue ?? []}>
+                  <XAxis dataKey="month" tick={{ fontSize: 11 }} />
+                  <YAxis tick={{ fontSize: 11 }} tickFormatter={(v) => `₱${(v/1000).toFixed(0)}k`} />
+                  <Tooltip formatter={(v: number) => peso(v)} />
+                  <Bar dataKey="total" fill="#0891B2" radius={[4, 4, 0, 0]} />
+                </BarChart>
               </ResponsiveContainer>
             )}
           </CardContent>
         </Card>
 
         {/* Aging */}
-        <Card>
-          <CardHeader><CardTitle className="text-base">Invoice Aging (₱)</CardTitle></CardHeader>
+        <Card className="border shadow-sm">
+          <CardHeader>
+            <CardTitle className="text-base font-semibold text-slate-700">Accounts Receivable Aging</CardTitle>
+          </CardHeader>
           <CardContent>
-            {loadingAging ? <Skeleton className="h-48 w-full" /> : agingList.length === 0 ? (
-              <p className="text-slate-400 text-sm text-center py-8">No outstanding invoices</p>
-            ) : (
-              <ResponsiveContainer width="100%" height={200}>
-                <BarChart data={agingList}>
-                  <CartesianGrid strokeDasharray="3 3" stroke="#f1f5f9" />
-                  <XAxis dataKey="bucket" tick={{ fontSize: 12 }} />
-                  <YAxis tick={{ fontSize: 12 }} />
-                  <Tooltip formatter={(v) => [`₱${Number(v).toLocaleString()}`, 'Amount']} />
-                  <Bar dataKey="totalAmount" fill="#EF4444" radius={[4, 4, 0, 0]} />
-                </BarChart>
-              </ResponsiveContainer>
-            )}
-          </CardContent>
-        </Card>
-
-        {/* Collection by Collector */}
-        <Card>
-          <CardHeader><CardTitle className="text-base">Collection by Collector</CardTitle></CardHeader>
-          <CardContent>
-            {loadingCollection ? <Skeleton className="h-48 w-full" /> : collectionList.length === 0 ? (
-              <p className="text-slate-400 text-sm text-center py-8">No collection data</p>
-            ) : (
+            {agingLoading ? <Skeleton className="h-48 w-full" /> : (
               <div className="space-y-3">
-                {collectionList.map((c: any, i: number) => (
-                  <div key={i} className="flex items-center justify-between">
-                    <div>
-                      <p className="text-sm font-medium text-slate-700">{c.collector}</p>
-                      <p className="text-xs text-slate-400">{c.paymentCount} payments</p>
+                {aging?.map((bucket) => (
+                  <div key={bucket.bucket} className="flex items-center gap-3">
+                    <span className="text-sm text-slate-500 w-16">{bucket.bucket}d</span>
+                    <div className="flex-1 bg-slate-100 rounded-full h-3 overflow-hidden">
+                      <div
+                        className="h-3 rounded-full"
+                        style={{
+                          width: `${Math.min(100, (bucket.totalAmount / (Math.max(...(aging?.map(b => b.totalAmount) ?? [1])) || 1)) * 100)}%`,
+                          backgroundColor: bucket.bucket === '90+' ? '#DC2626' : bucket.bucket === '61-90' ? '#D97706' : '#0891B2',
+                        }}
+                      />
                     </div>
-                    <p className="text-sm font-bold text-emerald-600">₱{Number(c.totalAmount).toLocaleString()}</p>
+                    <span className="text-sm font-medium text-slate-700 w-32 text-right">{peso(bucket.totalAmount)}</span>
+                    <span className="text-xs text-slate-400 w-16 text-right">{bucket.invoiceCount} inv</span>
                   </div>
                 ))}
+                {!aging?.some(b => b.totalAmount > 0) && (
+                  <p className="text-center text-slate-400 py-6">No overdue invoices 🎉</p>
+                )}
               </div>
             )}
           </CardContent>
         </Card>
+      </div>
 
-        {/* Plans Distribution */}
-        <Card>
-          <CardHeader><CardTitle className="text-base">Subscribers by Plan</CardTitle></CardHeader>
+      {/* Subscribers by Plan */}
+      <Card className="border shadow-sm">
+        <CardHeader>
+          <CardTitle className="text-base font-semibold text-slate-700">Subscribers by Plan</CardTitle>
+        </CardHeader>
         <CardContent>
-            {loadingPlans ? <Skeleton className="h-48 w-full" /> : planList.length === 0 ? (
-              <p className="text-slate-400 text-sm text-center py-8">No data</p>
-            ) : (
-              <div className="space-y-3">
-                {planList.map((p: any, i: number) => (
-                  <div key={i} className="flex items-center justify-between">
-                    <p className="text-sm font-medium text-slate-700">{p.planName ?? p.name ?? 'Plan ' + (i+1)}</p>
-                    <div className="flex items-center gap-2">
-                      <div className="w-20 bg-slate-100 rounded-full h-2">
-                        <div className="h-2 rounded-full" style={{ backgroundColor: PIE_COLORS[i % PIE_COLORS.length], width: `${Math.min(100, (p.count / Math.max(...planList.map((x: any) => x.count || 1))) * 100)}%` }} />
-                      </div>
-                      <p className="text-sm text-slate-600">{p.count}</p>
-                    </div>
-                  </div>
+          {subLoading ? <Skeleton className="h-32 w-full" /> : (
+            <table className="w-full text-sm">
+              <thead>
+                <tr className="border-b">
+                  <th className="text-left py-2 font-medium text-slate-500">Plan</th>
+                  <th className="text-right py-2 font-medium text-slate-500">Subscribers</th>
+                  <th className="text-right py-2 font-medium text-slate-500">Monthly Revenue</th>
+                </tr>
+              </thead>
+              <tbody>
+                {(subscribers as any[])?.map((row: any, i: number) => (
+                  <tr key={i} className="border-b">
+                    <td className="py-2 text-slate-700">{row.plan ?? row.name ?? '—'}</td>
+                    <td className="py-2 text-right text-slate-600">{row.count ?? row.subscribers ?? 0}</td>
+                    <td className="py-2 text-right font-semibold text-slate-800">
+                      {peso(row.revenue ?? row.monthlyRevenue ?? 0)}
+                    </td>
+                  </tr>
                 ))}
-              </div>
+              </tbody>
+            </table>
           )}
         </CardContent>
       </Card>
-
-      </div>
     </div>
   );
 }