fix: refactor Admin page stat cards to use StatCard component

- Replace Local Archives stat display with StatCard
- Consistent styling and responsive layout across admin stats
- Improves mobile content overflow handling

frontend/app/admin/page.tsx

@@ -3,16 +3,17 @@
 import { useState, useEffect } from 'react';
 import { inventoryApi } from '@/lib/api';
 import PageShell from '@/components/PageShell';
-import { 
+import StatCard from '@/components/StatCard';
-  Shield, 
+import {
+  Shield,
   ShieldAlert,
-  UserPlus, 
+  UserPlus,
-  User, 
+  User,
-  Trash2, 
+  Trash2,
-  Tag, 
+  Tag,
-  Plus, 
+  Plus,
-  AlertTriangle, 
+  AlertTriangle,
-  LogOut, 
+  LogOut,
   HardDrive,
   Download,
   RotateCcw,
@@ -29,7 +30,8 @@ import {
   Database,
   Layers,
   X,
-  ChevronDown
+  ChevronDown,
+  Archive
 } from 'lucide-react';
 import { toast } from 'react-hot-toast';
 import { cn } from '@/lib/utils';
@@ -758,12 +760,8 @@ export default function AdminPage() {
                 <span className="text-[10px] font-black text-green-500 tracking-tight">Online</span>
               </div>
             </div>
-            <div className="flex flex-col items-end pl-6">
+            <div className="pl-6">
-              <span className="text-[8px] font-black text-slate-500 uppercase tracking-widest">Local Archives</span>
+              <StatCard label="Local Archives" value={dbStats.backup_count} icon={Archive} />
-              <div className="flex items-center gap-3 mt-1">
-                <span className="text-[10px] font-black text-white">{dbStats.backup_count} Files</span>
-                <span className="text-[10px] font-black text-primary/60">{formatSize(dbStats.total_size_bytes)}</span>
-              </div>
             </div>
           </div>
         </section>