fix: SSR crash — QueryClient in useState, mounted guard for auth hydration
This commit is contained in:
Forge
@@ -1,103 +1,124 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { api } from '@/lib/api';
|
||||
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 { ChevronRight, CheckCircle } from 'lucide-react';
|
||||
import { format } from 'date-fns';
|
||||
|
||||
interface Remittance {
|
||||
id: string;
|
||||
totalAmount: number;
|
||||
totalAmount: string;
|
||||
notes: string | null;
|
||||
status: string;
|
||||
notes?: string;
|
||||
createdAt: string;
|
||||
collectedBy?: { firstName: string; lastName: string };
|
||||
confirmedBy?: { firstName: string; lastName: string };
|
||||
payments?: Array<{ id: string; amount: 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',
|
||||
};
|
||||
const peso = (v: string | number) =>
|
||||
'₱' + Number(v ?? 0).toLocaleString('en-PH', { minimumFractionDigits: 2 });
|
||||
|
||||
export default function RemittancesPage() {
|
||||
const [page, setPage] = useState(1);
|
||||
const limit = 20;
|
||||
const qc = useQueryClient();
|
||||
|
||||
const { data, isLoading } = useQuery({
|
||||
queryKey: ['remittances', page],
|
||||
const { data, isLoading } = useQuery<{ data: Remittance[]; total: number }>({
|
||||
queryKey: ['remittances'],
|
||||
queryFn: async () => {
|
||||
const res = await api.get(`/api/v1/remittances?page=${page}&limit=${limit}`);
|
||||
const res = await api.get('/api/v1/remittances?limit=30');
|
||||
return res.data;
|
||||
},
|
||||
staleTime: 30_000,
|
||||
});
|
||||
|
||||
const items: Remittance[] = Array.isArray(data) ? data : (data?.data ?? data?.items ?? []);
|
||||
const total = (data as any)?.meta?.total ?? (data as any)?.total ?? items.length;
|
||||
const confirm = useMutation({
|
||||
mutationFn: async (id: string) => {
|
||||
await api.patch(`/api/v1/remittances/${id}/confirm`);
|
||||
},
|
||||
onSuccess: () => qc.invalidateQueries({ queryKey: ['remittances'] }),
|
||||
});
|
||||
|
||||
const remittances = data?.data ?? [];
|
||||
|
||||
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>
|
||||
<p className="text-slate-500 text-sm mt-1">Cash collections submitted by collectors</p>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<Card className="border shadow-sm">
|
||||
<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>
|
||||
<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">Collector</th>
|
||||
<th className="text-right px-4 py-3 font-medium text-slate-500">Amount</th>
|
||||
<th className="text-right px-4 py-3 font-medium text-slate-500 hidden lg:table-cell">Payments</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">Confirmed By</th>
|
||||
<th className="px-4 py-3"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{isLoading
|
||||
? Array.from({ length: 6 }).map((_, i) => (
|
||||
<tr key={i} className="border-b">
|
||||
{[...Array(7)].map((_, j) => (
|
||||
<td key={j} className="px-4 py-3"><Skeleton className="h-4 w-20" /></td>
|
||||
))}
|
||||
</tr>
|
||||
))
|
||||
: remittances.map((r) => (
|
||||
<tr key={r.id} className="border-b hover:bg-slate-50 transition-colors">
|
||||
<td className="px-4 py-3 text-slate-600">
|
||||
{r.createdAt ? format(new Date(r.createdAt), 'MMM d, yyyy') : '—'}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-slate-700 hidden md:table-cell">
|
||||
{r.collectedBy ? `${r.collectedBy.firstName} ${r.collectedBy.lastName}` : '—'}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-right font-semibold text-slate-800">
|
||||
{peso(r.totalAmount)}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-right text-slate-600 hidden lg:table-cell">
|
||||
{r.payments?.length ?? '—'}
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<span className={`px-2 py-0.5 rounded-full text-xs font-medium ${
|
||||
r.status === 'CONFIRMED'
|
||||
? 'bg-green-100 text-green-700'
|
||||
: 'bg-yellow-100 text-yellow-700'
|
||||
}`}>
|
||||
{r.status}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-slate-600 hidden xl:table-cell">
|
||||
{r.confirmedBy ? `${r.confirmedBy.firstName} ${r.confirmedBy.lastName}` : '—'}
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
{r.status !== 'CONFIRMED' && (
|
||||
<button
|
||||
onClick={() => confirm.mutate(r.id)}
|
||||
disabled={confirm.isPending}
|
||||
className="flex items-center gap-1 text-xs font-medium text-green-700 hover:text-green-800"
|
||||
>
|
||||
<CheckCircle size={14} />
|
||||
Confirm
|
||||
</button>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{!isLoading && remittances.length === 0 && (
|
||||
<div className="text-center py-12 text-slate-400">No remittances yet</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user