From 291d5517ea15c172786b6b2358d9a8b597a52bcb Mon Sep 17 00:00:00 2001
From: Gorinta <sgorinta@deloitte.com>
Date: Mon, 1 Jun 2026 13:27:46 +0530
Subject: [PATCH] Add Restocking tab with budget slider, demand
 recommendations, and submitted orders section

- New Restocking view: budget slider, greedy recommendations by demand growth %, Place Order button
- POST /api/orders backend endpoint with 14-day lead time and Submitted status
- Orders tab: new Submitted Orders section showing restocking orders
- i18n: added restocking and status.submitted keys in en/ja locales

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 CLAUDE.md                       | 129 +++++----
 client/CLAUDE.md                | 484 +-------------------------------
 client/src/App.vue              |   8 +
 client/src/api.js               |   5 +
 client/src/locales/en.js        |  24 ++
 client/src/locales/ja.js        |  24 ++
 client/src/main.js              |   4 +-
 client/src/views/Orders.vue     |  75 ++++-
 client/src/views/Restocking.vue | 354 +++++++++++++++++++++++
 server/CLAUDE.md                | 287 ++-----------------
 server/main.py                  |  30 ++
 11 files changed, 621 insertions(+), 803 deletions(-)
 create mode 100644 client/src/views/Restocking.vue

diff --git a/CLAUDE.md b/CLAUDE.md
index d2086efa..444aa374 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -1,74 +1,89 @@
 # CLAUDE.md
 
-Factory Inventory Management System Demo with GitHub integration - Full-stack application with Vue 3 frontend, Python FastAPI backend, and in-memory mock data (no database).
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
 
-## Critical Tool Usage Rules
+Factory Inventory Management System — full-stack demo app with Vue 3 frontend, Python FastAPI backend, and in-memory mock data (no database).
 
-### Subagents
-Use the Task tool with these specialized subagents for appropriate tasks:
+## Commands
 
-- **vue-expert**: Use for Vue 3 frontend features, UI components, styling, and client-side functionality
-  - Examples: Creating components, fixing reactivity issues, performance optimization, complex state management
-  - **MANDATORY RULE: ANY time you need to create or significantly modify a .vue file, you MUST delegate to vue-expert**
-- **code-reviewer**: Use after writing significant code to review quality and best practices
-- **Explore**: Use for understanding codebase structure, searching for patterns, or answering questions about how components work
-- **general-purpose**: Use for complex multi-step tasks or when other agents don't fit
-
-### Skills
-- **backend-api-test** skill: Use when writing or modifying tests in `tests/backend` directory with pytest and FastAPI TestClient
+**Backend** (from `server/`):
+```bash
+uv sync                          # Install dependencies
+uv run python main.py            # Start server on http://localhost:8001
+```
 
-### MCP Tools
-- **ALWAYS use GitHub MCP tools** (`mcp__github__*`) for ALL GitHub operations
-  - Exception: Local branches only - use `git checkout -b` instead of `mcp__github__create_branch`
-- **ALWAYS use Playwright MCP tools** (`mcp__playwright__*`) for browser testing
-  - Test against: `http://localhost:3000` (frontend), `http://localhost:8001` (API)
+**Frontend** (from `client/`):
+```bash
+npm install && npm run dev       # Start dev server on http://localhost:3000
+npm run build                    # Production build to client/dist/
+```
 
-## Stack
-- **Frontend**: Vue 3 + Composition API + Vite (port 3000)
-- **Backend**: Python FastAPI (port 8001)
-- **Data**: JSON files in `server/data/` loaded via `server/mock_data.py`
+**Tests** (from `tests/`):
+```bash
+uv run pytest backend/ -v                          # All 51 tests
+uv run pytest backend/test_inventory.py -v         # Single file
+uv run pytest --cov=../server --cov-report=html    # With coverage
+```
 
-## Quick Start
+**Windows note:** `scripts/start.sh` is macOS/Linux only. Start backend and frontend in separate terminals manually.
 
-```bash
-# Backend
-cd server
-uv run python main.py
+## Architecture
 
-# Frontend
-cd client
-npm install && npm run dev
 ```
