feat: real data-fetching pages — clients, invoices, payments, tickets, reports with charts

app/(app)/clients/page.tsx

@@ -1,71 +1,179 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useCallback } from 'react';
+import { useQuery } from '@tanstack/react-query';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
-import { Card, CardContent, CardHeader } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Card, CardContent } from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
 import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
+  Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
 } from '@/components/ui/table';
-import { Search, UserPlus } from 'lucide-react';
+import { Search, UserPlus, Phone, MapPin, ChevronRight } from 'lucide-react';
+import { api } from '@/lib/api';
+import Link from 'next/link';
+import { useDebounce } from '@/lib/hooks';
+
+interface Client {
+  id: string;
+  firstName: string;
+  lastName: string;
+  email?: string;
+  phone: string;
+  address: string;
+  accountNumber: string;
+  isActive: boolean;
+  subscriptions?: { status: string; plan?: { name: string; monthlyPrice: number } }[];
+  createdAt: string;
+}
+
+interface ClientsResponse {
+  data: Client[];
+  meta?: { total: number; page: number; limit: number };
+}
+
+function getSubStatus(client: Client): string {
+  return client.subscriptions?.[0]?.status ?? 'NO_SUB';
+}
+
+const STATUS_COLORS: Record<string, string> = {
+  ACTIVE: 'bg-emerald-100 text-emerald-700',
+  PENDING: 'bg-yellow-100 text-yellow-700',
+  SUSPENDED: 'bg-red-100 text-red-700',
+  DISCONNECTED: 'bg-gray-100 text-gray-600',
+  CANCELLED: 'bg-gray-100 text-gray-500',
+  NO_SUB: 'bg-gray-100 text-gray-400',
+};
 
 export default function ClientsPage() {
   const [search, setSearch] = useState('');
+  const [page, setPage] = useState(1);
+  const debouncedSearch = useDebounce(search, 400);
+  const limit = 20;
+
+  const { data, isLoading } = useQuery<ClientsResponse>({
+    queryKey: ['clients', debouncedSearch, page],
+    queryFn: async () => {
+      const params = new URLSearchParams({ page: String(page), limit: String(limit) });
+      if (debouncedSearch) params.set('search', debouncedSearch);
+      const res = await api.get(`/api/v1/clients?${params}`);
+      return res.data;
+    },
+  });
+
+  const clients: Client[] = Array.isArray(data) ? data : (data?.data ?? []);
+  const total = (data as any)?.meta?.total ?? clients.length;
 
   return (
     <div>
+      {/* Header */}
       <div className="mb-6 flex items-center justify-between">
         <div>
           <h1 className="text-2xl font-bold text-slate-800">Clients</h1>
-          <p className="text-slate-500 text-sm mt-1">Manage your ISP subscribers</p>
+          <p className="text-slate-500 text-sm mt-1">
+            {isLoading ? '...' : `${total} subscriber${total !== 1 ? 's' : ''}`}
+          </p>
         </div>
-        <Button style={{ backgroundColor: '#0891B2' }}>
+        <Button style={{ backgroundColor: '#0891B2', color: 'white' }}>
           <UserPlus size={16} className="mr-2" />
           Add Client
         </Button>
       </div>
 
-      <Card className="border shadow-sm">
-        <CardHeader className="pb-4">
-          <div className="flex items-center gap-3">
-            <div className="relative flex-1 max-w-sm">
-              <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
-              <Input
-                placeholder="Search clients..."
-                className="pl-9"
-                value={search}
-                onChange={(e) => setSearch(e.target.value)}
-              />
-            </div>
-          </div>
-        </CardHeader>
+      {/* Search */}
+      <div className="relative mb-4 max-w-sm">
+        <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
+        <Input
+          placeholder="Search by name, account #, phone..."
+          className="pl-9"
+          value={search}
+          onChange={(e) => { setSearch(e.target.value); setPage(1); }}
+        />
+      </div>
+
+      {/* Table */}
+      <Card>
         <CardContent className="p-0">
           <Table>
             <TableHeader>
               <TableRow>
+                <TableHead>Account #</TableHead>
                 <TableHead>Name</TableHead>
-                <TableHead>Email</TableHead>
                 <TableHead>Phone</TableHead>
                 <TableHead>Plan</TableHead>
                 <TableHead>Status</TableHead>
-                <TableHead>Actions</TableHead>
+                <TableHead>Address</TableHead>
+                <TableHead className="w-10"></TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
-              <TableRow>
-                <TableCell colSpan={6} className="text-center py-12 text-slate-400">
-                  No clients yet. Add your first client to get started.
-                </TableCell>
-              </TableRow>
+              {isLoading ? (
+                Array.from({ length: 8 }).map((_, i) => (
+                  <TableRow key={i}>
+                    {Array.from({ length: 7 }).map((_, j) => (
+                      <TableCell key={j}><Skeleton className="h-4 w-full" /></TableCell>
+                    ))}
+                  </TableRow>
+                ))
+              ) : clients.length === 0 ? (
+                <TableRow>
+                  <TableCell colSpan={7} className="text-center py-12 text-slate-400">
+                    {search ? `No clients matching "${search}"` : 'No clients yet'}
+                  </TableCell>
+                </TableRow>
+              ) : (
+                clients.map((c) => {
+                  const subStatus = getSubStatus(c);
+                  const planName = c.subscriptions?.[0]?.plan?.name ?? '—';
+                  return (
+                    <TableRow key={c.id} className="hover:bg-slate-50 cursor-pointer">
+                      <TableCell className="font-mono text-sm text-slate-600">{c.accountNumber}</TableCell>
+                      <TableCell className="font-medium">{c.firstName} {c.lastName}</TableCell>
+                      <TableCell>
+                        <span className="flex items-center gap-1 text-slate-500 text-sm">
+                          <Phone size={12} />{c.phone}
+                        </span>
+                      </TableCell>
+                      <TableCell className="text-sm text-slate-600">{planName}</TableCell>
+                      <TableCell>
+                        <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${STATUS_COLORS[subStatus] ?? STATUS_COLORS.NO_SUB}`}>
+                          {subStatus.replace('_', ' ')}
+                        </span>
+                      </TableCell>
+                      <TableCell>
+                        <span className="flex items-center gap-1 text-slate-400 text-xs max-w-[180px] truncate">
+                          <MapPin size={10} />{c.address}
+                        </span>
+                      </TableCell>
+                      <TableCell>
+                        <Link href={`/clients/${c.id}`} className="text-slate-400 hover:text-slate-700">
+                          <ChevronRight size={16} />
+                        </Link>
+                      </TableCell>
+                    </TableRow>
+                  );
+                })
+              )}
             </TableBody>
           </Table>
         </CardContent>
       </Card>
+
+      {/* Pagination */}
+      {total > limit && (
+        <div className="mt-4 flex items-center justify-between text-sm text-slate-500">
+          <span>Page {page} of {Math.ceil(total / limit)}</span>
+          <div className="flex gap-2">
+            <Button variant="outline" size="sm" onClick={() => setPage(p => Math.max(1, p - 1))} disabled={page === 1}>
+              Previous
+            </Button>
+            <Button variant="outline" size="sm" onClick={() => setPage(p => p + 1)} disabled={page * limit >= total}>
+              Next
+            </Button>
+          </div>
+        </div>
+      )}
     </div>
   );
 }

app/(app)/invoices/page.tsx

@@ -1,50 +1,143 @@
 'use client';
 
-import { Card, CardContent, CardHeader } from '@/components/ui/card';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
+import { useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
+import { Card, CardContent } from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
+import {
+  Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
+} from '@/components/ui/table';
 import { Search } from 'lucide-react';
+import { api } from '@/lib/api';
+import { useDebounce } from '@/lib/hooks';
+import { format } from 'date-fns';
+
+interface Invoice {
+  id: string;
+  invoiceNumber: string;
+  status: string;
+  subtotal: number;
+  lateFee: number;
+  total: number;
+  amountPaid: number;
+  balance: number;
+  dueDate: string;
+  createdAt: string;
+  client?: { firstName: string; lastName: string; accountNumber: string };
+}
+
+const STATUS_COLORS: Record<string, string> = {
+  DRAFT: 'bg-gray-100 text-gray-600',
+  SENT: 'bg-blue-100 text-blue-700',
+  PARTIAL: 'bg-yellow-100 text-yellow-700',
+  PAID: 'bg-emerald-100 text-emerald-700',
+  OVERDUE: 'bg-red-100 text-red-700',
+  VOID: 'bg-gray-100 text-gray-400',
+};
 
 export default function InvoicesPage() {
+  const [search, setSearch] = useState('');
+  const [status, setStatus] = useState('');
+  const [page, setPage] = useState(1);
+  const debouncedSearch = useDebounce(search, 400);
+  const limit = 20;
+
+  const { data, isLoading } = useQuery({
+    queryKey: ['invoices', debouncedSearch, status, page],
+    queryFn: async () => {
+      const params = new URLSearchParams({ page: String(page), limit: String(limit) });
+      if (status) params.set('status', status);
+      if (debouncedSearch) params.set('search', debouncedSearch);
+      const res = await api.get(`/api/v1/invoices?${params}`);
+      return res.data;
+    },
+  });
+
+  const invoices: Invoice[] = Array.isArray(data) ? data : (data?.data ?? data?.items ?? []);
+  const total = (data as any)?.meta?.total ?? (data as any)?.total ?? invoices.length;
+
+  const STATUSES = ['', 'SENT', 'PARTIAL', 'PAID', 'OVERDUE', 'DRAFT', 'VOID'];
+
   return (
     <div>
       <div className="mb-6">
         <h1 className="text-2xl font-bold text-slate-800">Invoices</h1>
-        <p className="text-slate-500 text-sm mt-1">Track and manage billing invoices</p>
+        <p className="text-slate-500 text-sm mt-1">Track billing and payment status</p>
       </div>
 
-      <Card className="border shadow-sm">
-        <CardHeader className="pb-4">
-          <div className="relative max-w-sm">
-            <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
-            <Input placeholder="Search invoices..." className="pl-9" />
-          </div>
-        </CardHeader>
+      {/* Filters */}
+      <div className="mb-4 flex flex-wrap gap-3">
+        <div className="relative flex-1 min-w-[200px] max-w-sm">
+          <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
+          <Input placeholder="Search by invoice # or client..." className="pl-9" value={search}
+            onChange={(e) => { setSearch(e.target.value); setPage(1); }} />
+        </div>
+        <div className="flex gap-1">
+          {STATUSES.map(s => (
+            <button key={s}
+              onClick={() => { setStatus(s); setPage(1); }}
+              className={`px-3 py-1.5 rounded-lg text-xs font-medium border transition-colors ${
+                status === s ? 'bg-cyan-600 text-white border-cyan-600' : 'bg-white text-slate-600 border-slate-200 hover:border-slate-300'
+              }`}>
+              {s || 'All'}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <Card>
         <CardContent className="p-0">
           <Table>
             <TableHeader>
               <TableRow>
                 <TableHead>Invoice #</TableHead>
                 <TableHead>Client</TableHead>
-                <TableHead>Amount</TableHead>
-                <TableHead>Due Date</TableHead>
                 <TableHead>Status</TableHead>
-                <TableHead>Actions</TableHead>
+                <TableHead className="text-right">Total</TableHead>
+                <TableHead className="text-right">Balance</TableHead>
+                <TableHead>Due Date</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
-              <TableRow>
-                <TableCell colSpan={6} className="text-center py-12 text-slate-400">
-                  No invoices found.
-                </TableCell>
-              </TableRow>
+              {isLoading ? (
+                Array.from({ length: 8 }).map((_, i) => (
+                  <TableRow key={i}>
+                    {Array.from({ length: 6 }).map((_, j) => (
+                      <TableCell key={j}><Skeleton className="h-4 w-full" /></TableCell>
+                    ))}
+                  </TableRow>
+                ))
+              ) : invoices.length === 0 ? (
+                <TableRow>
+                  <TableCell colSpan={6} className="text-center py-12 text-slate-400">
+                    No invoices found
+                  </TableCell>
+                </TableRow>
+              ) : (
+                invoices.map((inv) => (
+                  <TableRow key={inv.id} className="hover:bg-slate-50">
+                    <TableCell className="font-mono text-sm">{inv.invoiceNumber}</TableCell>
+                    <TableCell className="text-sm">
+                      {inv.client ? `${inv.client.firstName} ${inv.client.lastName}` : '—'}
+                      {inv.client && <span className="text-xs text-slate-400 ml-1">#{inv.client.accountNumber}</span>}
+                    </TableCell>
+                    <TableCell>
+                      <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${STATUS_COLORS[inv.status] ?? 'bg-gray-100 text-gray-600'}`}>
+                        {inv.status}
+                      </span>
+                    </TableCell>
+                    <TableCell className="text-right font-medium">₱{Number(inv.total).toLocaleString()}</TableCell>
+                    <TableCell className={`text-right text-sm ${Number(inv.balance) > 0 ? 'text-red-600 font-medium' : 'text-slate-400'}`}>
+                      {Number(inv.balance) > 0 ? `₱${Number(inv.balance).toLocaleString()}` : '—'}
+                    </TableCell>
+                    <TableCell className={`text-sm ${new Date(inv.dueDate) < new Date() && inv.status !== 'PAID' && inv.status !== 'VOID' ? 'text-red-500' : 'text-slate-500'}`}>
+                      {format(new Date(inv.dueDate), 'MMM d, yyyy')}
+                    </TableCell>
+                  </TableRow>
+                ))
+              )}
             </TableBody>
           </Table>
         </CardContent>

app/(app)/payments/page.tsx

@@ -1,54 +1,140 @@
 'use client';
 
-import { Card, CardContent, CardHeader } from '@/components/ui/card';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
+import { useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { Card, CardContent } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
+import { Skeleton } from '@/components/ui/skeleton';
+import {
+  Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
+} from '@/components/ui/table';
 import { Search } from 'lucide-react';
+import { api } from '@/lib/api';
+import { format } from 'date-fns';
+
+interface Payment {
+  id: string;
+  amount: number;
+  channel: string;
+  paymentDate: string;
+  notes?: string;
+  client?: { firstName: string; lastName: string; accountNumber: string };
+  invoice?: { invoiceNumber: string };
+  recordedBy?: { firstName: string; lastName: string };
+}
+
+const CHANNEL_COLORS: Record<string, string> = {
+  CASH: 'bg-emerald-100 text-emerald-700',
+  GCASH: 'bg-blue-100 text-blue-700',
+  MAYA: 'bg-green-100 text-green-700',
+  BANK_TRANSFER: 'bg-purple-100 text-purple-700',
+  CHECK: 'bg-orange-100 text-orange-700',
+};
 
 export default function PaymentsPage() {
+  const [page, setPage] = useState(1);
+  const limit = 20;
+
+  const { data, isLoading } = useQuery({
+    queryKey: ['payments', page],
+    queryFn: async () => {
+      const res = await api.get(`/api/v1/payments?page=${page}&limit=${limit}`);
+      return res.data;
+    },
+  });
+
+  const payments: Payment[] = Array.isArray(data) ? data : (data?.data ?? data?.items ?? []);
+  const total = (data as any)?.meta?.total ?? (data as any)?.total ?? payments.length;
+
+  const totalAmount = payments.reduce((sum, p) => sum + Number(p.amount), 0);
+
   return (
     <div>
-      <div className="mb-6">
-        <h1 className="text-2xl font-bold text-slate-800">Payments</h1>
-        <p className="text-slate-500 text-sm mt-1">Record and review payment transactions</p>
+      <div className="mb-6 flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-slate-800">Payments</h1>
+          <p className="text-slate-500 text-sm mt-1">Payment collection records</p>
+        </div>
+        {payments.length > 0 && (
+          <div className="bg-emerald-50 border border-emerald-200 rounded-lg px-4 py-2 text-right">
+            <p className="text-xs text-emerald-600">Total (this page)</p>
+            <p className="text-lg font-bold text-emerald-700">₱{totalAmount.toLocaleString()}</p>
+          </div>
+        )}
       </div>
 
-      <Card className="border shadow-sm">
-        <CardHeader className="pb-4">
-          <div className="relative max-w-sm">
-            <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
-            <Input placeholder="Search payments..." className="pl-9" />
-          </div>
-        </CardHeader>
+      <Card>
         <CardContent className="p-0">
           <Table>
             <TableHeader>
               <TableRow>
-                <TableHead>Ref #</TableHead>
-                <TableHead>Client</TableHead>
-                <TableHead>Amount</TableHead>
-                <TableHead>Channel</TableHead>
                 <TableHead>Date</TableHead>
-                <TableHead>Actions</TableHead>
+                <TableHead>Client</TableHead>
+                <TableHead>Invoice</TableHead>
+                <TableHead>Channel</TableHead>
+                <TableHead className="text-right">Amount</TableHead>
+                <TableHead>Recorded By</TableHead>
+                <TableHead>Notes</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
-              <TableRow>
-                <TableCell colSpan={6} className="text-center py-12 text-slate-400">
-                  No payments recorded yet.
-                </TableCell>
-              </TableRow>
+              {isLoading ? (
+                Array.from({ length: 8 }).map((_, i) => (
+                  <TableRow key={i}>
+                    {Array.from({ length: 7 }).map((_, j) => (
+                      <TableCell key={j}><Skeleton className="h-4 w-full" /></TableCell>
+                    ))}
+                  </TableRow>
+                ))
+              ) : payments.length === 0 ? (
+                <TableRow>
+                  <TableCell colSpan={7} className="text-center py-12 text-slate-400">No payments yet</TableCell>
+                </TableRow>
+              ) : (
+                payments.map((p) => (
+                  <TableRow key={p.id} className="hover:bg-slate-50">
+                    <TableCell className="text-sm text-slate-500">
+                      {format(new Date(p.paymentDate), 'MMM d, yyyy')}
+                    </TableCell>
+                    <TableCell className="text-sm">
+                      {p.client ? `${p.client.firstName} ${p.client.lastName}` : '—'}
+                    </TableCell>
+                    <TableCell className="font-mono text-xs text-slate-500">
+                      {p.invoice?.invoiceNumber ?? '—'}
+                    </TableCell>
+                    <TableCell>
+                      <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${CHANNEL_COLORS[p.channel] ?? 'bg-gray-100 text-gray-600'}`}>
+                        {p.channel}
+                      </span>
+                    </TableCell>
+                    <TableCell className="text-right font-semibold text-emerald-700">
+                      ₱{Number(p.amount).toLocaleString()}
+                    </TableCell>
+                    <TableCell className="text-sm text-slate-500">
+                      {p.recordedBy ? `${p.recordedBy.firstName} ${p.recordedBy.lastName}` : '—'}
+                    </TableCell>
+                    <TableCell className="text-xs text-slate-400 max-w-[150px] truncate">
+                      {p.notes ?? '—'}
+                    </TableCell>
+                  </TableRow>
+                ))
+              )}
             </TableBody>
           </Table>
         </CardContent>
       </Card>
+
+      {total > limit && (
+        <div className="mt-4 flex items-center justify-between text-sm text-slate-500">
+          <span>Page {page} of {Math.ceil(total / limit)}</span>
+          <div className="flex gap-2">
+            <button className="px-3 py-1 rounded border text-sm hover:bg-slate-50 disabled:opacity-40"
+              onClick={() => setPage(p => Math.max(1, p - 1))} disabled={page === 1}>Previous</button>
+            <button className="px-3 py-1 rounded border text-sm hover:bg-slate-50 disabled:opacity-40"
+              onClick={() => setPage(p => p + 1)} disabled={page * limit >= total}>Next</button>
+          </div>
+        </div>
+      )}
     </div>
   );
 }

app/(app)/reports/page.tsx

@@ -1,32 +1,167 @@
 'use client';
 
+import { useQuery } from '@tanstack/react-query';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { BarChart3 } from 'lucide-react';
+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';
+
+const PIE_COLORS = ['#0891B2', '#059669', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899'];
 
 export default function ReportsPage() {
+  const { data: collection, isLoading: loadingCollection } = useQuery({
+    queryKey: ['reports-collection'],
+    queryFn: async () => (await api.get('/api/v1/reports/collection')).data,
+  });
+
+  const { data: aging, isLoading: loadingAging } = useQuery({
+    queryKey: ['reports-aging'],
+    queryFn: async () => (await api.get('/api/v1/reports/aging')).data,
+  });
+
+  const { data: subscribers, isLoading: loadingSubs } = useQuery({
+    queryKey: ['reports-subscribers'],
+    queryFn: async () => (await api.get('/api/v1/reports/subscribers')).data,
+  });
+
+  const { data: revenue, isLoading: loadingRevenue } = useQuery({
+    queryKey: ['reports-revenue'],
+    queryFn: async () => (await api.get('/api/v1/reports/revenue')).data,
+  });
+
+  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</h1>
-        <p className="text-slate-500 text-sm mt-1">Financial and operational reports</p>
+        <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>
       </div>
 
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-        {['Collections Report', 'Subscriber Growth', 'Invoice Aging', 'Technician Performance'].map(
-          (report) => (
-            <Card key={report} className="border shadow-sm hover:shadow-md transition-shadow cursor-pointer">
-              <CardHeader>
-                <CardTitle className="text-base flex items-center gap-2 text-slate-700">
-                  <BarChart3 size={18} style={{ color: '#0891B2' }} />
-                  {report}
-                </CardTitle>
-              </CardHeader>
-              <CardContent>
-                <p className="text-slate-400 text-sm">Coming soon — report generation will be available here.</p>
-              </CardContent>
-            </Card>
-          )
-        )}
+      <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>
+          <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>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* Subscriber Status */}
+        <Card>
+          <CardHeader><CardTitle className="text-base">Subscriber Status</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>
+            ) : (
+              <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>
+              </ResponsiveContainer>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* Aging */}
+        <Card>
+          <CardHeader><CardTitle className="text-base">Invoice 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>
+            ) : (
+              <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>
+                    </div>
+                    <p className="text-sm font-bold text-emerald-600">₱{Number(c.totalAmount).toLocaleString()}</p>
+                  </div>
+                ))}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* Plans Distribution */}
+        <Card>
+          <CardHeader><CardTitle className="text-base">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>
+                ))}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
       </div>
     </div>
   );

app/(app)/tickets/page.tsx

@@ -1,58 +1,163 @@
 'use client';
 
-import { Card, CardContent, CardHeader } from '@/components/ui/card';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
+import { useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { Card, CardContent } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
+import { Skeleton } from '@/components/ui/skeleton';
+import {
+  Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
+} from '@/components/ui/table';
 import { Search, Plus } from 'lucide-react';
+import { api } from '@/lib/api';
+import { useDebounce } from '@/lib/hooks';
+import { format } from 'date-fns';
+
+interface Ticket {
+  id: string;
+  subject: string;
+  type: string;
+  status: string;
+  priority: string;
+  createdAt: string;
+  client?: { firstName: string; lastName: string; accountNumber: string };
+  assignedTo?: { firstName: string; lastName: string };
+}
+
+const STATUS_COLORS: Record<string, string> = {
+  OPEN: 'bg-blue-100 text-blue-700',
+  IN_PROGRESS: 'bg-yellow-100 text-yellow-700',
+  RESOLVED: 'bg-emerald-100 text-emerald-700',
+  CLOSED: 'bg-gray-100 text-gray-500',
+};
+const TYPE_COLORS: Record<string, string> = {
+  INSTALLATION: 'bg-purple-100 text-purple-700',
+  SUPPORT: 'bg-orange-100 text-orange-700',
+  BILLING: 'bg-cyan-100 text-cyan-700',
+};
+const PRIORITY_COLORS: Record<string, string> = {
+  NORMAL: 'bg-gray-100 text-gray-600',
+  HIGH: 'bg-red-100 text-red-700',
+};
+
+const STATUSES = ['', 'OPEN', 'IN_PROGRESS', 'RESOLVED', 'CLOSED'];
+const TYPES = ['', 'INSTALLATION', 'SUPPORT', 'BILLING'];
 
 export default function TicketsPage() {
+  const [search, setSearch] = useState('');
+  const [status, setStatus] = useState('');
+  const [type, setType] = useState('');
+  const [page, setPage] = useState(1);
+  const debouncedSearch = useDebounce(search, 400);
+  const limit = 20;
+
+  const { data, isLoading } = useQuery({
+    queryKey: ['tickets', debouncedSearch, status, type, page],
+    queryFn: async () => {
+      const params = new URLSearchParams({ page: String(page), limit: String(limit) });
+      if (status) params.set('status', status);
+      if (type) params.set('type', type);
+      if (debouncedSearch) params.set('search', debouncedSearch);
+      const res = await api.get(`/api/v1/tickets?${params}`);
+      return res.data;
+    },
+  });
+
+  const tickets: Ticket[] = Array.isArray(data) ? data : (data?.data ?? data?.items ?? []);
+  const total = (data as any)?.meta?.total ?? (data as any)?.total ?? tickets.length;
+
   return (
     <div>
       <div className="mb-6 flex items-center justify-between">
         <div>
           <h1 className="text-2xl font-bold text-slate-800">Tickets</h1>
-          <p className="text-slate-500 text-sm mt-1">Support and installation tickets</p>
+          <p className="text-slate-500 text-sm mt-1">Support, installation, and billing issues</p>
         </div>
-        <Button style={{ backgroundColor: '#0891B2' }}>
-          <Plus size={16} className="mr-2" />
-          New Ticket
+        <Button style={{ backgroundColor: '#0891B2', color: 'white' }}>
+          <Plus size={16} className="mr-2" />New Ticket
         </Button>
       </div>
 
-      <Card className="border shadow-sm">
-        <CardHeader className="pb-4">
-          <div className="relative max-w-sm">
-            <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
-            <Input placeholder="Search tickets..." className="pl-9" />
-          </div>
-        </CardHeader>
+      {/* Filters */}
+      <div className="mb-4 flex flex-wrap gap-3">
+        <div className="relative flex-1 min-w-[200px] max-w-sm">
+          <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
+          <Input placeholder="Search tickets..." className="pl-9" value={search}
+            onChange={(e) => { setSearch(e.target.value); setPage(1); }} />
+        </div>
+        <div className="flex gap-1 flex-wrap">
+          {STATUSES.map(s => (
+            <button key={s} onClick={() => { setStatus(s); setPage(1); }}
+              className={`px-3 py-1.5 rounded-lg text-xs font-medium border transition-colors ${
+                status === s ? 'bg-cyan-600 text-white border-cyan-600' : 'bg-white text-slate-600 border-slate-200 hover:border-slate-300'
+              }`}>{s || 'All Status'}</button>
+          ))}
+        </div>
+        <div className="flex gap-1 flex-wrap">
+          {TYPES.map(t => (
+            <button key={t} onClick={() => { setType(t); setPage(1); }}
+              className={`px-3 py-1.5 rounded-lg text-xs font-medium border transition-colors ${
+                type === t ? 'bg-slate-700 text-white border-slate-700' : 'bg-white text-slate-600 border-slate-200 hover:border-slate-300'
+              }`}>{t || 'All Type'}</button>
+          ))}
+        </div>
+      </div>
+
+      <Card>
         <CardContent className="p-0">
           <Table>
             <TableHeader>
               <TableRow>
-                <TableHead>Ticket #</TableHead>
-                <TableHead>Client</TableHead>
+                <TableHead>Subject</TableHead>
                 <TableHead>Type</TableHead>
-                <TableHead>Priority</TableHead>
                 <TableHead>Status</TableHead>
+                <TableHead>Priority</TableHead>
+                <TableHead>Client</TableHead>
                 <TableHead>Assigned To</TableHead>
-                <TableHead>Actions</TableHead>
+                <TableHead>Created</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
-              <TableRow>
-                <TableCell colSpan={7} className="text-center py-12 text-slate-400">
-                  No tickets found.
-                </TableCell>
-              </TableRow>
+              {isLoading ? (
+                Array.from({ length: 8 }).map((_, i) => (
+                  <TableRow key={i}>{Array.from({ length: 7 }).map((_, j) => (
+                    <TableCell key={j}><Skeleton className="h-4 w-full" /></TableCell>
+                  ))}</TableRow>
+                ))
+              ) : tickets.length === 0 ? (
+                <TableRow><TableCell colSpan={7} className="text-center py-12 text-slate-400">No tickets found</TableCell></TableRow>
+              ) : (
+                tickets.map((t) => (
+                  <TableRow key={t.id} className="hover:bg-slate-50">
+                    <TableCell className="font-medium max-w-[200px] truncate">{t.subject}</TableCell>
+                    <TableCell>
+                      <span className={`inline-flex px-2 py-0.5 rounded-full text-xs font-medium ${TYPE_COLORS[t.type] ?? 'bg-gray-100 text-gray-600'}`}>
+                        {t.type}
+                      </span>
+                    </TableCell>
+                    <TableCell>
+                      <span className={`inline-flex px-2 py-0.5 rounded-full text-xs font-medium ${STATUS_COLORS[t.status] ?? 'bg-gray-100 text-gray-600'}`}>
+                        {t.status.replace('_', ' ')}
+                      </span>
+                    </TableCell>
+                    <TableCell>
+                      <span className={`inline-flex px-2 py-0.5 rounded-full text-xs font-medium ${PRIORITY_COLORS[t.priority] ?? 'bg-gray-100'}`}>
+                        {t.priority}
+                      </span>
+                    </TableCell>
+                    <TableCell className="text-sm">
+                      {t.client ? `${t.client.firstName} ${t.client.lastName}` : '—'}
+                    </TableCell>
+                    <TableCell className="text-sm text-slate-500">
+                      {t.assignedTo ? `${t.assignedTo.firstName} ${t.assignedTo.lastName}` : 'Unassigned'}
+                    </TableCell>
+                    <TableCell className="text-xs text-slate-400">
+                      {format(new Date(t.createdAt), 'MMM d, yyyy')}
+                    </TableCell>
+                  </TableRow>
+                ))
+              )}
             </TableBody>
           </Table>
         </CardContent>

lib/hooks.ts

@@ -0,0 +1,10 @@
+import { useState, useEffect } from 'react';
+
+export function useDebounce<T>(value: T, delay: number): T {
+  const [debounced, setDebounced] = useState<T>(value);
+  useEffect(() => {
+    const t = setTimeout(() => setDebounced(value), delay);
+    return () => clearTimeout(t);
+  }, [value, delay]);
+  return debounced;
+}