System Overview
+A modern full-stack web application demonstrating factory inventory management with real-time data filtering, demand forecasting, and comprehensive reporting capabilities. Built with Vue 3 frontend and Python FastAPI backend using in-memory JSON data for demonstration purposes.
+ +
+ Key Characteristics: Single-page application (SPA) with RESTful API, reactive UI, universal filtering system, and mock data simulation for rapid prototyping.
+
+ Technology Stack
+
+
+
+
+ Frontend (Port 3000)
+
+ Vue 3
+ Composition API
+ Vue Router
+ Axios
+ Vite
+ JavaScript
+
+
+
+ Backend (Port 8001)
+
+ Python 3.13
+ FastAPI
+ Pydantic
+ Uvicorn
+ pytest
+ CORS Middleware
+
+ Data Flow Architecture
+
+
+
+
+
+
+ →
+ JSON Files
+server/data/*.json
+
+
+ →
+ Data Loading
+mock_data.py
+
+
+ →
+ FastAPI Backend
+main.py endpoints
+
+
+ →
+ Filtering & Validation
+Pydantic models
+
+
+ →
+ API Response
+JSON data
+
+
+ →
+ Vue Frontend
+api.js client
+
+
+ Reactive UI
+Components/Views
+Backend API Endpoints
+RESTful API with optional query parameter filtering. All endpoints return JSON and support CORS for cross-origin requests.
+ +
+
+
+
+
+ GET /api/inventory
+ Retrieve all inventory items with optional filtering
+ Filters: warehouse, category +
+
+
+ GET /api/inventory/{item_id}
+ Get specific inventory item by ID
+
+
+
+ GET /api/orders
+ Retrieve all orders with optional filtering
+ Filters: warehouse, category, status, month +
+
+
+ GET /api/orders/{order_id}
+ Get specific order by ID
+
+
+
+ GET /api/demand
+ Get demand forecasts for inventory planning
+ No filters +
+
+
+ GET /api/backlog
+ Get backlog items with purchase order status
+ No filters +
+
+
+ GET /api/dashboard/summary
+ Get aggregated dashboard statistics
+ Filters: warehouse, category, status, month +
+
+
+ GET /api/spending/summary
+ Get spending summary statistics
+
+
+
+ GET /api/spending/monthly
+ Get monthly spending breakdown
+
+
+
+ GET /api/spending/categories
+ Get spending by category
+
+
+
+ GET /api/spending/transactions
+ Get recent transaction history
+
+
+
+ GET /api/reports/quarterly
+ Get quarterly performance reports
+
+
+ GET /api/reports/monthly-trends
+ Get month-over-month trend analysis
+Data Models (Pydantic)
+| Model | +Purpose | +Key Fields | +
|---|---|---|
InventoryItem |
+ Inventory stock details | +sku, name, category, warehouse, quantity_on_hand, reorder_point, unit_cost | +
Order |
+ Customer order information | +order_number, customer, items, status, order_date, total_value, warehouse | +
DemandForecast |
+ Demand predictions | +item_sku, current_demand, forecasted_demand, trend, period | +
BacklogItem |
+ Delayed order items | +order_id, item_sku, quantity_needed, days_delayed, priority, has_purchase_order | +
PurchaseOrder |
+ Supplier orders | +backlog_item_id, supplier_name, quantity, unit_cost, expected_delivery_date, status | +
Data Storage (JSON Files)
+All data is stored in JSON format in server/data/ directory and loaded into memory at startup.
+
+
+
+ inventory.json
+ 9.6 KB - Stock items
+
+
+ orders.json
+ 151 KB - Order records
+
+
+ demand_forecasts.json
+ 1.8 KB - Forecasts
+
+
+ backlog_items.json
+ 929 B - Delayed items
+
+
+ purchase_orders.json
+ 3 B - PO records
+
+
+ spending.json
+ 2.5 KB - Spend data
+
+
+ transactions.json
+ 13.7 KB - Transactions
+Frontend Architecture
+ +Application Views
+
+
+
+
+
+ Dashboard
+-
+
- KPI summary cards +
- Inventory value tracking +
- Low stock alerts +
- Pending orders count +
+
+ Inventory
+-
+
- Stock level monitoring +
- Reorder point tracking +
- Warehouse filtering +
- Category grouping +
+
+ Orders
+-
+
- Order status tracking +
- Delivery date management +
- Status filtering +
- Time-based filtering +
+
+ Demand
+-
+
- Forecast visualization +
- Trend analysis +
- Backlog management +
- Purchase order creation +
+
+ Spending
+-
+
- Expense tracking +
- Monthly breakdowns +
- Category analysis +
- Transaction history +
+
+ Reports
+-
+
- Quarterly summaries +
- Monthly trends +
- Revenue tracking +
- Fulfillment rates +
Reusable Components
+
+
+
+
+ FilterBar
+-
+
- Global filter controls +
- Warehouse selector +
- Category selector +
- Time period selector +
+
+ Modal Components
+-
+
- BacklogDetailModal +
- InventoryDetailModal +
- ProductDetailModal +
- CostDetailModal +
+
+ Utility Components
+-
+
- ProfileMenu +
- LanguageSwitcher +
- TasksModal +
- ProfileDetailsModal +
Universal Filter System
+Four-dimensional filtering system that applies consistently across all views:
+ +| Filter Type | +Options | +Applies To | +
|---|---|---|
| Time Period | +All Months, Q1-2025, Q2-2025, Q3-2025, Q4-2025, Individual months | +Orders, Dashboard, Reports | +
| Warehouse | +All Warehouses, Main, North, South, East, West | +Inventory, Orders, Dashboard | +
| Category | +All Categories, Raw Materials, Components, Finished Goods, Packaging | +Inventory, Orders, Dashboard | +
| Order Status | +All Statuses, Processing, Shipped, Delivered, Backordered | +Orders, Dashboard | +
Key Features
+
+
+
+
+ Real-Time Filtering
+Dynamic data filtering across all views
+
+
+ Reactive UI
+Vue 3 Composition API with computed properties
+
+
+ RESTful API
+Clean, predictable endpoint design
+
+
+ Data Validation
+Pydantic models ensure type safety
+
+
+ SPA Navigation
+Client-side routing with Vue Router
+
+
+ Mock Data
+JSON-based in-memory data for rapid prototyping
+Design Patterns & Best Practices
+
+
+
+
+ Frontend Patterns
+-
+
- Composition API for logic reuse +
- Reactive refs and computed +
- Centralized API client (api.js) +
- Composables for shared state +
- Component-based architecture +
+
+ Backend Patterns
+-
+
- RESTful resource naming +
- Query parameter filtering +
- Pydantic validation +
- Helper functions for filtering +
- CORS middleware for cross-origin +
+
+ Data Flow
+-
+
- Props down, events up +
- Computed for derived data +
- API client abstraction +
- Loading states +
- Error handling +
+
+ Code Organization
+-
+
- Clear separation of concerns +
- Views for pages +
- Components for reusable UI +
- Modular backend endpoints +
- Scoped component styles +
Project Structure
+
+
+
+
+ Frontend (client/)
+-
+
- src/views/ - Page components +
- src/components/ - Reusable UI +
- src/api.js - API client +
- src/main.js - App entry +
- src/App.vue - Root component +
+
+ Backend (server/)
+-
+
- main.py - API endpoints +
- mock_data.py - Data loader +
- data/*.json - Mock data +
- pyproject.toml - Dependencies +
+
+ Testing (tests/)
+-
+
- backend/ - API tests +
- frontend/ - Component tests +
- pytest configuration +
- Test fixtures +
+
+ Documentation
+-
+
- README.md - Project overview +
- CLAUDE.md - AI assistant guide +
- docs/ - Architecture docs +
- API docs at /docs endpoint +
Development Workflow
+| Task | +Command | +Notes | +
|---|---|---|
| Start Backend | +cd server && uv run python main.py |
+ Runs on http://localhost:8001 | +
| Start Frontend | +cd client && npm run dev |
+ Runs on http://localhost:3000 | +
| View API Docs | +Navigate to http://localhost:8001/docs |
+ Interactive Swagger UI | +
| Run Backend Tests | +cd tests && pytest backend/ -v |
+ FastAPI TestClient | +
| Build Frontend | +cd client && npm run build |
+ Production build to dist/ | +
Potential Enhancements
+
+
+
+
+ Database Integration
+-
+
- PostgreSQL or MongoDB +
- SQLAlchemy ORM +
- Data persistence +
- Database migrations +
+
+ Authentication
+-
+
- JWT token auth +
- User roles and permissions +
- OAuth integration +
- Session management +
+
+ Real-Time Features
+-
+
- WebSocket connections +
- Live inventory updates +
- Push notifications +
- Collaborative editing +
+
+ Advanced Analytics
+-
+
- Predictive analytics +
- Machine learning models +
- Advanced visualizations +
- Export to PDF/Excel +