From d708463afd4899853b80addc5d3a1063e868037d Mon Sep 17 00:00:00 2001 From: Romain Stopnicki Date: Tue, 30 Jun 2026 17:19:29 +0200 Subject: [PATCH] Redesign UI into modern SaaS style with sidebar navigation and new Restocking view - Redesign App.vue with vertical sidebar, consistent spacing, and polished dark/light layout inspired by tools like Linear and Vercel - Add Restocking view with demand forecasts and backlog data - Extend backend with new restocking and backlog API endpoints - Update FilterBar and ProfileMenu components for the new layout - Add vue-router and update main.js entry point - Enrich demand_forecasts.json data - Add saas-redesign slash command and update MCP/CLAUDE configs Co-Authored-By: Claude Sonnet 4.6 --- .claude/commands/saas-redesign.md | 176 ++++++++ .mcp.json | 13 +- CLAUDE.md | 4 + client/package.json | 4 + client/src/App.vue | 582 ++++++++++++++++---------- client/src/api.js | 10 + client/src/components/FilterBar.vue | 11 +- client/src/components/ProfileMenu.vue | 14 +- client/src/main.js | 2 + client/src/views/Orders.vue | 50 ++- client/src/views/Restocking.vue | 403 ++++++++++++++++++ server/data/demand_forecasts.json | 27 +- server/main.py | 53 +++ 13 files changed, 1096 insertions(+), 253 deletions(-) create mode 100644 .claude/commands/saas-redesign.md create mode 100644 client/src/views/Restocking.vue diff --git a/.claude/commands/saas-redesign.md b/.claude/commands/saas-redesign.md new file mode 100644 index 00000000..bcd5d8b6 --- /dev/null +++ b/.claude/commands/saas-redesign.md @@ -0,0 +1,176 @@ +--- +description: Redesign a Vue 3 app into a modern SaaS UI with a vertical sidebar, consistent spacing, and a polished professional look +--- + +Redesign this Vue 3 application's UI into a modern SaaS-style interface. The goal is a professional, clean look inspired by tools like Linear, Vercel, and Notion — dark sidebar, light content area, consistent spacing system. + +## Phase 1 — Explore the current structure + +Before touching any file, read and understand: + +1. `client/src/App.vue` — current root layout, nav, global styles +2. `client/src/main.js` — router setup and existing routes +3. All files in `client/src/views/` — understand what each page contains +4. All files in `client/src/components/` — identify reusable components +5. Note the current color palette and design tokens in use + +Use the Explore subagent for this phase. + +## Phase 2 — Redesign the shell (App.vue) + +Replace the top navigation bar with a **vertical sidebar layout**. Delegate to the `vue-expert` subagent. + +### Target layout structure: + +``` +┌─────────────────────────────────────────────┐ +│ Sidebar (240px fixed) │ Main content area │ +│ ───────────────────── │ ───────────────── │ +│ Logo / App name │ │ +│ │ │ +│ Nav items (vertical): │ Page header │ +│ • Overview │ Filter bar (if any)│ +│ • Inventory │ Content │ +│ • Orders │ │ +│ • Finance │ │ +│ • Demand Forecast │ │ +│ • Reports │ │ +│ • Restocking │ │ +│ │ │ +│ ───────────────────── │ │ +│ User profile (bottom) │ │ +└─────────────────────────────────────────────┘ +``` + +### Sidebar design specs: +- Width: 240px, fixed, full viewport height +- Background: #0f172a (near-black slate) +- Logo area: 56px tall, app name in white, 600 weight +- Nav items: 36px tall, 12px horizontal padding, 8px vertical padding +- Active item: #1e293b background, white text, left border accent (#3b82f6, 3px) +- Inactive item: #94a3b8 text, hover → #e2e8f0 text + #1e293b background +- Bottom section: user avatar + name + settings icon, separated by a top border +- No icons required — text-only nav is fine + +### Main content area: +- Background: #f8fafc +- Left margin: 240px (sidebar width) +- Padding: 32px +- Max content width: 1200px + +### Global spacing system (apply via CSS variables in App.vue): +```css +--space-1: 4px; +--space-2: 8px; +--space-3: 12px; +--space-4: 16px; +--space-6: 24px; +--space-8: 32px; +--space-12: 48px; + +--radius-sm: 6px; +--radius-md: 8px; +--radius-lg: 12px; + +--shadow-sm: 0 1px 2px rgba(0,0,0,0.05); +--shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -1px rgba(0,0,0,0.04); + +--color-bg: #f8fafc; +--color-surface: #ffffff; +--color-border: #e2e8f0; +--color-text: #0f172a; +--color-muted: #64748b; +--color-accent: #3b82f6; +``` + +## Phase 3 — Polish the content views + +Delegate to `vue-expert`. Apply consistent patterns across all views: + +### Card style: +```css +.card { + background: var(--color-surface); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + padding: var(--space-6); + box-shadow: var(--shadow-sm); +} +``` + +### Page header pattern (apply to every view): +```html +
+

