Build [v1.14.25]
This commit is contained in:
136
.planning/phases/07.1-frontend-overhaul/PLAN.md
Normal file
136
.planning/phases/07.1-frontend-overhaul/PLAN.md
Normal file
@@ -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.
|
||||
@@ -1,3 +1,2 @@
|
||||
5813
|
||||
5814
|
||||
5831
|
||||
21336
|
||||
21347
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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.
|
||||
|
||||
@@ -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 - <type>` 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**.
|
||||
|
||||
@@ -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"
|
||||
}
|
||||
@@ -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",
|
||||
primary: {
|
||||
DEFAULT: "#3B82F6",
|
||||
background: "#131313",
|
||||
foreground: "#FFFFFF",
|
||||
surface: "#0A0A0A",
|
||||
"surface-container": "#121212",
|
||||
"surface-bright": "#1A1A1A",
|
||||
primary: {
|
||||
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: {
|
||||
|
||||
Reference in New Issue
Block a user