| {{ order.order_number }} | {{ translateCustomerName(order.customer) }} | @@ -74,6 +78,56 @@ |
| {{ t('orders.table.orderNumber') }} | +{{ t('orders.table.customer') }} | +{{ t('orders.table.items') }} | +{{ t('orders.table.status') }} | +{{ t('orders.table.orderDate') }} | +{{ t('orders.table.expectedDelivery') }} | +{{ t('orders.table.totalValue') }} | +{{ t('orders.leadTime') }} | +
|---|---|---|---|---|---|---|---|
| {{ order.order_number }} | +{{ translateCustomerName(order.customer) }} | +
+
+
+ + {{ t('orders.itemsCount', { count: order.items.length }) }} ++
+
+
+ {{ translateProductName(item.name) }}
+
+
+ |
+ + + {{ t(`status.${order.status.toLowerCase()}`) }} + + | +{{ formatDate(order.order_date) }} | +{{ formatDate(order.expected_delivery) }} | +{{ currencySymbol }}{{ order.total_value.toLocaleString() }} | +{{ getLeadTimeDays(order) }} | +
{{ t('restocking.description') }}
+| {{ t('restocking.table.sku') }} | +{{ t('restocking.table.itemName') }} | +{{ t('restocking.table.trend') }} | +{{ t('restocking.table.gapQuantity') }} | +{{ t('restocking.table.unitCost') }} | +{{ t('restocking.table.lineCost') }} | +
|---|---|---|---|---|---|
| {{ item.sku }} | +{{ item.name }} | ++ + {{ t(`trends.${item.trend}`) }} + + | +{{ item.quantity.toLocaleString() }} | +{{ formatCurrency(item.unit_cost, currentCurrency) }} | +{{ formatCurrency(item.line_cost, currentCurrency) }} | +
System architecture reference — a full-stack demo for inventory, orders, demand forecasting, and spending analytics. Vue 3 single-page app backed by a Python FastAPI service serving in-memory mock data.
+Two independent processes during development: a Vite dev server hosting the Vue 3 client on port 3000, and a Uvicorn/FastAPI process on port 8001. The client talks to the API exclusively over HTTP/JSON via a single Axios client. The backend holds no database — it loads JSON fixtures from server/data/ into memory at startup and filters them in Python on each request.
allow_origins=["*"])/docsserver/data/mock_data.pyuv for Python env & depsnpm for client depsclient/src/api.js
+ http://localhost:8001/apiHow a filtered view renders — e.g. selecting a warehouse on the Orders page:
+useFilters.js (singleton state).getCurrentFilters() and passes the result to an api.js method. Time Period maps to a month param (e.g. 2025-03 or Q1-2025)."all" filters are appended as query params; the request hits GET /api/... on the FastAPI service.apply_filters() narrows by warehouse / category / status; filter_by_month() resolves direct months and quarter ranges against order_date.response_model types (InventoryItem, Order, …) and returned as JSON.computed properties derive metrics, chart series, and tables that update reactively.| Method | Path | Filters / Notes |
|---|---|---|
| GET | /api/inventory | warehouse, category |
| GET | /api/inventory/{item_id} | single item · 404 if missing |
| GET | /api/orders | warehouse, category, status, month |
| GET | /api/orders/{order_id} | single order · 404 if missing |
| GET | /api/dashboard/summary | all 4 filters · computed KPIs |
| GET | /api/demand | none |
| GET | /api/backlog | none · injects has_purchase_order |
| GET | /api/spending/{summary|monthly|categories|transactions} | none |
| GET | /api/reports/quarterly | aggregates orders by quarter |
| GET | /api/reports/monthly-trends | month-over-month aggregation |
Known gap: the client (api.js) also calls /api/tasks (GET/POST/DELETE/PATCH) and /api/purchase-orders (GET/POST). These routes are not defined in main.py, so those features will currently return 404 against the live backend.
inventory-management/ +├── client/ # Vue 3 + Vite frontend (:3000) +│ └── src/ +│ ├── views/ # Dashboard, Inventory, Orders, Demand, Spending, Reports +│ ├── components/ # FilterBar, detail modals, ProfileMenu, LanguageSwitcher +│ ├── composables/ # useFilters, useI18n, useAuth +│ ├── locales/ # en.js, ja.js +│ ├── api.js # single Axios API client +│ └── main.js # app entry + Vue Router +├── server/ # FastAPI backend (:8001) +│ ├── main.py # endpoints, Pydantic models, filter helpers +│ ├── mock_data.py # loads JSON fixtures into memory +│ └── data/ # *.json fixtures (source of truth) +├── tests/backend/ # pytest + FastAPI TestClient +└── docs/ # this page+
Filter refs live at module scope in useFilters.js, so every view shares one reactive source of truth. getCurrentFilters() shapes them for the API.
Raw API responses are stored in refs; all derived data (totals, KPIs, chart series) lives in cached computed properties.
The backend never mutates the loaded lists — each request filters copies. Restarting the server resets all data to the JSON fixtures.
+Response models define the API shape. Changing a JSON field requires updating the matching Pydantic model.
+