Inventory & Stock

Track stock levels, adjustments, and reorder alerts.

Overview

This inventory management app helps operations teams monitor SKUs, record stock movements, and catch low-stock situations before they become outages. KPI cards, charts, an editable grid, and a transaction log work together in a single browser page with local persistence.

Key features

Dashboard KPIs

Summary cards display Total SKUs, Total Inventory Value, and Low Stock Items (count of items at or below reorder point).

Inventory grid

AG Grid columns: Item ID, Product Name, Category, Stock Qty, Unit Price, Total Value, Reorder Point, Status. Total Value computes as quantity × unit price. Rows at or below reorder point show a low-stock indicator (⚠️ Low) and red highlighting; healthy rows show ✓ OK. Inline editing covers ID, name, category, quantity, unit price, and reorder point. A pinned total row sums quantity and inventory value.

Stock adjustments

A stock adjustment form lets you:

• Select an item
• Choose Stock In (+) or Stock Out (−)
• Enter quantity and an optional note

Stock-out is validated so quantity cannot drop below zero.

Transaction history

Every adjustment is logged chronologically. A recent adjustments panel shows the last five moves with timestamp and note.

Filters and search

• Text search by item ID or product name
• Category filter: Electronics, Office, Furniture, or All

Charts

• Bar chart — top five items by inventory value
• Pie chart — inventory value by category

Import and export

• Export inventory to Excel
• Import Excel/CSV — updates existing SKUs or adds new ones

Appearance

Dark mode toggle; preference saved in the browser.

Data & persistence

Ten sample SKUs preload on first visit. Items, transactions, and recent adjustments persist in localStorage.

Built with

Tailwind CSS, AG Grid Community, Alpine.js, Chart.js, and SheetJS.

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