feat: enhance DataTable with custom empty state support and update GrnClient to utilize it

distribution_fe/app/(dashboard)/procurement/grn/_components/grn-client.tsx

@@ -3,7 +3,7 @@
 import { useState, useEffect, useCallback, useMemo } from 'react'
 import { useRouter } from 'next/navigation'
 import { HugeiconsIcon } from '@hugeicons/react'
-import { Add01Icon } from '@hugeicons/core-free-icons'
+import { Add01Icon, PackageDeliveredIcon } from '@hugeicons/core-free-icons'
 import { DataTable } from '@/components/shared/data-table'
 import type { TableConfig } from '@/components/shared/data-table'
 import { Button } from '@/components/ui/button'
@@ -11,6 +11,7 @@ import { toast } from '@/components/ui/toast'
 import { grn as grnApi, getApiError, getPaginatedItems } from '@/lib/api/index'
 import type { GrnResponse } from '@/types/api'
 import { GrnViewSheet } from './grn-view-sheet'
+import { EmptyState } from '@/components/shared/empty-state'
 
 const fmtDate = (v: string) =>
   new Date(v).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' })
@@ -53,7 +54,19 @@ export function GrnClient() {
     rowKey: 'id',
     serverSide: true,
     stickyHeader: true,
-    emptyMessage: 'No goods receipts found.',
+    emptyState: (
+      <EmptyState
+        icon={PackageDeliveredIcon}
+        title="No goods receipts yet"
+        description="GRNs appear here once goods are received against a purchase order or booked as a direct receipt."
+        action={
+          <Button size="sm" onClick={() => router.push('/procurement/grn/new')}>
+            <HugeiconsIcon icon={Add01Icon} size={14} />
+            New GRN
+          </Button>
+        }
+      />
+    ),
     pagination: { enabled: true, pageSize, pageSizeOptions: [10, 20, 50] },
     columns: [
       {