Restaurant Management System - Copy this React, Tailwind Component to your project
Design: Layout: The interface uses a light color scheme with a predominantly white background. It's divided into several main sections: 1. Top navigation bar 2. Order List 3. Menu section 4. Customer Information sidebar Top Navigation: Logo: On the left, "Kopag" with a crown icon in orange and blue. Menu items: Centered, including "Dashboard", "Order List", "History", and "Bills". User profile: On the right, showing a notification bell icon and a circular user avatar. Order List: Horizontal scrollable list of customer orders. Each order card contains: Customer name Order number Number of items Table number Status indicator (color coded pills: Cancelled red, Ready to Serve green, Waiting orange, Completed blue) Menu Section: Tabs for different courses: Appetizer, Main course, Dessert, Beverage "Main course" is active, styled with a pill shaped background Grid layout for menu items, each containing: Food image Dish name Brief description Price Availability status Number of items sold Quantity adjuster ( and + buttons with number input) Customer Information Sidebar: Input field for customer name Dropdown for table selection Order Details section showing selected items Order Summary with subtotal and tax calculation "Process Transaction" button at the bottom Color Scheme: Primary blue: #4361ee (used for buttons, active states) Secondary colors: Green (#22c55e), Orange (#f97316), Red (#ef4444) for status indicators Text: Dark gray for headings, lighter gray for descriptions Backgrounds: White for main content, light gray for sidebar and some UI elements Typography: Sans serif font family throughout Variable font weights: Bold for headings, regular for body text Size hierarchy: Larger for main headings, smaller for descriptions and prices UI Components: 1. Buttons: Pill shaped Blue background for primary actions White background with blue border for secondary actions + and buttons for quantity adjustment 2. Input Fields: Rounded corners Light gray background Placeholder text in a lighter shade 3. Dropdown: Chevron icon indicating expandability Light gray background 4. Cards: Subtle drop shadow Rounded corners White background 5. Status Pills: Rounded pill shape Color coded based on status 6. Images: Square format for menu items Rounded corners Responsive Design: The layout appears to be designed for desktop view, with potential for responsive adjustments for smaller screens. Interactions: Quantity adjusters for menu items Clickable tabs for course selection Scrollable order list Expandable dropdown for table selection This UI design focuses on clarity, ease of use, and visual appeal, employing a clean, modern aesthetic suitable for a restaurant management system. The color coding and intuitive layout help users quickly understand order statuses and navigate the menu efficiently.
