feat: remittances web page with status badges and collector info

app/(app)/remittances/page.tsx

@@ -1,43 +1,101 @@
 'use client';
 
-import { Card, CardContent, CardHeader } from '@/components/ui/card';
+import { useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { Card, CardContent } from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
 import {
-  Table,
+  Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
 } from '@/components/ui/table';
+import { api } from '@/lib/api';
+import { format } from 'date-fns';
+
+interface Remittance {
+  id: string;
+  totalAmount: number;
+  status: string;
+  notes?: string;
+  createdAt: string;
+  collectedBy?: { firstName: string; lastName: string };
+  confirmedBy?: { firstName: string; lastName: string };
+}
+
+const STATUS_COLORS: Record<string, string> = {
+  PENDING: 'bg-yellow-100 text-yellow-700',
+  CONFIRMED: 'bg-emerald-100 text-emerald-700',
+  REJECTED: 'bg-red-100 text-red-700',
+};
 
 export default function RemittancesPage() {
+  const [page, setPage] = useState(1);
+  const limit = 20;
+
+  const { data, isLoading } = useQuery({
+    queryKey: ['remittances', page],
+    queryFn: async () => {
+      const res = await api.get(`/api/v1/remittances?page=${page}&limit=${limit}`);
+      return res.data;
+    },
+  });
+
+  const items: Remittance[] = Array.isArray(data) ? data : (data?.data ?? data?.items ?? []);
+  const total = (data as any)?.meta?.total ?? (data as any)?.total ?? items.length;
+
   return (
     <div>
       <div className="mb-6">
         <h1 className="text-2xl font-bold text-slate-800">Remittances</h1>
-        <p className="text-slate-500 text-sm mt-1">Collector cash remittance management</p>
+        <p className="text-slate-500 text-sm mt-1">Collector cash remittance records</p>
       </div>
 
-      <Card className="border shadow-sm">
+      <Card>
-        <CardHeader className="pb-4" />
         <CardContent className="p-0">
           <Table>
             <TableHeader>
               <TableRow>
-                <TableHead>Reference</TableHead>
-                <TableHead>Collector</TableHead>
-                <TableHead>Amount</TableHead>
                 <TableHead>Date</TableHead>
+                <TableHead>Collector</TableHead>
                 <TableHead>Status</TableHead>
-                <TableHead>Actions</TableHead>
+                <TableHead className="text-right">Total Amount</TableHead>
+                <TableHead>Confirmed By</TableHead>
+                <TableHead>Notes</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
-              <TableRow>
+              {isLoading ? (
-                <TableCell colSpan={6} className="text-center py-12 text-slate-400">
+                Array.from({ length: 6 }).map((_, i) => (
-                  No remittances found.
+                  <TableRow key={i}>{Array.from({ length: 6 }).map((_, j) => (
+                    <TableCell key={j}><Skeleton className="h-4 w-full" /></TableCell>
+                  ))}</TableRow>
+                ))
+              ) : items.length === 0 ? (
+                <TableRow><TableCell colSpan={6} className="text-center py-12 text-slate-400">No remittances yet</TableCell></TableRow>
+              ) : (
+                items.map((r) => (
+                  <TableRow key={r.id} className="hover:bg-slate-50">
+                    <TableCell className="text-sm text-slate-500">
+                      {format(new Date(r.createdAt), 'MMM d, yyyy')}
+                    </TableCell>
+                    <TableCell className="text-sm font-medium">
+                      {r.collectedBy ? `${r.collectedBy.firstName} ${r.collectedBy.lastName}` : '—'}
+                    </TableCell>
+                    <TableCell>
+                      <span className={`inline-flex px-2 py-0.5 rounded-full text-xs font-medium ${STATUS_COLORS[r.status] ?? 'bg-gray-100 text-gray-600'}`}>
+                        {r.status}
+                      </span>
+                    </TableCell>
+                    <TableCell className="text-right font-bold text-emerald-700">
+                      ₱{Number(r.totalAmount).toLocaleString()}
+                    </TableCell>
+                    <TableCell className="text-sm text-slate-500">
+                      {r.confirmedBy ? `${r.confirmedBy.firstName} ${r.confirmedBy.lastName}` : '—'}
+                    </TableCell>
+                    <TableCell className="text-xs text-slate-400 max-w-[150px] truncate">
+                      {r.notes ?? '—'}
                     </TableCell>
                   </TableRow>
+                ))
+              )}
             </TableBody>
           </Table>
         </CardContent>