bede/tfm_ainventory
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: refactor Logs page stat cards to use StatCard component

Browse Source 
- 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
This commit is contained in:
Daniel Bedeleanu
2026-04-15 11:23:10 +03:00
parent adb6cde87a
commit f47e7d005a
1 changed files with 26 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
frontend/app/logs/page.tsx
View File

@@ -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>