diff --git a/.claude/agents/debugger.md b/.claude/agents/debugger.md
new file mode 100644
index 000000000..1631fd4e8
--- /dev/null
+++ b/.claude/agents/debugger.md
@@ -0,0 +1,67 @@
+---
+name: debugger
+description: Investigates runtime errors and stack traces, locates the root cause in the codebase, and proposes fixes without applying them
+tools: Read, Grep, Glob, Bash
+model: sonnet
+color: red
+---
+
+# Debugger Agent
+
+You investigate runtime errors — a stack trace, an exception message, a browser console error, a failed request — and trace them back to a root cause in this codebase. You **diagnose and propose fixes; you do not apply them** (you have no Write/Edit access). Hand the fix back as a precise, reviewable recommendation.
+
+## Input You'll Typically Receive
+
+- A stack trace or exception message (Python/FastAPI or JS/Vue)
+- A description of broken behavior ("the demand page shows NaN", "500 on POST /api/orders")
+- Browser console errors or network request/response details
+- Sometimes just "X is broken, figure out why"
+
+## Investigation Process
+
+1. **Parse the error** — identify the exact exception type, message, and the innermost frame that belongs to this codebase (skip framework/node_modules frames unless the app's usage of the framework is the actual bug).
+2. **Locate the failing code** — use Grep/Glob to find the file:line named in the trace, or search by function/symbol name if the trace is vague (e.g., a Vue template error with no file reference).
+3. **Read outward from the failure point** — read the full function, then its callers, then relevant data shapes (Pydantic models, API response shapes, component props) until you can state *why* the failure happens, not just *where*.
+4. **Reproduce if possible** — use Bash to run the failing path: `curl` an endpoint, run a specific pytest test, check server logs, grep for the same error pattern elsewhere (it may be duplicated). Don't guess when you can confirm.
+5. **Check for duplicates** — Grep for the same pattern elsewhere in the codebase; a bug in a hand-rolled pattern (e.g., an unvalidated date parse) is often repeated in multiple files.
+
+## Stack Trace Reading Cheatsheet
+
+**Python/FastAPI**: read bottom-to-top. The last frame in *your* code (not `site-packages`/`uv` internals) before the exception is usually the real site. Common culprits in this codebase: Pydantic validation mismatches against `server/data/*.json`, missing `None` checks on optional query params, KeyError from mismatched field names between mock data and models.
+
+**JS/Vue (browser console)**: read top-to-bottom for the immediate throw site; Vue often wraps it with a "at <ComponentName>" trailer telling you which `.vue` file to open. Common culprits per this project's known patterns (see CLAUDE.md):
+- `TypeError` from calling `.getMonth()`/date methods on an invalid `Date` (missing validation)
+- `undefined` reads from data not yet loaded (missing loading-state guard, or a computed reading a ref before `onMounted` resolves)
+- Reactivity issues (mutating a prop, reading a ref without `.value` in script but expecting reactivity, stale closure in an inline handler)
+- Vue warns about duplicate/missing `:key` in `v-for`, usually not a hard crash but worth flagging if seen
+
+## Root Cause vs Symptom
+
+Don't stop at the line that throws — that's often a symptom. Example: a `TypeError: Cannot read properties of undefined` in a computed is the symptom; the root cause might be an API response shape that changed, or a filter param that's `undefined` instead of `'all'`. State both in your report.
+
+## Output Format
+
+Keep it tight — this is a diagnosis handoff, not a review:
+
+```markdown
+## Root Cause
+[One or two sentences: what actually breaks and why]
+
+## Evidence
+- [file:line] — [what you found there]
+- [command run / output that confirms it, if reproduced]
+
+## Proposed Fix
+[file:line] — [specific change]
+```suggested code or diff-style snippet```
+
+## Other Occurrences (if any)
+[Same pattern found elsewhere — file:line list]
+```
+
+If you cannot pin down a root cause with confidence, say so explicitly and list what you ruled out and what you'd check next — don't guess and present it as certain.
+
+## Boundaries
+
+- You do not edit files. If the fix is a `.vue` change, note that it should go through the **vue-expert** subagent per this project's CLAUDE.md rule; if it's backend, note the fix for the calling agent to apply directly.
+- Don't expand scope into a general code review — stay focused on the reported failure and anything directly causing it.
diff --git a/.claude/skills/vue-component-optimizer/SKILL.md b/.claude/skills/vue-component-optimizer/SKILL.md
new file mode 100644
index 000000000..f8222ceb1
--- /dev/null
+++ b/.claude/skills/vue-component-optimizer/SKILL.md
@@ -0,0 +1,41 @@
+---
+name: vue-component-optimizer
+description: Analyzes Vue 3 component structure in client/src for performance and code-reuse issues (reactivity misuse, unmemoized computations, unstable v-for keys, duplicated markup/logic across components) and applies the fixes. Use when asked to review, optimize, audit, or refactor Vue components.
+---
+
+# Vue Component Optimizer
+
+Analyzes components under `client/src/views/` and `client/src/components/` for two categories of issues, then applies fixes.
+
+## Process
+
+1. **Discover** — read every `.vue` file in `client/src/views/` and `client/src/components/`.
+2. **Analyze** each file for the checks below, noting file:line for every finding.
+3. **Cross-reference** across files to find duplication (same markup pattern, same formatting logic, same API-calling pattern repeated in 2+ components).
+4. **Report** findings to the user first: group by category, cite file:line, state the concrete fix. Keep it short — a table or bullet list, not prose per finding.
+5. **Apply fixes**, per [CLAUDE.md](../../../CLAUDE.md)'s mandatory rule: delegate all `.vue` edits to the **vue-expert** subagent. Batch related fixes into one vue-expert call per file rather than one call per finding.
+6. **Verify** — after fixes land, run the app (`run` skill or dev servers already running) and check the affected pages still render and the browser console is clean.
+7. **Summarize** what changed, file by file, and flag anything you deliberately left alone (e.g., a structural extraction that's high-risk enough to want the user's sign-off first).
+
+## Performance Checks
+
+- **Reactivity misuse** — derived values computed inside a method, watcher, or inline in the template instead of a `computed()`. This codebase's convention (see CLAUDE.md) is: raw data in `ref()`, derived data in `computed()`.
+- **Watcher-should-be-computed** — a `watch()` whose only job is to recompute a value and assign it to another ref. Replace with `computed()`.
+- **Unstable `v-for` keys** — `:key="index"` instead of a stable identifier (`sku`, `id`, `month`, order number). Array reordering/filtering will misrender with index keys.
+- **Inline literals in templates** — object/array/function literals created directly in template expressions (`:style="{ color: x }"`, `@click="() => foo(x)"`) that get re-created every render. Hoist to a computed or method.
+- **Unmemoized expensive work** — filtering/sorting/reducing large arrays inside the `<template>` or on every render instead of behind a `computed()`.
+- **Oversized components** — a single `.vue` file mixing multiple unrelated concerns (e.g., a view that also implements a generic stat-card or table that other views duplicate). Flag as a code-reuse issue too (see below) since the fix is the same: extract.
+
+## Code-Reuse Checks
+
+- **Duplicated formatting utilities** — currency/number formatting (`toLocaleString` with the same options) repeated across multiple files instead of a shared helper (e.g., `client/src/utils/format.js`).
+- **Duplicated API-calling composition** — the same load-on-mount / loading-state / error-state pattern hand-rolled in multiple views instead of a shared composable (e.g., `useAsyncData`).
+- **Duplicated markup** — stat cards, badges, filter bars, tables with near-identical structure copy-pasted across views instead of a shared component under `client/src/components/`.
+- **Duplicated filter-handling logic** — this app has 4 shared filters (Time Period, Warehouse, Category, Order Status); flag any view that re-implements filter-to-query-param logic instead of reusing the existing filter composable/pattern.
+
+## Fix Guidelines
+
+- Prefer small, mechanical, low-risk fixes (extract a `formatCurrency` helper, fix a `v-for` key, convert a watcher to a computed) — apply these directly.
+- For larger structural extractions that touch several files (pulling a repeated stat-card block into a new shared component used by 3+ views), still apply them, but call this out explicitly in the summary so the user knows to review that diff closely and re-test the affected pages.
+- Never change existing API contracts or Pydantic models as part of this — this skill is frontend-only (`client/src/`).
+- Match existing code style: Composition API, no comments unless explaining non-obvious WHY (see CLAUDE.md Code Style).
diff --git a/ARCHITECTURE.html b/ARCHITECTURE.html
new file mode 100644
index 000000000..e19038688
--- /dev/null
+++ b/ARCHITECTURE.html
@@ -0,0 +1,552 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Factory Inventory Management - Architecture Guide</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+            color: #e2e8f0;
+            line-height: 1.6;
+            padding: 40px 20px;
+        }
+
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            background: rgba(15, 23, 42, 0.9);
+            border-radius: 12px;
+            overflow: hidden;
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+        }
+
+        header {
+            background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
+            padding: 60px 40px;
+            text-align: center;
+        }
+
+        header h1 {
+            font-size: 2.5em;
+            margin-bottom: 10px;
+            font-weight: 700;
+        }
+
+        header p {
+            font-size: 1.1em;
+            opacity: 0.95;
+        }
+
+        main {
+            padding: 60px 40px;
+        }
+
+        section {
+            margin-bottom: 60px;
+        }
+
+        h2 {
+            font-size: 1.8em;
+            margin-bottom: 30px;
+            padding-bottom: 15px;
+            border-bottom: 3px solid #3b82f6;
+            color: #60a5fa;
+        }
+
+        h3 {
+            font-size: 1.3em;
+            margin-top: 25px;
+            margin-bottom: 15px;
+            color: #93c5fd;
+        }
+
+        .diagram {
+            background: rgba(30, 41, 59, 0.5);
+            border: 2px solid #3b82f6;
+            border-radius: 8px;
+            padding: 30px;
+            margin: 30px 0;
+            overflow-x: auto;
+        }
+
+        .box {
+            display: inline-block;
+            background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
+            border: 2px solid #3b82f6;
+            border-radius: 8px;
+            padding: 20px;
+            margin: 10px;
+            min-width: 200px;
+            text-align: center;
+            font-weight: 500;
+        }
+
+        .box.frontend {
+            background: linear-gradient(135deg, #059669 0%, #047857 100%);
+            border-color: #10b981;
+        }
+
+        .box.backend {
+            background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
+            border-color: #a78bfa;
+        }
+
+        .box.data {
+            background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
+            border-color: #f87171;
+        }
+
+        .arrow {
+            display: inline-block;
+            width: 30px;
+            margin: 10px 0;
+            text-align: center;
+            font-size: 1.5em;
+            vertical-align: middle;
+        }
+
+        .tech-stack {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 20px;
+            margin: 30px 0;
+        }
+
+        .tech-item {
+            background: rgba(59, 130, 246, 0.1);
+            border: 1px solid #3b82f6;
+            border-radius: 8px;
+            padding: 20px;
+        }
+
+        .tech-item h4 {
+            color: #60a5fa;
+            margin-bottom: 10px;
+            font-size: 1.1em;
+        }
+
+        .tech-item ul {
+            list-style: none;
+            padding-left: 0;
+        }
+
+        .tech-item li {
+            padding: 5px 0;
+            color: #cbd5e1;
+            font-size: 0.95em;
+        }
+
+        .tech-item li:before {
+            content: "▸ ";
+            color: #3b82f6;
+            font-weight: bold;
+            margin-right: 8px;
+        }
+
+        .data-flow {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 15px;
+            margin: 30px 0;
+        }
+
+        .flow-step {
+            background: rgba(51, 65, 85, 0.5);
+            border-left: 4px solid #3b82f6;
+            padding: 20px;
+            border-radius: 4px;
+        }
+
+        .flow-step strong {
+            color: #93c5fd;
+            display: block;
+            margin-bottom: 8px;
+        }
+
+        .endpoints {
+            background: rgba(30, 41, 59, 0.5);
+            border: 1px solid #3b82f6;
+            border-radius: 8px;
+            padding: 20px;
+            margin: 20px 0;
+        }
+
+        .endpoint {
+            padding: 15px;
+            margin: 10px 0;
+            background: rgba(59, 130, 246, 0.1);
+            border-left: 3px solid #10b981;
+            border-radius: 4px;
+            font-family: 'Courier New', monospace;
+            font-size: 0.95em;
+        }
+
+        .endpoint .method {
+            color: #10b981;
+            font-weight: bold;
+            margin-right: 10px;
+        }
+
+        .port {
+            display: inline-block;
+            background: #3b82f6;
+            color: white;
+            padding: 3px 8px;
+            border-radius: 3px;
+            font-size: 0.85em;
+            margin-left: 10px;
+            font-family: monospace;
+        }
+
+        .feature-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+            gap: 20px;
+            margin: 30px 0;
+        }
+
+        .feature-card {
+            background: rgba(30, 41, 59, 0.5);
+            border: 1px solid #3b82f6;
+            border-radius: 8px;
+            padding: 20px;
+        }
+
+        .feature-card h4 {
+            color: #60a5fa;
+            margin-bottom: 10px;
+        }
+
+        .feature-card p {
+            color: #cbd5e1;
+            font-size: 0.95em;
+            line-height: 1.5;
+        }
+
+        footer {
+            background: rgba(15, 23, 42, 0.8);
+            padding: 30px 40px;
+            text-align: center;
+            color: #64748b;
+            font-size: 0.9em;
+            border-top: 1px solid #3b82f6;
+        }
+
+        .highlight {
+            background: rgba(59, 130, 246, 0.2);
+            padding: 2px 6px;
+            border-radius: 3px;
+            color: #60a5fa;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>🏭 Factory Inventory Management System</h1>
+            <p>System Architecture & Technical Overview</p>
+        </header>
+
+        <main>
+            <!-- System Architecture Section -->
+            <section>
+                <h2>System Architecture</h2>
+                <p>This application is built with a classic <span class="highlight">frontend-backend separation</span> design. Here's how it works:</p>
+
+                <div class="diagram">
+                    <div style="text-align: center;">
+                        <div class="box frontend">
+                            <strong>Vue 3 Frontend</strong><br>
+                            Dashboard & UI<br>
+                            <small>Port 3000</small>
+                        </div>
+                        <div class="arrow">↔</div>
+                        <div class="box backend">
+                            <strong>FastAPI Backend</strong><br>
+                            Data & API<br>
+                            <small>Port 8001</small>
+                        </div>
+                        <div class="arrow">↔</div>
+                        <div class="box data">
+                            <strong>Mock Data</strong><br>
+                            JSON Files<br>
+                            <small>In Memory</small>
+                        </div>
+                    </div>
+                </div>
+
+                <h3>What Each Part Does</h3>
+
+                <div class="feature-grid">
+                    <div class="feature-card">
+                        <h4>🖥️ Frontend (Vue 3)</h4>
+                        <p>The visual dashboard you see in the browser. Shows charts, tables, and metrics. Sends requests to the backend when you click buttons or change filters.</p>
+                    </div>
+
+                    <div class="feature-card">
+                        <h4>⚙️ Backend (FastAPI)</h4>
+                        <p>The invisible server that stores data and answers questions. When the frontend asks for inventory data, the backend retrieves it and sends it back as JSON.</p>
+                    </div>
+
+                    <div class="feature-card">
+                        <h4>📊 Data (JSON)</h4>
+                        <p>Simulated factory data stored in files. Includes inventory, orders, demand forecasts, and spending information. Loaded into memory when the server starts.</p>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Tech Stack Section -->
+            <section>
+                <h2>Tech Stack</h2>
+                <p>The technologies and frameworks used to build this application:</p>
+
+                <div class="tech-stack">
+                    <div class="tech-item">
+                        <h4>Frontend</h4>
+                        <ul>
+                            <li><strong>Vue 3</strong> - Interactive UI framework</li>
+                            <li><strong>Vite</strong> - Development server & build tool</li>
+                            <li><strong>Axios</strong> - HTTP client for API calls</li>
+                            <li><strong>JavaScript ES6+</strong> - Programming language</li>
+                        </ul>
+                    </div>
+
+                    <div class="tech-item">
+                        <h4>Backend</h4>
+                        <ul>
+                            <li><strong>FastAPI</strong> - Python web framework</li>
+                            <li><strong>Python 3.9+</strong> - Programming language</li>
+                            <li><strong>Pydantic</strong> - Data validation</li>
+                            <li><strong>CORS</strong> - Cross-domain requests</li>
+                        </ul>
+                    </div>
+
+                    <div class="tech-item">
+                        <h4>Data & Infrastructure</h4>
+                        <ul>
+                            <li><strong>JSON Files</strong> - Data storage</li>
+                            <li><strong>In-Memory Loading</strong> - Fast access</li>
+                            <li><strong>Mock Data</strong> - No database needed</li>
+                            <li><strong>Port 3000 & 8001</strong> - Local development</li>
+                        </ul>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Data Flow Section -->
+            <section>
+                <h2>How Data Flows Through the System</h2>
+                <p>Here's what happens when you use the dashboard:</p>
+
+                <div class="data-flow">
+                    <div class="flow-step">
+                        <strong>1. User Action</strong>
+                        You click a button or change a filter on the dashboard
+                    </div>
+
+                    <div class="flow-step">
+                        <strong>2. Frontend Sends Request</strong>
+                        Vue.js sends an HTTP request to the backend API with your filters
+                    </div>
+
+                    <div class="flow-step">
+                        <strong>3. Backend Processes</strong>
+                        FastAPI receives the request, filters the data according to your criteria
+                    </div>
+
+                    <div class="flow-step">
+                        <strong>4. Query Mock Data</strong>
+                        Backend searches through the JSON data loaded in memory
+                    </div>
+
+                    <div class="flow-step">
+                        <strong>5. Validate & Return</strong>
+                        Backend validates the results using Pydantic models, then sends JSON back
+                    </div>
+
+                    <div class="flow-step">
+                        <strong>6. Display Results</strong>
+                        Frontend receives the data and updates the dashboard to show new results
+                    </div>
+                </div>
+
+                <h3>Example: Filtering Orders by Month</h3>
+                <div class="diagram">
+                    <div style="font-size: 0.95em; line-height: 1.8;">
+                        <strong>You select: "February 2025"</strong><br><br>
+                        ↓<br><br>
+                        Frontend sends:<br>
+                        <code>GET http://localhost:8001/api/orders?month=2025-02</code><br><br>
+                        ↓<br><br>
+                        Backend filters JSON data:<br>
+                        <code>Find all orders where order_date contains "2025-02"</code><br><br>
+                        ↓<br><br>
+                        Backend returns:<br>
+                        <code>[{order_id: "123", date: "2025-02-14", ...}, ...]</code><br><br>
+                        ↓<br><br>
+                        Dashboard updates:<br>
+                        Shows February orders in tables and charts
+                    </div>
+                </div>
+            </section>
+
+            <!-- API Endpoints Section -->
+            <section>
+                <h2>Backend API Endpoints</h2>
+                <p>The frontend communicates with the backend through these API endpoints:</p>
+
+                <div class="endpoints">
+                    <div class="endpoint">
+                        <span class="method">GET</span> <code>/api/inventory</code><br>
+                        <small>Gets inventory items. Supports filters: warehouse, category</small>
+                    </div>
+
+                    <div class="endpoint">
+                        <span class="method">GET</span> <code>/api/orders</code><br>
+                        <small>Gets customer orders. Supports filters: warehouse, category, status, month</small>
+                    </div>
+
+                    <div class="endpoint">
+                        <span class="method">GET</span> <code>/api/demand</code><br>
+                        <small>Gets demand forecasts for products</small>
+                    </div>
+
+                    <div class="endpoint">
+                        <span class="method">GET</span> <code>/api/backlog</code><br>
+                        <small>Gets list of backlogged orders (unfulfilled)</small>
+                    </div>
+
+                    <div class="endpoint">
+                        <span class="method">GET</span> <code>/api/dashboard/summary</code><br>
+                        <small>Gets summary statistics. Supports all filters</small>
+                    </div>
+
+                    <div class="endpoint">
+                        <span class="method">GET</span> <code>/api/spending/*</code><br>
+                        <small>Gets spending data (summary, monthly, by category, transactions)</small>
+                    </div>
+                </div>
+
+                <p><strong>Pro Tip:</strong> Visit <span class="port">http://localhost:8001/docs</span> to see interactive API documentation!</p>
+            </section>
+
+            <!-- Dashboard Pages Section -->
+            <section>
+                <h2>Frontend Pages & Features</h2>
+                <p>The dashboard has 6 main views, each with specific functionality:</p>
+
+                <div class="feature-grid">
+                    <div class="feature-card">
+                        <h4>📊 Overview Dashboard</h4>
+                        <p>Key metrics, KPIs, order health pie chart, inventory by category, top products, and inventory shortages table.</p>
+                    </div>
+
+                    <div class="feature-card">
+                        <h4>📦 Inventory</h4>
+                        <p>Complete inventory items list with SKU, quantity, location, and category. Searchable and filterable.</p>
+                    </div>
+
+                    <div class="feature-card">
+                        <h4>📋 Orders</h4>
+                        <p>Customer orders with status tracking. Shows delivered, shipped, processing, and backordered orders.</p>
+                    </div>
+
+                    <div class="feature-card">
+                        <h4>💰 Finance & Spending</h4>
+                        <p>Revenue analysis, spending by category, monthly spending trends, and transaction details.</p>
+                    </div>
+
+                    <div class="feature-card">
+                        <h4>📈 Demand Forecast</h4>
+                        <p>Predicted demand for products showing trends and forecasts over time.</p>
+                    </div>
+
+                    <div class="feature-card">
+                        <h4>📑 Reports</h4>
+                        <p>Backlog report showing unfulfilled orders that need immediate attention.</p>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Filter System Section -->
+            <section>
+                <h2>Filter System</h2>
+                <p>The application has a consistent filtering system across pages:</p>
+
+                <div class="feature-grid">
+                    <div class="feature-card">
+                        <h4>📅 Time Period</h4>
+                        <p><strong>Options:</strong> All Months, or individual months (January - December 2025)</p>
+                    </div>
+
+                    <div class="feature-card">
+                        <h4>🏢 Location / Warehouse</h4>
+                        <p><strong>Options:</strong> All, San Francisco, London, Tokyo</p>
+                    </div>
+
+                    <div class="feature-card">
+                        <h4>📂 Category</h4>
+                        <p><strong>Options:</strong> Circuit Boards, Sensors, Actuators, Controllers, Power Supplies</p>
+                    </div>
+
+                    <div class="feature-card">
+                        <h4>✓ Order Status</h4>
+                        <p><strong>Options:</strong> Delivered, Shipped, Processing, Backordered</p>
+                    </div>
+                </div>
+
+                <p>When you change any filter, the frontend immediately requests new data from the backend and updates all visible charts and tables.</p>
+            </section>
+
+            <!-- Key Facts Section -->
+            <section>
+                <h2>Key Facts About This System</h2>
+
+                <div class="feature-grid">
+                    <div class="feature-card">
+                        <h4>✅ No Database</h4>
+                        <p>Data is stored in JSON files and loaded into memory. Perfect for demos and learning!</p>
+                    </div>
+
+                    <div class="feature-card">
+                        <h4>⚡ Fast Development</h4>
+                        <p>Hot reloading on both frontend and backend means changes show up instantly.</p>
+                    </div>
+
+                    <div class="feature-card">
+                        <h4>🔓 No Authentication</h4>
+                        <p>This is a demo app. In production, you'd add login and permission checks.</p>
+                    </div>
+
+                    <div class="feature-card">
+                        <h4>📱 Responsive Design</h4>
+                        <p>Dashboard works on desktop, tablet, and mobile devices.</p>
+                    </div>
+
+                    <div class="feature-card">
+                        <h4>🎨 Consistent UI</h4>
+                        <p>Clean, modern design using slate gray colors and status-based highlighting.</p>
+                    </div>
+
+                    <div class="feature-card">
+                        <h4>📖 Well Documented</h4>
+                        <p>CLAUDE.md files guide developers on best practices for both frontend and backend.</p>
+                    </div>
+                </div>
+            </section>
+        </main>
+
+        <footer>
+            <p>Factory Inventory Management System | Architecture Overview | Built for the Anthropic Partner Basecamp Workshop</p>
+        </footer>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/CLAUDE.md b/CLAUDE.md
index 89c307d15..744ee390d 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -13,11 +13,13 @@ Use the Task tool with these specialized subagents for appropriate tasks:
   - Examples: Creating components, fixing reactivity issues, performance optimization, complex state management
   - **MANDATORY RULE: ANY time you need to create or significantly modify a .vue file, you MUST delegate to vue-expert**
 - **code-reviewer**: Use after writing significant code to review quality and best practices
+- **debugger**: Use to investigate runtime errors, exceptions, and stack traces (backend or frontend); diagnoses root cause and proposes a fix but does not apply it
 - **Explore**: Use for understanding codebase structure, searching for patterns, or answering questions about how components work
 - **general-purpose**: Use for complex multi-step tasks or when other agents don't fit
 
 ### Skills
 - **backend-api-test** skill: Use when writing or modifying tests in `tests/backend` directory with pytest and FastAPI TestClient
+- **vue-component-optimizer** skill: Use when asked to review, optimize, audit, or refactor Vue components — analyzes `client/src` for performance and code-reuse issues and applies fixes via vue-expert
 
 ### MCP Tools
 - **ALWAYS use GitHub MCP tools** (`mcp__github__*`) for ALL GitHub operations
@@ -69,6 +71,10 @@ npm install && npm run dev
 - Data: `server/data/*.json`
 - Styles: `client/src/App.vue`
 
+## Code Style
+- Always document non-obvious logic changes with comments
+- Keep comments focused on WHY, not WHAT (the code shows what it does)
+
 ## Design System
 - Colors: Slate/gray (#0f172a, #64748b, #e2e8f0)
 - Status: green/blue/yellow/red
diff --git a/WORKSHOP_GUIDE.md b/WORKSHOP_GUIDE.md
new file mode 100644
index 000000000..e08c1fcca
--- /dev/null
+++ b/WORKSHOP_GUIDE.md
@@ -0,0 +1,260 @@
+# Claude Code Workshop: Building the Factory Inventory Management System
+
+## For Readers Who Weren't There
+
+This document was written during a two-day **Anthropic Partner Basecamp** workshop (a hands-on training session for enterprise partners, ending in a team hackathon). If you weren't in the room, here's the context you need:
+
+**What is Claude Code?** Anthropic's AI coding assistant. It runs as a desktop app, a terminal CLI, or in your IDE, and can read your codebase, write and edit code, run commands, browse the web, and more — all while following project-specific conventions you give it.
+
+**Quick glossary** (terms used throughout this doc):
+
+| Term | What it means |
+|---|---|
+| **Slash command** | A command typed directly into Claude's chat, like `/context` or `/compact` — not a terminal/bash command. |
+| **MCP (Model Context Protocol)** | A connector standard that gives Claude access to external tools — e.g., the Playwright MCP gives Claude real browser control. |
+| **Subagent** | A focused, specialized version of Claude scoped to a task (e.g., a Vue specialist, a security auditor) with its own instructions and tool access. Defined in `.claude/agents/`. |
+| **Skill** | A reusable, packaged set of instructions Claude follows for a recurring task (e.g., "how to write backend tests," "how to optimize Vue components"). Defined in `.claude/skills/`. |
+| **CLAUDE.md** | A file in the repo that tells Claude the project's conventions, rules, and patterns to follow — read automatically at the start of every session in that repo. |
+| **Plan Mode** | A mode where Claude designs an approach and gets it approved *before* writing any code, useful for non-trivial features. |
+
+---
+
+## What We're Building
+
+A **Factory Inventory Management System** — a web application that helps factories track:
+- Inventory levels across warehouses
+- Customer orders and their status
+- Demand forecasts
+- Revenue and spending
+- Backlog (orders waiting to be fulfilled)
+
+The app has two parts:
+1. **Frontend** (what you see) — A dashboard in your browser showing charts, tables, and metrics (Vue 3)
+2. **Backend** (the invisible part) — A server that stores data and sends it to the frontend when requested (Python/FastAPI)
+
+---
+
+## Steps Completed
+
+### ✅ Step 1: Fork & Clone Repository (10 pts)
+**What we did:**
+- Forked the original inventory app from Anthropic's GitHub to a personal GitHub account
+- Cloned it locally to `/Users/moukie/Claude/inventory-management`
+- Created a working branch called `new_features` to make changes safely
+
+**Why:** A personal copy that can be modified without affecting anyone else's work.
+
+---
+
+### ✅ Step 2: Launch Claude Code (10 pts)
+**What we did:**
+- Opened Claude Code and selected a model
+
+**Why:** Claude Code is the tool used to write, understand, and modify code throughout the workshop.
+
+---
+
+### ✅ Step 3: Run Inventory Management Locally (15 pts)
+**What we did:**
+1. Installed Node.js
+2. Installed frontend dependencies (`npm install` in `client/`)
+3. Installed backend dependencies (`uv sync` in `server/`)
+4. Started the backend (FastAPI, port 8001)
+5. Started the frontend (Vue 3 + Vite, port 3000)
+6. Opened `http://localhost:3000` to see the working dashboard
+
+**Why:** A fully running app on your machine that you can modify and test.
+
+---
+
+### ✅ Step 4: Edit CLAUDE.md File (5 pts)
+**What we did:**
+- Added a "Code Style" rule to CLAUDE.md: *"Always document non-obvious logic changes with comments"*
+
+**Why:** CLAUDE.md is how Claude learns project conventions — every session in this repo reads it automatically.
+
+---
+
+### ✅ Step 5: Understand the Codebase (20 pts)
+**What we did:**
+- Explored the codebase and read key files (backend `main.py`, frontend `api.js`, view components)
+- Generated `ARCHITECTURE.html` — a visual page explaining the Vue ↔ FastAPI ↔ mock-data flow, tech stack, API endpoints, and dashboard structure
+- Opened it in the browser
+
+**Why:** Understanding the architecture *before* building keeps new code consistent with existing patterns.
+
+---
+
+### ✅ Step 6: Build Budget-Based Restocking Feature (25 pts)
+**What we built:** A budget-constrained restocking tool — set a budget, get AI-recommended items based on demand forecasts, adjust quantities, submit the order.
+
+Used **Plan Mode** for this one: Claude proposed a design, asked clarifying questions (budget range, recommendation algorithm, whether quantities are adjustable, how orders integrate with the existing Orders system), and only started coding once the plan was approved.
+
+**Backend:**
+- `GET /api/restocking/recommendations?budget=X` — prioritizes items by demand gap (forecasted − current demand), fills the budget greedily
+- `POST /api/restocking/orders` — creates orders with "Submitted" status and a 7-day delivery lead time
+- Budget validation (rejects orders exceeding budget)
+
+**Frontend:**
+- New `Restocking.vue` view: budget slider, live stats (budget/items/cost/remaining), adjustable recommended-items table, Place Order button
+- New nav tab, route, and English/Japanese translations
+
+**A bug we caught in review:** the quantity field initially showed `0` for every recommendation — turned out the component was reading `item.recommended_quantity` but the backend actually returned `item.recommended_qty`. One-line fix once traced.
+
+---
+
+### ✅ Step 7: Context Management (10 pts)
+**What we did:**
+- Ran `/context` to see a breakdown of token usage (system prompt, tools, messages, free space)
+- Ran `/compact` to summarize the conversation and free up space, keeping key details
+- Used `/compact keep the details of the restocking feature` to steer *what* gets preserved during summarization
+
+**Why:** Long sessions fill up the context window. `/compact` lets Claude keep working without losing track of what matters, and you can tell it what to prioritize.
+
+---
+
+### ✅ Step 8: Add Playwright MCP (15 pts)
+**What we did:** Installed the Playwright MCP so Claude can control a real browser (navigate pages, click, screenshot, read console/network activity).
+
+**What we ran into (worth knowing):** the intended command was a single line —
+```
+claude mcp add playwright npx @playwright/mcp@latest
+```
+— but the `claude` CLI wasn't on the system PATH yet. Troubleshooting took a few turns:
+1. `npm install -g @anthropic-sdk/cli` → wrong package name, 404
+2. `npm install -g claude` → `EACCES` permission error (npm trying to write to a protected system folder)
+3. `sudo npm install -g claude` → installed *a* package, but not actually the right Claude Code binary
+4. Searched the filesystem and found the real CLI bundled inside the Claude desktop app itself, at a versioned path under `~/Library/Application Support/Claude/`
+5. Created a symlink (`/usr/local/bin/claude → the bundled binary`) so `claude` resolves from any terminal
+6. Ran the MCP install command successfully, then **restarted Claude Code** so it picked up the new MCP config
+
+**Why it matters:** MCP servers extend what Claude can *do* — this one turned "describe what the app should do" into "actually click through it and check."
+
+---
+
+### ✅ Step 9: Test the App with Playwright MCP
+**What we did:**
+1. Started the dev servers, opened `http://localhost:3000`
+2. Screenshotted the dashboard
+3. Clicked through all 7 nav tabs (Overview, Inventory, Orders, Finance, Demand Forecast, Restocking, Reports) and confirmed each rendered correctly
+
+**The catch:** the first pass only tested navigation. When asked *"did you test everything? some filters aren't working"*, we went back and actually exercised the 4 shared filters (Time Period, Location, Category, Order Status) — setting each one and confirming the dashboard numbers actually changed. All four worked correctly; the lesson was that "the page loads" and "the feature works" are different claims, and only one of them was actually tested the first time.
+
+**Why:** Automated browser testing catches real integration bugs (wrong data, broken filters, console errors) that a code read-through won't.
+
+---
+
+### ✅ Step 10: Connect Claude Code to GitHub (15 pts) — *blocked*
+**What we did:**
+- Learned that `/install-github-app` is a **slash command run inside an interactive Claude Code session** — not a bash command, and not available in every chat surface (it failed in a non-interactive continuation session before working in a real terminal `claude` session)
+- Ran it and authorized the GitHub App on the fork
+
+**Where it stopped:** the flow requires access to **Claude organization settings**, which are only available on Team/Enterprise plans — not a personal Pro plan. The install couldn't complete, and no workflow PR was ever generated as a result.
+
+**Why it matters (even unfinished):** this integration is what enables `@claude` mentions in GitHub issues/PRs and automatic Claude-authored code review on every PR — genuinely useful for a team, but it needs the right plan tier. Flagged as a follow-up for whoever manages the team's Anthropic workspace.
+
+---
+
+### ✅ Step 11: Commit & Push
+**What we did:**
+- Realized Step 6's restocking work had been sitting **uncommitted** for several steps — committed it, and from that point on committed after every real code/file change (not after every workshop step — just when something actually changed)
+- Pushed the `new_features` branch to the GitHub fork
+
+**What we ran into:** pushing from this environment initially failed (`git` had no credentials configured for a non-interactive session). Pushing from an actual terminal hit a second wall — a `403 Permission denied`, traced to a personal access token that was missing the `repo` scope. Regenerating the token with the right scope fixed it.
+
+**Note on the PR:** a pull request was attempted but never actually completed (the fork showed 0 PRs when checked afterward) — and the team decided that's fine; a PR wasn't needed to demonstrate the workflow. The important part — a clean, pushed commit history — was already in place.
+
+---
+
+## Beyond the Workshop: Building Custom Tools
+
+Two custom additions to this project's `.claude/` setup, plus a real bug found and fixed using them.
+
+### 🔧 New Skill: `vue-component-optimizer`
+Lives at `.claude/skills/vue-component-optimizer/SKILL.md`. Analyzes every `.vue` file for two categories of issues, then applies the fixes:
+
+- **Performance**: reactivity misuse (derived values that should be `computed()` but aren't), watchers doing a computed's job, unstable `v-for` keys, unmemoized expensive work, inline template literals recreated every render
+- **Code reuse**: duplicated formatting logic, duplicated API-loading patterns, duplicated markup (stat cards, tables) that should be shared components, duplicated filter-handling logic
+
+Registered in CLAUDE.md so Claude knows to reach for it automatically when asked to review or optimize Vue components.
+
+### 🐛 New Subagent: `debugger`
+Lives at `.claude/agents/debugger.md`. A **read-only** specialist (tools: Read, Grep, Glob, Bash — deliberately no Write/Edit) that investigates runtime errors:
+
+- Parses stack traces (both Python/FastAPI and JS/Vue conventions)
+- Distinguishes root cause from symptom
+- Reproduces failures via Bash where possible (`curl` an endpoint, run a specific test)
+- Checks whether the same bug pattern is duplicated elsewhere in the codebase
+- Hands off *proposed* fixes rather than applying them — frontend fixes get routed to the `vue-expert` subagent per this project's existing convention, backend fixes get applied directly
+
+**A caveat we found in practice:** custom subagents defined under `.claude/agents/` are picked up automatically by the *interactive* `claude` CLI (running `claude` in a terminal). This particular chat surface's agent-dispatch tool only exposes a fixed set of built-in agent types and doesn't dynamically load project-defined ones — so invoking `debugger` here required doing the same investigation directly instead of through the named subagent. Worth confirming which surface your team is using before assuming custom agents "just work."
+
+### Case Study: Fixing Real Dashboard Console Errors
+Put both new tools to work on an actual bug hunt — the Dashboard page had two live issues:
+
+1. **`[Vue warn]: Failed to resolve component: PurchaseOrderModal`** — repeated on every render
+2. **`404` on `GET /api/tasks`** on page load
+
+**Investigation:** Grep'd for `PurchaseOrderModal` across the frontend and found it referenced in `Dashboard.vue`'s template with a full set of props and event handlers wired up — but the component file itself never existed anywhere in the codebase, and its backend counterpart (`/api/purchase-orders`) didn't exist either, despite the backend already having Pydantic models and an (empty) mock-data file scaffolded for it. This was a feature that got partially built and abandoned. Separately, `getTasks()` in the frontend's API client called `GET /api/tasks` — a route that was simply never implemented on the backend.
+
+**Decision point:** for the PO modal, the choice was between *finishing* the abandoned feature (bigger scope — a new modal component plus new backend endpoints) or *removing* the dead code. Since the actual task was "fix the console error," not "build a purchase-order feature," the dead code was removed — template block, refs, methods, buttons, and CSS — while leaving the separate, working `BacklogDetailModal` feature untouched.
+
+**Fixes applied:**
+- Removed the orphaned `PurchaseOrderModal` usage from `Dashboard.vue` (delegated to `vue-expert`, per this repo's mandatory rule that all `.vue` edits go through it)
+- Added the missing `GET` / `POST` / `PATCH` / `DELETE /api/tasks` endpoints to `server/main.py`, matching the shape the frontend already expected
+
+**Verification:** reloaded the app in a *fresh* browser tab (to rule out stale hot-reload state) — zero console warnings, zero errors, `/api/tasks` returns `200`.
+
+---
+
+## How It All Connects
+
+The pieces built across this workshop aren't independent — they compose:
+
+- **CLAUDE.md** sets the ground rules for the whole repo (e.g., "all `.vue` edits go through `vue-expert`")
+- **Subagents** (`vue-expert`, `code-reviewer`, `security-auditor`, `debugger`) are specialists Claude delegates to when a task matches their scope — CLAUDE.md is what tells Claude *which* one to reach for
+- **Skills** (`backend-api-test`, `vue-component-optimizer`) package up a repeatable *process* rather than a persona — "when doing X, follow these steps"
+- **MCP** (Playwright) gives Claude a way to *verify* claims instead of just asserting them — "the filters work" became "I set each filter and confirmed the numbers changed"
+- **Git/GitHub workflow** is what turns local changes into something a team can actually review and build on
+
+The debugging case study above is a small example of the whole stack working together: a real error → investigated with the same rigor a `debugger` subagent would apply → a `.vue` fix routed through `vue-expert` per CLAUDE.md's rule → verified live with the Playwright-powered browser tools → committed and pushed.
+
+---
+
+## Summary
+
+**Steps completed:**
+| Step | Points |
+|---|---|
+| 1. Fork & Clone Repository | 10 |
+| 2. Launch Claude Code | 10 |
+| 3. Run Locally | 15 |
+| 4. Edit CLAUDE.md | 5 |
+| 5. Understand the Codebase | 20 |
+| 6. Budget-Based Restocking Feature | 25 |
+| 7. Context Management | 10 |
+| 8. Add Playwright MCP | 15 |
+| 9. Test with Playwright MCP | — |
+| 10. Connect to GitHub | 15 (blocked — plan tier) |
+| 11. Commit & Push | — |
+
+**Confirmed points: 125** (Steps 9 and 11 weren't shown with an explicit point value; Step 10's points reflect the step attempted, not fully completed)
+
+**Technologies & patterns used:**
+- Vue 3 Composition API (`ref`, `computed`, `watch`)
+- FastAPI with Pydantic validation
+- Budget-constrained recommendation algorithm
+- i18n (English/Japanese)
+- RESTful API design
+- Git feature-branch workflow
+- MCP (Playwright) for real browser verification
+- Custom Claude Code skills and subagents
+
+**Key takeaways for the team:**
+1. **Plan Mode earns its keep on real features** — the restocking tool's design questions (budget range, algorithm, order integration) were resolved *before* code was written, not discovered mid-implementation.
+2. **"It loads" ≠ "it works."** The filter-testing gap in Step 9 is a good reminder to verify behavior, not just rendering.
+3. **CLAUDE.md is what makes delegation consistent** — the "route all `.vue` edits through vue-expert" rule kept applying correctly across completely different tasks (the restocking feature, the skill, the bug fix).
+4. **Custom skills/subagents are cheap to build and genuinely reusable** — `vue-component-optimizer` and `debugger` now exist for anyone who works in this repo going forward.
+5. **Plan-tier and environment limits are real** — GitHub App org settings and custom-subagent dispatch both behaved differently depending on which Claude surface (personal plan vs. Team/Enterprise; chat vs. terminal CLI) was in use. Worth checking before assuming a workflow will "just work" for the whole team.
+
+**Note:** This guide reflects the actual session, including the parts that didn't go smoothly on the first try (permission errors, a missing PR, a plan-tier blocker) — kept in rather than cleaned up, since those are often the more useful parts for a team reading this afterward.
diff --git a/client/src/App.vue b/client/src/App.vue
index c2da05a5c..71d9913f7 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -22,6 +22,9 @@
           <router-link to="/demand" :class="{ active: $route.path === '/demand' }">
             {{ t('nav.demandForecast') }}
           </router-link>
+          <router-link to="/restocking" :class="{ active: $route.path === '/restocking' }">
+            Restocking
+          </router-link>
           <router-link to="/reports" :class="{ active: $route.path === '/reports' }">
             Reports
           </router-link>
diff --git a/client/src/api.js b/client/src/api.js
index 11cb9db70..f0f047bd2 100644
--- a/client/src/api.js
+++ b/client/src/api.js
@@ -102,5 +102,15 @@ export const api = {
   async getPurchaseOrderByBacklogItem(backlogItemId) {
     const response = await axios.get(`${API_BASE_URL}/purchase-orders/${backlogItemId}`)
     return response.data
+  },
+
+  async getRestockingRecommendations(budget) {
+    const response = await axios.get(`${API_BASE_URL}/restocking/recommendations?budget=${budget}`)
+    return response.data
+  },
+
+  async submitRestockingOrder(orderData) {
+    const response = await axios.post(`${API_BASE_URL}/restocking/orders`, orderData)
+    return response.data
   }
 }
diff --git a/client/src/locales/en.js b/client/src/locales/en.js
index 03a58fe6e..40402ab11 100644
--- a/client/src/locales/en.js
+++ b/client/src/locales/en.js
@@ -188,6 +188,35 @@ export default {
     }
   },
 
+  // Restocking
+  restocking: {
+    title: 'Restocking',
+    description: 'Plan and optimize inventory restocking with budget constraints',
+    setBudget: 'Set Your Budget',
+    totalBudget: 'Total Budget',
+    itemsInRecommendations: 'Items in Recommendations',
+    totalEstimatedCost: 'Total Estimated Cost',
+    budgetRemaining: 'Budget Remaining',
+    exceeded: 'EXCEEDED',
+    recommendedItems: 'Recommended Items',
+    noRecommendations: 'No recommendations available. Try adjusting your budget.',
+    placeOrder: 'Place Order',
+    loadError: 'Failed to load data',
+    recommendationsError: 'Failed to load recommendations',
+    submitError: 'Failed to submit order',
+    orderSubmitted: 'Order submitted successfully!',
+    noItemsSelected: 'Please select at least one item to order',
+    table: {
+      sku: 'SKU',
+      name: 'Item Name',
+      currentStock: 'Current Stock',
+      forecastedDemand: 'Forecasted Demand',
+      unitCost: 'Unit Cost',
+      recommendedQty: 'Recommended Qty',
+      estimatedCost: 'Estimated Cost'
+    }
+  },
+
   // Filters
   filters: {
     timePeriod: 'Time Period',
diff --git a/client/src/locales/ja.js b/client/src/locales/ja.js
index db33223ac..22a92b130 100644
--- a/client/src/locales/ja.js
+++ b/client/src/locales/ja.js
@@ -188,6 +188,35 @@ export default {
     }
   },
 
+  // Restocking
+  restocking: {
+    title: '補充',
+    description: '予算制約の下で在庫補充を計画・最適化',
+    setBudget: '予算を設定',
+    totalBudget: '総予算',
+    itemsInRecommendations: '推奨品目数',
+    totalEstimatedCost: '推定総コスト',
+    budgetRemaining: '残り予算',
+    exceeded: '超過',
+    recommendedItems: '推奨品目',
+    noRecommendations: '推奨事項がありません。予算を調整してみてください。',
+    placeOrder: '注文を発注',
+    loadError: 'データの読み込みに失敗しました',
+    recommendationsError: '推奨事項の読み込みに失敗しました',
+    submitError: '注文の送信に失敗しました',
+    orderSubmitted: '注文が正常に送信されました！',
+    noItemsSelected: '注文する品目を1つ以上選択してください',
+    table: {
+      sku: 'SKU',
+      name: '品目名',
+      currentStock: '現在の在庫',
+      forecastedDemand: '予測需要',
+      unitCost: '単価',
+      recommendedQty: '推奨数量',
+      estimatedCost: '推定コスト'
+    }
+  },
+
   // Filters
   filters: {
     timePeriod: '期間',
diff --git a/client/src/main.js b/client/src/main.js
index 477c2d966..d2ca3e075 100644
--- a/client/src/main.js
+++ b/client/src/main.js
@@ -6,6 +6,7 @@ import Inventory from './views/Inventory.vue'
 import Orders from './views/Orders.vue'
 import Demand from './views/Demand.vue'
 import Spending from './views/Spending.vue'
+import Restocking from './views/Restocking.vue'
 import Reports from './views/Reports.vue'
 
 const router = createRouter({
@@ -16,6 +17,7 @@ const router = createRouter({
     { path: '/orders', component: Orders },
     { path: '/demand', component: Demand },
     { path: '/spending', component: Spending },
+    { path: '/restocking', component: Restocking },
     { path: '/reports', component: Reports }
   ]
 })
diff --git a/client/src/views/Dashboard.vue b/client/src/views/Dashboard.vue
index 437da9c23..ffed809cc 100644
--- a/client/src/views/Dashboard.vue
+++ b/client/src/views/Dashboard.vue
@@ -180,7 +180,6 @@
                   <th>{{ t('dashboard.inventoryShortages.shortage') }}</th>
                   <th>{{ t('dashboard.inventoryShortages.daysDelayed') }}</th>
                   <th>{{ t('dashboard.inventoryShortages.priority') }}</th>
-                  <th>Actions</th>
                 </tr>
               </thead>
               <tbody>
@@ -208,22 +207,6 @@
                       {{ translatePriority(item.priority) }}
                     </span>
                   </td>
-                  <td>
-                    <button
-                      v-if="!item.purchase_order_id"
-                      @click.stop="openPOModal(item)"
-                      class="po-button create"
-                    >
-                      Create PO
-                    </button>
-                    <button
-                      v-else
-                      @click.stop="viewPO(item)"
-                      class="po-button view"
-                    >
-                      View PO
-                    </button>
-                  </td>
                 </tr>
               </tbody>
             </table>
@@ -285,14 +268,6 @@
       :backlog-item="selectedBacklogItem"
       @close="showBacklogModal = false"
     />
-
-    <PurchaseOrderModal
-      :is-open="showPOModal"
-      :backlog-item="selectedBacklogForPO"
-      :mode="poModalMode"
-      @close="showPOModal = false"
-      @po-created="handlePOCreated"
-    />
   </div>
 </template>
 
@@ -324,9 +299,6 @@ export default {
     const selectedProduct = ref(null)
     const showBacklogModal = ref(false)
     const selectedBacklogItem = ref(null)
-    const showPOModal = ref(false)
-    const selectedBacklogForPO = ref(null)
-    const poModalMode = ref('create')
 
     // Use shared filters
     const {
@@ -650,28 +622,6 @@ export default {
       showBacklogModal.value = true
     }
 
-    const openPOModal = (item) => {
-      selectedBacklogForPO.value = item
-      poModalMode.value = 'create'
-      showPOModal.value = true
-    }
-
-    const viewPO = (item) => {
-      selectedBacklogForPO.value = item
-      poModalMode.value = 'view'
-      showPOModal.value = true
-    }
-
-    const handlePOCreated = (poData) => {
-      // Update the backlog item with the new PO ID
-      const item = allBacklogItems.value.find(b => b.id === poData.backlog_item_id)
-      if (item) {
-        item.purchase_order_id = poData.id
-        item.purchase_order = poData
-      }
-      showPOModal.value = false
-    }
-
     // Watch for filter changes and reload data
     watch([selectedPeriod, selectedLocation, selectedCategory, selectedStatus], () => {
       loadData()
@@ -715,12 +665,6 @@ export default {
       Math,
       translateProductName,
       translateWarehouse,
-      showPOModal,
-      selectedBacklogForPO,
-      poModalMode,
-      openPOModal,
-      viewPO,
-      handlePOCreated
     }
   }
 }
@@ -1236,36 +1180,4 @@ export default {
   transform: scale(1.1);
 }
 
-.po-button {
-  padding: 0.5rem 1rem;
-  border: none;
-  border-radius: 6px;
-  font-size: 0.813rem;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  white-space: nowrap;
-}
-
-.po-button.create {
-  background: #3b82f6;
-  color: white;
-}
-
-.po-button.create:hover {
-  background: #2563eb;
-  transform: translateY(-1px);
-  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
-}
-
-.po-button.view {
-  background: #64748b;
-  color: white;
-}
-
-.po-button.view:hover {
-  background: #475569;
-  transform: translateY(-1px);
-  box-shadow: 0 2px 4px rgba(100, 116, 139, 0.3);
-}
 </style>
diff --git a/client/src/views/Restocking.vue b/client/src/views/Restocking.vue
new file mode 100644
index 000000000..7f77ba6f9
--- /dev/null
+++ b/client/src/views/Restocking.vue
@@ -0,0 +1,675 @@
+<template>
+  <div class="restocking">
+    <div class="page-header">
+      <h2>{{ t('restocking.title') }}</h2>
+      <p>{{ t('restocking.description') }}</p>
+    </div>
+
+    <div v-if="loading" class="loading">{{ t('common.loading') }}</div>
+    <div v-else-if="error" class="error">{{ error }}</div>
+    <div v-else>
+      <!-- Budget Slider Section -->
+      <div class="card budget-card">
+        <div class="card-header">
+          <h3 class="card-title">{{ t('restocking.setBudget') }}</h3>
+          <div class="budget-display">
+            {{ currencySymbol }}{{ selectedBudget.toLocaleString() }}
+          </div>
+        </div>
+        <div class="budget-slider-container">
+          <div class="slider-labels">
+            <span>{{ currencySymbol }}0</span>
+            <span>{{ currencySymbol }}{{ maxBudget.toLocaleString() }}</span>
+          </div>
+          <input
+            v-model.number="selectedBudget"
+            type="range"
+            min="0"
+            :max="maxBudget"
+            step="100"
+            class="budget-slider"
+          />
+        </div>
+      </div>
+
+      <!-- Stats Cards Section -->
+      <div class="stats-grid">
+        <div class="stat-card">
+          <div class="stat-label">{{ t('restocking.totalBudget') }}</div>
+          <div class="stat-value">{{ currencySymbol }}{{ selectedBudget.toLocaleString() }}</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-label">{{ t('restocking.itemsInRecommendations') }}</div>
+          <div class="stat-value">{{ recommendations.length }}</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-label">{{ t('restocking.totalEstimatedCost') }}</div>
+          <div class="stat-value">{{ currencySymbol }}{{ totalEstimatedCost.toLocaleString() }}</div>
+        </div>
+        <div class="stat-card" :class="{ 'budget-exceeded': budgetRemaining < 0 }">
+          <div class="stat-label">{{ t('restocking.budgetRemaining') }}</div>
+          <div class="stat-value">
+            {{ currencySymbol }}{{ Math.abs(budgetRemaining).toLocaleString() }}
+            <span v-if="budgetRemaining < 0" class="exceeded-indicator">{{ t('restocking.exceeded') }}</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Recommendations Table -->
+      <div class="card">
+        <div class="card-header">
+          <h3 class="card-title">{{ t('restocking.recommendedItems') }} ({{ recommendations.length }})</h3>
+        </div>
+        <div v-if="recommendations.length === 0" class="no-data">
+          {{ t('restocking.noRecommendations') }}
+        </div>
+        <div v-else class="table-container">
+          <table class="restocking-table">
+            <thead>
+              <tr>
+                <th class="col-sku">{{ t('restocking.table.sku') }}</th>
+                <th class="col-name">{{ t('restocking.table.name') }}</th>
+                <th class="col-stock">{{ t('restocking.table.currentStock') }}</th>
+                <th class="col-demand">{{ t('restocking.table.forecastedDemand') }}</th>
+                <th class="col-cost">{{ t('restocking.table.unitCost') }}</th>
+                <th class="col-qty">{{ t('restocking.table.recommendedQty') }}</th>
+                <th class="col-estimated">{{ t('restocking.table.estimatedCost') }}</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="item in recommendations" :key="item.sku">
+                <td class="col-sku"><strong>{{ item.sku }}</strong></td>
+                <td class="col-name">{{ item.name }}</td>
+                <td class="col-stock">{{ item.current_stock }}</td>
+                <td class="col-demand">{{ item.forecasted_demand }}</td>
+                <td class="col-cost">{{ currencySymbol }}{{ item.unit_cost.toLocaleString() }}</td>
+                <td class="col-qty">
+                  <div class="qty-input-group">
+                    <button
+                      class="qty-btn"
+                      @click="decreaseQty(item.sku)"
+                      :disabled="itemQuantities[item.sku] <= 0"
+                    >
+                      −
+                    </button>
+                    <input
+                      v-model.number="itemQuantities[item.sku]"
+                      type="number"
+                      min="0"
+                      class="qty-input"
+                      @change="validateQuantity(item.sku)"
+                    />
+                    <button
+                      class="qty-btn"
+                      @click="increaseQty(item.sku)"
+                    >
+                      +
+                    </button>
+                  </div>
+                </td>
+                <td class="col-estimated">{{ currencySymbol }}{{ getItemCost(item).toLocaleString() }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <!-- Place Order Section -->
+      <div class="action-section">
+        <button
+          class="btn btn-primary"
+          @click="submitOrder"
+          :disabled="!canPlaceOrder"
+        >
+          {{ t('restocking.placeOrder') }}
+        </button>
+        <div v-if="successMessage" class="success-message">
+          {{ successMessage }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, computed, onMounted, watch } from 'vue'
+import { api } from '../api'
+import { useI18n } from '../composables/useI18n'
+
+export default {
+  name: 'Restocking',
+  setup() {
+    const { t, currentCurrency } = useI18n()
+
+    const maxBudget = 50000
+    const selectedBudget = ref(0)
+    const loading = ref(true)
+    const error = ref(null)
+    const successMessage = ref(null)
+    const recommendations = ref([])
+    const itemQuantities = ref({})
+
+    const currencySymbol = computed(() => {
+      return currentCurrency.value === 'JPY' ? '¥' : '$'
+    })
+
+    // Calculate total estimated cost from all items
+    const totalEstimatedCost = computed(() => {
+      return recommendations.value.reduce((total, item) => {
+        const qty = itemQuantities.value[item.sku] || 0
+        return total + (qty * item.unit_cost)
+      }, 0)
+    })
+
+    // Calculate budget remaining
+    const budgetRemaining = computed(() => {
+      return selectedBudget.value - totalEstimatedCost.value
+    })
+
+    // Can place order if budget is not exceeded and we have items
+    const canPlaceOrder = computed(() => {
+      return budgetRemaining.value >= 0 && totalEstimatedCost.value > 0
+    })
+
+    // Load initial data (forecasts and inventory)
+    const loadInitialData = async () => {
+      try {
+        loading.value = true
+        error.value = null
+        const [forecasts, inventory] = await Promise.all([
+          api.getDemandForecasts(),
+          api.getInventory({})
+        ])
+        // We'll use this data when recommendations are loaded
+        // For now, just set initial budget to trigger recommendations load
+        selectedBudget.value = 0
+      } catch (err) {
+        error.value = `${t('restocking.loadError')}: ${err.message}`
+        console.error('Failed to load initial data:', err)
+      } finally {
+        loading.value = false
+      }
+    }
+
+    // Load recommendations based on budget
+    const loadRecommendations = async () => {
+      try {
+        loading.value = true
+        error.value = null
+        const data = await api.getRestockingRecommendations(selectedBudget.value)
+        recommendations.value = data
+
+        // Initialize quantities to recommended amounts
+        itemQuantities.value = {}
+        data.forEach(item => {
+          itemQuantities.value[item.sku] = item.recommended_qty || 0
+        })
+      } catch (err) {
+        error.value = `${t('restocking.recommendationsError')}: ${err.message}`
+        console.error('Failed to load recommendations:', err)
+        recommendations.value = []
+      } finally {
+        loading.value = false
+      }
+    }
+
+    // Watch budget slider changes
+    watch(selectedBudget, () => {
+      loadRecommendations()
+      successMessage.value = null
+    })
+
+    // Get cost for a specific item
+    const getItemCost = (item) => {
+      const qty = itemQuantities.value[item.sku] || 0
+      return qty * item.unit_cost
+    }
+
+    // Quantity adjustment helpers
+    const increaseQty = (sku) => {
+      if (itemQuantities.value[sku] === undefined) {
+        itemQuantities.value[sku] = 0
+      }
+      itemQuantities.value[sku]++
+    }
+
+    const decreaseQty = (sku) => {
+      if (itemQuantities.value[sku] && itemQuantities.value[sku] > 0) {
+        itemQuantities.value[sku]--
+      }
+    }
+
+    const validateQuantity = (sku) => {
+      const qty = itemQuantities.value[sku]
+      if (qty < 0 || isNaN(qty)) {
+        itemQuantities.value[sku] = 0
+      }
+    }
+
+    // Submit restocking order
+    const submitOrder = async () => {
+      try {
+        // Build order data
+        const items = recommendations.value
+          .filter(item => (itemQuantities.value[item.sku] || 0) > 0)
+          .map(item => ({
+            sku: item.sku,
+            name: item.name,
+            quantity: itemQuantities.value[item.sku],
+            unit_cost: item.unit_cost
+          }))
+
+        if (items.length === 0) {
+          error.value = t('restocking.noItemsSelected')
+          return
+        }
+
+        const orderData = {
+          items,
+          total_cost: totalEstimatedCost.value,
+          budget: selectedBudget.value
+        }
+
+        await api.submitRestockingOrder(orderData)
+
+        // Show success message
+        successMessage.value = t('restocking.orderSubmitted')
+
+        // Reset form after 2 seconds
+        setTimeout(() => {
+          selectedBudget.value = 0
+          itemQuantities.value = {}
+          recommendations.value = []
+          successMessage.value = null
+        }, 2000)
+      } catch (err) {
+        error.value = `${t('restocking.submitError')}: ${err.message}`
+        console.error('Failed to submit order:', err)
+      }
+    }
+
+    onMounted(loadInitialData)
+
+    return {
+      t,
+      loading,
+      error,
+      successMessage,
+      selectedBudget,
+      maxBudget,
+      recommendations,
+      itemQuantities,
+      totalEstimatedCost,
+      budgetRemaining,
+      canPlaceOrder,
+      currencySymbol,
+      getItemCost,
+      increaseQty,
+      decreaseQty,
+      validateQuantity,
+      submitOrder
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* Budget Card */
+.budget-card {
+  margin-bottom: 2rem;
+}
+
+.budget-display {
+  font-size: 1.75rem;
+  font-weight: 700;
+  color: #3b82f6;
+}
+
+.budget-slider-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-top: 1.5rem;
+}
+
+.slider-labels {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.875rem;
+  color: #64748b;
+  font-weight: 500;
+}
+
+.budget-slider {
+  width: 100%;
+  height: 8px;
+  border-radius: 5px;
+  background: linear-gradient(to right, #e2e8f0 0%, #cbd5e1 100%);
+  outline: none;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.budget-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: #3b82f6;
+  cursor: pointer;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  transition: box-shadow 0.2s;
+}
+
+.budget-slider::-webkit-slider-thumb:hover {
+  box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
+}
+
+.budget-slider::-moz-range-thumb {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: #3b82f6;
+  cursor: pointer;
+  border: none;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  transition: box-shadow 0.2s;
+}
+
+.budget-slider::-moz-range-thumb:hover {
+  box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
+}
+
+/* Stats Grid */
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1.5rem;
+  margin-bottom: 2rem;
+}
+
+.stat-card {
+  background: white;
+  border: 1px solid #e2e8f0;
+  border-radius: 10px;
+  padding: 1.5rem;
+  transition: all 0.2s ease;
+}
+
+.stat-card:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+}
+
+.stat-card.budget-exceeded {
+  background: #fef2f2;
+  border-color: #fecaca;
+}
+
+.stat-label {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #64748b;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 0.5rem;
+}
+
+.stat-value {
+  font-size: 1.75rem;
+  font-weight: 700;
+  color: #0f172a;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.exceeded-indicator {
+  font-size: 0.75rem;
+  color: #ef4444;
+  font-weight: 600;
+  text-transform: uppercase;
+  margin-left: 0.5rem;
+}
+
+/* Table Styling */
+.restocking-table {
+  table-layout: fixed;
+  width: 100%;
+}
+
+.col-sku {
+  width: 100px;
+}
+
+.col-name {
+  width: 180px;
+}
+
+.col-stock {
+  width: 120px;
+}
+
+.col-demand {
+  width: 140px;
+}
+
+.col-cost {
+  width: 110px;
+}
+
+.col-qty {
+  width: 140px;
+}
+
+.col-estimated {
+  width: 120px;
+}
+
+/* Quantity Input Group */
+.qty-input-group {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  border: 1px solid #e2e8f0;
+  border-radius: 6px;
+  overflow: hidden;
+  height: 36px;
+}
+
+.qty-btn {
+  background: #f8fafc;
+  border: none;
+  padding: 0 0.75rem;
+  cursor: pointer;
+  font-size: 1.25rem;
+  color: #64748b;
+  transition: all 0.2s;
+  height: 100%;
+  flex: 0 0 auto;
+}
+
+.qty-btn:hover:not(:disabled) {
+  background: #e2e8f0;
+  color: #0f172a;
+}
+
+.qty-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.qty-input {
+  flex: 1;
+  border: none;
+  outline: none;
+  text-align: center;
+  font-weight: 600;
+  color: #0f172a;
+  font-size: 0.875rem;
+  background: transparent;
+}
+
+.qty-input::-webkit-outer-spin-button,
+.qty-input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.qty-input[type=number] {
+  -moz-appearance: textfield;
+}
+
+/* No Data Message */
+.no-data {
+  padding: 2rem;
+  text-align: center;
+  color: #64748b;
+  font-size: 0.875rem;
+}
+
+/* Action Section */
+.action-section {
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+  margin-top: 2rem;
+}
+
+.btn {
+  padding: 0.75rem 1.5rem;
+  border: none;
+  border-radius: 6px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+  font-size: 0.875rem;
+}
+
+.btn-primary {
+  background: #3b82f6;
+  color: white;
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: #2563eb;
+  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
+}
+
+.btn-primary:disabled {
+  background: #cbd5e1;
+  cursor: not-allowed;
+}
+
+.success-message {
+  color: #059669;
+  font-weight: 600;
+  font-size: 0.875rem;
+  animation: slideIn 0.3s ease;
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Global styles inherited from App.vue */
+.loading,
+.error {
+  padding: 2rem;
+  border-radius: 8px;
+  font-size: 0.875rem;
+}
+
+.loading {
+  background: #dbeafe;
+  color: #1e40af;
+  text-align: center;
+}
+
+.error {
+  background: #fee2e2;
+  color: #991b1b;
+  text-align: center;
+}
+
+.card {
+  background: white;
+  border: 1px solid #e2e8f0;
+  border-radius: 10px;
+  padding: 1.5rem;
+  margin-bottom: 2rem;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.5rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid #f1f5f9;
+}
+
+.card-title {
+  margin: 0;
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: #0f172a;
+}
+
+.table-container {
+  overflow-x: auto;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.875rem;
+}
+
+thead tr {
+  border-bottom: 2px solid #e2e8f0;
+}
+
+th {
+  padding: 0.75rem;
+  text-align: left;
+  font-weight: 600;
+  color: #64748b;
+  white-space: nowrap;
+}
+
+td {
+  padding: 0.75rem;
+  border-bottom: 1px solid #f1f5f9;
+  color: #0f172a;
+}
+
+tbody tr:hover {
+  background: #f8fafc;
+}
+
+.page-header {
+  margin-bottom: 2rem;
+}
+
+.page-header h2 {
+  margin: 0;
+  font-size: 1.75rem;
+  font-weight: 700;
+  color: #0f172a;
+  margin-bottom: 0.5rem;
+}
+
+.page-header p {
+  margin: 0;
+  color: #64748b;
+  font-size: 0.875rem;
+}
+</style>
diff --git a/server/main.py b/server/main.py
index a0c2d8c5a..acc71882b 100644
--- a/server/main.py
+++ b/server/main.py
@@ -1,8 +1,9 @@
 from fastapi import FastAPI, HTTPException
 from fastapi.middleware.cors import CORSMiddleware
-from typing import List, Optional
+from typing import List, Optional, Dict
 from pydantic import BaseModel
 from mock_data import inventory_items, orders, demand_forecasts, backlog_items, spending_summary, monthly_spending, category_spending, recent_transactions, purchase_orders
+from datetime import datetime, timedelta
 
 app = FastAPI(title="Factory Inventory Management System")
 
@@ -120,6 +121,44 @@ class CreatePurchaseOrderRequest(BaseModel):
     expected_delivery_date: str
     notes: Optional[str] = None
 
+class RestockingItem(BaseModel):
+    sku: str
+    name: str
+    current_stock: int
+    forecasted_demand: int
+    unit_cost: float
+    recommended_qty: int
+    estimated_cost: float
+    warehouse: str
+
+class RestockingOrderItem(BaseModel):
+    sku: str
+    name: str
+    quantity: int
+    unit_cost: float
+    estimated_cost: float
+
+class RestockingOrderRequest(BaseModel):
+    items: List[RestockingOrderItem]
+    total_cost: float
+    budget: float
+
+class Task(BaseModel):
+    id: str
+    title: str
+    priority: str
+    dueDate: str
+    status: str
+
+class CreateTaskRequest(BaseModel):
+    title: str
+    priority: str
+    dueDate: str
+
+# In-memory task store (separate from mock_data.py - user-generated, not seed data)
+tasks: List[dict] = []
+next_task_id = 1
+
 # API endpoints
 @app.get("/")
 def root():
@@ -304,6 +343,138 @@ def get_monthly_trends():
     result.sort(key=lambda x: x['month'])
     return result
 
+@app.get("/api/restocking/recommendations", response_model=List[RestockingItem])
+def get_restocking_recommendations(budget: float):
+    """Get recommended items to restock based on demand forecasts, prioritized by demand gap"""
+    recommendations = []
+
+    # Match demand with inventory and calculate gaps
+    for demand in demand_forecasts:
+        # Find matching inventory item by SKU
+        inventory = None
+        for inv in inventory_items:
+            if inv.get('sku') == demand.get('item_sku'):
+                inventory = inv
+                break
+
+        # Only include if we have matching inventory and positive demand gap
+        if inventory:
+            demand_gap = demand.get('forecasted_demand', 0) - demand.get('current_demand', 0)
+            if demand_gap > 0:
+                recommendations.append({
+                    'demand_gap': demand_gap,
+                    'demand': demand,
+                    'inventory': inventory
+                })
+
+    # Sort by demand gap (descending) - items with highest demand increase first
+    recommendations.sort(key=lambda x: x['demand_gap'], reverse=True)
+
+    # Fill budget greedily
+    result = []
+    remaining_budget = budget
+    for rec in recommendations:
+        unit_cost = rec['inventory'].get('unit_cost', 0)
+        if unit_cost > 0:
+            qty = int(remaining_budget / unit_cost)
+            if qty > 0:
+                estimated_cost = qty * unit_cost
+                result.append(RestockingItem(
+                    sku=rec['inventory']['sku'],
+                    name=rec['inventory']['name'],
+                    current_stock=rec['inventory']['quantity_on_hand'],
+                    forecasted_demand=rec['demand']['forecasted_demand'],
+                    unit_cost=unit_cost,
+                    recommended_qty=qty,
+                    estimated_cost=estimated_cost,
+                    warehouse=rec['inventory']['warehouse']
+                ))
+                remaining_budget -= estimated_cost
+                if remaining_budget < 1:
+                    break
+
+    return result
+
+@app.post("/api/restocking/orders")
+def create_restocking_order(order_request: RestockingOrderRequest):
+    """Create a new restocking order and add it to the orders list"""
+    # Validate budget
+    if order_request.total_cost > order_request.budget:
+        raise HTTPException(
+            status_code=400,
+            detail=f"Order total ${order_request.total_cost:.2f} exceeds budget ${order_request.budget:.2f}"
+        )
+
+    # Create order record
+    order_id = len(orders) + 1
+    order_number = f"RST-2025-{order_id:04d}"
+    now = datetime.now()
+    delivery_date = now + timedelta(days=7)
+
+    new_order = {
+        'id': str(order_id),
+        'order_number': order_number,
+        'customer': 'Internal - Restocking',
+        'items': [
+            {
+                'sku': item.sku,
+                'name': item.name,
+                'quantity': item.quantity,
+                'unit_price': item.unit_cost
+            }
+            for item in order_request.items
+        ],
+        'status': 'Submitted',
+        'order_date': now.isoformat(),
+        'expected_delivery': delivery_date.isoformat(),
+        'total_value': order_request.total_cost,
+        'warehouse': order_request.items[0].sku.split('-')[0] if order_request.items else 'Unknown',
+        'category': 'Restocking'
+    }
+
+    orders.append(new_order)
+
+    return {
+        'order_number': order_number,
+        'status': 'Submitted',
+        'total_cost': order_request.total_cost,
+        'expected_delivery': delivery_date.isoformat()
+    }
+
+@app.get("/api/tasks", response_model=List[Task])
+def get_tasks():
+    return tasks
+
+@app.post("/api/tasks", response_model=Task)
+def create_task(task_request: CreateTaskRequest):
+    global next_task_id
+    new_task = {
+        'id': str(next_task_id),
+        'title': task_request.title,
+        'priority': task_request.priority,
+        'dueDate': task_request.dueDate,
+        'status': 'pending'
+    }
+    next_task_id += 1
+    tasks.append(new_task)
+    return new_task
+
+@app.patch("/api/tasks/{task_id}", response_model=Task)
+def toggle_task(task_id: str):
+    task = next((t for t in tasks if t['id'] == task_id), None)
+    if not task:
+        raise HTTPException(status_code=404, detail=f"Task {task_id} not found")
+    task['status'] = 'completed' if task['status'] == 'pending' else 'pending'
+    return task
+
+@app.delete("/api/tasks/{task_id}")
+def delete_task(task_id: str):
+    task = next((t for t in tasks if t['id'] == task_id), None)
+    if not task:
+        raise HTTPException(status_code=404, detail=f"Task {task_id} not found")
+    tasks.remove(task)
+    return {'message': 'Task deleted', 'id': task_id}
+
 if __name__ == "__main__":
     import uvicorn
     uvicorn.run(app, host="0.0.0.0", port=8001)