Now let's bring everything together in the UI. The customer-facing order form needs to check inventory and disable options that are out of stock. Staff also need a dashboard to monitor inventory levels and refill when needed. This creates a complete inventory management system!
First, update the order template to check inventory before displaying options:
Key features of the inventory-aware template:
🔄loadTodaysInventory
Called in useEffect to load inventory data when the component mounts. Shows a loading spinner until data is ready.
🚫Out of Stock Check
If yogurt ice cream is completely out of stock, shows a friendly message instead of the form. No point ordering if we can't make it!
⚠️disabled: !isInStock
Each size and topping option checks if sufficient stock exists. Disabled options are grayed out but still visible, so customers know what's normally available.
Add the isInStock helper method to the Inventory constant:
Now let's create utility components for staff to refill inventory:
Create a visual dashboard showing stock levels with color-coded status indicators:
Add helper methods to the Stock scalar for status calculation:
Create a Zone component for real-time inventory monitoring:
Finally, put it all together in the main page with both inventory dashboard and order management:
🎉 What You've Accomplished:
- ✓ Created a reusable Stock scalar for inventory items
- ✓ Built an Inventory module with daily records
- ✓ Implemented stock usage and refill business logic
- ✓ Connected inventory to order creation flow
- ✓ Created visual dashboard with real-time updates
- ✓ Disabled out-of-stock options in customer UI
In the next tutorial, we'll explore Insight - a powerful feature for aggregating and analyzing data across your models. This will allow you to create analytics dashboards and gain business intelligence from your ice cream shop data.