Skip to main content

​
Overview

The Dashboard component (dashboard.js) is the main landing page that provides an overview of the POS system’s key metrics and recent transaction history. It displays today’s sales, total sales, transaction counts, and product inventory status.

​
Responsibilities

  • Calculate and display today’s sales revenue
  • Show cumulative sales statistics
  • Display total transaction count
  • Show total products in inventory
  • Render the 5 most recent transactions

​
DOM Elements

The dashboard interacts with the following DOM elements:
  • #todaySales - Display today’s total revenue
  • #totalSales - Display cumulative revenue
  • #totalTransactions - Display transaction count
  • #totalProducts - Display product count
  • #recentTransactions - Container for recent transaction list

​
Functions

​
loadDashboard()

Main function that loads and renders all dashboard statistics. 
async function loadDashboard()
Behavior:
  1. Fetches all products and sales from the database
  2. Filters sales for today (since midnight)
  3. Calculates today’s total revenue
  4. Calculates all-time total revenue
  5. Updates all stat elements in the DOM
  6. Renders the last 5 transactions in reverse chronological order
Data Flow: 
const products = await getProducts();
const sales = await getAllSales();

// Filter 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);
Recent Transactions Display: If no transactions exist, shows a placeholder message: 
container.innerHTML = '<div class="p-6 text-center text-gray-500">No transactions yet</div>';
Otherwise, displays the last 5 sales with:
  • Sale ID
  • Date and time (formatted)
  • Total amount (formatted with money() helper)
  • Item count
Example Transaction Rendering: 
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('');

​
Dependencies

​
db.js
module
Database module providing getProducts() and getAllSales() functions
​
shared.js
module
Shared utilities module providing the money() formatting function

​
Auto-Execution

The dashboard automatically loads when the module is imported: 
loadDashboard();

​
Data Structure

Sale Object: 
{
  id: number,
  date: string (ISO format),
  items: Array<{ id, name, price, qty }>,
  total: number
}
Product Object: 
{
  id: number,
  name: string,
  price: number
}

Build docs developers (and LLMs) love

Get started for freeTalk to us