Warehouse Management

Track inventory by location, record stock movements, and monitor low-stock alerts in one browser-based dashboard.

Overview

This app gives warehouse and inventory teams a lightweight tool to see what's on hand across bin locations. Browse SKUs in an AG Grid, log inbound, outbound, and transfer movements, filter by location or stock status, and get alerts when quantities fall below reorder levels. A bar chart shows stock value by warehouse zone; Excel export supports reporting. Everything runs in a single self-contained HTML page with data saved locally in your browser.

Key features

Inventory grid

• AG Grid by location — SKU, product, location, quantity, reorder level, unit value, stock value, and status (In stock / Low / Critical).
• Sample inventory — Ten line items across zones A–D with mixed stock levels.
• Row highlighting — Low-stock rows and the selected item are visually flagged.

Stock movements

• Movement form — Record inbound (receive), outbound (ship), or transfer between locations with quantity and reason/reference.
• Live preview — See projected quantity and stock status before submitting.
• Recent movements — Table of the latest inbound, outbound, and transfer events.

Filters & alerts

• Low stock banner — Lists items below reorder level, sorted by quantity.
• Filters — Search by SKU or product, filter by location, and filter by stock status.

Summary & reporting

• KPI cards — Total SKUs, total units, total stock value, and low-stock item count.
• Location chart — Bar chart of stock value aggregated by warehouse zone (A, B, C, D).
• Excel export — Download Inventory and Movements sheets via SheetJS.

Data management

• Add / delete SKUs — Manage inventory lines from the header and grid.
• localStorage — Inventory, movements, and selection persist across sessions.
• Reset data — Restore sample dataset with confirmation.
• Dark mode — Toggle light/dark theme; AG Grid and Chart.js adapt; preference is remembered.

Data & persistence

Sample data includes 10 inventory rows and 4 movement records. Transfers create or update destination location rows for the same SKU. State saves to `localStorage` under `warehouse-management-data`.

Charts & reporting

The zone bar chart sums `qty × unitValue` by the first segment of each location code (e.g. A from A-01-01). Excel export includes full inventory detail and movement history.

Built with

Tailwind CSS (CDN), AG Grid Community, Alpine.js, Chart.js, and SheetJS — all loaded from CDN in a single HTML file.

Try the interactive walkthrough below. Click Walk through features and use Next / Back (or arrow keys) to explore every feature.