Inventory Dashboard

Full-stack Node.js/Express dashboard for tracking 3D printing inventory. Built for small manufacturing businesses to monitor production progress across multiple product categories.

What It Does

This dashboard helps track inventory for 3D printing businesses:

• Real-time inventory tracking - Monitor quantities across product categories
• Progress visualization - Visual progress bars and statistics
• Status management - Track items as Pending, In Progress, or Complete
• Auto-refresh - Dashboard updates every 30 seconds automatically
• Dark mode support - Automatically adapts to system preferences
• Responsive design - Works on desktop, tablet, and mobile

Installation

# Clone the repository
git clone https://github.com/rowbotik/inventory-dashboard.git
cd inventory-dashboard

# Install dependencies
npm install

# Start the server
node server.js

Then open http://localhost:3000 in your browser.

API Endpoints

Method	Endpoint	Description
GET	/api/inventory	Get all items organized by category
GET	/api/stats	Get overall statistics
POST	/api/inventory	Add a new item
PUT	/api/inventory/:id/status	Update item status
PUT	/api/inventory/:id/quantity	Update item quantity
DELETE	/api/inventory/:id	Delete an item

Example API Usage

# Get all inventory
curl http://localhost:3000/api/inventory

# Add a new item
curl -X POST http://localhost:3000/api/inventory \
  -H "Content-Type: application/json" \
  -d '{"name":"Widget A","category":"Widgets","target_qty":100}'

# Update quantity
curl -X PUT http://localhost:3000/api/inventory/1/quantity \
  -H "Content-Type: application/json" \
  -d '{"quantity":50}'

# Update status
curl -X PUT http://localhost:3000/api/inventory/1/status \
  -H "Content-Type: application/json" \
  -d '{"status":"in_progress"}'

Screenshots

The dashboard includes:

• Header with real-time last-updated timestamp and manual refresh button
• Stats Cards showing total target, in-stock count, remaining, and overall progress percentage
• Progress Bar - Visual representation of overall completion
• Status Summary - Count of items in each status (Pending, In Progress, Complete)
• Add Item Form - Quick entry for new inventory items
• Category Sections - Grouped display of items with individual progress tracking
• Item Cards - Each showing:
  • Item name with delete button
  • Current status badge
  • Progress bar (quantity vs target)
  • Editable quantity input
  • Remaining count
  • Status action buttons

Tech Stack

• Backend: Node.js + Express
• Database: SQLite (file-based, no setup required)
• Frontend: Vanilla JavaScript (no frameworks)
• Styling: CSS with CSS Variables for theming
• Features:
  • Dark mode via prefers-color-scheme media query
  • Auto-refresh every 30 seconds
  • Responsive grid layout
  • RESTful API design

Project Structure

inventory-dashboard/
├── server.js           # Express server with API routes
├── package.json        # Dependencies and metadata
├── README.md           # This file
└── public/             # Static frontend files
    ├── index.html      # Main HTML template
    ├── app.js          # Frontend JavaScript
    └── style.css       # Styles with dark mode support

Data Storage

Data is stored in a local SQLite database at data/inventory.db. The database is created automatically on first run.

License

MIT