Technology Stack
+ +
+
+
+
+
+ + + Frontend +
+-
+
- Vue 3 (Composition API) +
- Vite (Build tool) +
- Axios (HTTP client) +
- Port 3000 +
- Responsive Design (CSS Grid/Flexbox) +
+
+
+ + + Backend +
+-
+
- Python FastAPI +
- Uvicorn (ASGI server) +
- Pydantic (Data validation) +
- Port 8001 +
- CORS enabled for development +
+
+ + + Data Layer +
+-
+
- In-memory mock data +
- JSON files (no database) +
- Loaded at server startup +
- Real-time filtering +
- Pydantic model validation +
System Architecture
+ +
+
+
+
+
+ 📁 JSON Data Files
inventory, orders, spending, etc.
+ inventory, orders, spending, etc.
↓
+
+
+ FastAPI Backend
Port 8001
+ Port 8001
↕
+
+
+ Vue 3 Frontend
Port 3000
+ Port 3000
+
+ -
+
- Frontend makes HTTP requests via Axios to RESTful API endpoints +
- Backend loads JSON files into memory on startup +
- All filtering happens server-side using Pydantic models +
- No database or persistence - data resets on server restart +
- CORS middleware allows cross-origin requests from frontend +
- Automatic API documentation available at /docs endpoint +
Data Flow
+ +
+
+
+
+
+ 1
+
+ User Interaction
+ User selects filters (warehouse, category, status, month) or navigates to a view in Vue frontend
+
+
+
+
+ 2
+
+ Frontend API Call
+ Vue component calls api.js which constructs query parameters and makes Axios HTTP GET request
+
+
+
+
+ 3
+
+ Backend Receives Request
+ FastAPI router receives request, extracts query parameters, validates with Pydantic
+
+
+
+
+ 4
+
+ Data Filtering
+ Python applies filter functions: filter_by_month(), apply_filters() on in-memory JSON data
+
+
+
+
+ 5
+
+ Response Serialization
+ FastAPI serializes filtered results using Pydantic models (List[Order], List[InventoryItem], etc.)
+
+
+
+ 6
+
+ Frontend Receives & Displays
+ Vue component receives JSON response, updates reactive refs, computed properties recalculate, UI re-renders
+
+ REST API Endpoints
+All endpoints return JSON. Base URL: http://localhost:8001/api
| Method | +Endpoint | +Description | +Filters | +
|---|---|---|---|
| GET | +/inventory |
+ List all inventory items | +warehouse, category | +
| GET | +/inventory/{item_id} |
+ Get specific inventory item | +— | +
| GET | +/orders |
+ List all orders | +warehouse, category, status, month | +
| GET | +/orders/{order_id} |
+ Get specific order | +— | +
| GET | +/dashboard/summary |
+ Dashboard statistics & KPIs | +warehouse, category, status, month | +
| GET | +/demand |
+ Demand forecasts | +— | +
| GET | +/backlog |
+ Backlog items with PO status | +— | +
| GET | +/spending/summary |
+ Spending summary statistics | +— | +
| GET | +/spending/monthly |
+ Monthly spending breakdown | +— | +
| GET | +/spending/categories |
+ Spending by category | +— | +
| GET | +/spending/transactions |
+ Recent transactions | +— | +
| GET | +/reports/quarterly |
+ Quarterly performance reports | +— | +
| GET | +/reports/monthly-trends |
+ Month-over-month trends | +— | +
Filter System
+Global filters apply to relevant endpoints. All filters default to "All" and accept 'all' as value to reset.
+ +
+
+
+
+
+
+ Time Period
+-
+
- All Months (default) +
- January - December +
- Quarters (Q1-Q4 2025) +
+
+
+ Warehouse
+-
+
- All (default) +
- San Francisco +
- London +
- Tokyo +
+
+
+ Category
+-
+
- All (default) +
- Circuit Boards +
- Sensors +
- Actuators +
- Controllers +
- Power Supplies +
+
+ Order Status
+-
+
- All (default) +
- Delivered +
- Shipped +
- Processing +
- Backordered +
+
+ -
+
- Filters stored in global composable (useFilters) for reactive updates across all views +
- Month filter only applies to order data (inventory has no time dimension) +
- Quarterly filtering uses QUARTER_MAP lookup on server side +
- Multiple filters combine with AND logic (e.g., SF + Sensors = SF warehouses with Sensors category) +
Frontend Views & Components
+ +
+
+
+ Dashboard
+ KPIs, order health, inventory by category, shortages, top products
+
+
+ Inventory
+ Browse all items, stock levels, reorder points, unit costs
+
+
+ Orders
+ Order list, customer details, status, delivery dates, total values
+
+
+ Demand Forecast
+ Demand trends, current vs forecasted, trend analysis
+
+
+ Finance (Spending)
+ Spending summary, monthly breakdown, category analysis, transactions
+
+
+ Reports
+ Quarterly performance, monthly trends, order fulfillment rates
+
+
+ Backlog
+ Shortages, delayed items, priority levels, purchase order creation
+
+
+ Filter Bar
+ Global filters: period, warehouse, category, status
+
+ Core Data Models
+ +
+
+
+
+
+ InventoryItem
+-
+
- id, sku, name, category +
- warehouse, quantity_on_hand +
- reorder_point, unit_cost +
- location, last_updated +
+
+
+ Order
+-
+
- id, order_number, customer, items +
- status, order_date, expected_delivery +
- total_value, actual_delivery +
- warehouse, category +
+
+
+ BacklogItem
+-
+
- id, order_id, item_sku, item_name +
- quantity_needed, quantity_available +
- days_delayed, priority +
- has_purchase_order +
+
+ DemandForecast
+-
+
- id, item_sku, item_name +
- current_demand, forecasted_demand +
- trend (up/down/stable) +
- period (month) +
Key Features
+ +
+
+ -
+
- Real-time filtering across 4 dimensions (time, location, category, status) +
- Dynamic KPI calculations (inventory turnover, fill rates, revenue goals) +
- Inventory shortage detection with priority levels +
- Purchase order creation for backlog items +
- Demand forecasting with trend analysis +
- Quarterly and monthly performance reporting +
- Spending analysis by month and category +
- Responsive design that works on desktop, tablet, mobile +
- Multi-language support (i18n) for internationalization +
- Profile menu and task management features +
Development Notes
+ +
+
+ -
+
- Server must be restarted to reload JSON data from disk +
- Changes to mock_data.py require server restart +
- API documentation auto-generated: http://localhost:8001/docs +
- Frontend hot-reloading enabled during npm run dev +
- All data is case-sensitive except category filtering (uses .lower()) +
- Pydantic models enforce data validation on all API responses +
- Vue Composition API used throughout for better code organization +
- Axios interceptors can be added for centralized error handling +
- No database - perfect for prototyping and demos +