106 lines
3.9 KiB
TypeScript
106 lines
3.9 KiB
TypeScript
'use client';
|
|
|
|
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, 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 records</p>
|
|
</div>
|
|
|
|
<Card>
|
|
<CardContent className="p-0">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>Date</TableHead>
|
|
<TableHead>Collector</TableHead>
|
|
<TableHead>Status</TableHead>
|
|
<TableHead className="text-right">Total Amount</TableHead>
|
|
<TableHead>Confirmed By</TableHead>
|
|
<TableHead>Notes</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{isLoading ? (
|
|
Array.from({ length: 6 }).map((_, i) => (
|
|
<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>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|