Overview
++ The system is organized into a Vue 3 single-page application (port 3000) that + renders all UI and charts, and a FastAPI service (port 8001) that exposes a + read-focused REST API over sample data. There is no database — the backend loads JSON files + from disk into memory at startup and serves them through validated, filterable endpoints. + Communication is one direction at runtime: the browser calls the API over HTTP/JSON via Axios. +
+Presentation
+ +- 7 routed views
- 9 reusable components
- Custom SVG charts, i18n (EN/JA)
Application
+ +- REST endpoints + filtering
- Pydantic validation
- CORS for the dev frontend
Data
+ +- 7 JSON datasets
- Loaded once at startup
- In-memory, read-only
Tech Stack
+Frontend
+ +-
+
- Vue 3 (Composition API) +
- Vite 5 dev server & build +
- vue-router 4 (history mode) +
- Axios HTTP client +
- Composables: filters, auth, i18n +
- Hand-rolled SVG charts +
Backend
+ +-
+
- Python ≥ 3.11 +
- FastAPI web framework +
- Uvicorn ASGI server +
- Pydantic v2 models +
- CORS middleware +
Data
+ +-
+
- inventory.json +
- orders.json +
- demand_forecasts.json +
- backlog_items.json +
- purchase_orders.json +
- spending.json · transactions.json +
Tooling
+ +-
+
- uv (Python env & deps) +
- npm (frontend deps) +
- pytest + FastAPI TestClient +
- .claude/ agents, commands, hooks +
Architecture
+Each box is a real layer in the codebase. Data is loaded bottom-up at startup, + and requests flow top-down at runtime.
+ +Browser — Vue 3 SPA
+ localhost:3000 +FastAPI Service
+ localhost:8001 +Data Layer — JSON files
+ server/data/ · read-only +Data Flow
+The four global filters — Time Period, Warehouse, Category, Order Status — live in a
+ shared useFilters composable and drive every data fetch. Here is the round trip when a
+ user changes a filter on the Dashboard.
User changes a filter
+The FilterBar updates shared refs in useFilters.js
+ (selectedPeriod, selectedLocation, selectedCategory,
+ selectedStatus).
View reacts & requests data
+The active view calls getCurrentFilters() and passes the result to a method on
+ api.js, e.g. api.getDashboardSummary(filters).
Axios builds the HTTP request
+Non-"all" filters become query params and Axios issues
+ GET http://localhost:8001/api/dashboard/summary?warehouse=…&month=….
FastAPI filters in memory
+The route handler runs apply_filters() (warehouse / category / status) and
+ filter_by_month() (month or quarter) over the in-memory lists.
Pydantic validates the response
+Results are shaped/validated against models (InventoryItem, Order,
+ …) and serialized to JSON.
Vue renders
+The view stores raw data in refs; computed properties derive metrics and + chart inputs, and the SVG charts & tables re-render reactively.
API Surface
+All filtering is done via optional query params: warehouse,
+ category, status, month. Inventory has no time dimension, so
+ it ignores status/month.
| Method | Path | Purpose | Filters |
|---|---|---|---|
| GET | /api/inventory | Inventory items | warehouse, category |
| GET | /api/inventory/{id} | Single item (404 if missing) | — |
| GET | /api/orders | Orders | warehouse, category, status, month |
| GET | /api/orders/{id} | Single order | — |
| GET | /api/demand | Demand forecasts | — |
| GET | /api/backlog | Backlog + has_purchase_order flag | — |
| GET | /api/dashboard/summary | Aggregate KPIs | all four |
| GET | /api/spending/* | summary · monthly · categories · transactions | — |
| GET | /api/reports/quarterly | Quarterly performance | — |
| GET | /api/reports/monthly-trends | Month-over-month trends | — |
| PLANNED | /api/tasks, /api/purchase-orders | Client (api.js) already calls these; backend routes not yet implemented | — |
api.js defines methods for Tasks and
+ Purchase-Order endpoints (and a CreatePurchaseOrderRequest model exists in
+ main.py), but the matching backend routes are not yet wired up — the client is
+ slightly ahead of the server here.
+