RestaurantOS - Modern Restaurant Management System

Overview

RestaurantOS is a comprehensive, modern restaurant management system designed to streamline daily operations for restaurant owners, managers, and staff. The application provides an intuitive dashboard-driven interface for managing menus, orders, tables, inventory, and generating business reports.

Key Features

1. Dashboard

Real-time KPI cards showing today's revenue, orders count, active orders, and average order value. Includes recent orders feed with status indicators, popular items rankings, and trend comparisons.

2. Menu Management

Category filtering (Appetizers, Main Course, Desserts, Beverages), quick search, visual grid with images and pricing, availability toggles, and full CRUD operations.

3. Orders Management

Complete status workflow: Pending → Confirmed → Preparing → Ready → Served → Completed. Supports Dine-in, Takeout, and Online orders with filtering, search by ID, and detailed item views.

4. Table Management

Interactive visual grid with status tracking (Available, Occupied, Reserved, Cleaning), statistics dashboard, and real-time updates.

5. Inventory Management

Stock tracking with visual progress bars, low stock alerts, category organization (Proteins, Vegetables, Dairy, Pantry), and search/filter capabilities.

Technical Challenges & Solutions

Challenge 1: Building Accessible UI Components

Problem: Creating fully accessible UI components (dialogs, dropdowns, tooltips) is complex and error-prone.

Solution: Leveraged Radix UI primitives providing WCAG-compliant accessibility, keyboard navigation, focus management, and screen reader compatibility out of the box.

Challenge 2: Consistent Styling at Scale

Problem: Maintaining consistent styling and avoiding CSS conflicts as the application grew.

Solution: Implemented CSS Modules combined with CSS Custom Properties for scoped styles, design consistency, and easy theme switching (light/dark mode).

Challenge 3: Responsive Multi-Device Design

Problem: Staff use various devices—desktop computers, tablets for table-side ordering, and mobile phones.

Solution: Desktop sidebar always visible, mobile sheet menu using Radix, custom use-mobile hook for conditional rendering, and flexible CSS Grid/Flexbox layouts.

Challenge 4: Real-time Order Status Management

Problem: Orders transition through multiple statuses requiring complex visual and functional management.

Solution: Created a centralized status configuration system bundling icons, colors, and labels for consistent visual indicators across the app.

Design System

Color Palette: Primary warm orange for branding, green for success states, amber for warnings, and red for errors.

Typography: Plus Jakarta Sans as primary font with system fallbacks.

Animations: Rich CSS animation library with fadeIn, slideUp, scaleIn, staggered delays, and hardware-accelerated transforms for smooth performance.

Technology Stack

Core: React 18.3.1, Vite 4.5.5 with SWC, React Router DOM 6.30.1

UI Library: Radix UI (Dialog, Dropdown, Label, Progress, Separator, Switch, Toast, Tooltip)

State Management: TanStack React Query 5.83.0 for server state, caching, and optimistic updates

Icons & Notifications: Lucide React 0.462.0, Sonner 1.7.4

Styling: CSS Modules with CSS Custom Properties for theming