A modern, elegant Point of Sale (POS) system built for restaurants. Streamline your operations with intuitive table management, order tracking, menu administration, and comprehensive reporting.
Built by: Nithin | Company: Evalogical
- Real-time sales overview with key metrics
- Quick actions for common tasks (New Order, Menu Management, Payments, Reports)
- Popular menu items tracking
- Sales performance summary
- Recent orders at a glance
- Create new orders with intuitive menu selection
- Real-time order status tracking (Preparing → Ready → Served → Completed)
- View detailed order information
- Multiple order tabs (Active, Ready, Completed)
- Search and filter functionality
- Mark orders as ready, served, or complete with instant feedback
- Add and manage restaurant tables
- View table status (Available/Occupied)
- Seat guests with party size tracking
- View active orders for each table
- Clear tables when customers leave
- Delete tables with confirmation dialog
- View all menu items organized by category
- Add new menu items with pricing and descriptions
- Edit existing menu items
- Toggle item availability (available/unavailable)
- Search menu items by name or category
- Delete menu items with confirmation
- Process payments for completed orders
- Multiple payment method options
- Tip calculation
- Order total display
- Payment confirmation workflow
- Sales analytics with daily, weekly, and monthly views
- Menu item performance reports
- Staff performance tracking
- Customer insights and statistics
- Visual charts and data visualization
- Date range filtering with quick presets
- Beautiful login page with email/password authentication
- Profile dropdown menu with user info
- Quick access to settings and account management
- Logout functionality
- Framework: Next.js 15 (App Router)
- Styling: Tailwind CSS with custom design tokens
- UI Components: shadcn/ui
- Typography: Manrope font family
- Charts: Recharts for data visualization
- State Management: React hooks with client-side state
- Icons: Lucide React
- Runtime: Node.js
- API Routes: Next.js Route Handlers
- Data Storage: Client-side state (Ready for database integration)
- Language: TypeScript
- Package Manager: npm
- Build Tool: Next.js built-in
- Node.js 18+ and npm installed
- Git installed on your machine
-
Clone the repository
git clone https://github.com/yourusername/kans-resto.git cd kans-resto -
Install dependencies
npm install
-
Run the development server
npm run dev
-
Open in browser
http://localhost:3000/login
npm run build
npm start- Navigate to the login page at
/login - Enter your credentials to access the system
- Start managing your restaurant from the dashboard
- Click "New Order" from the quick actions
- Browse menu items by category
- Click items to add them to the cart
- Adjust quantities using +/- buttons
- Select a table or enter customer info
- Click "Place Order"
- Go to the Tables page
- View all tables and their current status
- Click "Seat Guests" on available tables
- Enter guest count and server info
- Click "View Order" to see what's being served
- Click "Clear Table" when customers leave
- Go to the Payment page
- Select an order
- Choose payment method
- Add tip if applicable
- Review total and confirm payment
- Navigate to the Reports section
- Select your date range (Today, This Week, This Month, or custom)
- Choose report type (Sales, Menu Items, Staff, Customers)
- Analyze data with interactive charts
- Export data if needed
├── app/
│ ├── layout.tsx # Root layout with font setup
│ ├── globals.css # Global styles and design tokens
│ ├── page.tsx # Dashboard
│ ├── login/
│ │ └── page.tsx # Login page
│ ├── new-order/
│ │ └── page.tsx # New order creation
│ ├── orders/
│ │ └── page.tsx # Order management
│ ├── tables/
│ │ └── page.tsx # Table management
│ ├── menu/
│ │ └── page.tsx # Menu management
│ ├── payment/
│ │ └── page.tsx # Payment processing
│ └── reports/
│ └── page.tsx # Analytics and reporting
├── components/
│ ├── pos-header.tsx # Main navigation header
│ ├── menu-edit-form.tsx # Menu item form component
│ ├── ui/ # shadcn/ui components
│ └── toaster.tsx # Toast notifications
├── public/
│ └── images/ # Food and background images
└── styles/ # Additional styling files
- Primary: Dark text on light backgrounds
- Accent: Warm cream background (#F5F3F0)
- Success: Green for positive actions
- Destructive: Red for delete/cancel actions
- Blue Gradient: Used in charts for visual appeal
- Font: Manrope (modern, clean, restaurant-friendly)
- Responsive: Scales beautifully across all devices
- Card-based layout for easy scanning
- Status indicators with color coding
- Loading states and feedback messages
- Confirmation dialogs for critical actions
- Toast notifications for user feedback
- Mobile-responsive design
Create Order → Items to Cart → Select Table → Place Order →
Preparing → Mark Ready → Served → Complete Order → Archive
Available Table → Seat Guests → Occupied → View Order →
Complete Order → Clear Table → Available
View Menu → Add Item → Edit Details → Set Availability →
Monitor Performance → Delete if Needed
| Page | Path | Purpose |
|---|---|---|
| Login | /login |
User authentication |
| Dashboard | / |
Overview and quick actions |
| New Order | /new-order |
Create and customize orders |
| Orders | /orders |
Manage all orders |
| Tables | /tables |
Manage restaurant tables |
| Menu | /menu |
Edit menu items and availability |
| Payment | /payment |
Process payments |
| Reports | /reports |
View analytics and reports |
- 🟡 Preparing - Order is being prepared
- 🟢 Ready - Order ready for serving
- 🔵 Served - Order served to customer
- ⚫ Completed - Order finished and paid
- 🟢 Available - Table is empty and ready
- 🔴 Occupied - Table has customers
- ✅ Available - Item can be ordered
- ❌ Unavailable - Item is out of stock
The application is fully responsive and optimized for:
- 📱 Mobile devices (320px+)
- 📱 Tablets (768px+)
- 💻 Desktop (1024px+)
- 🖥️ Large screens (1280px+)
- Database integration (Supabase/Neon)
- Real authentication with JWT
- Inventory management system
- Kitchen display system (KDS)
- Customer loyalty program
- Staff management and scheduling
- Multi-location support
- Receipt printing
- Mobile app version
- Real-time order notifications
- AI-powered recommendations
We welcome contributions! Please follow these steps:
- Fork the repository
- Create a feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
Nithin
- GitHub: @nithin
- Email: nithin@evalogical.com
Evalogical
- Website: evalogical.com
- Email: info@evalogical.com
For support, email support@evalogical.com or open an issue in the repository.
Have questions or suggestions? Get in touch!
- Email: contact@evalogical.com
- Website: evalogical.com
- GitHub Issues: Report a bug
- Built with Next.js
- UI Components from shadcn/ui
- Styling with Tailwind CSS
- Charts powered by Recharts
- Icons from Lucide