Inventory Dashboard

A modern inventory management dashboard built with React, TypeScript, Vite, and Tailwind CSS.

This project focuses on a maintainable, component-driven architecture with reusable UI patterns, centralized styles, and isolated business logic through custom hooks.

Screenshot

Highlights

• Componentized React architecture with short, focused components.
• Reusable modal system and shared button/form style tokens.
• Inventory table with:
  • Full-text search across product, category, brand, model, details, and inventory fields.
  • Column sorting (A-Z / Z-A) for product, category, brand, model, and stock.
  • Single-row accordion behavior (only one expanded row at a time).
  • Pagination with 10 items per page.
• Add Product modal with dynamic key/value detail rows.
• Right fixed stats sidebar with:
  • Stock issues card and configurable alert threshold.
  • Restock modal with low-stock table.
  • Recent changes (latest 3) and full changes modal.
  • Trending/overview cards.
• Shared mock data source used consistently across table, sidebar, and modals.

Tech Stack

• React 19
• TypeScript
• Vite 8
• Tailwind CSS 4
• ESLint 10

Project Structure

src/
  components/
    AddProductModal/
    InventoryDashboard/
    InventoryHeader/
    InventoryTable/
      components/
    SideNavBar/
    StatsSidebar/
      components/
    TopNavBar/
    common/
      Modal/
      buttons/
      forms/
  data/
    mockInventory.ts
  hooks/
    useInventoryTable.ts
  App.tsx
  main.tsx
  index.css

Architecture Notes

UI Composition

• InventoryDashboard composes the page layout and coordinates primary UI areas.
• InventoryTable is presentation-focused and delegates stateful table behavior to useInventoryTable.
• StatsSidebar composes cards + modal flows using smaller specialized components.

Reusability

• components/common/Modal provides a shared modal shell.
• components/common/buttons/styles.ts centralizes button style variants.
• components/common/forms/styles.ts centralizes form field and label styles.

Data Flow

• Mock domain data lives in data/mockInventory.ts.
• Table, sidebar summaries, and modal tables consume the same source to avoid data drift.

Getting Started

Prerequisites

• Node.js 20+ (recommended)
• npm 10+ (recommended)

Installation

npm install

Run Development Server

npm run dev

Open the local URL shown in your terminal (typically http://localhost:5173).

Available Scripts

• npm run dev: Start Vite development server with HMR.
• npm run build: Type-check and create production build.
• npm run lint: Run ESLint on the codebase.
• npm run preview: Preview the production build locally.

Build and Quality

To validate the project before shipping:

npm run lint && npm run build

Data Model Overview

Inventory items are structured around:

• Basic fields: id, name, brand, model, description.
• Category relation: category_id + denormalized category object.
• Flexible metadata: details[] as key/value pairs.
• Multi-location stock: inventories[] with location, quantity, and min_quantity.

This model supports realistic inventory scenarios and powers both table and sidebar insights.

Styling Strategy

• Utility-first styling with Tailwind CSS.
• Shared style constants for repeated UI elements (buttons/forms).
• Tokens and global styles live in src/index.css.

Future Improvements

• Replace mock data with real API integration.
• Add create/update/delete persistence flows.
• Add automated tests (unit and integration).
• Add accessibility audits and keyboard-navigation enhancements.
• Add role-based actions and authentication.

License

No license has been defined yet for this repository.