Analytics Dashboard - SmartShelf

Overview

SmartShelf provides three distinct dashboard experiences tailored to each user role: Admin, Manager, and Worker. Each dashboard displays role-appropriate metrics, visualizations, and actionable insights to optimize warehouse operations.

Dashboard Types

Admin Dashboard

System-wide overview and user management

Manager Dashboard

Operational insights and forecasting

Worker Dashboard

Task management and completion

Admin Dashboard

The Admin Dashboard provides a comprehensive system-wide view with user management capabilities.

KPI Cards

Four primary metrics displayed at the top (AdminDashboard.tsx:46-98):

Total Items

Total number of inventory items across all categories

Total Quantity

Cumulative quantity of all items in stock

Low Stock

Items with quantity below threshold (yellow warning)

Critical Alerts

Sum of expired and expiring soon items (red alert)

Implementation:

// Total Items Card
<div className="bg-card-light dark:bg-card-dark p-6 rounded-2xl">
  <div className="flex items-center justify-between">
    <div>
      <p className="text-sm text-slate-500">Total Items</p>
      <h3 className="text-3xl font-bold">{summary?.totalItems || 0}</h3>
    </div>
    <div className="p-3 rounded-full bg-blue-100 dark:bg-blue-900/30">
      <ArchiveBox className="w-6 h-6 text-blue-600" />
    </div>
  </div>
</div>

Alert Summary Section

Breakdown of all system alerts (AdminDashboard.tsx:101-129):

Expired Items
Expiring Soon
Low Stock
Out of Stock

Items past their expiry date (critical priority)

Color: Red
Action Required: Immediate removal

Alert Card Design:

<div className="p-4 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200">
  <p className="text-sm text-red-600 font-medium">Expired Items</p>
  <p className="text-2xl font-bold text-red-700 mt-1">
    {alerts?.breakdown?.expired || 0}
  </p>
</div>

Category Distribution Table

Inventory breakdown by category (AdminDashboard.tsx:132-154):

Category	Items	Total Quantity
Dairy	45	1,245
Bakery	32	890
Produce	58	2,100
Meat	28	650
Beverages	41	1,800
Seafood	15	380

Data Fetching:

const fetchDashboardData = async () => {
  const [summaryData, alertData, categories] = await Promise.all([
    inventoryService.getSummary(),
    alertService.getSummary(),
    inventoryService.getCategoryAnalytics(),
  ]);
};

Manager Dashboard

The Manager Dashboard focuses on operational efficiency with live alerts, forecasting, and analytics.

KPI Overview

Four operational metrics (ManagerDashboard.tsx:430-482):

Total Items

Current inventory count with blue indicator

Low Stock

Items requiring reorder with yellow warning

Expiring Soon

Items expiring within 7 days with orange alert

Active Tasks

Non-completed tasks with purple badge

Live Alerts Feed

Real-time notification-style alerts (ManagerDashboard.tsx:485-508): Features:

Severity indicators (emoji-based)
Human-readable messages
Category labels
Scrollable feed (max height: 256px)
Timestamp display

Implementation:

const getSeverityIcon = (severity: string) => {
  switch (severity) {
    case 'critical': return '🔴';
    case 'high': return '🟠';
    case 'medium': return '🟡';
    default: return '🔵';
  }
};

// Alert Card
<div className="flex items-start gap-3 p-3 rounded-lg bg-slate-50">
  <span className="text-xl">{getSeverityIcon(alert.severity)}</span>
  <div className="flex-1">
    <p className={`text-sm font-medium ${getSeverityColor(alert.severity)}`}>
      {alert.message}
    </p>
    <p className="text-xs text-slate-500 mt-1">
      {alert.category} • Just now
    </p>
  </div>
</div>

Demand Forecasting Visualization

Interactive 7-day projection charts (ManagerDashboard.tsx:511-713):

The forecasting system uses three algorithms: Ensemble (primary), Linear Regression, and Moving Average for accurate predictions.

Product Selection Tabs:

<button
  onClick={() => setSelectedForecast(index)}
  className={selectedForecast === index ? 'border-primary bg-primary/10' : ''}
>
  <div className="flex items-center justify-between">
    <div>
      <p className="text-xs text-slate-500">{item.product.category}</p>
      <p className="font-semibold">{item.product.name}</p>
    </div>
    <div className="text-right">
      <p className="text-lg font-bold">{item.product.currentQuantity}</p>
    </div>
  </div>
</button>

Forecast Metrics:

Current Stock

Real-time quantity level

Daily Consumption

Average units consumed per day

Forecast Accuracy

Confidence score percentage

Reorder Days

Days until reorder needed

SVG Chart Implementation:

<svg viewBox="0 0 700 260" className="w-full">
  {/* Main forecast line */}
  <polyline 
    points={pts(ensemble)} 
    fill="none" 
    stroke="currentColor" 
    className="text-primary" 
    strokeWidth={2.5} 
  />
  
  {/* Regression line */}
  <polyline 
    points={pts(reg.yhat)} 
    stroke="currentColor" 
    className="text-slate-500" 
    strokeWidth={2} 
    strokeDasharray="2,6" 
  />
  
  {/* Data points */}
  {ensemble.map((v, i) => (
    <circle cx={xFor(i)} cy={yFor(v)} r={3.5} fill="currentColor">
      <title>Day {days[i]} • Ensemble: {v}</title>
    </circle>
  ))}
