POS Micro Web - React 19 Cashier App

POS Micro Web - Modern Offline-First Point of Sale & Inventory System

POS Micro Web is a modern, responsive, offline-first, and multi-language Cashier (Point of Sale) web application designed specifically for MSMEs (UMKM), grocery stores, food stalls, and micro-businesses.

The application runs 100% inside the browser using client-side local storage (Dexie.js / IndexedDB and LocalStorage)[cite: 7]. It can be deployed as a Progressive Web App (PWA) or installed on mobile devices without requiring complex server backends or database setups[cite: 7].

🌟 Key Features

🛒 1. Cashier & Smart Checkout

• Catalog & Quick Filter: Search products instantly by name, category, or camera barcode scanning[cite: 7].
• Non-Catalog Items: Instantly add custom/unregistered products or services to the cart[cite: 7].
• Flexible Payments: Supports Cash (with automatic change calculator), QRIS image display, and Customer Store Credit/Debt (Kasbon)[cite: 7].

📜 2. Thermal Printing & Multi-Channel Receipts

• 58mm Thermal Preview: Clean 32-character layout tailored for thermal receipt printers[cite: 7].
• Instant WhatsApp Sharing: Send formatted itemized receipt summaries directly to the customer's WhatsApp in one click[cite: 7].
• Bluetooth ESC/POS & Browser Printing: Print directly via standard browser print dialogs or wireless Bluetooth thermal printers[cite: 7].

📦 3. Stock & Inventory Management

• Automatic Canvas Image Compressor: Product images are auto-compressed to <100KB to save device storage memory[cite: 7].
• Profit Margin & Alerts: Calculates profit margins based on COGS/HPP vs Selling Price, with visual badges for low stock alerts[cite: 7].

📖 4. Customer Credit Ledger (Kasbon)

• Balance Tracking: Automatic running ledger for every customer's credit and debt history[cite: 7].
• WhatsApp Payment Reminders: Send breakdown statements and due reminders directly to customer WhatsApp chats[cite: 7].
• Flexible Installment Settlement: Easily record partial installments or full debt settlements[cite: 7].

📊 5. Sales Reports & Analytics

• Interactive Visualizations: Track daily, monthly, or yearly revenue and net profit trends powered by Recharts[cite: 7].
• Top 5 Product Insights: Automatically identifies best-selling and most profitable products[cite: 7].
• Data Export: Download comprehensive reports in Excel (.xlsx) and PDF formats[cite: 7].

🌐 6. Native Multi-Language & RTL Support

• Includes full interface translations for 🇮🇩 Indonesian, 🇬🇧 English, and 🇸🇦 Arabic[cite: 7].
• Features complete native Right-to-Left (RTL) dynamic layout swapping for Arabic language users[cite: 7].

Features

🌟 Core Key Features

1. Cashier & Smart Checkout

• Catalog & Quick Search: Instant product filtering by category, product name, or live camera barcode scanning.
• Custom Items: Easily add unregistered products or manual services to the cart on the fly.
• Multiple Payment Methods: Full support for Cash (with auto change computation), store QRIS display, and Customer Credit / Debt (Kasbon).

2. Thermal Printing & Multi-Channel Receipts

• 58mm Thermal Format: 32-character receipt view optimized for thermal paper printers.
• WhatsApp Instant Sharing: One-click option to send itemized transaction summaries directly to customer WhatsApp chats.
• Browser & Bluetooth Printing: Print receipts via standard browser dialogs or direct Bluetooth ESC/POS hardware.

3. Inventory & Low Stock Management

• Auto Image Compression: Built-in Canvas API automatically compresses uploaded product images under 100KB to preserve device storage.
• Margin & Low Stock Alerts: Automated profit margin calculations and red warning indicators when stock drops below threshold levels.

4. Customer Credit Ledger (Kasbon)

• Per-Customer Ledger: Track running balances, transaction history, and partial debt settlements effortlessly.
• WhatsApp Reminders: Send pre-formatted credit breakdowns and debt due reminders directly to clients.

5. Sales Reports & Analytics

• Interactive Charts: Real-time daily, monthly, and yearly revenue and profit visualizations powered by Recharts.
• Top 5 Rankings: Automatically highlights top best-selling and most profitable products.
• Export Capabilities: Download structured financial records in Excel (.xlsx) and PDF formats.

6. Multi-Language & Native RTL Support

• 3 Languages Built-in: Complete UI translation for English, Indonesian, and Arabic.
• Native RTL Layout: Dynamic Right-to-Left layout swapping for smooth Arabic user experience.

Requirements

📋 System Requirements

• Runtime Environment: Node.js v20.0 or higher[cite: 7]
• Package Manager: NPM v9.0 or higher[cite: 7]
• Supported Browsers: Any modern browser with IndexedDB support (Google Chrome, Safari, Firefox, Edge)[cite: 7]
• Database: None required (Runs 100% serverless via IndexedDB / Dexie.js in local storage)[cite: 7]

Instructions

🚀 Installation & Setup Guide

1. Extract the package files and open your terminal in the root directory:

   <code>cd pos-micro-web</code>
   

   [cite: 7]
2. Install all required node package dependencies:

   <code>npm install</code>
   

   [cite: 7]
3. Launch the local Vite development server:

   <code>npm run dev</code>
   

   Open http://localhost:5173 in your web browser[cite: 7].

4. To compile the production-ready build for web hosting or PWA deployment, run:

   <code>npm run build</code>
   

   The output files will be generated inside the dist/ folder[cite: 7].