diff --git a/CLAUDE.md b/CLAUDE.md index d2086efa..8858b615 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -67,6 +67,9 @@ npm install && npm run dev - Data: `server/data/*.json` - Styles: `client/src/App.vue` +## Code Style +- Always document non-obvious logic changes with comments + ## Design System - Colors: Slate/gray (#0f172a, #64748b, #e2e8f0) - Status: green/blue/yellow/red diff --git a/architecture.html b/architecture.html new file mode 100644 index 00000000..4e3fc925 --- /dev/null +++ b/architecture.html @@ -0,0 +1,493 @@ + + + + + + System Architecture — Inventory Management + + + + +
+

Inventory Management System — Architecture

+

Vue 3 + FastAPI full-stack demo with in-memory mock data  ·  Factory operations dashboard

+
+ +
+ + +
+

System Architecture

+
+
+ + +
+
Frontend  · port 3000
+
Vue 3 (Composition API)
+
Vue Router 4
+
Vite dev server
+
Axios HTTP client
+
Custom SVG charts
+
i18n (EN / JA)
+
useFilters composable
+
+ + +
+ + + + HTTP/JSON
REST API +
+ + +
+
Backend  · port 8001
+
FastAPI (Python)
+
Uvicorn ASGI server
+
Pydantic v2 models
+
CORS middleware
+
In-memory filtering
+
Swagger UI /docs
+
uv package manager
+
+ + +
+ + + + File
reads +
+ + +
+
Data  · JSON files
+
inventory.json
+
orders.json (~1000+)
+
demand_forecasts.json
+
backlog_items.json
+
spending.json
+
transactions.json
+
purchase_orders.json
+
+ +
+
+
+ + +
+

Tech Stack

+
+
Vue 3
Composition API · v3.4
+
Vue Router
SPA routing · v4.3
+
Vite
Dev server / bundler · v5.2
+
Axios
HTTP client · v1.6
+
FastAPI
Python REST framework · v0.110+
+
Uvicorn
ASGI server · v0.24+
+
Pydantic v2
Data validation / serialisation
+
Python 3.13
Runtime
+
uv
Python package manager
+
pytest
Backend test suite
+
No database
All data from JSON files
+
Node 24 / npm 11
Frontend toolchain
+
+
+ + +
+

Data Flow

+
+
+ +
+
1
+
+

User selects filters

+

FilterBar.vue updates shared state in useFilters() composable — selectedPeriod, selectedLocation, selectedCategory, selectedStatus.

+
+
+
+ +
+
2
+
+

Vue view reacts & calls API

+

Each view watches filter state. On change, it calls the relevant function in client/src/api.js, mapping filter values to query parameters (warehouse, category, status, month).

+
+
+
+ +
+
3
+
+

Axios sends HTTP request

+

e.g. GET http://localhost:8001/api/orders?category=Sensors&month=2025-01

+
+
+
+ +
+
4
+
+

FastAPI filters in memory

+

apply_filters() narrows by warehouse, category, status. filter_by_month() handles month strings (2025-01) and quarter strings (Q1-2025).

+
+
+
+ +
+
5
+
+

Pydantic serialises response

+

Filtered Python dicts are validated and serialised into JSON by Pydantic v2 models before being returned.

+
+
+
+ +
+
6
+
+

Vue renders computed data

+

Raw data stored in ref() variables (allOrders, inventoryItems). Derived values (totals, percentages, chart data) live in computed() properties and update automatically.

+
+
+ +
+
+
+ + +
+

Pages & Views

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
RouteViewPurposeAPI Endpoints
/Dashboard.vueKPI cards, order health donut, revenue summary/api/dashboard/summary /api/orders
/inventoryInventory.vueStock levels table with search & detail modal/api/inventory
/ordersOrders.vueOrder list with status badges & expandable items/api/orders
/demandDemand.vueDemand forecasts grouped by trend/api/demand
/spendingSpending.vueFinancial KPIs, cost charts, category breakdown/api/spending/*
/reportsReports.vueQuarterly performance & monthly trend charts/api/reports/*
/backlogBacklog.vueInventory shortages, priority breakdown, PO creation/api/backlog /api/inventory
+
+
+ + +
+

Global Filter System

+
+
+

Time Period

+
All · Jan–Dec 2025 (individual months) · Q1 · Q2 · Q3 · Q4
+
+
+

Warehouse / Location

+
All · San Francisco · London · Tokyo
+
+
+

Category

+
All · Circuit Boards · Sensors · Actuators · Controllers · Power Supplies
+
+
+

Order Status

+
All · Delivered · Shipped · Processing · Backordered
+
+
+
+ Filter state is managed globally in useFilters.js (singleton composable). All views watch this state and re-fetch on change. Query params map as: selectedLocation → warehouse, selectedPeriod → month. +
+
+ + +
+

API Endpoints

+
+
+
Core Data
+
+
GET/api/inventorywarehouse, category
+
GET/api/inventory/{id}single item
+
GET/api/orderswarehouse, category, status, month
+
GET/api/orders/{id}single order
+
GET/api/demandno filters
+
GET/api/backlogno filters
+
GET/api/dashboard/summaryall filters
+
+
+
+
Spending, Reports & Actions
+
+
GET/api/spending/summary
+
GET/api/spending/monthly
+
GET/api/spending/categories
+
GET/api/reports/quarterly
+
GET/api/reports/monthly-trends
+
POST/api/taskscreate task
+
POST/api/purchase-orderscreate PO
+
PATCH/api/tasks/{id}toggle status
+
DELETE/api/tasks/{id}remove task
+
+
+
+
+ +
+ + diff --git a/client/src/App.vue b/client/src/App.vue index c2da05a5..7bc352f0 100644 --- a/client/src/App.vue +++ b/client/src/App.vue @@ -1,42 +1,50 @@