feat: Invoices + Payments pages with real API tables

app/(app)/invoices/page.tsx

@@ -2,144 +2,167 @@
 
 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 { Card, CardContent } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Search, ChevronRight } from 'lucide-react';
 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;
+  subtotal: string;
+  lateFee: string;
+  total: string;
+  amountPaid: string;
+  balance: string;
+  status: string;
   client?: { firstName: string; lastName: string; accountNumber: string };
 }
 
-const STATUS_COLORS: Record<string, string> = {
-  DRAFT: 'bg-gray-100 text-gray-600',
+interface InvoicesResponse {
+  data: Invoice[];
+  total: number;
+}
+
+const statusColors: Record<string, string> = {
   SENT: 'bg-blue-100 text-blue-700',
   PARTIAL: 'bg-yellow-100 text-yellow-700',
-  PAID: 'bg-emerald-100 text-emerald-700',
+  PAID: 'bg-green-100 text-green-700',
   OVERDUE: 'bg-red-100 text-red-700',
+  DRAFT: 'bg-gray-100 text-gray-500',
   VOID: 'bg-gray-100 text-gray-400',
 };
 
+const peso = (v: string | number) =>
+  '₱' + Number(v ?? 0).toLocaleString('en-PH', { minimumFractionDigits: 2 });
+
 export default function InvoicesPage() {
   const [search, setSearch] = useState('');
-  const [status, setStatus] = useState('');
+  const [statusFilter, setStatusFilter] = useState('');
   const [page, setPage] = useState(1);
-  const debouncedSearch = useDebounce(search, 400);
-  const limit = 20;
 
-  const { data, isLoading } = useQuery({
-    queryKey: ['invoices', debouncedSearch, status, page],
+  const { data, isLoading } = useQuery<InvoicesResponse>({
+    queryKey: ['invoices', search, statusFilter, 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 params = new URLSearchParams({ page: String(page), limit: '20' });
+      if (search) params.set('search', search);
+      if (statusFilter) params.set('status', statusFilter);
       const res = await api.get(`/api/v1/invoices?${params}`);
       return res.data;
     },
+    staleTime: 30_000,
   });
 
-  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'];
+  const invoices = data?.data ?? [];
+  const total = data?.total ?? 0;
 
   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 billing and payment status</p>
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h1 className="text-2xl font-bold text-slate-800">Invoices</h1>
+          <p className="text-slate-500 text-sm mt-1">{total} invoices</p>
+        </div>
       </div>
 
-      {/* Filters */}
-      <div className="mb-4 flex flex-wrap gap-3">
-        <div className="relative flex-1 min-w-[200px] max-w-sm">
+      <div className="flex gap-3 mb-4">
+        <div className="relative flex-1">
           <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); }} />
+          <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>
+        <select
+          className="border rounded-md px-3 py-2 text-sm text-slate-700 bg-white"
+          value={statusFilter}
+          onChange={(e) => { setStatusFilter(e.target.value); setPage(1); }}
+        >
+          <option value="">All Statuses</option>
+          {['SENT', 'PARTIAL', 'PAID', 'OVERDUE', 'DRAFT', 'VOID'].map((s) => (
+            <option key={s} value={s}>{s}</option>
           ))}
-        </div>
+        </select>
       </div>
 
-      <Card>
+      <Card className="border shadow-sm">
         <CardContent className="p-0">
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead>Invoice #</TableHead>
-                <TableHead>Client</TableHead>
-                <TableHead>Status</TableHead>
-                <TableHead className="text-right">Total</TableHead>
-                <TableHead className="text-right">Balance</TableHead>
-                <TableHead>Due Date</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {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>
+          <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">Invoice #</th>
+                  <th className="text-left px-4 py-3 font-medium text-slate-500 hidden md:table-cell">Client</th>
+                  <th className="text-left px-4 py-3 font-medium text-slate-500 hidden lg:table-cell">Due Date</th>
+                  <th className="text-right px-4 py-3 font-medium text-slate-500">Total</th>
+                  <th className="text-right px-4 py-3 font-medium text-slate-500 hidden md:table-cell">Balance</th>
+                  <th className="text-left px-4 py-3 font-medium text-slate-500">Status</th>
+                  <th className="px-4 py-3"></th>
+                </tr>
+              </thead>
+              <tbody>
+                {isLoading
+                  ? Array.from({ length: 8 }).map((_, i) => (
+                      <tr key={i} className="border-b">
+                        {Array.from({ length: 7 }).map((_, j) => (
+                          <td key={j} className="px-4 py-3"><Skeleton className="h-4 w-20" /></td>
+                        ))}
+                      </tr>
+                    ))
+                  : invoices.map((inv) => (
+                      <tr key={inv.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">{inv.invoiceNumber}</td>
+                        <td className="px-4 py-3 text-slate-700 hidden md:table-cell">
+                          {inv.client
+                            ? `${inv.client.firstName} ${inv.client.lastName}`
+                            : '—'}
+                          <div className="text-xs text-slate-400">{inv.client?.accountNumber}</div>
+                        </td>
+                        <td className="px-4 py-3 text-slate-600 hidden lg:table-cell">
+                          {inv.dueDate ? format(new Date(inv.dueDate), 'MMM d, yyyy') : '—'}
+                        </td>
+                        <td className="px-4 py-3 text-right font-medium text-slate-800">{peso(inv.total)}</td>
+                        <td className="px-4 py-3 text-right text-slate-600 hidden md:table-cell">
+                          {Number(inv.balance) > 0 ? (
+                            <span className="text-red-600 font-medium">{peso(inv.balance)}</span>
+                          ) : (
+                            <span className="text-green-600">Paid</span>
+                          )}
+                        </td>
+                        <td className="px-4 py-3">
+                          <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${statusColors[inv.status] ?? 'bg-gray-100 text-gray-500'}`}>
+                            {inv.status}
+                          </span>
+                        </td>
+                        <td className="px-4 py-3 text-slate-400"><ChevronRight size={16} /></td>
+                      </tr>
                     ))}
-                  </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>
+              </tbody>
+            </table>
+          </div>
+
+          {!isLoading && invoices.length === 0 && (
+            <div className="text-center py-12 text-slate-400">No invoices found</div>
+          )}
+
+          {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>
+          )}
         </CardContent>
       </Card>
     </div>

app/(app)/payments/page.tsx

@@ -2,139 +2,135 @@
 
 import { useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
+import { api } from '@/lib/api';
 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;
+  amount: string;
   channel: string;
   paymentDate: string;
-  notes?: string;
+  notes: string | null;
   client?: { firstName: string; lastName: string; accountNumber: string };
-  invoice?: { invoiceNumber: string };
   recordedBy?: { firstName: string; lastName: string };
+  invoice?: { invoiceNumber: string };
 }
 
-const CHANNEL_COLORS: Record<string, string> = {
-  CASH: 'bg-emerald-100 text-emerald-700',
+const channelColors: Record<string, string> = {
+  CASH: 'bg-green-100 text-green-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',
+  MAYA: 'bg-purple-100 text-purple-700',
+  BANK_TRANSFER: 'bg-orange-100 text-orange-700',
+  CHECK: 'bg-gray-100 text-gray-700',
 };
 
-export default function PaymentsPage() {
-  const [page, setPage] = useState(1);
-  const limit = 20;
+const peso = (v: string | number) =>
+  '₱' + Number(v ?? 0).toLocaleString('en-PH', { minimumFractionDigits: 2 });
 
-  const { data, isLoading } = useQuery({
-    queryKey: ['payments', page],
+export default function PaymentsPage() {
+  const [search, setSearch] = useState('');
+  const [channelFilter, setChannelFilter] = useState('');
+  const [page, setPage] = useState(1);
+
+  const { data, isLoading } = useQuery<{ data: Payment[]; total: number }>({
+    queryKey: ['payments', search, channelFilter, page],
     queryFn: async () => {
-      const res = await api.get(`/api/v1/payments?page=${page}&limit=${limit}`);
+      const params = new URLSearchParams({ page: String(page), limit: '20' });
+      if (channelFilter) params.set('channel', channelFilter);
+      const res = await api.get(`/api/v1/payments?${params}`);
       return res.data;
     },
+    staleTime: 30_000,
   });
 
-  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);
+  const payments = data?.data ?? [];
+  const total = data?.total ?? 0;
 
   return (
     <div>
-      <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">Payments</h1>
-          <p className="text-slate-500 text-sm mt-1">Payment collection records</p>
+          <p className="text-slate-500 text-sm mt-1">{total} payments</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>
+      <div className="flex gap-3 mb-4">
+        <div className="relative flex-1">
+          <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
+          <Input placeholder="Search..." className="pl-9" value={search}
+            onChange={(e) => { setSearch(e.target.value); setPage(1); }} />
+        </div>
+        <select
+          className="border rounded-md px-3 py-2 text-sm text-slate-700 bg-white"
+          value={channelFilter}
+          onChange={(e) => { setChannelFilter(e.target.value); setPage(1); }}
+        >
+          <option value="">All Channels</option>
+          {['CASH', 'GCASH', 'MAYA', 'BANK_TRANSFER', 'CHECK'].map((c) => (
+            <option key={c} value={c}>{c.replace('_', ' ')}</option>
+          ))}
+        </select>
+      </div>
+
+      <Card className="border shadow-sm">
         <CardContent className="p-0">
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead>Date</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>
-              {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>
+          <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">Date</th>
+                  <th className="text-left px-4 py-3 font-medium text-slate-500 hidden md:table-cell">Client</th>
+                  <th className="text-right px-4 py-3 font-medium text-slate-500">Amount</th>
+                  <th className="text-left px-4 py-3 font-medium text-slate-500">Channel</th>
+                  <th className="text-left px-4 py-3 font-medium text-slate-500 hidden lg:table-cell">Recorded By</th>
+                  <th className="text-left px-4 py-3 font-medium text-slate-500 hidden xl:table-cell">Invoice</th>
+                </tr>
+              </thead>
+              <tbody>
+                {isLoading
+                  ? Array.from({ length: 8 }).map((_, i) => (
+                      <tr key={i} className="border-b">
+                        {Array.from({ length: 6 }).map((_, j) => (
+                          <td key={j} className="px-4 py-3"><Skeleton className="h-4 w-20" /></td>
+                        ))}
+                      </tr>
+                    ))
+                  : payments.map((p) => (
+                      <tr key={p.id} className="border-b hover:bg-slate-50 transition-colors">
+                        <td className="px-4 py-3 text-slate-600">
+                          {p.paymentDate ? format(new Date(p.paymentDate), 'MMM d, yyyy') : '—'}
+                        </td>
+                        <td className="px-4 py-3 text-slate-700 hidden md:table-cell">
+                          {p.client ? `${p.client.firstName} ${p.client.lastName}` : '—'}
+                          <div className="text-xs text-slate-400">{p.client?.accountNumber}</div>
+                        </td>
+                        <td className="px-4 py-3 text-right font-semibold text-slate-800">{peso(p.amount)}</td>
+                        <td className="px-4 py-3">
+                          <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${channelColors[p.channel] ?? 'bg-gray-100 text-gray-500'}`}>
+                            {p.channel?.replace('_', ' ')}
+                          </span>
+                        </td>
+                        <td className="px-4 py-3 text-slate-600 hidden lg:table-cell">
+                          {p.recordedBy ? `${p.recordedBy.firstName} ${p.recordedBy.lastName}` : '—'}
+                        </td>
+                        <td className="px-4 py-3 text-slate-500 font-mono text-xs hidden xl:table-cell">
+                          {p.invoice?.invoiceNumber ?? '—'}
+                        </td>
+                      </tr>
                     ))}
-                  </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>
+              </tbody>
+            </table>
+          </div>
+          {!isLoading && payments.length === 0 && (
+            <div className="text-center py-12 text-slate-400">No payments found</div>
+          )}
         </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>
   );
 }