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

- Replace Total Events, Check in, Check out displays with StatCard
- Maintain Top Operator as custom card (displays string value)
- Fixes mobile content overflow with responsive layout
- Consistent styling with Inventory page
---
 frontend/app/logs/page.tsx | 45 ++++++++++++++++++++++----------------
 1 file changed, 26 insertions(+), 19 deletions(-)

diff --git a/frontend/app/logs/page.tsx b/frontend/app/logs/page.tsx
index ea467cd8..3197307e 100644
--- a/frontend/app/logs/page.tsx
+++ b/frontend/app/logs/page.tsx
@@ -7,6 +7,7 @@ import PageShell from '@/components/PageShell';
 import { History, X, Search, Filter, Activity, ArrowDownCircle, ArrowUpCircle, User, RefreshCw } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { fetchAndCacheItems } from '@/lib/sync';
+import StatCard from '@/components/StatCard';
 
 export default function LogsPage() {
   const [auditLogs, setAuditLogs] = useState<any[]>([]);
@@ -112,25 +113,31 @@ export default function LogsPage() {
 
           {/* Stats Grid */}
           <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-            <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">
-              <Activity size={18} className="text-primary shrink-0 opacity-80" />
-              <p className="text-sm font-bold text-slate-300 whitespace-nowrap">Total Events</p>
-              <p className="text-xl font-black text-white tabular-nums ml-auto">{totalCount}</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">
-              <ArrowDownCircle size={18} className="text-green-500 shrink-0 opacity-80" />
-              <p className="text-sm font-bold text-slate-300 whitespace-nowrap">Check in</p>
-              <p className="text-xl font-black text-green-500 tabular-nums ml-auto">{inCount}</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">
-              <ArrowUpCircle size={18} className="text-rose-500 shrink-0 opacity-80" />
-              <p className="text-sm font-bold text-slate-300 whitespace-nowrap">Check out</p>
-              <p className="text-xl font-black text-rose-500 tabular-nums ml-auto">{outCount}</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 overflow-hidden">
-              <User size={18} className="text-indigo-400 shrink-0 opacity-80" />
-              <p className="text-sm font-bold text-slate-300 whitespace-nowrap">Top Operator</p>
-              <p className="text-base font-black text-amber-500 truncate ml-auto" title={mostActiveUser}>{mostActiveUser}</p>
+            <StatCard
+              label="Total Events"
+              value={totalCount}
+              icon={Activity}
+            />
+            <StatCard
+              label="Check in"
+              value={inCount}
+              icon={ArrowDownCircle}
+            />
+            <StatCard
+              label="Check out"
+              value={outCount}
+              icon={ArrowUpCircle}
+            />
+            <div className="flex justify-between items-center gap-2 p-4 bg-slate-900 rounded-lg" role="status">
+              <div className="flex items-center gap-2 min-w-0">
+                <User className="w-5 h-5 text-primary flex-shrink-0" aria-hidden="true" />
+                <span className="text-sm md:text-base text-slate-400 truncate">
+                  Top Operator
+                </span>
+              </div>
+              <span className="text-lg md:text-xl font-black text-white whitespace-nowrap" title={mostActiveUser}>
+                {mostActiveUser}
+              </span>
             </div>
           </div>