feat: Invoices + Payments pages with real API tables

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