Full-Stack Demo with GitHub Integration
+A clean three-tier architecture separating concerns between presentation, business logic, and data management.
+ +?warehouse=SF&category=boards
+ Filter System: 4 universal filters (Time Period, Warehouse, Category, Status) apply consistently across all data views via query parameters
+Reactivity: Raw data stored in Vue refs, derived data computed via computed properties for automatic UI updates
+Validation: Pydantic models on backend validate data structure; Composition API composables share filtering logic across components
+System KPIs, inventory status, pending orders, and key metrics overview
+Inventory items, stock levels, warehouse locations, and reorder points
+Active and completed orders, customer details, and delivery status
+Financial overview, monthly spending, categories, and transaction history
+Demand predictions, trends, and forecasting analysis
+Quarterly reports, trend analysis, and business intelligence
+Global filter controls for warehouse, category, status, and time period
+User profile access and logout functionality
+i18n support for English and Japanese locales
+Detail modals for inventory, orders, backlog, and costs
+Manages filter state and current filter values across the app
+Authentication state, current user, and profile information
+Internationalization, translations, and locale switching
+SKU, name, category, warehouse location, quantity, reorder point, unit cost
+Order number, customer, items, status, dates, total value, warehouse
+Unfulfilled orders, quantities needed/available, days delayed
+Item SKU, current demand, forecasted demand, trend, period
+Monthly totals, category breakdowns, transaction details
+PO tracking, backlog item links, supplier information
+
+ $ cd server
+ $ uv run python main.py
+ # Backend running at http://localhost:8001
+
+
+ $ cd client
+ $ npm install
+ $ npm run dev
+ # Frontend running at http://localhost:3000
+
+ Interactive API documentation available at:
+http://localhost:8001/docs
+ 4 filters consistently applied across all data views via query parameters
+Full i18n support for English and Japanese with locale-specific formatting
+Real-time KPIs, demand forecasts, and spending analysis
+Vue 3 reactivity ensures UI stays in sync with data changes
+Vite-powered development with instant Hot Module Replacement
+Separation of concerns with modular, reusable components
+
+inventory-management/
+├── client/ # Vue 3 Frontend
+│ ├── src/
+│ │ ├── views/ # Page components
+│ │ ├── components/ # Reusable UI components
+│ │ ├── composables/ # Shared logic
+│ │ ├── locales/ # i18n translations
+│ │ ├── api.js # API client
+│ │ └── main.js # App entry point
+│ └── vite.config.js
+│
+├── server/ # FastAPI Backend
+│ ├── main.py # API routes & endpoints
+│ ├── mock_data.py # Data loading
+│ ├── generate_data.py # Data generation script
+│ └── data/ # JSON data files
+│ ├── inventory.json
+│ ├── orders.json
+│ ├── backlog_items.json
+│ ├── demand_forecasts.json
+│ ├── spending.json
+│ ├── transactions.json
+│ └── purchase_orders.json
+│
+└── CLAUDE.md # Development guidelines
+
+ | Order ID | +Items | +Submitted | +Lead Time | +Est. Delivery | +Total Cost | +Status | +
|---|---|---|---|---|---|---|
| {{ rso.id }} | +
+
+
+ + {{ rso.items.length }} item{{ rso.items.length !== 1 ? 's' : '' }} ++
+
+
+ {{ item.name }}
+
+
+ |
+ {{ formatDate(rso.submitted_date) }} | +{{ Math.max(...rso.items.map(i => i.lead_time_days)) }} days | +{{ formatDate(rso.estimated_delivery) }} | +${{ rso.total_cost.toLocaleString() }} | +{{ rso.status }} | +
Set your available budget and review recommended items to restock based on demand forecasts.
+| + | SKU | +Item Name | +Category | +Trend | +Forecast Demand | +In Stock | +Qty to Order | +Unit Cost | +Est. Cost | +Lead Time | +
|---|---|---|---|---|---|---|---|---|---|---|
| + + + | +{{ item.item_sku }} | +{{ item.item_name }} | +{{ item.category }} | ++ {{ item.trend }} + | +{{ item.forecasted_demand.toLocaleString() }} | +{{ item.quantity_on_hand.toLocaleString() }} | +{{ item.recommended_quantity.toLocaleString() }} | +${{ item.unit_cost.toFixed(2) }} | +{{ formatCurrency(item.estimated_cost) }} | +{{ item.lead_time_days }}d | +