# Inventory management table

> A dark inventory table: stock bars fill, a low-stock row flashes red, Reorder is pressed and the item flips to Restocked.

- Kind: Plan
- Page: https://ownlyplans.com/bhaskar/inventory-management-table/
- Licence: CC BY 4.0 (reuse with credit)

## Steps

### 1. Paste the prompt

The AI builds the KPI tiles and the stock table.

Prompt:

```text
Build a single-file HTML inventory management screen, 1280x720, dark slate background #111827, panels #1a2336, border #263250, text #e5e9f2, green #34d399, red #f87171, blue #2b6cff. System fonts, no libraries.
Top: three KPI tiles - Units in stock (counts to 1284), Low stock items (7), Fill rate (96%) - using CSS @property integer counters.
Table: columns Product, SKU, Stock level, action. Six rows: Oak desk 140cm, Ergo chair Pro, Standing mat, Monitor arm dual (low, 12 percent), USB-C dock, Cable tray kit. Stock level is a 220px rounded bar plus a small status badge (green In stock, red Low stock).
Motion (8 second loop): rows rise in, bars grow to their value. The Monitor arm row flashes a faint red twice, its bar is red. A blue Reorder button on that row is pressed (scale .9), then the bar grows to 92 percent and turns green and the badge switches to green Restocked. A green toast "Purchase order #PO-2291 sent to supplier" slides up bottom right. Fade out at the end and restart.
Respect prefers-reduced-motion. Return only the complete HTML.
```

### 2. Check the low stock flash

Only the Monitor arm row should flash red.

### 3. Check the reorder

After the press the bar turns green and a toast appears.

Done when: You can see it working in the browser.

### 4. Make it real

Connect stock levels and the reorder action to your data.

## Files

- prompt.md: https://ownlyplans.com/bhaskar/inventory-management-table/prompt/ (The full prompt.)
- index.html.md: https://ownlyplans.com/bhaskar/inventory-management-table/index-html/ (Complete code of the result in the video.)

## About

Three KPI tiles count up, six product rows show animated stock bars and the Monitor arm row flashes as low stock. A Reorder button is pressed, the bar refills to green and a purchase order toast appears. Topic inspired by OpenDesign's public dashboard prompt list; this prompt and design are written from scratch.

---
Also available as JSON: https://ownlyplans.com/bhaskar/inventory-management-table/?format=json
MCP server: https://ownlyplans.com/mcp