+
+
+
+
Tech Stack
+
+
+
Frontend — Port 3000
+
+ Vue 3
+ Composition API
+ Vite 5
+ Vue Router 4
+ Axios
+ Custom SVG Charts
+ i18n (en / ja)
+
+
+
+
Backend — Port 8001
+
+ Python 3.13
+ FastAPI
+ Uvicorn
+ Pydantic v2
+ uv (package manager)
+
+
+
+
Data
+
+ JSON files (server/data/)
+ In-memory (no database)
+ Loaded at startup via mock_data.py
+
+
+
+
+
+
+
+
System Architecture
+
+
+
+
Browser
+
Vue 3 SPA
+
+ Vue Router
+ useFilters composable
+ api.js (Axios)
+ 6 views + 8 components
+
+
+
+
+
+
+
API Layer
+
FastAPI
+
+ REST endpoints
+ Pydantic validation
+ Query param filters
+ CORS: allow *
+
+
+
+
+
+
+
Business Logic
+
main.py
+
+ apply_filters()
+ filter_by_month()
+ Quarter mapping
+ Dashboard aggregation
+
+
+
+
+
+
+
Data Layer
+
mock_data.py
+
+ inventory.json
+ orders.json
+ spending.json
+ + 4 more JSON files
+
+
+
+
+
Data is loaded once at server startup and lives in memory. Writes (e.g. purchase orders) are in-memory only — a server restart resets all data.
+
+
+
+
+
Data Flow — Filter Selection to Rendered Chart
+
+
+
+
1. User selects filter
+
FilterBar.vue
+
Dropdown emits change → updates shared ref in useFilters.js
+
+
›
+
+
+
2. Composable state
+
useFilters.js
+
Singleton refs: selectedWarehouse, selectedCategory, selectedPeriod, selectedStatus
+
+
›
+
+
+
3. View reacts
+
Dashboard.vue
+
watch() on filter refs → calls getCurrentFilters() → triggers API call
+
+
›
+
+
+
4. API client
+
api.js
+
Builds URLSearchParams, skips 'all' values → GET /api/dashboard/summary?warehouse=X
+
+
›
+
+
+
5. FastAPI filters
+
main.py
+
apply_filters() + filter_by_month() on in-memory lists → Pydantic serialization
+
+
›
+
+
+
6. Response rendered
+
Dashboard.vue
+
JSON → reactive ref() → computed() properties feed SVG chart elements
+
+
+
+
+
+
+
+
+
+
Frontend Routes & Views
+
+ Route
+ View
+ Purpose
+
+
+ /
+ Dashboard.vue
+ KPI summary, metrics cards, charts — all filters apply
+
+
+ /inventory
+ Inventory.vue
+ Stock levels, reorder points — warehouse & category filters
+
+
+ /orders
+ Orders.vue
+ Order list with status, delivery — all 4 filters
+
+
+ /demand
+ Demand.vue
+ Demand forecasts & trend analysis — no filters
+
+
+ /spending
+ Spending.vue
+ Budget, monthly spend, category breakdown
+
+
+ /reports
+ Reports.vue
+ Quarterly & monthly trend reports
+
+
+
+
+
Frontend Composables & Utils
+
+
+
useFilters.js
+
Singleton filter state (warehouse, category, period, status). All views share the same refs — a filter change anywhere updates every view simultaneously.
+
+
+
useAuth.js
+
Authentication state composable (user session, profile data).
+
+
+
useI18n.js
+
Internationalization — English and Japanese locale support via locales/en.js and locales/ja.js.
+
+
+
Components
+
+ FilterBar
+ InventoryDetailModal
+ BacklogDetailModal
+ CostDetailModal
+ ProductDetailModal
+ TasksModal
+ ProfileMenu
+ LanguageSwitcher
+
+
+
+
+
+
+
Backend API Endpoints — http://localhost:8001
+
+
+
Inventory & Orders
+
+
GET/api/inventory?warehouse &category
+
GET/api/inventory/{id}single item
+
GET/api/orders?warehouse &category &status &month
+
GET/api/orders/{id}single order
+
GET/api/demandforecasts — no filters
+
GET/api/backlogitems + has_purchase_order flag
+
+
Dashboard & Reports
+
+
GET/api/dashboard/summaryall 4 filters — aggregated KPIs
+
GET/api/reports/quarterlyQ1–Q4 2025 performance
+
GET/api/reports/monthly-trendsmonth-over-month revenue
+
+
+
+
Spending
+
+
GET/api/spending/summarytotal budget & spend
+
GET/api/spending/monthlymonth-by-month breakdown
+
GET/api/spending/categoriesspend by category
+
GET/api/spending/transactionsrecent transaction list
+
+
Purchase Orders & Tasks
+
+
POST/api/purchase-orderscreate PO for backlog item
+
GET/api/purchase-orders/{id}PO by backlog item ID
+
GET/api/taskstask list
+
POST/api/taskscreate task
+
PATCH/api/tasks/{id}toggle task complete
+
DELETE/api/tasks/{id}delete task
+
+
+
+
Filter params: warehouse (North/South/East/West), category (Circuit Boards/Sensors/Actuators/Controllers), status (Delivered/Shipped/Processing/Backordered), month (YYYY-MM or Q1–Q4-2025). Passing 'all' or omitting skips that filter.
+
+
+
+
+
Data Layer — server/data/*.json (in-memory)
+
+
+
inventory.json
+
Inventory items: SKU, name, category, warehouse, quantity, reorder point, unit cost, location
+
+
+
orders.json
+
Orders across 12 months (2025). Statuses: Delivered, Shipped, Processing, Backordered. Includes warehouse & category for filtering
+
+
+
demand_forecasts.json
+
Per-SKU demand: current vs forecasted demand, trend direction (up/down/stable), period
+
+
+
backlog_items.json
+
Items blocked on supply: quantity needed vs available, days delayed, priority
+
+
+
purchase_orders.json
+
POs linked to backlog items: supplier, quantity, unit cost, expected delivery, status
+
+
+
spending.json & transactions.json
+
Budget summary, monthly spend breakdown, category spend, and recent transaction records
+
+
+
+
+