+client/src/
+  api.js          # Centralized Axios client — all HTTP calls go here
+  composables/    # Shared state: useFilters.js (4-filter system), useAuth.js, useI18n.js
+  views/          # Page components (Dashboard, Inventory, Orders, Spending, Demand, Reports)
+  components/     # Reusable UI (FilterBar, *DetailModal, TasksModal, ProfileMenu)
+
+server/
+  main.py         # All FastAPI endpoints + apply_filters() + filter_by_month()
+  mock_data.py    # Loads server/data/*.json into memory at startup
+  data/*.json     # Source of truth — inventory, orders, spending, demand_forecasts, backlog_items
+```
+
+Data flow: Vue filter composable → `api.js` query params → FastAPI → in-memory filtering → Pydantic response → Vue computed properties.
+
+## Critical Tool Usage
+
+- **vue-expert subagent**: MANDATORY for any `.vue` file creation or significant modification
+- **code-reviewer subagent**: Use after writing significant code
+- **backend-api-test skill**: Use when writing/modifying tests in `tests/backend/`
+- **GitHub MCP** (`mcp__github__*`): Use for ALL GitHub operations (exception: local branch creation with `git checkout -b`)
+- **Playwright MCP** (`mcp__playwright__*`): Use for browser testing against `http://localhost:3000` / `http://localhost:8001`
 
 ## Key Patterns
 
-**Filter System**: 4 filters (Time Period, Warehouse, Category, Order Status) apply to all data via query params
-**Data Flow**: Vue filters → `client/src/api.js` → FastAPI → In-memory filtering → Pydantic validation → Computed properties
-**Reactivity**: Raw data in refs (`allOrders`, `inventoryItems`), derived data in computed properties
-
-## API Endpoints
-- `GET /api/inventory` - Filters: warehouse, category
-- `GET /api/orders` - Filters: warehouse, category, status, month
-- `GET /api/dashboard/summary` - All filters
-- `GET /api/demand`, `/api/backlog` - No filters
-- `GET /api/spending/*` - Summary, monthly, categories, transactions
-
-## Common Issues
-1. Use unique keys in v-for (not `index`) - use `sku`, `month`, etc.
-2. Validate dates before `.getMonth()` calls
-3. Update Pydantic models when changing JSON data structure
-4. Inventory filters don't support month (no time dimension)
-5. Revenue goals: $800K/month single, $9.6M YTD all months
-
-## File Locations
-- Views: `client/src/views/*.vue`
-- API Client: `client/src/api.js`
-- Backend: `server/main.py`, `server/mock_data.py`
-- Data: `server/data/*.json`
-- Styles: `client/src/App.vue`
+**Filter system**: 4 filters — Time Period, Warehouse, Category, Order Status — passed as query params to every endpoint. Filter values of `'all'` are skipped. Inventory endpoints do **not** support month filtering (no time dimension on inventory data).
+
+**Backend filtering**:
+```python
+# Never mutate global data — filter on copies
+if warehouse and warehouse != 'all':
+    results = [r for r in results if r.get('warehouse') == warehouse]
+```
+
+**Date/quarter filtering**: Supports `2025-01` (month) and `Q1-2025` (quarter) formats. Parse safely and handle null dates.
+
+**Frontend reactivity**:
+- Raw data in `ref()`, derived data in `computed()` — never the reverse
+- Always use unique IDs (not array index) as `v-for` keys
+- Validate dates before calling `.getMonth()`: `if (!isNaN(date.getTime()))`
+- In `<script>`: `.value` required. In `<template>`: automatic unwrapping.
+
+**Adding a backend endpoint**:
+1. Define Pydantic model → add route → filter on copy of data → return typed response → write test in `tests/backend/`
+
+**Adding data**: Update JSON in `server/data/` → update Pydantic model if structure changed → restart server.
+
+## Known Constants
+
+- Revenue goals: $800K/month (single warehouse), $9.6M YTD (all months)
+- API docs: http://localhost:8001/docs
+- Mock data scope: Circuit Boards, Sensors, Actuators, Controllers across 12 months
 
 ## Design System
-- Colors: Slate/gray (#0f172a, #64748b, #e2e8f0)
-- Status: green/blue/yellow/red
-- Charts: Custom SVG, CSS Grid for layouts
+
+- Colors: Slate/gray (`#0f172a`, `#64748b`, `#e2e8f0`); status uses green/blue/yellow/red
+- Charts: Custom SVG with CSS Grid layouts
 - No emojis in UI
diff --git a/client/CLAUDE.md b/client/CLAUDE.md
index bb9960e7..e9d5b1b0 100644
--- a/client/CLAUDE.md
+++ b/client/CLAUDE.md
@@ -2,483 +2,27 @@
 
 This file provides guidance to Claude Code (claude.ai/code) when working with the Vue 3 frontend.
 
-## Running the Client
+## Commands
 
 ```bash
-# From client directory
-npm run dev
-# Runs on http://localhost:3000
+npm install && npm run dev   # Dev server on http://localhost:3000
+npm run build                # Production build to dist/
 ```
 
-## Development Best Practices
+## Architecture
 
-### Vue 3 Composition API Patterns
+- `src/api.js` — single Axios client, all HTTP calls go here. Filters passed as URLSearchParams query params, skipping values of `'all'`.
+- `src/composables/useFilters.js` — shared singleton state for the 4-filter system (Time Period, Warehouse, Category, Order Status). All views import from here.
+- `src/composables/useAuth.js`, `useI18n.js` — auth and i18n state.
+- `src/views/` — page-level components (Dashboard, Inventory, Orders, Spending, Demand, Reports). Each loads data via `onMounted` + watches on filter composable.
+- `src/components/` — reusable UI: `FilterBar.vue`, `*DetailModal.vue`, `TasksModal.vue`, `ProfileMenu.vue`.
 
-**Component Structure:**
-```vue
-<template>
-  <!-- Template: Keep clean and declarative -->
-</template>
+## Key Patterns
 
-<script>
-import { ref, computed, watch, onMounted } from 'vue'
+**Filter reactivity**: Views watch the composable's filter refs and reload data on change. Always call `getCurrentFilters()` from `useFilters` when building API params.
 
-export default {
-  name: 'ComponentName',
-  props: {
-    // Define props with types and defaults
-  },
-  setup(props) {
-    // Reactive state
-    const data = ref([])
-    const loading = ref(false)
+**Date safety**: Always validate before parsing — `const d = new Date(val); if (!isNaN(d.getTime())) { ... }`. Raw date strings from mock data can be null.
 
-    // Computed properties
-    const filteredData = computed(() => {
-      return data.value.filter(/* logic */)
-    })
+**SVG charts**: All charts are custom SVG (no chart library). Use `computed` to transform data for chart coordinates. Define `viewBox` for responsive scaling.
 
