From 5393b237de517968c0b7191c0a62890cd2b1364f Mon Sep 17 00:00:00 2001
From: Daniel Bedeleanu <bede@tfm.ro>
Date: Sat, 25 Apr 2026 12:43:38 +0300
Subject: [PATCH] feat(07.1-frontend-overhaul): refine StatCard and Data Tables

- Applied #121212 background and #222222 border to StatCards and Tables.
- Tightened internal padding to 8px-12px.
- Enforced 0px border radius and removed shadows.
- Numeric values in StatCards now match label size.
- Caution Orange used for emphasis in StatCards.
- Removed zebra-striping and applied 1px horizontal dividers to Tables.
- Headers updated to Title Case Space Grotesk.
- Complies with AI_RULES.md (no bold, no uppercase).
---
 frontend/components/InventoryTable.tsx |  54 ++++----
 frontend/components/LogsTable.tsx      | 169 ++++++++++++++-----------
 frontend/components/StatCard.tsx       |   4 +-
 3 files changed, 120 insertions(+), 107 deletions(-)

diff --git a/frontend/components/InventoryTable.tsx b/frontend/components/InventoryTable.tsx
index 547d701b..e664f77b 100644
--- a/frontend/components/InventoryTable.tsx
+++ b/frontend/components/InventoryTable.tsx
@@ -53,57 +53,56 @@ export default function InventoryTable({
 
   if (categories.length === 0) {
     return (
-      <div className="py-2 lg:py-3 xl:py-40 text-center text-secondary">
+      <div className="py-2 lg:py-3 xl:py-40 text-center text-[#888888] font-sans">
         <Package size={48} className="mx-auto mb-4 opacity-10" />
-        <p className="font-normal">No results found</p>
+        <p className="font-normal">No Results Found</p>
       </div>
     );
   }
 
   return (
-    <section className="space-y-3">
+    <section className="space-y-4 font-sans">
       {categories.map(cat => {
         const categoryItems = items.filter(i => i.category === cat);
         return (
-          <div key={cat} className="bg-surface/50 border border-slate-800/50 rounded-3xl overflow-hidden transition-all duration-300">
+          <div key={cat} className="bg-surface-container border border-border transition-all duration-300">
             <div
-              className="w-full p-4 md:p-5 lg:p-6 xl:p-8 flex items-center justify-between hover:bg-surface/60 transition-colors cursor-pointer"
+              className="w-full p-2 md:p-3 flex items-center justify-between hover:bg-surface-bright transition-colors cursor-pointer"
               onClick={() => onExpandCategory(expandedCategory === cat ? null : cat)}
             >
               <div className="flex items-center gap-3">
-                <div className="w-10 h-10 rounded-2xl bg-primary/10 flex items-center justify-center text-primary transition-colors">
-                  <Layers size={20} />
+                <div className="w-8 h-8 bg-primary/10 flex items-center justify-center text-primary border border-primary/20 transition-colors">
+                  <Layers size={16} />
                 </div>
                 <div className="text-left">
-                  <h3 className="card-title text-base sm:text-lg lg:text-xl xl:text-2xl lg:text-3xl xl:text-4xl">{cat}</h3>
-                  <p className="card-subtitle tracking-tight">
-                    {categoryItems.length} Item types in stock
+                  <h3 className="text-sm md:text-base font-normal text-foreground">{cat}</h3>
+                  <p className="text-[10px] text-secondary font-normal">
+                    {categoryItems.length} Item Types In Stock
                   </p>
                 </div>
               </div>
               <div className="flex items-center gap-3">
-                {expandedCategory === cat ? <ChevronDown size={20} className="text-primary" /> : <ChevronRight size={20} className="text-secondary" />}
+                {expandedCategory === cat ? <ChevronDown size={18} className="text-primary" /> : <ChevronRight size={18} className="text-secondary" />}
                 {onEditCategory && (
                   <button
                     onClick={(e) => {
                       e.stopPropagation();
                       onEditCategory(cat);
                     }}
-                    className="p-2 lg:p-3 xl:p-4 lg:p-5 xl:p-6 lg:p-8 xl:p-10 hover:bg-slate-800 rounded-full text-muted hover:text-primary transition-colors relative z-10"
+                    className="p-1.5 hover:bg-surface-bright text-secondary hover:text-primary transition-colors border border-transparent hover:border-border"
                   >
-                    <EditIcon size={16} />
+                    <EditIcon size={14} />
                   </button>
                 )}
               </div>
             </div>
 
             {expandedCategory === cat && (
-              <div className="p-4 lg:p-5 xl:p-6 lg:p-8 xl:p-10 pt-0 space-y-2 animate-in slide-in-from-top-4 duration-300">
-                <div className="h-px bg-slate-800/50 mb-4 mx-2" />
+              <div className="divide-y divide-border border-t border-border animate-in slide-in-from-top-2 duration-200">
                 {categoryItems.map(item => (
                   <div
                     key={item.id}
-                    className="bg-background/40 border border-slate-800/50 p-4 rounded-2xl flex items-center justify-between hover:border-primary/40 transition-all active:scale-[0.98]"
+                    className="bg-black/20 p-2 md:p-3 flex items-center justify-between hover:bg-surface-bright/50 transition-colors"
                   >
                     <div
                       onClick={() => handleItemClick(item)}
@@ -115,7 +114,7 @@ export default function InventoryTable({
                             e.stopPropagation();
                             setSelectedPhotoItem(item);
                           }}
-                          className="w-12 h-12 rounded-xl shrink-0 border-2 border-slate-300 overflow-hidden cursor-pointer hover:border-primary transition-colors active:scale-95"
+                          className="w-10 h-10 shrink-0 border border-border overflow-hidden cursor-pointer hover:border-primary transition-colors"
                         >
                           <img
                             src={buildPhotoUrl(backendUrl, item.photo_path || item.image_url || '')}
@@ -125,30 +124,25 @@ export default function InventoryTable({
                           />
                         </div>
                       ) : (
-                        <div className="w-12 h-12 rounded-xl bg-green-500/10 flex items-center justify-center text-green-500 shrink-0">
+                        <div className="w-10 h-10 bg-green-500/10 flex items-center justify-center text-green-500 shrink-0 border border-green-500/20">
                           <Package size={14} />
                         </div>
                       )}
                       <div className="truncate">
-                        <h4 className="card-title truncate">{item.name}</h4>
-                        {item.photo_path || item.image_url ? (
-                          <p className="card-subtitle mt-0 lowercase opacity-80 text-xs">Tap photo for details</p>
-                        ) : (
-                          <>
-                            <p className="card-subtitle mt-0 lowercase opacity-80 truncate">{item.specs}</p>
-                            <p className="card-subtitle mt-0 text-xs">No photo</p>
-                          </>
-                        )}
+                        <h4 className="text-sm font-normal text-foreground truncate">{item.name}</h4>
+                        <p className="text-[10px] text-secondary font-normal truncate">
+                          {item.specs || (item.photo_path || item.image_url ? 'Tap Photo For Details' : 'No Specs')}
+                        </p>
                       </div>
                     </div>
                     <div className="text-right shrink-0">
                       <span className={cn(
-                        "text-lg font-normal",
-                        item.quantity <= item.min_quantity ? "text-amber-500" : "text-primary"
+                        "text-base font-normal tabular-nums",
+                        item.quantity <= item.min_quantity ? "text-warning" : "text-primary"
                       )}>
                         {item.quantity}
                       </span>
-                      <p className="text-sm text-muted font-normal tracking-tight">Stock</p>
+                      <p className="text-[10px] text-secondary font-normal">Stock</p>
                     </div>
                   </div>
                 ))}
diff --git a/frontend/components/LogsTable.tsx b/frontend/components/LogsTable.tsx
index b11cd035..054ca20a 100644
--- a/frontend/components/LogsTable.tsx
+++ b/frontend/components/LogsTable.tsx
@@ -25,21 +25,21 @@ export default function LogsTable({ logs, loading }: LogsTableProps) {
 
   if (loading) {
     return (
-      <div className="flex flex-col items-center justify-center py-3 lg:py-4 xl:py-52 text-secondary gap-4 animate-pulse">
-        <div className="w-10 h-10 border-4 border-primary/20 border-t-primary rounded-full animate-spin" />
-        <p className="text-xs font-normal tracking-widest italic">Securing Audit Stream...</p>
+      <div className="flex flex-col items-center justify-center py-20 text-secondary gap-4 animate-pulse">
+        <div className="w-10 h-10 border-4 border-primary/20 border-t-primary rounded-none animate-spin" />
+        <p className="text-xs font-normal">Securing Audit Stream...</p>
       </div>
     );
   }
 
   if (logs.length === 0) {
     return (
-      <div className="bg-surface/20 border border-slate-800/50 border-dashed rounded-[2.5rem] py-20 flex flex-col items-center justify-center text-center gap-3 md:gap-4">
-        <div className="w-16 h-16 bg-surface rounded-2xl flex items-center justify-center text-slate-700 border border-slate-800">
+      <div className="bg-surface-container border border-border border-dashed py-20 flex flex-col items-center justify-center text-center gap-4">
+        <div className="w-16 h-16 bg-surface-bright flex items-center justify-center text-secondary border border-border">
           <ArrowDownCircle size={32} />
         </div>
         <div>
-          <p className="text-xl font-normal text-secondary tracking-tight">No events found</p>
+          <p className="text-xl font-normal text-secondary">No events found</p>
           <p className="text-xs text-secondary font-normal mt-1">Refine your strategic filters</p>
         </div>
       </div>
@@ -48,81 +48,100 @@ export default function LogsTable({ logs, loading }: LogsTableProps) {
 
   return (
     <>
-      <div className="grid gap-2.5">
-        {logs.map((log) => (
-          <button
-            key={log.id}
-            onClick={() => setSelectedLog(log)}
-            className="w-full text-left bg-surface/50 border border-slate-800/30 p-3 lg:p-4 xl:p-5 lg:p-6 xl:p-8 px-4 lg:px-5 xl:px-6 rounded-2xl flex items-center justify-between gap-4 hover:bg-slate-800/40 hover:border-primary/30 transition-all group active:scale-[0.99] relative overflow-hidden shadow-sm"
-          >
-            <div className="flex-1 min-w-0 z-10 flex items-center gap-4">
-              {/* Compact Action Badge */}
-              <div className={cn(
-                "text-[10px] font-normal px-3 py-1.5 rounded-lg border min-w-[85px] text-center tracking-tight",
-                log.action.includes('CHECK_IN') ? "bg-green-500/10 text-green-500 border-green-500/20" :
-                (log.action.includes('TRASH') ? "bg-rose-500/10 text-rose-500 border-rose-500/20" :
-                 (log.action.includes('DB') ? "bg-sky-500/10 text-sky-400 border-sky-500/20" :
-                  (log.action.includes('DELETE') ? "bg-red-500/10 text-red-500 border-red-500/30" :
-                   (log.action.includes('CREATE') ? "bg-indigo-500/10 text-indigo-400 border-indigo-500/20" : "bg-primary/10 text-primary border-primary/20"))))
-              )}>
-                {log.action.replace('_', ' ')}
-              </div>
+      <div className="border border-border bg-surface-container overflow-hidden">
+        {/* Header Row */}
+        <div className="hidden md:grid grid-cols-[120px_1fr_120px_180px_80px] bg-surface-bright/50 border-b border-border">
+          <div className="p-2 text-xs text-secondary font-normal">Action</div>
+          <div className="p-2 text-xs text-secondary font-normal">Item</div>
+          <div className="p-2 text-xs text-secondary font-normal">Operator</div>
+          <div className="p-2 text-xs text-secondary font-normal">Timestamp</div>
+          <div className="p-2 text-xs text-secondary font-normal text-right">Delta</div>
+        </div>
 
-              <div className="flex-1 min-w-0">
-                <h3 className="card-title group-hover:text-primary transition-colors truncate">
-                  {log.resolved_name}
-                </h3>
-                <div className="flex items-center gap-2">
-                  <span className="card-subtitle mt-0 shrink-0">{log.username || 'System'}</span>
-                  <span className="w-1 h-1 rounded-full bg-slate-800 shrink-0 mt-1" />
-                  <span className="card-subtitle mt-0 lowercase opacity-80 truncate">
-                    {new Date(log.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })} · {new Date(log.timestamp).toLocaleDateString()}
-                  </span>
+        <div className="divide-y divide-border">
+          {logs.map((log) => (
+            <button
+              key={log.id}
+              onClick={() => setSelectedLog(log)}
+              className="w-full text-left p-2 md:p-3 hover:bg-surface-bright transition-colors group active:bg-surface-bright/80 relative"
+            >
+              <div className="md:grid md:grid-cols-[120px_1fr_120px_180px_80px] items-center gap-4">
+                {/* Action Badge - Mobile/Tablet shown as badge, Desktop as column */}
+                <div className="mb-2 md:mb-0">
+                  <div className={cn(
+                    "text-[10px] font-normal px-2 py-0.5 border text-center inline-block min-w-[100px]",
+                    log.action.includes('CHECK_IN') ? "bg-green-500/10 text-green-500 border-green-500/20" :
+                    (log.action.includes('TRASH') ? "bg-rose-500/10 text-rose-500 border-rose-500/20" :
+                     (log.action.includes('DB') ? "bg-sky-500/10 text-sky-400 border-sky-500/20" :
+                      (log.action.includes('DELETE') ? "bg-red-500/10 text-red-500 border-red-500/30" :
+                       (log.action.includes('CREATE') ? "bg-indigo-500/10 text-indigo-400 border-indigo-500/20" : "bg-primary/10 text-primary border-primary/20"))))
+                  )}>
+                    {log.action.replace('_', ' ').toLowerCase().replace(/\b\w/g, l => l.toUpperCase())}
+                  </div>
+                </div>
+
+                <div className="min-w-0">
+                  <h3 className="text-sm md:text-base text-foreground group-hover:text-primary transition-colors truncate">
+                    {log.resolved_name}
+                  </h3>
+                </div>
+
+                <div className="hidden md:block text-sm text-secondary truncate">
+                  {log.username || 'System'}
+                </div>
+
+                <div className="hidden md:block text-sm text-secondary tabular-nums">
+                  {new Date(log.timestamp).toLocaleDateString()} {new Date(log.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+                </div>
+
+                <div className={cn(
+                  "text-base md:text-sm font-normal tabular-nums text-right",
+                  (log.quantity_change || 0) > 0 ? "text-green-500" : ((log.quantity_change || 0) < 0 ? "text-rose-500" : "text-primary/50")
+                )}>
+                  {log.quantity_change ? (log.quantity_change > 0 ? `+${log.quantity_change}` : log.quantity_change) : (log.action.includes('DB') ? 'SYS' : '±')}
+                </div>
+
+                {/* Mobile-only secondary info */}
+                <div className="md:hidden mt-1 flex items-center gap-2 text-xs text-secondary opacity-80">
+                  <span>{log.username || 'System'}</span>
+                  <span>·</span>
+                  <span>{new Date(log.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</span>
                 </div>
               </div>
-            </div>
-
-            <div className="shrink-0 flex items-center gap-3 z-10">
-              <div className={cn(
-                "text-lg font-normal tabular-nums min-w-[35px] text-right",
-                (log.quantity_change || 0) > 0 ? "text-green-500" : ((log.quantity_change || 0) < 0 ? "text-rose-500" : "text-primary/50")
-              )}>
-                {log.quantity_change ? (log.quantity_change > 0 ? `+${log.quantity_change}` : log.quantity_change) : (log.action.includes('DB') ? 'SYS' : '±')}
-              </div>
-            </div>
-          </button>
-        ))}
+            </button>
+          ))}
+        </div>
       </div>
 
       {/* Selected Log Modal */}
       {selectedLog && (
         <div className="fixed inset-0 z-[100] flex items-end sm:items-center justify-center p-0 sm:p-4 bg-background/90 animate-in fade-in duration-300">
-          <div className="bg-surface border-t sm:border border-slate-800 rounded-t-[2.5rem] sm:rounded-[3rem] p-4 md:p-6 max-w-lg w-full shadow-2xl space-y-3 md:space-y-4 animate-in slide-in-from-bottom-10 duration-300 overflow-hidden">
+          <div className="bg-surface-container border-t sm:border border-border p-4 md:p-6 max-w-lg w-full space-y-4 animate-in slide-in-from-bottom-10 duration-300 overflow-hidden">
             <div className="flex justify-between items-start">
               <div className="space-y-1 pr-4">
                 <div className={cn(
-                  "text-xs font-normal px-4 py-1.5 rounded-full border inline-block tracking-widest",
+                  "text-xs font-normal px-3 py-1 border inline-block",
                   selectedLog.action.includes('CHECK_IN') ? "bg-green-500/10 text-green-500 border-green-500/30" :
                   (selectedLog.action.includes('TRASH') ? "bg-rose-500/10 text-rose-500 border-rose-500/30" : "bg-primary/10 text-primary border-primary/30")
                 )}>
-                  {selectedLog.action}
+                  {selectedLog.action.replace('_', ' ').toLowerCase().replace(/\b\w/g, l => l.toUpperCase())}
                 </div>
-                <h2 className="text-2xl font-normal text-white tracking-tight pt-2 leading-tight">
+                <h2 className="text-2xl font-normal text-foreground pt-2 leading-tight">
                   {selectedLog.resolved_name}
                 </h2>
               </div>
-              <button onClick={() => setSelectedLog(null)} className="p-3 lg:p-4 xl:p-5 lg:p-6 xl:p-8 bg-slate-800/50 hover:bg-slate-800 rounded-2xl text-muted transition-colors border border-slate-800 shrink-0 shadow-lg">
+              <button onClick={() => setSelectedLog(null)} className="p-2 bg-surface-bright hover:bg-border text-secondary transition-colors border border-border shrink-0">
                 <X size={20} />
               </button>
             </div>
 
-            <div className="grid grid-cols-2 gap-4">
-              <div className="space-y-1 bg-background/50 p-4 rounded-2xl border border-slate-800/50">
-                <p className="text-[11px] font-normal text-muted tracking-widest">Protocol Operator</p>
-                <p className="text-sm font-normal text-secondary">{selectedLog.username || 'Automated Process'}</p>
+            <div className="grid grid-cols-2 gap-px bg-border border border-border">
+              <div className="space-y-1 bg-surface-container p-3">
+                <p className="text-[10px] font-normal text-secondary">Protocol Operator</p>
+                <p className="text-sm font-normal text-foreground">{selectedLog.username || 'Automated Process'}</p>
               </div>
-              <div className="space-y-1 bg-background/50 p-4 rounded-2xl border border-slate-800/50">
-                <p className="text-[11px] font-normal text-muted tracking-widest">Quantity Delta</p>
+              <div className="space-y-1 bg-surface-container p-3">
+                <p className="text-[10px] font-normal text-secondary">Quantity Delta</p>
                 <p className={cn(
                   "text-xl font-normal tabular-nums",
                   (selectedLog.quantity_change || 0) > 0 ? "text-green-500" : "text-rose-500"
@@ -134,10 +153,10 @@ export default function LogsTable({ logs, loading }: LogsTableProps) {
               </div>
             </div>
 
-            <div className="space-y-5">
+            <div className="space-y-4">
               <div className="space-y-1">
-                <p className="text-[11px] font-normal text-muted tracking-widest ml-1">Universal Timestamp</p>
-                <p className="text-xs font-normal text-secondary bg-background/30 p-4 rounded-2xl border border-slate-800/30 tabular-nums">
+                <p className="text-[10px] font-normal text-secondary ml-1">Universal Timestamp</p>
+                <p className="text-xs font-normal text-foreground bg-surface-bright/30 p-3 border border-border tabular-nums">
                   {new Date(selectedLog.timestamp).toLocaleString(undefined, { dateStyle: 'full', timeStyle: 'medium' })}
                 </p>
               </div>
@@ -146,18 +165,18 @@ export default function LogsTable({ logs, loading }: LogsTableProps) {
                 try {
                   const snap = JSON.parse(selectedLog.target_snapshot) as Record<string, any>;
                   return (
-                    <div className="space-y-4 pt-2">
-                      <div className="flex items-center gap-3">
-                        <div className="h-px flex-1 bg-slate-800/50" />
-                        <p className="text-[8px] font-normal text-slate-700 tracking-[0.2em]">Snapshot Record</p>
-                        <div className="h-px flex-1 bg-slate-800/50" />
+                    <div className="space-y-2 pt-2">
+                      <div className="flex items-center gap-2">
+                        <div className="h-px flex-1 bg-border" />
+                        <p className="text-[10px] font-normal text-secondary">Snapshot Record</p>
+                        <div className="h-px flex-1 bg-border" />
                       </div>
-                      <div className="grid grid-cols-2 gap-2.5">
+                      <div className="grid grid-cols-2 gap-px bg-border border border-border">
                         {Object.entries(snap).map(([key, val]) => (
                           (val && key !== 'image_url' && key !== 'id') ? (
-                            <div key={key} className="bg-background/20 p-3 rounded-xl border border-slate-800/20">
-                              <p className="text-[10px] font-normal text-muted mb-1 tracking-tight opacity-70">{key.replace('_', ' ')}</p>
-                              <p className="text-xs font-normal text-secondary truncate" title={String(val)}>{String(val)}</p>
+                            <div key={key} className="bg-surface-container p-2">
+                              <p className="text-[10px] font-normal text-secondary mb-1 opacity-70">{key.replace('_', ' ').toLowerCase().replace(/\b\w/g, l => l.toUpperCase())}</p>
+                              <p className="text-xs font-normal text-foreground truncate" title={String(val)}>{String(val)}</p>
                             </div>
                           ) : null
                         ))}
@@ -168,10 +187,10 @@ export default function LogsTable({ logs, loading }: LogsTableProps) {
               })()}
 
               {selectedLog.details && (
-                <div className="space-y-1.5">
-                  <p className="text-[11px] font-normal text-muted tracking-widest ml-1">Intervention Details</p>
-                  <div className="bg-primary/5 text-primary/80 p-5 rounded-3xl border border-primary/10 text-sm font-normal leading-relaxed italic shadow-inner">
-                    "{selectedLog.details}"
+                <div className="space-y-1">
+                  <p className="text-[10px] font-normal text-secondary ml-1">Intervention Details</p>
+                  <div className="bg-primary/5 text-primary p-3 border border-primary/20 text-sm font-normal leading-relaxed">
+                    {selectedLog.details}
                   </div>
                 </div>
               )}
@@ -179,7 +198,7 @@ export default function LogsTable({ logs, loading }: LogsTableProps) {
 
             <button
               onClick={() => setSelectedLog(null)}
-              className="w-full bg-slate-800 hover:bg-slate-700 text-white font-normal py-4.5 rounded-2xl transition-all active:scale-95 border border-slate-700 shadow-xl"
+              className="w-full bg-primary hover:bg-primary/90 text-primary-foreground font-normal py-3 transition-colors border border-primary"
             >
               Close Audit Insight
             </button>
diff --git a/frontend/components/StatCard.tsx b/frontend/components/StatCard.tsx
index 205998d6..174ed375 100644
--- a/frontend/components/StatCard.tsx
+++ b/frontend/components/StatCard.tsx
@@ -9,7 +9,7 @@ interface StatCardProps {
 
 export default function StatCard({ label, value, icon: Icon }: StatCardProps) {
   return (
-    <div className="flex justify-between items-center gap-2 p-3 lg:p-4 xl:p-5 lg:p-6 xl:p-8.5 bg-surface/70 border border-slate-800/50 rounded-2xl shadow-sm transition-all hover:bg-surface" role="status">
+    <div className="flex justify-between items-center gap-2 p-2 md:p-3 bg-surface-container border border-border transition-all hover:bg-surface-bright" role="status">
       <div className="flex items-center gap-2.5 min-w-0">
         {Icon && <Icon className="w-5 h-5 text-primary flex-shrink-0" aria-hidden="true" />}
         <span className="text-base md:text-lg text-secondary font-normal truncate">
@@ -17,7 +17,7 @@ export default function StatCard({ label, value, icon: Icon }: StatCardProps) {
         </span>
       </div>
 
-      <span className="text-base md:text-lg font-normal text-white whitespace-nowrap tabular-nums">
+      <span className="text-base md:text-lg font-normal text-primary whitespace-nowrap tabular-nums">
         {value}
       </span>
     </div>