F&B Point of Sale & Inventory Management System
Overview
A web-based Point of Sale (POS) system, a single-outlet F&B business such as a cafe or restaurant.
The system was designed to streamline daily sales operations, from selecting menu items and managing variants to processing payments and generating receipts. It also provides inventory management, recipe-based HPP calculation, shift management, customer management, and business reporting for the owner.
The application was built as a frontend-based POS system using Vue 3, with data persistence through local storage and a separated service layer to prepare the system for future REST API integration.
Project Goals
The main goals of this project were:
Streamline the cashier transaction workflow
Centralize sales and inventory management
Automatically calculate menu HPP based on recipes
Track ingredient stock and stock movements
Provide shift management and cash reconciliation
Provide business insights through sales reports and analytics
Keep transaction data consistent through price and cost snapshots
Features
Point of Sale
Built a complete cashier workflow for processing F&B transactions:
Menu and category browsing
Menu search and filtering
Menu variants and option selection
Quantity and cart management
Order type selection
Customer information
Discount calculation
Additional charges
Cash, QRIS, and transfer payment methods
Automatic change calculation
Receipt generation and printing
Menu & Recipe Management
Manage menu items and their production recipes:
Menu CRUD and status management
Category management
Multiple variant groups
Variant price adjustments
Base recipes
Variant-specific recipe overrides
Automatic menu HPP calculation
Automatic available portion calculation based on ingredient stock
Inventory Management
Implemented ingredient and stock management:
Ingredient management
Stock receiving
Stock adjustments
Automatic stock consumption after transactions
Stock movement history
Low-stock alerts
Stock availability calculation based on recipes
Shift Management
Built a cashier shift workflow for daily cash accountability:
Open and close shifts
Opening cash balance
Sales summary by payment method
Expected cash calculation
Closing cash reconciliation
Cash variance tracking
Transaction-to-shift association
Authentication & Authorization
Implemented role-based access control for different users:
6-digit PIN authentication
Persistent session management
Kasir and Owner roles
Route-level authorization
Role-based navigation
User management
PIN management
Customers
Added customer management for transaction records:
Customer CRUD
Customer information
Customer selection during checkout
Customer-based order history
Dashboard & Reports
Built reporting features for business analysis:
Total sales
Order count
Items sold
Average order value
Estimated profit
Sales trends
Payment method breakdown
Top-selling menus
Busiest hours
Category performance
Cashier performance
Period comparison
CSV and Excel export
Tech Stack
Vue 3
TypeScript
Tailwind CSS v4
Laravel 13
MySQL, etc
My Contribution
Planned the project requirements and business workflows through a PRD
Designed the application structure and frontend architecture
Built the POS transaction flow from menu selection to payment
Implemented menu variants and recipe-based HPP calculation
Developed inventory management and automatic stock consumption
Implemented cashier shift management and cash reconciliation
Built role-based authentication and authorization
Developed customer and user management features
Built sales reports and analytics
Implemented CSV and Excel export
Separated business logic into service modules to keep the application maintainable
Challenges & Learning
Through this project, I gained experience in:
Translating business requirements into application workflows
Designing a complete F&B POS system from scratch
Handling menu variants and recipe combinations
Implementing recipe-based HPP and inventory calculations
Managing transaction data and historical price snapshots
Implementing role-based access control
Managing client-side state and persistent data
Building reports and data visualizations
Structuring frontend business logic into reusable services
Using AI-assisted development while maintaining control over the project architecture and business logic
Result
The final system provides an integrated workflow for daily F&B operations, covering sales transactions, menu and recipe management, inventory, cashier shifts, customers, and business reporting.
The system also separates business logic into service modules, making the application easier to maintain and providing a foundation for future integration with a REST API backend.