feat: Invoices + Payments pages with real API tables
This commit is contained in:
Forge
@@ -2,144 +2,167 @@
|
|||||||
|
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import { useQuery } from '@tanstack/react-query';
|
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 { 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';
|
import { format } from 'date-fns';
|
||||||
|
|
||||||
interface Invoice {
|
interface Invoice {
|
||||||
id: string;
|
id: string;
|
||||||
invoiceNumber: string;
|
invoiceNumber: string;
|
||||||
status: string;
|
|
||||||
subtotal: number;
|
|
||||||
lateFee: number;
|
|
||||||
total: number;
|
|
||||||
amountPaid: number;
|
|
||||||
balance: number;
|
|
||||||
dueDate: string;
|
dueDate: string;
|
||||||
createdAt: string;
|
subtotal: string;
|
||||||
|
lateFee: string;
|
||||||
|
total: string;
|
||||||
|
amountPaid: string;
|
||||||
|
balance: string;
|
||||||
|
status: string;
|
||||||
client?: { firstName: string; lastName: string; accountNumber: string };
|
client?: { firstName: string; lastName: string; accountNumber: string };
|
||||||
}
|
}
|
||||||
|
|
||||||
const STATUS_COLORS: Record<string, string> = {
|
interface InvoicesResponse {
|
||||||
DRAFT: 'bg-gray-100 text-gray-600',
|
data: Invoice[];
|
||||||
|
total: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
const statusColors: Record<string, string> = {
|
||||||
SENT: 'bg-blue-100 text-blue-700',
|
SENT: 'bg-blue-100 text-blue-700',
|
||||||
PARTIAL: 'bg-yellow-100 text-yellow-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',
|
OVERDUE: 'bg-red-100 text-red-700',
|
||||||
|
DRAFT: 'bg-gray-100 text-gray-500',
|
||||||
VOID: 'bg-gray-100 text-gray-400',
|
VOID: 'bg-gray-100 text-gray-400',
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const peso = (v: string | number) =>
|
||||||
|
'₱' + Number(v ?? 0).toLocaleString('en-PH', { minimumFractionDigits: 2 });
|
||||||
|
|
||||||
export default function InvoicesPage() {
|
export default function InvoicesPage() {
|
||||||
const [search, setSearch] = useState('');
|
const [search, setSearch] = useState('');
|
||||||
const [status, setStatus] = useState('');
|
const [statusFilter, setStatusFilter] = useState('');
|
||||||
const [page, setPage] = useState(1);
|
const [page, setPage] = useState(1);
|
||||||
const debouncedSearch = useDebounce(search, 400);
|
|
||||||
const limit = 20;
|
|
||||||
|
|
||||||
const { data, isLoading } = useQuery({
|
const { data, isLoading } = useQuery<InvoicesResponse>({
|
||||||
queryKey: ['invoices', debouncedSearch, status, page],
|
queryKey: ['invoices', search, statusFilter, page],
|
||||||
queryFn: async () => {
|
queryFn: async () => {
|
||||||
const params = new URLSearchParams({ page: String(page), limit: String(limit) });
|
const params = new URLSearchParams({ page: String(page), limit: '20' });
|
||||||
if (status) params.set('status', status);
|
if (search) params.set('search', search);
|
||||||
if (debouncedSearch) params.set('search', debouncedSearch);
|
if (statusFilter) params.set('status', statusFilter);
|
||||||
const res = await api.get(`/api/v1/invoices?${params}`);
|
const res = await api.get(`/api/v1/invoices?${params}`);
|
||||||
return res.data;
|
return res.data;
|
||||||
},
|
},
|
||||||
|
staleTime: 30_000,
|
||||||
});
|
});
|
||||||
|
|
||||||
const invoices: Invoice[] = Array.isArray(data) ? data : (data?.data ?? data?.items ?? []);
|
const invoices = data?.data ?? [];
|
||||||
const total = (data as any)?.meta?.total ?? (data as any)?.total ?? invoices.length;
|
const total = data?.total ?? 0;
|
||||||
|
|
||||||
const STATUSES = ['', 'SENT', 'PARTIAL', 'PAID', 'OVERDUE', 'DRAFT', 'VOID'];
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<div className="mb-6">
|
<div className="flex items-center justify-between mb-6">
|
||||||
<h1 className="text-2xl font-bold text-slate-800">Invoices</h1>
|
<div>
|
||||||
<p className="text-slate-500 text-sm mt-1">Track billing and payment status</p>
|
<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>
|
</div>
|
||||||
|
|
||||||
{/* Filters */}
|
<div className="flex gap-3 mb-4">
|
||||||
<div className="mb-4 flex flex-wrap gap-3">
|
<div className="relative flex-1">
|
||||||
<div className="relative flex-1 min-w-[200px] max-w-sm">
|
|
||||||
<Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
|
<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}
|
<Input
|
||||||
onChange={(e) => { setSearch(e.target.value); setPage(1); }} />
|
placeholder="Search by invoice # or client..."
|
||||||
|
className="pl-9"
|
||||||
|
value={search}
|
||||||
|
onChange={(e) => { setSearch(e.target.value); setPage(1); }}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex gap-1">
|
<select
|
||||||
{STATUSES.map(s => (
|
className="border rounded-md px-3 py-2 text-sm text-slate-700 bg-white"
|
||||||
<button key={s}
|
value={statusFilter}
|
||||||
onClick={() => { setStatus(s); setPage(1); }}
|
onChange={(e) => { setStatusFilter(e.target.value); 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'
|
<option value="">All Statuses</option>
|
||||||
}`}>
|
{['SENT', 'PARTIAL', 'PAID', 'OVERDUE', 'DRAFT', 'VOID'].map((s) => (
|
||||||
{s || 'All'}
|
<option key={s} value={s}>{s}</option>
|
||||||
</button>
|
|
||||||
))}
|
))}
|
||||||
</div>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Card>
|
<Card className="border shadow-sm">
|
||||||
<CardContent className="p-0">
|
<CardContent className="p-0">
|
||||||
<Table>
|
<div className="overflow-x-auto">
|
||||||
<TableHeader>
|
<table className="w-full text-sm">
|
||||||
<TableRow>
|
<thead>
|
||||||
<TableHead>Invoice #</TableHead>
|
<tr className="border-b bg-slate-50">
|
||||||
<TableHead>Client</TableHead>
|
<th className="text-left px-4 py-3 font-medium text-slate-500">Invoice #</th>
|
||||||
<TableHead>Status</TableHead>
|
<th className="text-left px-4 py-3 font-medium text-slate-500 hidden md:table-cell">Client</th>
|
||||||
<TableHead className="text-right">Total</TableHead>
|
<th className="text-left px-4 py-3 font-medium text-slate-500 hidden lg:table-cell">Due Date</th>
|
||||||
<TableHead className="text-right">Balance</TableHead>
|
<th className="text-right px-4 py-3 font-medium text-slate-500">Total</th>
|
||||||
<TableHead>Due Date</TableHead>
|
<th className="text-right px-4 py-3 font-medium text-slate-500 hidden md:table-cell">Balance</th>
|
||||||
</TableRow>
|
<th className="text-left px-4 py-3 font-medium text-slate-500">Status</th>
|
||||||
</TableHeader>
|
<th className="px-4 py-3"></th>
|
||||||
<TableBody>
|
</tr>
|
||||||
{isLoading ? (
|
</thead>
|
||||||
Array.from({ length: 8 }).map((_, i) => (
|
<tbody>
|
||||||
<TableRow key={i}>
|
{isLoading
|
||||||
{Array.from({ length: 6 }).map((_, j) => (
|
? Array.from({ length: 8 }).map((_, i) => (
|
||||||
<TableCell key={j}><Skeleton className="h-4 w-full" /></TableCell>
|
<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>
|
</tbody>
|
||||||
))
|
</table>
|
||||||
) : invoices.length === 0 ? (
|
</div>
|
||||||
<TableRow>
|
|
||||||
<TableCell colSpan={6} className="text-center py-12 text-slate-400">
|
{!isLoading && invoices.length === 0 && (
|
||||||
No invoices found
|
<div className="text-center py-12 text-slate-400">No invoices found</div>
|
||||||
</TableCell>
|
)}
|
||||||
</TableRow>
|
|
||||||
) : (
|
{total > 20 && (
|
||||||
invoices.map((inv) => (
|
<div className="flex items-center justify-between px-4 py-3 border-t">
|
||||||
<TableRow key={inv.id} className="hover:bg-slate-50">
|
<p className="text-sm text-slate-500">
|
||||||
<TableCell className="font-mono text-sm">{inv.invoiceNumber}</TableCell>
|
Showing {(page - 1) * 20 + 1}–{Math.min(page * 20, total)} of {total}
|
||||||
<TableCell className="text-sm">
|
</p>
|
||||||
{inv.client ? `${inv.client.firstName} ${inv.client.lastName}` : '—'}
|
<div className="flex gap-2">
|
||||||
{inv.client && <span className="text-xs text-slate-400 ml-1">#{inv.client.accountNumber}</span>}
|
<button disabled={page === 1} onClick={() => setPage(p => p - 1)}
|
||||||
</TableCell>
|
className="px-3 py-1 text-sm border rounded-md disabled:opacity-40">Prev</button>
|
||||||
<TableCell>
|
<button disabled={page * 20 >= total} onClick={() => setPage(p => p + 1)}
|
||||||
<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'}`}>
|
className="px-3 py-1 text-sm border rounded-md disabled:opacity-40">Next</button>
|
||||||
{inv.status}
|
</div>
|
||||||
</span>
|
</div>
|
||||||
</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>
|
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -2,139 +2,135 @@
|
|||||||
|
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import { useQuery } from '@tanstack/react-query';
|
import { useQuery } from '@tanstack/react-query';
|
||||||
|
import { api } from '@/lib/api';
|
||||||
import { Card, CardContent } from '@/components/ui/card';
|
import { Card, CardContent } from '@/components/ui/card';
|
||||||
import { Input } from '@/components/ui/input';
|
import { Input } from '@/components/ui/input';
|
||||||
import { Skeleton } from '@/components/ui/skeleton';
|
import { Skeleton } from '@/components/ui/skeleton';
|
||||||
import {
|
|
||||||
Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
|
|
||||||
} from '@/components/ui/table';
|
|
||||||
import { Search } from 'lucide-react';
|
import { Search } from 'lucide-react';
|
||||||
import { api } from '@/lib/api';
|
|
||||||
import { format } from 'date-fns';
|
import { format } from 'date-fns';
|
||||||
|
|
||||||
interface Payment {
|
interface Payment {
|
||||||
id: string;
|
id: string;
|
||||||
amount: number;
|
amount: string;
|
||||||
channel: string;
|
channel: string;
|
||||||
paymentDate: string;
|
paymentDate: string;
|
||||||
notes?: string;
|
notes: string | null;
|
||||||
client?: { firstName: string; lastName: string; accountNumber: string };
|
client?: { firstName: string; lastName: string; accountNumber: string };
|
||||||
invoice?: { invoiceNumber: string };
|
|
||||||
recordedBy?: { firstName: string; lastName: string };
|
recordedBy?: { firstName: string; lastName: string };
|
||||||
|
invoice?: { invoiceNumber: string };
|
||||||
}
|
}
|
||||||
|
|
||||||
const CHANNEL_COLORS: Record<string, string> = {
|
const channelColors: Record<string, string> = {
|
||||||
CASH: 'bg-emerald-100 text-emerald-700',
|
CASH: 'bg-green-100 text-green-700',
|
||||||
GCASH: 'bg-blue-100 text-blue-700',
|
GCASH: 'bg-blue-100 text-blue-700',
|
||||||
MAYA: 'bg-green-100 text-green-700',
|
MAYA: 'bg-purple-100 text-purple-700',
|
||||||
BANK_TRANSFER: 'bg-purple-100 text-purple-700',
|
BANK_TRANSFER: 'bg-orange-100 text-orange-700',
|
||||||
CHECK: 'bg-orange-100 text-orange-700',
|
CHECK: 'bg-gray-100 text-gray-700',
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function PaymentsPage() {
|
const peso = (v: string | number) =>
|
||||||
const [page, setPage] = useState(1);
|
'₱' + Number(v ?? 0).toLocaleString('en-PH', { minimumFractionDigits: 2 });
|
||||||
const limit = 20;
|
|
||||||
|
|
||||||
const { data, isLoading } = useQuery({
|
export default function PaymentsPage() {
|
||||||
queryKey: ['payments', page],
|
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 () => {
|
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;
|
return res.data;
|
||||||
},
|
},
|
||||||
|
staleTime: 30_000,
|
||||||
});
|
});
|
||||||
|
|
||||||
const payments: Payment[] = Array.isArray(data) ? data : (data?.data ?? data?.items ?? []);
|
const payments = data?.data ?? [];
|
||||||
const total = (data as any)?.meta?.total ?? (data as any)?.total ?? payments.length;
|
const total = data?.total ?? 0;
|
||||||
|
|
||||||
const totalAmount = payments.reduce((sum, p) => sum + Number(p.amount), 0);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<div className="mb-6 flex items-center justify-between">
|
<div className="flex items-center justify-between mb-6">
|
||||||
<div>
|
<div>
|
||||||
<h1 className="text-2xl font-bold text-slate-800">Payments</h1>
|
<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>
|
</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>
|
</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">
|
<CardContent className="p-0">
|
||||||
<Table>
|
<div className="overflow-x-auto">
|
||||||
<TableHeader>
|
<table className="w-full text-sm">
|
||||||
<TableRow>
|
<thead>
|
||||||
<TableHead>Date</TableHead>
|
<tr className="border-b bg-slate-50">
|
||||||
<TableHead>Client</TableHead>
|
<th className="text-left px-4 py-3 font-medium text-slate-500">Date</th>
|
||||||
<TableHead>Invoice</TableHead>
|
<th className="text-left px-4 py-3 font-medium text-slate-500 hidden md:table-cell">Client</th>
|
||||||
<TableHead>Channel</TableHead>
|
<th className="text-right px-4 py-3 font-medium text-slate-500">Amount</th>
|
||||||
<TableHead className="text-right">Amount</TableHead>
|
<th className="text-left px-4 py-3 font-medium text-slate-500">Channel</th>
|
||||||
<TableHead>Recorded By</TableHead>
|
<th className="text-left px-4 py-3 font-medium text-slate-500 hidden lg:table-cell">Recorded By</th>
|
||||||
<TableHead>Notes</TableHead>
|
<th className="text-left px-4 py-3 font-medium text-slate-500 hidden xl:table-cell">Invoice</th>
|
||||||
</TableRow>
|
</tr>
|
||||||
</TableHeader>
|
</thead>
|
||||||
<TableBody>
|
<tbody>
|
||||||
{isLoading ? (
|
{isLoading
|
||||||
Array.from({ length: 8 }).map((_, i) => (
|
? Array.from({ length: 8 }).map((_, i) => (
|
||||||
<TableRow key={i}>
|
<tr key={i} className="border-b">
|
||||||
{Array.from({ length: 7 }).map((_, j) => (
|
{Array.from({ length: 6 }).map((_, j) => (
|
||||||
<TableCell key={j}><Skeleton className="h-4 w-full" /></TableCell>
|
<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>
|
</tbody>
|
||||||
))
|
</table>
|
||||||
) : payments.length === 0 ? (
|
</div>
|
||||||
<TableRow>
|
{!isLoading && payments.length === 0 && (
|
||||||
<TableCell colSpan={7} className="text-center py-12 text-slate-400">No payments yet</TableCell>
|
<div className="text-center py-12 text-slate-400">No payments found</div>
|
||||||
</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>
|
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</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>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user