diff --git a/.planning/phases/07.1-frontend-overhaul/PLAN.md b/.planning/phases/07.1-frontend-overhaul/PLAN.md new file mode 100644 index 00000000..bbe87ae8 --- /dev/null +++ b/.planning/phases/07.1-frontend-overhaul/PLAN.md @@ -0,0 +1,136 @@ +--- +wave: 1 +depends_on: ["07-config-consolidation"] +files_modified: [ + "frontend/tailwind.config.ts", + "frontend/styles/globals.css", + "frontend/components/ui/StatCard.tsx", + "frontend/components/ui/Button.tsx", + "frontend/components/ui/Input.tsx", + "frontend/app/layout.tsx", + "frontend/app/page.tsx", + "AI_RULES.md" +] +autonomous: true +--- + +# Phase 7.1: Frontend UI/UX Overhaul (Industrial Precision) - Implementation Plan + +**Objective:** Implement the "Industrial Precision" design system from `DESIGN.md` across all frontend pages, ensuring high-contrast signaling, sharp corners (0px radius), and a technical, utilitarian aesthetic while maintaining compliance with mandatory typography rules. + +**Success Criteria:** +- Tailwind configuration updated with the new "Industrial Precision" color palette. +- Global styles updated to enforce 0px border radius (sharp corners) for all components. +- Typography updated to use "Space Grotesk" as the primary font. +- Visual hierarchy achieved through size, color, and spacing (preserving the "NO BOLD" and "NO UPPERCASE" rules from AI_RULES.md). +- StatCards, Buttons, and Inputs reflect the new brutalist/industrial aesthetic. +- All pages (Dashboard, Inventory, Admin, Logs) updated to use the new container and margin system. + +--- + +## Task 1: Update Tailwind Configuration [COMPLETED] + +**Read First:** +- `DESIGN.md` for color palette and spacing units. +- `frontend/tailwind.config.ts` for current configuration. + +**Action:** +1. Update `tailwind.config.ts` with the "Industrial Precision" colors: + - Primary: `#F58618` (Caution Orange) + - Background: `#131313` + - Surfaces: `#0A0A0A`, `#121212`, `#1A1A1A` +2. Add "Space Grotesk" to the fontFamily configuration. +3. Configure the spacing unit (4px) and 12-column grid. + +**Acceptance Criteria:** +- `tailwind.config.ts` includes the new color palette. +- `Space Grotesk` is defined as the default sans font. +- Spacing units are aligned with `DESIGN.md`. + +--- + +## Task 2: Implement Global Sharp Edges & Borders + +**Read First:** +- `DESIGN.md` (Elevation & Depth, Shapes). +- `frontend/styles/globals.css`. + +**Action:** +1. Update `globals.css` to set `border-radius: 0` globally or through Tailwind layer overrides. +2. Implement the "Bold Borders" style: 1px or 2px solid borders for levels 1 and 2. +3. Remove all shadows and blurs, replacing them with tonal layers as per `DESIGN.md`. + +**Acceptance Criteria:** +- UI components have sharp 90-degree corners. +- Shadows are removed from the entire application. +- Borders use the specified technical colors (`#222222`, `#F58618`). + +--- + +## Task 3: Component-Level Overhaul (Buttons & Inputs) + +**Read First:** +- `DESIGN.md` (Components section). +- `frontend/components/ui/Button.tsx` (if it exists, otherwise standard elements). +- `frontend/components/ui/Input.tsx`. + +**Action:** +1. Update Button styles: Solid `#F58618` for primary, transparent with 1px border for secondary. +2. Update Input styles: Darker background (`#000000`), bottom-only or full 1px border. +3. Ensure no rounded corners and no bold text. + +**Acceptance Criteria:** +- Buttons and Inputs match the "Industrial Precision" visual style. +- Active/Focus states use the Caution Orange border. + +--- + +## Task 4: StatCard & Data Table Refinement + +**Read First:** +- `DESIGN.md` (StatCards, Data Tables). +- `AI_RULES.md` (StatCard Typography Rule). +- `frontend/components/ui/StatCard.tsx`. + +**Action:** +1. Refine StatCards to use high-contrast blocks and tight internal padding. +2. Ensure numeric values match label size (as per AI_RULES.md) but use color for emphasis. +3. Update Data Tables: remove zebra-striping, use 1px horizontal dividers, apply technical headers. + +**Acceptance Criteria:** +- StatCards provide high "glanceability" without overwhelming font sizes. +- Data Tables reflect the "glass cockpit" philosophy with high information density. + +--- + +## Task 5: Layout & Viewport Adjustments + +**Read First:** +- `DESIGN.md` (Layout & Spacing). +- `frontend/app/layout.tsx`. +- `frontend/app/page.tsx` and major route pages. + +**Action:** +1. Set the primary viewport margins (24px-32px). +2. Ensure main containers use `max-w-7xl` (consistent with AI_RULES.md). +3. Update page headers to match the unified icon box + title standard. + +**Acceptance Criteria:** +- Spacing is compressed internally but framed by generous outer margins. +- All pages feel consistent with the "high-end command center" aesthetic. + +--- + +## Task 6: Final Audit & Rule Alignment + +**Read First:** +- `AI_RULES.md` and `GEMINI.md`. + +**Action:** +1. Audit the new UI for any accidental BOLD or UPPERCASE text. +2. Re-verify contrast ratios (7:1 target for status-critical text). +3. Ensure "Lucide Icons" are used exclusively. + +**Acceptance Criteria:** +- 100% compliance with AI_RULES.md. +- Visual style perfectly aligns with `DESIGN.md` spirit. diff --git a/.standalone.pid b/.standalone.pid index 6c21cb9d..4d8b4b4d 100644 --- a/.standalone.pid +++ b/.standalone.pid @@ -1,3 +1,2 @@ -5813 -5814 -5831 +21336 +21347 diff --git a/PROJECT_ARCHITECTURE.md b/PROJECT_ARCHITECTURE.md index 858c9156..38c871af 100644 --- a/PROJECT_ARCHITECTURE.md +++ b/PROJECT_ARCHITECTURE.md @@ -20,7 +20,7 @@ A unified system for inventory management featuring web administration, offline ### 2.2 Frontend (Web & PWA) - **Architecture**: Next.js 15+ (App Router, TypeScript Strict) -- **Styling**: Tailwind CSS v3.4 (Standard typography, normal weight only) +- **Styling**: Tailwind CSS v3.4 (Industrial Precision, Space Grotesk, normal weight only) - **Icons**: Lucide Icons (exclusive) - **Offline Persistence**: Dexie.js (IndexedDB) - **Scanner**: `html5-qrcode` (Client-side, offline) diff --git a/README.md b/README.md index 6fe37199..a6658d35 100644 --- a/README.md +++ b/README.md @@ -56,5 +56,5 @@ To generate a clean production package: --- -**Last Updated**: 2026-05-15 -**Version**: 1.15.0 (Phase 7) +**Last Updated**: 2026-04-25 +**Version**: 1.14.25 (Phase 7.1) diff --git a/dev_docs/PLAN.md b/dev_docs/PLAN.md index eb44995a..b582ac90 100644 --- a/dev_docs/PLAN.md +++ b/dev_docs/PLAN.md @@ -21,6 +21,13 @@ A unified inventory management system that eliminates manual data entry through ## 3. Active Roadmap +### Phase 7.1: Frontend UI/UX Overhaul (Industrial Precision) [ACTIVE] +- **Design System Integration**: Apply the "Industrial Precision" system from `DESIGN.md`. +- **Component Refactoring**: Update all UI components to use sharp corners (0px) and bold borders. +- **Color Palette Update**: Implement the high-contrast Caution Orange and tiered black surface system. +- **Typography Alignment**: Apply Space Grotesk while strictly adhering to the "NO BOLD" and "NO UPPERCASE" rules from AI_RULES.md. +- **Glanceability Optimization**: Increase information density in StatCards and Data Tables. + ### Phase 8: Hardening & Release (PLANNED) - **Production Runbook**: Finalized guide for production deployment. - **Stress Testing**: Verify system performance with 10k+ items and multiple users. diff --git a/dev_docs/SESSION_STATE.md b/dev_docs/SESSION_STATE.md index c3999c85..e1afc3b8 100644 --- a/dev_docs/SESSION_STATE.md +++ b/dev_docs/SESSION_STATE.md @@ -1,64 +1,29 @@ # CURRENT AI WORKING SESSION — HANDOVER -**Active AI:** Gemini CLI -**Last Updated:** 2026-04-23 -<<<<<<< HEAD -**Current Version:** v1.14.22 -**Status**: ✅ MILESTONE 7 VERIFIED | 🟢 READY FOR PHASE 8 +**Active AI:** Gemini Executor +**Last Updated:** 2026-04-25 +**Current Version:** v1.14.25 +**Status**: 🟢 PHASE 7.1 TASK 1 COMPLETE --- -## SESSION 42 EXECUTION SUMMARY — Milestone Audit & Infrastructure Hardening +## SESSION EXECUTION SUMMARY — Task 1: Tailwind Update -### 1. Milestone 7 Audit (COMPLETE) -- **Verified Definition of Done**: Confirmed all Phase 7 (Config Consolidation) requirements are met. -- **Integration Check**: Fixed a critical gap where `run_standalone.py` was not updating the frontend's `network.json`. -- **Legacy Cleanup**: Deleted `start_server.sh`, `inventory.env.template`, and shell-based backup/restore scripts. -- **Script Unification**: Converted `backup.sh` and `restore.sh` to modern Python tools (`scripts/restore_prod.py`). +### 1. Tailwind Config (COMPLETE) +- Updated `frontend/tailwind.config.ts` with "Industrial Precision" palette. +- Added `Space Grotesk` font family. +- Aligned font sizes with `DESIGN.md` (14px, 16px, 18px, 24px, 32px, 48px). +- Defined tiered surface system: `#0A0A0A`, `#121212`, `#1A1A1A`. -### 2. UI/UX "Premium" Fidelity Fixes -- **Typography**: Removed all `font-weight: 600` and `font-medium` instances to comply with "NO BOLD" rule. -- **Copywriting**: Replaced generic "Cancel" buttons with contextual verbs ("Keep Item", "Discard Draft", etc.). -- **Consistency**: Fixed uppercase "DELETE" to Title Case "Delete" while preserving safety confirmation logic. - -### 3. Infrastructure Stability -- **LDAP Config**: Refactored `auth.py` to use `ConfigManager` for saving settings directly to `backend.yaml`, eliminating legacy JSON side-files. -- **Caddy Proxy**: Resolved Port 80 conflict by disabling automatic HTTP->HTTPS redirects in standalone mode. -======= -**Current Version:** v1.14.20 -**Status**: ✅ STATCARD TYPOGRAPHY REFINED | 🟢 READY FOR PHASE 8 +### 2. Documentation Update +- Updated `PROJECT_ARCHITECTURE.md` with new styling specs. +- Updated `README.md` version and date. +- Marked Task 1 as completed in `.planning/phases/07.1-frontend-overhaul/PLAN.md`. --- -## SESSION 44 EXECUTION SUMMARY — StatCard UI Tweak +## NEXT STEPS (Phase 7.1: Frontend UI/UX Overhaul) -### 1. StatCard Typography Adjustment -- **Constraint**: Reduced numeric value font size in dashboard cards (`StatCard.tsx`) to match their label text size (`text-base md:text-lg`). -- **Rationale**: User feedback indicated the previous large font sizes (`text-2xl md:text-3xl`) were overwhelming and disproportionate to the card's density. - -### 2. Rule Standardization -- **AI_RULES.md Updated**: Formally documented the new standard in Section 3 (UI/UX Fidelity Standards). Numeric values in StatCards MUST now match label sizes to maintain visual balance. ->>>>>>> dev - ---- - -## NEXT STEPS (Phase 8: Hardening & Release) - -<<<<<<< HEAD -1. **Production Runbook**: Create a finalized guide for production deployment. -2. **Stress Testing**: Verify system performance with 10k+ items and multiple users. -3. **E2E Validation**: Verify data consistency in multi-page Excel exports and Python management scripts. -4. **Final Polish**: Perform a final accessibility and performance audit before v1.15.0 stable release. -======= -1. **Extraction Validation**: - - Run sample images of RAID cards and NVMe drives to confirm `spare parts - ` categorization. -2. **UX Refinement**: - - Ensure the Admin UI displays these new categories correctly. -3. **v1.15.0 Milestone**: - - Finalize the release candidate. - ---- - -✓ All tasks for this session are implemented, verified, and committed. -✓ Services are currently RUNNING in the background. ->>>>>>> dev +1. **Task 2: Implement Global Sharp Edges & Borders**: Update `globals.css` for 0px radius and 1px/2px borders. +2. **Task 3: Component-Level Overhaul**: Update Buttons and Inputs. +3. **Task 4: StatCard & Data Table Refinement**. diff --git a/frontend/VERSION.json b/frontend/VERSION.json index 22ad2fb5..3ff78f2a 100644 --- a/frontend/VERSION.json +++ b/frontend/VERSION.json @@ -1,6 +1,6 @@ { - "version": "1.14.24", - "last_build": "2026-04-25-1204", + "version": "1.14.25", + "last_build": "2026-04-25-1221", "codename": "ConfigCore", - "commit": "33c1555d" + "commit": "b74d1172" } \ No newline at end of file diff --git a/frontend/public/network.json b/frontend/public/network.json index b70a710b..d9fbbb9d 100644 --- a/frontend/public/network.json +++ b/frontend/public/network.json @@ -4,4 +4,4 @@ "BACKEND_SSL_PORT": 8918, "FRONTEND_PORT": 8917, "FRONTEND_SSL_PORT": 8919 -} +} \ No newline at end of file diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts index 86f11fd4..3cfe5e55 100644 --- a/frontend/tailwind.config.ts +++ b/frontend/tailwind.config.ts @@ -4,40 +4,47 @@ const config: Config = { content: [ "./app/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", + "./lib/**/*.{js,ts,jsx,tsx,mdx}", ], theme: { fontSize: { - 'xs': '13px', // increased from 12px - 'sm': '15px', // increased from 14px - 'base': '18px', // increased from 16px - 'lg': '20px', // increased from 18px - 'xl': '22px', // increased from 20px - '2xl': '26px', // increased from 24px - '3xl': '32px', // increased from 30px - '4xl': '36px', - '5xl': '48px', + 'xs': '12px', + 'sm': '14px', // Design: label-md, mono-data + 'base': '16px', // Design: body-md + 'lg': '18px', // Design: body-lg + 'xl': '20px', + '2xl': '24px', // Design: headline-sm + '3xl': '30px', + '4xl': '32px', // Design: headline-md + '5xl': '48px', // Design: headline-lg + '6xl': '64px', }, extend: { + fontFamily: { + sans: ["'Space Grotesk'", "sans-serif"], + }, colors: { - background: "#0A0E27", - foreground: "#F0F4F8", - surface: "#1A1F3A", + background: "#131313", + foreground: "#FFFFFF", + surface: "#0A0A0A", + "surface-container": "#121212", + "surface-bright": "#1A1A1A", primary: { - DEFAULT: "#3B82F6", - foreground: "#FFFFFF", + DEFAULT: "#F58618", + foreground: "#000000", }, secondary: { - DEFAULT: "#C7D2E0", - foreground: "#0A0E27", + DEFAULT: "#888888", + foreground: "#FFFFFF", }, muted: { - DEFAULT: "#8B95AD", - foreground: "#F0F4F8", + DEFAULT: "#444444", + foreground: "#888888", }, - border: "#2D3561", - success: "#10B981", - error: "#EF4444", - warning: "#F59E0B", + border: "#222222", + success: "#00FF41", + error: "#FF3131", + warning: "#F58618", }, keyframes: { scan: {