Build [v1.14.30]

.planning/STATE.md

@@ -3,13 +3,13 @@
 ## Current Position
 - **Phase:** 07.1-frontend-overhaul
 - **Plan:** 07.1-frontend-overhaul-PLAN.md
-- **Task:** 2 (Completed)
+- **Task:** 4 (Completed)
 
 ## Progress
 - [x] Task 1: Update Tailwind Configuration
 - [x] Task 2: Implement Global Sharp Edges & Borders
-- [ ] Task 3: Component-Level Overhaul (Buttons & Inputs)
-- [ ] Task 4: StatCard & Data Table Refinement
+- [x] Task 3: Component-Level Overhaul (Buttons & Inputs)
+- [x] Task 4: StatCard & Data Table Refinement
 - [ ] Task 5: Layout & Viewport Adjustments
 - [ ] Task 6: Final Audit & Rule Alignment
 
@@ -17,6 +17,8 @@
 - Enforced `font-weight: 400 !important` and `text-transform: none !important` globally in `globals.css` to ensure strict compliance with `AI_RULES.md` (Industrial Precision aesthetic).
 - Set `border-radius: 0 !important` and `box-shadow: none !important` globally.
 - Used `Space Grotesk` from Google Fonts.
+- Refined StatCards and Data Tables with #121212 background and #222222 borders, sharp corners, and tight padding (8px-12px) for high information density.
+- Enforced Title Case for table headers to comply with "NO UPPERCASE" rule while maintaining "Industrial Precision" visual hierarchy.
 
 ## Blockers
 - None.

.planning/phases/07.1-frontend-overhaul/PLAN.md

@@ -85,7 +85,7 @@ autonomous: true
 
 ---
 
-## Task 4: StatCard & Data Table Refinement
+## Task 4: StatCard & Data Table Refinement [COMPLETED]
 
 **Read First:**
 - `DESIGN.md` (StatCards, Data Tables).

dev_docs/SESSION_HISTORY.md

@@ -0,0 +1,35 @@
+# CURRENT AI WORKING SESSION — HANDOVER
+
+**Active AI:** Gemini Executor
+**Last Updated:** 2026-04-25
+**Current Version:** v1.14.26
+**Status**: 🟢 PHASE 7.1 TASK 2 COMPLETE
+
+---
+
+## SESSION EXECUTION SUMMARY — Task 2: Global Sharp Edges & Borders
+
+### 1. Global CSS Update (COMPLETE)
+- Updated `frontend/app/globals.css` to enforce `border-radius: 0 !important` globally.
+- Removed all box-shadows globally (`box-shadow: none !important`).
+- Enforced `font-weight: 400 !important` and `text-transform: none !important` to comply with `AI_RULES.md`.
+- Implemented `level-1` and `level-2` classes for "Industrial Precision" borders.
+- Updated scrollbar to match industrial aesthetic (no radius, technical colors).
+- Added `status-success` and `status-alert` high-contrast utility classes.
+
+### 2. AI Rules Update
+- Updated `AI_RULES.md` to include a mandatory rule for 0px border radius and no shadows.
+
+### 3. Documentation Update
+- Marked Task 2 as completed in `.planning/phases/07.1-frontend-overhaul/PLAN.md`.
+
+---
+
+## NEXT STEPS (Phase 7.1: Frontend UI/UX Overhaul)
+
+1. **Task 3: Component-Level Overhaul**: Update Buttons and Inputs.
+2. **Task 4: StatCard & Data Table Refinement**.
+3. **Task 5: Layout & Viewport Adjustments**.
+
+---
+

dev_docs/SESSION_STATE.md

@@ -1,32 +1,41 @@
 # CURRENT AI WORKING SESSION — HANDOVER
 
-**Active AI:** Gemini Executor
+**Active AI:** Gemini Executor (Antigravity)
 **Last Updated:** 2026-04-25
-**Current Version:** v1.14.26
-**Status**: 🟢 PHASE 7.1 TASK 2 COMPLETE
+**Current Version:** v1.14.28
+**Status**: 🟢 PHASE 7.1 TASK 4 COMPLETE
 
 ---
 
-## SESSION EXECUTION SUMMARY — Task 2: Global Sharp Edges & Borders
+## SESSION EXECUTION SUMMARY — Task 4: StatCard & Data Table Refinement
 