-    // Methods
-    const loadData = async () => {
-      // Implementation
-    }
-
-    // Lifecycle
-    onMounted(() => {
-      loadData()
-    })
-
-    // Return everything used in template
-    return {
-      data,
-      loading,
-      filteredData,
-      loadData
-    }
-  }
-}
-</script>
-
-<style scoped>
-  /* Scoped styles */
-</style>
-```
-
-**Why Composition API:**
-- Better code organization by feature
-- Easier to extract and reuse logic
-- TypeScript support
-- Smaller bundle size
-- More flexible than Options API
-
-### Reactive Data Best Practices
-
-**refs vs computed:**
-- Use `ref()` for values that change via assignment
-- Use `computed()` for values derived from other reactive data
-- computed properties are cached until dependencies change
-- Never mutate computed properties
-
-**Example:**
-```javascript
-// refs - mutable state
-const searchQuery = ref('')
-const items = ref([])
-
-// computed - derived from refs
-const filteredItems = computed(() => {
-  if (!searchQuery.value) return items.value
-  return items.value.filter(item =>
-    item.name.toLowerCase().includes(searchQuery.value.toLowerCase())
-  )
-})
-```
-
-**Accessing ref values:**
-- In `<script>`: Use `.value` (e.g., `count.value++`)
-- In `<template>`: No `.value` needed (automatic unwrapping)
-
-### Data Loading Pattern
-
-**Standard Approach:**
-```javascript
-const loading = ref(true)
-const error = ref(null)
-const data = ref([])
-
-const loadData = async () => {
-  try {
-    loading.value = true
-    error.value = null
-    data.value = await api.getData(filters)
-  } catch (err) {
-    error.value = 'Failed to load data'
-    console.error('Load error:', err)
-  } finally {
-    loading.value = false
-  }
-}
-```
-
-**Display states in template:**
-```vue
-<div v-if="loading">Loading...</div>
-<div v-else-if="error">{{ error }}</div>
-<div v-else>
-  <!-- Show data -->
-</div>
-```
-
-### Filter Management with Composables
-
-**Pattern:**
-1. Create composable for shared state
-2. Export refs for UI binding
-3. Provide helper functions
-4. Watch for changes to trigger effects
-
-**Example composable:**
-```javascript
-// composables/useFilters.js
-import { ref, computed } from 'vue'
-
-const selectedCategory = ref('all')
-const selectedWarehouse = ref('all')
-
-export function useFilters() {
-  const hasActiveFilters = computed(() => {
-    return selectedCategory.value !== 'all' ||
-           selectedWarehouse.value !== 'all'
-  })
-
-  const resetFilters = () => {
-    selectedCategory.value = 'all'
-    selectedWarehouse.value = 'all'
-  }
-
-  const getCurrentFilters = () => {
-    return {
-      category: selectedCategory.value,
-      warehouse: selectedWarehouse.value
-    }
-  }
-
-  return {
-    selectedCategory,
-    selectedWarehouse,
-    hasActiveFilters,
-    resetFilters,
-    getCurrentFilters
-  }
-}
-```
-
-### Reactivity Best Practices
-
-**v-for keys:**
-```vue
-<!-- ❌ Bad - using index -->
-<div v-for="(item, index) in items" :key="index">
-
-<!-- ✅ Good - using unique ID -->
-<div v-for="item in items" :key="item.id">
-```
-
-**Why:** Using index as key causes Vue to reuse DOM elements incorrectly when list changes.
-
-**Prop mutation:**
-```javascript
-// ❌ Bad - mutating props
-props.user.name = 'New Name'
-
-// ✅ Good - emit event to parent
-emit('update:user', { ...props.user, name: 'New Name' })
-```
-
-**Date handling:**
-```javascript
-// ❌ Bad - no validation
-const month = new Date(order.date).getMonth()
-
-// ✅ Good - validate first
-const date = new Date(order.date)
-if (!isNaN(date.getTime())) {
-  const month = date.getMonth()
-}
-```
-
-### Component Communication
-
-**Props Down, Events Up:**
-```javascript
-// Parent component
-<ChildComponent
-  :data="items"
-  @update="handleUpdate"
-/>
-
-// Child component
-props: {
-  data: {
-    type: Array,
-    required: true
-  }
-},
-setup(props, { emit }) {
-  const update = () => {
-    emit('update', newValue)
-  }
-}
-```
-
-**When to use composables:**
-- State shared across multiple components
-- Logic used in multiple places
-- Authentication state
-- Global filters
-- Theme/settings
-
-### Chart Implementation Best Practices
-
-**Use computed properties:**
-```javascript
-const chartData = computed(() => {
-  // Transform raw data for chart
-  return rawData.value.map(item => ({
-    label: item.month,
-    value: item.total
-  }))
-})
-```
-
-**SVG charts:**
-- Define viewBox for responsive scaling
-- Use percentages for positioning when possible
-- Handle empty data gracefully
-- Add ARIA labels for accessibility
-
-**Performance:**
-- Keep chart calculations in computed properties
-- Avoid recalculating on every render
-- Use v-show instead of v-if for frequently toggled charts
-- Debounce resize handlers
-
-### Styling Best Practices
-
-**Scoped styles:**
-```vue
-<style scoped>
-/* Only affects this component */
-.card { }
-</style>
-```
-
-**Use CSS variables for themes:**
-```css
-:root {
-  --primary-color: #3b82f6;
-  --danger-color: #ef4444;
-}
-
-.button {
-  background: var(--primary-color);
-}
-```
-
-**Responsive design:**
-- Use rem/em units for scalability
-- Mobile-first approach
-- CSS Grid for layouts
-- Flexbox for component arrangement
-
-**Class binding:**
-```vue
-<div :class="['card', { 'card-active': isActive }]">
-<div :class="{ danger: hasError, success: isComplete }">
-```
-
-### Performance Considerations
-
-**Computed vs Methods:**
-- Computed: Cached until dependencies change (use for calculations)
-- Methods: Run every time accessed (use for actions)
-
-**v-show vs v-if:**
-- v-show: Toggles CSS display (better for frequent toggles)
-- v-if: Adds/removes from DOM (better for rarely shown content)
-
-**Lazy loading:**
-```javascript
-// Dynamic import for code splitting
-const HeavyComponent = defineAsyncComponent(() =>
-  import('./components/HeavyComponent.vue')
-)
-```
-
-**Watch with debounce:**
-```javascript
-import { watchDebounced } from '@vueuse/core'
-
-watchDebounced(
-  searchQuery,
-  (newValue) => {
-    // API call here
-  },
-  { debounce: 500 }
-)
-```
-
-### Common Pitfalls
-
-**Avoid:**
-- ❌ Using array index as v-for key
-- ❌ Mutating props directly
-- ❌ Forgetting to validate dates before parsing
-- ❌ Heavy computations in methods instead of computed
-- ❌ Not handling loading/error states
-- ❌ Mixing Composition API and Options API in same component
-
-**Do:**
-- ✅ Use unique IDs for keys
-- ✅ Emit events to update parent data
-- ✅ Validate all external data
-- ✅ Use computed properties for derived data
-- ✅ Always show loading and error states
-- ✅ Stick to Composition API throughout project
-
-### API Integration
-
-**Centralize API calls:**
-```javascript
-// api.js
-import axios from 'axios'
-
-const API_BASE = 'http://localhost:8001/api'
-
-export const api = {
-  async getItems(filters) {
-    const params = new URLSearchParams()
-    if (filters.category !== 'all') {
-      params.append('category', filters.category)
-    }
-    const response = await axios.get(`${API_BASE}/items?${params}`)
-    return response.data
-  }
-}
-```
-
-**Use in component:**
-```javascript
-import { api } from '@/api'
-
-const loadItems = async () => {
-  const filters = getCurrentFilters()
-  items.value = await api.getItems(filters)
-}
-```
-
-### Number Formatting
-
-**Currency:**
-```javascript
-const formatted = value.toLocaleString('en-US', {
-  style: 'currency',
-  currency: 'USD'
-})
-// Output: $1,234.56
-```
-
-**Large numbers:**
-```javascript
-const formatted = value.toLocaleString()
-// Output: 1,234,567
-```
-
-**Percentages:**
-```javascript
-const formatted = (value * 100).toFixed(1) + '%'
-// Output: 45.2%
-```
-
-### Testing Components
-
-**What to test:**
-- Component renders correctly
-- Props are handled properly
-- Events are emitted correctly
-- Computed properties calculate correctly
-- User interactions work as expected
-
-**Example:**
-```javascript
-import { mount } from '@vue/test-utils'
-import MyComponent from './MyComponent.vue'
-
-describe('MyComponent', () => {
-  it('displays data correctly', () => {
-    const wrapper = mount(MyComponent, {
-      props: { items: mockItems }
-    })
-    expect(wrapper.text()).toContain('Expected text')
-  })
-})
-```
-
-### Debugging
-
-**Vue DevTools:**
-- Install Vue DevTools browser extension
-- Inspect component hierarchy
-- View reactive state in real-time
-- Track events and performance
-
-**Console logging:**
-```javascript
-// In setup()
-console.log('Data:', data.value)
-
-// Watch for changes
-watch(data, (newVal) => {
-  console.log('Data changed:', newVal)
-})
-```
-
-**Common issues:**
-- Reactivity not working → Forgot `.value` in script
-- Computed not updating → Dependency not reactive
-- Props not reactive → Destructured props in setup
-- v-for not updating → Using wrong key
-
-### Code Organization
-
-**When to extract component:**
-- Template is >100 lines
-- Logic is >150 lines
-- Component is reused in multiple places
-- Component has distinct responsibility
-
-**When to create composable:**
-- State shared across components
-- Reusable logic pattern
-- Complex logic that can be isolated
-- API interaction patterns
-
-**File structure:**
-```
-src/
-├── views/           # Page-level components
-├── components/      # Reusable UI components
-├── composables/     # Shared logic
-├── api.js          # API client
-└── main.js         # App entry
-```
-
-## Quick Reference
-
-**Start dev server:** `npm run dev`
-**Build for production:** `npm run build`
-**Component structure:** Template → Script (Composition API) → Scoped Styles
-**Data loading:** loading state → try/catch → finally
-**Filters:** Composable → refs → watch for changes
-**Keys:** Always use unique IDs, never array index
-**API calls:** Centralize in api.js, wrap in try/catch
+**v-for keys**: Always use `item.id`, never array index.
diff --git a/client/src/App.vue b/client/src/App.vue
index c2da05a5..197df801 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -25,6 +25,9 @@
           <router-link to="/reports" :class="{ active: $route.path === '/reports' }">
             Reports
           </router-link>
+          <router-link to="/restocking" :class="{ active: $route.path === '/restocking' }">
+            {{ t('nav.restocking') }}
+          </router-link>
         </nav>
         <LanguageSwitcher />
         <ProfileMenu
@@ -452,6 +455,11 @@ tbody tr:hover {
   color: #3730a3;
 }
 
+.badge.submitted {
+  background: #e0e7ff;
+  color: #3730a3;
+}
+
 .badge.high {
   background: #fecaca;
   color: #991b1b;
diff --git a/client/src/api.js b/client/src/api.js
index 11cb9db7..26ff21db 100644
--- a/client/src/api.js
+++ b/client/src/api.js
@@ -94,6 +94,11 @@ export const api = {
     return response.data
   },
 
+  async createOrder(orderData) {
+    const response = await axios.post(`${API_BASE_URL}/orders`, orderData)
+    return response.data
+  },
+
   async createPurchaseOrder(purchaseOrderData) {
     const response = await axios.post(`${API_BASE_URL}/purchase-orders`, purchaseOrderData)
     return response.data
diff --git a/client/src/locales/en.js b/client/src/locales/en.js
index 03a58fe6..977c4c8f 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'
   },
@@ -188,6 +189,28 @@ export default {
     }
   },
 
+  // Restocking
+  restocking: {
+    title: 'Restocking',
+    description: 'Set your budget and get smart restock recommendations based on demand forecasts',
+    budgetLabel: 'Available Budget',
+    recommendedItems: 'Recommended Items',
+    placeOrder: 'Place Order',
+    orderPlaced: 'Order placed successfully',
+    demandGrowth: 'Demand Growth',
+    qtyToRestock: 'Qty to Restock',
+    unitCost: 'Unit Cost',
+    totalCost: 'Total Cost',
+    noRecommendations: 'No items need restocking within this budget',
+    submittedOrders: 'Submitted Orders',
+    expectedDelivery14: 'Expected Delivery (14 days)',
+    totalSelected: 'Total Selected',
+    budgetRemaining: 'Budget Remaining',
+    orderNumber: 'Order Number',
+    orderDate: 'Order Date',
+    itemsCount: '{count} items'
+  },
+
   // Filters
   filters: {
     timePeriod: 'Time Period',
@@ -204,6 +227,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 db33223a..4cc5ed87 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: '在庫管理システム'
   },
@@ -188,6 +189,28 @@ export default {
     }
   },
 
+  // Restocking
+  restocking: {
+    title: '補充',
+    description: '予算を設定して、需要予測に基づくスマートな補充提案を受け取ります',
+    budgetLabel: '利用可能な予算',
+    recommendedItems: '推奨品目',
+    placeOrder: '注文を確定',
+    orderPlaced: '注文が正常に確定されました',
+    demandGrowth: '需要増加率',
+    qtyToRestock: '補充数量',
+    unitCost: '単価',
+    totalCost: '合計コスト',
+    noRecommendations: 'この予算内で補充が必要な品目はありません',
+    submittedOrders: '提出済み注文',
+    expectedDelivery14: '予定配達日（14日後）',
+    totalSelected: '選択合計',
+    budgetRemaining: '残りの予算',
+    orderNumber: '注文番号',
+    orderDate: '注文日',
+    itemsCount: '{count}件'
+  },
+
   // Filters
   filters: {
     timePeriod: '期間',
@@ -204,6 +227,7 @@ export default {
     shipped: '出荷済み',
     processing: '処理中',
     backordered: 'バックオーダー',
+    submitted: '提出済み',
     inStock: '在庫あり',
     lowStock: '在庫僅少',
     adequate: '適量'
diff --git a/client/src/main.js b/client/src/main.js
index 477c2d96..8884eea6 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(),
@@ -16,7 +17,8 @@ const router = createRouter({
     { path: '/orders', component: Orders },
     { path: '/demand', component: Demand },
     { path: '/spending', component: Spending },
-    { path: '/reports', component: Reports }
+    { path: '/reports', component: Reports },
+    { path: '/restocking', component: Restocking }
   ]
 })
 
diff --git a/client/src/views/Orders.vue b/client/src/views/Orders.vue
index 7413f6e6..76cfc1cc 100644
--- a/client/src/views/Orders.vue
+++ b/client/src/views/Orders.vue
@@ -27,9 +27,54 @@
         </div>
       </div>
 
+      <!-- Submitted Orders section (restocking orders) -->
+      <div v-if="submittedOrders.length > 0" class="card submitted-card">
+        <div class="card-header">
+          <h3 class="card-title">{{ t('restocking.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.orderDate') }}</th>
+                <th class="col-date">{{ t('restocking.expectedDelivery14') }}</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">{{ 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 submitted">{{ t('status.submitted') }}</span>
+                </td>
+                <td class="col-date">{{ formatDate(order.order_date) }}</td>
+                <td class="col-date delivery-date">{{ formatDate(order.expected_delivery) }}</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') }} ({{ regularOrders.length }})</h3>
         </div>
         <div class="table-container">
           <table class="orders-table">
@@ -45,7 +90,7 @@
               </tr>
             </thead>
             <tbody>
-              <tr v-for="order in orders" :key="order.id">
+              <tr v-for="order in regularOrders" :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">
@@ -129,8 +174,11 @@ export default {
       loadOrders()
     })
 
+    const submittedOrders = computed(() => orders.value.filter(o => o.status === 'Submitted'))
+    const regularOrders = computed(() => orders.value.filter(o => o.status !== 'Submitted'))
+
     const getOrdersByStatus = (status) => {
-      return orders.value.filter(order => order.status === status)
+      return regularOrders.value.filter(order => order.status === status)
     }
 
     const getOrderStatusClass = (status) => {
@@ -138,7 +186,8 @@ export default {
         'Delivered': 'success',
         'Shipped': 'info',
         'Processing': 'warning',
-        'Backordered': 'danger'
+        'Backordered': 'danger',
+        'Submitted': 'submitted'
       }
       return statusMap[status] || 'info'
     }
@@ -160,6 +209,8 @@ export default {
       loading,
       error,
       orders,
+      submittedOrders,
+      regularOrders,
       getOrdersByStatus,
       getOrderStatusClass,
       formatDate,
@@ -203,6 +254,22 @@ export default {
   width: 120px;
 }
 
+/* Submitted Orders card */
+.submitted-card {
+  border-left: 4px solid #6366f1;
+}
+
+/* Submitted badge */
+:deep(.badge.submitted) {
+  background: #e0e7ff;
+  color: #3730a3;
+}
+
+.delivery-date {
+  color: #6366f1;
+  font-weight: 600;
+}
+
 /* Items details styling */
 .items-details {
   position: relative;
diff --git a/client/src/views/Restocking.vue b/client/src/views/Restocking.vue
new file mode 100644
index 00000000..6075b3c5
--- /dev/null
+++ b/client/src/views/Restocking.vue
@@ -0,0 +1,354 @@
+<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="card-header">
+          <h3 class="card-title">{{ t('restocking.budgetLabel') }}</h3>
+          <span class="budget-display">{{ currencySymbol }}{{ budget.toLocaleString() }}</span>
+        </div>
+        <div class="slider-container">
+          <span class="slider-label">{{ currencySymbol }}0</span>
+          <input
+            type="range"
+            class="budget-slider"
+            v-model.number="budget"
+            min="0"
+            max="100000"
+            step="500"
+          />
+          <span class="slider-label">{{ currencySymbol }}100,000</span>
+        </div>
+        <div class="budget-summary">
+          <div class="budget-stat">
+            <span class="budget-stat-label">{{ t('restocking.totalSelected') }}</span>
+            <span class="budget-stat-value spend">{{ currencySymbol }}{{ totalCost.toLocaleString(undefined, { maximumFractionDigits: 0 }) }}</span>
+          </div>
+          <div class="budget-stat">
+            <span class="budget-stat-label">{{ t('restocking.budgetRemaining') }}</span>
+            <span class="budget-stat-value" :class="remaining < 0 ? 'over' : 'remain'">
+              {{ currencySymbol }}{{ remaining.toLocaleString(undefined, { maximumFractionDigits: 0 }) }}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Success Banner -->
+      <div v-if="lastOrder" class="success-banner">
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+          <circle cx="10" cy="10" r="10" fill="#059669"/>
+          <path d="M6 10l3 3 5-5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+        <div>
+          <strong>{{ t('restocking.orderPlaced') }}</strong> —
+          {{ lastOrder.order_number }} &middot; {{ t('orders.table.expectedDelivery') }}: {{ formatDate(lastOrder.expected_delivery) }}
+        </div>
+        <button class="dismiss-btn" @click="lastOrder = null">✕</button>
+      </div>
+
+      <!-- Recommended Items -->
+      <div class="card">
+        <div class="card-header">
+          <h3 class="card-title">{{ t('restocking.recommendedItems') }} ({{ recommendedItems.length }})</h3>
+          <button
+            class="place-order-btn"
+            :disabled="recommendedItems.length === 0 || placing"
+            @click="placeOrder"
+          >
+            {{ placing ? t('common.loading') : t('restocking.placeOrder') }}
+          </button>
+        </div>
+
+        <div v-if="recommendedItems.length === 0" class="no-items">
+          {{ t('restocking.noRecommendations') }}
+        </div>
+        <div v-else class="table-container">
+          <table>
+            <thead>
+              <tr>
+                <th>{{ t('inventory.table.sku') }}</th>
+                <th>{{ t('inventory.table.itemName') }}</th>
+                <th>{{ t('restocking.demandGrowth') }}</th>
+                <th>{{ t('restocking.qtyToRestock') }}</th>
+                <th>{{ t('restocking.unitCost') }}</th>
+                <th>{{ t('restocking.totalCost') }}</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="item in recommendedItems" :key="item.sku">
+                <td><strong>{{ item.sku }}</strong></td>
+                <td>{{ item.name }}</td>
+                <td>
+                  <span class="badge increasing">+{{ item.demandGrowthPct.toFixed(1) }}%</span>
+                </td>
+                <td>{{ item.qtyToRestock.toLocaleString() }}</td>
+                <td>{{ currencySymbol }}{{ item.unitCost.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }) }}</td>
+                <td><strong>{{ currencySymbol }}{{ item.itemCost.toLocaleString(undefined, { maximumFractionDigits: 0 }) }}</strong></td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, computed, onMounted, watch } from 'vue'
+import { api } from '../api'
+import { useFilters } from '../composables/useFilters'
+import { useI18n } from '../composables/useI18n'
+
+export default {
+  name: 'Restocking',
+  setup() {
+    const { t, currentCurrency } = useI18n()
+    const { selectedLocation, selectedCategory, getCurrentFilters } = useFilters()
+
+    const currencySymbol = computed(() => currentCurrency.value === 'JPY' ? '¥' : '$')
+
+    const loading = ref(true)
+    const error = ref(null)
+    const placing = ref(false)
+    const lastOrder = ref(null)
+    const budget = ref(10000)
+
+    const allForecasts = ref([])
+    const inventoryMap = ref({})  // keyed by sku
+
+    const loadData = async () => {
+      try {
+        loading.value = true
+        error.value = null
+        const filters = getCurrentFilters()
+        const [forecasts, inventoryItems] = await Promise.all([
+          api.getDemandForecasts(),
+          api.getInventory({ warehouse: filters.warehouse, category: filters.category })
+        ])
+        allForecasts.value = forecasts
+        inventoryMap.value = Object.fromEntries(inventoryItems.map(i => [i.sku, i]))
+      } catch (err) {
+        error.value = 'Failed to load data: ' + err.message
+      } finally {
+        loading.value = false
+      }
+    }
+
+    watch([selectedLocation, selectedCategory], loadData)
+    onMounted(loadData)
+
+    // Items eligible for restocking: have inventory data, and need restocking
+    const eligibleItems = computed(() => {
+      return allForecasts.value
+        .filter(f => {
+          const inv = inventoryMap.value[f.item_sku]
+          if (!inv) return false
+          const qty = Math.max(0, inv.reorder_point - inv.quantity_on_hand)
+          return qty > 0 && f.current_demand > 0
+        })
+        .map(f => {
+          const inv = inventoryMap.value[f.item_sku]
+          const qtyToRestock = Math.max(0, inv.reorder_point - inv.quantity_on_hand)
+          const demandGrowthPct = ((f.forecasted_demand - f.current_demand) / f.current_demand) * 100
+          return {
+            sku: f.item_sku,
+            name: f.item_name,
+            demandGrowthPct,
+            qtyToRestock,
+            unitCost: inv.unit_cost,
+            itemCost: qtyToRestock * inv.unit_cost,
+            warehouse: inv.warehouse,
+            category: inv.category
+          }
+        })
+        .sort((a, b) => b.demandGrowthPct - a.demandGrowthPct)
+    })
+
+    // Greedy selection within budget
+    const recommendedItems = computed(() => {
+      let remaining = budget.value
+      const selected = []
+      for (const item of eligibleItems.value) {
+        if (item.itemCost <= remaining) {
+          selected.push(item)
+          remaining -= item.itemCost
+        }
+      }
+      return selected
+    })
+
+    const totalCost = computed(() =>
+      recommendedItems.value.reduce((sum, i) => sum + i.itemCost, 0)
+    )
+
+    const remaining = computed(() => budget.value - totalCost.value)
+
+    const formatDate = (dateString) => {
+      return new Date(dateString).toLocaleDateString('en-US', {
+        year: 'numeric', month: 'short', day: 'numeric'
+      })
+    }
+
+    const placeOrder = async () => {
+      if (recommendedItems.value.length === 0) return
+      placing.value = true
+      try {
+        const filters = getCurrentFilters()
+        const items = recommendedItems.value.map(i => ({
+          sku: i.sku,
+          name: i.name,
+          quantity: i.qtyToRestock,
+          unit_price: i.unitCost
+        }))
+        const order = await api.createOrder({
+          customer: 'Restocking System',
+          items,
+          warehouse: filters.warehouse !== 'all' ? filters.warehouse : null,
+          category: filters.category !== 'all' ? filters.category : null
+        })
+        lastOrder.value = order
+      } catch (err) {
+        error.value = 'Failed to place order: ' + err.message
+      } finally {
+        placing.value = false
+      }
+    }
+
+    return {
+      t,
+      loading,
+      error,
+      placing,
+      lastOrder,
+      budget,
+      currencySymbol,
+      recommendedItems,
+      totalCost,
+      remaining,
+      formatDate,
+      placeOrder
+    }
+  }
+}
+</script>
+
+<style scoped>
+.budget-card .card-header {
+  align-items: center;
+}
+
+.budget-display {
+  font-size: 1.75rem;
+  font-weight: 700;
+  color: #2563eb;
+  letter-spacing: -0.025em;
+}
+
+.slider-container {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.5rem 0 1rem;
+}
+
+.budget-slider {
+  flex: 1;
+  height: 6px;
+  accent-color: #2563eb;
+  cursor: pointer;
+}
+
+.slider-label {
+  font-size: 0.813rem;
+  color: #64748b;
+  white-space: nowrap;
+}
+
+.budget-summary {
+  display: flex;
+  gap: 2rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid #f1f5f9;
+}
+
+.budget-stat {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.budget-stat-label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: #64748b;
+}
+
+.budget-stat-value {
+  font-size: 1.25rem;
+  font-weight: 700;
+}
+
+.budget-stat-value.spend { color: #0f172a; }
+.budget-stat-value.remain { color: #059669; }
+.budget-stat-value.over { color: #dc2626; }
+
+.success-banner {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  background: #f0fdf4;
+  border: 1px solid #bbf7d0;
+  border-radius: 10px;
+  padding: 1rem 1.25rem;
+  margin-bottom: 1.25rem;
+  color: #065f46;
+  font-size: 0.938rem;
+}
+
+.dismiss-btn {
+  margin-left: auto;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: #64748b;
+  font-size: 1rem;
+  padding: 0.25rem;
+}
+
+.dismiss-btn:hover { color: #0f172a; }
+
+.place-order-btn {
+  background: #2563eb;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  padding: 0.625rem 1.5rem;
+  font-size: 0.938rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.place-order-btn:hover:not(:disabled) { background: #1d4ed8; }
+
+.place-order-btn:disabled {
+  background: #94a3b8;
+  cursor: not-allowed;
+}
+
+.no-items {
+  padding: 3rem;
+  text-align: center;
+  color: #64748b;
+  font-size: 0.938rem;
+}
+</style>
diff --git a/server/CLAUDE.md b/server/CLAUDE.md
index bca8f787..2037f679 100644
--- a/server/CLAUDE.md
+++ b/server/CLAUDE.md
@@ -2,285 +2,30 @@
 
 This file provides guidance to Claude Code (claude.ai/code) when working with the FastAPI backend.
 
-## Running the Server
+## Commands
 
 ```bash
