Add a reorder-alerts view to the warehouse dashboard
Angular · Angular · intermediate · modification
Turns the inventory panel into a proper reorder-alerts view. Instead of dumping every product, it now derives the list of products that have dropped to their reorder point and shows those, with an empty state when everything is well-stocked. Matches the warehouse team's request for a 'what do we need to buy' widget.
Powers the 'Reorder alerts' widget on the warehouse dashboard; the list drives which SKUs purchasing raises orders for. Each product carries a `reorderThreshold` (the stock level that should trigger a reorder) and a separate `reorderQuantity` (how many units to buy when restocking).
Requirements
- Show only products that need reordering: a product needs reordering when its `stockCount` is at or below the product's `reorderThreshold`.
- Products whose `stockCount` is above their `reorderThreshold` must not appear in the list.
- When no product is at or below its reorder threshold, show the empty state instead of the list.
Files touched
- src/app/components/reorder-list.ts
--- src/app/components/reorder-list.ts
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
export interface Product {
template: `
<section class="reorder">
- <h2>Inventory</h2>
- <ul class="reorder__list">
- @for (product of products(); track product.id) {
- <li class="reorder__item">
- <span class="reorder__name">{{ product.name }}</span>
- <span class="reorder__stock">{{ product.stockCount }} in stock</span>
- </li>
- }
- </ul>
+ <h2>Reorder alerts</h2>
+ @if (reorderNeeded().length === 0) {
+ <p class="reorder__empty">Every product is above its reorder threshold.</p>
+ } @else {
+ <ul class="reorder__list">
+ @for (product of reorderNeeded(); track product.id) {
+ <li class="reorder__item">
+ <span class="reorder__name">{{ product.name }}</span>
+ <span class="reorder__stock">{{ product.stockCount }} in stock</span>
+ </li>
+ }
+ </ul>
+ }
</section>