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

@@ -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 { 
+import {
-  Package, 
+  Package,
-  ChevronRight, 
+  ChevronRight,
-  ChevronDown, 
+  ChevronDown,
-  BarChart3, 
+  BarChart3,
-  Layers, 
+  Layers,
-  Plus, 
+  Plus,
-  Minus, 
+  Minus,
-  Trash2, 
+  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">
+          <StatCard
-            <Layers size={18} className="text-primary shrink-0 opacity-80" />
+            label="Categories"
-            <p className="text-sm font-bold text-slate-300 whitespace-nowrap">Categories</p>
+            value={stats?.total_categories || categories.length}
-            <p className="text-xl font-black text-white tabular-nums ml-auto">{stats?.total_categories || categories.length}</p>
+            icon={Layers}
-          </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">
+          <StatCard
-            <Package size={18} className="text-green-500 shrink-0 opacity-80" />
+            label="Item Types"
-            <p className="text-sm font-bold text-slate-300 whitespace-nowrap">Item Types</p>
+            value={stats?.total_items || inventory.length}
-            <p className="text-xl font-black text-white tabular-nums ml-auto">{stats?.total_items || inventory.length}</p>
+            icon={Package}
-          </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">
+          <StatCard
-            <Layout size={18} className="text-amber-500 shrink-0 opacity-80" />
+            label="Total Boxes"
-            <p className="text-sm font-bold text-slate-300 whitespace-nowrap">Total Boxes</p>
+            value={existingBoxes.length}
-            <p className="text-xl font-black text-white tabular-nums ml-auto">{existingBoxes.length}</p>
+            icon={Box}
-          </div>
+          />
         </section>
 
         {/* Search */}