-# From server directory
-uv run python main.py
-# Server runs on http://localhost:8001
-# API docs at http://localhost:8001/docs
+uv sync                  # Install dependencies
+uv run python main.py    # Start on http://localhost:8001 (API docs at /docs)
 ```
 
-## Development Best Practices
+## Architecture
 
-### API Design Principles
+- `main.py` — all FastAPI endpoints plus `apply_filters()` and `filter_by_month()` helpers. Everything lives here (no separate modules).
+- `mock_data.py` — loads `data/*.json` into module-level globals at startup. Data is in-memory; restart to reload.
+- `data/*.json` — source of truth: `inventory.json`, `orders.json`, `spending.json`, `demand_forecasts.json`, `backlog_items.json`, `purchase_orders.json`, `transactions.json`.
 
-**RESTful Design:**
-- Use appropriate HTTP methods (GET for retrieval, POST for creation, etc.)
-- Return proper status codes (200, 201, 404, 400, 500)
-- Use plural nouns for resource endpoints (`/api/orders`, not `/api/order`)
-- Keep URLs simple and predictable
+## Key Patterns
 
-**Request/Response:**
-- Always validate input with Pydantic models
-- Return consistent response structure
-- Include error details in error responses
-- Use ISO 8601 for dates (YYYY-MM-DD or YYYY-MM-DDTHH:MM:SS)
+**Never mutate globals**: Always filter on a copy — `results = [r for r in all_items if ...]`.
 
-### Adding New Endpoints
+**Filter params**: All endpoints accept `warehouse`, `category`, `status`, `month` as optional query params. Skip filter when value is `'all'` or `None`. Inventory endpoints do **not** support `month` (no time dimension on inventory data).
 
-**Process:**
-1. Define Pydantic model for data validation
-2. Create endpoint function with clear name
-3. Add route decorator with explicit path
-4. Implement business logic
-5. Handle errors appropriately
-6. Write tests in `tests/backend/`
+**Date/quarter formats**: `apply_filters` handles both `2025-01` (month) and `Q1-2025` (quarter). Parse safely and skip records with null dates.
 
-**Example Pattern:**
-```python
-class MyModel(BaseModel):
-    id: str
-    name: str
-    value: float
+**Adding an endpoint**:
+1. Define Pydantic response model
+2. Add `@app.get` route, filter on copy of data, return typed response
+3. Write tests in `tests/backend/`
 
-@app.get("/api/resource", response_model=List[MyModel])
-def get_resources(
-    filter_param: Optional[str] = None,
-    category: Optional[str] = None
-):
-    """Get resources with optional filtering."""
-    results = all_resources
-
-    if filter_param and filter_param != 'all':
-        results = [r for r in results if r['field'] == filter_param]
-
-    if category and category != 'all':
-        results = [r for r in results if r['category'].lower() == category.lower()]
-
-    return results
-```
-
-### Data Model Best Practices
-
-**Pydantic Models:**
-- Define once, use everywhere
-- Make optional fields explicitly `Optional[Type]`
-- Use descriptive field names
-- Add default values where appropriate
-- Keep models close to their usage
-
-**Model Updates:**
-- When adding fields to JSON data, update Pydantic models
-- When removing fields, mark as Optional first, then remove
-- Consider backwards compatibility
-- Update tests when models change
-
-### Filtering Best Practices
-
-**Standard Pattern:**
-- Accept filter parameters as optional query params
-- Check for 'all' value and skip that filter
-- Use lowercase comparison for case-insensitive matching
-- Apply filters sequentially for code clarity
-- Don't mutate original data - filter on copies
-
-**Filter Implementation:**
-```python
-def filter_data(data, warehouse=None, category=None):
-    """Filter data by multiple criteria."""
-    filtered = data
-
-    if warehouse and warehouse != 'all':
-        filtered = [item for item in filtered
-                   if item.get('warehouse') == warehouse]
-
-    if category and category != 'all':
-        filtered = [item for item in filtered
-                   if item.get('category', '').lower() == category.lower()]
-
-    return filtered
-```
-
-**Date/Time Filtering:**
-- Support both direct month match (2025-01) and quarters (Q1-2025)
-- Parse date strings safely
-- Handle missing/null dates gracefully
-- Consider timezone if adding real database
-
-### Error Handling
-
-**Use HTTPException:**
-```python
-from fastapi import HTTPException
-
-@app.get("/api/item/{item_id}")
-def get_item(item_id: str):
-    item = find_item(item_id)
-    if not item:
-        raise HTTPException(
-            status_code=404,
-            detail=f"Item {item_id} not found"
-        )
-    return item
-```
-
-**Best Practices:**
-- Return 404 for "not found" errors
-- Return 400 for bad input/validation errors
-- Return 500 for server errors (let FastAPI handle these)
-- Include helpful error messages
-- Log errors for debugging
-
-### Mock Data Management
-
-**Pattern:**
-- Load all data from JSON files at startup
-- Data lives in memory during server runtime
-- Changes don't persist (restart reloads from files)
-- Keep JSON files well-formatted and validated
-
-**Adding New Data:**
-1. Update JSON file in `server/data/`
-2. Update Pydantic model if structure changed
-3. Restart server to reload data
-4. Verify with API docs (/docs endpoint)
-
-**Data Consistency:**
-- Ensure SKUs in orders reference valid inventory items
-- Keep category names consistent across data files
-- Use same date format everywhere
-- Validate JSON structure before committing
-
-### CORS Configuration
-
-**Development:**
-- Allow all origins during development (`allow_origins=["*"]`)
-- Useful for frontend dev server on different port
-
-**Production:**
-- Restrict to specific origins only
-- Example: `allow_origins=["https://yourdomain.com"]`
-- Never use wildcard (*) in production
-- Configure based on deployment environment
-
-### Testing API Endpoints
-
-**Using FastAPI Docs:**
-1. Start server
-2. Navigate to http://localhost:8001/docs
-3. Click endpoint to expand
-4. Click "Try it out"
-5. Fill in parameters
-6. Execute and verify response
-
-**Using pytest:**
-```python
-def test_endpoint(client):
-    response = client.get("/api/endpoint?param=value")
-    assert response.status_code == 200
-    data = response.json()
-    assert isinstance(data, list)
-    assert len(data) > 0
-```
-
-**What to Test:**
-- Successful requests return 200
-- Invalid IDs return 404
-- Filters work correctly
-- Response structure matches model
-- Calculations are accurate
-- Edge cases (empty results, invalid input)
-
-### Performance Considerations
-
-**In-Memory Data:**
-- Fast reads (no database queries)
-- No indexing needed for demo
-- All filtering happens in Python
-- Reasonable for small datasets (<10K items)
-
-**If Scaling:**
-- Add database (PostgreSQL, MongoDB)
-- Implement pagination
-- Add caching layer (Redis)
-- Use database indexes for common filters
-- Consider async database queries
-
-### Code Organization
-
-**When to Extract:**
-- Filtering logic used in multiple endpoints → Extract to utility function
-- Complex business logic → Move to separate module
-- Data validation beyond Pydantic → Create custom validators
-- Repeated calculations → Extract to helper functions
-
-**Module Structure for Growth:**
-```
-server/
-├── main.py           # API endpoints only
-├── models.py         # Pydantic models
-├── services/         # Business logic
-│   ├── inventory.py
-│   └── orders.py
-├── utils/            # Helper functions
-│   └── filters.py
-└── data/             # JSON data files
-```
-
-### Common Pitfalls
-
-**Avoid:**
-- ❌ Mutating global data (filter on copies)
-- ❌ Missing Pydantic model updates when JSON changes
-- ❌ Inconsistent filter parameter names across endpoints
-- ❌ Returning raw dict instead of Pydantic model
-- ❌ Not handling None/null values in data
-
-**Do:**
-- ✅ Validate all input with Pydantic
-- ✅ Return typed responses (response_model)
-- ✅ Handle optional parameters gracefully
-- ✅ Keep endpoints focused and simple
-- ✅ Write tests for new endpoints
-
-### Debugging
-
-**Techniques:**
-- Use FastAPI's automatic docs for quick testing
-- Print statements in endpoint functions (shows in terminal)
-- Check Pydantic validation errors in response
-- Use Python debugger (`import pdb; pdb.set_trace()`)
-- Review JSON data files for structure issues
-
-**Common Issues:**
-- Data not loading → Check JSON file path
-- Validation errors → Verify Pydantic model matches data
-- Empty results → Check filter logic and data
-- 404 errors → Verify route path and HTTP method
-
-### Security Notes
-
-**For Production:**
-- Add authentication/authorization
-- Validate and sanitize all input
-- Use HTTPS only
-- Implement rate limiting
-- Add input size limits
-- Use environment variables for sensitive config
-- Never commit secrets to git
-
-**Current State:**
-- No authentication (demo only)
-- CORS allows all origins
-- No rate limiting
-- No input validation beyond types
-- Suitable for local development only
-
-## Quick Reference
-
-**Start server:** `uv run python main.py`
-**API docs:** http://localhost:8001/docs
-**Run tests:** `cd ../tests && uv run pytest backend/ -v`
-**Add endpoint:** Define model → Add route → Write tests
-**Add filter:** Add query param → Check 'all' value → Filter data
+**Adding data**: Update JSON in `server/data/` → update Pydantic model if structure changed → restart server.
diff --git a/server/main.py b/server/main.py
index a0c2d8c5..86cb042b 100644
--- a/server/main.py
+++ b/server/main.py
@@ -2,6 +2,7 @@
 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")
@@ -120,6 +121,12 @@ class CreatePurchaseOrderRequest(BaseModel):
     expected_delivery_date: str
     notes: Optional[str] = None
 
+class CreateOrderRequest(BaseModel):
+    customer: str
+    items: List[dict]
+    warehouse: Optional[str] = None
+    category: Optional[str] = None
+
 # API endpoints
 @app.get("/")
 def root():
@@ -153,6 +160,29 @@ def get_orders(
     filtered_orders = filter_by_month(filtered_orders, month)
     return filtered_orders
 
+@app.post("/api/orders", response_model=Order)
+def create_order(request: CreateOrderRequest):
+    """Create a new restocking order"""
+    new_id = str(len(orders) + 1)
+    order_date = datetime.utcnow().isoformat()
+    expected_delivery = (datetime.utcnow() + timedelta(days=14)).isoformat()
+    total_value = sum(i.get("quantity", 0) * i.get("unit_price", 0) for i in request.items)
+    order = {
+        "id": new_id,
+        "order_number": f"ORD-RESTOCK-{new_id.zfill(4)}",
+        "customer": request.customer,
+        "items": request.items,
+        "status": "Submitted",
+        "warehouse": request.warehouse,
+        "category": request.category,
+        "order_date": order_date,
+        "expected_delivery": expected_delivery,
+        "total_value": round(total_value, 2),
+        "actual_delivery": None
+    }
+    orders.append(order)
+    return order
+
 @app.get("/api/orders/{order_id}", response_model=Order)
 def get_order(order_id: str):
     """Get a specific order"""