WIP Inventory Page¶

Route: /inventory Component: src/pages/requester/WIPInventoryPage.tsx Auth: Protected Sidebar: "WIP Inventory" nav item

Purpose¶

Provides a real-time view of WIP (Work in Progress) material inventory. Operators can: - Monitor availability across all sub-SKU types - Filter by status (Available / Finishing soon / Out of Stock) - Switch between a list view and a grid view

Layout¶

┌─────────────────────────────────────────────────────────────┐
│ WIP Inventory    [●134 Available] [●155 Finishing] [●15 OOS]│  ← Header (fixed)
├───────────────────────────────────────┬─────────────────────┤
│ [All] [Available] [Finishing] [OOS]   │       [≡] [⊞]       │  ← Tabs + view toggle
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  List or Grid content                                       │
│                                                             │
└─────────────────────────────────────────────────────────────┘

Status Logic¶

function getStatus(row: InventoryRow): Status {
  if (row.available === 0) return 'out_of_stock';
  if (row.available <= 4) return 'finishing_soon';
  return 'available';
}

Header Components¶

Overview Chips¶

Three compact chips in the header row, beside the title:

● 134 Available   ● 155 Finishing soon   ● 15 Out of stock

Each chip: dot (7px circle) + bold count (IBM Plex Mono) + label. Colours match status accent colours. The counts in the prototype are hardcoded (OVERVIEW_ITEMS array) — in production they would be derived from the full dataset.

Filter Tabs¶

List / Grid Toggle¶

Pill toggle at the top-right of the tabs row. Container: bgcolor: #e5e5e5, borderRadius: '8px', p: '2px'. Active button has bgcolor: '#fff', inactive is transparent.

List View¶

Column Layout¶

1fr  ·  155px  ·  80px  ·  110px
Sub-SKU Details · Status · Quantity · Actions

Header: pl: '43px' to align with row content offset (16px card padding + 14px accent bar + 12px content padding = 42px ≈ 43px).

Row Structure¶

Each row is a flex card with a left accent bar + grid content:

┌────┬──────────────────────┬──────────────┬──────┬─────────────────┐
│████│ SKU-CODE             │ [Available]  │  12  │ [↺] [⋮] [▾]    │
│████│ 15 units             │ Type 1       │      │                 │
│████│ Updated 30 mins ago  │              │      │                 │
└────┴──────────────────────┴──────────────┴──────┴─────────────────┘

• Left accent bar: width: 14px, bgcolor: cfg.listAccentBg
• Sub-SKU Details: SKU code (IBM Plex Mono, 600 weight), total units (available + reserved), "Updated 30 mins ago" micro-label
• Status column: StatusBadge pill + sub-type label below
• Quantity column: bold available count
• Actions column: Refresh IconButton, More IconButton, Expand IconButton

Card border radius: 13px.

Grid View¶

3-column grid (repeat(3, 1fr)). Each card:

┌────────────────────────┐
│ SKU-CODE – Type 1      │
│ SKU WGT-A              │
│ [Available]            │
│                        │
│ 12  Units              │
└────────────────────────┘

Left accent via boxShadow: '-3px 0 0 0 {accentColor}' (no layout impact, matches Figma spec). On hover, shadow extends with a soft card drop shadow.

State¶

No store reads. Uses mockInventory directly.

UX Logic¶

Filtering¶

const rows: RowWithStatus[] = mockInventory.map(r => ({ ...r, _status: getStatus(r) }));
const filtered = rows.filter(r => tab === 'all' || r._status === tab);

RowWithStatus is InventoryRow & { _status: Status } — the status is computed at render time from the available field.

Empty State¶

When filtered.length === 0:

No items found

Edge Cases¶