Page Name

+

Short description of this page

+
+``` +```css +.page-header { margin-bottom: var(--space-8); } +.page-title { font-size: 1.5rem; font-weight: 600; color: var(--color-text); } +.page-subtitle { font-size: 0.875rem; color: var(--color-muted); margin-top: var(--space-1); } +``` + +### Table style: +```css +table { width: 100%; border-collapse: collapse; } +th { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; + letter-spacing: 0.05em; color: var(--color-muted); padding: var(--space-3) var(--space-4); + border-bottom: 1px solid var(--color-border); text-align: left; } +td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); + font-size: 0.875rem; color: var(--color-text); } +tr:last-child td { border-bottom: none; } +tr:hover td { background: #f8fafc; } +``` + +### Badge style: +```css +.badge { display: inline-flex; align-items: center; padding: 2px 10px; + border-radius: 99px; font-size: 0.7rem; font-weight: 600; } +.badge-green { background: #dcfce7; color: #166534; } +.badge-blue { background: #dbeafe; color: #1e40af; } +.badge-yellow { background: #fef9c3; color: #854d0e; } +.badge-red { background: #fee2e2; color: #991b1b; } +``` + +### Stat/KPI card pattern: +```html +
+
Total Inventory Value
+
$1,234,567
+
+12.5% vs last month
+
+``` +```css +.stat-card { background: var(--color-surface); border: 1px solid var(--color-border); + border-radius: var(--radius-lg); padding: var(--space-6); } +.stat-label { font-size: 0.8rem; color: var(--color-muted); font-weight: 500; margin-bottom: var(--space-2); } +.stat-value { font-size: 1.75rem; font-weight: 700; color: var(--color-text); } +.stat-change { font-size: 0.75rem; margin-top: var(--space-1); } +.stat-change.positive { color: #16a34a; } +.stat-change.negative { color: #dc2626; } +``` + +## Phase 4 — Verify + +1. Start the dev server if not running: `cd client && npm run dev` +2. Use Playwright MCP tools to open http://localhost:3000 and take screenshots of: + - The Dashboard + - The Inventory page + - The Orders page +3. Check that: + - Sidebar is visible and nav links work + - Content area has correct spacing and background + - Tables and cards look polished + - No layout breakage or overlapping elements + +## Rules + +- MANDATORY: Use `vue-expert` subagent for ALL .vue file edits +- Do NOT use emojis in the UI +- Do NOT use icon libraries unless already present in package.json +- Do NOT change any API calls or backend logic +- Preserve all existing functionality — this is a pure UI redesign +- Use `scoped` styles in each component +- Apply CSS variables from App.vue globally via `:root` or unscoped styles in App.vue +- Keep changes minimal and targeted — no unnecessary refactoring diff --git a/.mcp.json b/.mcp.json index 91163715..a308ca17 100644 --- a/.mcp.json +++ b/.mcp.json @@ -1,17 +1,8 @@ { "mcpServers": { - "playwright": { - "type": "stdio", - "command": "npx", - "args": [ - "-y", - "@playwright/mcp@0.0.37" - ], - "env": {} - }, "github": { "type": "stdio", - "command": "npx", + "command": "/opt/homebrew/bin/npx", "args": [ "-y", "@modelcontextprotocol/server-github" @@ -21,4 +12,4 @@ } } } -} +} \ No newline at end of file diff --git a/CLAUDE.md b/CLAUDE.md index 89c307d1..557c4500 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -4,6 +4,10 @@ Factory Inventory Management System Demo with GitHub integration - Full-stack ap > ⚠️ **This repository and any fork you create are PUBLIC.** Do not commit credentials, internal hostnames, or private registry URLs. `client/.npmrc` pins the public npm registry and `client/package-lock.json` is gitignored to prevent locally-configured registries from leaking into commits — leave both in place. +## Code Style + +- Always document non-obvious logic changes with comments + ## Critical Tool Usage Rules ### Subagents diff --git a/client/package.json b/client/package.json index 58375dc8..b0bd5dd0 100644 --- a/client/package.json +++ b/client/package.json @@ -15,5 +15,9 @@ "devDependencies": { "@vitejs/plugin-vue": "^5.0.4", "vite": "^5.2.0" + }, + "allowScripts": { + "esbuild@0.21.5": true, + "fsevents@2.3.3": true } } diff --git a/client/src/App.vue b/client/src/App.vue index c2da05a5..3614daeb 100644 --- a/client/src/App.vue +++ b/client/src/App.vue @@ -1,42 +1,65 @@