Modern, full-featured Point of Sales (POS) and Restaurant Management System built with Next.js, TypeScript, and MySQL.
- Admin: Full system access, menu management, reports, and analytics
- Waiter: Table management, order creation, customer service
- Kitchen: Order queue display, cooking workflow management
- Cashier: Payment processing, receipt generation
- Real-time Table Status: Live updates of table availability and occupancy
- Smart Order Management: From order creation to delivery tracking
- Kitchen Display System (KDS): Efficient order queue for kitchen staff
- Payment Processing: Cash payment with automatic change calculation
- Warning System: Automatic alerts for pending payments
- Inventory Management: Daily stock tracking and availability
- Receipt Generation: Professional receipt printing
- Responsive Design: Works on desktop, tablet, and mobile
- Dark Mode: Eye-friendly theme switching
- Real-time Updates: Automatic polling for live data
- Premium Aesthetics: Modern gradients, animations, and micro-interactions
- Shadcn UI Components: Beautiful, accessible component library
- Framework: Next.js 14+ (App Router)
- Language: TypeScript
- Styling: Tailwind CSS
- UI Components: Shadcn UI
- Icons: Lucide React
- State Management: TanStack Query (React Query)
- Forms: React Hook Form + Zod
- Notifications: Sonner
- Theme: next-themes
- Runtime: Node.js
- API: Next.js API Routes
- Database: MySQL
- ORM: mysql2 (with connection pooling)
- Validation: Zod
restaus-app/
├── app/ # Next.js App Router
│ ├── api/ # API Routes
│ │ ├── auth/ # Authentication endpoints
│ │ ├── tables/ # Table management
│ │ ├── menus/ # Menu management
│ │ ├── orders/ # Order management
│ │ ├── payments/ # Payment processing
│ │ └── categories/ # Category endpoints
│ ├── login/ # Login page
│ ├── admin/ # Admin dashboard
│ ├── waiter/ # Waiter interface
│ ├── kitchen/ # Kitchen display
│ └── cashier/ # Cashier interface
├── components/ # React components
│ ├── ui/ # Shadcn UI components
│ └── providers/ # Context providers
├── hooks/ # Custom React hooks
│ ├── use-auth.ts # Authentication hook
│ ├── use-tables.ts # Tables data hook
│ ├── use-menus.ts # Menus data hook
│ ├── use-orders.ts # Orders data hook
│ ├── use-cart.ts # Shopping cart hook
│ └── use-payments.ts # Payments hook
├── lib/ # Utility libraries
│ ├── db.ts # Database connection
│ ├── api-client.ts # API client utilities
│ ├── api-response.ts # API response helpers
│ └── utils.ts # General utilities
├── types/ # TypeScript type definitions
│ └── index.ts # All type definitions
├── constants/ # Application constants
│ └── index.ts # Constants and configs
├── sql/ # SQL scripts
│ ├── query.sql # Database schema
│ └── seed.sql # Seed data
├── docs/ # Documentation
│ ├── plan.md # Project plan
│ ├── major-task.md # Major tasks
│ ├── minor-task.md # Minor tasks
│ └── PROGRESS.md # Implementation progress
└── middleware.ts # Next.js middleware
- Node.js 18+ installed
- MySQL 8+ installed and running
- npm or yarn package manager
-
Clone the repository
git clone <repository-url> cd restaus-app
-
Install dependencies
npm install
-
Setup Database
# Create database mysql -u root -p < sql/query.sql # Insert seed data mysql -u root -p < sql/seed.sql
-
Configure Environment Variables Create a
.env.localfile in the root directory:DB_HOST=localhost DB_USER=root DB_PASSWORD=your_password DB_NAME=restaus_db NEXT_PUBLIC_API_URL=http://localhost:3000/api
-
Run Development Server
npm run dev
-
Open Application Navigate to http://localhost:3000
| Role | Username | Password |
|---|---|---|
| Admin | admin | admin123 |
| Waiter | waiter | waiter123 |
| Kitchen | kitchen | kitchen123 |
| Cashier | cashier | cashier123 |
- Login with waiter credentials
- View table dashboard with real-time status
- Click available table to start new order
- Select menu items and add to cart
- Add special notes if needed
- Submit order to kitchen
- Login with kitchen credentials
- View incoming orders in queue
- Update item status: Pending → Cooking → Served
- Orders automatically move to cashier when all items served
- Login with cashier credentials
- View tables with delivered orders
- Process payment (cash)
- System calculates change automatically
- Print receipt
- Login with admin credentials
- Manage menus and categories
- Update daily inventory
- View sales reports and analytics
- Manage tables and users
1. Restaurant Opens → All tables set to "Available"
2. Customer Arrives → Waiter assigns table (Reserved)
3. Order Placed → Items sent to kitchen (Processing)
4. Cooking → Kitchen updates item status (Cooking)
5. Ready → All items marked as served (Delivered)
6. Warning → System alerts if payment pending > 5 min
7. Payment → Cashier processes payment (Completed)
8. Table Released → Status returns to "Available"
- Tables auto-refresh every 5 seconds
- Kitchen queue updates every 3 seconds
- Warning checks every 10 seconds
- Daily stock tracking
- Automatic stock reduction on order
- Out-of-stock items automatically disabled
- Alerts when order delivered but not paid
- Visual indicators on table dashboard
- Prioritizes tables needing payment
POST /api/auth/login- User loginPOST /api/auth/logout- User logout
GET /api/tables- Get all tablesPOST /api/tables- Create tableGET /api/tables/[id]- Get single tablePATCH /api/tables/[id]- Update table statusDELETE /api/tables/[id]- Delete table
GET /api/orders- Get all orders (with filters)POST /api/orders- Create new orderGET /api/orders/[id]- Get single orderPATCH /api/orders/[id]/status- Update order status
POST /api/payments- Process paymentGET /api/payments- Get payment history
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License.
Built with ❤️ for modern restaurant management
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.