01 Overview
+A three-tier single-page application. A Vue 3 client renders dashboards and tables; a FastAPI backend serves a read-only REST API; data lives entirely in memory, loaded from JSON files at startup — there is no database.
+Vue 3 SPA
+-
+
- 7 page views, 9 reusable components +
- Client-side routing (vue-router) +
- Global filter & i18n state +
FastAPI Service
+-
+
- ~15 REST endpoints +
- Pydantic response validation +
- In-memory filtering & aggregation +
JSON Mock Store
+-
+
- 7 JSON files loaded at boot +
- Held in memory (no persistence) +
- Restart to reload from disk +
02 Technology Stack
+Frameworks, libraries, and tooling on each tier.
+Client
+-
+
- Vue 3.4 — Composition API +
- Vue Router 4 — web history +
- Axios 1.6 — HTTP client +
- Vite 5 — dev server & build +
- Custom SVG charts, scoped CSS +
Server
+-
+
- Python 3.11+ +
- FastAPI 0.110+ — routing +
- Uvicorn 0.24+ — ASGI server +
- Pydantic 2.5+ — validation +
- CORS middleware (wildcard, dev) +
Storage
+-
+
- JSON files in
server/data/
+ - Loaded via
mock_data.py
+ - Inventory, orders, demand, backlog +
- Spending, transactions, purchase orders +
- No database, no ORM +
Dev & Ops
+-
+
uv— Python env & deps
+ npm— client deps
+ - OpenAPI docs at
/docs
+ - pytest — backend tests +
03 System Architecture
+Layered view of the runtime. Each tier communicates only with the one directly below it.
+Vue 3 Single-Page Application
+App.vue) renders a header, global filter bar, and the active route view.FastAPI Application (main.py)
+ In-Memory Mock Store (mock_data.py)
+ 04 Data Flow
+A single request cycle, e.g. a user changing the Warehouse filter on the Orders page.
+User changes a filter
+A dropdown in FilterBar.vue updates a shared ref in useFilters().
Reactive watch fires
+Views watch the filter refs and call their loadData() method.
API request
+api.js maps filters to query params and issues an Axios GET.
FastAPI filters
+Handler runs apply_filters() / filter_by_month() over in-memory lists.
Validate & respond
+Pydantic models shape the JSON response returned to the client.
+Render
+Response fills reactive refs; computed properties drive tables & SVG charts.
+05 API Surface
+Core read-only endpoints and the filters each accepts. Four global filters — warehouse, category, status, month — map from the UI filter bar.
| Endpoint | Method | Returns | Filters |
|---|---|---|---|
/api/inventory | GET | +Inventory items (SKU, stock, reorder point, cost, location) | +warehousecategory | +
/api/orders | GET | +Orders with line items & status | +warehousecategorystatusmonth | +
/api/dashboard/summary | GET | +Aggregated KPIs (inventory value, low stock, pending orders, backlog) | +warehousecategorystatusmonth | +
/api/demand | GET | +Demand forecasts (current vs. forecasted, trend) | +none | +
/api/backlog | GET | +Backlog items enriched with has_purchase_order |
+ none | +
/api/spending/{summary,monthly,categories,transactions} | GET | +Spending totals, 12-month breakdown, by category, and transactions | +none | +
/api/reports/{quarterly,monthly-trends} | GET | +Quarterly performance & month-over-month trends (computed from orders) | +none | +
/api/inventory/{id} · /api/orders/{id} | GET | +Single item / order by id (404 if absent) | +path param | +
06 The Four-Filter System
+A single global filter bar drives every data view. Filter state is a shared singleton in useFilters(); "all" values are omitted from the query string.
| UI Filter | Composable ref | API param | Applies to |
|---|---|---|---|
| Time Period | selectedPeriod | month | Orders, Dashboard, Spending |
| Location (Warehouse) | selectedLocation | warehouse | Inventory, Orders, Dashboard |
| Category | selectedCategory | category | Inventory, Orders, Dashboard |
| Order Status | selectedStatus | status | Orders, Dashboard |