feat: real dashboard + clients table with API integration

app/(app)/clients/page.tsx

@@ -1,91 +1,84 @@
 'use client';
 
-import { useState, useCallback } from 'react';
+import { useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
-import { Button } from '@/components/ui/button';
+import { api } from '@/lib/api';
+import { Card, CardContent } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 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,
-} from '@/components/ui/table';
-import { Search, UserPlus, Phone, MapPin, ChevronRight } from 'lucide-react';
-import { api } from '@/lib/api';
-import Link from 'next/link';
-import { useDebounce } from '@/lib/hooks';
+import { Search, UserPlus, ChevronRight } from 'lucide-react';
 
 interface Client {
   id: string;
+  accountNumber: 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;
+  area: { name: string } | null;
+  subscriptions: Array<{
+    status: string;
+    type: string;
+    monthlyPrice: string;
+    plan?: { name: string };
+  }>;
 }
 
 interface ClientsResponse {
   data: Client[];
-  meta?: { total: number; page: number; limit: number };
+  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',
+const statusColors: Record<string, string> = {
+  ACTIVE: 'bg-green-100 text-green-700',
   PENDING: 'bg-yellow-100 text-yellow-700',
   SUSPENDED: 'bg-red-100 text-red-700',
-  DISCONNECTED: 'bg-gray-100 text-gray-600',
+  DISCONNECTED: 'bg-gray-100 text-gray-700',
   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],
+    queryKey: ['clients', search, page],
     queryFn: async () => {
-      const params = new URLSearchParams({ page: String(page), limit: String(limit) });
-      if (debouncedSearch) params.set('search', debouncedSearch);
+      const params = new URLSearchParams({ page: String(page), limit: '20' });
+      if (search) params.set('search', search);
       const res = await api.get(`/api/v1/clients?${params}`);
       return res.data;
     },
+    staleTime: 30_000,
   });
 
