A modern business management system built with Next.js 16 and PocketBase, designed for managing customers, orders, menus, invoices, and finances.
- Authentication - Secure login with PocketBase
- Dashboard - Real-time statistics and revenue trends
- Customer Management - List, view, and manage customers
- Order Management - Create and track orders with status
- Dark Theme UI - Modern, responsive design matching professional standards
- Real-time Data - Instant data synchronization with PocketBase
- Menu Management - Categories and menu items
- Invoice Generation - Auto-generate from orders
- Payment Tracking - Multiple payment methods
- Expense Management - Track business expenses
- Inventory System - Stock management and alerts
- Advanced Analytics - Detailed reporting
┌─────────────┐
│ Next.js 16 │ (Frontend)
├─────────────┤
│ React 19 │
├─────────────┤
│ PocketBase │ (Backend + Database)
└─────────────┘
- Frontend: Next.js 16 with App Router, React 19, TypeScript
- Backend: PocketBase (serverless SQLite)
- Styling: Tailwind CSS v4 with shadcn/ui
- Icons: Lucide React
- Forms: React Hook Form + Zod validation
- Charts: Recharts
- Notifications: Sonner toast
- Node.js 18+ and npm/pnpm
- PocketBase server running locally or deployed
- The provided
catering_pb_collections.jsonfile
# Download from https://pocketbase.io
# Run it
./pocketbase serve
# In another terminal, import collections:
# Go to http://localhost:8090/admin
# Upload catering_pb_collections.json to Collections# Install dependencies
npm install
# Run development server
npm run dev
# Open http://localhost:3000- PocketBase URL:
http://localhost:8090 - Email: Your PocketBase user email
- Password: Your PocketBase password
📖 Detailed Setup Guide | 📖 Quick Start | 📖 Technical Details
Ledgr/
├── app/
│ ├── (auth)/login # Login page
│ ├── dashboard # Main dashboard
│ ├── customers # Customer management
│ ├── orders # Order management
│ ├── menus # Menu management (ready)
│ ├── invoices # Invoice management (ready)
│ ├── inventory # Inventory tracking (ready)
│ ├── expenses # Expense tracking (ready)
│ └── settings # Settings (ready)
├── components/
│ ├── layout/ # Sidebar, Topbar, MainLayout
│ ├── dashboard/ # Dashboard components
│ └── ui/ # shadcn/ui components
├── lib/
│ ├── types.ts # TypeScript types for PocketBase
│ ├── auth-context.tsx # Authentication state
│ ├── pocketbase.ts # PocketBase client
│ ├── api.ts # Helper functions
│ └── utils.ts # Utility functions
├── SETUP.md # Detailed setup instructions
├── QUICKSTART.md # Quick start guide
├── IMPLEMENTATION.md # Technical implementation details
└── package.json # Dependencies
- Background:
#0f1117(slate-950) - Card:
#1e2538(slate-900) - Accent:
#f97316(orange-500) - Text:
#e2e8f0(slate-100) - Muted:
#94a3b8(slate-400)
- Responsive sidebar navigation
- Sticky topbar with search
- Status badges (draft, confirmed, completed, cancelled)
- Interactive tables with hover effects
- Toast notifications
- Loading skeletons
- Modal forms (ready for implementation)
- User opens the app → redirected to
/login - Enters PocketBase URL (stored in localStorage)
- Authenticates with email/password
- Auth token stored securely
- Redirected to
/dashboard - Token persists across sessions
The PocketBase schema includes:
- customers - Customer information and types
- menu_categories - Menu category definitions
- menu_items - Individual menu items with pricing
- suppliers - Supplier contact information
- ingredients - Ingredient inventory and stock
- orders - Customer orders with status tracking
- order_items - Individual items within orders
- invoices - Invoice records and status
- payments - Payment tracking and methods
- expenses - Business expense records
- users - User accounts (authentication)
All PocketBase collections are fully typed in lib/types.ts for type safety. API calls use:
const pb = useAuth().pb; // Get PocketBase client
const records = await pb.collection('customers').getList(1, 50);Helper functions available in lib/api.ts:
formatCurrency()- Format numbers as Indonesian RupiahformatDate()- Format dates with localeformatDateTime()- Format dates with timeuploadFile()- Upload files to PocketBasegetFileUrl()- Get file URLs for media
- Mobile: Full-width single column layout, collapsible sidebar
- Tablet: Two-column grid layouts with optimized spacing
- Desktop: Full sidebar + content area with multi-column grids
npm run build
vercel --prod- Build:
npm run build - Start:
npm run start - Update PocketBase URL to production instance
No environment variables needed! The app stores:
pb_url- PocketBase server URL (localStorage)pb_auth- Auth token (localStorage)
- Authentication system
- Dashboard with statistics
- Customer management
- Order listing
- Create orders with items
- Order status workflow
- Order detail page
- Invoice generation
- Menu management
- Inventory tracking
- Expense management
- Advanced analytics
- User roles and permissions
- Email notifications
- SMS alerts
- API webhooks
- Multi-user support
- Accounting integration
- Verify PocketBase is running
- Check URL format (http://localhost:8090)
- Verify CORS is enabled if remote server
- Confirm user exists in PocketBase
- Check password is correct
- Verify
userscollection exists and has auth enabled
- Create sample data in PocketBase Admin
- Refresh the page
- Check browser console for errors
- Import
catering_pb_collections.jsoninto PocketBase - Verify collection permissions allow authenticated access
- 📖 Detailed Setup Guide - Complete setup instructions
- 🚀 Quick Start Guide - Get running in 5 minutes
- 🔧 Technical Implementation - Architecture & components
- 📦 PocketBase Docs - Backend documentation
- ⚛️ Next.js Docs - Framework documentation
- 🎨 shadcn/ui - Component documentation
Add to components:
console.log("[v0] API Response:", data)- Local: http://localhost:8090/admin
- View all data and manage collections
- Create test records for development
- Colors defined in components (search
orange-500) - Tailwind classes throughout the app
- Edit
app/globals.cssfor global styles
- Create page in
app/directory - Wrap with
<MainLayout title="..." /> - Use
useAuth()hook for PocketBase client - Follow existing patterns in other pages
Improvements welcome! Some ideas:
- Add form validation with Zod
- Implement advanced filtering
- Add export to PDF/Excel
- Create mobile-friendly forms
- Add dark/light mode toggle
- Implement search optimization
Feel free to use this template for your catering business or as a foundation for your own ERP system.
This is a fully functional starting point for a modern catering management system. Add features, customize the design, and deploy to help catering businesses manage their operations efficiently.
Questions? Check the documentation files or the source code comments!
Built with ❤️ using Next.js, PocketBase, and Tailwind CSS