feat: integrate payment functionality with new payment sheet and enhance supplier payments UI

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

@@ -30,6 +30,7 @@ import { Input } from '@/components/ui/input'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
 import { toast } from '@/components/ui/toast'
+import { TopLoader } from '@/components/shared/top-loader'
 
 function formatDate(value: string) {
   return new Date(value).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' })
@@ -70,7 +71,8 @@ export function SupplierPaymentsClient({ supplierId }: { supplierId: string }) {
   const pageCount = Math.max(1, Math.ceil(total / pageSize))
 
   return (
-    <>
+    <div className="relative">
+      <TopLoader active={loading} />
       <div className="flex items-center justify-between">
         <div>
           <h1 className="text-2xl font-semibold text-foreground">Supplier Payments</h1>
@@ -132,7 +134,7 @@ export function SupplierPaymentsClient({ supplierId }: { supplierId: string }) {
           onCreated={() => { setCreateOpen(false); loadPayments() }}
         />
       )}
-    </>
+    </div>
   )
 }