diff --git a/architecture.html b/architecture.html new file mode 100644 index 00000000..2b3d16d1 --- /dev/null +++ b/architecture.html @@ -0,0 +1,747 @@ + + + + + + Inventory Management — System Architecture + + + +
+ +
+

Factory Inventory Management

+

System Architecture — Full-stack Vue 3 + FastAPI demo application

+
+ + +
+
Tech Stack
+
+
+
Frontend
+
Vue 3
+
Composition API · SPA
+
+
+
Build Tool
+
Vite
+
Port 3000 · HMR
+
+
+
Routing
+
Vue Router 4
+
7 client-side routes
+
+
+
HTTP Client
+
Axios
+
Centralized in api.js
+
+
+
Backend
+
FastAPI
+
Python · Port 8001
+
+
+
Validation
+
Pydantic
+
Request & response models
+
+
+
Data
+
JSON Files
+
In-memory · No DB
+
+
+
i18n
+
EN & JA
+
useI18n composable
+
+
+
+ + +
+
System Architecture
+
+ + +
+
Frontend — :3000
+ +
+
+
+
App.vue
+
Root layout, navbar, FilterBar
+
+
+
+
+
+
Views (7)
+
Dashboard · Inventory · Orders · Demand · Spending · Reports · Backlog
+
+
+
+
+
+
Components (12+)
+
FilterBar · Modals · ProfileMenu · LanguageSwitcher
+
+
+
+
+
+
Composables
+
useFilters · useI18n · useAuth
+
+
+
+
+
+
api.js
+
20+ Axios methods, query param builder
+
+
+
+ + +
+ + + +
HTTP
REST
+ + + +
+ + +
+
Backend — :8001
+ +
+
+
+
main.py
+
FastAPI app, 21 endpoints, CORS
+
+
+
+
+
+
Filter logic
+
apply_filters() · filter_by_month()
+
+
+
+
+
+
Pydantic models
+
InventoryItem · Order · DemandForecast · BacklogItem
+
+
+
+
+
+
mock_data.py
+
JSON loader, in-memory data store
+
+
+
+
+
+
Tests
+
pytest · FastAPI TestClient
+
+
+
+ + +
+ + + +
reads
+
+ + +
+
Data — server/data/
+ +
+
+
+
inventory.json
+
~30 SKUs, 5 categories, 2 warehouses
+
+
+
+
+
+
orders.json
+
~100+ orders, 2025, all statuses
+
+
+
+
+
+
backlog_items.json
+
Shortages with priority flags
+
+
+
+
+
+
demand_forecasts.json
+
Trend: increasing / stable / decreasing
+
+
+
+
+
+
spending.json & transactions.json
+
Finance, cost breakdown, monthly data
+
+
+
+ +
+
+ + +
+
Filter Data Flow
+
+ +
+
1
+
+
User sets a filter
+
FilterBar.vue renders 4 dropdowns: Period, Location, Category, Status. Selection updates the shared composable.
+
useFilters() → selectedPeriod.value = '2025-03'
+
+
+
+ +
+
2
+
+
Views react to changes
+
Each view watches the filter refs. Any change triggers a data reload via watch([selectedPeriod, ...], loadData).
+
Dashboard.vue, Orders.vue, Inventory.vue, …
+
+
+
+ +
+
3
+
+
API client builds query string
+
api.js calls getCurrentFilters(), skips 'all' values, and appends remaining params to the URL.
+
GET /api/orders?warehouse=Chicago&status=Shipped&month=2025-03
+
+
+
+ +
+
4
+
+
Backend filters in memory
+
FastAPI parses query params, runs apply_filters() for warehouse/category/status, and filter_by_month() for period (handles both YYYY-MM and Q1-2025 formats).
+
apply_filters(items, warehouse, category, status)
+
+
+
+ +
+
5
+
+
Validated response returned
+
Pydantic validates the filtered array and FastAPI serialises to JSON. Frontend receives it and Vue updates the DOM reactively.
+
response.data → view ref → computed → template
+
+
+ +
+
+ + +
+
Frontend Views
+
+ +
+
/  ·  Dashboard.vue
+
Dashboard
+
KPI cards, order health donut, inventory by category, top products & shortages tables.
+
+ period + location + category + status +
+
+ +
+
/inventory  ·  Inventory.vue
+
Inventory
+
Stock table with real-time search. SKU, quantity on hand, reorder point, unit cost, status badges.
+
+ location + category +
+
+ +
+
/orders  ·  Orders.vue
+
Orders
+
Full order list with expandable line items, status breakdown stats, and order detail modal.
+
+ period + location + category + status +
+
+ +
+
/backlog  ·  Backlog.vue
+
Backlog
+
Inventory shortages by priority. Shows qty needed vs available, days delayed, and PO status.
+
+ location + category +
+
+ +
+
/demand  ·  Demand.vue
+
Demand Forecasting
+
Trend cards (increasing / stable / decreasing) with current vs forecasted demand and % change.
+
+ no filters +
+
+ +
+
/spending  ·  Spending.vue
+
Spending
+
Revenue vs costs bar charts, monthly cost flow, category breakdown, recent transactions.
+
+ period +
+
+ +
+
/reports  ·  Reports.vue
+
Reports
+
Quarterly performance table and monthly revenue trend chart. YTD summary statistics.
+
+ no filters +
+
+ +
+
+ + +
+
API Endpoints
+ +
+
Inventory
+
+ GET + /api/inventory + All itemswarehousecategory +
+
+ GET + /api/inventory/{item_id} + Single item detail +
+
+ +
+
Orders
+
+ GET + /api/orders + All orderswarehousecategorystatusmonth +
+
+ GET + /api/orders/{order_id} + Single order detail +
+
+ +
+
Dashboard, Demand & Backlog
+
+ GET + /api/dashboard/summary + KPI aggregateswarehousecategorystatusmonth +
+
+ GET + /api/demand + Demand forecasts (no filters) +
+
+ GET + /api/backlog + Inventory shortages (no filters) +
+
+ +
+
Spending & Reports
+
+ GET + /api/spending/summary + Revenue, cost, profit totals +
+
+ GET + /api/spending/monthly + Month-by-month cost breakdown +
+
+ GET + /api/spending/categories + Spending by category +
+
+ GET + /api/spending/transactions + Recent transactions list +
+
+ GET + /api/reports/quarterly + Quarterly performance metrics +
+
+ GET + /api/reports/monthly-trends + Month-over-month order & revenue +
+
+ +
+
Purchase Orders & Tasks (stubs)
+
+ POST + /api/purchase-orders + Create PO for backlog item +
+
+ GET + /api/purchase-orders/{backlog_item_id} + Get PO by backlog item +
+
+ POST + /api/tasks + Create task +
+
+ PATCH + /api/tasks/{task_id} + Toggle task completion +
+
+ DELETE + /api/tasks/{task_id} + Delete task +
+
+ +
+ + + +
+ + diff --git a/client/package-lock.json b/client/package-lock.json index d13e6e77..88482901 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -1370,6 +1370,7 @@ "integrity": "sha512-j3lYzGC3P+B5Yfy/pfKNgVEg4+UtcIJcVRt2cDjIOmhLourAqPqf8P7acgxeiSgUB7E3p2P8/3gNIgDLpwzs4g==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "esbuild": "^0.21.3", "postcss": "^8.4.43", @@ -1429,6 +1430,7 @@ "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.22.tgz", "integrity": "sha512-toaZjQ3a/G/mYaLSbV+QsQhIdMo9x5rrqIpYRObsJ6T/J+RyCSFwN2LHNVH9v8uIcljDNa3QzPVdv3Y6b9hAJQ==", "license": "MIT", + "peer": true, "dependencies": { "@vue/compiler-dom": "3.5.22", "@vue/compiler-sfc": "3.5.22", diff --git a/client/src/App.vue b/client/src/App.vue index c2da05a5..4611dd83 100644 --- a/client/src/App.vue +++ b/client/src/App.vue @@ -1,48 +1,59 @@