CommercePOS is an enterprise-grade Point of Sale and Inventory Management system designed for modern retailers. It seamlessly bridges the gap between physical retail and e-commerce, providing a unified command center for sales, stock, and customer engagement.
Built with Angular 21 and Tailwind CSS 4, it delivers a native-app-like experience in the browser—fast, responsive, and resilient.
- Lightning-Fast Checkout: Optimized for high-volume environments with keyboard shortcuts and barcode scanning.
- Flexible Payments: Support for Split Payments, Cash, Credit, and QRIS.
- Customer Profiles: Instant access to customer purchase history and loyalty data.
- Real-Time Stock Tracking: Syncs instantly across multiple branches and the online store.
- Barcode Label Printing: Built-in generator for custom product labels (Code 128) with price encoding.
- Stock Movements: Track transfers between branches, supplier deliveries (Purchase Orders), and returns.
- Low Stock Alerts: Automated notifications for replenishment.
- Unified Order Management: Process online orders from your Next.js storefront directly within the POS.
- Workflow Automation: Manage order lifecycle: New → Processing → Shipped.
- Automated Fulfillment: One-click generation of Packing Slips and Shipping Labels.
- CMS Integration: Manage website content, including Homepage Banners, directly from the admin panel.
- Live Dashboard: Real-time sales velocity, revenue metrics, and branch performance.
- Financial Reporting: A4-ready sales reports and daily closing summaries.
- Stock Audit: Detailed history of every inventory movement (sales, adjustments, transfers).
Reflecting a commitment to Clean Architecture and Modern Web Standards:
- Signal-Driven Architecture: Leverages Angular Signals for fine-grained reactivity and minimal change detection cycles.
- Standalone Components: fully modular architecture without NgModules.
- Real-Time Sync: Integrated with Laravel Echo (Reverb/Pusher) for instant updates on orders and inventory.
- Print Engineering: Custom implementation of "Hidden Print Components" for pixel-perfect A6 labels and A4 reports using CSS Paged Media.
- Optimized Build: Application bundles are split and lazy-loaded for sub-second Initial Contentful Paint (ICP).
- Type Safety: Strict TypeScript usage throughout the codebase, maximizing reliability.
- Node.js (v20+)
- NPM (v10+)
- CommerceSystem-API (Laravel Backend)
-
Clone the Repository
git clone <repository-url> cd CommercePOS npm install
-
Environment Configuration Create a
.envfile in the root directory:API_URL=http://localhost:8000/api DEBUG_MODE=true
-
Run the Application
npm start
The app will launch at
http://localhost:4200/.
| Command | Description |
|---|---|
npm start |
Launches dev server with .env injection |
npm run build |
Generates production bundle in dist/ |
npm test |
Runs unit tests via Vitest |
- Role-Based Access Control (RBAC): Granular permissions for Admins, Managers, and Cashiers.
- Secure Authentication: JWT-based auth flow with secure route guards and HTTP interceptors.
Proprietary software part of the CommerceSystem ecosystem.