+
+
+
+
+
+
+
Tech Stack
+
+
Vue 3 + Composition API
+
Vite 5 — port 3000
+
Python FastAPI — port 8001
+
Pydantic v2
+
Uvicorn
+
Axios
+
JSON flat-file data
+
No database
+
+
+
+
+
+
System Overview
+
+
+
Frontend
+
Vue 3 SPA
+
+ - 7 page views (Dashboard, Inventory, Orders, Demand, Spending, Reports, Backlog)
+ - 9 reusable UI components
+ - 3 composables for shared state
+ - Centralized API client (axios)
+ - EN / JA i18n with USD / JPY currency
+ - Custom SVG charts (no external lib)
+
+
+
+
Backend
+
FastAPI REST API
+
+ - 14 GET endpoints + 4 planned POST/PATCH/DELETE
+ - In-memory filtering (warehouse, category, status, month/quarter)
+ - Pydantic models for all responses
+ - CORS open for local dev
+ - Auto-generated docs at
/docs
+
+
+
+
Data Layer
+
JSON Flat Files
+
+ inventory.json — ~15 SKUsorders.json — 200+ orders (Jan–Dec 2025)demand_forecasts.json — 10 itemsbacklog_items.json — 5 itemsspending.json — 12 monthstransactions.json — 50+ records
+
+
+
+
+
+
+
Data Flow
+
+
+
+
+
FilterBar.vue
useFilters composable
+
period / warehouse
category / status
+
+
→
+
+
View Component
Dashboard / Orders / etc.
+
watches filter refs
+
+
→
+
+
api.js
axios client
+
getCurrentFilters()
+
+
→
+
+
HTTP GET
?warehouse=X&month=2025-01
+
query params
+
+
→
+
+
FastAPI
main.py endpoint
+
apply_filters() + filter_by_month()
+
+
→
+
+
mock_data.py
in-memory arrays
+
JSON loaded at startup
+
+
+
+
+ Response path: JSON data files
+ → In-memory list
+ → Pydantic validation
+ → JSON response
+ → Vue ref (raw data)
+ → computed() properties
+ → template render
+
+
+
+
+
+
+
Global Filter System
+
+
+
useFilters Composable
+
Singleton module — all views share the same reactive state.
+
+ selectedPeriod — month (2025-01) or quarter (Q1-2025) or "all"selectedLocation — San Francisco / London / Tokyo / "all"selectedCategory — Circuit Boards / Sensors / etc. / "all"selectedStatus — Delivered / Shipped / Processing / Backordered / "all"
+
+
+
Backend Filter Logic
+
Filters applied sequentially on in-memory copies (non-mutating).
+
+ - Warehouse: exact match
+ - Category: case-insensitive match
+ - Status: exact match
+ - Month: direct (2025-01) or quarter expansion (Q1 = 01, 02, 03)
+ - Inventory endpoints do not support month filter
+
+
+
+
+
+
+
+
API Endpoints — http://localhost:8001
+
+
+
+
+ | Method |
+ Endpoint |
+ Query Params |
+ Returns |
+
+
+
+
+ | GET |
+ /api/inventory |
+ warehouse, category |
+ List of SKUs with stock levels |
+
+
+ | GET |
+ /api/inventory/{id} |
+ — |
+ Single inventory item |
+
+
+ | GET |
+ /api/orders |
+ warehouse, category, status, month |
+ List of orders with line items |
+
+
+ | GET |
+ /api/orders/{id} |
+ — |
+ Single order |
+
+
+ | GET |
+ /api/demand |
+ — |
+ Demand forecasts with trend signals |
+
+
+ | GET |
+ /api/backlog |
+ — |
+ Backlog items enriched with has_purchase_order flag |
+
+
+ | GET |
+ /api/dashboard/summary |
+ warehouse, category, status, month |
+ KPI aggregates (inventory value, low stock, pending orders) |
+
+
+ | GET |
+ /api/spending/summary |
+ — |
+ Total costs + YoY % changes |
+
+
+ | GET |
+ /api/spending/monthly |
+ — |
+ 12-month breakdown by cost type |
+
+
+ | GET |
+ /api/spending/categories |
+ — |
+ Spending totals by category |
+
+
+ | GET |
+ /api/spending/transactions |
+ — |
+ 50+ recent transaction records |
+
+
+ | GET |
+ /api/reports/quarterly |
+ — |
+ Q1–Q4 2025 performance metrics |
+
+
+ | GET |
+ /api/reports/monthly-trends |
+ — |
+ Jan–Dec 2025 order count & revenue |
+
+
+
+
+
+
+
+
+
Project File Structure
+
+
+
Frontend — client/
+
+src/
+├── main.js # app entry + router
+├── api.js # axios API client
+├── views/
+│ ├── Dashboard.vue # KPIs + charts
+│ ├── Inventory.vue # stock table
+│ ├── Orders.vue # order management
+│ ├── Demand.vue # forecast trends
+│ ├── Spending.vue # finance analytics
+│ ├── Reports.vue # quarterly reports
+│ └── Backlog.vue # unfulfilled items
+├── components/
+│ ├── FilterBar.vue
+│ ├── ProfileMenu.vue
+│ ├── LanguageSwitcher.vue
+│ └── *Modal.vue # 5 detail modals
+├── composables/
+│ ├── useFilters.js # global filter state
+│ ├── useAuth.js # user profile
+│ └── useI18n.js # translations
+└── locales/
+ ├── en.js
+ └── ja.js
+
+
+
+
Backend — server/
+
+main.py # FastAPI app + endpoints
+mock_data.py # JSON loader
+data/
+├── inventory.json # 15 SKUs
+├── orders.json # 200+ orders
+├── demand_forecasts.json
+├── backlog_items.json
+├── spending.json
+├── transactions.json
+└── purchase_orders.json # empty
+
+tests/backend/
+├── conftest.py
+├── test_dashboard.py
+├── test_inventory.py
+└── test_misc_endpoints.py
+
+
+
+
+
+
+
+
Key Architectural Patterns
+
+
+
Singleton Filter State
+
The useFilters composable is a module-level singleton. All views import and watch the same reactive refs — no prop drilling or Vuex needed.
+
+
+
Raw refs + Computed
+
Raw API data lives in ref(). All derived values (KPIs, charts, aggregates) are computed() properties that update reactively when raw data changes.
+
+
+
Backend Filtering
+
All filtering happens server-side. Frontend passes query params; backend filters in-memory arrays non-mutably and returns the result.
+
+
+
Pydantic Validation
+
Every API response is validated through a Pydantic model, ensuring type safety and consistent JSON structure across all endpoints.
+
+
+
i18n + Currency
+
Language toggle switches EN/JA text and USD/JPY currency (1:150 rate). Field values like names and warehouses also have translated variants.
+
+
+
Modal Detail Views
+
Clicking any table row opens a detail modal. Modals receive item data via props and emit close events — no routing required.
+
+
+
+
+
+
+
Domain Data
+
+
+
Warehouses
+
+ - San Francisco
+ - London
+ - Tokyo
+
+
+
+
Product Categories
+
+ - Circuit Boards
+ - Sensors
+ - Actuators
+ - Controllers
+ - Power Supplies
+
+
+
+
Order Statuses
+
+ - Delivered
+ - Shipped
+ - Processing
+ - Backordered
+
+
+
+
Demand Trends
+
+ - Increasing
+ - Stable
+ - Decreasing
+
+
+
+
+
+
+
+
Quick Reference
+
+
+
+
Start Frontend
+
cd client && npm run dev
+
+
+
Start Backend
+
cd server && uv run python main.py
+
+
+
+
+
+
+
+
+
+