copper-system

byMariyum Maru

Transform this current page into a highly professional, full-scale B2B SaaS Platform called "MenuForge". The interface must be completely redesigned into an advanced 50/50 split-screen real-time editor workspace where restaurant owners can design their menus, domains, and branding on the left, and view the live functional output on the right based on the attached references. 1. LANDING & SECURE OAUTH GATEWAY: - Before reaching the dashboard, implement a premium, dark-themed Login Page. - Feature a prominent, official "Sign In with Google" button with its native icon alongside a traditional email/password form. - Implement strict multi-tenant data isolation: when a user logs in via Google, they can only view, edit, and access the specific restaurants, custom domains, and order data mapped to their unique user ID. 2. LEFT PANEL: SAAS CONFIGURATION & CONTROLS (Vertical Scrollable) Convert the current basic input fields into a robust, comprehensive restaurant setup sidebar containing the following modules: - Basic Settings & Slug: Input fields for Restaurant Name, Description, URL Slug, and Currency selection (default to PKR). - Custom Domain Integration: An input field for custom domains (e.g., www.myrestaurant.com) with an active informational component explaining CNAME/SSL setup. - Branding Customizer: Color pickers to define the primary and secondary interface colors, theme selection (Light/Dark/Warm Food Theme), and a drag-and-drop zone to upload the Restaurant Logo. - Interactive Menu & 3D Items Builder: A dynamic form system to add food categories (e.g., Starters, Mains, Drinks). Inside each category, allow adding food items with Name, Price, Description, an Image upload, and a 3D file dropzone supporting .glb / .gltf formats. - Table & QR Designer: An input field for "Total Tables". Automatically generate unique table routing URLs (e.g., /menu?table=5) and include options to customize the QR code card colors and center logo overlay. 3. RIGHT PANEL: ACCURATE FULL-SCALE LIVE DIGITAL MENU PREVIEW Replace the current small component box placeholder on the right with a full-height, interactive device viewport simulation as referenced in the attached laptop layout. This viewport must dynamically fetch data from the left panel in real-time and display a fully styled digital menu layout exactly matching the attached mobile menu screenshot: - Inner Left Sidebar: A sticky category navigation panel reflecting the exact food categories defined on the left side (e.g., Spring Roll, BBQ, Seafood, Chef's Special). - Center Main Area: A fluid grid system displaying realistic Food Item Cards. Each card features the food image, title, item description, and an interactive "View in 3D" button. - 3D AR Overlays: Clicking "View in 3D" triggers a lightweight model-viewer overlay component allowing 360-degree item rotation and zoom simulating real table placement. - Shopping Cart & Total: A sticky bottom orange/warm bar exactly like the attached screenshot showcasing the cart state summary ("View Cart" text with live pricing calculations). 4. FULL ORDERING LOGIC, COUNTDOWN & GAMES SYSTEM: - Simulated Order Checkout: Clicking "Order Now" from the preview cart drawer triggers a checkout sequence. It captures the table parameter from the URL (?table=X) and compiles a clean order JSON payload containing: {order_id, table_number, item_summary, total_amount, timestamp, status: "Pending"}. - Real-time Kitchen Routing (KDS): Create a separate administrative view within the SaaS meant for the kitchen terminal/computer screen. It listens for incoming order payloads and formats them onto active live tracking grids. Include an export structure titled "Connect Webhook to Google Sheets". - Wait-Time Tracker & Boredom Killer: After placing an order, the customer preview shifts to a dynamic live tracking panel displaying an estimated countdown timer alongside an embedded lightweight, interactive mini-game block (like a retro arcade flappy bird clone or trivia game) to engage customers while they wait. 5. TECH CONSTRAINTS, RESPONSIVE DESIGN & REFRESH LOGIC: - Use Tailwind CSS with a cohesive, ultra-premium dark theme (Zinc/Slate base with Amber/Orange accents for a rich food-tech experience). - Every text entry, color alteration, logo upload, or newly added dish form submission on the left panel must instantaneously render inside the right panel preview window without reloading the browser page.