+
+
+
+
+
+
+ Tech Stack
+
+
+
■
+
+
Vue 3
+
Composition API, Vue Router 4, scoped CSS, no UI library
+
+
+
+
■
+
+
FastAPI
+
Python, Pydantic models, CORS middleware, port 8001
+
+
+
+
■
+
+
Axios
+
HTTP client, centralized in api.js, query param filters
+
+
+
+
■
+
+
Vite
+
Dev server, port 3000, fast HMR, ES module builds
+
+
+
+
+
+
+ System Overview
+
+
+
Browser
+
Vue 3 App
+
localhost:3000
+
+
+
State
+
Composables
+
useFilters · useAuth · useI18n
+
+
+
HTTP
+
api.js (Axios)
+
Query params → FastAPI
+
+
+
Server
+
FastAPI
+
localhost:8001
+
+
+
Data
+
JSON Files
+
server/data/*.json
loaded at startup
+
+
+
+
+
+ Filter Data Flow
+
+
+
1. User
+
FilterBar.vue
+
Selects period, warehouse, category, status
+
+
+
2. State
+
useFilters()
+
Reactive singleton — updates shared state
+
+
+
3. View
+
watch() trigger
+
Page re-fetches on filter change
+
+
+
4. API
+
GET /api/...
+
?warehouse=&category=&status=&month=
+
+
+
5. Backend
+
apply_filters()
+
Python in-memory filter on JSON data
+
+
+
6. Render
+
Computed props
+
Vue re-renders tables & charts
+
+
+ Filter params:
+ month orders, dashboard
+ warehouse all endpoints
+ category inventory, orders, dashboard
+ status orders, dashboard
+
+
+
+
+
+ Frontend Views (client/src/views/)
+
+
+
Dashboard.vue
+
KPI overview — inventory turnover, fulfillment rate, low stock, backlog counts
+
+ /api/dashboard/summary
+ /api/backlog
+
+
+
+
Inventory.vue
+
Stock levels, SKU search, warehouse/category filtering, detail modals
+
+ /api/inventory
+
+
+
+
Orders.vue
+
Order status tracking — delivered, shipped, processing, backordered
+
+ /api/orders
+
+
+
+
Demand.vue
+
Demand forecasts grouped by trend — increasing, stable, decreasing
+
+ /api/demand
+ /api/backlog
+
+
+
+
Spending.vue
+
Revenue, costs, profit margin, monthly and category spending breakdowns
+
+ /api/spending/summary
+ /api/spending/monthly
+ /api/spending/categories
+ /api/spending/transactions
+
+
+
+
Reports.vue
+
Quarterly metrics and monthly trend analysis — orders, revenue, fulfillment rate
+
+ /api/reports/quarterly
+ /api/reports/monthly-trends
+
+
+
+
+
+
+ Shared State (Composables)
+
+
+
useFilters.js
+
client/src/composables/
+
+ - Singleton reactive filter state
+ - selectedPeriod, selectedLocation, selectedCategory, selectedStatus
+ - getCurrentFilters() for API calls
+ - resetFilters(), hasActiveFilters computed
+
+
+
+
useAuth.js
+
client/src/composables/
+
+ - currentUser profile data
+ - tasks array with CRUD via /api/tasks
+ - isAuthenticated flag
+ - getInitials(name) helper
+
+
+
+
useI18n.js
+
client/src/composables/
+
+ - Locale switching: EN / JA
+ - t(key) translate helper
+ - Translations in locales/en.js, locales/ja.js
+ - Translates labels, months, warehouses, categories
+
+
+
+
+
+
+ API Endpoints (FastAPI — localhost:8001)
+
+
+
+
Inventory
+
+ GET
+ /api/inventory
+ warehousecategory — filtered stock list
+
+
+ GET
+ /api/inventory/{id}
+ Single inventory item by ID
+
+
+
+
+
Orders
+
+ GET
+ /api/orders
+ warehousecategorystatusmonth
+
+
+ GET
+ /api/orders/{id}
+ Single order by ID
+
+
+
+
+
Dashboard
+
+ GET
+ /api/dashboard/summary
+ warehousecategorystatusmonth — KPI aggregates
+
+
+
+
+
Demand & Backlog
+
+ GET
+ /api/demand
+ All demand forecasts (no filters)
+
+
+ GET
+ /api/backlog
+ All unfulfilled backlog items (no filters)
+
+
+
+
+
Spending
+
+ GET
+ /api/spending/summary
+ Totals: procurement, operational, labor, overhead
+
+
+ GET
+ /api/spending/monthly
+ Month-by-month cost breakdown
+
+
+ GET
+ /api/spending/categories
+ Spending grouped by category
+
+
+ GET
+ /api/spending/transactions
+ Historical transaction list
+
+
+
+
+
Reports
+
+ GET
+ /api/reports/quarterly
+ Q1–Q4 aggregates: orders, revenue, fulfillment rate
+
+
+ GET
+ /api/reports/monthly-trends
+ Per-month order count, revenue, delivered count
+
+
+
+
+
Tasks
+
+ GET
+ /api/tasks
+ User task list
+
+
+ POST
+ /api/tasks
+ Create new task
+
+
+ PATCH
+ /api/tasks/{id}
+ Toggle task status
+
+
+ DELETE
+ /api/tasks/{id}
+ Remove task
+
+
+
+
+
+
+
+ Core Data Models (Pydantic / JSON)
+
+
+
InventoryItem
+
id, sku, namestr
+
category, warehousestr
+
quantity_on_handint
+
reorder_pointint
+
unit_costfloat
+
location, last_updatedstr
+
+
+
Order
+
id, order_numberstr
+
customerstr
+
items[]sku, qty, price
+
statusDelivered | Shipped | Processing | Backordered
+
warehouse, categorystr
+
total_valuefloat
+
order_date, expected_delivery, actual_deliverydatetime
+
+
+
BacklogItem
+
id, order_idstr
+
item_sku, item_namestr
+
quantity_neededint
+
quantity_availableint
+
days_delayedint
+
prioritylow | medium | high
+
has_purchase_orderbool
+
+
+
DemandForecast
+
id, item_sku, item_namestr
+
current_demandint
+
forecasted_demandint
+
trendincreasing | stable | decreasing
+
periodstr
+
+
+
DashboardSummary
+
total_inventory_valuefloat
+
low_stock_itemsint
+
pending_ordersint
+
total_backlog_itemsint
+
total_orders_valuefloat
+
+
+
Transaction
+
id, datestr
+
description, vendorstr
+
category, warehousestr
+
amountfloat
+
typePurchase | Sale | ...
+
+
+
+
+
+ File Structure
+
+
+ client/src/
+ views/
+ Dashboard.vue
+ Inventory.vue
+ Orders.vue
+ Demand.vue
+ Spending.vue
+ Reports.vue
+ components/
+ FilterBar.vue ← global filter UI
+ ProfileMenu.vue
+ *DetailModal.vue ← 5 modals
+ LanguageSwitcher.vue
+ composables/
+ useFilters.js ← singleton filter state
+ useAuth.js
+ useI18n.js
+ locales/
+ en.js ja.js
+ utils/ currency.js
+ App.vue ← router-view + nav
+ main.js ← Vue + Router init
+ api.js ← all Axios calls
+
+
+ server/
+ main.py ← FastAPI app + all endpoints
+ mock_data.py ← loads JSON at startup
+ data/
+ inventory.json
+ orders.json
+ backlog_items.json
+ demand_forecasts.json
+ spending.json
+ transactions.json
+ purchase_orders.json
+
+ client/
+ package.json
+ vite.config.js
+ index.html
+
+ CLAUDE.md ← project instructions
+ architecture.html ← this file
+
+
+
+
+
+ Reference Data
+
+
+
Warehouses
+
+ - San Francisco
+ - London
+ - Tokyo
+
+
+
+
Product Categories
+
+ - Circuit Boards
+ - Sensors
+ - Actuators
+ - Controllers
+ - Power Supplies
+
+
+
+
Order Statuses
+
+ - Delivered
+ - Shipped
+ - Processing
+ - Backordered
+
+
+
+
+
+
+