feat: enhance inventory tabs with statistical cards for better insights

src/components/hexa/views/inventory-grn-tab.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { EyeIcon, PlusIcon, TrashIcon, TruckIcon } from "lucide-react"
+import { CalendarClockIcon, DollarSignIcon, EyeIcon, PackageIcon, PlusIcon, TrashIcon, TruckIcon } from "lucide-react"
 import { toast } from "sonner"
 
 import { createGrn, getGrn, getGrns, getProducts, getSuppliers } from "@/lib/api/inventory"
@@ -26,6 +26,7 @@ import { Textarea } from "@/components/ui/textarea"
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
 import { DataTable, type DataTableColumn } from "@/components/hexa/data-table"
 import { PageSkeleton } from "@/components/hexa/page-skeleton"
+import { StatCard } from "@/components/hexa/stat-card"
 
 function formatDate(iso: string) {
   return new Date(iso).toLocaleString(undefined, {
@@ -316,6 +317,15 @@ function InventoryGrnTab() {
   const [dialogOpen, setDialogOpen] = React.useState(false)
   const [detailGrnId, setDetailGrnId] = React.useState<string | null>(null)
 
+  const totalValue = grns.reduce((sum, g) => sum + g.totalAmount, 0)
+  const now = new Date()
+  const thisMonthGrns = grns.filter((g) => {
+    const d = new Date(g.receivedAt)
+    return d.getFullYear() === now.getFullYear() && d.getMonth() === now.getMonth()
+  })
+  const thisMonthValue = thisMonthGrns.reduce((sum, g) => sum + g.totalAmount, 0)
+  const avgValue = grns.length ? totalValue / grns.length : 0
+
   const columns: DataTableColumn<GoodsReceivedNote>[] = [
     {
       key: "grnNumber",
@@ -371,6 +381,13 @@ function InventoryGrnTab() {
         </Button>
       </div>
 
+      <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
+        <StatCard icon={PackageIcon} tone="blue" label="Total GRNs" value={grns.length} />
+        <StatCard icon={DollarSignIcon} tone="purple" label="Total Received Value" value={formatCurrency(totalValue)} />
+        <StatCard icon={CalendarClockIcon} tone="amber" label="This Month" value={formatCurrency(thisMonthValue)} hint={`${thisMonthGrns.length} GRNs`} />
+        <StatCard icon={TruckIcon} tone="green" label="Avg. GRN Value" value={formatCurrency(avgValue)} />
+      </div>
+
       <DataTable
         columns={columns}
         rows={grns}