From adb6cde87aec43fb3056301e500f57d80e17e1df Mon Sep 17 00:00:00 2001
From: Daniel Bedeleanu <daniel.bedeleanu@emag.ro>
Date: Wed, 15 Apr 2026 11:19:47 +0300
Subject: [PATCH] fix: refactor Inventory page stat cards to use StatCard
 component

- Replace Categories, Item Types, Total Boxes with StatCard
- Fixes mobile content overflow with two-column flexbox layout
- Responsive font sizing for mobile/desktop
- Label truncation for long text
---
 frontend/app/inventory/page.tsx | 52 +++++++++++++++++----------------
 1 file changed, 27 insertions(+), 25 deletions(-)

diff --git a/frontend/app/inventory/page.tsx b/frontend/app/inventory/page.tsx
index f1ed07e0..eee0da47 100644
--- a/frontend/app/inventory/page.tsx
+++ b/frontend/app/inventory/page.tsx
@@ -5,16 +5,17 @@ import { db, Item } from '@/lib/db';
 import { inventoryApi } from '@/lib/api';
 import PageShell from '@/components/PageShell';
 import Scanner from '@/components/Scanner';
+import StatCard from '@/components/StatCard';
 import { toast } from 'react-hot-toast';
-import { 
-  Package, 
-  ChevronRight, 
-  ChevronDown, 
-  BarChart3, 
-  Layers, 
-  Plus, 
-  Minus, 
-  Trash2, 
+import {
+  Package,
+  ChevronRight,
+  ChevronDown,
+  BarChart3,
+  Layers,
+  Plus,
+  Minus,
+  Trash2,
   X,
   AlertTriangle,
   Tag,
@@ -23,7 +24,8 @@ import {
   Layout,
   Printer,
   Download,
-  Search
+  Search,
+  Box
 } from 'lucide-react';
 import { generateBarcode128, getQRCodeURL } from '@/lib/labels';
 import { clsx, type ClassValue } from 'clsx';
@@ -266,21 +268,21 @@ export default function InventoryPage() {
       <div className="w-full space-y-8">
         {/* Stats Dashboard */}
         <section className="grid grid-cols-2 md:grid-cols-4 gap-3">
-          <div className="bg-slate-900/80 border border-slate-700/40 p-2 px-4 rounded-xl flex items-center gap-4 shadow-lg backdrop-blur-sm">
-            <Layers size={18} className="text-primary shrink-0 opacity-80" />
-            <p className="text-sm font-bold text-slate-300 whitespace-nowrap">Categories</p>
-            <p className="text-xl font-black text-white tabular-nums ml-auto">{stats?.total_categories || categories.length}</p>
-          </div>
-          <div className="bg-slate-900/80 border border-slate-700/40 p-2 px-4 rounded-xl flex items-center gap-4 shadow-lg backdrop-blur-sm">
-            <Package size={18} className="text-green-500 shrink-0 opacity-80" />
-            <p className="text-sm font-bold text-slate-300 whitespace-nowrap">Item Types</p>
-            <p className="text-xl font-black text-white tabular-nums ml-auto">{stats?.total_items || inventory.length}</p>
-          </div>
-          <div className="bg-slate-900/80 border border-slate-700/40 p-2 px-4 rounded-xl flex items-center gap-4 shadow-lg backdrop-blur-sm">
-            <Layout size={18} className="text-amber-500 shrink-0 opacity-80" />
-            <p className="text-sm font-bold text-slate-300 whitespace-nowrap">Total Boxes</p>
-            <p className="text-xl font-black text-white tabular-nums ml-auto">{existingBoxes.length}</p>
-          </div>
+          <StatCard
+            label="Categories"
+            value={stats?.total_categories || categories.length}
+            icon={Layers}
+          />
+          <StatCard
+            label="Item Types"
+            value={stats?.total_items || inventory.length}
+            icon={Package}
+          />
+          <StatCard
+            label="Total Boxes"
+            value={existingBoxes.length}
+            icon={Box}
+          />
         </section>
 
         {/* Search */}