From 45db169ddaa806b1a345af22255a088da8bb0d7c Mon Sep 17 00:00:00 2001
From: Daniel Bedeleanu <daniel.bedeleanu@emag.ro>
Date: Wed, 15 Apr 2026 11:26:29 +0300
Subject: [PATCH] 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 | 30 ++++++++++++++----------------
 1 file changed, 14 insertions(+), 16 deletions(-)

diff --git a/frontend/app/admin/page.tsx b/frontend/app/admin/page.tsx
index bf8b8cd4..1f56e0f2 100644
--- a/frontend/app/admin/page.tsx
+++ b/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 { 
-  Shield, 
+import StatCard from '@/components/StatCard';
+import {
+  Shield,
   ShieldAlert,
-  UserPlus, 
-  User, 
-  Trash2, 
-  Tag, 
-  Plus, 
-  AlertTriangle, 
-  LogOut, 
+  UserPlus,
+  User,
+  Trash2,
+  Tag,
+  Plus,
+  AlertTriangle,
+  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">
-              <span className="text-[8px] font-black text-slate-500 uppercase tracking-widest">Local Archives</span>
-              <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 className="pl-6">
+              <StatCard label="Local Archives" value={dbStats.backup_count} icon={Archive} />
             </div>
           </div>
         </section>