diff --git a/.claude/agents/debugger.md b/.claude/agents/debugger.md
new file mode 100644
index 000000000..892dbac25
--- /dev/null
+++ b/.claude/agents/debugger.md
@@ -0,0 +1,92 @@
+---
+name: debugger
+description: Runtime-error investigator. Use to diagnose crashes, exceptions, stack traces, and unexpected runtime behavior in the inventory-management app (Vue/Vite frontend and FastAPI backend). Reproduces the failure, reads the trace, localizes the root cause, and proposes a targeted fix — it does not edit files.
+tools: Read, Grep, Glob, Bash
+model: sonnet
+color: cyan
+---
+
+# Debugger Agent
+
+You are a runtime-error specialist for the Factory Inventory Management System (Vue 3 + Vite frontend on `:3000`, Python FastAPI backend on `:8001`, in-memory mock data). You investigate crashes, exceptions, and misbehavior; you find the **root cause** and propose a precise fix. You are given a symptom — an error message, a stack trace, a failing request, or "X throws when I do Y" — and you run it to ground.
+
+## Core principle: reproduce, then reason
+
+Never diagnose from the error text alone. You have **Bash** — use it to observe the real failure before forming conclusions. A stack trace tells you where it blew up, not why. Confirm the trigger, read the state at the failure point, then explain the mechanism.
+
+## Boundaries
+
+- **You do not edit files.** You have no Write/Edit access by design. Produce the diagnosis and a concrete fix (with the exact change), then hand `.vue` fixes to the **vue-expert** agent and other fixes back to the caller.
+- **Bash is for observation and reproduction only:** run the app, curl endpoints, read logs, grep source, inspect data, run a failing test. Do **not** use it to mutate source, delete data, kill unrelated processes, or make outward network calls. Prefer read-only commands.
+- **Scope is one failure at a time.** Chase the reported symptom to its root cause; note unrelated issues you pass but don't wander.
+
+## Investigation procedure
+
+1. **Capture the symptom exactly.** The full error string and stack trace, the action that triggered it, and where it surfaced (browser console, Vite overlay, terminal, API response, log file).
+2. **Reproduce it.** Drive the smallest thing that triggers the failure:
+   - Backend: `curl -s -i http://localhost:8001/api/<endpoint>` (add query params to hit the failing filter); check `/api/docs` for the contract.
+   - Frontend: load the route, or read the Vite output; a build/transform error appears there, a runtime error in the browser console.
+   - If the servers aren't up: `./scripts/start.sh` (logs to `/tmp/inventory-backend.log` and `/tmp/inventory-frontend.log`).
+3. **Read the trace top-down for cause, bottom-up for origin.** Identify the **deepest frame in first-party code** (`server/*.py`, `client/src/**`) — third-party frames (uvicorn, pydantic, vite, vue internals) usually just carry the error, they don't own the bug.
+4. **Inspect state at the failure point.** Read the offending line and the values reaching it — the data shape (`server/data/*.json`, `mock_data.py`), the params, the reactive refs. Grep for where that value is produced.
+5. **Form one hypothesis and test it.** Change an input, not the code: a different query param, an empty list, a null field. Confirm the failure appears and disappears as the hypothesis predicts.
+6. **Localize the root cause** to a specific line and mechanism, then design the minimal fix.
+
+## Reading stack traces in this stack
+
+**Python / FastAPI (backend):** traces print to the terminal and `/tmp/inventory-backend.log`. Read the last `File ".../server/....py", line N, in fn` frame in `server/` — that's the origin. The final line names the exception (`KeyError`, `TypeError: unsupported operand`, `ValidationError`, `AttributeError: 'NoneType'`). A 500 in the API response with no body usually means an unhandled exception — get the traceback from the log, not the HTTP body. `pydantic.ValidationError` means the data or response model drifted from the JSON in `server/data/`.
+
+**JavaScript / Vue (frontend):** two distinct failure classes —
+- **Vite transform / import errors** show in the terminal + full-screen overlay ("Failed to resolve import …", syntax errors). These are build-time and block the whole page. Check `/tmp/inventory-frontend.log`.
+- **Runtime errors** show in the browser console with a component trace ("at <Inventory>"). Common here: reading a property of `undefined` before data loads, `.getMonth()` on an invalid `Date`, `.map`/`.filter` on a ref that's still `null`, or a template referencing something not returned from `setup()`.
+- Vite serves minified deps; map the trace back to `client/src/**` source, ignore `node_modules` frames.
+
+## Usual suspects in this codebase
+
+Check these first — they recur here:
+- **Unvalidated dates:** `new Date(x).getMonth()` on a bad/empty string → `NaN`/wrong month. Validate with `isNaN(date.getTime())` first.
+- **Data accessed before load:** a computed/template touching `items.value[0]` while `loading` is still true and the ref is empty. Guard for empty.
+- **Filter param mismatch:** inventory has no `month`/`status` dimension; passing those, or an unknown `warehouse`/`category`, can yield empty or unexpected results. Confirm against the endpoint's real filters.
+- **Model ↔ data drift:** editing `server/data/*.json` or the shape returned by an endpoint without updating the Pydantic model → `ValidationError`. Grep the model and the JSON keys together.
+- **Off-by-one / missing key:** `:key="index"` reuse, or `monthlyData[index - 1]` at index 0.
+- **CORS / wrong port:** frontend calling the wrong origin surfaces as a network error in the console, not a backend trace.
+
+## Output format
+
+```markdown
+# Debug Report: <short symptom>
+
+**Symptom:** <the error / observed behavior>
+**Reproduced:** Yes — <exact command or steps> · <what you observed>
+
+## Root cause
+<The specific mechanism, at file:line.> <Why it fires — the state/input that triggers it.>
+
+## Evidence
+- <trace frame or log line that pins it, file:line>
+- <state you inspected: the value, the data shape, the param>
+- <hypothesis test: input X → failure, input Y → no failure>
+
+## Suggested fix
+**Where:** <file:line>
+**Change:**
+```<lang>
+// before → after (minimal, targeted)
+```
+**Why this fixes it:** <ties the change to the root cause>
+**Apply via:** <vue-expert for .vue files · caller otherwise>
+
+## Verify after fixing
+<the exact command/action that should now succeed, and what "fixed" looks like>
+
+## Noted in passing (optional)
+<unrelated issues seen, not chased>
+```
+
+## Principles
+
+- **Evidence over guess.** Every root-cause claim is backed by a trace frame, a log line, or an observed reproduction — never "it's probably…".
+- **Root cause, not symptom.** A missing null-check that hides the real bug is not a fix. Explain the mechanism.
+- **Minimal, targeted fixes.** Smallest change that addresses the cause; respect existing patterns (`client/CLAUDE.md`, `server/CLAUDE.md`).
+- **Always give a verification step.** The caller must be able to confirm the fix resolves the exact failure you reproduced.
+- **If you cannot reproduce it, say so** and state precisely what you'd need (the full trace, the input, the env) rather than guessing at a fix.
diff --git a/.claude/skills/vue-component-analysis/SKILL.md b/.claude/skills/vue-component-analysis/SKILL.md
new file mode 100644
index 000000000..b34730a4a
--- /dev/null
+++ b/.claude/skills/vue-component-analysis/SKILL.md
@@ -0,0 +1,108 @@
+---
+name: vue-component-analysis
+description: Analyze Vue 3 component structure and produce a prioritized report of performance and code-reuse improvements for the inventory-management client. Use when asked to review, analyze, audit, or "find optimizations for" one or more .vue files or the client as a whole. This skill only reads and reports — it does not edit .vue files (hand fixes to the vue-expert agent).
+---
+
+# Vue Component Analysis
+
+A repeatable method for analyzing Vue 3 components in `client/src/` and reporting **performance** and **code-reuse** improvements, ranked by impact. This app uses the Composition API (`setup()`), Vite, scoped CSS, custom SVG charts, Axios via `client/src/api.js`, and shared state in composables (`useFilters`, `useI18n`, `useAuth`).
+
+## What this skill does and does not do
+
+- **Does:** read components, measure them against the checks below, and emit a prioritized report with concrete file:line references and a suggested fix for each finding.
+- **Does not:** edit `.vue` files. This repo's rule is that any create/significant-modify of a `.vue` file goes through the **vue-expert** agent. Produce the analysis, then hand the accepted findings to vue-expert to apply, or to `/optimize` for whole-codebase dead-code removal.
+- **Not a bug hunt.** Correctness bugs belong to `/code-review`. Stay on performance and reuse.
+
+## Procedure
+
+1. **Scope the target.** One component, a folder (`views/` or `components/`), or the whole client. If unscoped, default to `client/src/views/*.vue` and `client/src/components/*.vue`.
+2. **Measure first.** For each target: total lines and the template / script / style split (`grep -n -E '^<template>|^<script|^<style' file.vue`). Size flags candidates; it is not itself a finding.
+3. **Run the two lenses** below (Performance, Reuse) against each component. Record every hit with `file:line`, the pattern, and the fix.
+4. **Cross-component pass.** Reuse findings usually span files — look for the same boilerplate repeated across views before concluding.
+5. **Rank and report** using the output format at the end. Lead with the highest impact-to-effort findings.
+
+## Lens 1 — Performance
+
+Check each component for these, in roughly descending impact:
+
+### P1. Methods called in templates (should be `computed`)
+A function invoked in `{{ }}`, `:prop`, or `v-if` re-runs on **every** re-render; a `computed` caches until its deps change. Flag any `{{ someMethod(...) }}` doing real work, especially inside a `v-for`.
+- Real examples: `views/Backlog.vue` calls `getBacklogByPriority('high').length` three times in the template (three full filters per render); `views/Inventory.vue:68` runs `getStockStatus(item)` per row; `views/Reports.vue:88,94` run `getChangeValue`/`getGrowthRate` per row.
+- Fix: convert to a `computed` (parametric cases → a `computed` map keyed by the argument, or precompute the derived field once when data loads).
+
+### P2. `:key` bound to array index
+Index keys make Vue reuse DOM nodes incorrectly when a list reorders or items are inserted/removed — stale rows, wrong state, subtle render cost. This repo's `client/CLAUDE.md` explicitly forbids it.
+- Real examples: `views/Reports.vue:28,51,82` (`:key="index"`), `views/Orders.vue:61,110` (`:key="idx"`).
+- Fix: key by a stable unique id — `sku`, `order_number`, `month`, etc.
+
+### P3. `v-if` on frequently-toggled content (prefer `v-show`)
+`v-if` mounts/unmounts; for something toggled often (tab panels, chart overlays, expandable rows) `v-show` (CSS `display`) is cheaper. Reserve `v-if` for rarely-shown or expensive subtrees.
+
+### P4. Un-debounced reactive work
+A `watch` on a filter or search input that fires an API call or heavy recompute on every keystroke. Real `watch` sites to inspect: `Inventory.vue:169`, `Orders.vue:181`, `Dashboard.vue:676`, `Demand.vue:165`, `Spending.vue:374`, `Backlog.vue:138`. Flag any that watch a text input without debounce.
+- Fix: debounce the handler, or watch a derived value that changes less often.
+
+### P5. Work repeated in the template that could be hoisted
+Same expression computed in multiple bindings (e.g. `month.revenue.toLocaleString()` recomputed for bar height, title, and label). Hoist into one `computed`/derived field.
+
+### P6. Oversized single-file components
+Large components re-render as a unit and are hard to reason about. Treat these as thresholds, then confirm with the reuse lens before recommending a split:
+- template > ~150 lines, script > ~200 lines, or file > ~400 lines.
+- Real examples: `views/Dashboard.vue` (1271 lines: template 1–298, script 299–728, style 729–1271), `views/Spending.vue` (852), `components/TasksModal.vue` (621).
+- Fix: extract cohesive template blocks into child components and cohesive logic into composables (see R2/R3).
+
+## Lens 2 — Code Reuse
+
+### R1. Duplicated data-loading boilerplate → a composable
+Every view repeats the same shape: `const loading = ref(true)` / `error` / `items`, a `loadX()` with `try { loading.value=true … } catch { error.value=… } finally { loading.value=false }`, a `watch([...filters], loadX)`, and `onMounted(loadX)`. All seven views (`Backlog, Dashboard, Inventory, Demand, Orders, Spending, Restocking`) carry this.
+- Fix: extract a `composables/useApiResource.js` — `useApiResource(fetcher, { watch: [...] })` returning `{ data, loading, error, reload }` that wires the `watch` + `onMounted` internally. Report it once as a single cross-cutting finding, not seven times.
+
+### R2. Formatting done inline instead of via the existing util
+`utils/currency.js` already exports `formatCurrency` / `formatCurrencyWithDecimals` / `convertAmount`, yet views contain ~24 inline `toLocaleString()` / `.toFixed()` sites (e.g. `views/Spending.vue:59–95`). Inline formatting is not just duplication — a bare `amount.toLocaleString()` **skips the USD→JPY conversion**, so those figures are wrong when the locale is Japanese.
+- Fix: route every money/number format through the util (and percentages through one shared helper if the pattern recurs, e.g. `Reports.vue:313`).
+
+### R3. Repeated template/markup blocks → shared components
+Look for the same structural block copy-pasted across views: KPI stat cards (`stats-grid` / `stat-card`), the loading/error/empty triad, SVG chart scaffolding, detail modals. The `components/` dir already holds several `*DetailModal.vue`; new repetition should join it rather than live inline.
+- Fix: extract a presentational component (props down, events up); keep data-fetching in the parent/composable.
+
+### R4. Logic that belongs in a composable, not a view
+Shared, stateful, or reusable logic sitting inside a single view's `setup()` — filter derivation, selection state, currency/locale wiring, polling. If two views need it, it's a composable (this app's `useFilters` / `useI18n` / `useAuth` are the models to match).
+
+### R5. Prop / event hygiene (blocks reuse)
+Components that mutate props directly, or reach into global composable state instead of taking props, are hard to reuse. Flag direct prop mutation and suggest `emit` instead.
+
+## Output format
+
+Emit one ranked table plus a short per-finding detail. Rank by impact-to-effort (a 3-line filter run per render on every row beats a cosmetic split).
+
+```
+## Vue Analysis — <scope>
+
+| # | Sev  | Lens        | Location                     | Finding                                   |
+|---|------|-------------|------------------------------|-------------------------------------------|
+| 1 | High | Reuse (R1)  | all 7 views                  | Duplicated fetch/loading boilerplate      |
+| 2 | High | Perf (P2)   | Reports.vue:28,51,82         | :key="index" on dynamic lists             |
+| 3 | Med  | Reuse (R2)  | Spending.vue:59–95 (+~20)    | Inline formatting; skips JPY conversion   |
+| … |      |             |                              |                                           |
+
+### 1. Duplicated fetch/loading boilerplate  (Reuse · High)
+**Where:** Backlog/Dashboard/Inventory/Demand/Orders/Spending/Restocking `setup()`
+**Why it matters:** <impact>
+**Suggested fix:** extract `useApiResource(fetcher, { watch })` … <sketch>
+**Effort:** M · **Apply via:** vue-expert
+```
+
+Rules for the report:
+- Every finding cites real `file:line`(s) you verified this run — never a generic "somewhere".
+- State impact concretely (what re-runs, what breaks in JPY, how many call sites), not "improves performance".
+- Give a fix sketch, not the full diff. Application is vue-expert's job.
+- Collapse cross-file repetition into one finding with all locations, not N copies.
+- If a target is clean on a lens, say so briefly rather than inventing findings.
+
+## Handoff
+
+After the user picks findings to act on:
+- **`.vue` changes** → delegate to the **vue-expert** agent (mandatory for this repo).
+- **New composable / util** (`composables/*.js`, `utils/*.js`) → vue-expert as well, since views must be rewired to use it.
+- **Whole-codebase dead-code / unused-dependency removal** → the `/optimize` command, which already covers that ground.
+- Re-run this skill after changes to confirm the finding cleared.
diff --git a/client/src/App.vue b/client/src/App.vue
index c2da05a5c..b61aae150 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -16,6 +16,9 @@
           <router-link to="/orders" :class="{ active: $route.path === '/orders' }">
             {{ t('nav.orders') }}
           </router-link>
+          <router-link to="/restocking" :class="{ active: $route.path === '/restocking' }">
+            {{ t('nav.restocking') }}
+          </router-link>
           <router-link to="/spending" :class="{ active: $route.path === '/spending' }">
             {{ t('nav.finance') }}
           </router-link>
diff --git a/client/src/api.js b/client/src/api.js
index 11cb9db70..3d4b82b11 100644
--- a/client/src/api.js
+++ b/client/src/api.js
@@ -33,6 +33,11 @@ export const api = {
     return response.data
   },
 
+  async createOrder(orderData) {
+    const response = await axios.post(`${API_BASE_URL}/orders`, orderData)
+    return response.data
+  },
+
   async getDemandForecasts() {
     const response = await axios.get(`${API_BASE_URL}/demand`)
     return response.data
diff --git a/client/src/locales/en.js b/client/src/locales/en.js
index 03a58fe6e..d5b0bfcb4 100644
--- a/client/src/locales/en.js
+++ b/client/src/locales/en.js
@@ -4,6 +4,7 @@ export default {
     overview: 'Overview',
     inventory: 'Inventory',
     orders: 'Orders',
+    restocking: 'Restocking',
     finance: 'Finance',
     demandForecast: 'Demand Forecast',
     companyName: 'Catalyst Components',
@@ -106,12 +107,14 @@ export default {
     title: 'Orders',
     description: 'View and manage customer orders',
     allOrders: 'All Orders',
+    submittedOrders: 'Submitted Orders',
     totalOrders: 'Total Orders',
     totalRevenue: 'Total Revenue',
     avgOrderValue: 'Avg Order Value',
     onTimeDelivery: 'On-Time Delivery',
     itemsCount: '{count} items',
     quantity: 'Qty',
+    leadTimeDays: '{count} days',
     table: {
       orderNumber: 'Order Number',
       orderId: 'Order ID',
@@ -125,7 +128,36 @@ export default {
       totalValue: 'Total Value',
       status: 'Status',
       expectedDelivery: 'Expected Delivery',
-      actualDelivery: 'Actual Delivery'
+      actualDelivery: 'Actual Delivery',
+      submitted: 'Submitted',
+      leadTime: 'Lead Time'
+    }
+  },
+
+  // Restocking
+  restocking: {
+    title: 'Restocking',
+    description: 'Set a budget and restock high-demand items from the forecast',
+    budgetLabel: 'Available Budget',
+    budgetHint: 'Drag to set how much you can spend on restocking',
+    recommendedTitle: 'Recommended Restock',
+    summaryItems: 'Items recommended',
+    totalCost: 'Total Cost',
+    budgetRemaining: 'Budget Remaining',
+    placeOrder: 'Place Order',
+    placing: 'Placing order...',
+    orderPlaced: 'Restocking order {orderNumber} submitted successfully.',
+    viewInOrders: 'View in Orders',
+    noMatches: 'No forecast items currently match a priced inventory item, so there is nothing to restock.',
+    budgetTooLow: 'No items fit within this budget. Increase the budget to see recommendations.',
+    table: {
+      sku: 'SKU',
+      itemName: 'Item Name',
+      trend: 'Trend',
+      demand: 'Current → Forecast',
+      restockQty: 'Restock Qty',
+      unitCost: 'Unit Cost',
+      lineCost: 'Line Cost'
     }
   },
 
@@ -204,6 +236,7 @@ export default {
     shipped: 'Shipped',
     processing: 'Processing',
     backordered: 'Backordered',
+    submitted: 'Submitted',
     inStock: 'In Stock',
     lowStock: 'Low Stock',
     adequate: 'Adequate'
diff --git a/client/src/locales/ja.js b/client/src/locales/ja.js
index db33223ac..e9df9ff28 100644
--- a/client/src/locales/ja.js
+++ b/client/src/locales/ja.js
@@ -4,6 +4,7 @@ export default {
     overview: '概要',
     inventory: '在庫',
     orders: '注文',
+    restocking: '補充',
     finance: '財務',
     demandForecast: '需要予測',
     companyName: '触媒コンポーネンツ',
@@ -106,12 +107,14 @@ export default {
     title: '注文',
     description: '顧客注文の表示と管理',
     allOrders: 'すべての注文',
+    submittedOrders: '送信済み注文',
     totalOrders: '総注文数',
     totalRevenue: '総収益',
     avgOrderValue: '平均注文額',
     onTimeDelivery: '定時配達',
     itemsCount: '{count}件',
     quantity: '数量',
+    leadTimeDays: '{count}日',
     table: {
       orderNumber: '注文番号',
       orderId: '注文ID',
@@ -125,7 +128,36 @@ export default {
       totalValue: '合計金額',
       status: 'ステータス',
       expectedDelivery: '予定配達日',
-      actualDelivery: '実際の配達日'
+      actualDelivery: '実際の配達日',
+      submitted: '送信日',
+      leadTime: 'リードタイム'
+    }
+  },
+
+  // Restocking
+  restocking: {
+    title: '補充',
+    description: '予算を設定し、予測に基づいて需要の高い品目を補充します',
+    budgetLabel: '利用可能な予算',
+    budgetHint: 'スライダーで補充に使える金額を設定します',
+    recommendedTitle: '推奨補充',
+    summaryItems: '推奨品目数',
+    totalCost: '総コスト',
+    budgetRemaining: '残り予算',
+    placeOrder: '発注する',
+    placing: '発注中...',
+    orderPlaced: '補充注文 {orderNumber} が正常に送信されました。',
+    viewInOrders: '注文で表示',
+    noMatches: '価格付き在庫品目に一致する予測品目が現在ないため、補充対象がありません。',
+    budgetTooLow: 'この予算に収まる品目がありません。予算を増やすと推奨が表示されます。',
+    table: {
+      sku: 'SKU',
+      itemName: '品目名',
+      trend: 'トレンド',
+      demand: '現在 → 予測',
+      restockQty: '補充数量',
+      unitCost: '単価',
+      lineCost: '小計'
     }
   },
 
@@ -204,6 +236,7 @@ export default {
     shipped: '出荷済み',
     processing: '処理中',
     backordered: 'バックオーダー',
+    submitted: '送信済み',
     inStock: '在庫あり',
     lowStock: '在庫僅少',
     adequate: '適量'
diff --git a/client/src/main.js b/client/src/main.js
index 477c2d966..611c0a3b1 100644
--- a/client/src/main.js
+++ b/client/src/main.js
@@ -7,6 +7,7 @@ import Orders from './views/Orders.vue'
 import Demand from './views/Demand.vue'
 import Spending from './views/Spending.vue'
 import Reports from './views/Reports.vue'
+import Restocking from './views/Restocking.vue'
 
 const router = createRouter({
   history: createWebHistory(),
@@ -14,6 +15,7 @@ const router = createRouter({
     { path: '/', component: Dashboard },
     { path: '/inventory', component: Inventory },
     { path: '/orders', component: Orders },
+    { path: '/restocking', component: Restocking },
     { path: '/demand', component: Demand },
     { path: '/spending', component: Spending },
     { path: '/reports', component: Reports }
diff --git a/client/src/views/Orders.vue b/client/src/views/Orders.vue
index 7413f6e66..15b345e90 100644
--- a/client/src/views/Orders.vue
+++ b/client/src/views/Orders.vue
@@ -25,11 +25,64 @@
           <div class="stat-label">{{ t('status.backordered') }}</div>
           <div class="stat-value">{{ getOrdersByStatus('Backordered').length }}</div>
         </div>
+        <div class="stat-card info">
+          <div class="stat-label">{{ t('status.submitted') }}</div>
+          <div class="stat-value">{{ submittedOrders.length }}</div>
+        </div>
+      </div>
+
+      <!-- Submitted restocking orders (created from the Restocking tab) -->
+      <div v-if="submittedOrders.length" class="card">
+        <div class="card-header">
+          <h3 class="card-title">{{ t('orders.submittedOrders') }} ({{ submittedOrders.length }})</h3>
+        </div>
+        <div class="table-container">
+          <table class="orders-table">
+            <thead>
+              <tr>
+                <th class="col-order-number">{{ t('orders.table.orderNumber') }}</th>
+                <th class="col-items">{{ t('orders.table.items') }}</th>
+                <th class="col-status">{{ t('orders.table.status') }}</th>
+                <th class="col-date">{{ t('orders.table.submitted') }}</th>
+                <th class="col-date">{{ t('orders.table.expectedDelivery') }}</th>
+                <th class="col-lead">{{ t('orders.table.leadTime') }}</th>
+                <th class="col-value">{{ t('orders.table.totalValue') }}</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="order in submittedOrders" :key="order.id">
+                <td class="col-order-number"><strong>{{ order.order_number }}</strong></td>
+                <td class="col-items">
+                  <details class="items-details">
+                    <summary class="items-summary">
+                      {{ t('orders.itemsCount', { count: order.items.length }) }}
+                    </summary>
+                    <div class="items-dropdown">
+                      <div v-for="(item, idx) in order.items" :key="idx" class="item-entry">
+                        <span class="item-name">{{ translateProductName(item.name) }}</span>
+                        <span class="item-meta">{{ t('orders.quantity') }}: {{ item.quantity }} @ {{ currencySymbol }}{{ item.unit_price }}</span>
+                      </div>
+                    </div>
+                  </details>
+                </td>
+                <td class="col-status">
+                  <span :class="['badge', getOrderStatusClass(order.status)]">
+                    {{ t(`status.${order.status.toLowerCase()}`) }}
+                  </span>
+                </td>
+                <td class="col-date">{{ formatDate(order.order_date) }}</td>
+                <td class="col-date">{{ formatDate(order.expected_delivery) }}</td>
+                <td class="col-lead">{{ t('orders.leadTimeDays', { count: leadTimeDays(order) }) }}</td>
+                <td class="col-value"><strong>{{ currencySymbol }}{{ order.total_value.toLocaleString() }}</strong></td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
       </div>
 
       <div class="card">
         <div class="card-header">
-          <h3 class="card-title">{{ t('orders.allOrders') }} ({{ orders.length }})</h3>
+          <h3 class="card-title">{{ t('orders.allOrders') }} ({{ customerOrders.length }})</h3>
         </div>
         <div class="table-container">
           <table class="orders-table">
@@ -45,7 +98,7 @@
               </tr>
             </thead>
             <tbody>
-              <tr v-for="order in orders" :key="order.id">
+              <tr v-for="order in customerOrders" :key="order.id">
                 <td class="col-order-number"><strong>{{ order.order_number }}</strong></td>
                 <td class="col-customer">{{ translateCustomerName(order.customer) }}</td>
                 <td class="col-items">
@@ -133,16 +186,27 @@ export default {
       return orders.value.filter(order => order.status === status)
     }
 
+    // Submitted restocking orders shown in their own section; everything else in "All Orders"
+    const submittedOrders = computed(() => orders.value.filter(order => order.status === 'Submitted'))
+    const customerOrders = computed(() => orders.value.filter(order => order.status !== 'Submitted'))
+
     const getOrderStatusClass = (status) => {
       const statusMap = {
         'Delivered': 'success',
         'Shipped': 'info',
         'Processing': 'warning',
-        'Backordered': 'danger'
+        'Backordered': 'danger',
+        'Submitted': 'info'
       }
       return statusMap[status] || 'info'
     }
 
+    // Delivery lead time in whole days between submission and expected delivery
+    const leadTimeDays = (order) => {
+      const ms = new Date(order.expected_delivery) - new Date(order.order_date)
+      return Math.round(ms / 86400000)
+    }
+
     const formatDate = (dateString) => {
       const { currentLocale } = useI18n()
       const locale = currentLocale.value === 'ja' ? 'ja-JP' : 'en-US'
@@ -160,8 +224,11 @@ export default {
       loading,
       error,
       orders,
+      submittedOrders,
+      customerOrders,
       getOrdersByStatus,
       getOrderStatusClass,
+      leadTimeDays,
       formatDate,
       currencySymbol,
       translateProductName,
@@ -199,6 +266,10 @@ export default {
   width: 140px;
 }
 
+.col-lead {
+  width: 100px;
+}
+
 .col-value {
   width: 120px;
 }
diff --git a/client/src/views/Restocking.vue b/client/src/views/Restocking.vue
new file mode 100644
index 000000000..6f1a32160
--- /dev/null
+++ b/client/src/views/Restocking.vue
@@ -0,0 +1,447 @@
+<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 -->
+      <div class="card budget-card">
+        <div class="budget-head">
+          <div>
+            <div class="budget-label">{{ t('restocking.budgetLabel') }}</div>
+            <div class="budget-hint">{{ t('restocking.budgetHint') }}</div>
+          </div>
+          <div class="budget-value">{{ formatCurrency(budget, currentCurrency) }}</div>
+        </div>
+        <input
+          type="range"
+          class="budget-slider"
+          :min="0"
+          :max="sliderMax"
+          :step="500"
+          v-model.number="budget"
+        />
+        <div class="budget-scale">
+          <span>{{ formatCurrency(0, currentCurrency) }}</span>
+          <span>{{ formatCurrency(sliderMax, currentCurrency) }}</span>
+        </div>
+      </div>
+
+      <!-- Success banner (after placing an order) -->
+      <div v-if="placedOrder" class="success-banner">
+        <span>{{ t('restocking.orderPlaced', { orderNumber: placedOrder.order_number }) }}</span>
+        <router-link to="/orders" class="link-btn">{{ t('restocking.viewInOrders') }}</router-link>
+      </div>
+
+      <!-- Recommendations -->
+      <div class="card">
+        <div class="card-header">
+          <h3 class="card-title">
+            {{ t('restocking.recommendedTitle') }} ({{ recommendation.items.length }})
+          </h3>
+          <button
+            class="place-order-btn"
+            :disabled="recommendation.items.length === 0 || placing"
+            @click="placeOrder"
+          >
+            {{ placing ? t('restocking.placing') : t('restocking.placeOrder') }}
+          </button>
+        </div>
+
+        <!-- Empty states: no priced candidates at all, vs. budget too low -->
+        <div v-if="candidates.length === 0" class="empty-state">{{ t('restocking.noMatches') }}</div>
+        <div v-else-if="recommendation.items.length === 0" class="empty-state">{{ t('restocking.budgetTooLow') }}</div>
+
+        <div v-else class="table-container">
+          <table class="restock-table">
+            <thead>
+              <tr>
+                <th>{{ t('restocking.table.sku') }}</th>
+                <th>{{ t('restocking.table.itemName') }}</th>
+                <th>{{ t('restocking.table.trend') }}</th>
+                <th>{{ t('restocking.table.demand') }}</th>
+                <th class="num">{{ t('restocking.table.restockQty') }}</th>
+                <th class="num">{{ t('restocking.table.unitCost') }}</th>
+                <th class="num">{{ t('restocking.table.lineCost') }}</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="item in recommendation.items" :key="item.sku">
+                <td><strong>{{ item.sku }}</strong></td>
+                <td>{{ translateProductName(item.name) }}</td>
+                <td>
+                  <span :class="['trend-badge', item.trend]">{{ t(`trends.${item.trend}`) }}</span>
+                </td>
+                <td>{{ item.current_demand }} &rarr; {{ item.forecasted_demand }}</td>
+                <td class="num">{{ item.restock_qty }}</td>
+                <td class="num">{{ formatCurrencyWithDecimals(item.unit_cost, currentCurrency, 2) }}</td>
+                <td class="num"><strong>{{ formatCurrencyWithDecimals(item.line_cost, currentCurrency, 2) }}</strong></td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <!-- Summary footer -->
+        <div v-if="recommendation.items.length > 0" class="summary">
+          <div class="summary-item">
+            <span class="summary-label">{{ t('restocking.summaryItems') }}</span>
+            <span class="summary-num">{{ recommendation.items.length }}</span>
+          </div>
+          <div class="summary-item">
+            <span class="summary-label">{{ t('restocking.totalCost') }}</span>
+            <span class="summary-num">{{ formatCurrencyWithDecimals(recommendation.totalCost, currentCurrency, 2) }}</span>
+          </div>
+          <div class="summary-item">
+            <span class="summary-label">{{ t('restocking.budgetRemaining') }}</span>
+            <span class="summary-num">{{ formatCurrencyWithDecimals(budget - recommendation.totalCost, currentCurrency, 2) }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, onMounted, computed } from 'vue'
+import { api } from '../api'
+import { useI18n } from '../composables/useI18n'
+import { formatCurrency, formatCurrencyWithDecimals } from '../utils/currency'
+
+// Growth-first priority: increasing-demand items are restocked before stable/decreasing ones
+const TREND_RANK = { increasing: 0, stable: 1, decreasing: 2 }
+
+export default {
+  name: 'Restocking',
+  setup() {
+    const { t, currentCurrency, translateProductName } = useI18n()
+
+    const loading = ref(true)
+    const error = ref(null)
+    const budget = ref(5000)          // USD base; display converts per locale
+    const sliderMax = ref(100000)
+    const candidates = ref([])        // forecast items priced from matching inventory
+    const placing = ref(false)
+    const placedOrder = ref(null)
+
+    const loadData = async () => {
+      try {
+        loading.value = true
+        error.value = null
+        const [forecasts, inventory] = await Promise.all([
+          api.getDemandForecasts(),
+          api.getInventory()
+        ])
+
+        // Index inventory by SKU so each forecast can pick up a real unit_cost
+        const bySku = {}
+        inventory.forEach(inv => { bySku[inv.sku] = inv })
+
+        // Keep only forecast items that (a) match a priced inventory item and
+        // (b) actually need restocking (forecast demand exceeds current demand)
+        candidates.value = forecasts
+          .filter(f => bySku[f.item_sku] && f.forecasted_demand > f.current_demand)
+          .map(f => {
+            const inv = bySku[f.item_sku]
+            const restock_qty = f.forecasted_demand - f.current_demand
+            return {
+              sku: f.item_sku,
+              name: f.item_name,
+              trend: f.trend,
+              current_demand: f.current_demand,
+              forecasted_demand: f.forecasted_demand,
+              gap: restock_qty,
+              unit_cost: inv.unit_cost,
+              restock_qty,
+              line_cost: restock_qty * inv.unit_cost
+            }
+          })
+      } catch (err) {
+        error.value = 'Failed to load restocking data: ' + err.message
+      } finally {
+        loading.value = false
+      }
+    }
+
+    // Growth-first, greedy fill: sort by trend priority then largest demand gap,
+    // then add items one by one while the running total still fits the budget.
+    const recommendation = computed(() => {
+      const sorted = [...candidates.value].sort((a, b) => {
+        const rank = TREND_RANK[a.trend] - TREND_RANK[b.trend]
+        return rank !== 0 ? rank : b.gap - a.gap
+      })
+
+      const items = []
+      let totalCost = 0
+      for (const item of sorted) {
+        if (totalCost + item.line_cost <= budget.value) {
+          items.push(item)
+          totalCost += item.line_cost
+        }
+      }
+      return { items, totalCost }
+    })
+
+    const placeOrder = async () => {
+      if (recommendation.value.items.length === 0) return
+      try {
+        placing.value = true
+        error.value = null
+        const payload = {
+          items: recommendation.value.items.map(r => ({
+            sku: r.sku,
+            name: r.name,
+            quantity: r.restock_qty,
+            unit_price: r.unit_cost
+          })),
+          warehouse: null
+        }
+        placedOrder.value = await api.createOrder(payload)
+      } catch (err) {
+        error.value = 'Failed to place order: ' + err.message
+      } finally {
+        placing.value = false
+      }
+    }
+
+    onMounted(loadData)
+
+    return {
+      t,
+      currentCurrency,
+      translateProductName,
+      formatCurrency,
+      formatCurrencyWithDecimals,
+      loading,
+      error,
+      budget,
+      sliderMax,
+      candidates,
+      recommendation,
+      placing,
+      placedOrder,
+      placeOrder
+    }
+  }
+}
+</script>
+
+<style scoped>
+.page-header {
+  margin-bottom: 1.5rem;
+}
+
+.page-header h2 {
+  margin-bottom: 0.25rem;
+}
+
+.page-header p {
+  color: #64748b;
+  font-size: 0.875rem;
+}
+
+.loading, .error {
+  padding: 2rem;
+  text-align: center;
+  color: #64748b;
+}
+
+.error {
+  color: #ef4444;
+}
+
+/* Budget slider card */
+.budget-card {
+  padding: 1.5rem;
+}
+
+.budget-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+
+.budget-label {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #0f172a;
+}
+
+.budget-hint {
+  font-size: 0.8125rem;
+  color: #64748b;
+  margin-top: 0.125rem;
+}
+
+.budget-value {
+  font-size: 1.75rem;
+  font-weight: 700;
+  color: #2563eb;
+  font-variant-numeric: tabular-nums;
+}
+
+.budget-slider {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 6px;
+  border-radius: 999px;
+  background: #e2e8f0;
+  outline: none;
+}
+
+.budget-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #2563eb;
+  cursor: pointer;
+  border: 2px solid #fff;
+  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.3);
+}
+
+.budget-slider::-moz-range-thumb {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #2563eb;
+  cursor: pointer;
+  border: 2px solid #fff;
+}
+
+.budget-scale {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 0.5rem;
+  font-size: 0.75rem;
+  color: #94a3b8;
+}
+
+/* Success banner */
+.success-banner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  background: #d1fae5;
+  border: 1px solid #6ee7b7;
+  color: #065f46;
+  border-radius: 10px;
+  padding: 0.875rem 1.25rem;
+  margin-bottom: 1.25rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.link-btn {
+  color: #065f46;
+  font-weight: 600;
+  text-decoration: underline;
+  white-space: nowrap;
+}
+
+/* Place order button */
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1.5rem;
+  padding: 1.25rem 1.5rem;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.card-title {
+  font-size: 1rem;
+  font-weight: 600;
+  color: #0f172a;
+  margin: 0;
+}
+
+.place-order-btn {
+  background: #2563eb;
+  color: #fff;
+  border: none;
+  border-radius: 8px;
+  padding: 0.5rem 1.25rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.place-order-btn:hover:not(:disabled) {
+  background: #1d4ed8;
+}
+
+.place-order-btn:disabled {
+  background: #cbd5e1;
+  cursor: not-allowed;
+}
+
+.empty-state {
+  padding: 2rem 1.5rem;
+  text-align: center;
+  color: #64748b;
+  font-size: 0.875rem;
+}
+
+/* Trend badges */
+.trend-badge {
+  display: inline-block;
+  padding: 0.25rem 0.625rem;
+  border-radius: 6px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: capitalize;
+}
+
+.trend-badge.increasing { background: #d1fae5; color: #065f46; }
+.trend-badge.stable { background: #dbeafe; color: #1e40af; }
+.trend-badge.decreasing { background: #fee2e2; color: #991b1b; }
+
+.restock-table {
+  width: 100%;
+}
+
+.restock-table th.num,
+.restock-table td.num {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Summary footer */
+.summary {
+  display: flex;
+  gap: 2.5rem;
+  padding: 1rem 1.5rem;
+  border-top: 1px solid #e2e8f0;
+  background: #f8fafc;
+}
+
+.summary-item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.summary-label {
+  font-size: 0.75rem;
+  color: #64748b;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.summary-num {
+  font-size: 1.125rem;
+  font-weight: 700;
+  color: #0f172a;
+  font-variant-numeric: tabular-nums;
+}
+</style>
diff --git a/docs/architecture.html b/docs/architecture.html
new file mode 100644
index 000000000..e9a4ca440
--- /dev/null
+++ b/docs/architecture.html
@@ -0,0 +1,420 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Architecture — Factory Inventory Management System</title>
+  <style>
+    /* Palette mirrors the app's slate/gray design system (CLAUDE.md) */
+    :root {
+      --ink: #0f172a;
+      --muted: #64748b;
+      --line: #e2e8f0;
+      --bg: #f8fafc;
+      --card: #ffffff;
+      --blue: #2563eb;
+      --blue-soft: #eff6ff;
+      --green: #16a34a;
+      --green-soft: #f0fdf4;
+      --amber: #d97706;
+      --amber-soft: #fffbeb;
+      --violet: #7c3aed;
+      --violet-soft: #f5f3ff;
+      --radius: 10px;
+      --shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.04);
+    }
+
+    * { box-sizing: border-box; }
+
+    body {
+      margin: 0;
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      color: var(--ink);
+      background: var(--bg);
+      line-height: 1.55;
+      -webkit-font-smoothing: antialiased;
+    }
+
+    .wrap { max-width: 1100px; margin: 0 auto; padding: 48px 28px 80px; }
+
+    header.page {
+      border-bottom: 1px solid var(--line);
+      padding-bottom: 28px;
+      margin-bottom: 40px;
+    }
+    header.page .eyebrow {
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+      font-size: 12px;
+      font-weight: 600;
+      color: var(--blue);
+      margin: 0 0 10px;
+    }
+    header.page h1 { margin: 0 0 10px; font-size: 30px; letter-spacing: -0.02em; }
+    header.page p { margin: 0; color: var(--muted); font-size: 16px; max-width: 760px; }
+
+    .meta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
+    .pill {
+      display: inline-flex; align-items: center; gap: 8px;
+      background: var(--card); border: 1px solid var(--line);
+      border-radius: 999px; padding: 6px 14px; font-size: 13px; color: var(--muted);
+      box-shadow: var(--shadow);
+    }
+    .pill strong { color: var(--ink); font-weight: 600; }
+    .dot { width: 8px; height: 8px; border-radius: 50%; }
+    .dot.green { background: var(--green); }
+    .dot.blue { background: var(--blue); }
+    .dot.amber { background: var(--amber); }
+
+    section { margin-bottom: 44px; }
+    section > h2 {
+      font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em;
+      color: var(--muted); font-weight: 600; margin: 0 0 18px;
+      display: flex; align-items: center; gap: 10px;
+    }
+    section > h2::after { content: ""; flex: 1; height: 1px; background: var(--line); }
+
+    /* ---- Tech stack cards ---- */
+    .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
+    .card {
+      background: var(--card); border: 1px solid var(--line);
+      border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow);
+    }
+    .card h3 { margin: 0 0 4px; font-size: 16px; display: flex; align-items: center; gap: 9px; }
+    .card .tag { font-size: 12px; color: var(--muted); margin: 0 0 16px; }
+    .card ul { margin: 0; padding: 0; list-style: none; }
+    .card li {
+      display: flex; justify-content: space-between; align-items: baseline;
+      padding: 8px 0; border-top: 1px dashed var(--line); font-size: 14px;
+    }
+    .card li:first-child { border-top: none; }
+    .card li span.k { color: var(--ink); font-weight: 500; }
+    .card li span.v { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
+    .swatch { width: 10px; height: 10px; border-radius: 3px; }
+    .swatch.green { background: var(--green); }
+    .swatch.blue { background: var(--blue); }
+    .swatch.amber { background: var(--amber); }
+
+    /* ---- Architecture stack diagram ---- */
+    .stack { display: flex; flex-direction: column; gap: 0; }
+    .layer {
+      background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
+      padding: 18px 20px; box-shadow: var(--shadow); position: relative;
+    }
+    .layer + .layer { margin-top: 34px; }
+    /* Connector arrow between stacked layers */
+    .layer + .layer::before {
+      content: "▲"; position: absolute; top: -27px; left: 50%; transform: translateX(-50%);
+      color: #cbd5e1; font-size: 13px;
+    }
+    .layer-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
+    .layer-badge {
+      font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
+      padding: 4px 10px; border-radius: 6px;
+    }
+    .badge-client { background: var(--blue-soft); color: var(--blue); }
+    .badge-http { background: var(--violet-soft); color: var(--violet); }
+    .badge-api { background: var(--green-soft); color: var(--green); }
+    .badge-data { background: var(--amber-soft); color: var(--amber); }
+    .layer-head h3 { margin: 0; font-size: 16px; }
+    .layer-head .sub { margin-left: auto; color: var(--muted); font-size: 13px; }
+
+    .chips { display: flex; flex-wrap: wrap; gap: 8px; }
+    .chip {
+      font-size: 13px; background: var(--bg); border: 1px solid var(--line);
+      border-radius: 7px; padding: 6px 11px; color: var(--ink);
+    }
+    .chip small { color: var(--muted); }
+
+    /* ---- Data flow ---- */
+    .flow { display: grid; grid-template-columns: 1fr; gap: 12px; }
+    .step {
+      display: grid; grid-template-columns: 34px 1fr; gap: 16px; align-items: start;
+      background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
+      padding: 16px 18px; box-shadow: var(--shadow);
+    }
+    .step .num {
+      width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff;
+      display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px;
+    }
+    .step h4 { margin: 0 0 3px; font-size: 15px; }
+    .step p { margin: 0; color: var(--muted); font-size: 14px; }
+    .step code {
+      background: var(--bg); border: 1px solid var(--line); border-radius: 5px;
+      padding: 1px 6px; font-size: 12.5px; color: var(--ink);
+      font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
+    }
+    .step.return { background: var(--green-soft); border-color: #bbf7d0; }
+    .step.return .num { background: var(--green); }
+
+    /* ---- Endpoints & filters ---- */
+    .two-col { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; align-items: start; }
+    table { width: 100%; border-collapse: collapse; background: var(--card);
+      border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
+    th, td { text-align: left; padding: 10px 14px; font-size: 13.5px; border-bottom: 1px solid var(--line); }
+    th { background: var(--bg); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
+    tr:last-child td { border-bottom: none; }
+    td code { font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; color: var(--ink); }
+    .method { font-size: 11px; font-weight: 700; color: var(--green); }
+
+    .filter-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
+    .filter-card h3 { margin: 0 0 14px; font-size: 15px; }
+    .filter-map { display: flex; flex-direction: column; gap: 10px; }
+    .fmap { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
+    .fmap .from { font-weight: 600; }
+    .fmap .arrow { color: var(--muted); }
+    .fmap .to code { background: var(--bg); border: 1px solid var(--line); border-radius: 5px; padding: 1px 7px;
+      font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
+
+    .note {
+      background: var(--amber-soft); border: 1px solid #fde68a; border-radius: var(--radius);
+      padding: 16px 18px; font-size: 14px; color: #78350f;
+    }
+    .note strong { color: #713f12; }
+
+    footer.page { border-top: 1px solid var(--line); padding-top: 20px; color: var(--muted); font-size: 13px; }
+
+    @media (max-width: 820px) {
+      .grid-3 { grid-template-columns: 1fr; }
+      .two-col { grid-template-columns: 1fr; }
+      .layer-head .sub { display: none; }
+    }
+  </style>
+</head>
+<body>
+  <div class="wrap">
+
+    <header class="page">
+      <p class="eyebrow">System Architecture</p>
+      <h1>Factory Inventory Management System</h1>
+      <p>A full-stack demo for factory operations — inventory tracking, order management, demand
+         forecasting, backlog monitoring, and spending analytics. A Vue 3 single-page app talks to a
+         Python FastAPI service that serves in-memory data loaded from JSON files.</p>
+      <div class="meta-row">
+        <span class="pill"><span class="dot blue"></span> Frontend <strong>:3000</strong></span>
+        <span class="pill"><span class="dot green"></span> Backend API <strong>:8001</strong></span>
+        <span class="pill"><span class="dot amber"></span> Data <strong>In-memory JSON</strong></span>
+        <span class="pill">Persistence <strong>None (mock)</strong></span>
+        <span class="pill">Auth <strong>None (demo)</strong></span>
+      </div>
+    </header>
+
+    <!-- ============ TECH STACK ============ -->
+    <section>
+      <h2>Tech Stack</h2>
+      <div class="grid-3">
+        <div class="card">
+          <h3><span class="swatch blue"></span> Frontend</h3>
+          <p class="tag">client/ · Vite dev server on port 3000</p>
+          <ul>
+            <li><span class="k">Vue 3</span><span class="v">^3.4 · Composition API</span></li>
+            <li><span class="k">Vue Router</span><span class="v">^4.3 · web history</span></li>
+            <li><span class="k">Axios</span><span class="v">^1.6 · HTTP client</span></li>
+            <li><span class="k">Vite</span><span class="v">^5.2 · build / dev</span></li>
+            <li><span class="k">i18n</span><span class="v">custom · en / ja</span></li>
+          </ul>
+        </div>
+        <div class="card">
+          <h3><span class="swatch green"></span> Backend</h3>
+          <p class="tag">server/ · Uvicorn on port 8001</p>
+          <ul>
+            <li><span class="k">FastAPI</span><span class="v">^0.110 · REST</span></li>
+            <li><span class="k">Uvicorn</span><span class="v">^0.24 · ASGI server</span></li>
+            <li><span class="k">Pydantic</span><span class="v">v2 · validation</span></li>
+            <li><span class="k">CORS</span><span class="v">allow-all (dev)</span></li>
+            <li><span class="k">Python</span><span class="v">&ge; 3.11 · uv</span></li>
+          </ul>
+        </div>
+        <div class="card">
+          <h3><span class="swatch amber"></span> Data</h3>
+          <p class="tag">server/data/ · loaded at startup</p>
+          <ul>
+            <li><span class="k">inventory.json</span><span class="v">stock items</span></li>
+            <li><span class="k">orders.json</span><span class="v">12 mo. of orders</span></li>
+            <li><span class="k">demand_forecasts</span><span class="v">trends</span></li>
+            <li><span class="k">backlog / spending</span><span class="v">+ transactions</span></li>
+            <li><span class="k">Store</span><span class="v">in-memory lists</span></li>
+          </ul>
+        </div>
+      </div>
+    </section>
+
+    <!-- ============ ARCHITECTURE STACK ============ -->
+    <section>
+      <h2>System Architecture</h2>
+      <div class="stack">
+
+        <div class="layer">
+          <div class="layer-head">
+            <span class="layer-badge badge-client">Client · Vue 3 SPA</span>
+            <h3>Browser — Single-Page Application</h3>
+            <span class="sub">client/src</span>
+          </div>
+          <div class="chips">
+            <span class="chip">App.vue <small>· shell: nav + FilterBar + router-view</small></span>
+            <span class="chip">Views <small>· Dashboard, Inventory, Orders, Demand, Spending, Reports</small></span>
+            <span class="chip">Components <small>· FilterBar, detail modals, ProfileMenu</small></span>
+            <span class="chip">Composables <small>· useFilters, useAuth, useI18n</small></span>
+            <span class="chip">Router <small>· 6 client-side routes</small></span>
+          </div>
+        </div>
+
+        <div class="layer">
+          <div class="layer-head">
+            <span class="layer-badge badge-http">HTTP · Axios</span>
+            <h3>API Client &amp; Transport</h3>
+            <span class="sub">client/src/api.js</span>
+          </div>
+          <div class="chips">
+            <span class="chip">Centralized <code>api</code> object <small>· one method per endpoint</small></span>
+            <span class="chip">Base URL <small>· http://localhost:8001/api</small></span>
+            <span class="chip">Builds <code>URLSearchParams</code> <small>· skips 'all' filters</small></span>
+            <span class="chip">CORS <small>· cross-origin :3000 → :8001</small></span>
+          </div>
+        </div>
+
+        <div class="layer">
+          <div class="layer-head">
+            <span class="layer-badge badge-api">API · FastAPI</span>
+            <h3>REST Service &amp; Business Logic</h3>
+            <span class="sub">server/main.py</span>
+          </div>
+          <div class="chips">
+            <span class="chip">Route handlers <small>· /api/inventory, /orders, /dashboard, /spending, /reports…</small></span>
+            <span class="chip">Pydantic models <small>· response validation via response_model</small></span>
+            <span class="chip">apply_filters() <small>· warehouse / category / status</small></span>
+            <span class="chip">filter_by_month() <small>· month + quarter mapping</small></span>
+            <span class="chip">Aggregation <small>· summary, quarterly &amp; monthly trends</small></span>
+          </div>
+        </div>
+
+        <div class="layer">
+          <div class="layer-head">
+            <span class="layer-badge badge-data">Data · In-Memory</span>
+            <h3>Mock Data Layer</h3>
+            <span class="sub">server/mock_data.py · server/data/*.json</span>
+          </div>
+          <div class="chips">
+            <span class="chip">load_json_file() <small>· reads JSON at startup</small></span>
+            <span class="chip">Module-level lists <small>· inventory_items, orders, …</small></span>
+            <span class="chip">No database <small>· changes don't persist; restart reloads</small></span>
+          </div>
+        </div>
+
+      </div>
+    </section>
+
+    <!-- ============ DATA FLOW ============ -->
+    <section>
+      <h2>Data Flow — Request Lifecycle</h2>
+      <div class="flow">
+        <div class="step">
+          <div class="num">1</div>
+          <div>
+            <h4>User interacts / changes a filter</h4>
+            <p>The shared <code>FilterBar</code> updates singleton refs in <code>useFilters</code>
+               (Time Period, Warehouse, Category, Order Status).</p>
+          </div>
+        </div>
+        <div class="step">
+          <div class="num">2</div>
+          <div>
+            <h4>View requests data</h4>
+            <p>A view (e.g. <code>Dashboard.vue</code>) calls <code>getCurrentFilters()</code> and passes
+               the filter object to the matching <code>api.js</code> method.</p>
+          </div>
+        </div>
+        <div class="step">
+          <div class="num">3</div>
+          <div>
+            <h4>Axios sends an HTTP GET</h4>
+            <p>Non-"all" filters become query params — e.g.
+               <code>GET /api/orders?warehouse=San%20Francisco&amp;month=Q3-2025</code>.</p>
+          </div>
+        </div>
+        <div class="step">
+          <div class="num">4</div>
+          <div>
+            <h4>FastAPI filters in memory</h4>
+            <p>The route runs <code>apply_filters()</code> then <code>filter_by_month()</code> over the
+               in-memory lists — filtering on copies, never mutating the source data.</p>
+          </div>
+        </div>
+        <div class="step">
+          <div class="num">5</div>
+          <div>
+            <h4>Pydantic validates the response</h4>
+            <p>Results are validated against a <code>response_model</code> (e.g. <code>List[Order]</code>)
+               and serialized to JSON.</p>
+          </div>
+        </div>
+        <div class="step return">
+          <div class="num">6</div>
+          <div>
+            <h4>UI reacts</h4>
+            <p>Axios resolves the JSON into the view's refs; <code>computed</code> properties derive metrics
+               and charts, and Vue re-renders the template.</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- ============ ENDPOINTS + FILTERS ============ -->
+    <section>
+      <h2>API Surface &amp; Filter Model</h2>
+      <div class="two-col">
+        <table>
+          <thead>
+            <tr><th>Method</th><th>Endpoint</th><th>Filters</th></tr>
+          </thead>
+          <tbody>
+            <tr><td><span class="method">GET</span></td><td><code>/api/inventory</code></td><td>warehouse, category</td></tr>
+            <tr><td><span class="method">GET</span></td><td><code>/api/inventory/{id}</code></td><td>—</td></tr>
+            <tr><td><span class="method">GET</span></td><td><code>/api/orders</code></td><td>warehouse, category, status, month</td></tr>
+            <tr><td><span class="method">GET</span></td><td><code>/api/orders/{id}</code></td><td>—</td></tr>
+            <tr><td><span class="method">GET</span></td><td><code>/api/demand</code></td><td>—</td></tr>
+            <tr><td><span class="method">GET</span></td><td><code>/api/backlog</code></td><td>— (adds PO flag)</td></tr>
+            <tr><td><span class="method">GET</span></td><td><code>/api/dashboard/summary</code></td><td>all four</td></tr>
+            <tr><td><span class="method">GET</span></td><td><code>/api/spending/*</code></td><td>summary · monthly · categories · transactions</td></tr>
+            <tr><td><span class="method">GET</span></td><td><code>/api/reports/*</code></td><td>quarterly · monthly-trends</td></tr>
+          </tbody>
+        </table>
+
+        <div class="filter-card">
+          <h3>Four global filters</h3>
+          <p class="tag" style="color:var(--muted);font-size:13px;margin:-8px 0 14px;">
+            UI state (client) maps to API query params (server):</p>
+          <div class="filter-map">
+            <div class="fmap"><span class="from">Time Period</span><span class="arrow">→</span>
+              <span class="to"><code>month</code> · 2025-07 or Q3-2025</span></div>
+            <div class="fmap"><span class="from">Warehouse</span><span class="arrow">→</span>
+              <span class="to"><code>warehouse</code></span></div>
+            <div class="fmap"><span class="from">Category</span><span class="arrow">→</span>
+              <span class="to"><code>category</code></span></div>
+            <div class="fmap"><span class="from">Order Status</span><span class="arrow">→</span>
+              <span class="to"><code>status</code></span></div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- ============ NOTES ============ -->
+    <section>
+      <h2>Notes</h2>
+      <div class="note">
+        <strong>Demo application.</strong> Data is mock and held in memory — there is no database,
+        authentication, or persistence, and CORS is open to all origins. A few endpoints referenced by the
+        frontend client (<code>/api/tasks</code>, <code>/api/purchase-orders</code>) are not yet implemented
+        in the backend — an intentional gap in this workshop exercise. Not production-ready without a
+        database, auth, and input hardening.
+      </div>
+    </section>
+
+    <footer class="page">
+      Factory Inventory Management System · architecture overview ·
+      generated from source in <code>client/</code> and <code>server/</code>.
+    </footer>
+
+  </div>
+</body>
+</html>
diff --git a/server/main.py b/server/main.py
index a0c2d8c5a..9b3839f94 100644
--- a/server/main.py
+++ b/server/main.py
@@ -2,10 +2,14 @@
 from fastapi.middleware.cors import CORSMiddleware
 from typing import List, Optional
 from pydantic import BaseModel
+from datetime import datetime, timedelta
 from mock_data import inventory_items, orders, demand_forecasts, backlog_items, spending_summary, monthly_spending, category_spending, recent_transactions, purchase_orders
 
 app = FastAPI(title="Factory Inventory Management System")
 
+# Fixed delivery lead time (in days) applied to submitted restocking orders
+LEAD_TIME_DAYS = 14
+
 # Quarter mapping for date filtering
 QUARTER_MAP = {
     'Q1-2025': ['2025-01', '2025-02', '2025-03'],
@@ -120,6 +124,11 @@ class CreatePurchaseOrderRequest(BaseModel):
     expected_delivery_date: str
     notes: Optional[str] = None
 
+class CreateOrderRequest(BaseModel):
+    items: List[dict]                       # each item: {sku, name, quantity, unit_price}
+    warehouse: Optional[str] = None
+    customer: Optional[str] = "Internal Restock"
+
 # API endpoints
 @app.get("/")
 def root():
@@ -161,6 +170,36 @@ def get_order(order_id: str):
         raise HTTPException(status_code=404, detail="Order not found")
     return order
 
+@app.post("/api/orders", response_model=Order)
+def create_order(req: CreateOrderRequest):
+    """Create a new (restocking) order and append it to the in-memory orders list.
+
+    Used by the Restocking tab. The order is stamped with status 'Submitted' and a
+    fixed 14-day delivery lead time. Data is in-memory only, so it persists for the
+    server session and resets on restart.
+    """
+    now = datetime.now()
+    # Derive the total server-side so the client can't desync unit price and line totals
+    total = sum(item.get("quantity", 0) * item.get("unit_price", 0) for item in req.items)
+    # Sequence submitted orders independently so numbers are stable and human-readable
+    seq = sum(1 for o in orders if o.get("status") == "Submitted") + 1
+    order_number = f"RST-{now.year}-{seq:04d}"
+
+    new_order = {
+        "id": order_number,
+        "order_number": order_number,
+        "customer": req.customer,
+        "items": req.items,
+        "status": "Submitted",
+        "order_date": now.isoformat(timespec="seconds"),
+        "expected_delivery": (now + timedelta(days=LEAD_TIME_DAYS)).isoformat(timespec="seconds"),
+        "total_value": round(total, 2),
+        "warehouse": req.warehouse,
+        "category": None,
+    }
+    orders.append(new_order)
+    return new_order
+
 @app.get("/api/demand", response_model=List[DemandForecast])
 def get_demand_forecasts():
     """Get demand forecasts"""