feat: add EmptyState component for improved no-data display in supplier payments

distribution_fe/app/(dashboard)/suppliers/[id]/payments/_components/supplier-payments-client.tsx

@@ -31,6 +31,8 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
 import { toast } from '@/components/ui/toast'
 import { TopLoader } from '@/components/shared/top-loader'
+import { EmptyState } from '@/components/shared/empty-state'
+import { ReceiptDollarIcon } from '@hugeicons/core-free-icons'
 
 function formatDate(value: string) {
   return new Date(value).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' })
@@ -84,24 +86,26 @@ export function SupplierPaymentsClient({ supplierId }: { supplierId: string }) {
       </div>
 
       <div className="rounded-md border mt-4">
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead>Paid At</TableHead>
-              <TableHead>Method</TableHead>
-              <TableHead className="text-right">Amount</TableHead>
-              <TableHead>Cheque / Account</TableHead>
-              <TableHead className="text-right">GRNs</TableHead>
-              <TableHead>Notes</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {loading ? (
-              <TableRow><TableCell colSpan={6}>Loading…</TableCell></TableRow>
-            ) : payments.length === 0 ? (
-              <TableRow><TableCell colSpan={6}>No payments yet.</TableCell></TableRow>
-            ) : (
-              payments.map(p => (
+        {!loading && payments.length === 0 ? (
+          <EmptyState
+            icon={ReceiptDollarIcon}
+            title="No payments yet"
+            description="Record a payment to settle one or more GRNs for this supplier."
+          />
+        ) : (
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Paid At</TableHead>
+                <TableHead>Method</TableHead>
+                <TableHead className="text-right">Amount</TableHead>
+                <TableHead>Cheque / Account</TableHead>
+                <TableHead className="text-right">GRNs</TableHead>
+                <TableHead>Notes</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {payments.map(p => (
                 <TableRow key={p.id}>
                   <TableCell>{formatDate(p.paidAt)}</TableCell>
                   <TableCell><Badge variant="secondary">{p.method}</Badge></TableCell>
@@ -112,10 +116,10 @@ export function SupplierPaymentsClient({ supplierId }: { supplierId: string }) {
                   <TableCell className="text-right">{p.allocations.length}</TableCell>
                   <TableCell className="text-sm text-muted-foreground">{p.notes ?? '—'}</TableCell>
                 </TableRow>
-              ))
-            )}
-          </TableBody>
-        </Table>
+              ))}
+            </TableBody>
+          </Table>
+        )}
       </div>
 
       <div className="flex items-center justify-between mt-3 text-sm">