diff --git a/.claude/agents/debugger.md b/.claude/agents/debugger.md
new file mode 100644
index 00000000..3cb1b6e1
--- /dev/null
+++ b/.claude/agents/debugger.md
@@ -0,0 +1,99 @@
+---
+name: debugger
+description: Investigates runtime errors, reads stack traces, and suggests targeted fixes
+tools: Read, Grep, Glob, Bash
+model: sonnet
+color: red
+---
+
+# Debugger Agent
+
+You are a focused runtime debugger. Your job is to diagnose errors quickly from stack traces, logs, and reproduction steps, then propose a minimal, well-justified fix. You do **not** apply fixes — you investigate and recommend.
+
+## When You Are Invoked
+
+You will typically receive one or more of:
+- A stack trace, exception message, or error log
+- A failing command (test, server start, script) to reproduce
+- A description of unexpected runtime behavior
+
+Treat the trace as the primary evidence. Read it top-to-bottom and identify the deepest frame in *project code* (not library internals) — that's usually where the bug lives.
+
+## Investigation Process
+
+1. **Parse the stack trace**
+   - Identify the exception type and message
+   - Find the first project-owned frame (skip framework/library frames unless they're the obvious culprit)
+   - Note line numbers and file paths — use `file_path:line_number` format in your report
+
+2. **Read the implicated code**
+   - Use `Read` to inspect the failing function and its callers
+   - Use `Grep` to find related call sites, definitions, and similar patterns
+   - Use `Glob` to discover related files (tests, fixtures, configs)
+
+3. **Reproduce if possible**
+   - Use `Bash` to re-run the failing command and capture fresh output
+   - For Python work in this repo, activate the venv first:
+     ```bash
+     source "/Users/mamitaso/SFC-CNS Dropbox/Mami Okura/BaseCamp_CC/inventory-management/server/.venv/bin/activate"
+     ```
+   - Check logs, environment, and recent git history (`git log -n 5 --oneline -- <file>`) for clues
+
+4. **Form a hypothesis**
+   - State *what* is wrong and *why* it produces this trace
+   - Distinguish symptom from root cause
+   - Confirm by re-reading code or running a targeted check (e.g., `python -c "..."`, a single pytest case)
+
+5. **Recommend a fix**
+   - Smallest change that addresses the root cause
+   - Call out side effects or related call sites that may need the same fix
+   - Suggest a regression test if one is missing
+
+## Common Bug Categories To Check
+
+- **`AttributeError` / `TypeError`** — wrong type passed, `None` where object expected, missing field after data-model change
+- **`KeyError` / `IndexError`** — missing dict key, empty list, off-by-one
+- **Pydantic `ValidationError`** — JSON shape drifted from the model (see `server/mock_data.py` and `server/data/*.json`)
+- **Vue reactivity issues** — mutating a non-reactive object, missing `.value` on a ref, derived state placed in a ref instead of `computed`
+- **HTTP 4xx/5xx** — query-param parsing, missing filter handling, mismatched route
+- **Async/await** — unawaited coroutine, mixing sync and async, event-loop blocking
+
+## Report Format
+
+```markdown
+# Debug Report: [Short summary of the error]
+
+**Error**: `<ExceptionType: message>`
+**Location**: `path/to/file.py:42` (deepest project frame)
+**Reproduced**: ✅ Yes / ❌ No / ⏭ Skipped
+
+## Root Cause
+[One paragraph: what the code does, why it fails, what assumption is violated]
+
+## Evidence
+- `path/to/file.py:42` — [what this line does and why it's wrong]
+- `path/to/other.py:17` — [related call site / contributing factor]
+- (commands run, key output snippets)
+
+## Recommended Fix
+[Specific change, ideally a minimal diff sketch]
+
+```python
+# before
+foo[key]
+# after
+foo.get(key, default)
+```
+
+## Related Risks
+- [Other call sites that share the bug]
+- [Missing test that would have caught this]
+```
+
+## Key Rules
+
+- **Evidence-first** — quote the actual trace and file contents; don't speculate without reading the code
+- **Find the root cause, not just the symptom** — wrapping in try/except is rarely the answer
+- **Stay minimal** — propose the smallest fix that holds; flag larger refactors as follow-ups
+- **Don't apply changes** — you investigate and recommend; the caller decides and edits
+- **Be specific** — `file:line` references, concrete commands, exact error strings
diff --git a/.claude/settings.json b/.claude/settings.json
new file mode 100644
index 00000000..397ce34f
--- /dev/null
+++ b/.claude/settings.json
@@ -0,0 +1,5 @@
+{
+  "enabledPlugins": {
+    "epcc-workflow@aws-claude-code-plugins": true
+  }
+}
diff --git a/.claude/skills/vue-optimize/SKILL.md b/.claude/skills/vue-optimize/SKILL.md
new file mode 100644
index 00000000..eb20ffac
--- /dev/null
+++ b/.claude/skills/vue-optimize/SKILL.md
@@ -0,0 +1,264 @@
+---
+name: vue-optimize
+description: Analyze Vue 3 component structure and surface optimization opportunities across performance, code reuse, reactivity pitfalls, and accessibility/semantics. Use when the user asks to "optimize", "review", "audit", or "analyze" one or more .vue files. Outputs a single structured JSON report — no file edits.
+---
+
+# Vue Component Optimization Analyzer
+
+This skill audits Vue 3 Single File Components (`.vue`) and returns a **single JSON object** describing optimization opportunities. It never modifies files — the report is consumed by a human or downstream tooling.
+
+## Invocation
+
+The skill takes one positional argument: a path to a `.vue` file or a directory.
+
+```
+/vue-optimize client/src/views/InventoryView.vue
+/vue-optimize client/src/views/
+/vue-optimize client/src/components/
+```
+
+**Argument resolution:**
+1. If the path is a file ending in `.vue`, analyze just that file.
+2. If the path is a directory, recursively find all `.vue` files (`**/*.vue`), excluding `node_modules/` and `dist/`.
+3. If no argument is supplied, return an error finding with `id: "INPUT-001"` rather than guessing — do not scan the whole repo by default.
+4. Paths are relative to the project root (the current working directory at invocation).
+
+## Process
+
+For each `.vue` file in scope:
+
+1. **Read the file** via the Read tool.
+2. **Split into sections**: `<template>`, `<script>` (and `<script setup>`), and `<style>`. Many checks are section-specific.
+3. **Run every check** in the four categories below. Record the matching line number (1-indexed, file-relative) and a short snippet (≤120 chars, single line, trim whitespace).
+4. **Emit one finding per match.** If the same issue appears N times in a file, emit N findings — do not dedupe within a file.
+5. **Cross-file checks** (`REUSE-*`) run after all files are read.
+
+After scanning, output the JSON report as the **final assistant message body**, wrapped in a single ` ```json ` fenced code block. No prose before or after the block — downstream consumers parse the block directly.
+
+## Output Schema
+
+```json
+{
+  "schema_version": "1.0",
+  "scanned_at": "ISO-8601 UTC timestamp",
+  "target": "the argument path as given",
+  "files_analyzed": <int>,
+  "summary": {
+    "total_findings": <int>,
+    "by_severity": { "high": <int>, "medium": <int>, "low": <int> },
+    "by_category": {
+      "performance": <int>,
+      "reuse": <int>,
+      "reactivity": <int>,
+      "accessibility": <int>
+    }
+  },
+  "findings": [
+    {
+      "id": "<CATEGORY>-<NNN>",
+      "category": "performance|reuse|reactivity|accessibility",
+      "severity": "high|medium|low",
+      "file": "<path relative to repo root>",
+      "line": <int, or null for cross-file findings>,
+      "snippet": "<≤120 chars, single line>",
+      "issue": "<one sentence — what was detected>",
+      "why": "<one sentence — why it matters>",
+      "suggestion": "<one sentence — what to do>",
+      "fix_example": "<short code fragment, optional, may be null>"
+    }
+  ]
+}
+```
+
+**Ordering:** sort `findings` by `(file, line, id)`. Cross-file findings (no `line`) sort last per file.
+
+**Severity calibration:**
+- `high` — correctness or runtime-crash risk (prop mutation, date parsing without validation, missing `.value` causing a string-typed bug).
+- `medium` — measurable perf cost or accessibility blocker (index keys on long lists, missing `alt`, missing form labels).
+- `low` — style / maintainability (suggested composable extraction, v-if vs v-show on rarely-toggled content).
+
+## Checks
+
+Each check below lists the `id`, default severity, the section it scans, the detection heuristic, and the human-facing message. **The id and message wording are normative — use them verbatim** so reports stay diff-able across runs.
+
+### Performance (`PERF-*`)
+
+| ID | Severity | Section | Detection | Message |
+|---|---|---|---|---|
+| `PERF-001` | medium | template | `v-for="(<x>, <idx>) in <list>"` where `:key="<idx>"` references the index variable | "v-for uses the array index as :key, which causes incorrect DOM reuse on reorder." |
+| `PERF-002` | medium | template | An expression in a `{{ … }}` interpolation or attribute binding calls a method (`foo()`) whose name starts with `format`, `compute`, `calculate`, `get`, `filter`, `sort`, `map`, `reduce` and the same call appears on ≥3 elements in the same template | "Repeated method call in template — extract to a computed property so the result is cached." |
+| `PERF-003` | low | template | `v-if` on an element with an event/state binding suggesting frequent toggle (e.g., sibling has `@click="show…"`, `@toggle`, `:class` switching on the same ref) | "Element toggles frequently — prefer v-show to avoid mount/unmount cost." |
+| `PERF-004` | medium | template | Prop binding with an inline object/array literal: `:foo="{ … }"` or `:foo="[ … ]"` containing >1 property/element | "Inline object/array literal creates a new reference each render, defeating child memoization. Hoist to a computed." |
+| `PERF-005` | medium | template | Chained array transform inside a template expression: any of `.filter(`, `.map(`, `.sort(`, `.reduce(` appearing inside `{{ }}`, `:attr=""`, or `v-for="… in …"` | "Array transform runs on every render. Move to a computed property." |
+| `PERF-006` | medium | script | `watch(` or `watchEffect(` whose callback contains `axios.`, `fetch(`, or `api.` and no `{ debounce` / `useDebouncedRef` / `debouncedWatch` nearby (within 5 lines) | "Watcher fires an API call without debouncing — rapid input changes will flood the network." |
+| `PERF-007` | medium | script | `JSON.parse(JSON.stringify(` applied to a variable that also appears in a `ref(`/`reactive(`/`computed(` declaration | "Deep-cloning reactive data via JSON round-trip is slow and loses non-JSON values; use structuredClone or remap explicitly." |
+
+### Code Reuse (`REUSE-*`)
+
+These are cross-file. Run after all files have been read.
+
+| ID | Severity | Detection | Message |
+|---|---|---|---|
+| `REUSE-001` | low | The same load pattern (`loading = ref(true)` + `try { … = await api.<X> } catch { … } finally { loading = false }`) appears in ≥3 files | "Duplicate async-load scaffolding across components — extract a `useAsyncData` composable." |
+| `REUSE-002` | low | Two or more files declare a function with the same name (`formatCurrency`, `formatDate`, `formatMonth`, `priorityColor`, etc.) and structurally similar bodies (≥80% line overlap) | "Duplicate helper function — move to `composables/` or `utils/`." |
+| `REUSE-003` | low | The same multi-line `computed(() => …)` body (≥4 lines) appears in ≥2 files | "Duplicate computed logic — extract a composable." |
+| `REUSE-004` | low | A `<template>` block of ≥15 contiguous lines is byte-identical (after trimming) between two files | "Identical template block in multiple files — extract a shared component." |
+
+For cross-file findings, set `line: null` and put the duplicated symbol/snippet in `snippet`. List one finding per *group* of duplicated occurrences, and enumerate each location in a `locations` array on that finding (extension to the schema, only allowed on `REUSE-*`).
+
+### Reactivity Pitfalls (`REACT-*`)
+
+| ID | Severity | Section | Detection | Message |
+|---|---|---|---|---|
+| `REACT-001` | high | script | Inside `setup(props` (or `setup(props,`), a destructuring assignment `const { … } = props` or `let { … } = props` | "Destructuring props in setup() breaks reactivity — use toRefs(props) or access props.<name> directly." |
+| `REACT-002` | high | script | A line that calls `.value` on something declared via `computed(`, OR a line that *assigns* to a name declared via `ref(` without `.value` (e.g., `count = 5` where `const count = ref(0)` exists in the same file) | "Reactive access pattern is wrong — refs need `.value` in script, and computed values are read-only." |
+| `REACT-003` | high | script | An assignment whose left-hand side matches `props.<name>` or `props.<name>.<sub>` | "Direct prop mutation — emit an event to the parent instead." |
+| `REACT-004` | high | script | `new Date(<expr>)` followed within 3 lines by `.getMonth(`, `.getFullYear(`, `.getDate(`, `.toISOString(`, or `.toLocaleDateString(` without an intervening `isNaN(` / `Number.isNaN(` check on the parsed date | "Date parsed from external data without validation — `Invalid Date` will throw or yield NaN." |
+| `REACT-005` | high | script | An assignment whose left-hand side names a `computed(` declaration in the same file | "Mutating a computed property — computed values are derived, not stored. Change the source ref instead." |
+| `REACT-006` | low | script | `watch(<bareIdentifier>, …)` where `<bareIdentifier>` is not declared via `ref(`, `reactive(`, `computed(`, or `toRef(` in the same file (i.e., a plain value) | "watch source is not reactive — the callback will never fire. Wrap in `() => …` or use a ref." |
+
+### Accessibility / Semantics (`A11Y-*`)
+
+| ID | Severity | Section | Detection | Message |
+|---|---|---|---|---|
+| `A11Y-001` | medium | template | `<button …>` whose body is empty/whitespace-only AND has no `aria-label` / `:aria-label` / `title` attribute | "Button has no accessible name — add visible text, aria-label, or title." |
+| `A11Y-002` | medium | template | `<img …>` without an `alt=` attribute (decorative images should use `alt=""`) | "Image is missing an alt attribute — provide alt text or `alt=\"\"` for decorative images." |
+| `A11Y-003` | medium | template | `<a …>` without `href` / `:href` / `:to` / `to` attribute, with an `@click` handler | "Anchor used as a button — use `<button>` so it's keyboard-activatable and announced correctly." |
+| `A11Y-004` | medium | template | `<input …>` (excluding `type="hidden"`, `type="submit"`, `type="button"`) not preceded within 3 lines by a `<label>` with matching `for=` to the input's `id=`, AND no `aria-label` / `aria-labelledby` on the input | "Form input has no associated label." |
+| `A11Y-005` | medium | template | `<div …>` or `<span …>` with `@click=` / `v-on:click=` and no `role=` attribute and no `@keydown` / `@keyup` / `@keypress` handler | "Clickable non-interactive element — add role=\"button\", tabindex=\"0\", and a keyboard handler, or use <button>." |
+| `A11Y-006` | low | template | A `<th>` element inside a `<table>` without a `scope=` attribute, when the table has both header rows and data rows | "<th> missing scope attribute — assistive tech needs scope=\"col\" or scope=\"row\" to associate headers." |
+
+## False-Positive Discipline
+
+These heuristics are intentionally textual and will mis-fire occasionally. Two rules:
+
+1. **Never edit the file based on a finding.** This skill reports only.
+2. **If a check requires ambiguous semantic judgement** (e.g., is this list "long"?), include the finding but set severity one level lower than the table specifies. Better to over-report at low severity than to silently drop a real issue.
+
+## Worked Example
+
+For `client/src/components/Demo.vue`:
+
+```vue
+<template>
+  <div v-for="(item, i) in items" :key="i">
+    {{ formatCurrency(item.price) }}
+  </div>
+  <img src="/logo.png" />
+  <button @click="save"></button>
+</template>
+
+<script>
+import { ref, watch } from 'vue'
+import { api } from '@/api'
+
+export default {
+  setup(props) {
+    const { user } = props
+    const items = ref([])
+    const total = computed(() => items.value.reduce((s, i) => s + i.price, 0))
+    total.value = 0
+    watch(items, async () => { await api.search() })
+    return { items, total }
+  }
+}
+</script>
+```
+
+Expected report (abridged):
+
+```json
+{
+  "schema_version": "1.0",
+  "scanned_at": "2026-05-19T18:00:00Z",
+  "target": "client/src/components/Demo.vue",
+  "files_analyzed": 1,
+  "summary": {
+    "total_findings": 6,
+    "by_severity": { "high": 3, "medium": 3, "low": 0 },
+    "by_category": { "performance": 1, "reuse": 0, "reactivity": 3, "accessibility": 2 }
+  },
+  "findings": [
+    {
+      "id": "PERF-001", "category": "performance", "severity": "medium",
+      "file": "client/src/components/Demo.vue", "line": 2,
+      "snippet": "<div v-for=\"(item, i) in items\" :key=\"i\">",
+      "issue": "v-for uses the array index as :key, which causes incorrect DOM reuse on reorder.",
+      "why": "Vue keys identify which DOM node belongs to which item; using the index ties a node to a position, not an item, so state desyncs on reorder/insert.",
+      "suggestion": "Use a stable unique identifier from the item.",
+      "fix_example": ":key=\"item.id\""
+    },
+    {
+      "id": "A11Y-001", "category": "accessibility", "severity": "medium",
+      "file": "client/src/components/Demo.vue", "line": 6,
+      "snippet": "<button @click=\"save\"></button>",
+      "issue": "Button has no accessible name — add visible text, aria-label, or title.",
+      "why": "Screen readers announce only the accessible name; an empty button is announced as \"button\" with no purpose.",
+      "suggestion": "Add visible text or aria-label.",
+      "fix_example": "<button @click=\"save\" aria-label=\"Save\">Save</button>"
+    },
+    {
+      "id": "A11Y-002", "category": "accessibility", "severity": "medium",
+      "file": "client/src/components/Demo.vue", "line": 5,
+      "snippet": "<img src=\"/logo.png\" />",
+      "issue": "Image is missing an alt attribute — provide alt text or alt=\"\" for decorative images.",
+      "why": "Without alt, screen readers fall back to the file path.",
+      "suggestion": "Add alt text describing the image, or alt=\"\" if purely decorative.",
+      "fix_example": "<img src=\"/logo.png\" alt=\"Company logo\" />"
+    },
+    {
+      "id": "REACT-001", "category": "reactivity", "severity": "high",
+      "file": "client/src/components/Demo.vue", "line": 14,
+      "snippet": "const { user } = props",
+      "issue": "Destructuring props in setup() breaks reactivity — use toRefs(props) or access props.<name> directly.",
+      "why": "Destructuring captures the current value; future prop updates won't propagate to the local binding.",
+      "suggestion": "Replace with `const { user } = toRefs(props)` or read `props.user` lazily.",
+      "fix_example": "const { user } = toRefs(props)"
+    },
+    {
+      "id": "REACT-005", "category": "reactivity", "severity": "high",
+      "file": "client/src/components/Demo.vue", "line": 17,
+      "snippet": "total.value = 0",
+      "issue": "Mutating a computed property — computed values are derived, not stored.",
+      "why": "Computed values are read-only; assignment is a no-op (and a runtime warning in dev).",
+      "suggestion": "Change the source ref (`items`) instead, or convert `total` to a `ref` if it really needs to be writable.",
+      "fix_example": null
+    },
+    {
+      "id": "PERF-006", "category": "performance", "severity": "medium",
+      "file": "client/src/components/Demo.vue", "line": 18,
+      "snippet": "watch(items, async () => { await api.search() })",
+      "issue": "Watcher fires an API call without debouncing — rapid input changes will flood the network.",
+      "why": "Each items mutation triggers an immediate request; bursts of changes cause request storms.",
+      "suggestion": "Use `watchDebounced` from @vueuse/core, or guard with a manual timer.",
+      "fix_example": "watchDebounced(items, async () => { await api.search() }, { debounce: 300 })"
+    }
+  ]
+}
+```
+
+## Errors
+
+If the path doesn't exist or contains no `.vue` files, return a report with `files_analyzed: 0` and a single finding:
+
+```json
+{
+  "id": "INPUT-001", "category": "performance", "severity": "low",
+  "file": "<the path>", "line": null,
+  "snippet": "",
+  "issue": "No .vue files found at the given path.",
+  "why": "The skill needs a .vue file or a directory containing them.",
+  "suggestion": "Pass a path like `client/src/views/` or a specific `.vue` file.",
+  "fix_example": null
+}
+```
+
+(The `category` here is a placeholder — `INPUT-001` is the only allowed id outside the four real categories.)
+
+## Quick Reference
+
+- **One argument required**: file path or directory path, relative to repo root.
+- **Output**: single fenced ```json``` block as the final assistant message — nothing else.
+- **No edits**: report only; user applies fixes themselves.
+- **Verbatim messages**: use the `issue` wording from the tables above so diffs across runs stay clean.
+- **Ordering**: findings sorted by `(file, line, id)`; cross-file findings last.
diff --git a/client/package-lock.json b/client/package-lock.json
index d13e6e77..22f052b0 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -14,6 +14,7 @@
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^5.0.4",
+        "prettier": "^3.8.3",
         "vite": "^5.2.0"
       }
     },
@@ -1307,6 +1308,22 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.8.3",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.8.3.tgz",
+      "integrity": "sha512-7igPTM53cGHMW8xWuVTydi2KO233VFiTNyF5hLJqpilHfmn8C8gPf+PS7dUT64YcXFbiMGZxS9pCSxL/Dxm/Jw==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
diff --git a/client/package.json b/client/package.json
index 58375dc8..2a675859 100644
--- a/client/package.json
+++ b/client/package.json
@@ -8,12 +8,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^1.6.7",
     "vue": "^3.4.21",
-    "vue-router": "^4.3.0",
-    "axios": "^1.6.7"
+    "vue-router": "^4.3.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",
+    "prettier": "^3.8.3",
     "vite": "^5.2.0"
   }
 }
diff --git a/client/src/App.vue b/client/src/App.vue
index c2da05a5..dd6849b1 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' }">
+            {{ t('nav.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 11cb9db7..23bf99a4 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 getSubmittedOrders() {
+    const response = await axios.get(`${API_BASE_URL}/submitted-orders`)
+    return response.data
+  },
+
+  async createSubmittedOrder(payload) {
+    const response = await axios.post(`${API_BASE_URL}/submitted-orders`, payload)
+    return response.data
   }
 }
diff --git a/client/src/locales/en.js b/client/src/locales/en.js
index 03a58fe6..9055f7b9 100644
--- a/client/src/locales/en.js
+++ b/client/src/locales/en.js
@@ -6,6 +6,7 @@ export default {
     orders: 'Orders',
     finance: 'Finance',
     demandForecast: 'Demand Forecast',
+    restocking: 'Restocking',
     companyName: 'Catalyst Components',
     subtitle: 'Inventory Management System'
   },
@@ -106,6 +107,10 @@ export default {
     title: 'Orders',
     description: 'View and manage customer orders',
     allOrders: 'All Orders',
+    submittedSection: 'Submitted Orders',
+    submittedDate: 'Submitted',
+    leadTime: 'Lead Time',
+    leadTimeDays: '{days} days',
     totalOrders: 'Total Orders',
     totalRevenue: 'Total Revenue',
     avgOrderValue: 'Avg Order Value',
@@ -129,6 +134,40 @@ export default {
     }
   },
 
+  // Restocking
+  restocking: {
+    title: 'Restocking',
+    description: 'Set a budget and submit a restocking order built from inventory shortfalls and forecasted demand.',
+    budgetCard: {
+      title: 'Available Budget',
+      help: 'Move the slider to set how much you want to spend. Items are auto-selected by priority.',
+      selected: 'Selected total',
+      itemsSelected: '{count} items selected',
+      utilization: 'Budget used',
+      noCandidates: 'No items below their reorder point. Lower thresholds or restock later.'
+    },
+    table: {
+      title: 'Recommended Items',
+      sku: 'SKU',
+      name: 'Item',
+      warehouse: 'Warehouse',
+      currentStock: 'On Hand',
+      reorderPoint: 'Reorder Point',
+      trending: 'Trending',
+      qty: 'Restock Qty',
+      unitCost: 'Unit Cost',
+      subtotal: 'Subtotal',
+      leadTime: 'Lead Time'
+    },
+    trendingBadge: 'Trending',
+    skippedLabel: 'Over budget',
+    placeOrder: 'Place Order',
+    placing: 'Placing order...',
+    successToast: 'Order {orderNumber} submitted. Expected by {expected}.',
+    errorToast: 'Could not submit order. Please try again.',
+    viewInOrders: 'View in Orders'
+  },
+
   // Finance/Spending
   finance: {
     title: 'Finance Dashboard',
diff --git a/client/src/locales/ja.js b/client/src/locales/ja.js
index db33223a..0e2ffc8a 100644
--- a/client/src/locales/ja.js
+++ b/client/src/locales/ja.js
@@ -6,6 +6,7 @@ export default {
     orders: '注文',
     finance: '財務',
     demandForecast: '需要予測',
+    restocking: '補充発注',
     companyName: '触媒コンポーネンツ',
     subtitle: '在庫管理システム'
   },
@@ -106,6 +107,10 @@ export default {
     title: '注文',
     description: '顧客注文の表示と管理',
     allOrders: 'すべての注文',
+    submittedSection: '送信済み発注',
+    submittedDate: '送信日',
+    leadTime: 'リードタイム',
+    leadTimeDays: '{days}日',
     totalOrders: '総注文数',
     totalRevenue: '総収益',
     avgOrderValue: '平均注文額',
@@ -129,6 +134,40 @@ export default {
     }
   },
 
+  // Restocking
+  restocking: {
+    title: '補充発注',
+    description: '予算を設定し、在庫不足と需要予測に基づいた補充注文を送信します。',
+    budgetCard: {
+      title: '利用可能予算',
+      help: 'スライダーで予算を設定すると、優先度の高い品目から自動で選択されます。',
+      selected: '選択合計',
+      itemsSelected: '{count}件選択中',
+      utilization: '予算使用率',
+      noCandidates: '再注文点を下回る品目はありません。後で再度ご確認ください。'
+    },
+    table: {
+      title: '推奨品目',
+      sku: 'SKU',
+      name: '品目',
+      warehouse: '倉庫',
+      currentStock: '手持在庫',
+      reorderPoint: '再注文点',
+      trending: 'トレンド',
+      qty: '補充数量',
+      unitCost: '単価',
+      subtotal: '小計',
+      leadTime: 'リードタイム'
+    },
+    trendingBadge: '需要増',
+    skippedLabel: '予算超過',
+    placeOrder: '発注する',
+    placing: '送信中...',
+    successToast: '注文 {orderNumber} を送信しました。納期予定: {expected}',
+    errorToast: '発注に失敗しました。再度お試しください。',
+    viewInOrders: '注文タブで確認'
+  },
+
   // Finance/Spending
   finance: {
     title: '財務ダッシュボード',
diff --git a/client/src/main.js b/client/src/main.js
index 477c2d96..cea20394 100644
--- a/client/src/main.js
+++ b/client/src/main.js
@@ -5,6 +5,7 @@ import Dashboard from './views/Dashboard.vue'
 import Inventory from './views/Inventory.vue'
 import Orders from './views/Orders.vue'
 import Demand from './views/Demand.vue'
+import Restocking from './views/Restocking.vue'
 import Spending from './views/Spending.vue'
 import Reports from './views/Reports.vue'
 
@@ -15,6 +16,7 @@ const router = createRouter({
     { path: '/inventory', component: Inventory },
     { path: '/orders', component: Orders },
     { path: '/demand', component: Demand },
+    { path: '/restocking', component: Restocking },
     { path: '/spending', component: Spending },
     { path: '/reports', component: Reports }
   ]
diff --git a/client/src/views/Orders.vue b/client/src/views/Orders.vue
index 7413f6e6..46490e41 100644
--- a/client/src/views/Orders.vue
+++ b/client/src/views/Orders.vue
@@ -8,6 +8,55 @@
     <div v-if="loading" class="loading">{{ t('common.loading') }}</div>
     <div v-else-if="error" class="error">{{ error }}</div>
     <div v-else>
+      <div v-if="submittedOrders.length" class="card submitted-orders-card">
+        <div class="card-header">
+          <h3 class="card-title">
+            {{ t('orders.submittedSection') }}
+            <span class="count-chip">{{ submittedOrders.length }}</span>
+          </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-value">{{ t('orders.table.totalValue') }}</th>
+                <th class="col-date">{{ t('orders.submittedDate') }}</th>
+                <th class="col-date">{{ t('orders.table.expectedDelivery') }}</th>
+                <th class="col-lead">{{ t('orders.leadTime') }}</th>
+                <th class="col-status">{{ t('orders.table.status') }}</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="so in submittedOrders" :key="so.id">
+                <td class="col-order-number"><strong>{{ so.order_number }}</strong></td>
+                <td class="col-items">
+                  <details class="items-details">
+                    <summary class="items-summary">
+                      {{ t('orders.itemsCount', { count: so.items.length }) }}
+                    </summary>
+                    <div class="items-dropdown">
+                      <div v-for="(item, idx) in so.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_cost }}</span>
+                      </div>
+                    </div>
+                  </details>
+                </td>
+                <td class="col-value"><strong>{{ currencySymbol }}{{ so.total_value.toLocaleString() }}</strong></td>
+                <td class="col-date">{{ formatDate(so.submitted_date) }}</td>
+                <td class="col-date">{{ formatDate(so.expected_delivery) }}</td>
+                <td class="col-lead">{{ t('orders.leadTimeDays', { days: so.max_lead_time_days }) }}</td>
+                <td class="col-status">
+                  <span class="badge submitted">{{ so.status }}</span>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
       <div class="stats-grid">
         <div class="stat-card success">
           <div class="stat-label">{{ t('status.delivered') }}</div>
@@ -95,6 +144,7 @@ export default {
     const loading = ref(true)
     const error = ref(null)
     const orders = ref([])
+    const submittedOrders = ref([])
 
     // Use shared filters
     const {
@@ -109,7 +159,10 @@ export default {
       try {
         loading.value = true
         const filters = getCurrentFilters()
-        const fetchedOrders = await api.getOrders(filters)
+        const [fetchedOrders, fetchedSubmitted] = await Promise.all([
+          api.getOrders(filters),
+          api.getSubmittedOrders()
+        ])
 
         // Sort orders by order_date (earliest first)
         orders.value = fetchedOrders.sort((a, b) => {
@@ -117,6 +170,7 @@ export default {
           const dateB = new Date(b.order_date)
           return dateA - dateB
         })
+        submittedOrders.value = fetchedSubmitted
       } catch (err) {
         error.value = 'Failed to load orders: ' + err.message
       } finally {
@@ -160,6 +214,7 @@ export default {
       loading,
       error,
       orders,
+      submittedOrders,
       getOrdersByStatus,
       getOrderStatusClass,
       formatDate,
@@ -276,4 +331,25 @@ export default {
   font-size: 0.813rem;
   color: #64748b;
 }
+
+.submitted-orders-card { margin-bottom: 1.5rem; }
+
+.count-chip {
+  display: inline-block;
+  margin-left: 0.5rem;
+  padding: 0.125rem 0.625rem;
+  background: #e0e7ff;
+  color: #3730a3;
+  border-radius: 999px;
+  font-size: 0.75rem;
+  font-weight: 700;
+  vertical-align: middle;
+}
+
+.col-lead { width: 110px; }
+
+.badge.submitted {
+  background: #e0e7ff;
+  color: #3730a3;
+}
 </style>
diff --git a/client/src/views/Restocking.vue b/client/src/views/Restocking.vue
new file mode 100644
index 00000000..da043eaa
--- /dev/null
+++ b/client/src/views/Restocking.vue
@@ -0,0 +1,535 @@
+<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>
+
+      <!-- Toast notifications -->
+      <div v-if="successMessage" class="toast toast-success">
+        <span>{{ successMessage }}</span>
+        <button @click="goToOrders" class="toast-link">{{ t('restocking.viewInOrders') }} &rarr;</button>
+      </div>
+      <div v-if="errorMessage" class="toast toast-error">{{ errorMessage }}</div>
+
+      <!-- Budget card -->
+      <div class="card budget-card">
+        <div class="card-header">
+          <h3 class="card-title">{{ t('restocking.budgetCard.title') }}</h3>
+        </div>
+
+        <p class="budget-help">{{ t('restocking.budgetCard.help') }}</p>
+
+        <div class="budget-row">
+          <div class="budget-figure">
+            <span class="budget-amount">{{ formattedBudget }}</span>
+            <span class="budget-ceiling">/ {{ formattedCeiling }}</span>
+          </div>
+          <input
+            type="range"
+            class="budget-slider"
+            :min="0"
+            :max="budgetCeiling"
+            :step="50"
+            v-model.number="budget"
+            :disabled="!candidates.length"
+            :style="{ '--pct': sliderPct }"
+          />
+        </div>
+
+        <div class="budget-stats">
+          <div class="budget-stat">
+            <div class="stat-label">{{ t('restocking.budgetCard.selected') }}</div>
+            <div class="stat-value">{{ formattedSelected }}</div>
+          </div>
+          <div class="budget-stat">
+            <div class="stat-label">{{ t('restocking.budgetCard.itemsSelected', { count: selectedCount }) }}</div>
+            <div class="stat-progress">
+              <div class="stat-progress-bar" :style="{ width: utilizationPct + '%' }"></div>
+            </div>
+            <div class="stat-meta">{{ utilizationPct }}% {{ t('restocking.budgetCard.utilization') }}</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Recommendations table -->
+      <div class="card">
+        <div class="card-header">
+          <h3 class="card-title">{{ t('restocking.table.title') }}</h3>
+          <button
+            class="place-order-btn"
+            :disabled="!selectedCount || submitting"
+            @click="placeOrder"
+          >
+            {{ submitting ? t('restocking.placing') : t('restocking.placeOrder') }}
+          </button>
+        </div>
+
+        <div v-if="!candidates.length" class="empty-state">
+          {{ t('restocking.budgetCard.noCandidates') }}
+        </div>
+
+        <div v-else class="table-container">
+          <table>
+            <thead>
+              <tr>
+                <th>{{ t('restocking.table.sku') }}</th>
+                <th>{{ t('restocking.table.name') }}</th>
+                <th>{{ t('restocking.table.warehouse') }}</th>
+                <th>{{ t('restocking.table.currentStock') }}</th>
+                <th>{{ t('restocking.table.reorderPoint') }}</th>
+                <th>{{ t('restocking.table.trending') }}</th>
+                <th>{{ t('restocking.table.qty') }}</th>
+                <th>{{ t('restocking.table.unitCost') }}</th>
+                <th>{{ t('restocking.table.subtotal') }}</th>
+                <th>{{ t('restocking.table.leadTime') }}</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr
+                v-for="row in candidates"
+                :key="row.sku"
+                :class="{ 'row-skipped': !row.included }"
+              >
+                <td><strong>{{ row.sku }}</strong></td>
+                <td>{{ translateProductName(row.name) }}</td>
+                <td>{{ row.warehouse }}</td>
+                <td>{{ row.quantity_on_hand }}</td>
+                <td>{{ row.reorder_point }}</td>
+                <td>
+                  <span v-if="row.is_trending" class="badge increasing">
+                    {{ t('restocking.trendingBadge') }}
+                  </span>
+                  <span v-else class="muted">&mdash;</span>
+                </td>
+                <td><strong>{{ row.restock_qty }}</strong></td>
+                <td>{{ formatCurrency(row.unit_cost, currentCurrency) }}</td>
+                <td>
+                  <strong v-if="row.included">{{ formatCurrency(row.subtotal, currentCurrency) }}</strong>
+                  <span v-else class="muted">
+                    {{ formatCurrency(row.subtotal, currentCurrency) }}
+                    <span class="skipped-label">({{ t('restocking.skippedLabel') }})</span>
+                  </span>
+                </td>
+                <td>{{ t('orders.leadTimeDays', { days: row.lead_time_days }) }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, onMounted, watch, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { api } from '../api'
+import { useFilters } from '../composables/useFilters'
+import { useI18n } from '../composables/useI18n'
+import { formatCurrency } from '../utils/currency'
+
+export default {
+  name: 'Restocking',
+  setup() {
+    const router = useRouter()
+    const { t, currentCurrency, translateProductName } = useI18n()
+    const { selectedLocation, selectedCategory, getCurrentFilters } = useFilters()
+
+    const loading = ref(true)
+    const error = ref(null)
+    const submitting = ref(false)
+    const successMessage = ref(null)
+    const errorMessage = ref(null)
+
+    const inventoryItems = ref([])
+    const demandForecasts = ref([])
+    const budget = ref(0)
+
+    // ── helpers ──────────────────────────────────────────────────────────────
+
+    const formatDate = (dateString) => {
+      const { currentLocale } = useI18n()
+      const locale = currentLocale.value === 'ja' ? 'ja-JP' : 'en-US'
+      const d = new Date(dateString)
+      if (isNaN(d.getTime())) return dateString
+      return d.toLocaleDateString(locale, {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric'
+      })
+    }
+
+    // ── data loading ─────────────────────────────────────────────────────────
+
+    const loadData = async () => {
+      try {
+        loading.value = true
+        error.value = null
+        const filters = getCurrentFilters()
+
+        const [invData, demandData] = await Promise.all([
+          api.getInventory({ warehouse: filters.warehouse, category: filters.category }),
+          api.getDemandForecasts()
+        ])
+
+        inventoryItems.value = invData
+        demandForecasts.value = demandData
+      } catch (err) {
+        error.value = 'Failed to load restocking data: ' + err.message
+      } finally {
+        loading.value = false
+      }
+    }
+
+    watch([selectedLocation, selectedCategory], () => {
+      loadData()
+    })
+
+    // ── computed: demand trend map ────────────────────────────────────────────
+
+    const demandTrendBySku = computed(() => {
+      const map = new Map()
+      for (const forecast of demandForecasts.value) {
+        map.set(forecast.item_sku, forecast.trend)
+      }
+      return map
+    })
+
+    // ── computed: candidates (items below reorder point) ─────────────────────
+
+    const sortedCandidates = computed(() => {
+      const raw = inventoryItems.value
+        .filter(item => item.quantity_on_hand < item.reorder_point)
+        .map(item => {
+          const restock_qty = item.reorder_point - item.quantity_on_hand
+          const subtotal = restock_qty * item.unit_cost
+          const is_trending = demandTrendBySku.value.get(item.sku) === 'increasing'
+          const shortfall_pct = (item.reorder_point - item.quantity_on_hand) / item.reorder_point
+          return {
+            ...item,
+            restock_qty,
+            subtotal,
+            is_trending,
+            shortfall_pct
+          }
+        })
+
+      // Stable sort: trending desc, shortfall_pct desc, sku asc
+      return raw.sort((a, b) => {
+        if (b.is_trending !== a.is_trending) return b.is_trending ? 1 : -1
+        if (b.shortfall_pct !== a.shortfall_pct) return b.shortfall_pct - a.shortfall_pct
+        return a.sku.localeCompare(b.sku)
+      })
+    })
+
+    // ── computed: budget ceiling ──────────────────────────────────────────────
+
+    const budgetCeiling = computed(() => {
+      const total = sortedCandidates.value.reduce((sum, item) => sum + item.subtotal, 0)
+      if (total === 0) return 1000
+      return Math.ceil(total / 100) * 100
+    })
+
+    // ── computed: selected items (greedy fit within budget) ───────────────────
+
+    const candidates = computed(() => {
+      let remaining = budget.value
+      const result = []
+      for (const item of sortedCandidates.value) {
+        const fits = item.subtotal <= remaining
+        result.push({ ...item, included: fits })
+        if (fits) remaining -= item.subtotal
+      }
+      return result
+    })
+
+    const selectedItems = computed(() => candidates.value.filter(r => r.included))
+    const selectedTotal = computed(() => selectedItems.value.reduce((sum, r) => sum + r.subtotal, 0))
+    const selectedCount = computed(() => selectedItems.value.length)
+
+    // ── computed: slider & display ────────────────────────────────────────────
+
+    const sliderPct = computed(() => {
+      if (!budgetCeiling.value) return 0
+      return Math.round((budget.value / budgetCeiling.value) * 100)
+    })
+
+    const formattedBudget = computed(() => formatCurrency(budget.value, currentCurrency.value))
+    const formattedCeiling = computed(() => formatCurrency(budgetCeiling.value, currentCurrency.value))
+    const formattedSelected = computed(() => formatCurrency(selectedTotal.value, currentCurrency.value))
+
+    const utilizationPct = computed(() => {
+      if (!budget.value) return 0
+      return Math.round((selectedTotal.value / budget.value) * 100)
+    })
+
+    // When candidates list changes (filter update), reset budget to ceiling
+    watch(
+      () => sortedCandidates.value.length,
+      () => {
+        budget.value = budgetCeiling.value
+      }
+    )
+
+    // ── place order ───────────────────────────────────────────────────────────
+
+    const placeOrder = async () => {
+      if (!selectedItems.value.length) return
+      submitting.value = true
+      errorMessage.value = null
+      try {
+        const payload = {
+          budget: budget.value,
+          items: selectedItems.value.map(r => ({
+            sku: r.sku,
+            name: r.name,
+            quantity: r.restock_qty,
+            unit_cost: r.unit_cost,
+            lead_time_days: r.lead_time_days
+          }))
+        }
+        const created = await api.createSubmittedOrder(payload)
+        successMessage.value = t('restocking.successToast', {
+          orderNumber: created.order_number,
+          expected: formatDate(created.expected_delivery)
+        })
+      } catch (err) {
+        errorMessage.value = t('restocking.errorToast')
+      } finally {
+        submitting.value = false
+      }
+    }
+
+    const goToOrders = () => router.push('/orders')
+
+    onMounted(async () => {
+      await loadData()
+      // Set initial budget to ceiling after data loads
+      budget.value = budgetCeiling.value
+    })
+
+    return {
+      t,
+      currentCurrency,
+      translateProductName,
+      formatCurrency,
+      loading,
+      error,
+      submitting,
+      successMessage,
+      errorMessage,
+      budget,
+      budgetCeiling,
+      candidates,
+      selectedItems,
+      selectedTotal,
+      selectedCount,
+      sliderPct,
+      formattedBudget,
+      formattedCeiling,
+      formattedSelected,
+      utilizationPct,
+      placeOrder,
+      goToOrders
+    }
+  }
+}
+</script>
+
+<style scoped>
+.budget-help {
+  color: #64748b;
+  font-size: 0.875rem;
+  margin-bottom: 1.25rem;
+}
+
+.budget-row {
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.budget-figure {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem;
+  min-width: 200px;
+}
+
+.budget-amount {
+  font-size: 2rem;
+  font-weight: 700;
+  color: #0f172a;
+  letter-spacing: -0.025em;
+}
+
+.budget-ceiling {
+  font-size: 1rem;
+  color: #64748b;
+  font-weight: 500;
+}
+
+.budget-slider {
+  flex: 1;
+  -webkit-appearance: none;
+  height: 8px;
+  border-radius: 999px;
+  background: linear-gradient(
+    to right,
+    #2563eb 0%,
+    #2563eb calc(var(--pct, 0) * 1%),
+    #e2e8f0 calc(var(--pct, 0) * 1%),
+    #e2e8f0 100%
+  );
+  outline: none;
+  cursor: pointer;
+}
+
+.budget-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  background: #ffffff;
+  border: 2px solid #2563eb;
+  cursor: pointer;
+  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
+}
+
+.budget-slider::-moz-range-thumb {
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  background: #ffffff;
+  border: 2px solid #2563eb;
+  cursor: pointer;
+}
+
+.budget-slider:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.budget-stats {
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  gap: 1.5rem;
+  padding-top: 1rem;
+  border-top: 1px solid #f1f5f9;
+}
+
+.budget-stat .stat-label {
+  color: #64748b;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-weight: 600;
+  margin-bottom: 0.25rem;
+}
+
+.budget-stat .stat-value {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #0f172a;
+}
+
+.stat-progress {
+  height: 8px;
+  background: #f1f5f9;
+  border-radius: 999px;
+  overflow: hidden;
+  margin-top: 0.5rem;
+}
+
+.stat-progress-bar {
+  height: 100%;
+  background: linear-gradient(to right, #2563eb, #3b82f6);
+  transition: width 0.2s ease;
+}
+
+.stat-meta {
+  color: #64748b;
+  font-size: 0.813rem;
+  margin-top: 0.375rem;
+}
+
+.place-order-btn {
+  background: #0f172a;
+  color: #fff;
+  border: none;
+  padding: 0.625rem 1.25rem;
+  border-radius: 8px;
+  font-weight: 600;
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+
+.place-order-btn:hover:not(:disabled) {
+  background: #1e293b;
+}
+
+.place-order-btn:disabled {
+  background: #cbd5e1;
+  cursor: not-allowed;
+}
+
+.empty-state {
+  padding: 2rem;
+  text-align: center;
+  color: #64748b;
+  font-size: 0.938rem;
+}
+
+.row-skipped td {
+  opacity: 0.45;
+}
+
+.muted {
+  color: #94a3b8;
+}
+
+.skipped-label {
+  font-size: 0.75rem;
+  color: #94a3b8;
+  margin-left: 0.25rem;
+}
+
+.toast {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.875rem 1.25rem;
+  border-radius: 8px;
+  margin-bottom: 1.25rem;
+  font-size: 0.938rem;
+}
+
+.toast-success {
+  background: #d1fae5;
+  color: #065f46;
+  border: 1px solid #6ee7b7;
+}
+
+.toast-error {
+  background: #fee2e2;
+  color: #991b1b;
+  border: 1px solid #fca5a5;
+}
+
+.toast-link {
+  background: transparent;
+  border: none;
+  color: inherit;
+  font-weight: 600;
+  cursor: pointer;
+  text-decoration: underline;
+}
+</style>
diff --git a/dashboard-overview-run2.png b/dashboard-overview-run2.png
new file mode 100644
index 00000000..8dc9470e
Binary files /dev/null and b/dashboard-overview-run2.png differ
diff --git a/dashboard-overview.png b/dashboard-overview.png
new file mode 100644
index 00000000..5b053800
Binary files /dev/null and b/dashboard-overview.png differ
diff --git a/docs/architecture.html b/docs/architecture.html
new file mode 100644
index 00000000..e13faa2e
--- /dev/null
+++ b/docs/architecture.html
@@ -0,0 +1,843 @@
+<!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</title>
+<style>
+  :root {
+    --bg: #f8fafc;
+    --surface: #ffffff;
+    --border: #e2e8f0;
+    --border-strong: #cbd5e1;
+    --text: #0f172a;
+    --muted: #64748b;
+    --subtle: #94a3b8;
+    --accent: #0f172a;
+    --green: #16a34a;
+    --green-bg: #dcfce7;
+    --blue: #2563eb;
+    --blue-bg: #dbeafe;
+    --yellow: #ca8a04;
+    --yellow-bg: #fef3c7;
+    --red: #dc2626;
+    --red-bg: #fee2e2;
+    --slate-50: #f8fafc;
+    --slate-100: #f1f5f9;
+  }
+
+  * { box-sizing: border-box; }
+
+  body {
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+    background: var(--bg);
+    color: var(--text);
+    line-height: 1.55;
+    font-size: 14px;
+  }
+
+  .container {
+    max-width: 1180px;
+    margin: 0 auto;
+    padding: 48px 32px 80px;
+  }
+
+  header.page-header {
+    border-bottom: 1px solid var(--border);
+    padding-bottom: 24px;
+    margin-bottom: 40px;
+  }
+  header.page-header .eyebrow {
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--muted);
+    margin-bottom: 8px;
+  }
+  header.page-header h1 {
+    font-size: 28px;
+    font-weight: 600;
+    margin: 0 0 8px;
+    letter-spacing: -0.01em;
+  }
+  header.page-header p {
+    margin: 0;
+    color: var(--muted);
+    max-width: 720px;
+  }
+
+  section {
+    margin-bottom: 56px;
+  }
+
+  h2 {
+    font-size: 18px;
+    font-weight: 600;
+    margin: 0 0 4px;
+    letter-spacing: -0.005em;
+  }
+  h2 + .section-sub {
+    color: var(--muted);
+    font-size: 13px;
+    margin: 0 0 24px;
+  }
+
+  h3 {
+    font-size: 13px;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--muted);
+    font-weight: 600;
+    margin: 0 0 12px;
+  }
+
+  /* === System architecture diagram === */
+  .arch-diagram {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 32px;
+  }
+  .arch-grid {
+    display: grid;
+    grid-template-columns: 1fr 80px 1fr 80px 1fr;
+    align-items: stretch;
+    gap: 0;
+  }
+  .arch-col {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+  .arch-tier-label {
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--muted);
+    font-weight: 600;
+    text-align: center;
+    margin-bottom: 4px;
+  }
+  .arch-box {
+    background: var(--slate-50);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    padding: 14px 14px;
+  }
+  .arch-box.primary {
+    background: var(--accent);
+    border-color: var(--accent);
+    color: #fff;
+  }
+  .arch-box.primary .arch-box-title { color: #fff; }
+  .arch-box.primary .arch-box-meta { color: rgba(255,255,255,0.7); }
+  .arch-box-title {
+    font-weight: 600;
+    font-size: 13px;
+    margin-bottom: 2px;
+  }
+  .arch-box-meta {
+    font-size: 11px;
+    color: var(--muted);
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  }
+  .arch-box-items {
+    margin-top: 8px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+  }
+  .arch-pill {
+    font-size: 11px;
+    padding: 2px 8px;
+    background: rgba(15, 23, 42, 0.06);
+    border-radius: 999px;
+    color: var(--text);
+  }
+  .arch-box.primary .arch-pill {
+    background: rgba(255,255,255,0.12);
+    color: #fff;
+  }
+  .arch-arrow {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+  }
+  .arch-arrow svg { display: block; }
+  .arch-arrow-label {
+    position: absolute;
+    top: 50%;
+    transform: translateY(calc(-100% - 6px));
+    font-size: 10px;
+    color: var(--muted);
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+    background: var(--surface);
+    padding: 0 6px;
+    white-space: nowrap;
+  }
+
+  /* === Tech stack grid === */
+  .stack-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 16px;
+  }
+  .stack-card {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 20px;
+  }
+  .stack-card-header {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    margin-bottom: 12px;
+  }
+  .stack-card-title {
+    font-weight: 600;
+    font-size: 14px;
+  }
+  .stack-badge {
+    font-size: 10px;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    padding: 2px 8px;
+    border-radius: 999px;
+    background: var(--slate-100);
+    color: var(--muted);
+    font-weight: 600;
+  }
+  .stack-badge.green { background: var(--green-bg); color: var(--green); }
+  .stack-badge.blue  { background: var(--blue-bg);  color: var(--blue); }
+  .stack-badge.yellow{ background: var(--yellow-bg);color: var(--yellow); }
+
+  .stack-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    font-size: 13px;
+  }
+  .stack-list li {
+    display: flex;
+    justify-content: space-between;
+    padding: 6px 0;
+    border-bottom: 1px dashed var(--border);
+  }
+  .stack-list li:last-child { border-bottom: none; }
+  .stack-list .k { color: var(--text); }
+  .stack-list .v {
+    color: var(--muted);
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+    font-size: 12px;
+  }
+
+  /* === Data flow === */
+  .flow-wrapper {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 28px 32px;
+  }
+  .flow-steps {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    gap: 12px;
+    margin-bottom: 28px;
+  }
+  .flow-step {
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    padding: 12px 14px;
+    background: var(--slate-50);
+    position: relative;
+  }
+  .flow-step .num {
+    font-size: 10px;
+    color: var(--muted);
+    font-weight: 600;
+    letter-spacing: 0.08em;
+    margin-bottom: 4px;
+  }
+  .flow-step .name {
+    font-weight: 600;
+    font-size: 13px;
+    margin-bottom: 2px;
+  }
+  .flow-step .desc {
+    font-size: 11px;
+    color: var(--muted);
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  }
+  .flow-example {
+    background: #0f172a;
+    color: #e2e8f0;
+    border-radius: 6px;
+    padding: 16px 20px;
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+    font-size: 12px;
+    line-height: 1.7;
+    overflow-x: auto;
+  }
+  .flow-example .tag-ui   { color: #93c5fd; }
+  .flow-example .tag-comp { color: #c4b5fd; }
+  .flow-example .tag-api  { color: #fcd34d; }
+  .flow-example .tag-srv  { color: #6ee7b7; }
+  .flow-example .tag-out  { color: #f9a8d4; }
+  .flow-example .arrow    { color: #64748b; padding: 0 4px; }
+
+  /* === Endpoint table === */
+  table.endpoints {
+    width: 100%;
+    border-collapse: collapse;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    overflow: hidden;
+    font-size: 13px;
+  }
+  table.endpoints th,
+  table.endpoints td {
+    text-align: left;
+    padding: 10px 16px;
+    border-bottom: 1px solid var(--border);
+  }
+  table.endpoints th {
+    background: var(--slate-50);
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--muted);
+    font-weight: 600;
+  }
+  table.endpoints tr:last-child td { border-bottom: none; }
+  table.endpoints td.path {
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+    font-size: 12px;
+  }
+  .method {
+    display: inline-block;
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+    font-size: 11px;
+    padding: 2px 8px;
+    border-radius: 4px;
+    font-weight: 600;
+  }
+  .method.get    { background: var(--blue-bg);   color: var(--blue); }
+  .method.post   { background: var(--green-bg);  color: var(--green); }
+  .method.patch  { background: var(--yellow-bg); color: var(--yellow); }
+  .method.delete { background: var(--red-bg);    color: var(--red); }
+  .filter-chip {
+    display: inline-block;
+    font-size: 11px;
+    background: var(--slate-100);
+    color: var(--muted);
+    padding: 1px 6px;
+    border-radius: 3px;
+    margin-right: 4px;
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  }
+
+  /* === Filter system === */
+  .filters-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 12px;
+  }
+  .filter-card {
+    border: 1px solid var(--border);
+    background: var(--surface);
+    border-radius: 6px;
+    padding: 14px;
+  }
+  .filter-card .label {
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--muted);
+    font-weight: 600;
+    margin-bottom: 6px;
+  }
+  .filter-card .name {
+    font-weight: 600;
+    font-size: 14px;
+    margin-bottom: 6px;
+  }
+  .filter-card .values {
+    font-size: 12px;
+    color: var(--muted);
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+    line-height: 1.6;
+  }
+
+  footer.page-footer {
+    margin-top: 64px;
+    padding-top: 24px;
+    border-top: 1px solid var(--border);
+    color: var(--subtle);
+    font-size: 12px;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  @media (max-width: 900px) {
+    .arch-grid { grid-template-columns: 1fr; }
+    .arch-arrow { transform: rotate(90deg); margin: 4px auto; }
+    .stack-grid, .flow-steps, .filters-grid { grid-template-columns: 1fr 1fr; }
+  }
+  @media (max-width: 560px) {
+    .stack-grid, .flow-steps, .filters-grid { grid-template-columns: 1fr; }
+    .container { padding: 32px 20px 60px; }
+  }
+</style>
+</head>
+<body>
+<div class="container">
+
+  <header class="page-header">
+    <div class="eyebrow">System Documentation</div>
+    <h1>Factory Inventory Management — Architecture</h1>
+    <p>
+      Full-stack demo built with Vue 3 (Composition API) on the frontend and Python FastAPI on
+      the backend. Mock data lives in JSON files loaded into memory on startup — no database.
+      Four global filters (period, warehouse, category, status) propagate from the UI through a
+      composable, into the API client, and into in-memory filtering on the server.
+    </p>
+  </header>
+
+  <!-- ================= SYSTEM ARCHITECTURE ================= -->
+  <section>
+    <h2>System Architecture</h2>
+    <p class="section-sub">Three tiers, separated by HTTP and the local filesystem.</p>
+
+    <div class="arch-diagram">
+      <div class="arch-grid">
+
+        <!-- Client tier -->
+        <div class="arch-col">
+          <div class="arch-tier-label">Client · :3000</div>
+          <div class="arch-box primary">
+            <div class="arch-box-title">Vue 3 SPA</div>
+            <div class="arch-box-meta">Vite · Composition API</div>
+            <div class="arch-box-items">
+              <span class="arch-pill">Dashboard</span>
+              <span class="arch-pill">Inventory</span>
+              <span class="arch-pill">Orders</span>
+              <span class="arch-pill">Spending</span>
+              <span class="arch-pill">Demand</span>
+              <span class="arch-pill">Reports</span>
+              <span class="arch-pill">Backlog</span>
+            </div>
+          </div>
+          <div class="arch-box">
+            <div class="arch-box-title">Composables</div>
+            <div class="arch-box-meta">client/src/composables</div>
+            <div class="arch-box-items">
+              <span class="arch-pill">useFilters</span>
+              <span class="arch-pill">useAuth</span>
+              <span class="arch-pill">useI18n</span>
+            </div>
+          </div>
+          <div class="arch-box">
+            <div class="arch-box-title">API Client</div>
+            <div class="arch-box-meta">client/src/api.js (axios)</div>
+          </div>
+        </div>
+
+        <!-- Arrow 1 -->
+        <div class="arch-arrow">
+          <svg width="64" height="20" viewBox="0 0 64 20">
+            <line x1="2" y1="10" x2="56" y2="10" stroke="#94a3b8" stroke-width="1.5"/>
+            <polygon points="56,4 64,10 56,16" fill="#94a3b8"/>
+          </svg>
+          <div class="arch-arrow-label">HTTP / JSON</div>
+        </div>
+
+        <!-- Server tier -->
+        <div class="arch-col">
+          <div class="arch-tier-label">Server · :8001</div>
+          <div class="arch-box primary">
+            <div class="arch-box-title">FastAPI</div>
+            <div class="arch-box-meta">server/main.py</div>
+            <div class="arch-box-items">
+              <span class="arch-pill">Routes</span>
+              <span class="arch-pill">CORS</span>
+              <span class="arch-pill">apply_filters</span>
+              <span class="arch-pill">filter_by_month</span>
+            </div>
+          </div>
+          <div class="arch-box">
+            <div class="arch-box-title">Pydantic Models</div>
+            <div class="arch-box-meta">InventoryItem · Order · BacklogItem · …</div>
+          </div>
+          <div class="arch-box">
+            <div class="arch-box-title">Mock Loader</div>
+            <div class="arch-box-meta">server/mock_data.py</div>
+          </div>
+        </div>
+
+        <!-- Arrow 2 -->
+        <div class="arch-arrow">
+          <svg width="64" height="20" viewBox="0 0 64 20">
+            <line x1="2" y1="10" x2="56" y2="10" stroke="#94a3b8" stroke-width="1.5"/>
+            <polygon points="56,4 64,10 56,16" fill="#94a3b8"/>
+          </svg>
+          <div class="arch-arrow-label">read on startup</div>
+        </div>
+
+        <!-- Data tier -->
+        <div class="arch-col">
+          <div class="arch-tier-label">Data · in-memory</div>
+          <div class="arch-box">
+            <div class="arch-box-title">JSON Fixtures</div>
+            <div class="arch-box-meta">server/data/</div>
+            <div class="arch-box-items">
+              <span class="arch-pill">inventory.json</span>
+              <span class="arch-pill">orders.json</span>
+              <span class="arch-pill">demand_forecasts.json</span>
+              <span class="arch-pill">backlog_items.json</span>
+              <span class="arch-pill">spending.json</span>
+              <span class="arch-pill">transactions.json</span>
+              <span class="arch-pill">purchase_orders.json</span>
+            </div>
+          </div>
+          <div class="arch-box">
+            <div class="arch-box-title">Lists in Memory</div>
+            <div class="arch-box-meta">inventory_items, orders, backlog_items, …</div>
+          </div>
+          <div class="arch-box">
+            <div class="arch-box-title">Tests</div>
+            <div class="arch-box-meta">tests/backend (pytest · TestClient)</div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </section>
+
+  <!-- ================= TECH STACK ================= -->
+  <section>
+    <h2>Tech Stack</h2>
+    <p class="section-sub">Pinned versions taken from package.json and pyproject.toml.</p>
+
+    <div class="stack-grid">
+
+      <div class="stack-card">
+        <div class="stack-card-header">
+          <div class="stack-card-title">Frontend</div>
+          <div class="stack-badge blue">port 3000</div>
+        </div>
+        <ul class="stack-list">
+          <li><span class="k">Vue</span><span class="v">^3.4.21</span></li>
+          <li><span class="k">Vue Router</span><span class="v">^4.3.0</span></li>
+          <li><span class="k">Axios</span><span class="v">^1.6.7</span></li>
+          <li><span class="k">Vite</span><span class="v">^5.2.0</span></li>
+          <li><span class="k">Plugin</span><span class="v">@vitejs/plugin-vue</span></li>
+          <li><span class="k">Package mgr</span><span class="v">npm</span></li>
+        </ul>
+      </div>
+
+      <div class="stack-card">
+        <div class="stack-card-header">
+          <div class="stack-card-title">Backend</div>
+          <div class="stack-badge green">port 8001</div>
+        </div>
+        <ul class="stack-list">
+          <li><span class="k">FastAPI</span><span class="v">&ge; 0.110.0</span></li>
+          <li><span class="k">Uvicorn</span><span class="v">&ge; 0.24.0</span></li>
+          <li><span class="k">Pydantic</span><span class="v">&ge; 2.5.0</span></li>
+          <li><span class="k">Python</span><span class="v">3.x via uv</span></li>
+          <li><span class="k">Tests</span><span class="v">pytest, httpx</span></li>
+          <li><span class="k">Package mgr</span><span class="v">uv</span></li>
+        </ul>
+      </div>
+
+      <div class="stack-card">
+        <div class="stack-card-header">
+          <div class="stack-card-title">Data &amp; Tooling</div>
+          <div class="stack-badge yellow">in-memory</div>
+        </div>
+        <ul class="stack-list">
+          <li><span class="k">Persistence</span><span class="v">JSON files</span></li>
+          <li><span class="k">Validation</span><span class="v">Pydantic v2</span></li>
+          <li><span class="k">i18n</span><span class="v">en / ja</span></li>
+          <li><span class="k">Charts</span><span class="v">Custom SVG</span></li>
+          <li><span class="k">Layout</span><span class="v">CSS Grid</span></li>
+          <li><span class="k">Browser tests</span><span class="v">Playwright (MCP)</span></li>
+        </ul>
+      </div>
+
+    </div>
+  </section>
+
+  <!-- ================= DATA FLOW ================= -->
+  <section>
+    <h2>Filter Data Flow</h2>
+    <p class="section-sub">How a single dropdown change reaches the server and returns filtered data.</p>
+
+    <div class="flow-wrapper">
+      <div class="flow-steps">
+        <div class="flow-step">
+          <div class="num">01</div>
+          <div class="name">FilterBar.vue</div>
+          <div class="desc">v-model on selects</div>
+        </div>
+        <div class="flow-step">
+          <div class="num">02</div>
+          <div class="name">useFilters()</div>
+          <div class="desc">reactive refs</div>
+        </div>
+        <div class="flow-step">
+          <div class="num">03</div>
+          <div class="name">api.js</div>
+          <div class="desc">URLSearchParams → axios</div>
+        </div>
+        <div class="flow-step">
+          <div class="num">04</div>
+          <div class="name">FastAPI route</div>
+          <div class="desc">apply_filters + filter_by_month</div>
+        </div>
+        <div class="flow-step">
+          <div class="num">05</div>
+          <div class="name">Vue computed</div>
+          <div class="desc">render KPIs / tables</div>
+        </div>
+      </div>
+
+      <div class="flow-example">
+<span class="tag-ui">User</span> selects Tokyo + Sensors + Q1-2025 + Delivered<br/>
+<span class="tag-comp">useFilters</span> <span class="arrow">→</span> getCurrentFilters() <span class="arrow">→</span> { warehouse: "Tokyo", category: "sensors", status: "delivered", month: "Q1-2025" }<br/>
+<span class="tag-api">api.js</span>     <span class="arrow">→</span> GET /api/orders?warehouse=Tokyo&amp;category=sensors&amp;status=delivered&amp;month=Q1-2025<br/>
+<span class="tag-srv">main.py</span>    <span class="arrow">→</span> apply_filters(orders, …) <span class="arrow">→</span> filter_by_month(…, "Q1-2025") <span class="arrow">→</span> expands to [2025-01, 2025-02, 2025-03]<br/>
+<span class="tag-out">Response</span> <span class="arrow">→</span> List[Order] (Pydantic validated) <span class="arrow">→</span> Vue computed props <span class="arrow">→</span> rendered
+      </div>
+    </div>
+  </section>
+
+  <!-- ================= GLOBAL FILTERS ================= -->
+  <section>
+    <h2>Global Filters</h2>
+    <p class="section-sub">Four filters shared across views via a single composable.</p>
+
+    <div class="filters-grid">
+      <div class="filter-card">
+        <div class="label">Filter 01</div>
+        <div class="name">Time Period</div>
+        <div class="values">2025-01 … 2025-12<br/>Q1-2025 … Q4-2025</div>
+      </div>
+      <div class="filter-card">
+        <div class="label">Filter 02</div>
+        <div class="name">Warehouse</div>
+        <div class="values">San Francisco<br/>London<br/>Tokyo</div>
+      </div>
+      <div class="filter-card">
+        <div class="label">Filter 03</div>
+        <div class="name">Category</div>
+        <div class="values">circuit boards · sensors<br/>actuators · controllers<br/>power supplies</div>
+      </div>
+      <div class="filter-card">
+        <div class="label">Filter 04</div>
+        <div class="name">Order Status</div>
+        <div class="values">delivered · shipped<br/>processing · backordered</div>
+      </div>
+    </div>
+  </section>
+
+  <!-- ================= API SURFACE ================= -->
+  <section>
+    <h2>API Surface</h2>
+    <p class="section-sub">All endpoints are served from <code>http://localhost:8001/api</code>.</p>
+
+    <table class="endpoints">
+      <thead>
+        <tr>
+          <th style="width:80px">Method</th>
+          <th style="width:38%">Path</th>
+          <th>Filters</th>
+          <th>Purpose</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td><span class="method get">GET</span></td>
+          <td class="path">/api/inventory</td>
+          <td><span class="filter-chip">warehouse</span><span class="filter-chip">category</span></td>
+          <td>List inventory items</td>
+        </tr>
+        <tr>
+          <td><span class="method get">GET</span></td>
+          <td class="path">/api/inventory/{id}</td>
+          <td>—</td>
+          <td>Single inventory item</td>
+        </tr>
+        <tr>
+          <td><span class="method get">GET</span></td>
+          <td class="path">/api/orders</td>
+          <td><span class="filter-chip">warehouse</span><span class="filter-chip">category</span><span class="filter-chip">status</span><span class="filter-chip">month</span></td>
+          <td>List orders</td>
+        </tr>
+        <tr>
+          <td><span class="method get">GET</span></td>
+          <td class="path">/api/orders/{id}</td>
+          <td>—</td>
+          <td>Single order</td>
+        </tr>
+        <tr>
+          <td><span class="method get">GET</span></td>
+          <td class="path">/api/dashboard/summary</td>
+          <td><span class="filter-chip">warehouse</span><span class="filter-chip">category</span><span class="filter-chip">status</span><span class="filter-chip">month</span></td>
+          <td>KPIs for dashboard</td>
+        </tr>
+        <tr>
+          <td><span class="method get">GET</span></td>
+          <td class="path">/api/demand</td>
+          <td>—</td>
+          <td>Demand forecasts</td>
+        </tr>
+        <tr>
+          <td><span class="method get">GET</span></td>
+          <td class="path">/api/backlog</td>
+          <td>—</td>
+          <td>Backlog with PO status</td>
+        </tr>
+        <tr>
+          <td><span class="method get">GET</span></td>
+          <td class="path">/api/spending/summary</td>
+          <td>—</td>
+          <td>Spending totals</td>
+        </tr>
+        <tr>
+          <td><span class="method get">GET</span></td>
+          <td class="path">/api/spending/monthly</td>
+          <td>—</td>
+          <td>Monthly spending</td>
+        </tr>
+        <tr>
+          <td><span class="method get">GET</span></td>
+          <td class="path">/api/spending/categories</td>
+          <td>—</td>
+          <td>Spending by category</td>
+        </tr>
+        <tr>
+          <td><span class="method get">GET</span></td>
+          <td class="path">/api/spending/transactions</td>
+          <td>—</td>
+          <td>Recent transactions</td>
+        </tr>
+        <tr>
+          <td><span class="method get">GET</span></td>
+          <td class="path">/api/reports/quarterly</td>
+          <td>—</td>
+          <td>Quarterly performance</td>
+        </tr>
+        <tr>
+          <td><span class="method get">GET</span></td>
+          <td class="path">/api/reports/monthly-trends</td>
+          <td>—</td>
+          <td>Monthly trend series</td>
+        </tr>
+        <tr>
+          <td><span class="method get">GET</span></td>
+          <td class="path">/api/tasks</td>
+          <td>—</td>
+          <td>List tasks</td>
+        </tr>
+        <tr>
+          <td><span class="method post">POST</span></td>
+          <td class="path">/api/tasks</td>
+          <td>—</td>
+          <td>Create task</td>
+        </tr>
+        <tr>
+          <td><span class="method patch">PATCH</span></td>
+          <td class="path">/api/tasks/{id}</td>
+          <td>—</td>
+          <td>Toggle task complete</td>
+        </tr>
+        <tr>
+          <td><span class="method delete">DELETE</span></td>
+          <td class="path">/api/tasks/{id}</td>
+          <td>—</td>
+          <td>Delete task</td>
+        </tr>
+        <tr>
+          <td><span class="method post">POST</span></td>
+          <td class="path">/api/purchase-orders</td>
+          <td>—</td>
+          <td>Create purchase order</td>
+        </tr>
+        <tr>
+          <td><span class="method get">GET</span></td>
+          <td class="path">/api/purchase-orders/{id}</td>
+          <td>—</td>
+          <td>Get PO by backlog item</td>
+        </tr>
+      </tbody>
+    </table>
+  </section>
+
+  <!-- ================= DATA MODEL ================= -->
+  <section>
+    <h2>Core Pydantic Models</h2>
+    <p class="section-sub">Defined in <code>server/main.py</code>. All API responses validate against these.</p>
+
+    <div class="stack-grid">
+      <div class="stack-card">
+        <div class="stack-card-header">
+          <div class="stack-card-title">InventoryItem</div>
+        </div>
+        <ul class="stack-list">
+          <li><span class="k">sku</span><span class="v">str</span></li>
+          <li><span class="k">name</span><span class="v">str</span></li>
+          <li><span class="k">category</span><span class="v">str</span></li>
+          <li><span class="k">warehouse</span><span class="v">str</span></li>
+          <li><span class="k">quantity_on_hand</span><span class="v">int</span></li>
+          <li><span class="k">reorder_point</span><span class="v">int</span></li>
+          <li><span class="k">unit_cost</span><span class="v">float</span></li>
+        </ul>
+      </div>
+
+      <div class="stack-card">
+        <div class="stack-card-header">
+          <div class="stack-card-title">Order</div>
+        </div>
+        <ul class="stack-list">
+          <li><span class="k">order_number</span><span class="v">str</span></li>
+          <li><span class="k">customer</span><span class="v">str</span></li>
+          <li><span class="k">items</span><span class="v">list</span></li>
+          <li><span class="k">status</span><span class="v">enum</span></li>
+          <li><span class="k">order_date</span><span class="v">date</span></li>
+          <li><span class="k">total_value</span><span class="v">float</span></li>
+          <li><span class="k">warehouse</span><span class="v">str</span></li>
+        </ul>
+      </div>
+
+      <div class="stack-card">
+        <div class="stack-card-header">
+          <div class="stack-card-title">BacklogItem</div>
+        </div>
+        <ul class="stack-list">
+          <li><span class="k">order_id</span><span class="v">str</span></li>
+          <li><span class="k">item_sku</span><span class="v">str</span></li>
+          <li><span class="k">quantity_needed</span><span class="v">int</span></li>
+          <li><span class="k">quantity_available</span><span class="v">int</span></li>
+          <li><span class="k">days_delayed</span><span class="v">int</span></li>
+          <li><span class="k">priority</span><span class="v">enum</span></li>
+          <li><span class="k">has_purchase_order</span><span class="v">bool</span></li>
+        </ul>
+      </div>
+    </div>
+  </section>
+
+  <footer class="page-footer">
+    <span>docs/architecture.html</span>
+    <span>Generated from CLAUDE.md, package.json, pyproject.toml, server/main.py</span>
+  </footer>
+
+</div>
+</body>
+</html>
diff --git a/server/data/inventory.json b/server/data/inventory.json
index 486fda81..26feb0da 100644
--- a/server/data/inventory.json
+++ b/server/data/inventory.json
@@ -9,6 +9,7 @@
     "reorder_point": 200,
     "unit_cost": 24.99,
     "location": "Warehouse A-12",
+    "lead_time_days": 10,
     "last_updated": "2025-09-30T10:30:00"
   },
   {
@@ -21,6 +22,7 @@
     "reorder_point": 150,
     "unit_cost": 29.99,
     "location": "Warehouse A-13",
+    "lead_time_days": 10,
     "last_updated": "2025-09-28T14:20:00"
   },
   {
@@ -33,6 +35,7 @@
     "reorder_point": 120,
     "unit_cost": 34.5,
     "location": "Warehouse B-08",
+    "lead_time_days": 10,
     "last_updated": "2025-09-25T09:15:00"
   },
   {
@@ -45,6 +48,7 @@
     "reorder_point": 150,
     "unit_cost": 89.5,
     "location": "Warehouse B-05",
+    "lead_time_days": 7,
     "last_updated": "2025-09-29T14:20:00"
   },
   {
@@ -57,6 +61,7 @@
     "reorder_point": 80,
     "unit_cost": 125.0,
     "location": "Warehouse B-06",
+    "lead_time_days": 7,
     "last_updated": "2025-09-27T11:45:00"
   },
   {
@@ -69,6 +74,7 @@
     "reorder_point": 300,
     "unit_cost": 12.75,
     "location": "Warehouse A-08",
+    "lead_time_days": 7,
     "last_updated": "2025-09-30T09:15:00"
   },
   {
@@ -81,6 +87,7 @@
     "reorder_point": 400,
     "unit_cost": 8.5,
     "location": "Warehouse C-04",
+    "lead_time_days": 7,
     "last_updated": "2025-09-26T13:30:00"
   },
   {
@@ -93,6 +100,7 @@
     "reorder_point": 250,
     "unit_cost": 15.99,
     "location": "Warehouse A-09",
+    "lead_time_days": 7,
     "last_updated": "2025-09-24T10:00:00"
   },
   {
@@ -105,6 +113,7 @@
     "reorder_point": 50,
     "unit_cost": 445.0,
     "location": "Warehouse C-02",
+    "lead_time_days": 21,
     "last_updated": "2025-09-30T16:45:00"
   },
   {
@@ -117,6 +126,7 @@
     "reorder_point": 30,
     "unit_cost": 725.0,
     "location": "Warehouse C-03",
+    "lead_time_days": 21,
     "last_updated": "2025-09-28T12:20:00"
   },
   {
@@ -129,6 +139,7 @@
     "reorder_point": 40,
     "unit_cost": 325.0,
     "location": "Warehouse B-10",
+    "lead_time_days": 21,
     "last_updated": "2025-09-22T15:30:00"
   },
   {
@@ -141,6 +152,7 @@
     "reorder_point": 500,
     "unit_cost": 8.25,
     "location": "Warehouse A-15",
+    "lead_time_days": 10,
     "last_updated": "2025-09-30T08:00:00"
   },
   {
@@ -153,6 +165,7 @@
     "reorder_point": 400,
     "unit_cost": 6.5,
     "location": "Warehouse A-16",
+    "lead_time_days": 10,
     "last_updated": "2025-09-27T09:45:00"
   },
   {
@@ -165,6 +178,7 @@
     "reorder_point": 350,
     "unit_cost": 7.75,
     "location": "Warehouse B-12",
+    "lead_time_days": 10,
     "last_updated": "2025-09-25T14:15:00"
   },
   {
@@ -177,6 +191,7 @@
     "reorder_point": 100,
     "unit_cost": 156.0,
     "location": "Warehouse B-11",
+    "lead_time_days": 7,
     "last_updated": "2025-09-29T11:30:00"
   },
   {
@@ -189,6 +204,7 @@
     "reorder_point": 120,
     "unit_cost": 95.0,
     "location": "Warehouse C-07",
+    "lead_time_days": 7,
     "last_updated": "2025-09-26T16:00:00"
   },
   {
@@ -201,6 +217,7 @@
     "reorder_point": 90,
     "unit_cost": 110.5,
     "location": "Warehouse A-14",
+    "lead_time_days": 7,
     "last_updated": "2025-09-23T10:45:00"
   },
   {
@@ -213,6 +230,7 @@
     "reorder_point": 200,
     "unit_cost": 18.75,
     "location": "Warehouse B-09",
+    "lead_time_days": 7,
     "last_updated": "2025-09-21T13:20:00"
   },
   {
@@ -225,6 +243,7 @@
     "reorder_point": 350,
     "unit_cost": 12.25,
     "location": "Warehouse A-11",
+    "lead_time_days": 7,
     "last_updated": "2025-09-19T11:00:00"
   },
   {
@@ -237,6 +256,7 @@
     "reorder_point": 600,
     "unit_cost": 15.5,
     "location": "Warehouse C-05",
+    "lead_time_days": 10,
     "last_updated": "2025-09-20T08:30:00"
   },
   {
@@ -249,6 +269,7 @@
     "reorder_point": 500,
     "unit_cost": 22.0,
     "location": "Warehouse B-13",
+    "lead_time_days": 10,
     "last_updated": "2025-09-18T15:45:00"
   },
   {
@@ -261,6 +282,7 @@
     "reorder_point": 40,
     "unit_cost": 285.0,
     "location": "Warehouse C-06",
+    "lead_time_days": 21,
     "last_updated": "2025-09-17T09:20:00"
   },
   {
@@ -273,6 +295,7 @@
     "reorder_point": 150,
     "unit_cost": 45.5,
     "location": "Warehouse A-10",
+    "lead_time_days": 7,
     "last_updated": "2025-09-16T14:30:00"
   },
   {
@@ -285,6 +308,7 @@
     "reorder_point": 250,
     "unit_cost": 32.75,
     "location": "Warehouse B-14",
+    "lead_time_days": 10,
     "last_updated": "2025-09-15T10:15:00"
   },
   {
@@ -297,6 +321,7 @@
     "reorder_point": 180,
     "unit_cost": 18.99,
     "location": "Warehouse A-15",
+    "lead_time_days": 14,
     "last_updated": "2025-09-28T08:45:00"
   },
   {
@@ -309,6 +334,7 @@
     "reorder_point": 200,
     "unit_cost": 22.50,
     "location": "Warehouse B-16",
+    "lead_time_days": 14,
     "last_updated": "2025-09-27T13:20:00"
   },
   {
@@ -321,6 +347,7 @@
     "reorder_point": 150,
     "unit_cost": 45.75,
     "location": "Warehouse C-09",
+    "lead_time_days": 14,
     "last_updated": "2025-09-26T10:15:00"
   },
   {
@@ -333,6 +360,7 @@
     "reorder_point": 100,
     "unit_cost": 38.25,
     "location": "Warehouse A-16",
+    "lead_time_days": 14,
     "last_updated": "2025-09-25T16:30:00"
   },
   {
@@ -345,6 +373,7 @@
     "reorder_point": 120,
     "unit_cost": 67.50,
     "location": "Warehouse B-17",
+    "lead_time_days": 14,
     "last_updated": "2025-09-24T09:00:00"
   },
   {
@@ -357,6 +386,7 @@
     "reorder_point": 250,
     "unit_cost": 29.99,
     "location": "Warehouse C-10",
+    "lead_time_days": 14,
     "last_updated": "2025-09-23T14:45:00"
   },
   {
@@ -369,6 +399,7 @@
     "reorder_point": 80,
     "unit_cost": 125.00,
     "location": "Warehouse A-17",
+    "lead_time_days": 14,
     "last_updated": "2025-09-22T11:30:00"
   },
   {
@@ -381,6 +412,7 @@
     "reorder_point": 100,
     "unit_cost": 185.50,
     "location": "Warehouse C-11",
+    "lead_time_days": 14,
     "last_updated": "2025-09-21T15:20:00"
   }
-]
\ No newline at end of file
+]
diff --git a/server/data/submitted_orders.json b/server/data/submitted_orders.json
new file mode 100644
index 00000000..fe51488c
--- /dev/null
+++ b/server/data/submitted_orders.json
@@ -0,0 +1 @@
+[]
diff --git a/server/data/tasks.json b/server/data/tasks.json
new file mode 100644
index 00000000..fe51488c
--- /dev/null
+++ b/server/data/tasks.json
@@ -0,0 +1 @@
+[]
diff --git a/server/main.py b/server/main.py
index a0c2d8c5..c51705c9 100644
--- a/server/main.py
+++ b/server/main.py
@@ -1,8 +1,9 @@
+from datetime import datetime, timedelta
 from fastapi import FastAPI, HTTPException
 from fastapi.middleware.cors import CORSMiddleware
 from typing import List, Optional
 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 mock_data import inventory_items, orders, demand_forecasts, backlog_items, spending_summary, monthly_spending, category_spending, recent_transactions, purchase_orders, submitted_orders, tasks
 
 app = FastAPI(title="Factory Inventory Management System")
 
@@ -66,6 +67,7 @@ class InventoryItem(BaseModel):
     reorder_point: int
     unit_cost: float
     location: str
+    lead_time_days: int
     last_updated: str
 
 class Order(BaseModel):
@@ -120,6 +122,42 @@ class CreatePurchaseOrderRequest(BaseModel):
     expected_delivery_date: str
     notes: Optional[str] = None
 
+class SubmittedOrderItem(BaseModel):
+    sku: str
+    name: str
+    quantity: int
+    unit_cost: float
+    lead_time_days: int
+
+class SubmittedOrder(BaseModel):
+    id: str
+    order_number: str
+    items: List[SubmittedOrderItem]
+    total_value: float
+    budget: float
+    submitted_date: str
+    expected_delivery: str
+    max_lead_time_days: int
+    status: str
+
+class CreateSubmittedOrderRequest(BaseModel):
+    items: List[SubmittedOrderItem]
+    budget: float
+
+# Tasks use camelCase `dueDate` to match the frontend (TasksModal.vue, App.vue),
+# unlike most snake_case fields elsewhere in this API.
+class Task(BaseModel):
+    id: str
+    title: str
+    priority: str
+    dueDate: str
+    status: str
+
+class CreateTaskRequest(BaseModel):
+    title: str
+    priority: str
+    dueDate: str
+
 # API endpoints
 @app.get("/")
 def root():
@@ -179,6 +217,89 @@ def get_backlog():
         result.append(item_dict)
     return result
 
+@app.get("/api/submitted-orders", response_model=List[SubmittedOrder])
+def get_submitted_orders():
+    """Get all submitted restocking orders (newest first)."""
+    # Return a copy in reverse-chronological order without mutating storage.
+    return list(reversed(submitted_orders))
+
+@app.post("/api/submitted-orders", response_model=SubmittedOrder, status_code=201)
+def create_submitted_order(req: CreateSubmittedOrderRequest):
+    """Create a new submitted restocking order from a list of items + budget."""
+    if not req.items:
+        raise HTTPException(status_code=400, detail="At least one item is required")
+
+    total_value = round(sum(it.quantity * it.unit_cost for it in req.items), 2)
+    if total_value > req.budget:
+        raise HTTPException(
+            status_code=400,
+            detail=f"Total value {total_value} exceeds budget {req.budget}"
+        )
+
+    max_lead = max(it.lead_time_days for it in req.items)
+    submitted_at = datetime.now()
+    expected_at = submitted_at + timedelta(days=max_lead)
+
+    new_id = str(len(submitted_orders) + 1)
+    order_number = f"RST-{submitted_at.year}-{int(new_id):04d}"
+
+    new_order = {
+        "id": new_id,
+        "order_number": order_number,
+        "items": [it.model_dump() for it in req.items],
+        "total_value": total_value,
+        "budget": req.budget,
+        "submitted_date": submitted_at.isoformat(timespec='seconds'),
+        "expected_delivery": expected_at.isoformat(timespec='seconds'),
+        "max_lead_time_days": max_lead,
+        "status": "Submitted",
+    }
+    submitted_orders.append(new_order)
+    return new_order
+
+@app.get("/api/tasks", response_model=List[Task])
+def get_tasks():
+    """Get all user tasks created via the API (newest first)."""
+    # Reverse without mutating storage so newest entries surface first.
+    return list(reversed(tasks))
+
+@app.post("/api/tasks", response_model=Task, status_code=201)
+def create_task(req: CreateTaskRequest):
+    """Create a new task. ID is prefixed with 'task-' so it cannot collide
+    with the frontend's hardcoded numeric mock task IDs (1-4 in useAuth.js)."""
+    if not req.title.strip():
+        raise HTTPException(status_code=400, detail="Title is required")
+    if req.priority not in ("high", "medium", "low"):
+        raise HTTPException(status_code=400, detail="Priority must be high, medium, or low")
+
+    new_task = {
+        "id": f"task-{int(datetime.now().timestamp() * 1000)}",
+        "title": req.title.strip(),
+        "priority": req.priority,
+        "dueDate": req.dueDate,
+        "status": "pending",
+    }
+    tasks.append(new_task)
+    return new_task
+
+@app.delete("/api/tasks/{task_id}")
+def delete_task(task_id: str):
+    """Delete a task by ID."""
+    index = next((i for i, t in enumerate(tasks) if t["id"] == task_id), None)
+    if index is None:
+        raise HTTPException(status_code=404, detail="Task not found")
+    tasks.pop(index)
+    return {"success": True, "id": task_id}
+
+@app.patch("/api/tasks/{task_id}", response_model=Task)
+def toggle_task(task_id: str):
+    """Toggle a task's status between 'pending' and 'completed'."""
+    task = next((t for t in tasks if t["id"] == task_id), None)
+    if task is None:
+        raise HTTPException(status_code=404, detail="Task not found")
+    task["status"] = "completed" if task["status"] == "pending" else "pending"
+    return task
+
 @app.get("/api/dashboard/summary")
 def get_dashboard_summary(
     warehouse: Optional[str] = None,
diff --git a/server/mock_data.py b/server/mock_data.py
index 2a9cd7dc..73e4fc2a 100644
--- a/server/mock_data.py
+++ b/server/mock_data.py
@@ -35,5 +35,11 @@ def load_json_file(filename):
 # Load purchase orders
 purchase_orders = load_json_file('purchase_orders.json')
 
+# Load submitted restocking orders (empty seed; appended at runtime)
+submitted_orders = load_json_file('submitted_orders.json')
+
+# Load user tasks (empty seed; appended at runtime via /api/tasks)
+tasks = load_json_file('tasks.json')
+
 # All data is now loaded from JSON files in the data/ directory
 # This allows for easier maintenance and updates of the sample data