-### 1. Global CSS Update (COMPLETE)
-- Updated `frontend/app/globals.css` to enforce `border-radius: 0 !important` globally.
-- Removed all box-shadows globally (`box-shadow: none !important`).
-- Enforced `font-weight: 400 !important` and `text-transform: none !important` to comply with `AI_RULES.md`.
-- Implemented `level-1` and `level-2` classes for "Industrial Precision" borders.
-- Updated scrollbar to match industrial aesthetic (no radius, technical colors).
-- Added `status-success` and `status-alert` high-contrast utility classes.
+### 1. StatCard Refinement (COMPLETE)
+- Updated `frontend/components/StatCard.tsx`.
+- Applied `bg-surface-container` (#121212) and `border-border` (#222222).
+- Tightened padding to `p-2 md:p-3` (8px-12px).
+- Numeric values set to `text-base md:text-lg` matching labels.
+- Value color set to `text-primary` (Caution Orange).
+- Removed `rounded-2xl` and `shadow-sm`.
 
-### 2. AI Rules Update
-- Updated `AI_RULES.md` to include a mandatory rule for 0px border radius and no shadows.
+### 2. Data Table Refinement (COMPLETE)
+- Updated `frontend/components/LogsTable.tsx`:
+  - Converted to a more "table-like" structure with a header row.
+  - Applied 1px horizontal dividers (`divide-y`).
+  - Removed gaps, rounded corners, and shadows.
+  - Compressed row padding.
+- Updated `frontend/components/InventoryTable.tsx`:
+  - Refined category headers and item rows with technical colors and sharp edges.
+  - Compressed spacing for higher information density.
+  - Applied Title Case to headers for `AI_RULES.md` compliance.
 
-### 3. Documentation Update
-- Marked Task 2 as completed in `.planning/phases/07.1-frontend-overhaul/PLAN.md`.
+### 3. Rule Compliance Audit
+- Verified NO UPPERCASE in headers/labels.
+- Verified NO BOLD fonts.
+- Verified 0px border radius (sharp corners) on all updated components.
 
 ---
 
 ## NEXT STEPS (Phase 7.1: Frontend UI/UX Overhaul)
 
-1. **Task 3: Component-Level Overhaul**: Update Buttons and Inputs.
-2. **Task 4: StatCard & Data Table Refinement**.
-3. **Task 5: Layout & Viewport Adjustments**.
+1. **Task 5: Layout & Viewport Adjustments**: Set primary viewport margins (24px-32px) and update page containers.
+2. **Task 6: Final Audit & Rule Alignment**: Check all pages for style regressions.

frontend/VERSION.json

@@ -1,6 +1,6 @@
 {
-  "version": "1.14.28",
-  "last_build": "2026-04-25-1243",
+  "version": "1.14.30",
+  "last_build": "2026-04-25-1249",
   "codename": "ConfigCore",
-  "commit": "5393b237"
+  "commit": "49d788cf"
 }

frontend/app/admin/page.tsx

@@ -26,18 +26,18 @@ export default function AdminPage() {
 
   return (
     <PageShell>
-      <main data-testid="admin-page" className="p-3 md:p-8 max-w-7xl mx-auto space-y-3 md:space-y-6 mb-20 font-sans">
-        <header className="flex items-center gap-4 mb-4 md:mb-6">
-          <div className="p-3 md:p-4 bg-primary/10 rounded-none text-primary border border-primary/20 shadow-none">
+      <main data-testid="admin-page" className="p-4 md:p-8 max-w-7xl mx-auto space-y-3 md:space-y-6 mb-20 font-sans">
+        <header className="flex items-center gap-4 mb-6 md:mb-8">
+          <div className="p-4 bg-primary/10 text-primary border border-primary/20">
             <Shield size={28} className="md:w-8 md:h-8" />
           </div>
           <div>
             <h1 className="text-2xl md:text-3xl font-normal tracking-tight text-white leading-tight">Admin Control</h1>
-            <p className="text-[10px] md:text-xs text-[#888888] font-normal tracking-tight mt-0.5">System Configuration & Security</p>
+            <p className="text-[10px] md:text-xs text-secondary font-normal tracking-tight mt-0.5">System Configuration & Security</p>
           </div>
           <button
              onClick={admin.handleLogout}
-             className="ml-auto p-3 bg-[#1A1A1A] border border-[#222222] text-[#888888] hover:text-rose-500 rounded-none transition-all active:scale-95 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:ring-rose-500 focus-visible:outline-none"
+             className="ml-auto p-3 bg-surface border border-slate-800 text-secondary hover:text-rose-500 transition-all active:scale-95 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:ring-rose-500 focus-visible:outline-none"
              title="Secure Logout"
              aria-label="Logout from admin panel"
           >

frontend/app/inventory/page.tsx

@@ -266,7 +266,7 @@ export default function InventoryPage() {
 
   return (
     <PageShell>
-      <div className="p-3 md:p-8 max-w-7xl mx-auto space-y-3 md:space-y-4 font-sans">
+      <div className="p-4 md:p-8 max-w-7xl mx-auto space-y-3 md:space-y-4 font-sans">
       <datalist id="existing-types">
         {existingTypes.map(t => <option key={t} value={t} />)}
       </datalist>
@@ -274,24 +274,24 @@ export default function InventoryPage() {
         {existingBoxes.map(b => <option key={b} value={b} />)}
       </datalist>
 
-      <header className="flex items-center gap-4 mb-4 md:mb-6">
-        <div className="p-3 md:p-4 bg-primary/10 text-primary border border-primary/20 rounded-none">
+      <header className="flex items-center gap-4 mb-6 md:mb-8">
+        <div className="p-4 bg-primary/10 text-primary border border-primary/20">
           <Package size={28} className="md:w-8 md:h-8" />
         </div>
          <div>
            <h1 className="text-2xl md:text-3xl font-normal tracking-tight text-white leading-tight">Inventory Catalog</h1>
-           <p className="text-xs md:text-sm text-[#888888] font-normal mt-1 tracking-widest">Enterprise Stock Overview</p>
+           <p className="text-xs md:text-sm text-secondary font-normal mt-1">Enterprise Stock Overview</p>
          </div>
         <button
           onClick={() => setShowSearchModal(true)}
-          className="ml-auto p-3 bg-[#1A1A1A] border border-[#222222] text-[#888888] hover:text-primary transition-all active:scale-95 rounded-none"
+          className="ml-auto p-3 bg-surface border border-slate-800 text-secondary hover:text-primary transition-all active:scale-95"
           title="Search Inventory"
         >
           <Search size={20} />
         </button>
         <button
           onClick={() => setShowBoxManager(true)}
-          className="p-3 bg-[#1A1A1A] border border-[#222222] text-[#888888] hover:text-primary transition-all active:scale-95 rounded-none"
+          className="p-3 bg-surface border border-slate-800 text-secondary hover:text-primary transition-all active:scale-95"
           title="Manage Boxes"
         >
           <Layout size={20} />

frontend/app/logs/page.tsx

@@ -87,15 +87,15 @@ export default function LogsPage() {
 
   return (
     <PageShell>
-      <main className="p-3 md:p-8 max-w-7xl mx-auto space-y-3 md:space-y-6 mb-20">
-        <header className="flex flex-col sm:flex-row sm:items-end justify-between gap-3 md:gap-4">
+      <main className="p-4 md:p-8 max-w-7xl mx-auto space-y-3 md:space-y-6 mb-20">
+        <header className="flex flex-col sm:flex-row sm:items-end justify-between gap-3 md:gap-4 mb-6 md:mb-8">
           <div className="flex items-center gap-4">
-            <div className="p-3 md:p-4 lg:p-5 xl:p-6 lg:p-8 xl:p-10 bg-primary/10 rounded-2xl text-primary border border-primary/20 shadow-xl shadow-primary/5">
+            <div className="p-4 bg-primary/10 text-primary border border-primary/20">
               <History size={28} className="md:w-8 md:h-8" />
             </div>
             <div>
               <h1 className="text-2xl md:text-3xl font-normal tracking-tight text-white leading-tight">Operations Audit</h1>
-              <p className="text-xs md:text-sm text-secondary font-normal tracking-widest mt-0.5">Real-time Intervention Tracking</p>
+              <p className="text-xs md:text-sm text-secondary font-normal mt-0.5">Real-time Intervention Tracking</p>
             </div>
           </div>
           
@@ -103,7 +103,7 @@ export default function LogsPage() {
              <button 
                onClick={loadData}
                disabled={loading}
-               className="flex items-center gap-2 px-5 py-2.5 bg-surface border border-slate-800 text-secondary hover:text-white rounded-2xl text-xs font-normal transition-all active:scale-95 disabled:opacity-50 shadow-xl"
+               className="flex items-center gap-2 px-5 py-2.5 bg-surface border border-slate-800 text-secondary hover:text-white text-xs font-normal transition-all active:scale-95 disabled:opacity-50"
              >
                <RefreshCw size={14} className={cn(loading && "animate-spin")} />
                Sync Logs
@@ -142,7 +142,7 @@ export default function LogsPage() {
               placeholder="Filter by user, action or asset..."
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
-              className="w-full bg-surface/50 border border-slate-800 rounded-2xl py-3 lg:py-4 xl:py-5.5 pr-4 pl-12 text-sm lg:text-base xl:text-lg lg:text-xl xl:text-2xl lg:text-3xl xl:text-4xl focus:border-primary outline-none transition-all placeholder:text-secondary shadow-2xl"
+              className="w-full bg-surface/50 border border-slate-800 py-3 lg:py-4 xl:py-5.5 pr-4 pl-12 text-sm lg:text-base xl:text-lg lg:text-xl xl:text-2xl lg:text-3xl xl:text-4xl focus:border-primary outline-none transition-all placeholder:text-secondary"
             />
             <div className="absolute left-4 top-1/2 -translate-y-1/2 text-secondary transition-colors group-focus-within:text-primary">
               <Search size={18} />
@@ -153,9 +153,9 @@ export default function LogsPage() {
             <button
               onClick={() => setFilterAction('ALL')}
               className={cn(
-                "px-5 py-2 rounded-full text-xs font-normal transition-all whitespace-nowrap border tracking-widest",
+                "px-5 py-2 text-xs font-normal transition-all whitespace-nowrap border",
                 filterAction === 'ALL' 
-                  ? "bg-white text-slate-950 border-white shadow-xl shadow-white/10" 
+                  ? "bg-white text-slate-950 border-white" 
                   : "bg-surface/70 text-secondary border-slate-800 hover:border-slate-700"
               )}
             >
@@ -166,9 +166,9 @@ export default function LogsPage() {
                 key={f}
                 onClick={() => setFilterAction(f)}
                 className={cn(
-                  "px-5 py-2 rounded-full text-xs font-normal transition-all whitespace-nowrap border tracking-widest",
+                  "px-5 py-2 text-xs font-normal transition-all whitespace-nowrap border",
                   filterAction === f 
-                    ? "bg-primary text-white border-primary shadow-xl shadow-primary/10" 
+                    ? "bg-primary text-white border-primary" 
                     : "bg-surface/70 text-secondary border-slate-800 hover:border-slate-700"
                 )}
               >

frontend/app/page.tsx

@@ -360,7 +360,7 @@ export default function Home() {
 
   return (
     <PageShell>
-      <div className="p-3 md:p-8 overflow-x-hidden w-full max-w-7xl mx-auto">
+      <div className="p-4 md:p-8 overflow-x-hidden w-full max-w-7xl mx-auto">
         {/* Search datalists for autocomplete */}
       <datalist id="existing-types">
         {existingTypes.map(t => <option key={t} value={t} />)}
@@ -370,33 +370,33 @@ export default function Home() {
       </datalist>
 
         {/* Header */}
-        <header className="flex flex-col sm:flex-row justify-between sm:items-center gap-3 md:gap-4 mb-3 md:mb-4 w-full px-1">
-          <div className="flex items-center gap-2 md:gap-3">
-            <div className="p-1">
+        <header className="flex flex-col sm:flex-row justify-between sm:items-center gap-3 md:gap-4 mb-6 md:mb-8 w-full">
+          <div className="flex items-center gap-4">
+            <div className="p-4 bg-primary/10 border border-primary/20">
               <img
                 src="/logo.png"
                 alt="TFM aInventory"
-                className="h-8 md:h-10 object-contain drop-shadow-xl rounded-lg"
+                className="h-8 md:h-10 object-contain"
               />
             </div>
             <div>
               <h1 className="text-2xl md:text-3xl font-normal tracking-tight text-white leading-tight">TFM aInventory</h1>
-            <p className="text-xs md:text-sm text-secondary font-normal tracking-tight mt-1 leading-relaxed">Check-in, Check-out & Trash Operations</p>
+              <p className="text-xs md:text-sm text-secondary font-normal tracking-tight mt-1 leading-relaxed">Check-in, Check-out & Trash Operations</p>
             </div>
           </div>
 
-          <div className="flex flex-wrap items-center justify-between sm:justify-end gap-2 md:gap-3 bg-surface/50 sm:bg-transparent px-3 py-2 sm:p-0 rounded-2xl border border-slate-800/50 sm:border-none">
+          <div className="flex flex-wrap items-center justify-between sm:justify-end gap-2 md:gap-3 bg-surface/50 sm:bg-transparent px-3 py-2 sm:p-0 border border-slate-800/50 sm:border-none">
             <div className="flex flex-wrap items-center gap-2 md:gap-3">
               {isScannerReady && (
                 <div className="flex items-center gap-2">
-                  <div className="w-1.5 h-1.5 rounded-full bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.6)]" />
+                  <div className="w-1.5 h-1.5 bg-green-500" />
                   <span className="text-xs font-normal text-green-500/90 whitespace-nowrap">
                     Scanner: OK
                   </span>
                 </div>
               )}
               <div className="flex items-center gap-2" data-testid={!isOnline ? "offline-indicator" : undefined}>
-                <div className={`w-1.5 h-1.5 rounded-full ${isOnline ? 'bg-green-500 animate-pulse shadow-[0_0_8px_rgba(34,197,94,0.6)]' : 'bg-rose-500 shadow-[0_0_8px_rgba(244,63,94,0.6)]'}`} />
+                <div className={`w-1.5 h-1.5 ${isOnline ? 'bg-green-500 animate-pulse' : 'bg-rose-500'}`} />
                 <span className={`text-xs font-normal whitespace-nowrap ${isOnline ? 'text-green-500/90' : 'text-rose-500/90'}`} data-testid={!isOnline ? "offline-sync-indicator" : undefined}>
                   Sync: {isOnline ? 'Active' : 'Offline'}
                 </span>
@@ -405,7 +405,7 @@ export default function Home() {
             <div className="flex items-center gap-2">
               <button
                 onClick={() => setShowSearch(true)}
-                className="p-2.5 bg-surface border border-slate-800 text-secondary rounded-xl hover:text-white transition-all active:scale-95"
+                className="p-2.5 bg-surface border border-slate-800 text-secondary hover:text-white transition-all active:scale-95"
                 title="Search (Ctrl+K)"
               >
                 <Search size={18} />
@@ -414,7 +414,7 @@ export default function Home() {
                 onClick={handleSync}
                 disabled={syncing}
                 data-testid="manual-sync-button"
-                className="p-2 lg:p-3 xl:p-4 lg:p-5 xl:p-6 lg:p-8 xl:p-10.5 bg-surface border border-slate-800 text-secondary rounded-xl hover:text-white transition-all active:scale-95 disabled:opacity-50"
+                className="p-2.5 bg-surface border border-slate-800 text-secondary hover:text-white transition-all active:scale-95 disabled:opacity-50"
               >
                 <RefreshCw size={18} className={syncing ? "animate-spin text-primary" : ""} />
               </button>
@@ -498,7 +498,7 @@ export default function Home() {
         {/* Box Contents Selection Modal */}
       {boxMatches.length > 0 && !selectedItem && (
         <div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-4 bg-background/80 animate-in fade-in duration-200">
-          <div className="w-full max-w-lg bg-surface border border-slate-800 rounded-[2.5rem] shadow-2xl p-4 md:p-6 overflow-hidden animate-in slide-in-from-bottom-10 duration-300 flex flex-col max-h-[85vh]">
+          <div className="w-full max-w-lg bg-surface border border-slate-800 p-4 md:p-6 overflow-hidden animate-in slide-in-from-bottom-10 duration-300 flex flex-col max-h-[85vh]">
             <div className="flex justify-between items-center mb-3 md:mb-4 shrink-0">
               <div>
                 <h3 className="text-xl font-normal tracking-tight flex items-center gap-2">
@@ -507,7 +507,7 @@ export default function Home() {
                 </h3>
                 <p className="text-xs text-secondary font-normal mt-1">Select the item you want to {mode.replace('_', ' ').toLowerCase()}</p>
               </div>
-              <button onClick={() => setBoxMatches([])} 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">
+              <button onClick={() => setBoxMatches([])} 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">
                 <X size={20} />
               </button>
             </div>
@@ -520,7 +520,7 @@ export default function Home() {
                     setBoxMatches([]);
                     setAdjustType(mode === 'CHECK_IN' ? 'ADD' : 'REMOVE');
                   }}
-                  className="w-full text-left bg-background/50 hover:bg-slate-800 border border-slate-800/80 p-3 md:p-4 rounded-2xl flex items-center gap-2 md:gap-3 transition-all active:scale-[0.98] group"
+                  className="w-full text-left bg-background/50 hover:bg-slate-800 border border-slate-800/80 p-3 md:p-4 flex items-center gap-2 md:gap-3 transition-all active:scale-[0.98] group"
                 >
                   <div className="flex-1 min-w-0">
                     <p className="text-sm font-normal text-white">{item.name}</p>