Skip to main content
The Mini POS System defaults to Indian Rupee (₹) currency. This guide explains how the currency is implemented and how to change it to your local currency.

​
How Currency is Implemented

​
Currency Display Locations

The ₹ symbol appears in several places throughout the app:
  1. Dashboard statistics - Today’s sales, total sales
  2. Product prices - Product list and POS grid
  3. Cart display - Item prices and totals
  4. Reports - Sales tables and summaries
  5. Receipts - Printed bills

​
Currency Formatting Function

The app uses a money() helper function in js/shared.js:29:
js/shared.js
export function money(n) {
  return (Math.round(Number(n) * 100) / 100).toFixed(2);
}
This function formats numbers to 2 decimal places but does not include the currency symbol. The symbol is added separately in the HTML.

​
Changing Currency Symbol

To change from ₹ (Rupee) to another currency, you need to update multiple files.
1

Identify your currency

Common currency symbols:
  • Dollar: $ (USD, CAD, AUD)
  • Euro: € (EUR)
  • Pound: £ (GBP)
  • Yen: ¥ (JPY)
  • Rupee: ₹ (INR)
Choose your symbol and note if it goes before or after the amount.
2

Update all HTML files

Search and replace ₹ across all HTML files.Files to update:
  • index.html
  • products.html
  • pos.html
  • reports.html
3

Update JavaScript files

Update currency symbols in JavaScript template literals.Files to update:
  • js/dashboard.js
  • js/pos.js
  • js/products.js
  • js/reports.js
  • js/app.js

​
File-by-File Changes

​
Dashboard (index.html + js/dashboard.js)

<!-- Before -->
<p class="text-2xl font-bold text-gray-900 mt-1" id="todaySales">₹0.00</p>
<p class="text-2xl font-bold text-gray-900 mt-1" id="totalSales">₹0.00</p>

<!-- After (Dollar) -->
<p class="text-2xl font-bold text-gray-900 mt-1" id="todaySales">$0.00</p>
<p class="text-2xl font-bold text-gray-900 mt-1" id="totalSales">$0.00</p>

​
POS System (js/pos.js)

// Before - Product display
<div class="text-lg font-bold text-indigo-600">₹${money(p.price)}</div>

// After (Dollar)
<div class="text-lg font-bold text-indigo-600">$${money(p.price)}</div>

​
Thermal Receipt (js/pos.js:142-164)

Update the generateThermalReceipt() function: 
...cart.map(item => [
  item.name,
  `${item.qty} x ₹${money(item.price)}    ₹${money(item.qty * item.price)}`
]).flat(),
'--------------------------------',
`Subtotal:          ₹${money(subtotal)}`,
`Discount:         -₹${money(discount)}`,
'--------------------------------',
`Total:             ₹${money(total)}`,

​
Reports (js/reports.js and js/app.js)

// Before
<div class="text-sm text-gray-500">₹${money(p.price)}</div>
<div class="text-sm text-gray-500">₹${money(c.price)} × ${c.qty}</div>
grandTotalEl.textContent = `₹${money(total)}`;
<td class="border px-2 py-1 text-right">₹${money(r.subtotal)}</td>
<td class="border px-2 py-1 text-right">₹${money(r.tax)}</td>
<td class="border px-2 py-1 text-right">₹${money(r.total)}</td>
reportSummary.textContent = `${rows.length} sales, total ₹${money(total)}`;
<div class="mt-2 text-right font-medium">Grand Total: ₹${money(total)}</div>

// After (Dollar)
<div class="text-sm text-gray-500">${money(p.price)}</div>
<div class="text-sm text-gray-500">${money(c.price)} × ${c.qty}</div>
grandTotalEl.textContent = `$${money(total)}`;
<td class="border px-2 py-1 text-right">${money(r.subtotal)}</td>
<td class="border px-2 py-1 text-right">${money(r.tax)}</td>
<td class="border px-2 py-1 text-right">${money(r.total)}</td>
reportSummary.textContent = `${rows.length} sales, total $${money(total)}`;
<div class="mt-2 text-right font-medium">Grand Total: $${money(total)}</div>
Make sure to update all occurrences. A missed symbol will create an inconsistent user experience.

​
Quick Find & Replace

Use your code editor’s find and replace feature:
1

Find all HTML occurrences

Find: ₹
Replace with: $ (or your currency)
Files: *.html
2

Find all JavaScript occurrences

Find: `₹${money (with backtick)
Replace with: `$${money
Files: js/*.jsAlso find:
  • `-₹${money → `-$${money
  • total ₹${money → total $${money
3

Test thoroughly

Check every page:
  • Dashboard statistics
  • Product list
  • POS cart and totals
  • Reports table
  • Printed receipts

​
Currency Position

Some currencies appear after the amount (e.g., “100 kr” in Swedish Krona).

​
Example: Changing to Euro (€) After Amount

`₹${money(total)}`

​
Example: Changing to Euro (€) Before Amount

`₹${money(total)}`
Check your region’s convention for currency symbol placement.

​
Advanced: Custom Formatting

For advanced currency formatting (thousands separators, different decimal places), modify the money() function:
js/shared.js
// USD with thousand separators
export function money(n) {
  return new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD'
  }).format(n);
}

// Output: $1,234.56
js/shared.js
// JPY (no decimals)
export function money(n) {
  return new Intl.NumberFormat('ja-JP', {
    style: 'currency',
    currency: 'JPY'
  }).format(n);
}

// Output: ¥1,235
js/shared.js
// EUR with comma decimals
export function money(n) {
  return new Intl.NumberFormat('de-DE', {
    style: 'currency',
    currency: 'EUR'
  }).format(n);
}

// Output: 1.234,56 €
Using Intl.NumberFormat automatically handles symbol placement, decimal separators, and thousand separators based on locale.

​
Testing Your Changes

1

Clear browser cache

Update service worker cache version in sw.js:2:
const CACHE = 'mini-pos-v3';
2

Test with sample data

  1. Add products with various prices
  2. Create test sales
  3. View reports
  4. Print a receipt
  5. Check all pages for consistency
3

Verify calculations

Ensure:
  • Prices display correctly
  • Totals calculate accurately
  • Discounts apply properly
  • Reports show correct amounts
The money() function only formats numbers. If you change it to include the currency symbol, you’ll need to remove the symbol from template literals to avoid duplication.

​
Complete File List

Files that contain currency symbols:
  • index.html (2 occurrences)
  • products.html (if applicable)
  • pos.html (if applicable)
  • reports.html (if applicable)
  • js/dashboard.js (3 occurrences)
  • js/pos.js (12+ occurrences)
  • js/products.js (if separate file)
  • js/reports.js (if separate file)
  • js/app.js (15+ occurrences)
Use grep -r "₹" . in terminal to find all occurrences across your project.

Build docs developers (and LLMs) love

Get started for freeTalk to us