</svg>

FEFO Ordering Panel

Prioritized dispatch order (ManagerDashboard.tsx:716-755): Display Format:

#1  Fresh Milk               2d left
    Dairy • SKU: DA-001
    Qty: 25 | Local Dairy Farm

#2  Greek Yogurt            3d left
    Dairy • SKU: DA-003
    Qty: 15 | Dairy Co.

Urgency Color Coding:

Critical (≤3 days): Red background
High (≤7 days): Orange background
Medium (≤14 days): Yellow background
Low (>14 days): Blue background

Top Selling Products

Sales velocity rankings (ManagerDashboard.tsx:758-797): Metrics Displayed:

Sales velocity (units/day)
Current stock quantity
Estimated units sold
Ranking position

<div className="flex items-start justify-between">
  <div className="flex-1">
    <div className="flex items-center gap-2">
      <span className="text-lg font-bold text-primary">#{index + 1}</span>
      <h3 className="font-semibold">{product.productName}</h3>
    </div>
  </div>
  <div className="text-right">
    <p className="text-2xl font-bold text-primary">{product.salesVelocity}</p>
    <p className="text-xs text-slate-500">units/day</p>
  </div>
</div>

Worker Dashboard

Simplified task-focused interface for warehouse workers.

Task Statistics

Three key metrics (WorkerDashboard.tsx:71-106):

Pending

Tasks awaiting action

In Progress

Currently active tasks

Completed

Finished tasks

Task List Interface

Status-filtered task view (WorkerDashboard.tsx:110-189): Filter Buttons:

All tasks
Pending only
In Progress only

Task Actions:

{task.status === 'Pending' && (
  <button
    onClick={() => handleStatusChange(task.id, 'In Progress')}
    className="bg-yellow-500 text-white"
  >
    Start
  </button>
)}

{task.status === 'In Progress' && (
  <button
    onClick={() => handleStatusChange(task.id, 'Completed')}
    className="bg-green-500 text-white"
  >
    Complete
  </button>
)}

Real-Time Data Visualization

All dashboards use live data fetching:

useEffect(() => {
  fetchDashboardData();
}, []);

const fetchDashboardData = async () => {
  try {
    setLoading(true);
    const [summaryData, alertData, categories] = await Promise.all([
      inventoryService.getSummary(),
      alertService.getSummary(),
      inventoryService.getCategoryAnalytics(),
    ]);
    
    setSummary(summaryData);
    setAlerts(alertData);
    setCategoryData(categories);
  } finally {
    setLoading(false);
  }
};

Role-Based Views

Feature	Admin	Manager	Worker
Inventory KPIs	✅	✅	❌
Alert Summary	✅	✅	❌
Category Distribution	✅	❌	❌
Live Alert Feed	❌	✅	❌
Demand Forecasting	❌	✅	❌
FEFO Ordering	❌	✅	❌
Top Products	❌	✅	❌
Task Statistics	❌	❌	✅
My Tasks List	❌	❌	✅

Dark Mode Support

All dashboards fully support dark mode:

/* Light mode */
bg-card-light dark:bg-card-dark
text-slate-600 dark:text-slate-400
border-border-light dark:border-border-dark

/* Dark mode classes */
bg-slate-50 dark:bg-slate-800
text-slate-700 dark:text-slate-300

Responsive Design

Dashboards adapt to all screen sizes:

Desktop: 4-column KPI grid
Tablet: 2-column KPI grid
Mobile: 1-column stacked layout

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
  {/* KPI Cards */}
</div>

Performance Optimization

Parallel Data Fetching

All dashboard data is fetched concurrently using Promise.all() for faster load times.

Loading States

Skeleton screens and spinners provide visual feedback during data loading.

Memoization

Complex calculations are memoized to prevent unnecessary re-renders.

Inventory Management

Manage inventory items

Alert System

Configure alert thresholds

Demand Forecasting

Advanced forecasting algorithms

Task Management

Create and assign tasks

Get Started

Core Features

User Guides

Configuration

​Overview

​Dashboard Types

Admin Dashboard

Manager Dashboard

Worker Dashboard

​Admin Dashboard

​KPI Cards

Total Items

Total Quantity

Low Stock

Critical Alerts

​Alert Summary Section

​Category Distribution Table

​Manager Dashboard

​KPI Overview

​Live Alerts Feed

​Demand Forecasting Visualization

Current Stock

Daily Consumption

Forecast Accuracy

Reorder Days

​FEFO Ordering Panel

​Top Selling Products

​Worker Dashboard

​Task Statistics

Pending

In Progress

Completed

​Task List Interface

​Real-Time Data Visualization

​Role-Based Views

​Dark Mode Support

​Responsive Design

​Performance Optimization

​Related Features

Inventory Management

Alert System

Demand Forecasting

Task Management

Build docs developers (and LLMs) love

Overview

Dashboard Types

Admin Dashboard

KPI Cards

Alert Summary Section

Category Distribution Table

Manager Dashboard

KPI Overview

Live Alerts Feed

Demand Forecasting Visualization

FEFO Ordering Panel

Top Selling Products

Worker Dashboard

Task Statistics

Task List Interface

Real-Time Data Visualization

Role-Based Views

Dark Mode Support

Responsive Design

Performance Optimization

Related Features