Skip to main content
The Dashboard is the central hub of Mini POS, providing a comprehensive overview of your business performance at a glance.

​
Overview

The dashboard displays four key metrics in real-time:
  • Today’s Sales: Total revenue generated today
  • Total Sales: Cumulative revenue across all time
  • Transactions: Total number of completed sales
  • Products: Number of products in your inventory

Real-time Metrics

Sales data updates automatically as transactions are completed

Quick Actions

Navigate to POS, Products, or Reports with one click

Recent Activity

View the last 5 transactions instantly

Offline Ready

All data loads from IndexedDB even without internet

​
Key Features

​
Statistics Cards

The dashboard calculates and displays metrics by querying the local IndexedDB database:
js/dashboard.js
import { getProducts, getAllSales } from './db.js';
import { money } from './shared.js';

async function loadDashboard() {
  const products = await getProducts();
  const sales = await getAllSales();

  // Today's sales
  const today = new Date();
  today.setHours(0, 0, 0, 0);
  const todaySales = sales.filter(s => new Date(s.date) >= today);
  const todayTotal = todaySales.reduce((a, s) => a + s.total, 0);

  // Total sales
  const totalSales = sales.reduce((a, s) => a + s.total, 0);

  // Update stats
  document.getElementById('todaySales').textContent = `₹${money(todayTotal)}`;
  document.getElementById('totalSales').textContent = `₹${money(totalSales)}`;
  document.getElementById('totalTransactions').textContent = sales.length;
  document.getElementById('totalProducts').textContent = products.length;
}
The dashboard uses the money() utility function to format currency values to 2 decimal places consistently throughout the app.

​
Recent Transactions

The dashboard shows the 5 most recent transactions in reverse chronological order:
js/dashboard.js
// Recent transactions (last 5)
const recent = sales.slice(-5).reverse();
const container = document.getElementById('recentTransactions');

if (recent.length === 0) {
  container.innerHTML = '<div class="p-6 text-center text-gray-500">No transactions yet</div>';
} else {
  container.innerHTML = recent.map(s => `
    <div class="p-4 hover:bg-gray-50">
      <div class="flex items-center justify-between">
        <div>
          <div class="font-medium text-gray-900">Sale #${s.id}</div>
          <div class="text-sm text-gray-500">${new Date(s.date).toLocaleString()}</div>
        </div>
        <div class="text-right">
          <div class="font-semibold text-gray-900">₹${money(s.total)}</div>
          <div class="text-sm text-gray-500">${s.items.reduce((a, i) => a + i.qty, 0)} items</div>
        </div>
      </div>
    </div>
  `).join('');
}

​
Quick Actions

Three prominent action buttons provide quick navigation to:
  1. New Sale - Open the POS interface to process a transaction
  2. Add Product - Navigate to product management to add new items
  3. View Reports - Access sales reports and analytics
The quick actions section uses color-coded buttons (indigo for POS, green for products, blue for reports) to help users quickly identify the action they need.

​
User Workflow

  1. User opens the app and lands on the dashboard
  2. Dashboard loads sales and product data from IndexedDB
  3. Metrics are calculated and displayed within milliseconds
  4. User can:
    • Review today’s performance vs total sales
    • Check recent transaction details
    • Navigate to other sections via quick actions
  5. Data refreshes automatically when returning from other pages

​
Data Sources

The dashboard retrieves data from two IndexedDB stores:
  • products store: Provides the total product count
  • sales store: Provides all transaction data for metrics and recent activity
All database operations are asynchronous and use Promises, ensuring the UI remains responsive even with large datasets.

​
Performance Considerations

  • Fast Loading: IndexedDB queries are optimized to load only necessary data
  • No Network Dependency: All data is local, eliminating network latency
  • Efficient Filtering: Today’s sales are filtered in-memory using JavaScript Date objects
  • Minimal Re-renders: The dashboard only updates when explicitly loaded

Build docs developers (and LLMs) love

Get started for freeTalk to us