-  const clients: Client[] = Array.isArray(data) ? data : (data?.data ?? []);
-  const total = (data as any)?.meta?.total ?? clients.length;
+  const clients = data?.data ?? [];
+  const total = data?.total ?? 0;
 
   return (
     <div>
-      {/* Header */}
-      <div className="mb-6 flex items-center justify-between">
+      <div className="flex items-center justify-between mb-6">
         <div>
           <h1 className="text-2xl font-bold text-slate-800">Clients</h1>
-          <p className="text-slate-500 text-sm mt-1">
-            {isLoading ? '...' : `${total} subscriber${total !== 1 ? 's' : ''}`}
-          </p>
+          <p className="text-slate-500 text-sm mt-1">{total} total clients</p>
         </div>
-        <Button style={{ backgroundColor: '#0891B2', color: 'white' }}>
-          <UserPlus size={16} className="mr-2" />
+        <button
+          className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium text-white"
+          style={{ backgroundColor: '#0891B2' }}
+        >
+          <UserPlus size={16} />
           Add Client
-        </Button>
+        </button>
       </div>
 
       {/* Search */}
-      <div className="relative mb-4 max-w-sm">
+      <div className="relative mb-4">
         <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
         <Input
-          placeholder="Search by name, account #, phone..."
+          placeholder="Search by name or account number..."
           className="pl-9"
           value={search}
           onChange={(e) => { setSearch(e.target.value); setPage(1); }}
@@ -93,87 +86,107 @@ export default function ClientsPage() {
       </div>
 
       {/* Table */}
-      <Card>
+      <Card className="border shadow-sm">
         <CardContent className="p-0">
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead>Account #</TableHead>
-                <TableHead>Name</TableHead>
-                <TableHead>Phone</TableHead>
-                <TableHead>Plan</TableHead>
-                <TableHead>Status</TableHead>
-                <TableHead>Address</TableHead>
-                <TableHead className="w-10"></TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {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>
+          <div className="overflow-x-auto">
+            <table className="w-full text-sm">
+              <thead>
+                <tr className="border-b bg-slate-50">
+                  <th className="text-left px-4 py-3 font-medium text-slate-500">Account #</th>
+                  <th className="text-left px-4 py-3 font-medium text-slate-500">Name</th>
+                  <th className="text-left px-4 py-3 font-medium text-slate-500 hidden md:table-cell">Area</th>
+                  <th className="text-left px-4 py-3 font-medium text-slate-500 hidden lg:table-cell">Plan</th>
+                  <th className="text-left px-4 py-3 font-medium text-slate-500">Status</th>
+                  <th className="text-left px-4 py-3 font-medium text-slate-500 hidden xl:table-cell">Monthly</th>
+                  <th className="px-4 py-3"></th>
+                </tr>
+              </thead>
+              <tbody>
+                {isLoading
+                  ? Array.from({ length: 8 }).map((_, i) => (
+                      <tr key={i} className="border-b">
+                        <td className="px-4 py-3"><Skeleton className="h-4 w-24" /></td>
+                        <td className="px-4 py-3"><Skeleton className="h-4 w-32" /></td>
+                        <td className="px-4 py-3 hidden md:table-cell"><Skeleton className="h-4 w-20" /></td>
+                        <td className="px-4 py-3 hidden lg:table-cell"><Skeleton className="h-4 w-24" /></td>
+                        <td className="px-4 py-3"><Skeleton className="h-5 w-16 rounded-full" /></td>
+                        <td className="px-4 py-3 hidden xl:table-cell"><Skeleton className="h-4 w-16" /></td>
+                        <td className="px-4 py-3"><Skeleton className="h-4 w-4" /></td>
+                      </tr>
+                    ))
+                  : clients.map((client) => {
+                      const sub = client.subscriptions?.[0];
+                      const status = sub?.status ?? (client.isActive ? 'ACTIVE' : 'INACTIVE');
+                      return (
+                        <tr
+                          key={client.id}
+                          className="border-b hover:bg-slate-50 cursor-pointer transition-colors"
+                        >
+                          <td className="px-4 py-3 font-mono text-xs text-slate-600">
+                            {client.accountNumber}
+                          </td>
+                          <td className="px-4 py-3 font-medium text-slate-800">
+                            {client.firstName} {client.lastName}
+                            <div className="text-xs text-slate-400">{client.phone}</div>
+                          </td>
+                          <td className="px-4 py-3 text-slate-600 hidden md:table-cell">
+                            {client.area?.name ?? '—'}
+                          </td>
+                          <td className="px-4 py-3 text-slate-600 hidden lg:table-cell">
+                            {sub?.plan?.name ?? (sub ? `${sub.type}` : '—')}
+                          </td>
+                          <td className="px-4 py-3">
+                            <span
+                              className={`px-2 py-0.5 rounded-full text-xs font-medium ${statusColors[status] ?? 'bg-gray-100 text-gray-500'}`}
+                            >
+                              {status}
+                            </span>
+                          </td>
+                          <td className="px-4 py-3 text-slate-600 hidden xl:table-cell">
+                            {sub ? `₱${Number(sub.monthlyPrice).toLocaleString()}` : '—'}
+                          </td>
+                          <td className="px-4 py-3 text-slate-400">
+                            <ChevronRight size={16} />
+                          </td>
+                        </tr>
+                      );
+                    })}
+              </tbody>
+            </table>
+          </div>
+
+          {/* Pagination */}
+          {total > 20 && (
+            <div className="flex items-center justify-between px-4 py-3 border-t">
+              <p className="text-sm text-slate-500">
+                Showing {(page - 1) * 20 + 1}–{Math.min(page * 20, total)} of {total}
+              </p>
+              <div className="flex gap-2">
+                <button
+                  disabled={page === 1}
+                  onClick={() => setPage(p => p - 1)}
+                  className="px-3 py-1 text-sm border rounded-md disabled:opacity-40"
+                >
+                  Prev
+                </button>
+                <button
+                  disabled={page * 20 >= total}
+                  onClick={() => setPage(p => p + 1)}
+                  className="px-3 py-1 text-sm border rounded-md disabled:opacity-40"
+                >
+                  Next
+                </button>
+              </div>
+            </div>
+          )}
+
+          {!isLoading && clients.length === 0 && (
+            <div className="text-center py-12 text-slate-400">
+              No clients found{search ? ` for "${search}"` : ''}
+            </div>
+          )}
         </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)/dashboard/page.tsx

@@ -4,45 +4,56 @@ 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 { Users, Wifi, DollarSign, AlertTriangle } from 'lucide-react';
+import { Users, Wifi, DollarSign, AlertTriangle, Ticket, ClipboardList } from 'lucide-react';
 
 interface DashboardSummary {
-  totalClients: number;
-  activeSubscribers: number;
-  todayCollections: number;
-  overdueInvoices: number;
+  subscribers: { total: number; active: number; pending: number; suspended: number };
+  billing: { unpaidInvoices: number; overdueInvoices: number };
+  support: { openTickets: number; inProgressTickets: number };
+  tasks: { pending: number };
+  revenue: { thisMonth: number; lastMonth: number; trend: number };
+  leads: { total: number; new: number };
 }
 
-const kpiCards = [
-  {
-    key: 'totalClients' as const,
-    label: 'Total Clients',
-    icon: Users,
-    color: '#0891B2',
-    format: (v: number) => v.toLocaleString(),
-  },
-  {
-    key: 'activeSubscribers' as const,
-    label: 'Active Subscribers',
-    icon: Wifi,
-    color: '#059669',
-    format: (v: number) => v.toLocaleString(),
-  },
-  {
-    key: 'todayCollections' as const,
-    label: "Today's Collections",
-    icon: DollarSign,
-    color: '#7C3AED',
-    format: (v: number) => '₱' + v.toLocaleString('en-PH', { minimumFractionDigits: 2 }),
-  },
-  {
-    key: 'overdueInvoices' as const,
-    label: 'Overdue Invoices',
-    icon: AlertTriangle,
-    color: '#DC2626',
-    format: (v: number) => v.toLocaleString(),
-  },
-];
+function KpiCard({
+  label,
+  value,
+  sub,
+  icon: Icon,
+  color,
+  isLoading,
+}: {
+  label: string;
+  value: string;
+  sub?: string;
+  icon: React.ElementType;
+  color: string;
+  isLoading: boolean;
+}) {
+  return (
+    <Card className="border shadow-sm">
+      <CardHeader className="flex flex-row items-center justify-between pb-2">
+        <CardTitle className="text-sm font-medium text-slate-500">{label}</CardTitle>
+        <div
+          className="w-9 h-9 rounded-lg flex items-center justify-center"
+          style={{ backgroundColor: color + '1A' }}
+        >
+          <Icon size={18} style={{ color }} />
+        </div>
+      </CardHeader>
+      <CardContent>
+        {isLoading ? (
+          <Skeleton className="h-8 w-24" />
+        ) : (
+          <>
+            <p className="text-2xl font-bold text-slate-800">{value}</p>
+            {sub && <p className="text-xs text-slate-500 mt-1">{sub}</p>}
+          </>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
 
 export default function DashboardPage() {
   const { data, isLoading, error } = useQuery<DashboardSummary>({
@@ -53,6 +64,10 @@ export default function DashboardPage() {
     },
   });
 
+  const fmt = (n: number) => n?.toLocaleString() ?? '—';
+  const peso = (n: number) =>
+    '₱' + (n ?? 0).toLocaleString('en-PH', { minimumFractionDigits: 2 });
+
   return (
     <div>
       <div className="mb-6">
@@ -62,39 +77,96 @@ export default function DashboardPage() {
 
       {error && (
         <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg text-red-600 text-sm">
-          Failed to load dashboard data. The API endpoint may not be available yet.
+          Failed to load dashboard data.
         </div>
       )}
 
-      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4">
-        {kpiCards.map((card) => {
-          const Icon = card.icon;
-          return (
-            <Card key={card.key} className="border shadow-sm">
-              <CardHeader className="flex flex-row items-center justify-between pb-2">
-                <CardTitle className="text-sm font-medium text-slate-500">
-                  {card.label}
-                </CardTitle>
-                <div
-                  className="w-9 h-9 rounded-lg flex items-center justify-center"
-                  style={{ backgroundColor: card.color + '1A' }}
-                >
-                  <Icon size={18} style={{ color: card.color }} />
-                </div>
-              </CardHeader>
-              <CardContent>
-                {isLoading ? (
-                  <Skeleton className="h-8 w-24" />
-                ) : (
-                  <p className="text-2xl font-bold text-slate-800">
-                    {data ? card.format(data[card.key]) : '—'}
-                  </p>
-                )}
-              </CardContent>
-            </Card>
-          );
-        })}
+      {/* KPI Row 1 */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-4 mb-4">
+        <KpiCard
+          label="Active Subscribers"
+          value={fmt(data?.subscribers?.active ?? 0)}
+          sub={`${fmt(data?.subscribers?.total ?? 0)} total · ${fmt(data?.subscribers?.pending ?? 0)} pending`}
+          icon={Wifi}
+          color="#059669"
+          isLoading={isLoading}
+        />
+        <KpiCard
+          label="Revenue This Month"
+          value={peso(data?.revenue?.thisMonth ?? 0)}
+          sub={`Last month: ${peso(data?.revenue?.lastMonth ?? 0)}`}
+          icon={DollarSign}
+          color="#0891B2"
+          isLoading={isLoading}
+        />
+        <KpiCard
+          label="Overdue Invoices"
+          value={fmt(data?.billing?.overdueInvoices ?? 0)}
+          sub={`${fmt(data?.billing?.unpaidInvoices ?? 0)} unpaid total`}
+          icon={AlertTriangle}
+          color="#DC2626"
+          isLoading={isLoading}
+        />
       </div>
+
+      {/* KPI Row 2 */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-4 mb-8">
+        <KpiCard
+          label="Open Tickets"
+          value={fmt(data?.support?.openTickets ?? 0)}
+          sub={`${fmt(data?.support?.inProgressTickets ?? 0)} in progress`}
+          icon={Ticket}
+          color="#7C3AED"
+          isLoading={isLoading}
+        />
+        <KpiCard
+          label="Pending Tasks"
+          value={fmt(data?.tasks?.pending ?? 0)}
+          sub="Manual tasks awaiting action"
+          icon={ClipboardList}
+          color="#D97706"
+          isLoading={isLoading}
+        />
+        <KpiCard
+          label="Total Clients"
+          value={fmt(data?.subscribers?.total ?? 0)}
+          sub={`${fmt(data?.leads?.new ?? 0)} new leads`}
+          icon={Users}
+          color="#0F172A"
+          isLoading={isLoading}
+        />
+      </div>
+
+      {/* Quick stats */}
+      <Card className="border shadow-sm">
+        <CardHeader>
+          <CardTitle className="text-base font-semibold text-slate-700">Subscriber Breakdown</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {isLoading ? (
+            <div className="space-y-2">
+              <Skeleton className="h-4 w-full" />
+              <Skeleton className="h-4 w-3/4" />
+            </div>
+          ) : (
+            <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
+              {[
+                { label: 'Active', value: data?.subscribers?.active ?? 0, color: '#059669' },
+                { label: 'Pending', value: data?.subscribers?.pending ?? 0, color: '#D97706' },
+                { label: 'Suspended', value: data?.subscribers?.suspended ?? 0, color: '#DC2626' },
+                { label: 'Total', value: data?.subscribers?.total ?? 0, color: '#0891B2' },
+              ].map((item) => (
+                <div key={item.label} className="text-center p-3 rounded-lg bg-slate-50">
+                  <p className="text-2xl font-bold" style={{ color: item.color }}>
+                    {item.value}
+                  </p>
+                  <p className="text-xs text-slate-500 mt-1">{item.label}</p>
+                </div>
+              ))}
+            </div>
+          )}
+        </CardContent>
+      </Card>
     </div>
   );
 }