first commit

2026-08-12 11:53:13 +05:30 · 2026-08-12 11:53:13 +05:30 · a03a620acc
commit a03a620acc
71 changed files with 35293 additions and 0 deletions
--- a/.agents/rules/graphify.md
+++ b/.agents/rules/graphify.md
@ -0,0 +1,14 @@
 ---
 trigger: always_on
 description: Consult the graphify knowledge graph at graphify-out/ for codebase and architecture questions.
 ---
 ## graphify
 This project has a graphify knowledge graph at graphify-out/.
 Rules:
 - For codebase or architecture questions, when `graphify-out/graph.json` exists, first run `graphify query "<question>"` (CLI) or `query_graph` (MCP). Use `graphify path "<A>" "<B>"` / `shortest_path` for relationships and `graphify explain "<concept>"` / `get_node` for focused concepts. These return a scoped subgraph, usually much smaller than `GRAPH_REPORT.md` or raw grep output.
 - If graphify-out/wiki/index.md exists, navigate it instead of reading raw files
 - Read graphify-out/GRAPH_REPORT.md only for broad architecture review or when query/path/explain do not surface enough context
 - After modifying code files in this session, run `graphify update .` to keep the graph current (AST-only, no API cost)
--- a/.agents/workflows/graphify.md
+++ b/.agents/workflows/graphify.md
@ -0,0 +1,10 @@
 ---
 name: graphify
 description: Turn any folder of files into a navigable knowledge graph
 ---
 # Workflow: graphify
 Follow the graphify skill to run the full pipeline.
 If no path argument is given, use `.` (current directory).
--- a/.env
+++ b/.env
@ -0,0 +1,7 @@
 # RestroAI Frontend Environment Variables
 # The HTTP URL of the remote backend server
 VITE_API_URL=https://restro-backend.navigolabs.com
 # The WebSocket URL of the remote backend server
 VITE_WS_URL=wss://restro-backend.navigolabs.com
--- a/.env.example
+++ b/.env.example
@ -0,0 +1,7 @@
 # RestroAI Frontend Environment Variables
 # The HTTP URL of the remote backend server
 VITE_API_URL=https://api.yourdomain.com
 # The WebSocket URL of the remote backend server
 VITE_WS_URL=wss://api.yourdomain.com
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,24 @@
 # Logs
 logs
 *.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 node_modules
 dist
 dist-ssr
 *.local
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
 .idea
 .DS_Store
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw?
--- a/.oxlintrc.json
+++ b/.oxlintrc.json
@ -0,0 +1,8 @@
 {
  "$schema": "./node_modules/oxlint/configuration_schema.json",
  "plugins": ["react", "typescript", "oxc"],
  "rules": {
    "react/rules-of-hooks": "error",
    "react/only-export-components": ["warn", { "allowConstantExport": true }]
  }
 }
--- a/README.md
+++ b/README.md
@ -0,0 +1,32 @@
 # React + TypeScript + Vite
 This template provides a minimal setup to get React working in Vite with HMR and some Oxlint rules.
 Currently, two official plugins are available:
 - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
 - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
 ## React Compiler
 The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
 ## Expanding the Oxlint configuration
 If you are developing a production application, we recommend enabling type-aware lint rules by installing `oxlint-tsgolint` and editing `.oxlintrc.json`:
 ```json
 {
  "$schema": "./node_modules/oxlint/configuration_schema.json",
  "plugins": ["react", "typescript", "oxc"],
  "options": {
    "typeAware": true
  },
  "rules": {
    "react/rules-of-hooks": "error",
    "react/only-export-components": ["warn", { "allowConstantExport": true }]
  }
 }
 ```
 See the [Oxlint rules documentation](https://oxc.rs/docs/guide/usage/linter/rules) for the full list of rules and categories.
--- a/graphify-out/.graphify_analysis.json
+++ b/graphify-out/.graphify_analysis.json
@ -0,0 +1,407 @@
 {
  "communities": {
    "0": [
      "src_app",
      "src_app_app",
      "src_app_customerview",
      "src_app_gettablenumfromurl",
      "src_components_admin_staffloginmodal",
      "src_components_admin_staffloginmodal_staffloginmodal",
      "src_components_admin_staffloginmodal_staffloginmodalprops",
      "src_components_customer_billpaymentview",
      "src_components_customer_billpaymentview_billpaymentview",
      "src_components_customer_billpaymentview_billpaymentviewprops",
      "src_components_customer_customizationmodal_customizationmodal",
      "src_components_customer_orderstatusview",
      "src_components_customer_orderstatusview_order_steps",
      "src_components_customer_orderstatusview_orderstatusview",
      "src_components_customer_orderstatusview_orderstatusviewprops",
      "src_components_customer_tablelandingview",
      "src_components_customer_tablelandingview_tablelandingview",
      "src_components_customer_tablelandingview_tablelandingviewprops",
      "src_main",
      "src_services_api",
      "src_services_api_apirequest",
      "src_services_api_clearcustomersession",
      "src_services_api_cleartokens",
      "src_services_api_getaccesstoken",
      "src_services_api_getbackendmenuid",
      "src_services_api_getcustomersessionid",
      "src_services_api_getcustomertoken",
      "src_services_api_getfrontendmenuitem",
      "src_services_api_getrefreshtoken",
      "src_services_api_handlemockrequest",
      "src_services_api_isdemomode",
      "src_services_api_mockdb",
      "src_services_api_notifywslisteners",
      "src_services_api_restrowebsocket",
      "src_services_api_restrowebsocket_close",
      "src_services_api_restrowebsocket_connect",
      "src_services_api_restrowebsocket_constructor",
      "src_services_api_setcustomersession",
      "src_services_api_setdemomodechangecallback",
      "src_services_api_settokens",
      "src_services_api_subscribetowsevents",
      "src_services_api_triggerdemomode",
      "src_services_api_wslisteners",
      "src_theme_theme",
      "src_theme_theme_theme"
    ],
    "1": [
      "ref_react",
      "src_components_admin_inventoryview",
      "src_components_analytics_analyticsdashboard",
      "src_components_common_navigation",
      "src_components_common_navigation_navigation",
      "src_components_common_navigation_navigationprops",
      "src_components_common_statusbadge",
      "src_components_common_statusbadge_statusbadge",
      "src_components_customer_cartreviewview",
      "src_components_customer_cartreviewview_cartreviewview",
      "src_components_customer_cartreviewview_cartreviewviewprops",
      "src_components_customer_customizationmodal",
      "src_components_customer_customizationmodal_customizationmodalprops",
      "src_components_customer_menubrowseview",
      "src_components_customer_menubrowseview_dietary_filters",
      "src_components_customer_menubrowseview_menubrowseview",
      "src_components_customer_menubrowseview_menubrowseviewprops",
      "src_components_customer_menubrowseview_spice_icons",
      "src_components_table_tablelandingview",
      "src_components_table_tablelandingview_tablelandingview",
      "src_data_menudata",
      "src_data_menudata_categories",
      "src_data_menudata_categorytype",
      "src_data_menudata_menu_items",
      "src_data_menudata_menuitem"
    ],
    "2": [
      "emotion_react",
      "emotion_styled",
      "mui_icons_material",
      "mui_material",
      "package",
      "package_dependencies",
      "package_dependencies_emotion_react",
      "package_dependencies_emotion_styled",
      "package_dependencies_mui_icons_material",
      "package_dependencies_mui_material",
      "package_dependencies_react",
      "package_dependencies_react_dom",
      "package_name",
      "package_packagemanager",
      "package_private",
      "package_scripts",
      "package_scripts_build",
      "package_scripts_dev",
      "package_scripts_lint",
      "package_scripts_preview",
      "package_type",
      "package_version",
      "react",
      "react_dom"
    ],
    "3": [
      "ref_dom",
      "ref_src",
      "ref_vite_client",
      "tsconfig_app",
      "tsconfig_app_compileroptions",
      "tsconfig_app_compileroptions_allowarbitraryextensions",
      "tsconfig_app_compileroptions_allowimportingtsextensions",
      "tsconfig_app_compileroptions_erasablesyntaxonly",
      "tsconfig_app_compileroptions_jsx",
      "tsconfig_app_compileroptions_lib",
      "tsconfig_app_compileroptions_module",
      "tsconfig_app_compileroptions_moduledetection",
      "tsconfig_app_compileroptions_moduleresolution",
      "tsconfig_app_compileroptions_noemit",
      "tsconfig_app_compileroptions_nofallthroughcasesinswitch",
      "tsconfig_app_compileroptions_nounusedlocals",
      "tsconfig_app_compileroptions_nounusedparameters",
      "tsconfig_app_compileroptions_skiplibcheck",
      "tsconfig_app_compileroptions_target",
      "tsconfig_app_compileroptions_tsbuildinfofile",
      "tsconfig_app_compileroptions_types",
      "tsconfig_app_compileroptions_verbatimmodulesyntax",
      "tsconfig_app_include",
      "tsconfig_app_json_ref_es2023"
    ],
    "4": [
      "oxlint",
      "oxlintrc",
      "oxlintrc_plugins",
      "oxlintrc_rules",
      "oxlintrc_rules_react_only_export_components",
      "oxlintrc_rules_react_rules_of_hooks",
      "oxlintrc_schema",
      "package_devdependencies",
      "package_devdependencies_oxlint",
      "package_devdependencies_types_node",
      "package_devdependencies_types_react",
      "package_devdependencies_types_react_dom",
      "package_devdependencies_typescript",
      "package_devdependencies_vite",
      "package_devdependencies_vitejs_plugin_react",
      "ref_oxc",
      "ref_warn",
      "types_node",
      "types_react",
      "types_react_dom",
      "typescript",
      "vite",
      "vitejs_plugin_react"
    ],
    "5": [
      "ref_node",
      "ref_vite_config_ts",
      "tsconfig_node",
      "tsconfig_node_compileroptions",
      "tsconfig_node_compileroptions_allowimportingtsextensions",
      "tsconfig_node_compileroptions_erasablesyntaxonly",
      "tsconfig_node_compileroptions_lib",
      "tsconfig_node_compileroptions_module",
      "tsconfig_node_compileroptions_moduledetection",
      "tsconfig_node_compileroptions_noemit",
      "tsconfig_node_compileroptions_nofallthroughcasesinswitch",
      "tsconfig_node_compileroptions_nounusedlocals",
      "tsconfig_node_compileroptions_nounusedparameters",
      "tsconfig_node_compileroptions_skiplibcheck",
      "tsconfig_node_compileroptions_target",
      "tsconfig_node_compileroptions_tsbuildinfofile",
      "tsconfig_node_compileroptions_types",
      "tsconfig_node_compileroptions_verbatimmodulesyntax",
      "tsconfig_node_include",
      "tsconfig_node_json_ref_es2023"
    ],
    "6": [
      "src_components_customer_voiceassistantmodal",
      "src_components_customer_voiceassistantmodal_detecteditem",
      "src_components_customer_voiceassistantmodal_parsetranscripttoitems",
      "src_components_customer_voiceassistantmodal_quick_commands",
      "src_components_customer_voiceassistantmodal_voiceassistantmodal",
      "src_components_customer_voiceassistantmodal_voiceassistantmodalprops",
      "src_hooks_usespeechrecognition",
      "src_hooks_usespeechrecognition_ispeechrecognition",
      "src_hooks_usespeechrecognition_ispeechrecognition_abort",
      "src_hooks_usespeechrecognition_ispeechrecognition_start",
      "src_hooks_usespeechrecognition_ispeechrecognition_stop",
      "src_hooks_usespeechrecognition_speechrecognitionerrorevent",
      "src_hooks_usespeechrecognition_speechrecognitionevent",
      "src_hooks_usespeechrecognition_usespeechrecognition",
      "src_hooks_usespeechrecognition_usespeechrecognitionreturn",
      "src_hooks_usespeechrecognition_voicestate",
      "src_hooks_usespeechrecognition_window",
      "src_hooks_usespeechsynthesis",
      "src_hooks_usespeechsynthesis_usespeechsynthesis",
      "src_hooks_usespeechsynthesis_usespeechsynthesisreturn"
    ],
    "7": [
      "src_components_admin_admindesktopshell",
      "src_components_admin_admindesktopshell_admindesktopshell",
      "src_components_admin_admindesktopshell_tabtype",
      "src_components_admin_billingmanagerview",
      "src_components_admin_billingmanagerview_billingmanagerview",
      "src_components_admin_feedbackinboxview",
      "src_components_admin_feedbackinboxview_feedbackinboxview",
      "src_components_admin_inventoryview_inventoryview",
      "src_components_admin_reservationsview",
      "src_components_admin_reservationsview_reservationsview",
      "src_components_admin_staffshiftsview",
      "src_components_admin_staffshiftsview_staffshiftsview",
      "src_components_admin_suppliersview",
      "src_components_admin_suppliersview_suppliersview",
      "src_components_admin_tablemanagementview",
      "src_components_admin_tablemanagementview_tablemanagementview",
      "src_components_analytics_analyticsdashboard_analyticsdashboard",
      "src_components_kds_kdskanban_kdskanban",
      "src_services_api_api"
    ],
    "8": [
      "src_components_admin_admindesktopshell_admindesktopshellprops",
      "src_components_common_statusbadge_statusbadgeprops",
      "src_components_kds_kdskanban",
      "src_components_kds_kdskanban_kdskanbanprops",
      "src_components_kds_kdsticketcard",
      "src_components_kds_kdsticketcard_kdsticketcard",
      "src_components_kds_kdsticketcard_kdsticketcardprops",
      "src_components_voice_voiceorderingview",
      "src_components_voice_voiceorderingview_voiceorderingview",
      "src_components_voice_voiceorderingview_voiceorderingviewprops",
      "src_types_index",
      "src_types_index_analyticsmetric",
      "src_types_index_dishperformance",
      "src_types_index_kdsorder",
      "src_types_index_orderitem",
      "src_types_index_orderstatus",
      "src_types_index_ordertype",
      "src_types_index_voicecommandsuggestion"
    ],
    "9": [
      "tsconfig",
      "tsconfig_files",
      "tsconfig_references"
    ],
    "10": [
      "vite_config"
    ]
  },
  "cohesion": {
    "0": 0.08080808080808081,
    "1": 0.16333333333333333,
    "2": 0.08333333333333333,
    "3": 0.08333333333333333,
    "4": 0.08695652173913043,
    "5": 0.1,
    "6": 0.15789473684210525,
    "7": 0.1695906432748538,
    "8": 0.20261437908496732,
    "9": 0.6666666666666666,
    "10": 1.0
  },
  "gods": [
    {
      "id": "ref_react",
      "label": "react",
      "degree": 28
    },
    {
      "id": "tsconfig_app_compileroptions",
      "label": "compilerOptions",
      "degree": 18
    },
    {
      "id": "tsconfig_node_compileroptions",
      "label": "compilerOptions",
      "degree": 15
    },
    {
      "id": "src_services_api_api",
      "label": "api",
      "degree": 13
    },
    {
      "id": "src_data_menudata_menuitem",
      "label": "MenuItem",
      "degree": 10
    },
    {
      "id": "src_types_index_orderstatus",
      "label": "OrderStatus",
      "degree": 10
    },
    {
      "id": "src_data_menudata_menu_items",
      "label": "MENU_ITEMS",
      "degree": 9
    },
    {
      "id": "src_app_app",
      "label": "App()",
      "degree": 8
    },
    {
      "id": "src_types_index_kdsorder",
      "label": "KDSOrder",
      "degree": 8
    },
    {
      "id": "src_components_common_statusbadge_statusbadge",
      "label": "StatusBadge()",
      "degree": 7
    }
  ],
  "surprises": [
    {
      "source": "plugins",
      "target": "typescript",
      "source_files": [
        ".oxlintrc.json",
        "package.json"
      ],
      "confidence": "EXTRACTED",
      "relation": "extends",
      "why": "connects across different repos/directories"
    },
    {
      "source": "DetectedItem",
      "target": "MenuItem",
      "source_files": [
        "src/components/customer/VoiceAssistantModal.tsx",
        "src/data/menuData.ts"
      ],
      "confidence": "EXTRACTED",
      "relation": "references",
      "why": "bridges separate communities; peripheral node `DetectedItem` unexpectedly reaches hub `MenuItem`"
    },
    {
      "source": "CustomizationModalProps",
      "target": "MenuItem",
      "source_files": [
        "src/components/customer/CustomizationModal.tsx",
        "src/data/menuData.ts"
      ],
      "confidence": "EXTRACTED",
      "relation": "references",
      "why": "peripheral node `CustomizationModalProps` unexpectedly reaches hub `MenuItem`"
    },
    {
      "source": "MenuBrowseViewProps",
      "target": "MenuItem",
      "source_files": [
        "src/components/customer/MenuBrowseView.tsx",
        "src/data/menuData.ts"
      ],
      "confidence": "EXTRACTED",
      "relation": "references",
      "why": "peripheral node `MenuBrowseViewProps` unexpectedly reaches hub `MenuItem`"
    },
    {
      "source": "getFrontendMenuItem()",
      "target": "MENU_ITEMS",
      "source_files": [
        "src/services/api.ts",
        "src/data/menuData.ts"
      ],
      "confidence": "EXTRACTED",
      "relation": "references",
      "why": "bridges separate communities"
    }
  ],
  "questions": [
    {
      "type": "bridge_node",
      "question": "Why does `react` connect `react` to `App.tsx`, `devDependencies`, `VoiceAssistantModal.tsx`, `AdminDesktopShell.tsx`, `index.ts`?",
      "why": "High betweenness centrality (0.333) - this node is a cross-community bridge."
    },
    {
      "type": "bridge_node",
      "question": "Why does `plugins` connect `devDependencies` to `react`?",
      "why": "High betweenness centrality (0.252) - this node is a cross-community bridge."
    },
    {
      "type": "bridge_node",
      "question": "Why does `devDependencies` connect `devDependencies` to `package.json`?",
      "why": "High betweenness centrality (0.217) - this node is a cross-community bridge."
    },
    {
      "type": "isolated_nodes",
      "question": "What connects `$schema`, `oxc`, `react/rules-of-hooks` to the rest of the system?",
      "why": "85 weakly-connected nodes found - possible documentation gaps or missing edges."
    },
    {
      "type": "low_cohesion",
      "question": "Should `App.tsx` be split into smaller, more focused modules?",
      "why": "Cohesion score 0.08080808080808081 - nodes in this community are weakly interconnected."
    },
    {
      "type": "low_cohesion",
      "question": "Should `package.json` be split into smaller, more focused modules?",
      "why": "Cohesion score 0.08333333333333333 - nodes in this community are weakly interconnected."
    },
    {
      "type": "low_cohesion",
      "question": "Should `compilerOptions` be split into smaller, more focused modules?",
      "why": "Cohesion score 0.08333333333333333 - nodes in this community are weakly interconnected."
    }
  ]
 }
--- a/graphify-out/.graphify_ast.json
+++ b/graphify-out/.graphify_ast.json
--- a/graphify-out/.graphify_detect.json
+++ b/graphify-out/.graphify_detect.json
@ -0,0 +1,80 @@
 {
  "files": {
    "code": [
      "C:\\Users\\hp\\Desktop\\projects\\restroAI\\.oxlintrc.json",
      "C:\\Users\\hp\\Desktop\\projects\\restroAI\\package.json",
      "C:\\Users\\hp\\Desktop\\projects\\restroAI\\src\\App.tsx",
      "C:\\Users\\hp\\Desktop\\projects\\restroAI\\src\\components\\admin\\AdminDesktopShell.tsx",
      "C:\\Users\\hp\\Desktop\\projects\\restroAI\\src\\components\\admin\\BillingManagerView.tsx",
      "C:\\Users\\hp\\Desktop\\projects\\restroAI\\src\\components\\admin\\FeedbackInboxView.tsx",
      "C:\\Users\\hp\\Desktop\\projects\\restroAI\\src\\components\\admin\\InventoryView.tsx",
      "C:\\Users\\hp\\Desktop\\projects\\restroAI\\src\\components\\admin\\ReservationsView.tsx",
      "C:\\Users\\hp\\Desktop\\projects\\restroAI\\src\\components\\admin\\StaffLoginModal.tsx",
      "C:\\Users\\hp\\Desktop\\projects\\restroAI\\src\\components\\admin\\StaffShiftsView.tsx",
      "C:\\Users\\hp\\Desktop\\projects\\restroAI\\src\\components\\admin\\SuppliersView.tsx",
      "C:\\Users\\hp\\Desktop\\projects\\restroAI\\src\\components\\admin\\TableManagementView.tsx",
      "C:\\Users\\hp\\Desktop\\projects\\restroAI\\src\\components\\analytics\\AnalyticsDashboard.tsx",
      "C:\\Users\\hp\\Desktop\\projects\\restroAI\\src\\components\\common\\Navigation.tsx",
      "C:\\Users\\hp\\Desktop\\projects\\restroAI\\src\\components\\common\\StatusBadge.tsx",
      "C:\\Users\\hp\\Desktop\\projects\\restroAI\\src\\components\\customer\\BillPaymentView.tsx",
      "C:\\Users\\hp\\Desktop\\projects\\restroAI\\src\\components\\customer\\CartReviewView.tsx",
      "C:\\Users\\hp\\Desktop\\projects\\restroAI\\src\\components\\customer\\CustomizationModal.tsx",
      "C:\\Users\\hp\\Desktop\\projects\\restroAI\\src\\components\\customer\\MenuBrowseView.tsx",
      "C:\\Users\\hp\\Desktop\\projects\\restroAI\\src\\components\\customer\\OrderStatusView.tsx",
      "C:\\Users\\hp\\Desktop\\projects\\restroAI\\src\\components\\customer\\TableLandingView.tsx",
      "C:\\Users\\hp\\Desktop\\projects\\restroAI\\src\\components\\customer\\VoiceAssistantModal.tsx",
      "C:\\Users\\hp\\Desktop\\projects\\restroAI\\src\\components\\kds\\KDSKanban.tsx",
      "C:\\Users\\hp\\Desktop\\projects\\restroAI\\src\\components\\kds\\KDSTicketCard.tsx",
      "C:\\Users\\hp\\Desktop\\projects\\restroAI\\src\\components\\table\\TableLandingView.tsx",
      "C:\\Users\\hp\\Desktop\\projects\\restroAI\\src\\components\\voice\\VoiceOrderingView.tsx",
      "C:\\Users\\hp\\Desktop\\projects\\restroAI\\src\\data\\menuData.ts",
      "C:\\Users\\hp\\Desktop\\projects\\restroAI\\src\\hooks\\useSpeechRecognition.ts",
      "C:\\Users\\hp\\Desktop\\projects\\restroAI\\src\\hooks\\useSpeechSynthesis.ts",
      "C:\\Users\\hp\\Desktop\\projects\\restroAI\\src\\main.tsx",
      "C:\\Users\\hp\\Desktop\\projects\\restroAI\\src\\services\\api.ts",
      "C:\\Users\\hp\\Desktop\\projects\\restroAI\\src\\theme\\theme.ts",
      "C:\\Users\\hp\\Desktop\\projects\\restroAI\\src\\types\\index.ts",
      "C:\\Users\\hp\\Desktop\\projects\\restroAI\\tsconfig.app.json",
      "C:\\Users\\hp\\Desktop\\projects\\restroAI\\tsconfig.json",
      "C:\\Users\\hp\\Desktop\\projects\\restroAI\\tsconfig.node.json",
      "C:\\Users\\hp\\Desktop\\projects\\restroAI\\vite.config.ts"
    ],
    "document": [
      "C:\\Users\\hp\\Desktop\\projects\\restroAI\\.agents\\rules\\graphify.md",
      "C:\\Users\\hp\\Desktop\\projects\\restroAI\\.agents\\workflows\\graphify.md",
      "C:\\Users\\hp\\Desktop\\projects\\restroAI\\README.md",
      "C:\\Users\\hp\\Desktop\\projects\\restroAI\\index.html"
    ],
    "paper": [],
    "image": [
      "C:\\Users\\hp\\Desktop\\projects\\restroAI\\public\\favicon.svg",
      "C:\\Users\\hp\\Desktop\\projects\\restroAI\\public\\icons.svg",
      "C:\\Users\\hp\\Desktop\\projects\\restroAI\\src\\assets\\hero.png",
      "C:\\Users\\hp\\Desktop\\projects\\restroAI\\src\\assets\\react.svg",
      "C:\\Users\\hp\\Desktop\\projects\\restroAI\\src\\assets\\vite.svg"
    ],
    "video": []
  },
  "total_files": 46,
  "total_words": 29773,
  "needs_graph": false,
  "warning": "Corpus is ~29,773 words - fits in a single context window. You may not need a graph.",
  "skipped_sensitive": [
    "C:\\Users\\hp\\Desktop\\projects\\restroAI\\.env"
  ],
  "unclassified": [
    "C:\\Users\\hp\\Desktop\\projects\\restroAI\\.env.example",
    "C:\\Users\\hp\\Desktop\\projects\\restroAI\\.gitignore",
    "C:\\Users\\hp\\Desktop\\projects\\restroAI\\src\\App.css",
    "C:\\Users\\hp\\Desktop\\projects\\restroAI\\src\\index.css"
  ],
  "walk_errors": [],
  "ignored": [],
  "pruned_noise_dirs": [
    "C:\\Users\\hp\\Desktop\\projects\\restroAI\\dist\\",
    "C:\\Users\\hp\\Desktop\\projects\\restroAI\\graphify-out\\",
    "C:\\Users\\hp\\Desktop\\projects\\restroAI\\node_modules\\"
  ],
  "graphifyignore_patterns": 20,
  "scan_root": "C:\\Users\\hp\\Desktop\\projects\\restroAI"
 }
--- a/graphify-out/.graphify_extract.json
+++ b/graphify-out/.graphify_extract.json
--- a/graphify-out/.graphify_labels.json
+++ b/graphify-out/.graphify_labels.json
@ -0,0 +1 @@
 {"0": "App.tsx", "1": "react", "2": "package.json", "3": "compilerOptions", "4": "devDependencies", "5": "compilerOptions", "6": "VoiceAssistantModal.tsx", "7": "AdminDesktopShell.tsx", "8": "index.ts", "9": "tsconfig.json", "10": "vite.config.ts"}
--- a/graphify-out/.graphify_labels.json.sig
+++ b/graphify-out/.graphify_labels.json.sig
@ -0,0 +1 @@
 {"0": "2fd27a4e049e8550", "1": "f766b666900956c7", "2": "be894a9bb6829423", "3": "5e1b3e45a5cffb50", "4": "8f1d803994b9793e", "5": "fe9accd04c14e54c", "6": "d1b0c48243d20e7d", "7": "8b8a887a71cbef13", "8": "15691021ccd947f3", "9": "7256026fe64f6f6a", "10": "b5cc399b9462978b"}
--- a/graphify-out/.graphify_python
+++ b/graphify-out/.graphify_python
@ -0,0 +1 @@
 C:\Users\hp\AppData\Local\Programs\Python\Python312\python.exe
--- a/graphify-out/.graphify_root
+++ b/graphify-out/.graphify_root
@ -0,0 +1 @@
 C:\Users\hp\Desktop\projects\restroAI
--- a/graphify-out/.graphify_semantic.json
+++ b/graphify-out/.graphify_semantic.json
@ -0,0 +1,7 @@
 {
  "nodes": [],
  "edges": [],
  "hyperedges": [],
  "input_tokens": 0,
  "output_tokens": 0
 }
--- a/graphify-out/GRAPH_REPORT.md
+++ b/graphify-out/GRAPH_REPORT.md
@ -0,0 +1,109 @@
 # Graph Report - C:\Users\hp\Desktop\projects\restroAI  (2026-08-05)
 ## Corpus Check
 - cluster-only mode — file stats not available
 ## Summary
 - 222 nodes · 385 edges · 11 communities (10 shown, 1 thin omitted)
 - Extraction: 100% EXTRACTED · 0% INFERRED · 0% AMBIGUOUS
 - Token cost: 0 input · 0 output
 ## Community Hubs (Navigation)
 - App.tsx
 - react
 - package.json
 - compilerOptions
 - devDependencies
 - compilerOptions
 - VoiceAssistantModal.tsx
 - AdminDesktopShell.tsx
 - index.ts
 - tsconfig.json
 ## God Nodes (most connected - your core abstractions)
 1. `react` - 28 edges
 2. `compilerOptions` - 18 edges
 3. `compilerOptions` - 15 edges
 4. `api` - 13 edges
 5. `MenuItem` - 10 edges
 6. `OrderStatus` - 10 edges
 7. `MENU_ITEMS` - 9 edges
 8. `App()` - 8 edges
 9. `KDSOrder` - 8 edges
 10. `StatusBadge()` - 7 edges
 ## Surprising Connections (you probably didn't know these)
 - `plugins` --extends--> `typescript`  [EXTRACTED]
  .oxlintrc.json → package.json
 - `DetectedItem` --references--> `MenuItem`  [EXTRACTED]
  src/components/customer/VoiceAssistantModal.tsx → src/data/menuData.ts
 - `CustomizationModalProps` --references--> `MenuItem`  [EXTRACTED]
  src/components/customer/CustomizationModal.tsx → src/data/menuData.ts
 - `MenuBrowseViewProps` --references--> `MenuItem`  [EXTRACTED]
  src/components/customer/MenuBrowseView.tsx → src/data/menuData.ts
 - `getFrontendMenuItem()` --references--> `MENU_ITEMS`  [EXTRACTED]
  src/services/api.ts → src/data/menuData.ts
 ## Import Cycles
 - None detected.
 ## Communities (11 total, 1 thin omitted)
 ### Community 0 - "App.tsx"
 Cohesion: 0.08
 Nodes (30): App(), CustomerView, getTableNumFromUrl(), StaffLoginModal(), StaffLoginModalProps, BillPaymentView(), BillPaymentViewProps, CustomizationModal() (+22 more)
 ### Community 1 - "react"
 Cohesion: 0.16
 Nodes (14): react, NavigationProps, StatusBadge(), CartReviewView(), CartReviewViewProps, CustomizationModalProps, DIETARY_FILTERS, MenuBrowseView() (+6 more)
 ### Community 2 - "package.json"
 Cohesion: 0.08
 Nodes (23): @emotion/react, @emotion/styled, @mui/icons-material, @mui/material, dependencies, @emotion/react, @emotion/styled, @mui/icons-material (+15 more)
 ### Community 3 - "compilerOptions"
 Cohesion: 0.08
 Nodes (23): DOM, src, vite/client, compilerOptions, allowArbitraryExtensions, allowImportingTsExtensions, erasableSyntaxOnly, jsx (+15 more)
 ### Community 4 - "devDependencies"
 Cohesion: 0.09
 Nodes (22): oxlint, plugins, rules, react/only-export-components, react/rules-of-hooks, $schema, devDependencies, oxlint (+14 more)
 ### Community 5 - "compilerOptions"
 Cohesion: 0.10
 Nodes (19): node, vite.config.ts, compilerOptions, allowImportingTsExtensions, erasableSyntaxOnly, lib, module, moduleDetection (+11 more)
 ### Community 6 - "VoiceAssistantModal.tsx"
 Cohesion: 0.16
 Nodes (14): DetectedItem, parseTranscriptToItems(), QUICK_COMMANDS, VoiceAssistantModal(), VoiceAssistantModalProps, ISpeechRecognition, SpeechRecognitionErrorEvent, SpeechRecognitionEvent (+6 more)
 ### Community 7 - "AdminDesktopShell.tsx"
 Cohesion: 0.17
 Nodes (12): AdminDesktopShell(), TabType, BillingManagerView(), FeedbackInboxView(), InventoryView(), ReservationsView(), StaffShiftsView(), SuppliersView() (+4 more)
 ### Community 8 - "index.ts"
 Cohesion: 0.20
 Nodes (14): AdminDesktopShellProps, StatusBadgeProps, KDSKanbanProps, KDSTicketCard(), KDSTicketCardProps, VoiceOrderingView(), VoiceOrderingViewProps, AnalyticsMetric (+6 more)
 ## Knowledge Gaps
 - **85 isolated node(s):** `$schema`, `oxc`, `react/rules-of-hooks`, `warn`, `name` (+80 more)
  These have ≤1 connection - possible missing edges or undocumented components.
 - **1 thin communities (<3 nodes) omitted from report** — run `graphify query` to explore isolated nodes.
 ## Suggested Questions
 _Questions this graph is uniquely positioned to answer:_
 - **Why does `react` connect `react` to `App.tsx`, `devDependencies`, `VoiceAssistantModal.tsx`, `AdminDesktopShell.tsx`, `index.ts`?**
  _High betweenness centrality (0.333) - this node is a cross-community bridge._
 - **Why does `plugins` connect `devDependencies` to `react`?**
  _High betweenness centrality (0.252) - this node is a cross-community bridge._
 - **Why does `devDependencies` connect `devDependencies` to `package.json`?**
  _High betweenness centrality (0.217) - this node is a cross-community bridge._
 - **What connects `$schema`, `oxc`, `react/rules-of-hooks` to the rest of the system?**
  _85 weakly-connected nodes found - possible documentation gaps or missing edges._
 - **Should `App.tsx` be split into smaller, more focused modules?**
  _Cohesion score 0.08080808080808081 - nodes in this community are weakly interconnected._
 - **Should `package.json` be split into smaller, more focused modules?**
  _Cohesion score 0.08333333333333333 - nodes in this community are weakly interconnected._
 - **Should `compilerOptions` be split into smaller, more focused modules?**
  _Cohesion score 0.08333333333333333 - nodes in this community are weakly interconnected._
--- a/graphify-out/cache/ast/v0.9.33/08daa6909612d5d3b296975716815b9c19448c5c134ea6705ad54c1338b3eb3a.json
+++ b/graphify-out/cache/ast/v0.9.33/08daa6909612d5d3b296975716815b9c19448c5c134ea6705ad54c1338b3eb3a.json
--- a/graphify-out/cache/ast/v0.9.33/29ee32adbb18b6b2e96539f626b7cf4f5e925f482dcfdac8ceca1570d5cb3bc6.json
+++ b/graphify-out/cache/ast/v0.9.33/29ee32adbb18b6b2e96539f626b7cf4f5e925f482dcfdac8ceca1570d5cb3bc6.json
@ -0,0 +1 @@
 {"nodes": [{"id": "$graphify-root$_tsconfig_json", "label": "tsconfig.json", "file_type": "code", "source_file": "tsconfig.json", "source_location": "L1"}, {"id": "$graphify-root$_tsconfig_files", "label": "files", "file_type": "code", "source_file": "tsconfig.json", "source_location": "L2"}, {"id": "$graphify-root$_tsconfig_references", "label": "references", "file_type": "code", "source_file": "tsconfig.json", "source_location": "L3"}], "edges": [{"source": "$graphify-root$_tsconfig_json", "target": "$graphify-root$_tsconfig_files", "relation": "contains", "confidence": "EXTRACTED", "source_file": "tsconfig.json", "source_location": "L2", "weight": 1.0}, {"source": "$graphify-root$_tsconfig_json", "target": "$graphify-root$_tsconfig_references", "relation": "contains", "confidence": "EXTRACTED", "source_file": "tsconfig.json", "source_location": "L3", "weight": 1.0}]}
--- a/graphify-out/cache/ast/v0.9.33/5c4a87b32fbd925b900618d7cbc102f79687f34227dcea507fc8adf1019b5239.json
+++ b/graphify-out/cache/ast/v0.9.33/5c4a87b32fbd925b900618d7cbc102f79687f34227dcea507fc8adf1019b5239.json
--- a/graphify-out/cache/ast/v0.9.33/9c42d7b83358f81fead13e2129eaa23ccedeb680f7de635d7c248c5fbb7589fd.json
+++ b/graphify-out/cache/ast/v0.9.33/9c42d7b83358f81fead13e2129eaa23ccedeb680f7de635d7c248c5fbb7589fd.json
@ -0,0 +1 @@
 {"nodes": [{"id": "$graphify-root$_oxlintrc_json", "label": ".oxlintrc.json", "file_type": "code", "source_file": ".oxlintrc.json", "source_location": "L1"}, {"id": "$graphify-root$_oxlintrc_schema", "label": "$schema", "file_type": "code", "source_file": ".oxlintrc.json", "source_location": "L2"}, {"id": "$graphify-root$_oxlintrc_plugins", "label": "plugins", "file_type": "code", "source_file": ".oxlintrc.json", "source_location": "L3"}, {"id": "ref_react", "label": "react", "file_type": "concept", "source_file": ".oxlintrc.json", "source_location": "L3"}, {"id": "ref_typescript", "label": "typescript", "file_type": "concept", "source_file": ".oxlintrc.json", "source_location": "L3"}, {"id": "ref_oxc", "label": "oxc", "file_type": "concept", "source_file": ".oxlintrc.json", "source_location": "L3"}, {"id": "$graphify-root$_oxlintrc_rules", "label": "rules", "file_type": "code", "source_file": ".oxlintrc.json", "source_location": "L4"}, {"id": "$graphify-root$_oxlintrc_rules_react_rules_of_hooks", "label": "react/rules-of-hooks", "file_type": "code", "source_file": ".oxlintrc.json", "source_location": "L5"}, {"id": "$graphify-root$_oxlintrc_rules_react_only_export_components", "label": "react/only-export-components", "file_type": "code", "source_file": ".oxlintrc.json", "source_location": "L6"}, {"id": "ref_warn", "label": "warn", "file_type": "concept", "source_file": ".oxlintrc.json", "source_location": "L6"}], "edges": [{"source": "$graphify-root$_oxlintrc_json", "target": "$graphify-root$_oxlintrc_schema", "relation": "contains", "confidence": "EXTRACTED", "source_file": ".oxlintrc.json", "source_location": "L2", "weight": 1.0}, {"source": "$graphify-root$_oxlintrc_json", "target": "$graphify-root$_oxlintrc_plugins", "relation": "contains", "confidence": "EXTRACTED", "source_file": ".oxlintrc.json", "source_location": "L3", "weight": 1.0}, {"source": "$graphify-root$_oxlintrc_plugins", "target": "ref_react", "relation": "extends", "confidence": "EXTRACTED", "source_file": ".oxlintrc.json", "source_location": "L3", "weight": 1.0, "context": "import"}, {"source": "$graphify-root$_oxlintrc_plugins", "target": "ref_typescript", "relation": "extends", "confidence": "EXTRACTED", "source_file": ".oxlintrc.json", "source_location": "L3", "weight": 1.0, "context": "import"}, {"source": "$graphify-root$_oxlintrc_plugins", "target": "ref_oxc", "relation": "extends", "confidence": "EXTRACTED", "source_file": ".oxlintrc.json", "source_location": "L3", "weight": 1.0, "context": "import"}, {"source": "$graphify-root$_oxlintrc_json", "target": "$graphify-root$_oxlintrc_rules", "relation": "contains", "confidence": "EXTRACTED", "source_file": ".oxlintrc.json", "source_location": "L4", "weight": 1.0}, {"source": "$graphify-root$_oxlintrc_rules", "target": "$graphify-root$_oxlintrc_rules_react_rules_of_hooks", "relation": "contains", "confidence": "EXTRACTED", "source_file": ".oxlintrc.json", "source_location": "L5", "weight": 1.0}, {"source": "$graphify-root$_oxlintrc_rules", "target": "$graphify-root$_oxlintrc_rules_react_only_export_components", "relation": "contains", "confidence": "EXTRACTED", "source_file": ".oxlintrc.json", "source_location": "L6", "weight": 1.0}, {"source": "$graphify-root$_oxlintrc_rules_react_only_export_components", "target": "ref_warn", "relation": "extends", "confidence": "EXTRACTED", "source_file": ".oxlintrc.json", "source_location": "L6", "weight": 1.0, "context": "import"}]}
--- a/graphify-out/cache/ast/v0.9.33/b15d66e2ffcae094342209cae92f2989f543821886e6e9902b3620b16dc6dd8a.json
+++ b/graphify-out/cache/ast/v0.9.33/b15d66e2ffcae094342209cae92f2989f543821886e6e9902b3620b16dc6dd8a.json
--- a/graphify-out/cache/stat-index.json
+++ b/graphify-out/cache/stat-index.json
--- a/graphify-out/graph.html
+++ b/graphify-out/graph.html
--- a/graphify-out/graph.json
+++ b/graphify-out/graph.json
--- a/graphify-out/manifest.json
+++ b/graphify-out/manifest.json
@ -0,0 +1,187 @@
 {
  ".oxlintrc.json": {
    "mtime": 1785233280.3463209,
    "ast_hash": "029f4905006c1fffd96bc863e2d98d3e",
    "semantic_hash": "029f4905006c1fffd96bc863e2d98d3e"
  },
  "package.json": {
    "mtime": 1785396043.7175367,
    "ast_hash": "4655a1612c925f79016d7e2f9187ba73",
    "semantic_hash": "4655a1612c925f79016d7e2f9187ba73"
  },
  "src/App.tsx": {
    "mtime": 1785905557.3172138,
    "ast_hash": "b59e28160f20dd3a81ea9b0db11afe54",
    "semantic_hash": "b59e28160f20dd3a81ea9b0db11afe54"
  },
  "src/components/admin/AdminDesktopShell.tsx": {
    "mtime": 1785905097.248853,
    "ast_hash": "afff87f6af48754405d30704280185df",
    "semantic_hash": "afff87f6af48754405d30704280185df"
  },
  "src/components/admin/BillingManagerView.tsx": {
    "mtime": 1785905514.858435,
    "ast_hash": "f437ceb784222a87398bf2e1c6a8a216",
    "semantic_hash": "f437ceb784222a87398bf2e1c6a8a216"
  },
  "src/components/admin/FeedbackInboxView.tsx": {
    "mtime": 1785905479.3076365,
    "ast_hash": "7a8469ab9ecf7bdb8ffe7f0750c25a52",
    "semantic_hash": "7a8469ab9ecf7bdb8ffe7f0750c25a52"
  },
  "src/components/admin/InventoryView.tsx": {
    "mtime": 1785905582.5370235,
    "ast_hash": "abfccd3a550964c60fd67e5c0c0c5aac",
    "semantic_hash": "abfccd3a550964c60fd67e5c0c0c5aac"
  },
  "src/components/admin/ReservationsView.tsx": {
    "mtime": 1785905528.0872736,
    "ast_hash": "860b3c3951fbfe786027586b5c735a6a",
    "semantic_hash": "860b3c3951fbfe786027586b5c735a6a"
  },
  "src/components/admin/StaffLoginModal.tsx": {
    "mtime": 1785905533.9719107,
    "ast_hash": "2a7b212d658fc57140796bc7d36c2534",
    "semantic_hash": "2a7b212d658fc57140796bc7d36c2534"
  },
  "src/components/admin/StaffShiftsView.tsx": {
    "mtime": 1785905521.3331137,
    "ast_hash": "c768b5b542c87471c231c8b98644fa43",
    "semantic_hash": "c768b5b542c87471c231c8b98644fa43"
  },
  "src/components/admin/SuppliersView.tsx": {
    "mtime": 1785905498.7847517,
    "ast_hash": "e589c84af3729b58f5ed5af6f23aad13",
    "semantic_hash": "e589c84af3729b58f5ed5af6f23aad13"
  },
  "src/components/admin/TableManagementView.tsx": {
    "mtime": 1785905381.1579387,
    "ast_hash": "064aed47b09064c875f2164337472608",
    "semantic_hash": "064aed47b09064c875f2164337472608"
  },
  "src/components/analytics/AnalyticsDashboard.tsx": {
    "mtime": 1785905548.1189818,
    "ast_hash": "8f11f39a224311e286e450f718159e2a",
    "semantic_hash": "8f11f39a224311e286e450f718159e2a"
  },
  "src/components/common/Navigation.tsx": {
    "mtime": 1785233556.4295392,
    "ast_hash": "628b6a71dfcd00bf6e69f24d0347ece2",
    "semantic_hash": "628b6a71dfcd00bf6e69f24d0347ece2"
  },
  "src/components/common/StatusBadge.tsx": {
    "mtime": 1785233494.191133,
    "ast_hash": "205207743512af9e406b5227049b64fc",
    "semantic_hash": "205207743512af9e406b5227049b64fc"
  },
  "src/components/customer/BillPaymentView.tsx": {
    "mtime": 1785905194.0057652,
    "ast_hash": "7ca6bf89fa190fd0e07593af3f7005cf",
    "semantic_hash": "7ca6bf89fa190fd0e07593af3f7005cf"
  },
  "src/components/customer/CartReviewView.tsx": {
    "mtime": 1785905199.5156598,
    "ast_hash": "96f8f643e1bda9391a19644ad78c762e",
    "semantic_hash": "96f8f643e1bda9391a19644ad78c762e"
  },
  "src/components/customer/CustomizationModal.tsx": {
    "mtime": 1785239166.0497863,
    "ast_hash": "877361d754afa0a4906d8d07127d4db9",
    "semantic_hash": "877361d754afa0a4906d8d07127d4db9"
  },
  "src/components/customer/MenuBrowseView.tsx": {
    "mtime": 1785905157.8688335,
    "ast_hash": "76824fe03461a9b6d174a7122c7e462c",
    "semantic_hash": "76824fe03461a9b6d174a7122c7e462c"
  },
  "src/components/customer/OrderStatusView.tsx": {
    "mtime": 1785905172.1933515,
    "ast_hash": "f1a447a5d4cb1ab9e432577d5e0cf36c",
    "semantic_hash": "f1a447a5d4cb1ab9e432577d5e0cf36c"
  },
  "src/components/customer/TableLandingView.tsx": {
    "mtime": 1785905152.257808,
    "ast_hash": "25694968d103c84c34d1050f942e3c85",
    "semantic_hash": "25694968d103c84c34d1050f942e3c85"
  },
  "src/components/customer/VoiceAssistantModal.tsx": {
    "mtime": 1785239308.1253068,
    "ast_hash": "4b176d62d71a7fb9bcb49e2f0ce86896",
    "semantic_hash": "4b176d62d71a7fb9bcb49e2f0ce86896"
  },
  "src/components/kds/KDSKanban.tsx": {
    "mtime": 1785233506.0593884,
    "ast_hash": "42cc5e869a2b732da3164dcd0c9d833d",
    "semantic_hash": "42cc5e869a2b732da3164dcd0c9d833d"
  },
  "src/components/kds/KDSTicketCard.tsx": {
    "mtime": 1785233547.0403948,
    "ast_hash": "3af4261d1af75a0936901b6ebc60d151",
    "semantic_hash": "3af4261d1af75a0936901b6ebc60d151"
  },
  "src/components/table/TableLandingView.tsx": {
    "mtime": 1785233475.4122329,
    "ast_hash": "1a190d943d11c35de8443fa70108a774",
    "semantic_hash": "1a190d943d11c35de8443fa70108a774"
  },
  "src/components/voice/VoiceOrderingView.tsx": {
    "mtime": 1785239270.3471916,
    "ast_hash": "00464f0c42167a0df33cf8efcae9088d",
    "semantic_hash": "00464f0c42167a0df33cf8efcae9088d"
  },
  "src/data/menuData.ts": {
    "mtime": 1785238770.1435912,
    "ast_hash": "e95b94d964f714c9c11cc9d752d0cd38",
    "semantic_hash": "e95b94d964f714c9c11cc9d752d0cd38"
  },
  "src/hooks/useSpeechRecognition.ts": {
    "mtime": 1785238790.0349185,
    "ast_hash": "95485ffe24c46698ccd14faf1e9dda5f",
    "semantic_hash": "95485ffe24c46698ccd14faf1e9dda5f"
  },
  "src/hooks/useSpeechSynthesis.ts": {
    "mtime": 1785238801.6592543,
    "ast_hash": "b963f9a7fcb1d1c53c2d8b61786f9118",
    "semantic_hash": "b963f9a7fcb1d1c53c2d8b61786f9118"
  },
  "src/main.tsx": {
    "mtime": 1785233281.7759771,
    "ast_hash": "787e5a07efeb2bf6209d5937195f2f68",
    "semantic_hash": "787e5a07efeb2bf6209d5937195f2f68"
  },
  "src/services/api.ts": {
    "mtime": 1785908359.8571103,
    "ast_hash": "3477c88ca1ba0114944daada5a7d1e7b",
    "semantic_hash": "3477c88ca1ba0114944daada5a7d1e7b"
  },
  "src/theme/theme.ts": {
    "mtime": 1785233448.0913806,
    "ast_hash": "0f1068cf16ec48a6b8679aabe997988d",
    "semantic_hash": "0f1068cf16ec48a6b8679aabe997988d"
  },
  "src/types/index.ts": {
    "mtime": 1785233301.05939,
    "ast_hash": "7bb44e94e1c329983c155971065d4f3e",
    "semantic_hash": "7bb44e94e1c329983c155971065d4f3e"
  },
  "tsconfig.app.json": {
    "mtime": 1785233280.5814598,
    "ast_hash": "5f2dafd737dea8a4ddcbb10f5113ac5a",
    "semantic_hash": "5f2dafd737dea8a4ddcbb10f5113ac5a"
  },
  "tsconfig.json": {
    "mtime": 1785233280.63329,
    "ast_hash": "a3d39fa780ebff65444de257f291ce6c",
    "semantic_hash": "a3d39fa780ebff65444de257f291ce6c"
  },
  "tsconfig.node.json": {
    "mtime": 1785233280.683418,
    "ast_hash": "f9cb81ddcea69ffdab672fc8c48dca66",
    "semantic_hash": "f9cb81ddcea69ffdab672fc8c48dca66"
  },
  "vite.config.ts": {
    "mtime": 1785233281.6674225,
    "ast_hash": "88439104b3c207f17d33ef3160e3b080",
    "semantic_hash": "88439104b3c207f17d33ef3160e3b080"
  }
 }
--- a/index.html
+++ b/index.html
@ -0,0 +1,17 @@
 <!doctype html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>RestroAI Operations Platform - Kitchen & Analytics Suite</title>
    <!-- Google Fonts: Inter, Plus Jakarta Sans & JetBrains Mono -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700;800&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap" rel="stylesheet">
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,30 @@
 {
  "name": "restroai",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "packageManager": "yarn@1.22.22",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "oxlint",
    "preview": "vite preview"
  },
  "dependencies": {
    "@emotion/react": "^11.14.0",
    "@emotion/styled": "^11.14.1",
    "@mui/icons-material": "^9.2.0",
    "@mui/material": "^9.2.0",
    "react": "^19.2.7",
    "react-dom": "^19.2.7"
  },
  "devDependencies": {
    "@types/node": "^24.13.2",
    "@types/react": "^19.2.17",
    "@types/react-dom": "^19.2.3",
    "@vitejs/plugin-react": "^6.0.3",
    "oxlint": "^1.71.0",
    "typescript": "~6.0.2",
    "vite": "^8.1.1"
  }
 }
--- a/public/favicon.svg
+++ b/public/favicon.svg
--- a/public/icons.svg
+++ b/public/icons.svg
@ -0,0 +1,24 @@
 <svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="bluesky-icon" viewBox="0 0 16 17">
    <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
  </symbol>
  <symbol id="discord-icon" viewBox="0 0 20 19">
    <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
  </symbol>
  <symbol id="documentation-icon" viewBox="0 0 21 20">
    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
  </symbol>
  <symbol id="github-icon" viewBox="0 0 19 19">
    <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
  </symbol>
  <symbol id="social-icon" viewBox="0 0 20 20">
    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
  </symbol>
  <symbol id="x-icon" viewBox="0 0 19 19">
    <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
  </symbol>
 </svg>
--- a/src/App.css
+++ b/src/App.css
@ -0,0 +1,184 @@
 .counter {
  font-size: 16px;
  padding: 5px 10px;
  border-radius: 5px;
  color: var(--accent);
  background: var(--accent-bg);
  border: 2px solid transparent;
  transition: border-color 0.3s;
  margin-bottom: 24px;
  &:hover {
    border-color: var(--accent-border);
  }
  &:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
 }
 .hero {
  position: relative;
  .base,
  .framework,
  .vite {
    inset-inline: 0;
    margin: 0 auto;
  }
  .base {
    width: 170px;
    position: relative;
    z-index: 0;
  }
  .framework,
  .vite {
    position: absolute;
  }
  .framework {
    z-index: 1;
    top: 34px;
    height: 28px;
    transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
      scale(1.4);
  }
  .vite {
    z-index: 0;
    top: 107px;
    height: 26px;
    width: auto;
    transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
      scale(0.8);
  }
 }
 #center {
  display: flex;
  flex-direction: column;
  gap: 25px;
  place-content: center;
  place-items: center;
  flex-grow: 1;
  @media (max-width: 1024px) {
    padding: 32px 20px 24px;
    gap: 18px;
  }
 }
 #next-steps {
  display: flex;
  border-top: 1px solid var(--border);
  text-align: left;
  & > div {
    flex: 1 1 0;
    padding: 32px;
    @media (max-width: 1024px) {
      padding: 24px 20px;
    }
  }
  .icon {
    margin-bottom: 16px;
    width: 22px;
    height: 22px;
  }
  @media (max-width: 1024px) {
    flex-direction: column;
    text-align: center;
  }
 }
 #docs {
  border-right: 1px solid var(--border);
  @media (max-width: 1024px) {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
 }
 #next-steps ul {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 8px;
  margin: 32px 0 0;
  .logo {
    height: 18px;
  }
  a {
    color: var(--text-h);
    font-size: 16px;
    border-radius: 6px;
    background: var(--social-bg);
    display: flex;
    padding: 6px 12px;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: box-shadow 0.3s;
    &:hover {
      box-shadow: var(--shadow);
    }
    .button-icon {
      height: 18px;
      width: 18px;
    }
  }
  @media (max-width: 1024px) {
    margin-top: 20px;
    flex-wrap: wrap;
    justify-content: center;
    li {
      flex: 1 1 calc(50% - 8px);
    }
    a {
      width: 100%;
      justify-content: center;
      box-sizing: border-box;
    }
  }
 }
 #spacer {
  height: 88px;
  border-top: 1px solid var(--border);
  @media (max-width: 1024px) {
    height: 48px;
  }
 }
 .ticks {
  position: relative;
  width: 100%;
  &::before,
  &::after {
    content: '';
    position: absolute;
    top: -4.5px;
    border: 5px solid transparent;
  }
  &::before {
    left: 0;
    border-left-color: var(--border);
  }
  &::after {
    right: 0;
    border-right-color: var(--border);
  }
 }
--- a/src/App.tsx
+++ b/src/App.tsx
@ -0,0 +1,333 @@
 import React, { useState, useEffect } from 'react';
 import { ThemeProvider, CssBaseline, Box, Alert } from '@mui/material';
 import { theme } from './theme/theme';
 import { TableLandingView } from './components/customer/TableLandingView';
 import { MenuBrowseView } from './components/customer/MenuBrowseView';
 import { CustomizationModal } from './components/customer/CustomizationModal';
 import { CartReviewView } from './components/customer/CartReviewView';
 import { OrderStatusView } from './components/customer/OrderStatusView';
 import { BillPaymentView } from './components/customer/BillPaymentView';
 import { VoiceAssistantModal } from './components/customer/VoiceAssistantModal';
 import { StaffLoginModal } from './components/admin/StaffLoginModal';
 import { AdminDesktopShell } from './components/admin/AdminDesktopShell';
 import type { MenuItem } from './data/menuData';
 import type { KDSOrder, OrderStatus } from './types';
 import { api, getBackendMenuId, getFrontendMenuItem, RestroWebSocket, subscribeToWsEvents, isDemoMode, setDemoModeChangeCallback } from './services/api';
 type CustomerView = 'landing' | 'menu' | 'cart' | 'status' | 'bill' | 'voice';
 const getTableNumFromUrl = (): number => {
  const params = new URLSearchParams(window.location.search);
  const tableParam = params.get('table');
  if (tableParam) {
    const parsed = parseInt(tableParam);
    if (!isNaN(parsed)) return parsed;
  }
  const path = window.location.pathname;
  const match = path.match(/\/scan\/(\d+)/);
  if (match) {
    return parseInt(match[1]);
  }
  return 12;
 };
 export const App: React.FC = () => {
  const [appMode, setAppMode] = useState<'customer' | 'staff'>('customer');
  const [customerView, setCustomerView] = useState<CustomerView>('landing');
  const [staffRole, setStaffRole] = useState<'kitchen' | 'manager'>('kitchen');
  const [staffLoginOpen, setStaffLoginOpen] = useState<boolean>(false);
  const [voiceModalOpen, setVoiceModalOpen] = useState<boolean>(false);
  const [demoActive, setDemoActive] = useState<boolean>(isDemoMode);
  const [cart, setCart] = useState<{ [itemId: string]: number }>({});
  const [customizingItem, setCustomizingItem] = useState<MenuItem | null>(null);
  const [orders, setOrders] = useState<KDSOrder[]>([]);
  // Monitor demo mode status
  useEffect(() => {
    setDemoActive(isDemoMode);
    setDemoModeChangeCallback((demo) => {
      setDemoActive(demo);
    });
  }, []);
  // Fetch KDS board when staff logged in
  const loadKDS = async () => {
    try {
      // Backend returns KdsBoardResponse: { restaurant_id, orders: KdsBoardOrder[] }
      const data = await api.getKDSBoard(1); // 1 = restaurant ID
      const ordersArray = Array.isArray(data) ? data : (data?.orders || []);
      // Map API Order model to KDSOrder type if format differs
      const mappedOrders: KDSOrder[] = ordersArray.map((ord: any) => {
        // Map KDS status to Order status
        let overallStatus: OrderStatus = 'pending';
        if (ord.status === 'served') overallStatus = 'served';
        else if (ord.status === 'ready') overallStatus = 'ready';
        else if (ord.status === 'in_preparation' || ord.status === 'preparing') overallStatus = 'preparing';
        return {
          id: String(ord.id || ord.order_id),
          ticketNumber: ord.ticketNumber || String(ord.id || ord.order_id).substring(0, 4),
          tableNumber: ord.tableNumber || (ord.table_number ? String(ord.table_number) : 'Takeaway'),
          orderType: ord.orderType || (ord.channel === 'touch' ? 'Dine-In' : 'Dine-In'),
          status: overallStatus,
          createdAt: ord.createdAt || ord.placed_at || new Date().toISOString(),
          timeElapsedMinutes: ord.timeElapsedMinutes || 0,
          priority: ord.priority || 'normal',
          serverName: ord.serverName || 'System',
          totalAmount: ord.totalAmount || Number(ord.subtotal || 0),
          items: ord.items?.map((it: any) => {
            const original = getFrontendMenuItem(it.menu_item_id);
            return {
              id: String(it.id),
              name: it.name || original?.name || `Dish ${it.menu_item_id}`,
              quantity: it.quantity,
              price: it.price || (it.unit_price ? Number(it.unit_price) : (original?.price || 150)),
              completed: it.kds_status === 'ready' || it.kds_status === 'served',
              dietary: 'veg'
            };
          }) || []
        };
      });
      setOrders(mappedOrders);
    } catch (err) {
      console.error('Failed to reload KDS board', err);
    }
  };
  useEffect(() => {
    if (appMode === 'staff') {
      loadKDS();
      // Setup WebSocket connection
      const ws = new RestroWebSocket('kds', '1');
      ws.connect();
      // Subscribe to updates
      const unsubscribe = subscribeToWsEvents((event) => {
        if (event.type === 'kds.item_updated') {
          loadKDS();
        }
      });
      return () => {
        ws.close();
        unsubscribe();
      };
    }
  }, [appMode]);
  const handleUpdateCart = (itemId: string, quantity: number) => {
    setCart((prev) => {
      const copy = { ...prev };
      if (quantity <= 0) {
        delete copy[itemId];
      } else {
        copy[itemId] = quantity;
      }
      return copy;
    });
  };
  const handleCustomizationConfirm = (item: MenuItem, quantity: number, _notes: string) => {
    handleUpdateCart(item.id, (cart[item.id] || 0) + quantity);
  };
  const handleStartOrdering = async (language: string) => {
    try {
      const tableId = getTableNumFromUrl();
      await api.startSession(tableId, language === 'english' ? 'en' : 'hi');
      setCustomerView('menu');
    } catch (err) {
      console.warn('Could not initialize session, entering offline menu browse', err);
      setCustomerView('menu');
    }
  };
  const handlePlaceOrder = async (_orderNotes: string) => {
    try {
      const items = Object.entries(cart).map(([id, qty]) => ({
        menu_item_id: getBackendMenuId(id),
        quantity: qty,
        customization_notes: []
      }));
      await api.placeOrder(items);
      setCart({});
      setCustomerView('status');
    } catch (err) {
      alert('Failed to place order: ' + err);
    }
  };
  const handleStatusChange = async (orderId: string, newStatus: OrderStatus) => {
    try {
      const statusMap: Record<OrderStatus, string> = {
        pending: 'queued',
        preparing: 'in_prep',
        ready: 'ready',
        served: 'served'
      };
      const kdsStatus = statusMap[newStatus];
      const order = orders.find((o) => o.id === orderId);
      if (order) {
        for (const item of order.items) {
          await api.updateOrderItemStatus(item.id, kdsStatus);
        }
      }
      loadKDS();
    } catch (err) {
      console.error('Failed to change status', err);
    }
  };
  const handleToggleItem = async (orderId: string, itemId: string) => {
    try {
      const order = orders.find((o) => o.id === orderId);
      const item = order?.items.find((i) => i.id === itemId);
      if (item) {
        const nextStatus = item.completed ? 'in_prep' : 'ready';
        await api.updateOrderItemStatus(itemId, nextStatus);
        loadKDS();
      }
    } catch (err) {
      console.error('Failed to toggle item', err);
    }
  };
  const handleAddSampleOrder = async () => {
    // Add a sample order via API or locally
    try {
      const items = [
        { menu_item_id: 9, quantity: 2 }, // Butter chicken
        { menu_item_id: 11, quantity: 4 } // Garlic naan
      ];
      await api.placeOrder(items);
      loadKDS();
    } catch (e) {
      console.error('Failed to add sample order', e);
    }
  };
  const handleAddOrderFromVoice = async (_transcript: string) => {
    try {
      const items = [
        { menu_item_id: 9, quantity: 2, customization_notes: ['Via Voice assistant'] },
        { menu_item_id: 11, quantity: 3 }
      ];
      await api.placeOrder(items);
      loadKDS();
    } catch (e) {
      console.error('Failed to place voice order', e);
    }
  };
  const handleStaffLoginSuccess = (role: 'kitchen' | 'manager') => {
    setStaffRole(role);
    setAppMode('staff');
  };
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      {demoActive && (
        <Alert
          severity="warning"
          variant="filled"
          sx={{
            borderRadius: 0,
            justifyContent: 'center',
            fontWeight: 800,
            py: 0.5,
            fontSize: '0.8rem',
            position: 'sticky',
            top: 0,
            zIndex: 2000,
            background: 'linear-gradient(90deg, #d32f2f 0%, #ef5350 100%)',
          }}
        >
          Running in Demo Mode (Mock Backend). Start restroai-backend locally to connect to live DB.
        </Alert>
      )}
      {appMode === 'staff' ? (
        <AdminDesktopShell
          role={staffRole}
          orders={orders}
          onStatusChange={handleStatusChange}
          onToggleItem={handleToggleItem}
          onAddSampleOrder={handleAddSampleOrder}
          onAddOrderFromVoice={handleAddOrderFromVoice}
          onLogout={() => setAppMode('customer')}
        />
      ) : (
        <Box sx={{ minHeight: '100vh', bgcolor: '#f8f5f2' }}>
          {customerView === 'landing' && (
            <TableLandingView
              onStartOrdering={handleStartOrdering}
              onOpenStaffLogin={() => setStaffLoginOpen(true)}
              onOpenVoice={() => setVoiceModalOpen(true)}
            />
          )}
          {customerView === 'menu' && (
            <MenuBrowseView
              cart={cart}
              onUpdateCart={handleUpdateCart}
              onOpenCustomization={(item) => setCustomizingItem(item)}
              onOpenVoice={() => setVoiceModalOpen(true)}
              onNavigate={(v) => setCustomerView(v as CustomerView)}
            />
          )}
          {customerView === 'cart' && (
            <CartReviewView
              cart={cart}
              onUpdateCart={handleUpdateCart}
              onPlaceOrder={handlePlaceOrder}
              onNavigate={(v) => setCustomerView(v as CustomerView)}
            />
          )}
          {customerView === 'status' && (
            <OrderStatusView onNavigate={(v) => setCustomerView(v as CustomerView)} />
          )}
          {customerView === 'bill' && (
            <BillPaymentView onNavigate={(v) => setCustomerView(v as CustomerView)} />
          )}
          {/* Item Customization Dialog */}
          <CustomizationModal
            open={!!customizingItem}
            item={customizingItem}
            onClose={() => setCustomizingItem(null)}
            onConfirm={handleCustomizationConfirm}
          />
          {/* AI Voice Assistant Modal (bottom sheet) */}
          <VoiceAssistantModal
            open={voiceModalOpen}
            onClose={() => setVoiceModalOpen(false)}
            onAddToCart={handleUpdateCart}
          />
        </Box>
      )}
      {/* Staff Login Modal */}
      <StaffLoginModal
        open={staffLoginOpen}
        onClose={() => setStaffLoginOpen(false)}
        onLoginSuccess={handleStaffLoginSuccess}
      />
    </ThemeProvider>
  );
 };
 export default App;
--- a/src/assets/hero.png
+++ b/src/assets/hero.png
--- a/src/assets/react.svg
+++ b/src/assets/react.svg
@ -0,0 +1 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
--- a/src/assets/vite.svg
+++ b/src/assets/vite.svg
--- a/src/components/admin/AdminDesktopShell.tsx
+++ b/src/components/admin/AdminDesktopShell.tsx
@ -0,0 +1,284 @@
 import React, { useState } from 'react';
 import {
  Box,
  Drawer,
  List,
  ListItem,
  ListItemButton,
  ListItemIcon,
  ListItemText,
  Typography,
  AppBar,
  Toolbar,
  Chip,
  Button,
  Avatar,
  Divider,
 } from '@mui/material';
 import SoupKitchenIcon from '@mui/icons-material/SoupKitchen';
 import BarChartIcon from '@mui/icons-material/BarChart';
 import RecordVoiceOverIcon from '@mui/icons-material/RecordVoiceOver';
 import LogoutIcon from '@mui/icons-material/Logout';
 import LocalDiningIcon from '@mui/icons-material/LocalDining';
 import AccountCircleIcon from '@mui/icons-material/AccountCircle';
 import TableBarIcon from '@mui/icons-material/TableBar';
 import ReceiptIcon from '@mui/icons-material/Receipt';
 import BookOnlineIcon from '@mui/icons-material/BookOnline';
 import InventoryIcon from '@mui/icons-material/Inventory';
 import LocalShippingIcon from '@mui/icons-material/LocalShipping';
 import BadgeIcon from '@mui/icons-material/Badge';
 import StarHalfIcon from '@mui/icons-material/StarHalf';
 import { KDSKanban } from '../kds/KDSKanban';
 import { AnalyticsDashboard } from '../analytics/AnalyticsDashboard';
 import { VoiceOrderingView } from '../voice/VoiceOrderingView';
 import { TableManagementView } from './TableManagementView';
 import { BillingManagerView } from './BillingManagerView';
 import { ReservationsView } from './ReservationsView';
 import { InventoryView } from './InventoryView';
 import { SuppliersView } from './SuppliersView';
 import { StaffShiftsView } from './StaffShiftsView';
 import { FeedbackInboxView } from './FeedbackInboxView';
 import type { KDSOrder, OrderStatus } from '../../types';
 interface AdminDesktopShellProps {
  role: 'kitchen' | 'manager';
  orders: KDSOrder[];
  onStatusChange: (id: string, newStatus: OrderStatus) => void;
  onToggleItem: (orderId: string, itemId: string) => void;
  onAddSampleOrder: () => void;
  onAddOrderFromVoice: (transcript: string) => void;
  onLogout: () => void;
 }
 type TabType =
  | 'kds'
  | 'tables'
  | 'billing'
  | 'reservations'
  | 'inventory'
  | 'suppliers'
  | 'staff'
  | 'feedback'
  | 'analytics'
  | 'voice';
 export const AdminDesktopShell: React.FC<AdminDesktopShellProps> = ({
  role,
  orders,
  onStatusChange,
  onToggleItem,
  onAddSampleOrder,
  onAddOrderFromVoice,
  onLogout,
 }) => {
  const [activeTab, setActiveTab] = useState<TabType>(
    role === 'manager' ? 'analytics' : 'kds'
  );
  const pendingCount = orders.filter((o) => o.status === 'pending').length;
  const drawerWidth = 260;
  // Sidebar list configurations
  const menuItems = [
    { id: 'kds', label: 'KDS Kanban Board', icon: <SoupKitchenIcon />, roles: ['kitchen', 'manager'] },
    { id: 'tables', label: 'Tables & Floor', icon: <TableBarIcon />, roles: ['manager'] },
    { id: 'billing', label: 'Billing Desk', icon: <ReceiptIcon />, roles: ['manager'] },
    { id: 'reservations', label: 'Reservations', icon: <BookOnlineIcon />, roles: ['manager'] },
    { id: 'inventory', label: 'Kitchen Stock & Recipes', icon: <InventoryIcon />, roles: ['kitchen', 'manager'] },
    { id: 'suppliers', label: 'Suppliers & POs', icon: <LocalShippingIcon />, roles: ['manager'] },
    { id: 'staff', label: 'Staff & Shifts', icon: <BadgeIcon />, roles: ['manager'] },
    { id: 'feedback', label: 'Customer Feedback', icon: <StarHalfIcon />, roles: ['manager'] },
    { id: 'analytics', label: 'Business Intelligence', icon: <BarChartIcon />, roles: ['manager'] },
    { id: 'voice', label: 'AI Voice Terminal', icon: <RecordVoiceOverIcon />, roles: ['kitchen', 'manager'] },
  ];
  const filteredMenuItems = menuItems.filter((item) => item.roles.includes(role));
  const getPageTitle = () => {
    switch (activeTab) {
      case 'kds': return 'Kitchen Display System (KDS) Live Kanban';
      case 'tables': return 'Table Floor & Session Planner';
      case 'billing': return 'Cashier Billing Desk & Payments';
      case 'reservations': return 'Diner Reservations Book';
      case 'inventory': return 'Kitchen Raw Stocks & Recipes Linking';
      case 'suppliers': return 'Merchant Suppliers & Purchase Orders';
      case 'staff': return 'Employee Attendance & Shift Roster';
      case 'feedback': return 'Customer Feedback Rating Reviews';
      case 'analytics': return 'Executive Business Analytics & Trends';
      case 'voice': return 'Staff AI Voice Assistant Terminal';
      default: return 'Management Portal';
    }
  };
  return (
    <Box sx={{ display: 'flex', minHeight: '100vh', bgcolor: '#f4f5f7' }}>
      {/* Desktop Sidebar Navigation */}
      <Drawer
        variant="permanent"
        sx={{
          width: drawerWidth,
          flexShrink: 0,
          '& .MuiDrawer-paper': {
            width: drawerWidth,
            boxSizing: 'border-box',
            bgcolor: '#1a1c1c',
            color: '#ffffff',
            borderRight: '1px solid #2f3131',
          },
        }}
      >
        <Box sx={{ p: 2.5, display: 'flex', alignItems: 'center', gap: 1.5 }}>
          <Box
            sx={{
              width: 40,
              height: 40,
              borderRadius: '8px',
              background: 'linear-gradient(135deg, #ac2d00 0%, #d53e0b 100%)',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              color: '#ffffff',
            }}
          >
            <LocalDiningIcon />
          </Box>
          <Box>
            <Typography variant="h6" sx={{ fontWeight: 800, color: '#ffb5a0', lineHeight: 1.1 }}>
              RestroAI
            </Typography>
            <Typography variant="caption" sx={{ color: '#c6c6cd', fontSize: '0.65rem', fontWeight: 700 }}>
              DESKTOP STAFF PORTAL
            </Typography>
          </Box>
        </Box>
        <Divider sx={{ borderColor: 'rgba(255,255,255,0.1)' }} />
        <Box sx={{ p: 2 }}>
          <Chip
            avatar={<Avatar sx={{ bgcolor: '#ac2d00' }}>{role === 'manager' ? 'M' : 'K'}</Avatar>}
            label={role === 'manager' ? 'Role: Restaurant Manager' : 'Role: Kitchen Head Chef'}
            sx={{
              bgcolor: 'rgba(255,255,255,0.08)',
              color: '#ffffff',
              fontWeight: 700,
              width: '100%',
              justifyContent: 'flex-start',
            }}
          />
        </Box>
        <List sx={{ px: 1, overflowY: 'auto', flexGrow: 1 }}>
          {filteredMenuItems.map((item) => (
            <ListItem disablePadding sx={{ mb: 0.5 }} key={item.id}>
              <ListItemButton
                selected={activeTab === item.id}
                onClick={() => setActiveTab(item.id as TabType)}
                sx={{
                  borderRadius: '8px',
                  '&.Mui-selected': { bgcolor: '#ac2d00', color: '#ffffff' },
                  '&.Mui-selected:hover': { bgcolor: '#872100' },
                }}
              >
                <ListItemIcon sx={{ color: activeTab === item.id ? '#ffffff' : '#c6c6cd', minWidth: 38 }}>
                  {item.icon}
                </ListItemIcon>
                <ListItemText
                  primary={
                    <Typography sx={{ fontWeight: activeTab === item.id ? 800 : 500, fontSize: '0.9rem' }}>
                      {item.label}
                    </Typography>
                  }
                />
                {item.id === 'kds' && pendingCount > 0 && (
                  <Chip label={pendingCount} size="small" color="error" sx={{ fontWeight: 800, height: 20 }} />
                )}
              </ListItemButton>
            </ListItem>
          ))}
        </List>
        <Box sx={{ mt: 'auto', p: 2 }}>
          <Button
            fullWidth
            variant="outlined"
            onClick={onLogout}
            startIcon={<LogoutIcon />}
            sx={{
              color: '#ffb5a0',
              borderColor: 'rgba(255, 181, 160, 0.4)',
              borderRadius: '8px',
              fontWeight: 700,
              '&:hover': {
                borderColor: '#ffb5a0',
                bgcolor: 'rgba(255, 181, 160, 0.08)',
              },
            }}
          >
            Switch to Diner Mode
          </Button>
        </Box>
      </Drawer>
      {/* Main Content Area */}
      <Box component="main" sx={{ flexGrow: 1, display: 'flex', flexDirection: 'column', height: '100vh', overflow: 'hidden' }}>
        <AppBar position="static" elevation={0} sx={{ bgcolor: '#ffffff', color: '#1a1c1c', borderBottom: '1px solid #e2e2e2' }}>
          <Toolbar sx={{ justifyContent: 'space-between' }}>
            <Typography variant="h6" sx={{ fontWeight: 800, color: '#ac2d00' }}>
              {getPageTitle()}
            </Typography>
            <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
              <Chip
                label="System Status: LIVE ONLINE"
                color="success"
                size="small"
                sx={{ fontWeight: 800 }}
              />
              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                <AccountCircleIcon sx={{ color: '#ac2d00' }} />
                <Typography variant="body2" sx={{ fontWeight: 700 }}>
                  Logged in as {role === 'manager' ? 'Admin Manager' : 'Chef Rahul S.'}
                </Typography>
              </Box>
            </Box>
          </Toolbar>
        </AppBar>
        <Box sx={{ p: 3, flexGrow: 1, overflowY: 'auto' }}>
          {activeTab === 'kds' && (
            <KDSKanban
              orders={orders}
              onStatusChange={onStatusChange}
              onToggleItem={onToggleItem}
              onAddSampleOrder={onAddSampleOrder}
            />
          )}
          {activeTab === 'tables' && <TableManagementView />}
          {activeTab === 'billing' && <BillingManagerView />}
          {activeTab === 'reservations' && <ReservationsView />}
          {activeTab === 'inventory' && <InventoryView />}
          {activeTab === 'suppliers' && <SuppliersView />}
          {activeTab === 'staff' && <StaffShiftsView />}
          {activeTab === 'feedback' && <FeedbackInboxView />}
          {activeTab === 'analytics' && <AnalyticsDashboard />}
          {activeTab === 'voice' && (
            <VoiceOrderingView onAddOrderFromVoice={onAddOrderFromVoice} />
          )}
        </Box>
      </Box>
    </Box>
  );
 };
--- a/src/components/admin/BillingManagerView.tsx
+++ b/src/components/admin/BillingManagerView.tsx
@ -0,0 +1,310 @@
 import React, { useState, useEffect } from 'react';
 import {
  Box,
  Typography,
  Grid,
  Card,
  CardContent,
  Button,
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  FormControl,
  InputLabel,
  Select,
  MenuItem,
  TextField,
  Alert,
  Chip,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Paper,
 } from '@mui/material';
 import ReceiptIcon from '@mui/icons-material/Receipt';
 import PaymentIcon from '@mui/icons-material/Payment';
 import LocalOfferIcon from '@mui/icons-material/LocalOffer';
 import RefreshIcon from '@mui/icons-material/Refresh';
 import { api } from '../../services/api';
 export const BillingManagerView: React.FC = () => {
  const [orders, setOrders] = useState<any[]>([]);
  const [bills, setBills] = useState<any[]>([]);
  const [error, setError] = useState<string | null>(null);
  // Dialog states
  const [paymentOpen, setPaymentOpen] = useState<boolean>(false);
  const [activeBill, setActiveBill] = useState<any | null>(null);
  const [paymentMethod, setPaymentMethod] = useState<string>('cash');
  const [paymentAmount, setPaymentAmount] = useState<string>('');
  const loadBillingData = async () => {
    setError(null);
    try {
      // Load KDS board to find active orders
      const ordersData = await api.getKDSBoard(1);
      const ordersArray = Array.isArray(ordersData) ? ordersData : (ordersData?.orders || []);
      setOrders(ordersArray);
    } catch (err: any) {
      setError(err.message || 'Failed to load billing status');
    }
  };
  useEffect(() => {
    loadBillingData();
  }, []);
  const handleGenerateBill = async (orderId: string) => {
    setError(null);
    try {
      const bill = await api.generateBill(orderId);
      setBills((prev) => {
        // Avoid duplicate entries
        if (prev.some((b) => b.id === bill.id)) return prev;
        return [bill, ...prev];
      });
      alert(`Bill successfully generated! Total: ₹${bill.grandTotal}`);
    } catch (err: any) {
      setError(err.message || 'Failed to generate bill');
    }
  };
  const handleRecordPayment = async () => {
    if (!activeBill) return;
    setError(null);
    try {
      const amount = parseFloat(paymentAmount) || activeBill.grandTotal;
      await api.recordPayment(activeBill.id, paymentMethod, amount);
      // Update local bills list status
      setBills((prev) =>
        prev.map((b) => (b.id === activeBill.id ? { ...b, status: 'paid', paymentMethod } : b))
      );
      setPaymentOpen(false);
      setActiveBill(null);
      alert('Payment recorded successfully!');
    } catch (err: any) {
      setError(err.message || 'Failed to record payment');
    }
  };
  const handleIssueCreditNote = async (billId: string) => {
    if (!window.confirm('Are you sure you want to issue a Credit Note? This will create a reversal entry.')) {
      return;
    }
    setError(null);
    try {
      await api.issueCreditNote(billId);
      setBills((prev) =>
        prev.map((b) => (b.id === billId ? { ...b, status: 'void/credited' } : b))
      );
      alert('Credit Note / Reversal registered successfully.');
    } catch (err: any) {
      setError(err.message || 'Failed to issue credit note');
    }
  };
  return (
    <Box>
      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 3 }}>
        <Box>
          <Typography variant="h5" sx={{ fontWeight: 800, color: '#ac2d00' }}>
            Cashier & Billing Desk
          </Typography>
          <Typography variant="body2" color="text.secondary">
            Process guest checks, record cash/digital payments, and manage invoices.
          </Typography>
        </Box>
        <Button
          variant="outlined"
          onClick={loadBillingData}
          startIcon={<RefreshIcon />}
          sx={{ borderColor: '#ac2d00', color: '#ac2d00', '&:hover': { borderColor: '#872100', bgcolor: 'rgba(172,45,0,0.04)' } }}
        >
          Refresh Billing Data
        </Button>
      </Box>
      {error && <Alert severity="error" sx={{ mb: 3 }}>{error}</Alert>}
      <Grid container spacing={3}>
        {/* Left pane: Active Tables / Active Orders to check out */}
        <Grid size={{ xs: 12, md: 6 }}>
          <Typography variant="subtitle1" sx={{ fontWeight: 800, mb: 1.5 }}>
            Active Diner Orders (Generate Bills)
          </Typography>
          {orders.length === 0 ? (
            <Paper elevation={0} sx={{ p: 4, textAlign: 'center', border: '1.5px dashed #e2e2e2', borderRadius: '16px' }}>
              <Typography variant="body2" color="text.secondary">
                No active orders at tables right now.
              </Typography>
            </Paper>
          ) : (
            <Grid container spacing={2}>
              {orders.map((order) => (
                <Grid size={{ xs: 12 }} key={order.id}>
                  <Card elevation={0} sx={{ border: '1.5px solid #e2e2e2', borderRadius: '12px' }}>
                    <CardContent sx={{ pb: 1 }}>
                      <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 1 }}>
                        <Typography sx={{ fontWeight: 900 }}>
                          Table {order.tableNumber || 'Takeaway'}
                        </Typography>
                        <Chip label={`Ticket #${order.ticketNumber}`} size="small" variant="outlined" sx={{ fontWeight: 700 }} />
                      </Box>
                      <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
                        Items: {order.items?.map((it: any) => `${it.quantity}x ${it.name}`).join(', ')}
                      </Typography>
                      <Typography variant="subtitle2" sx={{ fontWeight: 800, color: '#ac2d00' }}>
                        Subtotal: ₹{order.totalAmount}
                      </Typography>
                    </CardContent>
                    <Box sx={{ p: 2, pt: 0, display: 'flex', justifyContent: 'flex-end' }}>
                      <Button
                        variant="contained"
                        size="small"
                        startIcon={<ReceiptIcon />}
                        onClick={() => handleGenerateBill(order.id)}
                        sx={{ bgcolor: '#ac2d00', '&:hover': { bgcolor: '#872100' }, fontWeight: 700 }}
                      >
                        Generate Bill
                      </Button>
                    </Box>
                  </Card>
                </Grid>
              ))}
            </Grid>
          )}
        </Grid>
        {/* Right pane: Bills Ledger */}
        <Grid size={{ xs: 12, md: 6 }}>
          <Typography variant="subtitle1" sx={{ fontWeight: 800, mb: 1.5 }}>
            Checkout Bills Ledger
          </Typography>
          {bills.length === 0 ? (
            <Paper elevation={0} sx={{ p: 4, textAlign: 'center', border: '1.5px dashed #e2e2e2', borderRadius: '16px' }}>
              <Typography variant="body2" color="text.secondary">
                No bills generated in this session yet.
              </Typography>
            </Paper>
          ) : (
            <TableContainer component={Paper} elevation={0} sx={{ border: '1.5px solid #e2e2e2', borderRadius: '16px' }}>
              <Table size="small">
                <TableHead sx={{ bgcolor: '#fbfbfb' }}>
                  <TableRow>
                    <TableCell sx={{ fontWeight: 800 }}>Bill ID</TableCell>
                    <TableCell sx={{ fontWeight: 800 }}>Total</TableCell>
                    <TableCell sx={{ fontWeight: 800 }}>Status</TableCell>
                    <TableCell sx={{ fontWeight: 800 }} align="right">Actions</TableCell>
                  </TableRow>
                </TableHead>
                <TableBody>
                  {bills.map((bill) => (
                    <TableRow key={bill.id}>
                      <TableCell sx={{ fontWeight: 600 }}>{bill.id.substring(0, 12)}...</TableCell>
                      <TableCell sx={{ fontWeight: 700 }}>₹{bill.grandTotal}</TableCell>
                      <TableCell>
                        <Chip
                          label={bill.status.toUpperCase()}
                          size="small"
                          color={bill.status === 'paid' ? 'success' : bill.status.startsWith('void') ? 'default' : 'warning'}
                          sx={{ fontWeight: 700, fontSize: '0.65rem' }}
                        />
                      </TableCell>
                      <TableCell align="right" sx={{ display: 'flex', gap: 1, justifyContent: 'flex-end' }}>
                        {bill.status === 'unpaid' && (
                          <Button
                            variant="contained"
                            size="small"
                            color="success"
                            startIcon={<PaymentIcon />}
                            onClick={() => {
                              setActiveBill(bill);
                              setPaymentAmount(String(bill.grandTotal));
                              setPaymentOpen(true);
                            }}
                            sx={{ fontWeight: 700 }}
                          >
                            Pay
                          </Button>
                        )}
                        {bill.status === 'paid' && (
                          <Button
                            variant="outlined"
                            size="small"
                            color="error"
                            startIcon={<LocalOfferIcon />}
                            onClick={() => handleIssueCreditNote(bill.id)}
                            sx={{ fontWeight: 700 }}
                          >
                            Refund
                          </Button>
                        )}
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </TableContainer>
          )}
        </Grid>
      </Grid>
      {/* Pay Bill Dialog */}
      <Dialog open={paymentOpen} onClose={() => setPaymentOpen(false)} maxWidth="xs" fullWidth>
        <DialogTitle sx={{ fontWeight: 800 }}>Record Customer Payment</DialogTitle>
        <DialogContent sx={{ pt: 2, display: 'flex', flexDirection: 'column', gap: 2 }}>
          <Typography variant="body2" color="text.secondary">
            Provide the payment method and final received amount to close this invoice.
          </Typography>
          <TextField
            label="Total Bill Amount"
            value={`₹${activeBill?.grandTotal}`}
            disabled
            fullWidth
            size="small"
          />
          <TextField
            label="Amount Paid"
            type="number"
            value={paymentAmount}
            onChange={(e) => setPaymentAmount(e.target.value)}
            fullWidth
            size="small"
          />
          <FormControl fullWidth size="small">
            <InputLabel>Payment Method</InputLabel>
            <Select
              value={paymentMethod}
              label="Payment Method"
              onChange={(e) => setPaymentMethod(e.target.value)}
            >
              <MenuItem value="cash">💵 Cash Payment</MenuItem>
              <MenuItem value="upi">📱 UPI / QR Transfer</MenuItem>
              <MenuItem value="card">💳 Card Terminal</MenuItem>
              <MenuItem value="wallet">💼 Mobile Wallet</MenuItem>
            </Select>
          </FormControl>
        </DialogContent>
        <DialogActions sx={{ p: 2 }}>
          <Button onClick={() => setPaymentOpen(false)} color="inherit">Cancel</Button>
          <Button
            variant="contained"
            onClick={handleRecordPayment}
            sx={{ bgcolor: '#ac2d00', '&:hover': { bgcolor: '#872100' }, fontWeight: 700 }}
          >
            Confirm & Save
          </Button>
        </DialogActions>
      </Dialog>
    </Box>
  );
 };
--- a/src/components/admin/FeedbackInboxView.tsx
+++ b/src/components/admin/FeedbackInboxView.tsx
@ -0,0 +1,153 @@
 import React, { useState, useEffect } from 'react';
 import {
  Box,
  Typography,
  Card,
  CircularProgress,
  Alert,
  Rating,
  List,
  ListItem,
  ListItemText,
  Divider,
  FormControl,
  InputLabel,
  Select,
  MenuItem,
  Button,
  Grid,
 } from '@mui/material';
 import StarIcon from '@mui/icons-material/Star';
 import RefreshIcon from '@mui/icons-material/Refresh';
 import { api } from '../../services/api';
 export const FeedbackInboxView: React.FC = () => {
  const [feedbackList, setFeedbackList] = useState<any[]>([]);
  const [minRating, setMinRating] = useState<number>(0);
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<string | null>(null);
  const fetchFeedback = async () => {
    setLoading(true);
    setError(null);
    try {
      const data = await api.getFeedback(minRating);
      setFeedbackList(Array.isArray(data) ? data : []);
    } catch (err: any) {
      setError(err.message || 'Failed to fetch customer feedback');
    } finally {
      setLoading(false);
    }
  };
  useEffect(() => {
    fetchFeedback();
  }, [minRating]);
  const averageRating = feedbackList.length > 0
    ? (feedbackList.reduce((acc, f) => acc + f.star_rating, 0) / feedbackList.length).toFixed(1)
    : '0.0';
  return (
    <Box>
      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 3 }}>
        <Box>
          <Typography variant="h5" sx={{ fontWeight: 800, color: '#ac2d00' }}>
            Customer Feedback Inbox
          </Typography>
          <Typography variant="body2" color="text.secondary">
            Read reviews, check service satisfaction, and aggregate dining experience scores.
          </Typography>
        </Box>
        <Box sx={{ display: 'flex', gap: 1.5, alignItems: 'center' }}>
          <FormControl size="small" sx={{ minWidth: 160 }}>
            <InputLabel>Filter by Rating</InputLabel>
            <Select
              value={minRating}
              label="Filter by Rating"
              onChange={(e) => setMinRating(Number(e.target.value))}
            >
              <MenuItem value={0}>All Stars</MenuItem>
              <MenuItem value={4}>4 Stars & Above</MenuItem>
              <MenuItem value={5}>5 Stars Only</MenuItem>
            </Select>
          </FormControl>
          <Button
            variant="outlined"
            onClick={fetchFeedback}
            startIcon={<RefreshIcon />}
            sx={{ borderColor: '#ac2d00', color: '#ac2d00', '&:hover': { borderColor: '#872100', bgcolor: 'rgba(172,45,0,0.04)' } }}
          >
            Refresh
          </Button>
        </Box>
      </Box>
      {error && <Alert severity="error" sx={{ mb: 3 }}>{error}</Alert>}
      {loading ? (
        <Box sx={{ display: 'flex', justifyContent: 'center', py: 8 }}><CircularProgress /></Box>
      ) : (
        <Grid container spacing={3}>
          {/* Summary Box */}
          <Grid size={{ xs: 12, md: 4 }}>
            <Card elevation={0} sx={{ border: '1.5px solid #e2e2e2', borderRadius: '16px', bgcolor: '#fff9f7', p: 3, textAlign: 'center' }}>
              <Typography variant="h6" sx={{ fontWeight: 800, color: '#ac2d00', mb: 1 }}>
                Aggregated Score
              </Typography>
              <Typography variant="h2" sx={{ fontWeight: 900, mb: 1 }}>
                {averageRating}
              </Typography>
              <Rating
                value={parseFloat(averageRating)}
                precision={0.1}
                readOnly
                emptyIcon={<StarIcon style={{ opacity: 0.55 }} fontSize="inherit" />}
                sx={{ mb: 1.5 }}
              />
              <Typography variant="body2" color="text.secondary">
                Based on {feedbackList.length} reviews
              </Typography>
            </Card>
          </Grid>
          {/* Feedbacks List */}
          <Grid size={{ xs: 12, md: 8 }}>
            <Card elevation={0} sx={{ border: '1.5px solid #e2e2e2', borderRadius: '16px', p: 2 }}>
              {feedbackList.length === 0 ? (
                <Typography variant="body2" color="text.secondary" sx={{ py: 4, textAlign: 'center', fontStyle: 'italic' }}>
                  No feedback reviews matching your filter criteria.
                </Typography>
              ) : (
                <List sx={{ width: '100%' }}>
                  {feedbackList.map((fb, idx) => (
                    <React.Fragment key={fb.id || idx}>
                      <ListItem sx={{ alignItems: 'flex-start', px: 1 }}>
                        <ListItemText
                          primary={
                            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, mb: 0.5 }}>
                              <Rating value={fb.star_rating} readOnly size="small" />
                              <Typography variant="caption" color="text.secondary" sx={{ fontWeight: 600 }}>
                                {fb.submitted_at ? new Date(fb.submitted_at).toLocaleString() : (fb.date || 'N/A')}
                              </Typography>
                            </Box>
                          }
                          secondary={
                            <Typography variant="body2" color="text.primary" sx={{ fontWeight: 550, fontStyle: fb.comment_text ? 'normal' : 'italic' }}>
                              {fb.comment_text || '(No comment left by guest)'}
                            </Typography>
                          }
                        />
                      </ListItem>
                      {idx < feedbackList.length - 1 && <Divider component="li" />}
                    </React.Fragment>
                  ))}
                </List>
              )}
            </Card>
          </Grid>
        </Grid>
      )}
    </Box>
  );
 };
--- a/src/components/admin/InventoryView.tsx
+++ b/src/components/admin/InventoryView.tsx
@ -0,0 +1,439 @@
 import React, { useState, useEffect } from 'react';
 import {
  Box,
  Typography,
  Grid,
  Card,
  Button,
  TextField,
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  CircularProgress,
  Alert,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Paper,
  IconButton,
  Chip,
  Select,
  MenuItem,
  InputLabel,
  FormControl,
  List,
  ListItem,
  ListItemText,
  Divider,
 } from '@mui/material';
 import DeleteIcon from '@mui/icons-material/Delete';
 import EditIcon from '@mui/icons-material/Edit';
 import AddIcon from '@mui/icons-material/Add';
 import RefreshIcon from '@mui/icons-material/Refresh';
 import SaveIcon from '@mui/icons-material/Save';
 import { api } from '../../services/api';
 import { MENU_ITEMS } from '../../data/menuData';
 export const InventoryView: React.FC = () => {
  const [ingredients, setIngredients] = useState<any[]>([]);
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<string | null>(null);
  // Ingredient Form Dialog States
  const [openIngForm, setOpenIngForm] = useState<boolean>(false);
  const [editingIng, setEditingIng] = useState<any | null>(null);
  const [ingName, setIngName] = useState<string>('');
  const [ingStock, setIngStock] = useState<number>(0);
  const [ingUnit, setIngUnit] = useState<string>('kg');
  const [ingMinStock, setIngMinStock] = useState<number>(2);
  // Recipe Builder States
  const [selectedMenuId, setSelectedMenuId] = useState<number>(5); // Default to item 5
  // Backend schema: { ingredient_id, quantity_required }
  const [recipeIngredients, setRecipeIngredients] = useState<{ ingredient_id: number; quantity_required: number }[]>([]);
  const [recipeLoading, setRecipeLoading] = useState<boolean>(false);
  // Adding single ingredient to recipe
  const [addIngId, setAddIngId] = useState<string>('');
  const [addIngQty, setAddIngQty] = useState<number>(0.1);
  const fetchIngredients = async () => {
    setLoading(true);
    setError(null);
    try {
      const data = await api.getIngredients();
      setIngredients(Array.isArray(data) ? data : []);
    } catch (err: any) {
      setError(err.message || 'Failed to fetch ingredients');
    } finally {
      setLoading(false);
    }
  };
  const fetchRecipe = async (menuId: number) => {
    setRecipeLoading(true);
    try {
      const data = await api.getRecipe(menuId);
      // Backend returns list[RecipeIngredientRead] - an array directly
      setRecipeIngredients(Array.isArray(data) ? data : (data?.ingredients || []));
    } catch (err) {
      console.error('Failed to load recipe', err);
    } finally {
      setRecipeLoading(false);
    }
  };
  useEffect(() => {
    fetchIngredients();
  }, []);
  useEffect(() => {
    fetchRecipe(selectedMenuId);
  }, [selectedMenuId]);
  const handleSaveIngredient = async () => {
    setError(null);
    try {
      if (editingIng) {
        // Edit existing — backend only allows: name, unit, reorder_threshold, unit_cost
        const updated = await api.updateIngredient(editingIng.id, {
          name: ingName,
          reorder_threshold: ingMinStock,
        });
        setIngredients((prev) =>
          prev.map((i) => (i.id === editingIng.id ? updated : i))
        );
      } else {
        // Create new — backend schema: name, unit, current_stock, reorder_threshold, unit_cost
        const created = await api.createIngredient(ingName, ingStock, ingUnit, ingMinStock);
        setIngredients((prev) => [...prev, created]);
      }
      setOpenIngForm(false);
      setEditingIng(null);
      setIngName('');
      setIngStock(0);
      setIngMinStock(2);
    } catch (err: any) {
      setError(err.message || 'Failed to save ingredient');
    }
  };
  const handleDeleteIngredient = async (id: string) => {
    if (!window.confirm('Delete this ingredient?')) return;
    try {
      await api.deleteIngredient(id);
      setIngredients((prev) => prev.filter((i) => i.id !== id));
    } catch (err: any) {
      alert(err.message || 'Failed to delete ingredient');
    }
  };
  const handleSaveRecipe = async () => {
    try {
      await api.saveRecipe(selectedMenuId, recipeIngredients);
      alert('Recipe updated successfully!');
    } catch (err: any) {
      alert(err.message || 'Failed to save recipe');
    }
  };
  const handleAddRecipeIngredient = () => {
    if (!addIngId || addIngQty <= 0) return;
    if (recipeIngredients.some(r => r.ingredient_id === Number(addIngId))) {
      alert('Ingredient already added to recipe!');
      return;
    }
    setRecipeIngredients(prev => [...prev, { ingredient_id: Number(addIngId), quantity_required: addIngQty }]);
    setAddIngId('');
  };
  const handleRemoveRecipeIngredient = (ingId: number) => {
    setRecipeIngredients(prev => prev.filter(r => r.ingredient_id !== ingId));
  };
  return (
    <Box>
      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 3 }}>
        <Box>
          <Typography variant="h5" sx={{ fontWeight: 800, color: '#ac2d00' }}>
            Kitchen Stock & Recipes
          </Typography>
          <Typography variant="body2" color="text.secondary">
            Keep track of ingredient raw stocks, identify low stock warnings, and link menu items to recipes.
          </Typography>
        </Box>
        <Box sx={{ display: 'flex', gap: 1 }}>
          <Button
            variant="contained"
            onClick={() => {
              setEditingIng(null);
              setIngName('');
              setIngStock(0);
              setIngUnit('kg');
              setIngMinStock(2);
              setOpenIngForm(true);
            }}
            startIcon={<AddIcon />}
            sx={{ bgcolor: '#ac2d00', '&:hover': { bgcolor: '#872100' }, fontWeight: 700 }}
          >
            Add Raw Stock
          </Button>
          <Button
            variant="outlined"
            onClick={fetchIngredients}
            startIcon={<RefreshIcon />}
            sx={{ borderColor: '#ac2d00', color: '#ac2d00', '&:hover': { borderColor: '#872100', bgcolor: 'rgba(172,45,0,0.04)' } }}
          >
            Refresh Stock
          </Button>
        </Box>
      </Box>
      {error && <Alert severity="error" sx={{ mb: 3 }}>{error}</Alert>}
      <Grid container spacing={3}>
        {/* Ingredients Grid */}
        <Grid size={{ xs: 12, md: 7 }}>
          <Typography variant="subtitle1" sx={{ fontWeight: 800, mb: 1.5 }}>
            Ingredient Stocks List
          </Typography>
          {loading ? (
            <Box sx={{ display: 'flex', justifyContent: 'center', py: 6 }}><CircularProgress /></Box>
          ) : (
            <TableContainer component={Paper} elevation={0} sx={{ border: '1.5px solid #e2e2e2', borderRadius: '16px' }}>
              <Table size="small">
                <TableHead sx={{ bgcolor: '#fbfbfb' }}>
                  <TableRow>
                    <TableCell sx={{ fontWeight: 800 }}>Ingredient</TableCell>
                    <TableCell sx={{ fontWeight: 800 }}>Stock Qty</TableCell>
                    <TableCell sx={{ fontWeight: 800 }}>Alert Level</TableCell>
                    <TableCell sx={{ fontWeight: 800 }} align="right">Actions</TableCell>
                  </TableRow>
                </TableHead>
                <TableBody>
                  {ingredients.map((ing) => {
                    // Backend fields: current_stock, reorder_threshold
                    const currentStock = Number(ing.current_stock ?? ing.stock ?? 0);
                    const threshold = Number(ing.reorder_threshold ?? ing.minStock ?? 0);
                    const isLow = currentStock <= threshold;
                    return (
                      <TableRow key={ing.id} sx={{ bgcolor: isLow ? 'rgba(237, 108, 2, 0.05)' : 'inherit' }}>
                        <TableCell sx={{ fontWeight: 700 }}>{ing.name}</TableCell>
                        <TableCell sx={{ fontWeight: 600 }}>{currentStock} {ing.unit}</TableCell>
                        <TableCell>
                          {isLow ? (
                            <Chip label="LOW STOCK" color="warning" size="small" sx={{ fontWeight: 850, fontSize: '0.6rem' }} />
                          ) : (
                            <Chip label="GOOD" color="success" size="small" sx={{ fontWeight: 850, fontSize: '0.6rem' }} />
                          )}
                        </TableCell>
                        <TableCell align="right" sx={{ display: 'flex', gap: 0.5, justifyContent: 'flex-end' }}>
                          <IconButton
                            size="small"
                            onClick={() => {
                              setEditingIng(ing);
                              setIngName(ing.name);
                              setIngStock(currentStock);
                              setIngUnit(ing.unit);
                              setIngMinStock(threshold);
                              setOpenIngForm(true);
                            }}
                          >
                            <EditIcon fontSize="small" />
                          </IconButton>
                          <IconButton size="small" color="error" onClick={() => handleDeleteIngredient(ing.id)}>
                            <DeleteIcon fontSize="small" />
                          </IconButton>
                        </TableCell>
                      </TableRow>
                    );
                  })}
                </TableBody>
              </Table>
            </TableContainer>
          )}
        </Grid>
        {/* Recipes Linker Panel */}
        <Grid size={{ xs: 12, md: 5 }}>
          <Typography variant="subtitle1" sx={{ fontWeight: 800, mb: 1.5 }}>
            Dish Recipes Linking
          </Typography>
          <Card elevation={0} sx={{ border: '1.5px solid #e2e2e2', borderRadius: '16px', p: 2 }}>
            <FormControl fullWidth size="small" sx={{ mb: 3 }}>
              <InputLabel>Select Menu Dish</InputLabel>
              <Select
                value={selectedMenuId}
                label="Select Menu Dish"
                onChange={(e) => setSelectedMenuId(Number(e.target.value))}
              >
                {MENU_ITEMS.map((item) => (
                  <MenuItem key={item.id} value={parseInt(item.id.replace('m', ''))}>
                    {item.name} (₹{item.price})
                  </MenuItem>
                ))}
              </Select>
            </FormControl>
            <Typography variant="subtitle2" sx={{ fontWeight: 800, mb: 1 }}>
              Recipe Ingredients needed:
            </Typography>
            {recipeLoading ? (
              <Box sx={{ display: 'flex', justifyContent: 'center', py: 3 }}><CircularProgress size={30} /></Box>
            ) : (
              <Box sx={{ mb: 3 }}>
                {recipeIngredients.length === 0 ? (
                  <Typography variant="body2" color="text.secondary" sx={{ py: 2, fontStyle: 'italic' }}>
                    No ingredients linked to this dish recipe yet. Link below.
                  </Typography>
                ) : (
                  <List disablePadding>
                    {recipeIngredients.map((item) => {
                      // Backend fields: ingredient_id, quantity_required
                      const detail = ingredients.find((i: any) => i.id === item.ingredient_id);
                      return (
                        <ListItem
                          key={item.ingredient_id}
                          secondaryAction={
                            <IconButton size="small" color="error" onClick={() => handleRemoveRecipeIngredient(item.ingredient_id)}>
                              <DeleteIcon fontSize="small" />
                            </IconButton>
                          }
                          sx={{ px: 0, py: 0.5 }}
                        >
                          <ListItemText
                            primary={
                              <Typography variant="body2" sx={{ fontWeight: 700 }}>
                                {detail ? detail.name : `Ingredient #${item.ingredient_id}`}
                              </Typography>
                            }
                            secondary={`Required: ${item.quantity_required} ${detail ? detail.unit : 'kg'}`}
                          />
                        </ListItem>
                      );
                    })}
                  </List>
                )}
                <Divider sx={{ my: 2 }} />
                <Typography variant="caption" sx={{ fontWeight: 800, color: 'text.secondary', display: 'block', mb: 1 }}>
                  LINK ANOTHER STOCK COMPONENT:
                </Typography>
                <Grid container spacing={1} sx={{ alignItems: 'center' }}>
                  <Grid size={{ xs: 6 }}>
                    <FormControl fullWidth size="small">
                      <Select
                        value={addIngId}
                        displayEmpty
                        onChange={(e) => setAddIngId(e.target.value)}
                      >
                        <MenuItem value="">Choose stock...</MenuItem>
                        {ingredients.map((ing) => (
                          <MenuItem key={ing.id} value={ing.id}>{ing.name}</MenuItem>
                        ))}
                      </Select>
                    </FormControl>
                  </Grid>
                  <Grid size={{ xs: 3 }}>
                    <TextField
                      type="number"
                      size="small"
                      placeholder="Qty"
                      value={addIngQty}
                      onChange={(e) => setAddIngQty(parseFloat(e.target.value) || 0)}
                    />
                  </Grid>
                  <Grid size={{ xs: 3 }}>
                    <Button
                      fullWidth
                      variant="outlined"
                      size="small"
                      onClick={handleAddRecipeIngredient}
                      sx={{ height: 38, borderColor: '#ac2d00', color: '#ac2d00', fontWeight: 700 }}
                    >
                      Add
                    </Button>
                  </Grid>
                </Grid>
              </Box>
            )}
            <Button
              fullWidth
              variant="contained"
              startIcon={<SaveIcon />}
              onClick={handleSaveRecipe}
              sx={{ bgcolor: '#ac2d00', '&:hover': { bgcolor: '#872100' }, fontWeight: 700 }}
            >
              Save Recipe Link
            </Button>
          </Card>
        </Grid>
      </Grid>
      {/* Ingredient Form Dialog */}
      <Dialog open={openIngForm} onClose={() => setOpenIngForm(false)} maxWidth="xs" fullWidth>
        <DialogTitle sx={{ fontWeight: 800 }}>
          {editingIng ? 'Modify Raw Ingredient Stock' : 'Add Raw Stock Ingredient'}
        </DialogTitle>
        <DialogContent sx={{ pt: 2, display: 'flex', flexDirection: 'column', gap: 2 }}>
          <TextField
            label="Ingredient Name"
            value={ingName}
            onChange={(e) => setIngName(e.target.value)}
            fullWidth
            size="small"
          />
          <TextField
            label="Available Stock"
            type="number"
            value={ingStock}
            onChange={(e) => setIngStock(parseFloat(e.target.value) || 0)}
            fullWidth
            size="small"
          />
          <FormControl fullWidth size="small">
            <InputLabel>Measurement Unit</InputLabel>
            <Select
              value={ingUnit}
              label="Measurement Unit"
              onChange={(e) => setIngUnit(e.target.value)}
            >
              <MenuItem value="kg">kg (Kilogram)</MenuItem>
              <MenuItem value="g">g (Gram)</MenuItem>
              <MenuItem value="litre">litre (Litre)</MenuItem>
              <MenuItem value="units">units (Items count)</MenuItem>
            </Select>
          </FormControl>
          <TextField
            label="Minimum Alert Limit"
            type="number"
            value={ingMinStock}
            onChange={(e) => setIngMinStock(parseFloat(e.target.value) || 0)}
            fullWidth
            size="small"
          />
        </DialogContent>
        <DialogActions sx={{ p: 2 }}>
          <Button onClick={() => setOpenIngForm(false)} color="inherit">Cancel</Button>
          <Button
            variant="contained"
            onClick={handleSaveIngredient}
            sx={{ bgcolor: '#ac2d00', '&:hover': { bgcolor: '#872100' }, fontWeight: 700 }}
          >
            Save Stock
          </Button>
        </DialogActions>
      </Dialog>
    </Box>
  );
 };
--- a/src/components/admin/ReservationsView.tsx
+++ b/src/components/admin/ReservationsView.tsx
@ -0,0 +1,338 @@
 import React, { useState, useEffect } from 'react';
 import {
  Box,
  Typography,
  Button,
  TextField,
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  FormControl,
  InputLabel,
  Select,
  MenuItem,
  CircularProgress,
  Alert,
  Chip,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Paper,
  Snackbar,
 } from '@mui/material';
 import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
 import AddIcon from '@mui/icons-material/Add';
 import RefreshIcon from '@mui/icons-material/Refresh';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import { api } from '../../services/api';
 export const ReservationsView: React.FC = () => {
  const [selectedDate, setSelectedDate] = useState<string>(new Date().toISOString().split('T')[0]);
  const [reservations, setReservations] = useState<any[]>([]);
  const [loading, setLoading] = useState<boolean>(false);
  const [error, setError] = useState<string | null>(null);
  // Form dialog states
  const [openForm, setOpenForm] = useState<boolean>(false);
  const [resName, setResName] = useState<string>('');
  const [resPhone, setResPhone] = useState<string>(''); // Required by backend
  const [resSize, setResSize] = useState<number>(2);
  const [resTable, setResTable] = useState<number>(3);
  const [resTime, setResTime] = useState<string>('19:00');
  const [resDate, setResDate] = useState<string>(new Date().toISOString().split('T')[0]);
  // Warning toast states
  const [toastOpen, setToastOpen] = useState<boolean>(false);
  const [toastMessage, setToastMessage] = useState<string>('');
  const fetchReservations = async () => {
    setLoading(true);
    setError(null);
    try {
      const data = await api.getReservations(selectedDate);
      setReservations(Array.isArray(data) ? data : []);
    } catch (err: any) {
      setError(err.message || 'Failed to fetch reservations');
    } finally {
      setLoading(false);
    }
  };
  useEffect(() => {
    fetchReservations();
  }, [selectedDate]);
  const handleCreateReservation = async () => {
    setError(null);
    try {
      // Backend schema: { table_id, customer_name, customer_phone, party_size, reservation_time (ISO datetime) }
      const reservationTime = new Date(`${resDate}T${resTime}:00`).toISOString();
      const res = await api.createReservation({
        table_id: resTable,
        customer_name: resName,
        customer_phone: resPhone || '0000000000',
        party_size: resSize,
        reservation_time: reservationTime,
      });
      setOpenForm(false);
      // Backend returns { reservation, warnings: ConflictWarning[] }
      if (res.warnings && res.warnings.length > 0) {
        setToastMessage(`⚠️ Warning: ${res.warnings[0].message || res.warnings[0]}`);
        setToastOpen(true);
      } else {
        setToastMessage('🎉 Reservation booked successfully!');
        setToastOpen(true);
      }
      // Clear form inputs
      setResName('');
      setResPhone('');
      setResSize(2);
      setResTable(3);
      setResTime('19:00');
      // Refresh list
      fetchReservations();
    } catch (err: any) {
      setError(err.message || 'Failed to create reservation');
    }
  };
  const handleUpdateStatus = async (id: string, status: 'confirmed' | 'seated' | 'cancelled' | 'no_show') => {
    try {
      await api.updateReservationStatus(id, status);
      setReservations((prev) =>
        prev.map((r) => (r.id === id ? { ...r, status } : r))
      );
    } catch (err: any) {
      alert(err.message || 'Failed to update reservation status');
    }
  };
  const getStatusColor = (status: string) => {
    switch (status) {
      case 'confirmed':
        return 'info';
      case 'seated':
        return 'success';
      case 'cancelled':
        return 'error';
      case 'no_show':
        return 'default';
      default:
        return 'default';
    }
  };
  return (
    <Box>
      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 3 }}>
        <Box>
          <Typography variant="h5" sx={{ fontWeight: 800, color: '#ac2d00' }}>
            Table Reservation Book
          </Typography>
          <Typography variant="body2" color="text.secondary">
            Manage advance table bookings and track check-ins.
          </Typography>
        </Box>
        <Box sx={{ display: 'flex', gap: 1.5 }}>
          <TextField
            type="date"
            size="small"
            value={selectedDate}
            onChange={(e) => setSelectedDate(e.target.value)}
            slotProps={{
              input: {
                startAdornment: <CalendarMonthIcon sx={{ mr: 1, color: '#ac2d00' }} />
              }
            }}
          />
          <Button
            variant="contained"
            onClick={() => setOpenForm(true)}
            startIcon={<AddIcon />}
            sx={{ bgcolor: '#ac2d00', '&:hover': { bgcolor: '#872100' }, fontWeight: 700 }}
          >
            New Booking
          </Button>
          <Button
            variant="outlined"
            onClick={fetchReservations}
            startIcon={<RefreshIcon />}
            sx={{ borderColor: '#ac2d00', color: '#ac2d00', '&:hover': { borderColor: '#872100', bgcolor: 'rgba(172,45,0,0.04)' } }}
          >
            Refresh
          </Button>
        </Box>
      </Box>
      {error && <Alert severity="error" sx={{ mb: 3 }}>{error}</Alert>}
      {loading ? (
        <Box sx={{ display: 'flex', justifyContent: 'center', py: 8 }}>
          <CircularProgress color="primary" />
        </Box>
      ) : (
        <TableContainer component={Paper} elevation={0} sx={{ border: '1.5px solid #e2e2e2', borderRadius: '16px' }}>
          <Table>
            <TableHead sx={{ bgcolor: '#fbfbfb' }}>
              <TableRow>
                <TableCell sx={{ fontWeight: 800 }}>Diner Name</TableCell>
                <TableCell sx={{ fontWeight: 800 }}>Guests</TableCell>
                <TableCell sx={{ fontWeight: 800 }}>Table</TableCell>
                <TableCell sx={{ fontWeight: 800 }}>Time</TableCell>
                <TableCell sx={{ fontWeight: 800 }}>Status</TableCell>
                <TableCell sx={{ fontWeight: 800 }} align="right">Actions</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {reservations.length === 0 ? (
                <TableRow>
                  <TableCell colSpan={6} align="center" sx={{ py: 6, color: 'text.secondary' }}>
                    No bookings found for {selectedDate}.
                  </TableCell>
                </TableRow>
              ) : (
                reservations.map((res) => (
                  <TableRow key={res.id}>
                    <TableCell sx={{ fontWeight: 700 }}>{res.customer_name || res.name}</TableCell>
                    <TableCell sx={{ fontWeight: 600 }}>{res.party_size || res.size} Pax</TableCell>
                    <TableCell sx={{ fontWeight: 600 }}>Table {res.table_id || res.tableId}</TableCell>
                    <TableCell sx={{ fontWeight: 600 }}>⏰ {res.reservation_time ? new Date(res.reservation_time).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : res.time}</TableCell>
                    <TableCell>
                      <Chip
                        label={res.status.toUpperCase()}
                        size="small"
                        color={getStatusColor(res.status) as any}
                        sx={{ fontWeight: 800, fontSize: '0.65rem' }}
                      />
                    </TableCell>
                    <TableCell align="right" sx={{ display: 'flex', gap: 1, justifyContent: 'flex-end' }}>
                      {res.status === 'confirmed' && (
                        <>
                          <Button
                            variant="contained"
                            size="small"
                            color="success"
                            onClick={() => handleUpdateStatus(res.id, 'seated')}
                            sx={{ fontWeight: 700 }}
                          >
                            Seat
                          </Button>
                          <Button
                            variant="outlined"
                            size="small"
                            color="error"
                            onClick={() => handleUpdateStatus(res.id, 'cancelled')}
                            sx={{ fontWeight: 700 }}
                          >
                            Cancel
                          </Button>
                        </>
                      )}
                      {res.status === 'seated' && (
                        <CheckCircleIcon color="success" />
                      )}
                    </TableCell>
                  </TableRow>
                ))
              )}
            </TableBody>
          </Table>
        </TableContainer>
      )}
      {/* Booking Form Dialog */}
      <Dialog open={openForm} onClose={() => setOpenForm(false)} maxWidth="xs" fullWidth>
        <DialogTitle sx={{ fontWeight: 800 }}>Create New Booking</DialogTitle>
        <DialogContent sx={{ pt: 2, display: 'flex', flexDirection: 'column', gap: 2 }}>
          <TextField
            label="Customer Name"
            value={resName}
            onChange={(e) => setResName(e.target.value)}
            fullWidth
            size="small"
          />
          <TextField
            label="Customer Phone"
            value={resPhone}
            onChange={(e) => setResPhone(e.target.value)}
            fullWidth
            size="small"
            placeholder="e.g. 9876543210"
          />
          <TextField
            label="Number of Guests"
            type="number"
            value={resSize}
            onChange={(e) => setResSize(parseInt(e.target.value) || 2)}
            fullWidth
            size="small"
          />
          <FormControl fullWidth size="small">
            <InputLabel>Assign Table</InputLabel>
            <Select
              value={resTable}
              label="Assign Table"
              onChange={(e) => setResTable(Number(e.target.value))}
            >
              {[1, 2, 3, 4, 5, 8, 12].map((num) => (
                <MenuItem key={num} value={num}>Table {num}</MenuItem>
              ))}
            </Select>
          </FormControl>
          <TextField
            label="Reservation Time"
            type="time"
            value={resTime}
            onChange={(e) => setResTime(e.target.value)}
            fullWidth
            size="small"
          />
          <TextField
            label="Reservation Date"
            type="date"
            value={resDate}
            onChange={(e) => setResDate(e.target.value)}
            fullWidth
            size="small"
          />
        </DialogContent>
        <DialogActions sx={{ p: 2 }}>
          <Button onClick={() => setOpenForm(false)} color="inherit">Cancel</Button>
          <Button
            variant="contained"
            onClick={handleCreateReservation}
            sx={{ bgcolor: '#ac2d00', '&:hover': { bgcolor: '#872100' }, fontWeight: 700 }}
          >
            Create Reservation
          </Button>
        </DialogActions>
      </Dialog>
      {/* Conflicted Warning Toast */}
      <Snackbar
        open={toastOpen}
        autoHideDuration={6000}
        onClose={() => setToastOpen(false)}
        message={toastMessage}
        action={
          <Button color="inherit" size="small" onClick={() => setToastOpen(false)}>
            Dismiss
          </Button>
        }
      />
    </Box>
  );
 };
--- a/src/components/admin/StaffLoginModal.tsx
+++ b/src/components/admin/StaffLoginModal.tsx
@ -0,0 +1,166 @@
 import React, { useState } from 'react';
 import {
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  Typography,
  TextField,
  Button,
  Box,
  Alert,
  Chip,
  CircularProgress,
 } from '@mui/material';
 import LockIcon from '@mui/icons-material/Lock';
 import BadgeIcon from '@mui/icons-material/Badge';
 import { api } from '../../services/api';
 interface StaffLoginModalProps {
  open: boolean;
  onClose: () => void;
  onLoginSuccess: (role: 'kitchen' | 'manager') => void;
 }
 export const StaffLoginModal: React.FC<StaffLoginModalProps> = ({
  open,
  onClose,
  onLoginSuccess,
 }) => {
  const [username, setUsername] = useState<string>('');
  const [password, setPassword] = useState<string>('');
  const [loading, setLoading] = useState<boolean>(false);
  const [error, setError] = useState<string>('');
  const handleLogin = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!username || !password) {
      setError('Please provide both username and password.');
      return;
    }
    setLoading(true);
    setError('');
    try {
      await api.login(username, password);
      // Determine role based on JWT claims or username
      const role = username.includes('manager') ? 'manager' : 'kitchen';
      onLoginSuccess(role);
      onClose();
    } catch (err: any) {
      setError(err.message || 'Login failed. Please check your credentials.');
    } finally {
      setLoading(false);
    }
  };
  const fillCredentials = (user: string, pass: string) => {
    setUsername(user);
    setPassword(pass);
  };
  return (
    <Dialog open={open} onClose={onClose} maxWidth="xs" fullWidth>
      <DialogTitle sx={{ textAlign: 'center', pt: 3 }}>
        <Box
          sx={{
            width: 48,
            height: 48,
            borderRadius: '50%',
            bgcolor: '#ffdbd1',
            color: '#ac2d00',
            display: 'inline-flex',
            alignItems: 'center',
            justifyContent: 'center',
            mb: 1,
          }}
        >
          <LockIcon />
        </Box>
        <Typography variant="h6" sx={{ fontWeight: 800, color: '#1a1c1c' }}>
          Staff & Admin Portal Login
        </Typography>
        <Typography variant="caption" sx={{ color: '#5b4139' }}>
          Authorized Restaurant Personnel Only
        </Typography>
      </DialogTitle>
      <DialogContent dividers>
        <form onSubmit={handleLogin}>
          {error && (
            <Alert severity="error" sx={{ mb: 2, fontWeight: 600 }}>
              {error}
            </Alert>
          )}
          <Box sx={{ mb: 2.5 }}>
            <Typography variant="caption" sx={{ fontWeight: 800, color: '#546067', mb: 1, display: 'block' }}>
              QUICK AUTOFILL DEMO LOGIN:
            </Typography>
            <Box sx={{ display: 'flex', gap: 1 }}>
              <Chip
                icon={<BadgeIcon fontSize="small" />}
                label="Manager Account"
                clickable
                onClick={() => fillCredentials('manager@test.com', 'managerpass')}
                sx={{ fontWeight: 700, flex: 1 }}
              />
              <Chip
                icon={<BadgeIcon fontSize="small" />}
                label="Chef / Waiter Account"
                clickable
                onClick={() => fillCredentials('waiter@test.com', 'waiterpass')}
                sx={{ fontWeight: 700, flex: 1 }}
              />
            </Box>
          </Box>
          <TextField
            label="Email Address / Username"
            type="email"
            placeholder="manager@test.com"
            fullWidth
            value={username}
            onChange={(e) => setUsername(e.target.value)}
            sx={{ mb: 2 }}
            disabled={loading}
          />
          <TextField
            label="Password"
            type="password"
            placeholder="••••••••"
            fullWidth
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            sx={{ mb: 2.5 }}
            disabled={loading}
          />
          <Button
            type="submit"
            fullWidth
            variant="contained"
            size="large"
            disabled={loading}
            sx={{
              py: 1.5,
              borderRadius: '9999px',
              fontWeight: 800,
              bgcolor: '#ac2d00',
              '&:hover': { bgcolor: '#872100' },
            }}
          >
            {loading ? <CircularProgress size={24} color="inherit" /> : 'Access Portal'}
          </Button>
        </form>
      </DialogContent>
      <DialogActions sx={{ p: 2, justifyContent: 'center' }}>
        <Button size="small" onClick={onClose} color="inherit" disabled={loading}>
          Cancel & Return to Dining
        </Button>
      </DialogActions>
    </Dialog>
  );
 };
--- a/src/components/admin/StaffShiftsView.tsx
+++ b/src/components/admin/StaffShiftsView.tsx
@ -0,0 +1,333 @@
 import React, { useState, useEffect } from 'react';
 import {
  Box,
  Typography,
  Grid,
  Button,
  TextField,
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  FormControl,
  InputLabel,
  Select,
  MenuItem,
  CircularProgress,
  Alert,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Paper,
  Chip,
 } from '@mui/material';
 import AddIcon from '@mui/icons-material/Add';
 import RefreshIcon from '@mui/icons-material/Refresh';
 import LogoutIcon from '@mui/icons-material/Logout';
 import LoginIcon from '@mui/icons-material/Login';
 import { api } from '../../services/api';
 export const StaffShiftsView: React.FC = () => {
  const [staff, setStaff] = useState<any[]>([]);
  const [shifts, setShifts] = useState<any[]>([]);
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<string | null>(null);
  // Staff Form
  const [openStaffForm, setOpenStaffForm] = useState<boolean>(false);
  const [staffName, setStaffName] = useState<string>('');
  const [staffEmail, setStaffEmail] = useState<string>('');
  const [staffPassword, setStaffPassword] = useState<string>('');
  const [staffRoleId, setStaffRoleId] = useState<number>(2); // default waiter role_id
  const [staffRole, setStaffRole] = useState<string>('waiter'); // display only
  const [roles, setRoles] = useState<any[]>([]); // RoleRead[] from backend
  const loadShiftsAndStaff = async () => {
    setLoading(true);
    setError(null);
    try {
      const staffData = await api.getStaff();
      setStaff(Array.isArray(staffData) ? staffData : []);
      const shiftsData = await api.getShifts();
      setShifts(Array.isArray(shiftsData) ? shiftsData : []);
      // Load roles for the form dropdown
      try {
        const rolesData = await api.getRoles();
        setRoles(Array.isArray(rolesData) ? rolesData : []);
      } catch {
        // Roles not critical, ignore failure
      }
    } catch (err: any) {
      setError(err.message || 'Failed to load shifts/staff data');
    } finally {
      setLoading(false);
    }
  };
  useEffect(() => {
    loadShiftsAndStaff();
  }, []);
  const handleCreateStaff = async () => {
    setError(null);
    if (!staffPassword || staffPassword.length < 8) {
      setError('Password must be at least 8 characters');
      return;
    }
    try {
      // Backend schema: { full_name, email, password, role_id (int), phone? }
      const roleId = roles.find(r => r.name === staffRole)?.id || staffRoleId;
      const res = await api.createStaff({
        full_name: staffName,
        email: staffEmail,
        password: staffPassword,
        role_id: roleId,
      });
      setStaff(prev => [...prev, res]);
      setOpenStaffForm(false);
      setStaffName('');
      setStaffEmail('');
      setStaffPassword('');
      setStaffRole('waiter');
    } catch (err: any) {
      setError(err.message || 'Failed to create staff member');
    }
  };
  const handleClockIn = async (shiftId: string) => {
    try {
      // Backend returns ShiftRead directly (not { shift })
      const res = await api.clockIn(shiftId);
      setShifts(prev => prev.map(s => s.id === shiftId ? (res.shift || res) : s));
      alert('Clock-in registered successfully!');
    } catch (err: any) {
      alert(err.message || 'Failed to clock in');
    }
  };
  const handleClockOut = async (shiftId: string) => {
    try {
      // Backend returns ShiftRead directly (not { shift })
      const res = await api.clockOut(shiftId);
      setShifts(prev => prev.map(s => s.id === shiftId ? (res.shift || res) : s));
      alert('Clock-out registered successfully!');
    } catch (err: any) {
      alert(err.message || 'Failed to clock out');
    }
  };
  return (
    <Box>
      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 3 }}>
        <Box>
          <Typography variant="h5" sx={{ fontWeight: 800, color: '#ac2d00' }}>
            Staff Directory & Shifts
          </Typography>
          <Typography variant="body2" color="text.secondary">
            Manage employee rosters, register work shifts, and track daily clock-in/clock-out attendance.
          </Typography>
        </Box>
        <Box sx={{ display: 'flex', gap: 1 }}>
          <Button
            variant="contained"
            onClick={() => setOpenStaffForm(true)}
            startIcon={<AddIcon />}
            sx={{ bgcolor: '#ac2d00', '&:hover': { bgcolor: '#872100' }, fontWeight: 700 }}
          >
            Add Team Member
          </Button>
          <Button
            variant="outlined"
            onClick={loadShiftsAndStaff}
            startIcon={<RefreshIcon />}
            sx={{ borderColor: '#ac2d00', color: '#ac2d00', '&:hover': { borderColor: '#872100', bgcolor: 'rgba(172,45,0,0.04)' } }}
          >
            Refresh
          </Button>
        </Box>
      </Box>
      {error && <Alert severity="error" sx={{ mb: 3 }}>{error}</Alert>}
      {loading ? (
        <Box sx={{ display: 'flex', justifyContent: 'center', py: 8 }}><CircularProgress /></Box>
      ) : (
        <Grid container spacing={3}>
          {/* Left panel: Staff Roster */}
          <Grid size={{ xs: 12, md: 5 }}>
            <Typography variant="subtitle1" sx={{ fontWeight: 800, mb: 1.5 }}>
              Employees Directory
            </Typography>
            <TableContainer component={Paper} elevation={0} sx={{ border: '1.5px solid #e2e2e2', borderRadius: '16px' }}>
              <Table size="small">
                <TableHead sx={{ bgcolor: '#fbfbfb' }}>
                  <TableRow>
                    <TableCell sx={{ fontWeight: 800 }}>Name</TableCell>
                    <TableCell sx={{ fontWeight: 800 }}>Role</TableCell>
                  </TableRow>
                </TableHead>
                <TableBody>
                  {staff.map((member) => (
                    <TableRow key={member.id}>
                      <TableCell sx={{ fontWeight: 700 }}>
                        {member.full_name || member.name}
                        <Typography variant="caption" sx={{ display: 'block', color: 'text.secondary' }}>
                          {member.email}
                        </Typography>
                      </TableCell>
                      <TableCell>
                        <Chip
                          label={(member.role?.name || member.role || 'staff').toUpperCase()}
                          size="small"
                          color={(member.role?.name || member.role) === 'manager' ? 'primary' : 'secondary'}
                          sx={{ fontWeight: 850, fontSize: '0.6rem' }}
                        />
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </TableContainer>
          </Grid>
          {/* Right panel: Shifts List */}
          <Grid size={{ xs: 12, md: 7 }}>
            <Typography variant="subtitle1" sx={{ fontWeight: 800, mb: 1.5 }}>
              Attendance Roster
            </Typography>
            {shifts.length === 0 ? (
              <Paper elevation={0} sx={{ p: 4, textAlign: 'center', border: '1.5px dashed #e2e2e2', borderRadius: '16px' }}>
                <Typography variant="body2" color="text.secondary">
                  No shifts scheduled or logged for today.
                </Typography>
              </Paper>
            ) : (
              <TableContainer component={Paper} elevation={0} sx={{ border: '1.5px solid #e2e2e2', borderRadius: '16px' }}>
                <Table size="small">
                  <TableHead sx={{ bgcolor: '#fbfbfb' }}>
                    <TableRow>
                      <TableCell sx={{ fontWeight: 800 }}>Staff Name</TableCell>
                      <TableCell sx={{ fontWeight: 800 }}>Clock In</TableCell>
                      <TableCell sx={{ fontWeight: 800 }}>Clock Out</TableCell>
                      <TableCell sx={{ fontWeight: 800 }}>Status</TableCell>
                      <TableCell sx={{ fontWeight: 800 }} align="right">Actions</TableCell>
                    </TableRow>
                  </TableHead>
                  <TableBody>
                    {shifts.map((shift) => (
                      <TableRow key={shift.id}>
                        <TableCell sx={{ fontWeight: 700 }}>
                          {shift.staffName || `Staff #${shift.staff_id || shift.id}`}
                          <Typography variant="caption" sx={{ display: 'block', color: 'text.secondary', fontSize: '0.65rem' }}>
                            {shift.shift_start ? new Date(shift.shift_start).toLocaleDateString() : shift.date}
                          </Typography>
                        </TableCell>
                        <TableCell sx={{ fontWeight: 600 }}>
                          {shift.attendance?.time_in ? new Date(shift.attendance.time_in).toLocaleTimeString([], {hour:'2-digit',minute:'2-digit'}) : (shift.clockIn || '---')}
                        </TableCell>
                        <TableCell sx={{ fontWeight: 600 }}>
                          {shift.attendance?.time_out ? new Date(shift.attendance.time_out).toLocaleTimeString([], {hour:'2-digit',minute:'2-digit'}) : (shift.clockOut || '---')}
                        </TableCell>
                        <TableCell>
                          <Chip
                            label={(shift.status || 'scheduled').toUpperCase()}
                            size="small"
                            color={shift.status === 'in_progress' || shift.status === 'active' ? 'success' : 'default'}
                            sx={{ fontWeight: 800, fontSize: '0.6rem' }}
                          />
                        </TableCell>
                        <TableCell align="right">
                          {(!shift.attendance?.time_in && !shift.clockIn) && (
                            <Button
                              variant="contained"
                              size="small"
                              startIcon={<LoginIcon />}
                              onClick={() => handleClockIn(shift.id)}
                              sx={{ bgcolor: '#ac2d00', '&:hover': { bgcolor: '#872100' }, fontWeight: 700 }}
                            >
                              Clock In
                            </Button>
                          )}
                          {(shift.attendance?.time_in || shift.clockIn) && (!shift.attendance?.time_out && !shift.clockOut) && (
                            <Button
                              variant="outlined"
                              size="small"
                              color="error"
                              startIcon={<LogoutIcon />}
                              onClick={() => handleClockOut(shift.id)}
                              sx={{ fontWeight: 700 }}
                            >
                              Clock Out
                            </Button>
                          )}
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </TableContainer>
            )}
          </Grid>
        </Grid>
      )}
      {/* Staff Dialog */}
      <Dialog open={openStaffForm} onClose={() => setOpenStaffForm(false)} maxWidth="xs" fullWidth>
        <DialogTitle sx={{ fontWeight: 800 }}>Add Employee</DialogTitle>
        <DialogContent sx={{ pt: 2, display: 'flex', flexDirection: 'column', gap: 2 }}>
          <TextField
            label="Full Name"
            value={staffName}
            onChange={(e) => setStaffName(e.target.value)}
            fullWidth
            size="small"
          />
          <TextField
            label="Email Address"
            value={staffEmail}
            onChange={(e) => setStaffEmail(e.target.value)}
            fullWidth
            size="small"
          />
          <TextField
            label="Password (min 8 chars)"
            type="password"
            value={staffPassword}
            onChange={(e) => setStaffPassword(e.target.value)}
            fullWidth
            size="small"
            helperText="Will be used for staff portal login"
          />
          <FormControl fullWidth size="small">
            <InputLabel>Portal Role</InputLabel>
            <Select
              value={staffRole}
              label="Portal Role"
              onChange={(e) => setStaffRole(e.target.value)}
            >
              <MenuItem value="waiter">Waiter (Floor Staff)</MenuItem>
              <MenuItem value="chef">Chef (Kitchen Staff)</MenuItem>
              <MenuItem value="cashier">Cashier (Billing Staff)</MenuItem>
              <MenuItem value="manager">Manager (Admin Access)</MenuItem>
            </Select>
          </FormControl>
        </DialogContent>
        <DialogActions sx={{ p: 2 }}>
          <Button onClick={() => setOpenStaffForm(false)} color="inherit">Cancel</Button>
          <Button
            variant="contained"
            onClick={handleCreateStaff}
            sx={{ bgcolor: '#ac2d00', '&:hover': { bgcolor: '#872100' }, fontWeight: 700 }}
          >
            Add Member
          </Button>
        </DialogActions>
      </Dialog>
    </Box>
  );
 };
--- a/src/components/admin/SuppliersView.tsx
+++ b/src/components/admin/SuppliersView.tsx
@ -0,0 +1,513 @@
 import React, { useState, useEffect } from 'react';
 import {
  Box,
  Typography,
  Grid,
  Card,
  CardContent,
  Button,
  TextField,
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  FormControl,
  InputLabel,
  Select,
  MenuItem,
  CircularProgress,
  Alert,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Paper,
  IconButton,
  Chip,
  List,
  ListItem,
  ListItemText,
  Divider,
 } from '@mui/material';
 import DeleteIcon from '@mui/icons-material/Delete';
 import AddIcon from '@mui/icons-material/Add';
 import RefreshIcon from '@mui/icons-material/Refresh';
 import SendIcon from '@mui/icons-material/Send';
 import Inventory2Icon from '@mui/icons-material/Inventory2';
 import LocalShippingIcon from '@mui/icons-material/LocalShipping';
 import { api } from '../../services/api';
 export const SuppliersView: React.FC = () => {
  const [suppliers, setSuppliers] = useState<any[]>([]);
  const [purchaseOrders, setPurchaseOrders] = useState<any[]>([]);
  const [ingredients, setIngredients] = useState<any[]>([]);
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<string | null>(null);
  // Supplier Form
  const [openSuppForm, setOpenSuppForm] = useState<boolean>(false);
  const [suppName, setSuppName] = useState<string>('');
  const [suppPhone, setSuppPhone] = useState<string>('');
  const [suppEmail, setSuppEmail] = useState<string>('');
  const [suppAddress, setSuppAddress] = useState<string>('');
  // Purchase Order Form
  const [openPoForm, setOpenPoForm] = useState<boolean>(false);
  const [selectedSupplierId, setSelectedSupplierId] = useState<string>('');
  // Backend schema: { ingredient_id, quantity, unit_price }
  const [poItems, setPoItems] = useState<{
    price: any;
    qty: any; ingredient_id: number; quantity: number; unit_price: number
  }[]>([]);
  // Adding single item to PO
  const [addIngId, setAddIngId] = useState<string>('');
  const [addIngQty, setAddIngQty] = useState<number>(10);
  const [addIngPrice, setAddIngPrice] = useState<number>(100);
  const loadData = async () => {
    setLoading(true);
    setError(null);
    try {
      const suppliersData = await api.getSuppliers();
      setSuppliers(Array.isArray(suppliersData) ? suppliersData : []);
      const poData = await api.getPurchaseOrders();
      setPurchaseOrders(Array.isArray(poData) ? poData : []);
      const ingredientsData = await api.getIngredients();
      setIngredients(Array.isArray(ingredientsData) ? ingredientsData : []);
    } catch (err: any) {
      setError(err.message || 'Failed to load suppliers/PO data');
    } finally {
      setLoading(false);
    }
  };
  useEffect(() => {
    loadData();
  }, []);
  const handleCreateSupplier = async () => {
    setError(null);
    try {
      // Backend schema: { name, contact_phone?, email? } — no address field
      const res = await api.createSupplier({
        name: suppName,
        contact_phone: suppPhone || undefined,
        email: suppEmail || undefined,
      });
      setSuppliers(prev => [...prev, res]);
      setOpenSuppForm(false);
      setSuppName('');
      setSuppPhone('');
      setSuppEmail('');
      setSuppAddress('');
    } catch (err: any) {
      setError(err.message || 'Failed to create supplier');
    }
  };
  const handleDeleteSupplier = async (id: string) => {
    if (!window.confirm('Delete this supplier?')) return;
    try {
      await api.deleteSupplier(id);
      setSuppliers(prev => prev.filter(s => s.id !== id));
    } catch (err: any) {
      alert(err.message || 'Failed to delete supplier');
    }
  };
  const handleAddPoItem = () => {
    if (!addIngId || addIngQty <= 0 || addIngPrice <= 0) return;
    if (poItems.some(i => i.ingredient_id === Number(addIngId))) {
      alert('Ingredient already added to order list!');
      return;
    }
    // Backend schema: { ingredient_id, quantity, unit_price }
    setPoItems(prev => [...prev, { ingredient_id: Number(addIngId), quantity: addIngQty, unit_price: addIngPrice }]);
    setAddIngId('');
  };
  const handleRemovePoItem = (ingId: number) => {
    setPoItems(prev => prev.filter(item => item.ingredient_id !== ingId));
  };
  const handleCreatePurchaseOrder = async () => {
    if (!selectedSupplierId || poItems.length === 0) {
      alert('Choose supplier and add at least 1 item.');
      return;
    }
    setError(null);
    try {
      // Backend schema: supplier_id (int), items: [{ingredient_id, quantity, unit_price}]
      const po = await api.createPurchaseOrder(Number(selectedSupplierId), poItems);
      setPurchaseOrders(prev => [po, ...prev]);
      setOpenPoForm(false);
      setSelectedSupplierId('');
      setPoItems([]);
    } catch (err: any) {
      setError(err.message || 'Failed to create purchase order');
    }
  };
  const handleUpdatePOStatus = async (id: string, status: 'draft' | 'sent' | 'received' | 'cancelled') => {
    try {
      const updated = await api.updatePurchaseOrderStatus(id, status);
      setPurchaseOrders(prev => prev.map(p => p.id === id ? updated : p));
      if (status === 'received') {
        alert('Stock received and inventory levels increased!');
      }
    } catch (err: any) {
      alert(err.message || 'Failed to update PO status');
    }
  };
  const getPoStatusColor = (status: string) => {
    switch (status) {
      case 'draft':
        return 'default';
      case 'sent':
        return 'info';
      case 'received':
        return 'success';
      case 'cancelled':
        return 'error';
      default:
        return 'default';
    }
  };
  return (
    <Box>
      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 3 }}>
        <Box>
          <Typography variant="h5" sx={{ fontWeight: 800, color: '#ac2d00' }}>
            Suppliers & Purchase Orders (PO)
          </Typography>
          <Typography variant="body2" color="text.secondary">
            Manage raw ingredient merchants and draft/dispatch purchase orders. Receiving POs bumps stock levels.
          </Typography>
        </Box>
        <Box sx={{ display: 'flex', gap: 1 }}>
          <Button
            variant="contained"
            onClick={() => setOpenPoForm(true)}
            startIcon={<LocalShippingIcon />}
            sx={{ bgcolor: '#ac2d00', '&:hover': { bgcolor: '#872100' }, fontWeight: 700 }}
          >
            Create PO
          </Button>
          <Button
            variant="outlined"
            onClick={() => setOpenSuppForm(true)}
            startIcon={<AddIcon />}
            sx={{ borderColor: '#ac2d00', color: '#ac2d00', '&:hover': { borderColor: '#872100', bgcolor: 'rgba(172,45,0,0.04)' } }}
          >
            Add Merchant
          </Button>
          <Button
            variant="outlined"
            onClick={loadData}
            startIcon={<RefreshIcon />}
            sx={{ borderColor: '#ac2d00', color: '#ac2d00', '&:hover': { borderColor: '#872100', bgcolor: 'rgba(172,45,0,0.04)' } }}
          >
            Refresh
          </Button>
        </Box>
      </Box>
      {error && <Alert severity="error" sx={{ mb: 3 }}>{error}</Alert>}
      {loading ? (
        <Box sx={{ display: 'flex', justifyContent: 'center', py: 8 }}><CircularProgress /></Box>
      ) : (
        <Grid container spacing={3}>
          {/* Left panel: Suppliers List */}
          <Grid size={{ xs: 12, md: 5 }}>
            <Typography variant="subtitle1" sx={{ fontWeight: 800, mb: 1.5 }}>
              Supplier Merchants List
            </Typography>
            <TableContainer component={Paper} elevation={0} sx={{ border: '1.5px solid #e2e2e2', borderRadius: '16px' }}>
              <Table size="small">
                <TableHead sx={{ bgcolor: '#fbfbfb' }}>
                  <TableRow>
                    <TableCell sx={{ fontWeight: 800 }}>Name</TableCell>
                    <TableCell sx={{ fontWeight: 800 }}>Contact</TableCell>
                    <TableCell sx={{ fontWeight: 800 }} align="right">Action</TableCell>
                  </TableRow>
                </TableHead>
                <TableBody>
                  {suppliers.map((supp) => (
                    <TableRow key={supp.id}>
                      <TableCell sx={{ fontWeight: 700 }}>{supp.name}</TableCell>
                      <TableCell sx={{ fontSize: '0.8rem' }}>
                        📞 {supp.contact_phone || supp.phone || 'N/A'}<br />✉️ {supp.email || 'N/A'}
                      </TableCell>
                      <TableCell align="right">
                        <IconButton size="small" color="error" onClick={() => handleDeleteSupplier(supp.id)}>
                          <DeleteIcon fontSize="small" />
                        </IconButton>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </TableContainer>
          </Grid>
          {/* Right panel: Purchase Orders List */}
          <Grid size={{ xs: 12, md: 7 }}>
            <Typography variant="subtitle1" sx={{ fontWeight: 800, mb: 1.5 }}>
              Purchase Orders Ledger
            </Typography>
            {purchaseOrders.length === 0 ? (
              <Paper elevation={0} sx={{ p: 4, textAlign: 'center', border: '1.5px dashed #e2e2e2', borderRadius: '16px' }}>
                <Typography variant="body2" color="text.secondary">
                  No purchase orders placed yet.
                </Typography>
              </Paper>
            ) : (
              <Grid container spacing={2}>
                {purchaseOrders.map((po) => {
                  const merchant = suppliers.find(s => s.id === (po.supplier_id || po.supplierId));
                  const total = po.items?.reduce((acc: number, item: any) => acc + (Number(item.unit_price || item.price || 0) * Number(item.quantity || item.qty || 0)), 0) || 0;
                  return (
                    <Grid size={{ xs: 12 }} key={po.id}>
                      <Card elevation={0} sx={{ border: '1.5px solid #e2e2e2', borderRadius: '16px' }}>
                        <CardContent sx={{ pb: 1 }}>
                          <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 1 }}>
                            <Typography sx={{ fontWeight: 900 }}>
                              PO #{po.id}
                            </Typography>
                            <Chip
                              label={po.status.toUpperCase()}
                              color={getPoStatusColor(po.status) as any}
                              size="small"
                              sx={{ fontWeight: 800 }}
                            />
                          </Box>
                          <Typography variant="body2" sx={{ fontWeight: 600 }}>
                            Merchant: {merchant ? merchant.name : 'Unknown Merchant'}
                          </Typography>
                          <Typography variant="body2" color="text.secondary" sx={{ mt: 0.5 }}>
                            Items Ordered: {po.items?.map((it: any) => {
                              const ingId = it.ingredient_id || it.ingredientId;
                              const ingredient = ingredients.find((ing: any) => ing.id === ingId);
                              return `${it.quantity || it.qty}x ${ingredient ? ingredient.name : `Ing#${ingId}`}`;
                            }).join(', ')}
                          </Typography>
                          <Typography variant="subtitle2" sx={{ mt: 1.5, fontWeight: 800, color: '#ac2d00' }}>
                            Total Estimate: ₹{total.toFixed(2)}
                          </Typography>
                        </CardContent>
                        <Box sx={{ p: 2, pt: 0, display: 'flex', justifyContent: 'flex-end', gap: 1 }}>
                          {po.status === 'draft' && (
                            <Button
                              variant="contained"
                              size="small"
                              startIcon={<SendIcon />}
                              onClick={() => handleUpdatePOStatus(po.id, 'sent')}
                              sx={{ bgcolor: '#ac2d00', '&:hover': { bgcolor: '#872100' }, fontWeight: 700 }}
                            >
                              Dispatch PO
                            </Button>
                          )}
                          {po.status === 'sent' && (
                            <>
                              <Button
                                variant="contained"
                                size="small"
                                color="success"
                                startIcon={<Inventory2Icon />}
                                onClick={() => handleUpdatePOStatus(po.id, 'received')}
                                sx={{ fontWeight: 700 }}
                              >
                                Stock Received
                              </Button>
                              <Button
                                variant="outlined"
                                size="small"
                                color="error"
                                onClick={() => handleUpdatePOStatus(po.id, 'cancelled')}
                                sx={{ fontWeight: 700 }}
                              >
                                Cancel Order
                              </Button>
                            </>
                          )}
                        </Box>
                      </Card>
                    </Grid>
                  );
                })}
              </Grid>
            )}
          </Grid>
        </Grid>
      )}
      {/* Supplier Merchant Dialog */}
      <Dialog open={openSuppForm} onClose={() => setOpenSuppForm(false)} maxWidth="xs" fullWidth>
        <DialogTitle sx={{ fontWeight: 800 }}>Add Supplier Merchant</DialogTitle>
        <DialogContent sx={{ pt: 2, display: 'flex', flexDirection: 'column', gap: 2 }}>
          <TextField
            label="Merchant / Supplier Name"
            value={suppName}
            onChange={(e) => setSuppName(e.target.value)}
            fullWidth
            size="small"
          />
          <TextField
            label="Contact Phone"
            value={suppPhone}
            onChange={(e) => setSuppPhone(e.target.value)}
            fullWidth
            size="small"
          />
          <TextField
            label="Merchant Email"
            value={suppEmail}
            onChange={(e) => setSuppEmail(e.target.value)}
            fullWidth
            size="small"
          />
          <TextField
            label="Street Address"
            value={suppAddress}
            onChange={(e) => setSuppAddress(e.target.value)}
            fullWidth
            size="small"
            multiline
            rows={2}
          />
        </DialogContent>
        <DialogActions sx={{ p: 2 }}>
          <Button onClick={() => setOpenSuppForm(false)} color="inherit">Cancel</Button>
          <Button
            variant="contained"
            onClick={handleCreateSupplier}
            sx={{ bgcolor: '#ac2d00', '&:hover': { bgcolor: '#872100' }, fontWeight: 700 }}
          >
            Add Merchant
          </Button>
        </DialogActions>
      </Dialog>
      {/* Create PO Dialog */}
      <Dialog open={openPoForm} onClose={() => setOpenPoForm(false)} maxWidth="sm" fullWidth>
        <DialogTitle sx={{ fontWeight: 800 }}>Draft Purchase Order</DialogTitle>
        <DialogContent sx={{ pt: 2, display: 'flex', flexDirection: 'column', gap: 2.5 }}>
          <FormControl fullWidth size="small">
            <InputLabel>Select Merchant</InputLabel>
            <Select
              value={selectedSupplierId}
              label="Select Merchant"
              onChange={(e) => setSelectedSupplierId(e.target.value)}
            >
              {suppliers.map(s => (
                <MenuItem key={s.id} value={s.id}>{s.name}</MenuItem>
              ))}
            </Select>
          </FormControl>
          <Typography variant="subtitle2" sx={{ fontWeight: 800, mb: -1.5 }}>
            PO Items list:
          </Typography>
          {poItems.length === 0 ? (
            <Typography variant="body2" color="text.secondary" sx={{ py: 1, fontStyle: 'italic' }}>
              Add raw ingredients to the order list below.
            </Typography>
          ) : (
            <List disablePadding>
              {poItems.map(item => {
                const detail = ingredients.find(ing => ing.id === item.ingredient_id);
                return (
                  <ListItem
                    key={item.ingredient_id}
                    secondaryAction={
                      <IconButton size="small" color="error" onClick={() => handleRemovePoItem(item.ingredient_id)}>
                        <DeleteIcon fontSize="small" />
                      </IconButton>
                    }
                    sx={{ px: 0, py: 0.5 }}
                  >
                    <ListItemText
                      primary={
                        <Typography variant="body2" sx={{ fontWeight: 700 }}>
                          {detail ? detail.name : `Ingredient ID: ${item.ingredient_id}`}
                        </Typography>
                      }
                      secondary={`Quantity: ${item.qty} ${detail ? detail.unit : 'kg'} @ Est. Price ₹${item.price}/unit`}
                    />
                  </ListItem>
                );
              })}
            </List>
          )}
          <Divider />
          <Typography variant="caption" sx={{ fontWeight: 800, color: 'text.secondary', display: 'block', mb: -1.5 }}>
            ADD ITEM TO ORDER:
          </Typography>
          <Grid container spacing={1} sx={{ alignItems: 'center' }}>
            <Grid size={{ xs: 6 }}>
              <FormControl fullWidth size="small">
                <Select
                  value={addIngId}
                  displayEmpty
                  onChange={(e) => setAddIngId(e.target.value)}
                >
                  <MenuItem value="">Choose stock item...</MenuItem>
                  {ingredients.map(ing => (
                    <MenuItem key={ing.id} value={ing.id}>{ing.name}</MenuItem>
                  ))}
                </Select>
              </FormControl>
            </Grid>
            <Grid size={{ xs: 3 }}>
              <TextField
                type="number"
                size="small"
                label="Qty"
                value={addIngQty}
                onChange={(e) => setAddIngQty(parseFloat(e.target.value) || 0)}
              />
            </Grid>
            <Grid size={{ xs: 3 }}>
              <TextField
                type="number"
                size="small"
                label="Price"
                value={addIngPrice}
                onChange={(e) => setAddIngPrice(parseFloat(e.target.value) || 0)}
              />
            </Grid>
          </Grid>
          <Button
            variant="outlined"
            size="small"
            onClick={handleAddPoItem}
            sx={{ alignSelf: 'flex-end', borderColor: '#ac2d00', color: '#ac2d00', fontWeight: 700 }}
          >
            Add to List
          </Button>
        </DialogContent>
        <DialogActions sx={{ p: 2 }}>
          <Button onClick={() => setOpenPoForm(false)} color="inherit">Cancel</Button>
          <Button
            variant="contained"
            onClick={handleCreatePurchaseOrder}
            sx={{ bgcolor: '#ac2d00', '&:hover': { bgcolor: '#872100' }, fontWeight: 700 }}
          >
            Save Draft PO
          </Button>
        </DialogActions>
      </Dialog>
    </Box>
  );
 };
--- a/src/components/admin/TableManagementView.tsx
+++ b/src/components/admin/TableManagementView.tsx
@ -0,0 +1,410 @@
 import React, { useState, useEffect } from 'react';
 import {
  Box,
  Typography,
  Grid,
  Card,
  CardContent,
  CardActions,
  Button,
  Chip,
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  FormControl,
  InputLabel,
  Select,
  MenuItem,
  CircularProgress,
  IconButton,
  Alert,
 } from '@mui/material';
 import TableBarIcon from '@mui/icons-material/TableBar';
 import QrCodeIcon from '@mui/icons-material/QrCode';
 import RefreshIcon from '@mui/icons-material/Refresh';
 import CloseIcon from '@mui/icons-material/Close';
 import PlayArrowIcon from '@mui/icons-material/PlayArrow';
 import CleaningServicesIcon from '@mui/icons-material/CleaningServices';
 import { api } from '../../services/api';
 export const TableManagementView: React.FC = () => {
  const [tables, setTables] = useState<any[]>([]);
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<string | null>(null);
  const [selectedTable, setSelectedTable] = useState<any | null>(null);
  const [startSessionOpen, setStartSessionOpen] = useState<boolean>(false);
  const [sessionLang, setSessionLang] = useState<string>('en');
  // Create Table Form
  const [createTableOpen, setCreateTableOpen] = useState<boolean>(false);
  const [newTableNumber, setNewTableNumber] = useState<string>('');
  const [newTableCapacity, setNewTableCapacity] = useState<number>(4);
  const fetchTables = async () => {
    setLoading(true);
    setError(null);
    try {
      const data = await api.getTables();
      setTables(Array.isArray(data) ? data : []);
    } catch (err: any) {
      setError(err.message || 'Failed to fetch tables');
    } finally {
      setLoading(false);
    }
  };
  useEffect(() => {
    fetchTables();
  }, []);
  const handleCloseSession = async (tableId: number) => {
    try {
      await api.closeSession(tableId);
      fetchTables();
      setSelectedTable(null);
    } catch (err: any) {
      alert(err.message || 'Failed to close session');
    }
  };
  const handleResetTable = async (tableId: number) => {
    try {
      await api.resetTable(tableId);
      fetchTables();
      setSelectedTable(null);
    } catch (err: any) {
      alert(err.message || 'Failed to reset table');
    }
  };
  const handleStartSession = async () => {
    if (!selectedTable) return;
    try {
      await api.startSession(selectedTable.id, sessionLang);
      setStartSessionOpen(false);
      fetchTables();
      setSelectedTable(null);
    } catch (err: any) {
      alert(err.message || 'Failed to start session');
    }
  };
  const handleCreateTable = async () => {
    if (!newTableNumber.trim()) {
      alert('Please enter a table number');
      return;
    }
    try {
      await api.createTable(newTableNumber.trim(), newTableCapacity);
      setCreateTableOpen(false);
      setNewTableNumber('');
      setNewTableCapacity(4);
      fetchTables();
    } catch (err: any) {
      alert(err.message || 'Failed to create table');
    }
  };
  const getStatusColor = (status: string) => {
    switch (status) {
      case 'available':
        return 'success';
      case 'occupied':
        return 'error';
      case 'awaiting_clearance':
        return 'warning';
      case 'reserved':
        return 'primary';
      default:
        return 'default';
    }
  };
  return (
    <Box>
      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 3 }}>
        <Box>
          <Typography variant="h5" sx={{ fontWeight: 800, color: '#ac2d00' }}>
            Table & Floor Management
          </Typography>
          <Typography variant="body2" color="text.secondary">
            Monitor real-time table occupancy, QR scan sessions, and customer lifecycle.
          </Typography>
        </Box>
        <Box sx={{ display: 'flex', gap: 1 }}>
          <Button
            variant="contained"
            onClick={() => setCreateTableOpen(true)}
            startIcon={<TableBarIcon />}
            sx={{ bgcolor: '#ac2d00', '&:hover': { bgcolor: '#872100' }, fontWeight: 700 }}
          >
            Add Table
          </Button>
          <Button
            variant="outlined"
            onClick={fetchTables}
            startIcon={<RefreshIcon />}
            sx={{ borderColor: '#ac2d00', color: '#ac2d00', '&:hover': { borderColor: '#872100', bgcolor: 'rgba(172,45,0,0.04)' } }}
          >
            Refresh Grid
          </Button>
        </Box>
      </Box>
      {error && <Alert severity="error" sx={{ mb: 3 }}>{error}</Alert>}
      {loading ? (
        <Box sx={{ display: 'flex', justifyContent: 'center', py: 8 }}>
          <CircularProgress color="primary" />
        </Box>
      ) : (
        <Grid container spacing={3}>
          {tables.map((table) => (
            <Grid size={{ xs: 12, sm: 6, md: 4, lg: 3 }} key={table.id}>
              <Card
                elevation={0}
                sx={{
                  border: '1.5px solid',
                  borderColor: table.status === 'occupied' ? '#ffdbd1' : '#e2e2e2',
                  borderRadius: '16px',
                  bgcolor: table.status === 'occupied' ? '#fffbfa' : '#ffffff',
                  transition: 'all 0.2s',
                  '&:hover': { boxShadow: '0 6px 18px rgba(0,0,0,0.05)', transform: 'translateY(-2px)' },
                }}
              >
                <CardContent sx={{ pb: 1 }}>
                  <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', mb: 2 }}>
                    <Box
                      sx={{
                        p: 1,
                        borderRadius: '8px',
                        bgcolor: table.status === 'occupied' ? '#ac2d00' : '#f2ede9',
                        color: table.status === 'occupied' ? '#ffffff' : '#8f7068',
                      }}
                    >
                      <TableBarIcon />
                    </Box>
                    <Chip
                      label={table.status.toUpperCase().replace('_', ' ')}
                      color={getStatusColor(table.status) as any}
                      size="small"
                      sx={{ fontWeight: 800 }}
                    />
                  </Box>
                  <Typography variant="h6" sx={{ fontWeight: 900 }}>
                    Table {table.table_number || table.number || table.id}
                  </Typography>
                  <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mt: 0.5 }}>
                    ID: {table.id} &bull; Capacity: {table.capacity || 'N/A'}
                  </Typography>
                  {table.status === 'occupied' && (
                    <Typography variant="body2" sx={{ mt: 1.5, fontWeight: 600, color: '#ac2d00' }}>
                      ⚡ Session Active
                    </Typography>
                  )}
                </CardContent>
                <CardActions sx={{ p: 2, pt: 0, justifyContent: 'flex-end', gap: 1 }}>
                  <IconButton
                    size="small"
                    title="View QR Code"
                    onClick={() => {
                      setSelectedTable(table);
                    }}
                    sx={{ color: '#ac2d00', bgcolor: '#ffdbd1', '&:hover': { bgcolor: '#ffcab8' } }}
                  >
                    <QrCodeIcon fontSize="small" />
                  </IconButton>
                  {table.status === 'available' && (
                    <Button
                      variant="contained"
                      size="small"
                      startIcon={<PlayArrowIcon />}
                      onClick={() => {
                        setSelectedTable(table);
                        setStartSessionOpen(true);
                      }}
                      sx={{ bgcolor: '#ac2d00', '&:hover': { bgcolor: '#872100' }, fontWeight: 700 }}
                    >
                      Start Session
                    </Button>
                  )}
                  {table.status === 'occupied' && (
                    <Button
                      variant="outlined"
                      size="small"
                      color="error"
                      onClick={() => handleCloseSession(table.id)}
                      sx={{ fontWeight: 700 }}
                    >
                      Close Session
                    </Button>
                  )}
                  {table.status === 'awaiting_clearance' && (
                    <Button
                      variant="contained"
                      size="small"
                      color="warning"
                      startIcon={<CleaningServicesIcon />}
                      onClick={() => handleResetTable(table.id)}
                      sx={{ fontWeight: 700, color: '#ffffff' }}
                    >
                      Cleared
                    </Button>
                  )}
                </CardActions>
              </Card>
            </Grid>
          ))}
        </Grid>
      )}
      {/* QR Code Dialog */}
      <Dialog open={!!selectedTable && !startSessionOpen} onClose={() => setSelectedTable(null)} maxWidth="xs" fullWidth>
        <DialogTitle sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <Typography sx={{ fontWeight: 800 }}>Table {selectedTable?.number} QR Scan Link</Typography>
          <IconButton onClick={() => setSelectedTable(null)}>
            <CloseIcon />
          </IconButton>
        </DialogTitle>
        <DialogContent sx={{ textAlign: 'center', py: 4 }}>
          <Box
            sx={{
              display: 'inline-flex',
              p: 2,
              borderRadius: '16px',
              bgcolor: '#f5f5f5',
              border: '1px solid #e0e0e0',
              mb: 2,
            }}
          >
            {/* Generate mock QR UI since real image might be stubbed */}
            <Box
              sx={{
                width: 180,
                height: 180,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                border: '4px solid #1a1c1c',
                borderRadius: '8px',
                bgcolor: '#ffffff',
                position: 'relative',
              }}
            >
              <QrCodeIcon sx={{ fontSize: 130, color: '#1a1c1c' }} />
              <Box
                sx={{
                  position: 'absolute',
                  px: 1,
                  py: 0.2,
                  bgcolor: '#ac2d00',
                  color: '#ffffff',
                  borderRadius: '4px',
                  fontWeight: 900,
                  fontSize: '0.75rem',
                }}
              >
                TABLE {selectedTable?.number}
              </Box>
            </Box>
          </Box>
          <Typography variant="body2" color="text.secondary" sx={{ breakWord: 'break-all', px: 2 }}>
            Link: <strong>{selectedTable?.qr_codes?.[0]?.encoded_url || `http://localhost:3000/scan/${selectedTable?.id}`}</strong>
          </Typography>
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setSelectedTable(null)} color="inherit">Close</Button>
          <Button
            variant="contained"
            sx={{ bgcolor: '#ac2d00', '&:hover': { bgcolor: '#872100' } }}
            onClick={() => {
              navigator.clipboard.writeText(
                selectedTable?.qr_codes?.[0]?.encoded_url || `http://localhost:3000/scan/${selectedTable?.id}`
              );
              alert('Scan URL copied to clipboard!');
            }}
          >
            Copy URL
          </Button>
        </DialogActions>
      </Dialog>
      {/* Start Session Dialog */}
      <Dialog open={startSessionOpen} onClose={() => setStartSessionOpen(false)} maxWidth="xs" fullWidth>
        <DialogTitle sx={{ fontWeight: 800 }}>Start Table Session</DialogTitle>
        <DialogContent sx={{ pt: 2 }}>
          <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
            Manually trigger and open a customer dine-in session for Table {selectedTable?.number}.
          </Typography>
          <FormControl fullWidth size="small">
            <InputLabel>Preferred Language</InputLabel>
            <Select
              value={sessionLang}
              label="Preferred Language"
              onChange={(e) => setSessionLang(e.target.value)}
            >
              <MenuItem value="en">English</MenuItem>
              <MenuItem value="hi">Hindi</MenuItem>
              <MenuItem value="hinglish">Hinglish</MenuItem>
            </Select>
          </FormControl>
        </DialogContent>
        <DialogActions sx={{ p: 2 }}>
          <Button onClick={() => setStartSessionOpen(false)} color="inherit">Cancel</Button>
          <Button
            variant="contained"
            onClick={handleStartSession}
            sx={{ bgcolor: '#ac2d00', '&:hover': { bgcolor: '#872100' } }}
          >
            Activate Session
          </Button>
        </DialogActions>
      </Dialog>
      {/* Create Table Dialog */}
      <Dialog open={createTableOpen} onClose={() => setCreateTableOpen(false)} maxWidth="xs" fullWidth>
        <DialogTitle sx={{ fontWeight: 800 }}>Add New Table</DialogTitle>
        <DialogContent sx={{ pt: 2, display: 'flex', flexDirection: 'column', gap: 2 }}>
          <FormControl fullWidth size="small">
            <InputLabel shrink>Table Number / Label</InputLabel>
            <input
              style={{ marginTop: 16, padding: '8px 12px', border: '1px solid #e0e0e0', borderRadius: 4, fontSize: 14 }}
              placeholder='e.g. 12, A1, Terrace-3'
              value={newTableNumber}
              onChange={(e) => setNewTableNumber(e.target.value)}
            />
          </FormControl>
          <FormControl fullWidth size="small">
            <InputLabel>Seating Capacity</InputLabel>
            <Select
              value={newTableCapacity}
              label="Seating Capacity"
              onChange={(e) => setNewTableCapacity(Number(e.target.value))}
            >
              {[2, 4, 6, 8, 10, 12].map(cap => (
                <MenuItem key={cap} value={cap}>{cap} seats</MenuItem>
              ))}
            </Select>
          </FormControl>
        </DialogContent>
        <DialogActions sx={{ p: 2 }}>
          <Button onClick={() => setCreateTableOpen(false)} color="inherit">Cancel</Button>
          <Button
            variant="contained"
            onClick={handleCreateTable}
            sx={{ bgcolor: '#ac2d00', '&:hover': { bgcolor: '#872100' }, fontWeight: 700 }}
          >
            Create Table
          </Button>
        </DialogActions>
      </Dialog>
    </Box>
  );
 };
--- a/src/components/analytics/AnalyticsDashboard.tsx
+++ b/src/components/analytics/AnalyticsDashboard.tsx
@ -0,0 +1,344 @@
 import React, { useState, useEffect } from 'react';
 import {
  Box,
  Grid,
  Paper,
  Typography,
  Card,
  CardContent,
  Chip,
  Button,
  ButtonGroup,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Avatar,
  Divider,
 } from '@mui/material';
 import TrendingUpIcon from '@mui/icons-material/TrendingUp';
 import TrendingDownIcon from '@mui/icons-material/TrendingDown';
 import AttachMoneyIcon from '@mui/icons-material/AttachMoney';
 import ShoppingBagIcon from '@mui/icons-material/ShoppingBag';
 import SpeedIcon from '@mui/icons-material/Speed';
 import TableBarIcon from '@mui/icons-material/TableBar';
 import StarIcon from '@mui/icons-material/Star';
 import { StatusBadge } from '../common/StatusBadge';
 import { api } from '../../services/api';
 export const AnalyticsDashboard: React.FC = () => {
  const [period, setPeriod] = useState<'today' | 'week' | 'month'>('today');
  const [topDishes, setTopDishes] = useState<any[]>([]);
  const [revenueTrend, setRevenueTrend] = useState<any[]>([]);
  const fetchAnalytics = async () => {
    try {
      const topData = await api.getTopItems();
      setTopDishes(Array.isArray(topData) ? topData : []);
      const trendData = await api.getRevenueTrend();
      setRevenueTrend(Array.isArray(trendData) ? trendData : []);
    } catch (e) {
      console.error(e);
    }
  };
  useEffect(() => {
    fetchAnalytics();
  }, [period]);
  const metrics = [
    {
      title: 'Total Revenue',
      value: '₹14,852.40',
      change: '+18.4%',
      isPositive: true,
      icon: <AttachMoneyIcon sx={{ color: '#11651d' }} />,
      bg: '#e8f5e9',
    },
    {
      title: 'Total Orders',
      value: '482',
      change: '+12.1%',
      isPositive: true,
      icon: <ShoppingBagIcon sx={{ color: '#ac2d00' }} />,
      bg: '#ffdbd1',
    },
    {
      title: 'Avg Kitchen Speed',
      value: '11m 42s',
      change: '-1m 15s faster',
      isPositive: true,
      icon: <SpeedIcon sx={{ color: '#00a6e0' }} />,
      bg: '#c4e7ff',
    },
    {
      title: 'Table Occupancy',
      value: '84%',
      change: '21/25 Tables Active',
      isPositive: true,
      icon: <TableBarIcon sx={{ color: '#845000' }} />,
      bg: '#ffddba',
    },
  ];
  const finalTopDishes = topDishes.length > 0 ? topDishes.map((d, index) => ({
    id: d.id || String(index + 1),
    name: d.name,
    category: d.category || 'Mains',
    count: d.ordersCount,
    revenue: `₹${d.revenue}`,
    dietary: d.dietary || 'veg'
  })) : [
    { id: '1', name: 'Butter Chicken Special', category: 'Mains', count: 142, revenue: '₹51,120', dietary: 'non-veg' as const },
    { id: '2', name: 'Paneer Tikka Masala', category: 'Mains', count: 118, revenue: '₹33,040', dietary: 'veg' as const },
    { id: '3', name: 'Truffle Garlic Naan', category: 'Breads', count: 215, revenue: '₹17,200', dietary: 'veg' as const },
    { id: '4', name: 'Dal Makhani Gold', category: 'Mains', count: 96, revenue: '₹28,800', dietary: 'veg' as const },
    { id: '5', name: 'Mango Lassi Craft', category: 'Beverages', count: 180, revenue: '₹21,600', dietary: 'veg' as const },
  ];
  const hourlyData = revenueTrend.length > 0 ? revenueTrend.map((t) => ({
    hour: t.date || t.hour || 'Day',
    orders: t.ordersCount || 10,
    revenue: t.revenue || 500
  })) : [
    { hour: '11 AM', orders: 24, revenue: 680 },
    { hour: '12 PM', orders: 68, revenue: 1950 },
    { hour: '1 PM', orders: 85, revenue: 2480 },
    { hour: '2 PM', orders: 42, revenue: 1120 },
    { hour: '3 PM', orders: 18, revenue: 450 },
    { hour: '4 PM', orders: 15, revenue: 380 },
    { hour: '5 PM', orders: 32, revenue: 890 },
    { hour: '6 PM', orders: 74, revenue: 2100 },
    { hour: '7 PM', orders: 92, revenue: 2850 },
    { hour: '8 PM', orders: 88, revenue: 2640 },
    { hour: '9 PM', orders: 45, revenue: 1250 },
  ];
  const maxRevenue = Math.max(...hourlyData.map((d) => d.revenue));
  return (
    <Box sx={{ p: { xs: 2, md: 3 } }}>
      {/* Analytics Header */}
      <Box sx={{ mb: 3, display: 'flex', flexWrap: 'wrap', justifyContent: 'space-between', alignItems: 'center', gap: 2 }}>
        <Box>
          <Typography variant="h5" sx={{ fontWeight: 800, color: '#ac2d00' }}>
            Business Intelligence & Analytics
          </Typography>
          <Typography variant="body2" sx={{ color: '#5b4139' }}>
            Real-time outlet performance, kitchen efficiency, and dish profitability metrics.
          </Typography>
        </Box>
        <ButtonGroup variant="outlined" size="small">
          {(['today', 'week', 'month'] as const).map((p) => (
            <Button
              key={p}
              variant={period === p ? 'contained' : 'outlined'}
              onClick={() => setPeriod(p)}
              sx={{
                fontWeight: 700,
                color: period === p ? '#ffffff' : '#ac2d00',
                borderColor: '#ac2d00',
              }}
            >
              {p.toUpperCase()}
            </Button>
          ))}
        </ButtonGroup>
      </Box>
      {/* KPI Cards */}
      <Grid container spacing={2.5} sx={{ mb: 3 }}>
        {metrics.map((m, idx) => (
          <Grid size={{ xs: 12, sm: 6, md: 3 }} key={idx}>
            <Card sx={{ height: '100%' }}>
              <CardContent>
                <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', mb: 1.5 }}>
                  <Typography variant="body2" sx={{ fontWeight: 700, color: '#546067' }}>
                    {m.title}
                  </Typography>
                  <Avatar sx={{ bgcolor: m.bg, width: 40, height: 40 }}>{m.icon}</Avatar>
                </Box>
                <Typography variant="h4" sx={{ fontWeight: 800, color: '#1a1c1c', mb: 1 }}>
                  {m.value}
                </Typography>
                <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
                  {m.isPositive ? (
                    <TrendingUpIcon fontSize="small" sx={{ color: '#11651d' }} />
                  ) : (
                    <TrendingDownIcon fontSize="small" sx={{ color: '#ba1a1a' }} />
                  )}
                  <Typography
                    variant="caption"
                    sx={{
                      fontWeight: 800,
                      color: m.isPositive ? '#11651d' : '#ba1a1a',
                    }}
                  >
                    {m.change}
                  </Typography>
                  <Typography variant="caption" sx={{ color: '#8f7068', ml: 0.5 }}>
                    vs previous {period}
                  </Typography>
                </Box>
              </CardContent>
            </Card>
          </Grid>
        ))}
      </Grid>
      {/* Revenue Trends Chart & Hourly Volume */}
      <Grid container spacing={3} sx={{ mb: 3 }}>
        <Grid size={{ xs: 12, md: 8 }}>
          <Paper elevation={0} sx={{ p: 3, border: '1px solid #e2e2e2', borderRadius: '12px' }}>
            <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
              <Typography variant="h6" sx={{ fontWeight: 800, color: '#1a1c1c' }}>
                Hourly Revenue & Peak Order Trends
              </Typography>
              <Chip label="Peak Lunch: 1 PM • Peak Dinner: 7 PM" size="small" color="primary" sx={{ fontWeight: 700 }} />
            </Box>
            {/* Custom SVG Bar Chart */}
            <Box sx={{ height: 260, display: 'flex', alignItems: 'flex-end', gap: 1.5, pt: 4, pb: 1, px: 1 }}>
              {hourlyData.map((d, index) => {
                const heightPercent = (d.revenue / maxRevenue) * 100;
                return (
                  <Box
                    key={index}
                    sx={{
                      flex: 1,
                      display: 'flex',
                      flexDirection: 'column',
                      alignItems: 'center',
                      height: '100%',
                      justifyContent: 'flex-end',
                      gap: 1,
                    }}
                  >
                    <Typography variant="caption" sx={{ fontSize: '0.65rem', fontWeight: 700, color: '#ac2d00' }}>
                      ${d.revenue}
                    </Typography>
                    <Box
                      sx={{
                        width: '100%',
                        height: `${heightPercent}%`,
                        background: 'linear-gradient(180deg, #ac2d00 0%, #d53e0b 100%)',
                        borderRadius: '6px 6px 0 0',
                        transition: 'height 0.3s ease',
                        '&:hover': {
                          background: '#872100',
                        },
                      }}
                    />
                    <Typography variant="caption" sx={{ fontSize: '0.7rem', fontWeight: 600, color: '#546067' }}>
                      {d.hour}
                    </Typography>
                  </Box>
                );
              })}
            </Box>
          </Paper>
        </Grid>
        {/* Operational Speed SLA Breakdown */}
        <Grid size={{ xs: 12, md: 4 }}>
          <Paper elevation={0} sx={{ p: 3, border: '1px solid #e2e2e2', borderRadius: '12px', height: '100%' }}>
            <Typography variant="h6" sx={{ fontWeight: 800, color: '#1a1c1c', mb: 2 }}>
              Kitchen SLA Compliance
            </Typography>
            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2.5 }}>
              <Box>
                <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.5 }}>
                  <Typography variant="body2" sx={{ fontWeight: 700 }}>Under 15 Mins (Target SLA)</Typography>
                  <Typography variant="body2" sx={{ fontWeight: 800, color: '#11651d' }}>88.4%</Typography>
                </Box>
                <Box sx={{ height: 10, bgcolor: '#e2e2e2', borderRadius: 5, overflow: 'hidden' }}>
                  <Box sx={{ width: '88.4%', height: '100%', bgcolor: '#11651d' }} />
                </Box>
              </Box>
              <Box>
                <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.5 }}>
                  <Typography variant="body2" sx={{ fontWeight: 700 }}>15 - 25 Mins (Warning SLA)</Typography>
                  <Typography variant="body2" sx={{ fontWeight: 800, color: '#845000' }}>9.2%</Typography>
                </Box>
                <Box sx={{ height: 10, bgcolor: '#e2e2e2', borderRadius: 5, overflow: 'hidden' }}>
                  <Box sx={{ width: '9.2%', height: '100%', bgcolor: '#845000' }} />
                </Box>
              </Box>
              <Box>
                <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.5 }}>
                  <Typography variant="body2" sx={{ fontWeight: 700 }}>Over 25 Mins (Breached SLA)</Typography>
                  <Typography variant="body2" sx={{ fontWeight: 800, color: '#ba1a1a' }}>2.4%</Typography>
                </Box>
                <Box sx={{ height: 10, bgcolor: '#e2e2e2', borderRadius: 5, overflow: 'hidden' }}>
                  <Box sx={{ width: '2.4%', height: '100%', bgcolor: '#ba1a1a' }} />
                </Box>
              </Box>
              <Divider sx={{ my: 1 }} />
              <Box sx={{ p: 2, bgcolor: '#f3f3f3', borderRadius: '8px' }}>
                <Typography variant="caption" sx={{ fontWeight: 700, color: '#872100', display: 'block' }}>
                  💡 Operational Tip
                </Typography>
                <Typography variant="caption" sx={{ color: '#5b4139' }}>
                  Truffle Garlic Naan orders spiked at 7 PM. Assigning 1 extra tandoor chef during peak hours will reduce SLA breaches by 1.8%.
                </Typography>
              </Box>
            </Box>
          </Paper>
        </Grid>
      </Grid>
      {/* Top Dishes Leaderboard */}
      <Paper elevation={0} sx={{ p: 3, border: '1px solid #e2e2e2', borderRadius: '12px' }}>
        <Typography variant="h6" sx={{ fontWeight: 800, color: '#1a1c1c', mb: 2 }}>
          Top Performing Dishes Leaderboard
        </Typography>
        <TableContainer>
          <Table size="medium">
            <TableHead sx={{ bgcolor: '#f0eded' }}>
              <TableRow>
                <TableCell sx={{ fontWeight: 800 }}>DISH NAME</TableCell>
                <TableCell sx={{ fontWeight: 800 }}>CATEGORY</TableCell>
                <TableCell sx={{ fontWeight: 800 }}>DIETARY</TableCell>
                <TableCell sx={{ fontWeight: 800 }} align="right">UNITS SOLD</TableCell>
                <TableCell sx={{ fontWeight: 800 }} align="right">GROSS REVENUE</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {finalTopDishes.map((dish) => (
                <TableRow key={dish.id} hover>
                  <TableCell sx={{ fontWeight: 700 }}>
                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                      <StarIcon sx={{ color: '#feb300', fontSize: 18 }} />
                      {dish.name}
                    </Box>
                  </TableCell>
                  <TableCell>{dish.category}</TableCell>
                  <TableCell>
                    <StatusBadge dietary={dish.dietary} />
                  </TableCell>
                  <TableCell align="right" sx={{ fontWeight: 800, fontFamily: 'monospace' }}>
                    {dish.count}
                  </TableCell>
                  <TableCell align="right" sx={{ fontWeight: 800, color: '#ac2d00' }}>
                    {dish.revenue}
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </TableContainer>
      </Paper>
    </Box>
  );
 };
--- a/src/components/common/Navigation.tsx
+++ b/src/components/common/Navigation.tsx
@ -0,0 +1,232 @@
 import React, { useState } from 'react';
 import {
  AppBar,
  Toolbar,
  Typography,
  Button,
  IconButton,
  Box,
  Drawer,
  List,
  ListItem,
  ListItemButton,
  ListItemIcon,
  ListItemText,
  Chip,
  Tooltip,
 } from '@mui/material';
 import MenuIcon from '@mui/icons-material/Menu';
 import SoupKitchenIcon from '@mui/icons-material/SoupKitchen';
 import BarChartIcon from '@mui/icons-material/BarChart';
 import RecordVoiceOverIcon from '@mui/icons-material/RecordVoiceOver';
 import TableRestaurantIcon from '@mui/icons-material/TableRestaurant';
 import VolumeUpIcon from '@mui/icons-material/VolumeUp';
 import VolumeOffIcon from '@mui/icons-material/VolumeOff';
 import LocalDiningIcon from '@mui/icons-material/LocalDining';
 interface NavigationProps {
  activeTab: string;
  onTabChange: (tab: string) => void;
  pendingCount: number;
  soundEnabled: boolean;
  onToggleSound: () => void;
 }
 export const Navigation: React.FC<NavigationProps> = ({
  activeTab,
  onTabChange,
  pendingCount,
  soundEnabled,
  onToggleSound,
 }) => {
  const [drawerOpen, setDrawerOpen] = useState(false);
  const menuItems = [
    {
      id: 'kds',
      label: 'Kitchen Display (KDS)',
      icon: <SoupKitchenIcon />,
      badge: pendingCount,
    },
    {
      id: 'analytics',
      label: 'Business Analytics',
      icon: <BarChartIcon />,
    },
    {
      id: 'voice',
      label: 'Voice Assistant',
      icon: <RecordVoiceOverIcon />,
    },
    {
      id: 'table',
      label: 'Table 12 Hub',
      icon: <TableRestaurantIcon />,
    },
  ];
  return (
    <>
      <AppBar position="sticky" elevation={0}>
        <Toolbar sx={{ justifyContent: 'space-between' }}>
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
            <IconButton
              edge="start"
              color="inherit"
              onClick={() => setDrawerOpen(true)}
              sx={{ display: { sm: 'none' } }}
            >
              <MenuIcon />
            </IconButton>
            <Box
              sx={{
                width: 36,
                height: 36,
                borderRadius: '8px',
                background: 'linear-gradient(135deg, #ac2d00 0%, #d53e0b 100%)',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                color: '#ffffff',
                boxShadow: '0 2px 8px rgba(172, 45, 0, 0.3)',
              }}
            >
              <LocalDiningIcon fontSize="small" />
            </Box>
            <Typography
              variant="h6"
              sx={{
                fontWeight: 800,
                color: '#ac2d00',
                display: 'flex',
                alignItems: 'center',
                gap: 0.8,
              }}
            >
              RestroAI
              <Chip
                label="OPS SUITE"
                size="small"
                sx={{
                  height: 18,
                  fontSize: '0.6rem',
                  fontWeight: 800,
                  backgroundColor: '#ffdbd1',
                  color: '#872100',
                }}
              />
            </Typography>
          </Box>
          {/* Desktop Nav Items */}
          <Box sx={{ display: { xs: 'none', sm: 'flex' }, gap: 1 }}>
            {menuItems.map((item) => {
              const isActive = activeTab === item.id;
              return (
                <Button
                  key={item.id}
                  onClick={() => onTabChange(item.id)}
                  startIcon={item.icon}
                  variant={isActive ? 'contained' : 'text'}
                  color={isActive ? 'primary' : 'inherit'}
                  sx={{
                    fontWeight: isActive ? 700 : 500,
                    borderRadius: '8px',
                    px: 2,
                    color: isActive ? '#ffffff' : '#546067',
                  }}
                >
                  {item.label}
                  {item.badge !== undefined && item.badge > 0 && (
                    <Chip
                      label={item.badge}
                      size="small"
                      color="error"
                      sx={{
                        ml: 1,
                        height: 18,
                        fontSize: '0.65rem',
                        fontWeight: 800,
                      }}
                    />
                  )}
                </Button>
              );
            })}
          </Box>
          {/* Settings & Tools */}
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
            <Tooltip title={soundEnabled ? 'Kitchen Sound Alerts Enabled' : 'Kitchen Sound Alert Muted'}>
              <IconButton onClick={onToggleSound} color={soundEnabled ? 'primary' : 'default'}>
                {soundEnabled ? <VolumeUpIcon /> : <VolumeOffIcon />}
              </IconButton>
            </Tooltip>
            <Box
              sx={{
                px: 1.5,
                py: 0.5,
                borderRadius: '6px',
                backgroundColor: '#f0eded',
                display: { xs: 'none', md: 'flex' },
                alignItems: 'center',
                gap: 1,
              }}
            >
              <Box
                sx={{
                  width: 8,
                  height: 8,
                  borderRadius: '50%',
                  backgroundColor: '#11651d',
                }}
              />
              <Typography variant="caption" sx={{ color: '#1a1c1c', fontWeight: 600 }}>
                Outlet: Downtown Main
              </Typography>
            </Box>
          </Box>
        </Toolbar>
      </AppBar>
      {/* Mobile Drawer */}
      <Drawer anchor="left" open={drawerOpen} onClose={() => setDrawerOpen(false)}>
        <Box sx={{ width: 260, pt: 2 }} role="presentation">
          <Typography variant="h6" sx={{ px: 2, pb: 1, fontWeight: 800, color: '#ac2d00' }}>
            RestroAI Navigation
          </Typography>
          <List>
            {menuItems.map((item) => (
              <ListItem key={item.id} disablePadding>
                <ListItemButton
                  selected={activeTab === item.id}
                  onClick={() => {
                    onTabChange(item.id);
                    setDrawerOpen(false);
                  }}
                >
                  <ListItemIcon sx={{ color: activeTab === item.id ? '#ac2d00' : 'inherit' }}>
                    {item.icon}
                  </ListItemIcon>
                  <ListItemText
                    primary={
                      <Typography sx={{ fontWeight: activeTab === item.id ? 700 : 500 }}>
                        {item.label}
                      </Typography>
                    }
                  />
                  {item.badge !== undefined && item.badge > 0 && (
                    <Chip label={item.badge} color="error" size="small" />
                  )}
                </ListItemButton>
              </ListItem>
            ))}
          </List>
        </Box>
      </Drawer>
    </>
  );
 };
--- a/src/components/common/StatusBadge.tsx
+++ b/src/components/common/StatusBadge.tsx
@ -0,0 +1,102 @@
 import React from 'react';
 import { Chip, Box, Typography } from '@mui/material';
 import type { OrderStatus, OrderType } from '../../types';
 interface StatusBadgeProps {
  status?: OrderStatus;
  type?: OrderType;
  dietary?: 'veg' | 'non-veg' | 'jain' | 'vegan';
  size?: 'small' | 'medium';
 }
 export const StatusBadge: React.FC<StatusBadgeProps> = ({ status, type, dietary, size = 'small' }) => {
  if (dietary) {
    const config = {
      veg: { label: 'VEG', color: '#2e7d32', bg: '#e8f5e9', border: '#2e7d32' },
      'non-veg': { label: 'NON-VEG', color: '#c62828', bg: '#ffebee', border: '#c62828' },
      jain: { label: 'JAIN', color: '#ef6c00', bg: '#fff3e0', border: '#ef6c00' },
      vegan: { label: 'VEGAN', color: '#1565c0', bg: '#e3f2fd', border: '#1565c0' },
    }[dietary];
    return (
      <Box
        sx={{
          display: 'inline-flex',
          alignItems: 'center',
          gap: 0.5,
          border: `1px solid ${config.border}`,
          borderRadius: '4px',
          px: 0.6,
          py: 0.2,
          backgroundColor: config.bg,
        }}
      >
        <Box
          sx={{
            width: 8,
            height: 8,
            borderRadius: '50%',
            backgroundColor: config.color,
          }}
        />
        <Typography
          variant="caption"
          sx={{
            color: config.color,
            fontSize: '0.65rem',
            fontWeight: 700,
            letterSpacing: '0.05em',
          }}
        >
          {config.label}
        </Typography>
      </Box>
    );
  }
  if (status) {
    const statusMap = {
      pending: { label: 'PENDING', color: 'error', bg: '#ffdad6' },
      preparing: { label: 'PREPARING', color: 'warning', bg: '#ffddba' },
      ready: { label: 'READY', color: 'success', bg: '#a3f69c' },
      served: { label: 'SERVED', color: 'default', bg: '#eeeeee' },
    }[status];
    return (
      <Chip
        label={statusMap.label}
        size={size}
        sx={{
          fontWeight: 700,
          fontSize: '0.7rem',
          height: size === 'small' ? 22 : 28,
        }}
        color={statusMap.color as any}
      />
    );
  }
  if (type) {
    const typeMap = {
      'Dine-In': { label: 'DINE-IN', color: '#ac2d00', bg: '#ffdbd1' },
      Takeaway: { label: 'TAKEAWAY', color: '#546067', bg: '#d7e4ec' },
      Delivery: { label: 'DELIVERY', color: '#845000', bg: '#ffddba' },
    }[type];
    return (
      <Chip
        label={typeMap.label}
        size={size}
        sx={{
          fontWeight: 700,
          fontSize: '0.7rem',
          height: size === 'small' ? 22 : 28,
          backgroundColor: typeMap.bg,
          color: typeMap.color,
        }}
      />
    );
  }
  return null;
 };
--- a/src/components/customer/BillPaymentView.tsx
+++ b/src/components/customer/BillPaymentView.tsx
@ -0,0 +1,302 @@
 import React, { useState, useEffect } from 'react';
 import {
  Box,
  Container,
  Typography,
  Paper,
  Button,
  Chip,
  Divider,
  Alert,
  Grid,
 } from '@mui/material';
 import ReceiptLongIcon from '@mui/icons-material/ReceiptLong';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import QrCode2Icon from '@mui/icons-material/QrCode2';
 import PersonIcon from '@mui/icons-material/Person';
 import CreditCardIcon from '@mui/icons-material/CreditCard';
 import CurrencyRupeeIcon from '@mui/icons-material/CurrencyRupee';
 import { api } from '../../services/api';
 interface BillPaymentViewProps {
  onNavigate: (view: 'landing' | 'menu' | 'cart' | 'status' | 'bill' | 'voice') => void;
 }
 export const BillPaymentView: React.FC<BillPaymentViewProps> = ({ onNavigate }) => {
  const [splitCount, setSplitCount] = useState<number>(1);
  const [tipPercentage, setTipPercentage] = useState<number>(10);
  const [paymentDone, setPaymentDone] = useState<boolean>(false);
  const [paymentMethod, setPaymentMethod] = useState<'upi' | 'card' | 'cash' | null>(null);
  const [billItems, setBillItems] = useState<any[]>([]);
  const [ticketNum, setTicketNum] = useState<string>('---');
  const [tableNum, setTableNum] = useState<string>('12');
  const [billId, setBillId] = useState<string>('');
  const sessionId = sessionStorage.getItem('customer_session_id') || '112';
  const loadBill = async () => {
    try {
      const order = await api.getOrderForSession(sessionId);
      if (order) {
        setTicketNum(order.ticketNumber || '105');
        setTableNum(order.tableNumber || sessionStorage.getItem('customer_table_id') || '12');
        setBillItems(order.items.map((it: any) => ({
          name: it.name,
          qty: it.quantity,
          price: it.price || 150
        })));
        const bill = await api.generateBill(order.id);
        if (bill) {
          setBillId(bill.id);
        }
      }
    } catch (e) {
      console.error('Failed to load bill', e);
    }
  };
  useEffect(() => {
    loadBill();
  }, []);
  const subtotal = billItems.reduce((acc, i) => acc + i.price * i.qty, 0);
  const cgst = subtotal * 0.025;
  const sgst = subtotal * 0.025;
  const serviceCharge = subtotal * 0.05;
  const tip = subtotal * (tipPercentage / 100);
  const totalBill = subtotal + cgst + sgst + serviceCharge + tip;
  const perPersonPrice = totalBill / splitCount;
  const handlePay = async (method: 'upi' | 'card' | 'cash') => {
    try {
      if (billId) {
        await api.recordPayment(billId, method, totalBill);
      }
      setPaymentMethod(method);
      setPaymentDone(true);
    } catch (e) {
      alert('Failed to record payment: ' + e);
    }
  };
  return (
    <Box sx={{ minHeight: '100vh', bgcolor: '#f8f5f2', pb: 12 }}>
      {/* Header */}
      <Box
        sx={{
          position: 'sticky',
          top: 0,
          zIndex: 50,
          bgcolor: '#ffffff',
          borderBottom: '1px solid #f0ebe7',
          py: 1.5,
          px: 2,
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          boxShadow: '0 2px 8px rgba(0,0,0,0.05)',
        }}
      >
        <Box>
          <Typography variant="h6" sx={{ fontWeight: 800, color: '#1a1c1c' }}>
            Bill & Payment
          </Typography>
          <Typography variant="caption" sx={{ color: '#8f7068' }}>
            🪑 Table {tableNum} · Ticket #{ticketNum}
          </Typography>
        </Box>
        <Chip
          icon={<ReceiptLongIcon fontSize="small" />}
          label={paymentDone ? 'PAID ✓' : 'UNPAID'}
          color={paymentDone ? 'success' : 'error'}
          sx={{ fontWeight: 800 }}
        />
      </Box>
      <Container maxWidth="sm" sx={{ pt: 3 }}>
        {paymentDone ? (
          <Paper
            elevation={0}
            sx={{
              p: 4,
              textAlign: 'center',
              borderRadius: '24px',
              border: '2px solid #c8e6c9',
              bgcolor: '#f1f8f2',
            }}
          >
            <CheckCircleIcon sx={{ fontSize: 72, color: '#11651d', mb: 2 }} />
            <Typography variant="h4" sx={{ fontWeight: 900, color: '#11651d', mb: 1 }}>
              Payment Successful!
            </Typography>
            <Typography variant="body1" sx={{ color: '#003915', mb: 0.5 }}>
              ₹{totalBill.toFixed(0)} paid via {paymentMethod === 'upi' ? 'UPI' : paymentMethod === 'card' ? 'Card' : 'Cash'}
            </Typography>
            <Typography variant="body2" sx={{ color: '#546067', mb: 3 }}>
              Thank you for dining with RestroAI! Your receipt has been sent.
            </Typography>
            <Button
              variant="contained"
              color="success"
              size="large"
              onClick={() => onNavigate('landing')}
              sx={{ borderRadius: '9999px', px: 4, fontWeight: 800 }}
            >
              Back to Home
            </Button>
          </Paper>
        ) : (
          <>
            {/* Itemized Bill */}
            <Paper elevation={0} sx={{ p: 2.5, mb: 2, borderRadius: '16px', border: '1px solid #f0ebe7', bgcolor: '#ffffff' }}>
              <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1.5 }}>
                <Typography variant="subtitle1" sx={{ fontWeight: 800, color: '#1a1c1c' }}>
                  🧾 Bill Details
                </Typography>
                <Typography variant="caption" sx={{ color: '#8f7068', fontFamily: 'monospace', fontWeight: 700 }}>
                  GSTIN: 29XXXXXX0001Z5
                </Typography>
              </Box>
              {billItems.map((item, idx) => (
                <Box key={idx} sx={{ display: 'flex', justifyContent: 'space-between', py: 0.8 }}>
                  <Typography variant="body2" sx={{ fontWeight: 600 }}>
                    {item.qty}× {item.name}
                  </Typography>
                  <Typography variant="body2" sx={{ fontWeight: 800, fontFamily: 'monospace' }}>
                    ₹{(item.price * item.qty).toFixed(0)}
                  </Typography>
                </Box>
              ))}
              <Divider sx={{ my: 1.5 }} />
              {[
                { label: 'Subtotal', value: `₹${subtotal.toFixed(0)}` },
                { label: 'CGST (2.5%)', value: `₹${cgst.toFixed(0)}` },
                { label: 'SGST (2.5%)', value: `₹${sgst.toFixed(0)}` },
                { label: 'Service Charge (5%)', value: `₹${serviceCharge.toFixed(0)}` },
                { label: `Staff Tip (${tipPercentage}%)`, value: `₹${tip.toFixed(0)}` },
              ].map((row) => (
                <Box key={row.label} sx={{ display: 'flex', justifyContent: 'space-between', py: 0.5 }}>
                  <Typography variant="body2" sx={{ color: '#6b5c57' }}>{row.label}</Typography>
                  <Typography variant="body2" sx={{ fontWeight: 700 }}>{row.value}</Typography>
                </Box>
              ))}
              <Divider sx={{ my: 1.5 }} />
              <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <Typography variant="h6" sx={{ fontWeight: 900, color: '#1a1c1c' }}>Total Amount</Typography>
                <Typography variant="h4" sx={{ fontWeight: 900, color: '#ac2d00' }}>
                  ₹{totalBill.toFixed(0)}
                </Typography>
              </Box>
            </Paper>
            {/* Split Bill */}
            <Paper elevation={0} sx={{ p: 2, mb: 2, borderRadius: '16px', border: '1px solid #f0ebe7', bgcolor: '#ffffff' }}>
              <Typography variant="subtitle2" sx={{ fontWeight: 800, color: '#1a1c1c', mb: 1 }}>
                👥 Split the Bill
              </Typography>
              <Box sx={{ display: 'flex', gap: 1, mb: 1 }}>
                {[1, 2, 3, 4].map((count) => (
                  <Chip
                    key={count}
                    icon={<PersonIcon fontSize="small" />}
                    label={count === 1 ? 'Solo' : `${count} Guests`}
                    clickable
                    onClick={() => setSplitCount(count)}
                    color={splitCount === count ? 'primary' : 'default'}
                    variant={splitCount === count ? 'filled' : 'outlined'}
                    sx={{ fontWeight: 800, flex: 1 }}
                  />
                ))}
              </Box>
              {splitCount > 1 && (
                <Alert severity="info" sx={{ fontWeight: 700, borderRadius: '10px' }}>
                  Each person pays: ₹{perPersonPrice.toFixed(0)}
                </Alert>
              )}
            </Paper>
            {/* Tip Selector */}
            <Paper elevation={0} sx={{ p: 2, mb: 3, borderRadius: '16px', border: '1px solid #f0ebe7', bgcolor: '#ffffff' }}>
              <Typography variant="subtitle2" sx={{ fontWeight: 800, color: '#1a1c1c', mb: 1 }}>
                ❤️ Add Tip for Staff
              </Typography>
              <Box sx={{ display: 'flex', gap: 1 }}>
                {[0, 10, 15, 20].map((pct) => (
                  <Chip
                    key={pct}
                    label={pct === 0 ? 'No Tip' : `${pct}%`}
                    clickable
                    onClick={() => setTipPercentage(pct)}
                    color={tipPercentage === pct ? 'primary' : 'default'}
                    variant={tipPercentage === pct ? 'filled' : 'outlined'}
                    sx={{ fontWeight: 800, flex: 1 }}
                  />
                ))}
              </Box>
            </Paper>
            {/* Payment Options */}
            <Typography variant="subtitle2" sx={{ fontWeight: 800, color: '#8f7068', mb: 1.5, textTransform: 'uppercase', letterSpacing: '0.06em' }}>
              Choose Payment Method
            </Typography>
            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
              {/* UPI Button */}
              <Button
                fullWidth
                variant="contained"
                size="large"
                onClick={() => handlePay('upi')}
                startIcon={<QrCode2Icon />}
                sx={{
                  py: 1.8,
                  borderRadius: '14px',
                  fontWeight: 800,
                  fontSize: '1rem',
                  bgcolor: '#4a148c',
                  '&:hover': { bgcolor: '#38006b' },
                }}
              >
                Pay ₹{totalBill.toFixed(0)} via UPI / GPay / PhonePe
              </Button>
              <Grid container spacing={1.5}>
                <Grid size={{ xs: 6 }}>
                  <Button
                    fullWidth
                    variant="outlined"
                    size="large"
                    onClick={() => handlePay('card')}
                    startIcon={<CreditCardIcon />}
                    sx={{ py: 1.5, borderRadius: '12px', fontWeight: 800, color: '#ac2d00', borderColor: '#ac2d00' }}
                  >
                    Debit / Credit Card
                  </Button>
                </Grid>
                <Grid size={{ xs: 6 }}>
                  <Button
                    fullWidth
                    variant="outlined"
                    size="large"
                    onClick={() => handlePay('cash')}
                    startIcon={<CurrencyRupeeIcon />}
                    sx={{ py: 1.5, borderRadius: '12px', fontWeight: 800, color: '#2e7d32', borderColor: '#2e7d32' }}
                  >
                    Pay by Cash
                  </Button>
                </Grid>
              </Grid>
            </Box>
          </>
        )}
      </Container>
    </Box>
  );
 };
--- a/src/components/customer/CartReviewView.tsx
+++ b/src/components/customer/CartReviewView.tsx
@ -0,0 +1,235 @@
 import React, { useState } from 'react';
 import {
  Box,
  Container,
  Typography,
  Paper,
  Button,
  IconButton,
  Divider,
  TextField,
  Chip,
  Card,
  CardMedia,
 } from '@mui/material';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import AddIcon from '@mui/icons-material/Add';
 import RemoveIcon from '@mui/icons-material/Remove';
 import DeleteIcon from '@mui/icons-material/Delete';
 import SendIcon from '@mui/icons-material/Send';
 import ReceiptLongIcon from '@mui/icons-material/ReceiptLong';
 import { MENU_ITEMS } from '../../data/menuData';
 import type { MenuItem } from '../../data/menuData';
 import { StatusBadge } from '../common/StatusBadge';
 interface CartReviewViewProps {
  cart: { [itemId: string]: number };
  onUpdateCart: (itemId: string, quantity: number) => void;
  onPlaceOrder: (orderNotes: string) => void;
  onNavigate: (view: 'landing' | 'menu' | 'cart' | 'status' | 'bill' | 'voice') => void;
 }
 export const CartReviewView: React.FC<CartReviewViewProps> = ({
  cart,
  onUpdateCart,
  onPlaceOrder,
  onNavigate,
 }) => {
  const [orderNotes, setOrderNotes] = useState<string>('');
  const cartEntries = Object.entries(cart)
    .map(([id, qty]) => {
      const item = MENU_ITEMS.find((m) => m.id === id);
      return item ? { item, qty } : null;
    })
    .filter(Boolean) as { item: MenuItem; qty: number }[];
  const subtotal = cartEntries.reduce((sum, entry) => sum + entry.item.price * entry.qty, 0);
  const cgst = subtotal * 0.025;   // CGST 2.5%
  const sgst = subtotal * 0.025;   // SGST 2.5%
  const serviceCharge = subtotal * 0.05; // 5% service charge
  const grandTotal = subtotal + cgst + sgst + serviceCharge;
  return (
    <Box sx={{ minHeight: '100vh', bgcolor: '#f8f5f2', pb: 12 }}>
      {/* Header */}
      <Box
        sx={{
          position: 'sticky',
          top: 0,
          zIndex: 50,
          bgcolor: '#ffffff',
          borderBottom: '1px solid #f0ebe7',
          py: 1.5,
          px: 2,
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          boxShadow: '0 2px 8px rgba(0,0,0,0.05)',
        }}
      >
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
          <IconButton onClick={() => onNavigate('menu')} size="small">
            <ArrowBackIcon sx={{ color: '#ac2d00' }} />
          </IconButton>
          <Box>
            <Typography variant="h6" sx={{ fontWeight: 800, color: '#1a1c1c' }}>
              Your Cart
            </Typography>
            <Typography variant="caption" sx={{ color: '#8f7068' }}>
              🪑 Table {sessionStorage.getItem('customer_table_id') || '12'}
            </Typography>
          </Box>
        </Box>
        <Chip
          label={`${cartEntries.length} item${cartEntries.length !== 1 ? 's' : ''}`}
          sx={{ fontWeight: 800, bgcolor: '#ffdbd1', color: '#ac2d00' }}
        />
      </Box>
      <Container maxWidth="sm" sx={{ pt: 2 }}>
        {cartEntries.length === 0 ? (
          <Paper
            elevation={0}
            sx={{ p: 5, textAlign: 'center', borderRadius: '20px', border: '2px dashed #e4ddd8', mt: 4 }}
          >
            <Typography variant="h6" sx={{ fontWeight: 800, color: '#8f7068', mb: 1 }}>
              Your cart is empty
            </Typography>
            <Typography variant="body2" sx={{ color: '#b0a09a', mb: 3 }}>
              Go back and add some delicious dishes!
            </Typography>
            <Button variant="contained" color="primary" onClick={() => onNavigate('menu')}
              sx={{ borderRadius: '9999px', px: 4, fontWeight: 800 }}>
              Browse Menu
            </Button>
          </Paper>
        ) : (
          <>
            {/* Cart Items */}
            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5, mb: 2 }}>
              {cartEntries.map(({ item, qty }) => (
                <Card
                  key={item.id}
                  elevation={0}
                  sx={{
                    p: 1.5,
                    borderRadius: '16px',
                    border: '1px solid #f0ebe7',
                    display: 'flex',
                    alignItems: 'center',
                    gap: 1.5,
                    bgcolor: '#ffffff',
                  }}
                >
                  <CardMedia
                    component="img"
                    sx={{ width: 72, height: 72, borderRadius: '12px', objectFit: 'cover', flexShrink: 0 }}
                    image={item.image}
                    alt={item.name}
                  />
                  <Box sx={{ flex: 1, minWidth: 0 }}>
                    <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                      <Typography variant="subtitle2" sx={{ fontWeight: 800, color: '#1a1c1c', lineHeight: 1.2 }}>
                        {item.name}
                      </Typography>
                      <StatusBadge dietary={item.dietary} />
                    </Box>
                    <Typography variant="body2" sx={{ fontWeight: 800, color: '#ac2d00', my: 0.5 }}>
                      ₹{(item.price * qty).toFixed(0)}
                    </Typography>
                    <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                      <Box sx={{ display: 'flex', alignItems: 'center', bgcolor: '#f8f5f2', borderRadius: '9999px' }}>
                        <IconButton size="small" onClick={() => onUpdateCart(item.id, qty - 1)}>
                          <RemoveIcon sx={{ fontSize: 16 }} />
                        </IconButton>
                        <Typography variant="body2" sx={{ px: 1, fontWeight: 900, fontFamily: 'monospace', color: '#ac2d00' }}>
                          {qty}
                        </Typography>
                        <IconButton size="small" onClick={() => onUpdateCart(item.id, qty + 1)}>
                          <AddIcon sx={{ fontSize: 16 }} />
                        </IconButton>
                      </Box>
                      <IconButton size="small" color="error" onClick={() => onUpdateCart(item.id, 0)}>
                        <DeleteIcon sx={{ fontSize: 18 }} />
                      </IconButton>
                    </Box>
                  </Box>
                </Card>
              ))}
            </Box>
            {/* Instructions */}
            <Paper elevation={0} sx={{ p: 2, mb: 2, borderRadius: '16px', border: '1px solid #f0ebe7', bgcolor: '#ffffff' }}>
              <Typography variant="subtitle2" sx={{ fontWeight: 800, color: '#1a1c1c', mb: 1 }}>
                📝 Special Instructions
              </Typography>
              <TextField
                placeholder="E.g. Extra spicy, no onion, serve starters first..."
                multiline
                rows={2}
                fullWidth
                size="small"
                value={orderNotes}
                onChange={(e) => setOrderNotes(e.target.value)}
                sx={{ '& .MuiOutlinedInput-root': { borderRadius: '10px', bgcolor: '#f8f5f2' } }}
              />
            </Paper>
            {/* Bill Summary */}
            <Paper elevation={0} sx={{ p: 2.5, mb: 3, borderRadius: '16px', border: '1px solid #f0ebe7', bgcolor: '#ffffff' }}>
              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
                <ReceiptLongIcon sx={{ color: '#ac2d00', fontSize: 20 }} />
                <Typography variant="subtitle1" sx={{ fontWeight: 800, color: '#1a1c1c' }}>
                  Bill Summary
                </Typography>
              </Box>
              {[
                { label: 'Items Total', value: `₹${subtotal.toFixed(0)}` },
                { label: 'CGST (2.5%)', value: `₹${cgst.toFixed(0)}` },
                { label: 'SGST (2.5%)', value: `₹${sgst.toFixed(0)}` },
                { label: 'Service Charge (5%)', value: `₹${serviceCharge.toFixed(0)}` },
              ].map((row) => (
                <Box key={row.label} sx={{ display: 'flex', justifyContent: 'space-between', py: 0.6 }}>
                  <Typography variant="body2" sx={{ color: '#6b5c57' }}>{row.label}</Typography>
                  <Typography variant="body2" sx={{ fontWeight: 700 }}>{row.value}</Typography>
                </Box>
              ))}
              <Divider sx={{ my: 1.5 }} />
              <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <Typography variant="h6" sx={{ fontWeight: 900, color: '#1a1c1c' }}>Grand Total</Typography>
                <Typography variant="h5" sx={{ fontWeight: 900, color: '#ac2d00' }}>₹{grandTotal.toFixed(0)}</Typography>
              </Box>
              <Typography variant="caption" sx={{ color: '#8f7068', display: 'block', mt: 0.5 }}>
                *Inclusive of all taxes as per GST regulations
              </Typography>
            </Paper>
            {/* Place Order CTA */}
            <Button
              fullWidth
              variant="contained"
              size="large"
              onClick={() => onPlaceOrder(orderNotes)}
              endIcon={<SendIcon />}
              sx={{
                py: 2,
                borderRadius: '9999px',
                fontSize: '1.05rem',
                fontWeight: 900,
                background: 'linear-gradient(135deg, #ac2d00 0%, #d53e0b 100%)',
                boxShadow: '0 8px 24px rgba(172, 45, 0, 0.35)',
                '&:hover': { background: 'linear-gradient(135deg, #872100 0%, #ac2d00 100%)' },
              }}
            >
              Place Order — ₹{grandTotal.toFixed(0)}
            </Button>
          </>
        )}
      </Container>
    </Box>
  );
 };
--- a/src/components/customer/CustomizationModal.tsx
+++ b/src/components/customer/CustomizationModal.tsx
@ -0,0 +1,187 @@
 import React, { useState } from 'react';
 import {
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  Typography,
  Box,
  Button,
  Radio,
  RadioGroup,
  FormControlLabel,
  Checkbox,
  TextField,
  Divider,
 } from '@mui/material';
 import type { MenuItem } from '../../data/menuData';
 import { StatusBadge } from '../common/StatusBadge';
 interface CustomizationModalProps {
  open: boolean;
  item: MenuItem | null;
  onClose: () => void;
  onConfirm: (item: MenuItem, quantity: number, notes: string) => void;
 }
 export const CustomizationModal: React.FC<CustomizationModalProps> = ({
  open,
  item,
  onClose,
  onConfirm,
 }) => {
  if (!item) return null;
  const [spiceLevel, setSpiceLevel] = useState<string>('Medium');
  const [extraCheese, setExtraCheese] = useState<boolean>(false);
  const [extraTruffle, setExtraTruffle] = useState<boolean>(false);
  const [specialNotes, setSpecialNotes] = useState<string>('');
  const [quantity, setQuantity] = useState<number>(1);
  const addOnCost = (extraCheese ? 40 : 0) + (extraTruffle ? 60 : 0);
  const totalPrice = (item.price + addOnCost) * quantity;
  const handleAdd = () => {
    const formattedNotes = [
      `Spice: ${spiceLevel}`,
      extraCheese ? 'Extra Cheese (+ $2.50)' : '',
      extraTruffle ? 'Extra Truffle Oil (+ $3.00)' : '',
      specialNotes ? `Note: ${specialNotes}` : '',
    ]
      .filter(Boolean)
      .join(' | ');
    onConfirm(item, quantity, formattedNotes);
    onClose();
  };
  return (
    <Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
      <DialogTitle sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
          <Typography variant="h6" sx={{ fontWeight: 800 }}>
            {item.name}
          </Typography>
          <StatusBadge dietary={item.dietary} />
        </Box>
        <Typography variant="h6" sx={{ fontWeight: 800, color: '#ac2d00' }}>
          ₹{item.price}
        </Typography>
      </DialogTitle>
      <DialogContent dividers>
        <Typography variant="body2" sx={{ color: '#5b4139', mb: 2 }}>
          {item.description}
        </Typography>
        {/* Spice Level Selector */}
        <Typography variant="subtitle2" sx={{ fontWeight: 800, color: '#1a1c1c', mt: 1, mb: 1 }}>
          🌶️ Select Spice Level:
        </Typography>
        <RadioGroup
          row
          value={spiceLevel}
          onChange={(e) => setSpiceLevel(e.target.value)}
          sx={{ mb: 2 }}
        >
          {['Mild', 'Medium', 'Spicy', 'Extra Hot'].map((level) => (
            <FormControlLabel
              key={level}
              value={level}
              control={<Radio size="small" sx={{ color: '#ac2d00', '&.Mui-checked': { color: '#ac2d00' } }} />}
              label={<Typography variant="body2" sx={{ fontWeight: 600 }}>{level}</Typography>}
            />
          ))}
        </RadioGroup>
        <Divider sx={{ my: 2 }} />
        {/* Extra Add-ons */}
        <Typography variant="subtitle2" sx={{ fontWeight: 800, color: '#1a1c1c', mb: 1 }}>
          ✨ Extra Add-ons:
        </Typography>
        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5, mb: 2 }}>
          <FormControlLabel
            control={
              <Checkbox
                checked={extraCheese}
                onChange={(e) => setExtraCheese(e.target.checked)}
                size="small"
                sx={{ color: '#ac2d00', '&.Mui-checked': { color: '#ac2d00' } }}
              />
            }
            label={
              <Box sx={{ display: 'flex', justifyContent: 'space-between', width: 300 }}>
                <Typography variant="body2" sx={{ fontWeight: 600 }}>Extra Butter / Cream</Typography>
                <Typography variant="body2" sx={{ fontWeight: 700, color: '#ac2d00' }}>+₹40</Typography>
              </Box>
            }
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={extraTruffle}
                onChange={(e) => setExtraTruffle(e.target.checked)}
                size="small"
                sx={{ color: '#ac2d00', '&.Mui-checked': { color: '#ac2d00' } }}
              />
            }
            label={
              <Box sx={{ display: 'flex', justifyContent: 'space-between', width: 300 }}>
                <Typography variant="body2" sx={{ fontWeight: 600 }}>Extra Masala / Spice Blend</Typography>
                <Typography variant="body2" sx={{ fontWeight: 700, color: '#ac2d00' }}>+₹60</Typography>
              </Box>
            }
          />
        </Box>
        <Divider sx={{ my: 2 }} />
        {/* Special Instructions */}
        <Typography variant="subtitle2" sx={{ fontWeight: 800, color: '#1a1c1c', mb: 1 }}>
          📝 Special Instructions / Allergy Notes:
        </Typography>
        <TextField
          placeholder="E.g., No cilantro, extra crispy, sauce on the side..."
          multiline
          rows={2}
          fullWidth
          size="small"
          value={specialNotes}
          onChange={(e) => setSpecialNotes(e.target.value)}
        />
      </DialogContent>
      <DialogActions sx={{ p: 2, justifyContent: 'space-between' }}>
        <Box sx={{ display: 'flex', alignItems: 'center', bgcolor: '#eeeeee', borderRadius: '9999px', p: 0.5 }}>
          <Button
            size="small"
            onClick={() => setQuantity(Math.max(1, quantity - 1))}
            sx={{ minWidth: 32, fontWeight: 800, color: '#ac2d00' }}
          >
            -
          </Button>
          <Typography variant="body2" sx={{ px: 2, fontWeight: 800, fontFamily: 'monospace' }}>
            {quantity}
          </Typography>
          <Button
            size="small"
            onClick={() => setQuantity(quantity + 1)}
            sx={{ minWidth: 32, fontWeight: 800, color: '#ac2d00' }}
          >
            +
          </Button>
        </Box>
        <Button
          variant="contained"
          color="primary"
          onClick={handleAdd}
          sx={{ borderRadius: '9999px', px: 4, fontWeight: 800 }}
        >
          Add to Order • ₹{totalPrice.toFixed(0)}
        </Button>
      </DialogActions>
    </Dialog>
  );
 };
--- a/src/components/customer/MenuBrowseView.tsx
+++ b/src/components/customer/MenuBrowseView.tsx
@ -0,0 +1,542 @@
 import React, { useState, useMemo } from 'react';
 import {
  Box,
  Typography,
  Paper,
  IconButton,
  Chip,
  TextField,
  InputAdornment,
  Card,
  CardMedia,
  Badge,
  BottomNavigation,
  BottomNavigationAction,
  Button,
 } from '@mui/material';
 import AddIcon from '@mui/icons-material/Add';
 import RemoveIcon from '@mui/icons-material/Remove';
 import SearchIcon from '@mui/icons-material/Search';
 import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
 import MicIcon from '@mui/icons-material/Mic';
 import HomeIcon from '@mui/icons-material/Home';
 import MenuBookIcon from '@mui/icons-material/MenuBook';
 import TrackChangesIcon from '@mui/icons-material/TrackChanges';
 import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome';
 import StarIcon from '@mui/icons-material/Star';
 import { MENU_ITEMS, CATEGORIES } from '../../data/menuData';
 import type { MenuItem, CategoryType } from '../../data/menuData';
 import { StatusBadge } from '../common/StatusBadge';
 interface MenuBrowseViewProps {
  cart: { [itemId: string]: number };
  onUpdateCart: (itemId: string, quantity: number) => void;
  onOpenCustomization: (item: MenuItem) => void;
  onOpenVoice: () => void;
  onNavigate: (view: 'landing' | 'menu' | 'cart' | 'status' | 'bill' | 'voice') => void;
 }
 const DIETARY_FILTERS = [
  { label: 'All', value: null },
  { label: '🟢 Veg', value: 'veg' },
  { label: '🔴 Non-Veg', value: 'non-veg' },
  { label: '🌿 Jain', value: 'jain' },
 ];
 const SPICE_ICONS: Record<string, string> = {
  mild: '🟡',
  medium: '🟠',
  hot: '🔴',
  'extra-hot': '🔥',
 };
 export const MenuBrowseView: React.FC<MenuBrowseViewProps> = ({
  cart,
  onUpdateCart,
  onOpenCustomization,
  onOpenVoice,
  onNavigate,
 }) => {
  const [activeCategory, setActiveCategory] = useState<CategoryType>('All');
  const [searchQuery, setSearchQuery] = useState('');
  const [dietaryFilter, setDietaryFilter] = useState<string | null>(null);
  const [bottomNav, setBottomNav] = useState(1); // 1 = Menu
  const totalCartItems = Object.values(cart).reduce((a, b) => a + b, 0);
  const totalCartValue = Object.entries(cart).reduce((sum, [id, qty]) => {
    const item = MENU_ITEMS.find((m) => m.id === id);
    return sum + (item ? item.price * qty : 0);
  }, 0);
  const filteredItems = useMemo(() => {
    return MENU_ITEMS.filter((item) => {
      const matchCategory = activeCategory === 'All' || item.category === activeCategory;
      const matchSearch =
        !searchQuery ||
        item.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
        (item.nameHindi && item.nameHindi.includes(searchQuery)) ||
        item.description.toLowerCase().includes(searchQuery.toLowerCase());
      const matchDietary = !dietaryFilter || item.dietary === dietaryFilter;
      return matchCategory && matchSearch && matchDietary;
    });
  }, [activeCategory, searchQuery, dietaryFilter]);
  const handleBottomNav = (_: React.SyntheticEvent, newValue: number) => {
    setBottomNav(newValue);
    if (newValue === 0) onNavigate('landing');
    if (newValue === 2) {
      if (totalCartItems > 0) onNavigate('cart');
    }
    if (newValue === 3) onNavigate('status');
  };
  return (
    <Box sx={{ minHeight: '100vh', bgcolor: '#f8f5f2', display: 'flex', flexDirection: 'column' }}>
      {/* Sticky Header */}
      <Box
        sx={{
          position: 'sticky',
          top: 0,
          zIndex: 100,
          bgcolor: '#ffffff',
          borderBottom: '1px solid #f0ebe7',
          boxShadow: '0 2px 12px rgba(0,0,0,0.05)',
        }}
      >
        {/* Top bar */}
        <Box sx={{ px: 2, pt: 1.5, pb: 1, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <Box>
            <Typography variant="h6" sx={{ fontWeight: 900, color: '#ac2d00', lineHeight: 1.1 }}>
              RestroAI Menu
            </Typography>
            <Typography variant="caption" sx={{ color: '#8f7068', fontWeight: 600 }}>
              🪑 Table {sessionStorage.getItem('customer_table_id') || '12'} · Dine-In
            </Typography>
          </Box>
          <Box sx={{ display: 'flex', gap: 1 }}>
            <IconButton
              onClick={onOpenVoice}
              sx={{
                bgcolor: '#ffdbd1',
                color: '#ac2d00',
                '&:hover': { bgcolor: '#ffcab8' },
              }}
            >
              <MicIcon />
            </IconButton>
            <Badge badgeContent={totalCartItems} color="error">
              <IconButton
                onClick={() => totalCartItems > 0 && onNavigate('cart')}
                sx={{
                  bgcolor: totalCartItems > 0 ? '#ac2d00' : '#f2ede9',
                  color: totalCartItems > 0 ? '#fff' : '#8f7068',
                  '&:hover': { bgcolor: totalCartItems > 0 ? '#872100' : '#ede8e4' },
                }}
              >
                <ShoppingCartIcon />
              </IconButton>
            </Badge>
          </Box>
        </Box>
        {/* Search Bar */}
        <Box sx={{ px: 2, pb: 1 }}>
          <TextField
            fullWidth
            size="small"
            placeholder="Search dishes, e.g. biryani, paneer..."
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            slotProps={{
              input: {
                startAdornment: (
                  <InputAdornment position="start">
                    <SearchIcon sx={{ color: '#8f7068', fontSize: 18 }} />
                  </InputAdornment>
                ),
              },
            }}
            sx={{
              '& .MuiOutlinedInput-root': {
                borderRadius: '12px',
                bgcolor: '#f8f5f2',
                '& fieldset': { border: '1px solid #e4ddd8' },
              },
            }}
          />
        </Box>
        {/* Category Tabs - Horizontal Scroll */}
        <Box
          sx={{
            display: 'flex',
            gap: 0.8,
            px: 2,
            pb: 1.5,
            overflowX: 'auto',
            '&::-webkit-scrollbar': { display: 'none' },
          }}
        >
          {CATEGORIES.map((cat) => {
            const catEmoji: Record<string, string> = {
              All: '🍽️', Starters: '🥗', Biryani: '🍚', Mains: '🍛',
              Breads: '🫓', Drinks: '🥤', Desserts: '🍮', Specials: '⭐',
            };
            const isActive = activeCategory === cat;
            return (
              <Chip
                key={cat}
                label={`${catEmoji[cat]} ${cat}`}
                onClick={() => setActiveCategory(cat)}
                sx={{
                  fontWeight: 800,
                  flexShrink: 0,
                  bgcolor: isActive ? '#ac2d00' : '#ffffff',
                  color: isActive ? '#fff' : '#5b4139',
                  border: isActive ? '2px solid #ac2d00' : '1.5px solid #e4ddd8',
                  '&:hover': { bgcolor: isActive ? '#872100' : '#f5ede9' },
                  transition: 'all 0.15s ease',
                }}
              />
            );
          })}
        </Box>
        {/* Dietary Filters */}
        <Box sx={{ display: 'flex', gap: 0.8, px: 2, pb: 1.5, overflowX: 'auto', '&::-webkit-scrollbar': { display: 'none' } }}>
          {DIETARY_FILTERS.map((f) => (
            <Chip
              key={f.label}
              label={f.label}
              size="small"
              onClick={() => setDietaryFilter(f.value)}
              variant={dietaryFilter === f.value ? 'filled' : 'outlined'}
              color={dietaryFilter === f.value ? 'primary' : 'default'}
              sx={{ fontWeight: 700, flexShrink: 0 }}
            />
          ))}
        </Box>
      </Box>
      {/* AI Banner */}
      <Box sx={{ px: 2, pt: 2 }}>
        <Paper
          elevation={0}
          sx={{
            p: 2,
            borderRadius: '16px',
            background: 'linear-gradient(135deg, #ac2d00 0%, #d53e0b 100%)',
            color: '#fff',
            display: 'flex',
            alignItems: 'center',
            gap: 1.5,
            mb: 2,
            cursor: 'pointer',
          }}
          onClick={onOpenVoice}
        >
          <Box
            sx={{
              width: 40,
              height: 40,
              borderRadius: '50%',
              bgcolor: 'rgba(255,255,255,0.2)',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              flexShrink: 0,
            }}
          >
            <AutoAwesomeIcon />
          </Box>
          <Box>
            <Typography variant="body2" sx={{ fontWeight: 800 }}>
              🍛 Today's AI Pick: Hyderabadi Chicken Biryani
            </Typography>
            <Typography variant="caption" sx={{ opacity: 0.85 }}>
              Tap to voice order or browse below · ₹380
            </Typography>
          </Box>
        </Paper>
      </Box>
      {/* Menu Cards */}
      <Box sx={{ flex: 1, px: 2, pb: 20 }}>
        {activeCategory !== 'All' && (
          <Typography variant="subtitle2" sx={{ fontWeight: 800, color: '#5b4139', mb: 1.5, textTransform: 'uppercase', letterSpacing: '0.06em' }}>
            {activeCategory} ({filteredItems.length} items)
          </Typography>
        )}
        {filteredItems.length === 0 ? (
          <Box sx={{ textAlign: 'center', py: 8 }}>
            <Typography variant="h6" sx={{ fontWeight: 700, color: '#8f7068' }}>No dishes found</Typography>
            <Typography variant="body2" sx={{ color: '#b0a09a' }}>Try a different search or filter</Typography>
          </Box>
        ) : (
          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
            {filteredItems.map((item) => {
              const qty = cart[item.id] || 0;
              return (
                <Card
                  key={item.id}
                  elevation={0}
                  sx={{
                    borderRadius: '20px',
                    border: '1px solid #f0ebe7',
                    overflow: 'hidden',
                    bgcolor: '#ffffff',
                    boxShadow: '0 2px 12px rgba(0,0,0,0.04)',
                    transition: 'box-shadow 0.2s ease',
                    '&:hover': { boxShadow: '0 6px 20px rgba(0,0,0,0.08)' },
                  }}
                >
                  {/* Food Image */}
                  <Box sx={{ position: 'relative' }}>
                    <CardMedia
                      component="img"
                      height="180"
                      image={item.image}
                      alt={item.name}
                      sx={{ objectFit: 'cover' }}
                    />
                    {/* Badges on image */}
                    <Box sx={{ position: 'absolute', top: 10, left: 10, display: 'flex', flexDirection: 'column', gap: 0.5 }}>
                      {item.isChefSpecial && (
                        <Chip
                          icon={<AutoAwesomeIcon sx={{ fontSize: '14px !important' }} />}
                          label="Chef's Special"
                          size="small"
                          sx={{
                            bgcolor: 'rgba(172,45,0,0.9)',
                            color: '#fff',
                            fontWeight: 800,
                            fontSize: '0.65rem',
                            backdropFilter: 'blur(4px)',
                          }}
                        />
                      )}
                      {item.isBestseller && (
                        <Chip
                          icon={<StarIcon sx={{ fontSize: '14px !important', color: '#FFD700' }} />}
                          label="Bestseller"
                          size="small"
                          sx={{
                            bgcolor: 'rgba(0,0,0,0.7)',
                            color: '#FFD700',
                            fontWeight: 800,
                            fontSize: '0.65rem',
                            backdropFilter: 'blur(4px)',
                          }}
                        />
                      )}
                    </Box>
                    {item.spiceLevel && (
                      <Chip
                        label={`${SPICE_ICONS[item.spiceLevel]} ${item.spiceLevel}`}
                        size="small"
                        sx={{
                          position: 'absolute',
                          top: 10,
                          right: 10,
                          bgcolor: 'rgba(255,255,255,0.9)',
                          fontWeight: 700,
                          fontSize: '0.65rem',
                          textTransform: 'capitalize',
                        }}
                      />
                    )}
                  </Box>
                  {/* Card Content */}
                  <Box sx={{ p: 2 }}>
                    <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', mb: 0.5 }}>
                      <Box sx={{ flex: 1, mr: 1 }}>
                        <Typography variant="subtitle1" sx={{ fontWeight: 800, color: '#1a1c1c', lineHeight: 1.2 }}>
                          {item.name}
                        </Typography>
                        {item.nameHindi && (
                          <Typography variant="caption" sx={{ color: '#8f7068', fontWeight: 600 }}>
                            {item.nameHindi}
                          </Typography>
                        )}
                      </Box>
                      <StatusBadge dietary={item.dietary} />
                    </Box>
                    <Typography variant="body2" sx={{ color: '#6b5c57', mb: 1.5, lineHeight: 1.5, fontSize: '0.8rem' }}>
                      {item.description}
                    </Typography>
                    {/* Tags */}
                    {item.tags && item.tags.length > 0 && (
                      <Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap', mb: 1.5 }}>
                        {item.tags.slice(0, 3).map((tag) => (
                          <Chip
                            key={tag}
                            label={tag}
                            size="small"
                            sx={{ fontSize: '0.62rem', fontWeight: 700, bgcolor: '#f8f5f2', height: 20 }}
                          />
                        ))}
                      </Box>
                    )}
                    {/* Price + Action Row */}
                    <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                      <Box>
                        <Typography variant="h6" sx={{ fontWeight: 900, color: '#ac2d00' }}>
                          ₹{item.price}
                        </Typography>
                        <Typography variant="caption" sx={{ color: '#8f7068' }}>
                          ⏱ {item.prepTimeMinutes} min
                        </Typography>
                      </Box>
                      {qty === 0 ? (
                        <Button
                          variant="outlined"
                          size="small"
                          startIcon={<AddIcon />}
                          onClick={() => onOpenCustomization(item)}
                          sx={{
                            borderRadius: '9999px',
                            fontWeight: 800,
                            color: '#ac2d00',
                            borderColor: '#ac2d00',
                            px: 2,
                            '&:hover': { bgcolor: '#ffdbd1', borderColor: '#ac2d00' },
                          }}
                        >
                          Add
                        </Button>
                      ) : (
                        <Box
                          sx={{
                            display: 'flex',
                            alignItems: 'center',
                            bgcolor: '#ac2d00',
                            borderRadius: '9999px',
                            overflow: 'hidden',
                          }}
                        >
                          <IconButton
                            size="small"
                            onClick={() => onUpdateCart(item.id, qty - 1)}
                            sx={{ color: '#fff', p: 0.8 }}
                          >
                            <RemoveIcon fontSize="small" />
                          </IconButton>
                          <Typography sx={{ px: 1.5, color: '#fff', fontWeight: 900, fontFamily: 'monospace' }}>
                            {qty}
                          </Typography>
                          <IconButton
                            size="small"
                            onClick={() => onUpdateCart(item.id, qty + 1)}
                            sx={{ color: '#fff', p: 0.8 }}
                          >
                            <AddIcon fontSize="small" />
                          </IconButton>
                        </Box>
                      )}
                    </Box>
                  </Box>
                </Card>
              );
            })}
          </Box>
        )}
      </Box>
      {/* Floating Cart Pill */}
      {totalCartItems > 0 && (
        <Box
          sx={{
            position: 'fixed',
            bottom: 72,
            left: '50%',
            transform: 'translateX(-50%)',
            zIndex: 200,
          }}
        >
          <Paper
            elevation={8}
            onClick={() => onNavigate('cart')}
            sx={{
              display: 'flex',
              alignItems: 'center',
              gap: 2,
              px: 3,
              py: 1.5,
              borderRadius: '9999px',
              bgcolor: '#ac2d00',
              color: '#fff',
              cursor: 'pointer',
              boxShadow: '0 8px 28px rgba(172,45,0,0.45)',
              '&:hover': { bgcolor: '#872100' },
              transition: 'all 0.2s ease',
              minWidth: 260,
              justifyContent: 'space-between',
            }}
          >
            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
              <Badge badgeContent={totalCartItems} color="warning" sx={{ '& .MuiBadge-badge': { fontWeight: 800 } }}>
                <ShoppingCartIcon />
              </Badge>
              <Typography variant="body2" sx={{ fontWeight: 800 }}>
                {totalCartItems} item{totalCartItems > 1 ? 's' : ''} in cart
              </Typography>
            </Box>
            <Typography variant="subtitle1" sx={{ fontWeight: 900 }}>
              ₹{totalCartValue.toFixed(0)} →
            </Typography>
          </Paper>
        </Box>
      )}
      {/* Bottom Navigation */}
      <Paper
        elevation={8}
        sx={{
          position: 'fixed',
          bottom: 0,
          left: 0,
          right: 0,
          zIndex: 100,
          borderTop: '1px solid #f0ebe7',
        }}
      >
        <BottomNavigation
          value={bottomNav}
          onChange={handleBottomNav}
          sx={{ bgcolor: '#ffffff', height: 64 }}
        >
          <BottomNavigationAction
            label="Home"
            icon={<HomeIcon />}
            sx={{ '&.Mui-selected': { color: '#ac2d00' } }}
          />
          <BottomNavigationAction
            label="Menu"
            icon={<MenuBookIcon />}
            sx={{ '&.Mui-selected': { color: '#ac2d00' } }}
          />
          <BottomNavigationAction
            label="Cart"
            icon={
              <Badge badgeContent={totalCartItems} color="error">
                <ShoppingCartIcon />
              </Badge>
            }
            sx={{ '&.Mui-selected': { color: '#ac2d00' } }}
          />
          <BottomNavigationAction
            label="My Order"
            icon={<TrackChangesIcon />}
            sx={{ '&.Mui-selected': { color: '#ac2d00' } }}
          />
        </BottomNavigation>
      </Paper>
    </Box>
  );
 };
--- a/src/components/customer/OrderStatusView.tsx
+++ b/src/components/customer/OrderStatusView.tsx
@ -0,0 +1,284 @@
 import React, { useState, useEffect } from 'react';
 import {
  Box,
  Container,
  Typography,
  Paper,
  Button,
  Chip,
  Alert,
  Stepper,
  Step,
  StepLabel,
  StepContent,
 } from '@mui/material';
 import AccessTimeIcon from '@mui/icons-material/AccessTime';
 import NotificationsActiveIcon from '@mui/icons-material/NotificationsActive';
 import AddIcon from '@mui/icons-material/Add';
 import PaymentIcon from '@mui/icons-material/Payment';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import RestaurantIcon from '@mui/icons-material/Restaurant';
 import DeliveryDiningIcon from '@mui/icons-material/DeliveryDining';
 import SentimentSatisfiedAltIcon from '@mui/icons-material/SentimentSatisfiedAlt';
 import { api, RestroWebSocket, subscribeToWsEvents } from '../../services/api';
 interface OrderStatusViewProps {
  onNavigate: (view: 'landing' | 'menu' | 'cart' | 'status' | 'bill' | 'voice') => void;
 }
 const ORDER_STEPS = [
  {
    label: 'Order Confirmed',
    description: 'Your order has been received and sent to the kitchen.',
    icon: <CheckCircleIcon />,
    time: 'Just now',
  },
  {
    label: 'Being Prepared',
    description: 'Chef Ravi is preparing your order with fresh ingredients.',
    icon: <RestaurantIcon />,
    time: '~10 min',
  },
  {
    label: 'Ready for Service',
    description: 'Your dishes are plated and ready to be brought to your table.',
    icon: <DeliveryDiningIcon />,
    time: '~15 min',
  },
  {
    label: 'Order Served 🎉',
    description: 'Your meal has been served. Enjoy your dining experience!',
    icon: <SentimentSatisfiedAltIcon />,
    time: '~20 min',
  },
 ];
 export const OrderStatusView: React.FC<OrderStatusViewProps> = ({ onNavigate }) => {
  const [activeStep, setActiveStep] = useState<number>(0);
  const [ticketNum, setTicketNum] = useState<string>('---');
  const [tableNum, setTableNum] = useState<string>('12');
  const [waiterNotified, setWaiterNotified] = useState<boolean>(false);
  const [eta, setEta] = useState(15);
  const sessionId = sessionStorage.getItem('customer_session_id') || '112';
  const loadOrder = async () => {
    try {
      const order = await api.getOrderForSession(sessionId);
      if (order) {
        setTicketNum(order.ticketNumber || '105');
        setTableNum(order.tableNumber || sessionStorage.getItem('customer_table_id') || '12');
        let step = 0;
        if (order.status === 'served') step = 3;
        else if (order.status === 'ready') step = 2;
        else if (order.status === 'in_preparation' || order.status === 'preparing') step = 1;
        setActiveStep(step);
        setEta(step === 0 ? 15 : step === 1 ? 10 : step === 2 ? 3 : 0);
      }
    } catch (e) {
      console.error('Failed to load active order', e);
    }
  };
  useEffect(() => {
    loadOrder();
    // Start WebSocket
    const ws = new RestroWebSocket('orders', sessionId);
    ws.connect();
    const unsubscribe = subscribeToWsEvents((event) => {
      if (event.type === 'kds.item_updated') {
        loadOrder();
      }
    });
    return () => {
      ws.close();
      unsubscribe();
    };
  }, []);
  // Countdown timer
  useEffect(() => {
    if (eta <= 0) return;
    const timer = setInterval(() => setEta((prev) => Math.max(0, prev - 1)), 60000);
    return () => clearInterval(timer);
  }, [eta]);
  const handleCallWaiter = () => {
    setWaiterNotified(true);
    setTimeout(() => setWaiterNotified(false), 5000);
  };
  return (
    <Box sx={{ minHeight: '100vh', bgcolor: '#f8f5f2', pb: 12 }}>
      {/* Header */}
      <Box
        sx={{
          position: 'sticky',
          top: 0,
          zIndex: 50,
          bgcolor: '#ffffff',
          borderBottom: '1px solid #f0ebe7',
          py: 1.5,
          px: 2,
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          boxShadow: '0 2px 8px rgba(0,0,0,0.05)',
        }}
      >
        <Box>
          <Typography variant="h6" sx={{ fontWeight: 800, color: '#1a1c1c' }}>
            Live Order Status
          </Typography>
          <Typography variant="caption" sx={{ color: '#8f7068' }}>
            Ticket #{ticketNum} · Table {tableNum}
          </Typography>
        </Box>
        <Chip
          icon={<AccessTimeIcon fontSize="small" />}
          label={eta > 0 ? `ETA ~${eta} min` : 'Ready soon!'}
          sx={{
            fontWeight: 800,
            bgcolor: '#ffdbd1',
            color: '#ac2d00',
          }}
        />
      </Box>
      <Container maxWidth="sm" sx={{ pt: 3 }}>
        {waiterNotified && (
          <Alert severity="success" sx={{ mb: 2, fontWeight: 700, borderRadius: '12px' }}>
            🔔 Waiter has been notified to visit Table {tableNum}!
          </Alert>
        )}
        {/* Live Status Card */}
        <Paper
          elevation={0}
          sx={{
            p: 3,
            mb: 3,
            borderRadius: '20px',
            background: 'linear-gradient(135deg, #fff9f7 0%, #ffdbd1 100%)',
            border: '1px solid #e4beb4',
          }}
        >
          <Typography variant="h5" sx={{ fontWeight: 900, color: '#ac2d00', mb: 0.5 }}>
            {activeStep === 0 && '✅ Order Placed!'}
            {activeStep === 1 && '👨‍🍳 Chef is Cooking...'}
            {activeStep === 2 && '🍽️ Almost Ready!'}
            {activeStep === 3 && '🎉 Meal Served!'}
          </Typography>
          <Typography variant="body2" sx={{ color: '#5b4139', mb: 3 }}>
            {ORDER_STEPS[activeStep].description}
          </Typography>
          {/* Vertical Stepper */}
          <Stepper activeStep={activeStep} orientation="vertical">
            {ORDER_STEPS.map((step, index) => (
              <Step key={step.label} completed={index < activeStep}>
                <StepLabel
                  slotProps={{
                    label: {
                      sx: {
                        fontWeight: index <= activeStep ? 800 : 500,
                        color: index <= activeStep ? '#ac2d00' : '#8f7068',
                      },
                    },
                  }}
                >
                  <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%' }}>
                    <span>{step.label}</span>
                    <Typography variant="caption" sx={{ color: '#8f7068', fontWeight: 600 }}>
                      {step.time}
                    </Typography>
                  </Box>
                </StepLabel>
                {index === activeStep && (
                  <StepContent>
                    <Typography variant="caption" sx={{ color: '#5b4139' }}>
                      {step.description}
                    </Typography>
                  </StepContent>
                )}
              </Step>
            ))}
          </Stepper>
        </Paper>
        {/* Ordered Items Summary */}
        <Paper elevation={0} sx={{ p: 2.5, mb: 3, borderRadius: '16px', border: '1px solid #f0ebe7', bgcolor: '#ffffff' }}>
          <Typography variant="subtitle2" sx={{ fontWeight: 800, color: '#1a1c1c', mb: 1.5 }}>
            🧾 Your Order Summary
          </Typography>
          {[
            { name: 'Hyderabadi Chicken Biryani', qty: 1, price: 380 },
            { name: 'Paneer Tikka', qty: 1, price: 280 },
            { name: 'Garlic Naan', qty: 2, price: 80 },
            { name: 'Mango Lassi', qty: 2, price: 120 },
          ].map((item, idx) => (
            <Box key={idx} sx={{ display: 'flex', justifyContent: 'space-between', py: 0.6, borderBottom: idx < 3 ? '1px solid #f5f0ec' : 'none' }}>
              <Typography variant="body2" sx={{ fontWeight: 600 }}>
                {item.qty}× {item.name}
              </Typography>
              <Typography variant="body2" sx={{ fontWeight: 800, color: '#ac2d00' }}>
                ₹{item.qty * item.price}
              </Typography>
            </Box>
          ))}
          <Box sx={{ display: 'flex', justifyContent: 'space-between', mt: 1.5, pt: 1, borderTop: '2px solid #f0ebe7' }}>
            <Typography variant="subtitle2" sx={{ fontWeight: 900 }}>Estimated Total</Typography>
            <Typography variant="subtitle2" sx={{ fontWeight: 900, color: '#ac2d00' }}>₹960</Typography>
          </Box>
        </Paper>
        {/* Action Buttons */}
        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
          <Button
            fullWidth
            variant="outlined"
            size="large"
            onClick={handleCallWaiter}
            startIcon={<NotificationsActiveIcon />}
            sx={{
              py: 1.5,
              borderRadius: '12px',
              fontWeight: 800,
              color: '#845000',
              borderColor: '#845000',
              '&:hover': { borderColor: '#845000', bgcolor: '#fff8ee' },
            }}
          >
            Call Waiter to Table 12
          </Button>
          <Box sx={{ display: 'flex', gap: 1.5 }}>
            <Button
              fullWidth
              variant="outlined"
              onClick={() => onNavigate('menu')}
              startIcon={<AddIcon />}
              sx={{ py: 1.5, borderRadius: '12px', fontWeight: 800, color: '#ac2d00', borderColor: '#ac2d00' }}
            >
              Add More
            </Button>
            <Button
              fullWidth
              variant="contained"
              onClick={() => onNavigate('bill')}
              startIcon={<PaymentIcon />}
              sx={{ py: 1.5, borderRadius: '12px', fontWeight: 800, bgcolor: '#ac2d00', '&:hover': { bgcolor: '#872100' } }}
            >
              Request Bill
            </Button>
          </Box>
        </Box>
      </Container>
    </Box>
  );
 };
--- a/src/components/customer/TableLandingView.tsx
+++ b/src/components/customer/TableLandingView.tsx
@ -0,0 +1,338 @@
 import React, { useState } from 'react';
 import {
  Box,
  Container,
  Typography,
  Button,
  Paper,
  Chip,
  Grid,
  IconButton,
 } from '@mui/material';
 import RestaurantMenuIcon from '@mui/icons-material/RestaurantMenu';
 import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome';
 import LanguageIcon from '@mui/icons-material/Language';
 import TranslateIcon from '@mui/icons-material/Translate';
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import WifiIcon from '@mui/icons-material/Wifi';
 import MicIcon from '@mui/icons-material/Mic';
 import LockIcon from '@mui/icons-material/Lock';
 interface TableLandingViewProps {
  onStartOrdering: (language: string) => void;
  onOpenStaffLogin?: () => void;
  onOpenVoice?: () => void;
 }
 export const TableLandingView: React.FC<TableLandingViewProps> = ({
  onStartOrdering,
  onOpenStaffLogin,
  onOpenVoice,
 }) => {
  const [selectedLang, setSelectedLang] = useState<'english' | 'hindi' | 'hinglish'>('english');
  const languages = [
    {
      id: 'english',
      emoji: '🇬🇧',
      name: 'English',
      subText: 'English',
      icon: <LanguageIcon fontSize="large" />,
    },
    {
      id: 'hindi',
      emoji: '🇮🇳',
      name: 'हिन्दी',
      subText: 'Hindi',
      icon: <Typography variant="h5" sx={{ fontWeight: 900, lineHeight: 1 }}>नमस्ते</Typography>,
    },
    {
      id: 'hinglish',
      emoji: '🤝',
      name: 'Hinglish',
      subText: 'Mix',
      icon: <TranslateIcon fontSize="large" />,
    },
  ];
  return (
    <Box
      sx={{
        minHeight: '100vh',
        bgcolor: '#fff9f7',
        color: '#1a1c1c',
        position: 'relative',
        overflow: 'hidden',
        display: 'flex',
        flexDirection: 'column',
      }}
    >
      {/* Hero Image Banner */}
      <Box
        sx={{
          height: 260,
          position: 'relative',
          backgroundImage: `url('https://images.unsplash.com/photo-1585937421612-70a008356fbe?w=800&auto=format&fit=crop&q=80')`,
          backgroundSize: 'cover',
          backgroundPosition: 'center',
          flexShrink: 0,
        }}
      >
        {/* Dark overlay gradient */}
        <Box
          sx={{
            position: 'absolute',
            inset: 0,
            background: 'linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.6) 100%)',
          }}
        />
        {/* Top bar inside hero */}
        <Box
          sx={{
            position: 'absolute',
            top: 0,
            left: 0,
            right: 0,
            px: 2.5,
            py: 2,
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
          }}
        >
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
            <Box
              sx={{
                width: 36,
                height: 36,
                borderRadius: '10px',
                background: 'linear-gradient(135deg, #ac2d00, #d53e0b)',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                color: '#fff',
                boxShadow: '0 2px 8px rgba(172,45,0,0.5)',
              }}
            >
              <RestaurantMenuIcon fontSize="small" />
            </Box>
            <Typography variant="h6" sx={{ fontWeight: 900, color: '#fff', letterSpacing: '-0.02em' }}>
              RestroAI
            </Typography>
          </Box>
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
            <Chip
              label={`🪑 Table ${(() => {
                const params = new URLSearchParams(window.location.search);
                const tableParam = params.get('table');
                if (tableParam) {
                  const parsed = parseInt(tableParam);
                  if (!isNaN(parsed)) return parsed;
                }
                const path = window.location.pathname;
                const match = path.match(/\/scan\/(\d+)/);
                if (match) {
                  return parseInt(match[1]);
                }
                return 12;
              })()}`}
              sx={{
                fontWeight: 800,
                fontFamily: '"JetBrains Mono", monospace',
                bgcolor: 'rgba(255,255,255,0.2)',
                color: '#fff',
                backdropFilter: 'blur(8px)',
                border: '1px solid rgba(255,255,255,0.35)',
              }}
            />
            <IconButton size="small" onClick={onOpenStaffLogin} sx={{ color: 'rgba(255,255,255,0.7)' }}>
              <LockIcon fontSize="small" />
            </IconButton>
          </Box>
        </Box>
        {/* Hero text at bottom of image */}
        <Box sx={{ position: 'absolute', bottom: 0, left: 0, right: 0, px: 2.5, pb: 2.5 }}>
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.8, mb: 0.5 }}>
            <AutoAwesomeIcon sx={{ fontSize: 14, color: '#ffb5a0' }} />
            <Typography variant="caption" sx={{ fontWeight: 800, color: '#ffb5a0', letterSpacing: '0.05em' }}>
              AI-POWERED DINING
            </Typography>
          </Box>
          <Typography variant="h5" sx={{ fontWeight: 900, color: '#fff', lineHeight: 1.2, mb: 0.5 }}>
            Scan. Order. Enjoy.
          </Typography>
          <Typography variant="body2" sx={{ color: 'rgba(255,255,255,0.8)', fontWeight: 500 }}>
            Fresh Indian cuisine, served with precision & joy
          </Typography>
        </Box>
      </Box>
      {/* Content Area */}
      <Box sx={{ flex: 1, overflow: 'auto', pb: 4 }}>
        <Container maxWidth="xs" sx={{ pt: 3 }}>
          {/* AI Voice Section */}
          <Paper
            elevation={0}
            sx={{
              p: 2.5,
              mb: 3,
              borderRadius: '20px',
              background: 'linear-gradient(135deg, #ffdbd1 0%, #fff3f0 100%)',
              border: '1.5px solid #e4beb4',
              cursor: 'pointer',
              transition: 'all 0.2s ease',
              '&:hover': { boxShadow: '0 8px 24px rgba(172,45,0,0.15)' },
            }}
            onClick={onOpenVoice}
          >
            <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
              <Box
                sx={{
                  width: 52,
                  height: 52,
                  borderRadius: '50%',
                  background: 'linear-gradient(135deg, #ac2d00, #d53e0b)',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  color: '#fff',
                  flexShrink: 0,
                  boxShadow: '0 4px 12px rgba(172,45,0,0.4)',
                  animation: 'pulse 2.5s ease-in-out infinite',
                }}
              >
                <MicIcon />
              </Box>
              <Box>
                <Typography variant="subtitle1" sx={{ fontWeight: 800, color: '#ac2d00', lineHeight: 1.2 }}>
                  Order with Voice 🎙️
                </Typography>
                <Typography variant="caption" sx={{ color: '#5b4139', fontWeight: 600 }}>
                  Tap & say your order in English or Hindi
                </Typography>
              </Box>
              <ArrowForwardIcon sx={{ color: '#ac2d00', ml: 'auto' }} />
            </Box>
          </Paper>
          {/* Language Selection */}
          <Box sx={{ mb: 3 }}>
            <Typography
              variant="caption"
              sx={{
                fontWeight: 800,
                color: '#8f7068',
                letterSpacing: '0.08em',
                display: 'block',
                mb: 1.5,
                textTransform: 'uppercase',
              }}
            >
              Choose Your Language
            </Typography>
            <Grid container spacing={1.5}>
              {languages.map((lang) => {
                const isSelected = selectedLang === lang.id;
                return (
                  <Grid size={{ xs: 4 }} key={lang.id}>
                    <Paper
                      elevation={isSelected ? 3 : 0}
                      onClick={() => setSelectedLang(lang.id as 'english' | 'hindi' | 'hinglish')}
                      sx={{
                        p: 2,
                        borderRadius: '16px',
                        cursor: 'pointer',
                        display: 'flex',
                        flexDirection: 'column',
                        alignItems: 'center',
                        gap: 0.8,
                        backgroundColor: isSelected ? '#ac2d00' : '#f2ede9',
                        color: isSelected ? '#ffffff' : '#5b403d',
                        border: isSelected ? '2px solid #872100' : '2px solid transparent',
                        transition: 'all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1)',
                        '&:hover': {
                          backgroundColor: isSelected ? '#872100' : '#e8e2de',
                          transform: 'scale(1.04)',
                        },
                      }}
                    >
                      <Typography sx={{ fontSize: '1.6rem', lineHeight: 1 }}>{lang.emoji}</Typography>
                      <Typography variant="body2" sx={{ fontWeight: 800, textAlign: 'center', lineHeight: 1.2 }}>
                        {lang.name}
                      </Typography>
                    </Paper>
                  </Grid>
                );
              })}
            </Grid>
          </Box>
          {/* Today's Highlights */}
          <Paper
            elevation={0}
            sx={{
              p: 2,
              mb: 3,
              borderRadius: '16px',
              bgcolor: '#f6f7f8',
              border: '1px solid #e0e0e0',
            }}
          >
            <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.8, mb: 1.5 }}>
              <AutoAwesomeIcon sx={{ fontSize: 16, color: '#ac2d00' }} />
              <Typography variant="caption" sx={{ fontWeight: 800, color: '#ac2d00', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
                Today's Must-Try
              </Typography>
            </Box>
            <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
              {['Hyderabadi Biryani ₹380', 'Butter Chicken ₹360', "Chef's Thali ₹550"].map((item) => (
                <Chip
                  key={item}
                  label={item}
                  size="small"
                  sx={{ fontWeight: 700, bgcolor: '#fff', border: '1px solid #e4beb4' }}
                />
              ))}
            </Box>
          </Paper>
          {/* Main CTA Button */}
          <Button
            fullWidth
            variant="contained"
            size="large"
            onClick={() => onStartOrdering(selectedLang)}
            endIcon={<ArrowForwardIcon />}
            sx={{
              py: 2,
              borderRadius: '9999px',
              fontSize: '1.1rem',
              fontWeight: 900,
              background: 'linear-gradient(135deg, #ac2d00 0%, #d53e0b 100%)',
              boxShadow: '0 10px 28px rgba(172, 45, 0, 0.4)',
              '&:hover': {
                background: 'linear-gradient(135deg, #872100 0%, #ac2d00 100%)',
                boxShadow: '0 12px 32px rgba(172, 45, 0, 0.5)',
              },
              transition: 'all 0.25s ease',
            }}
          >
            Browse Full Menu
          </Button>
          {/* Footer */}
          <Box sx={{ mt: 3, display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 1, color: '#8f7068' }}>
            <WifiIcon fontSize="small" />
            <Typography variant="caption" sx={{ fontWeight: 600 }}>
              Free WiFi: RestroAI_Guest
            </Typography>
          </Box>
        </Container>
      </Box>
    </Box>
  );
 };
--- a/src/components/customer/VoiceAssistantModal.tsx
+++ b/src/components/customer/VoiceAssistantModal.tsx
@ -0,0 +1,440 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import {
  Box,
  Drawer,
  Typography,
  IconButton,
  Chip,
  Paper,
  Alert,
  Button,
  Divider,
  Fade,
 } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
 import MicIcon from '@mui/icons-material/Mic';
 import StopIcon from '@mui/icons-material/Stop';
 import GraphicEqIcon from '@mui/icons-material/GraphicEq';
 import SmartToyIcon from '@mui/icons-material/SmartToy';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import AddShoppingCartIcon from '@mui/icons-material/AddShoppingCart';
 import VolumeUpIcon from '@mui/icons-material/VolumeUp';
 import { MENU_ITEMS } from '../../data/menuData';
 import type { MenuItem } from '../../data/menuData';
 import { useSpeechRecognition } from '../../hooks/useSpeechRecognition';
 import { useSpeechSynthesis } from '../../hooks/useSpeechSynthesis';
 import type { VoiceState } from '../../hooks/useSpeechRecognition';
 interface DetectedItem {
  menuItem: MenuItem;
  qty: number;
 }
 interface VoiceAssistantModalProps {
  open: boolean;
  onClose: () => void;
  onAddToCart: (itemId: string, quantity: number) => void;
 }
 // Detect menu items from voice transcript
 function parseTranscriptToItems(text: string): DetectedItem[] {
  const lower = text.toLowerCase();
  const detectedItems: DetectedItem[] = [];
  for (const item of MENU_ITEMS) {
    const itemNameLower = item.name.toLowerCase();
    // Check for item name in transcript
    if (lower.includes(itemNameLower) || (item.nameHindi && lower.includes(item.nameHindi.toLowerCase()))) {
      // Try to detect quantity (look for digits near the item name)
      let qty = 1;
      const qtxMatch = lower.match(/(\d+)\s*(?:plate|order|piece|nos|number)?(?:of\s+)?(?:\w+\s+)*/);
      if (qtxMatch) {
        const num = parseInt(qtxMatch[1], 10);
        if (num >= 1 && num <= 10) qty = num;
      }
      if (/\btwo\b|\bdo\b/i.test(lower)) qty = 2;
      if (/\bthree\b|\bteen\b/i.test(lower)) qty = 3;
      if (/\bfour\b|\bchar\b/i.test(lower)) qty = 4;
      // avoid duplicates
      if (!detectedItems.find((d) => d.menuItem.id === item.id)) {
        detectedItems.push({ menuItem: item, qty });
      }
    }
  }
  return detectedItems;
 }
 const QUICK_COMMANDS = [
  { label: '2 Butter Chicken aur Naan', text: '2 butter chicken and 2 garlic naan please' },
  { label: 'Hyderabadi Chicken Biryani', text: 'one hyderabadi chicken biryani for table 12' },
  { label: 'Veg Thali with Lassi', text: "chef's thali and one mango lassi" },
  { label: 'Paneer Tikka Starter', text: 'paneer tikka and masala chai' },
  { label: 'Seekh Kebab + Rogan Josh', text: 'seekh kebab starter and rogan josh main' },
 ];
 export const VoiceAssistantModal: React.FC<VoiceAssistantModalProps> = ({
  open,
  onClose,
  onAddToCart,
 }) => {
  const [internalVoiceState, setInternalVoiceState] = useState<VoiceState>('idle');
  const [detectedItems, setDetectedItems] = useState<DetectedItem[]>([]);
  const [confirmed, setConfirmed] = useState(false);
  const [selectedLang, setSelectedLang] = useState<'en-IN' | 'hi-IN'>('en-IN');
  const {
    voiceState: recognitionState,
    transcript,
    interimTranscript,
    isSupported,
    startListening,
    stopListening,
    resetTranscript,
    error,
  } = useSpeechRecognition();
  const { speak, cancel } = useSpeechSynthesis((s) => setInternalVoiceState(s));
  const voiceState = internalVoiceState !== 'idle' ? internalVoiceState : recognitionState;
  // Parse items when transcript updates
  useEffect(() => {
    if (transcript.trim().length > 0 && recognitionState === 'thinking') {
      const items = parseTranscriptToItems(transcript);
      setDetectedItems(items);
      setInternalVoiceState('thinking');
      // AI confirmation response via TTS
      if (items.length > 0) {
        const itemList = items.map((d) => `${d.qty} ${d.menuItem.name}`).join(', ');
        setTimeout(() => {
          speak(
            `Got it! I found ${items.length} item${items.length > 1 ? 's' : ''}: ${itemList}. Please confirm to add them to your cart.`,
            selectedLang,
            () => setInternalVoiceState('idle')
          );
        }, 500);
      } else {
        setTimeout(() => {
          speak(
            "Sorry, I couldn't identify any items from your order. Please try again or use the quick commands below.",
            selectedLang,
            () => setInternalVoiceState('idle')
          );
          setInternalVoiceState('idle');
        }, 400);
      }
    }
  }, [transcript, recognitionState]);
  const handleClose = useCallback(() => {
    cancel();
    resetTranscript();
    setDetectedItems([]);
    setConfirmed(false);
    setInternalVoiceState('idle');
    onClose();
  }, [cancel, resetTranscript, onClose]);
  const handleMicToggle = () => {
    if (voiceState === 'listening') {
      stopListening();
    } else {
      setDetectedItems([]);
      setConfirmed(false);
      resetTranscript();
      startListening(selectedLang);
    }
  };
  const handleQuickCommand = (text: string) => {
    const items = parseTranscriptToItems(text);
    setDetectedItems(items);
    setInternalVoiceState('thinking');
    if (items.length > 0) {
      const itemList = items.map((d) => `${d.qty} ${d.menuItem.name}`).join(', ');
      speak(
        `Great choice! Found ${itemList}. Tap confirm to add to your cart.`,
        selectedLang,
        () => setInternalVoiceState('idle')
      );
    }
  };
  const handleConfirm = () => {
    detectedItems.forEach((d) => onAddToCart(d.menuItem.id, d.qty));
    setConfirmed(true);
    speak('Items added to your cart! Enjoy your meal.', selectedLang);
    setTimeout(() => {
      handleClose();
    }, 2000);
  };
  const orbColor = {
    idle: { bg: 'linear-gradient(135deg, #ac2d00, #d53e0b)', shadow: '0 8px 24px rgba(172,45,0,0.4)' },
    listening: { bg: 'linear-gradient(135deg, #d53e0b, #e75a2b)', shadow: '0 0 0 16px rgba(213,62,11,0.2), 0 0 0 32px rgba(172,45,0,0.1)' },
    thinking: { bg: 'linear-gradient(135deg, #845000, #b07000)', shadow: '0 8px 24px rgba(132,80,0,0.5)' },
    speaking: { bg: 'linear-gradient(135deg, #006a2e, #009c44)', shadow: '0 0 0 16px rgba(0,106,46,0.2), 0 0 0 32px rgba(0,106,46,0.1)' },
    error: { bg: 'linear-gradient(135deg, #ba1a1a, #ff5449)', shadow: '0 8px 24px rgba(186,26,26,0.5)' },
  };
  const orbLabel = {
    idle: 'Tap to Speak',
    listening: '🎙️ Listening...',
    thinking: '🤔 Processing...',
    speaking: '🔊 AI Speaking...',
    error: '⚠️ Try Again',
  };
  return (
    <Drawer
      anchor="bottom"
      open={open}
      onClose={handleClose}
      slotProps={{
        paper: {
          sx: {
            borderTopLeftRadius: 24,
            borderTopRightRadius: 24,
            maxHeight: '92vh',
            overflow: 'hidden',
          },
        },
      }}
    >
      <Box sx={{ display: 'flex', flexDirection: 'column', height: '100%', maxHeight: '92vh' }}>
        {/* Handle Bar */}
        <Box sx={{ display: 'flex', justifyContent: 'center', pt: 1.5, pb: 0.5 }}>
          <Box sx={{ width: 40, height: 4, borderRadius: 2, bgcolor: '#e0e0e0' }} />
        </Box>
        {/* Header */}
        <Box sx={{ px: 3, pb: 2, pt: 1, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
            <SmartToyIcon sx={{ color: '#ac2d00', fontSize: 28 }} />
            <Box>
              <Typography variant="h6" sx={{ fontWeight: 800, color: '#1a1c1c', lineHeight: 1.1 }}>
                AI Voice Assistant
              </Typography>
              <Typography variant="caption" sx={{ color: '#546067', fontWeight: 600 }}>
                Speak your order naturally in English or Hindi
              </Typography>
            </Box>
          </Box>
          <IconButton onClick={handleClose} size="small">
            <CloseIcon />
          </IconButton>
        </Box>
        {/* Scrollable Body */}
        <Box sx={{ flex: 1, overflowY: 'auto', px: 3, pb: 3 }}>
          {!isSupported && (
            <Alert severity="warning" sx={{ mb: 2, fontWeight: 700 }}>
              Voice recognition requires Google Chrome browser. You can still use quick commands below.
            </Alert>
          )}
          {error && (
            <Alert severity="error" sx={{ mb: 2, fontWeight: 700 }}>
              {error}
            </Alert>
          )}
          {/* Voice Orb */}
          <Box sx={{ textAlign: 'center', py: 3 }}>
            <Box
              onClick={handleMicToggle}
              sx={{
                width: 120,
                height: 120,
                borderRadius: '50%',
                background: orbColor[voiceState].bg,
                boxShadow: orbColor[voiceState].shadow,
                display: 'inline-flex',
                alignItems: 'center',
                justifyContent: 'center',
                cursor: 'pointer',
                transition: 'all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)',
                transform: voiceState === 'listening' || voiceState === 'speaking' ? 'scale(1.12)' : 'scale(1)',
                mb: 2,
              }}
            >
              {voiceState === 'listening' ? (
                <GraphicEqIcon sx={{ color: '#fff', fontSize: 52 }} />
              ) : voiceState === 'speaking' ? (
                <VolumeUpIcon sx={{ color: '#fff', fontSize: 52 }} />
              ) : voiceState === 'thinking' ? (
                <SmartToyIcon sx={{ color: '#fff', fontSize: 52 }} />
              ) : (
                <MicIcon sx={{ color: '#fff', fontSize: 52 }} />
              )}
            </Box>
            <Typography variant="subtitle1" sx={{ fontWeight: 800, color: '#ac2d00', mb: 0.5 }}>
              {orbLabel[voiceState]}
            </Typography>
            {voiceState === 'listening' && (
              <Button
                variant="outlined"
                size="small"
                startIcon={<StopIcon />}
                onClick={stopListening}
                sx={{ fontWeight: 700, color: '#ac2d00', borderColor: '#ac2d00' }}
              >
                Stop & Process
              </Button>
            )}
            {/* Language Toggle */}
            <Box sx={{ display: 'flex', justifyContent: 'center', gap: 1, mt: 1.5 }}>
              {['en-IN', 'hi-IN'].map((lang) => (
                <Chip
                  key={lang}
                  label={lang === 'en-IN' ? '🇮🇳 English' : '🇮🇳 हिन्दी'}
                  size="small"
                  clickable
                  onClick={() => setSelectedLang(lang as 'en-IN' | 'hi-IN')}
                  color={selectedLang === lang ? 'primary' : 'default'}
                  variant={selectedLang === lang ? 'filled' : 'outlined'}
                  sx={{ fontWeight: 700 }}
                />
              ))}
            </Box>
          </Box>
          {/* Live Transcript */}
          {(transcript || interimTranscript) && (
            <Paper
              elevation={0}
              sx={{
                p: 2,
                mb: 2,
                borderRadius: '12px',
                bgcolor: '#f6f7f8',
                border: '2px solid #ac2d00',
              }}
            >
              <Typography variant="caption" sx={{ fontWeight: 800, color: '#ac2d00', display: 'block', mb: 0.5 }}>
                WHAT I HEARD:
              </Typography>
              <Typography variant="body2" sx={{ fontWeight: 700, fontStyle: 'italic', color: '#1a1c1c' }}>
                "{transcript}{interimTranscript && <span style={{ color: '#9e9e9e' }}>{interimTranscript}</span>}"
              </Typography>
            </Paper>
          )}
          {/* Detected Items */}
          <Fade in={detectedItems.length > 0}>
            <Box>
              {detectedItems.length > 0 && (
                <Paper
                  elevation={0}
                  sx={{
                    p: 2.5,
                    mb: 2,
                    borderRadius: '16px',
                    border: '1px solid #c8e6c9',
                    bgcolor: '#f1f8f2',
                  }}
                >
                  <Typography variant="subtitle2" sx={{ fontWeight: 800, color: '#1b5e20', mb: 1.5 }}>
                    ✅ Items Detected:
                  </Typography>
                  {detectedItems.map((d) => (
                    <Box
                      key={d.menuItem.id}
                      sx={{
                        display: 'flex',
                        justifyContent: 'space-between',
                        alignItems: 'center',
                        py: 0.8,
                        borderBottom: '1px solid rgba(0,0,0,0.06)',
                      }}
                    >
                      <Box>
                        <Typography variant="body2" sx={{ fontWeight: 800 }}>
                          {d.qty}× {d.menuItem.name}
                        </Typography>
                        <Typography variant="caption" sx={{ color: '#546067' }}>
                          ₹{(d.qty * d.menuItem.price).toFixed(0)}
                        </Typography>
                      </Box>
                      <Chip
                        label={d.menuItem.dietary === 'non-veg' ? '🔴 Non-Veg' : '🟢 Veg'}
                        size="small"
                        sx={{ fontWeight: 700 }}
                      />
                    </Box>
                  ))}
                  <Box sx={{ mt: 2, display: 'flex', gap: 1 }}>
                    <Button
                      fullWidth
                      variant="outlined"
                      size="small"
                      onClick={() => { setDetectedItems([]); resetTranscript(); }}
                      sx={{ fontWeight: 700 }}
                    >
                      Retry
                    </Button>
                    <Button
                      fullWidth
                      variant="contained"
                      size="large"
                      startIcon={confirmed ? <CheckCircleIcon /> : <AddShoppingCartIcon />}
                      onClick={handleConfirm}
                      disabled={confirmed}
                      sx={{
                        fontWeight: 800,
                        bgcolor: confirmed ? '#006a2e' : '#ac2d00',
                      }}
                    >
                      {confirmed ? 'Added!' : 'Add to Cart'}
                    </Button>
                  </Box>
                </Paper>
              )}
            </Box>
          </Fade>
          {/* Quick Commands */}
          <Divider sx={{ my: 2 }}>
            <Typography variant="caption" sx={{ fontWeight: 700, color: '#8f7068' }}>
              QUICK COMMANDS
            </Typography>
          </Divider>
          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
            {QUICK_COMMANDS.map((cmd, idx) => (
              <Paper
                key={idx}
                elevation={0}
                onClick={() => handleQuickCommand(cmd.text)}
                sx={{
                  px: 2,
                  py: 1.5,
                  borderRadius: '12px',
                  border: '1px solid #e4beb4',
                  cursor: 'pointer',
                  display: 'flex',
                  alignItems: 'center',
                  gap: 1.5,
                  '&:hover': { bgcolor: '#ffdbd1', borderColor: '#ac2d00' },
                  transition: 'all 0.15s ease',
                }}
              >
                <SmartToyIcon sx={{ color: '#ac2d00', fontSize: 18 }} />
                <Typography variant="body2" sx={{ fontWeight: 700 }}>
                  "{cmd.label}"
                </Typography>
              </Paper>
            ))}
          </Box>
        </Box>
      </Box>
    </Drawer>
  );
 };
--- a/src/components/kds/KDSKanban.tsx
+++ b/src/components/kds/KDSKanban.tsx
@ -0,0 +1,202 @@
 import React, { useState } from 'react';
 import {
  Box,
  Grid,
  Paper,
  Typography,
  Chip,
  Button,
  TextField,
  InputAdornment,
  ButtonGroup,
 } from '@mui/material';
 import SearchIcon from '@mui/icons-material/Search';
 import AddIcon from '@mui/icons-material/Add';
 import RestaurantMenuIcon from '@mui/icons-material/RestaurantMenu';
 import type { KDSOrder, OrderStatus, OrderType } from '../../types';
 import { KDSTicketCard } from './KDSTicketCard';
 interface KDSKanbanProps {
  orders: KDSOrder[];
  onStatusChange: (id: string, newStatus: OrderStatus) => void;
  onToggleItem: (orderId: string, itemId: string) => void;
  onAddSampleOrder: () => void;
 }
 export const KDSKanban: React.FC<KDSKanbanProps> = ({
  orders,
  onStatusChange,
  onToggleItem,
  onAddSampleOrder,
 }) => {
  const [filterType, setFilterType] = useState<'ALL' | OrderType>('ALL');
  const [searchQuery, setSearchQuery] = useState('');
  const filteredOrders = orders.filter((order) => {
    const matchesType = filterType === 'ALL' || order.orderType === filterType;
    const matchesSearch =
      order.ticketNumber.toLowerCase().includes(searchQuery.toLowerCase()) ||
      (order.tableNumber && order.tableNumber.includes(searchQuery)) ||
      (order.customerName && order.customerName.toLowerCase().includes(searchQuery.toLowerCase())) ||
      order.items.some((i) => i.name.toLowerCase().includes(searchQuery.toLowerCase()));
    return matchesType && matchesSearch;
  });
  const columns: { status: OrderStatus; title: string; color: string; bg: string }[] = [
    { status: 'pending', title: 'PENDING', color: '#ba1a1a', bg: '#ffdad6' },
    { status: 'preparing', title: 'IN PREPARATION', color: '#845000', bg: '#ffddba' },
    { status: 'ready', title: 'READY FOR PICKUP / SERVE', color: '#11651d', bg: '#a3f69c' },
    { status: 'served', title: 'SERVED & COMPLETED', color: '#546067', bg: '#e2e2e2' },
  ];
  return (
    <Box sx={{ p: { xs: 1.5, md: 3 } }}>
      {/* Top Filter Bar */}
      <Paper
        elevation={0}
        sx={{
          p: 2,
          mb: 3,
          display: 'flex',
          flexWrap: 'wrap',
          gap: 2,
          alignItems: 'center',
          justifyContent: 'space-between',
          border: '1px solid #e2e2e2',
          borderRadius: '12px',
        }}
      >
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, flexWrap: 'wrap' }}>
          <Typography variant="h6" sx={{ fontWeight: 800, color: '#ac2d00', display: 'flex', alignItems: 'center', gap: 1 }}>
            <RestaurantMenuIcon />
            KDS Kanban Board
          </Typography>
          <ButtonGroup variant="outlined" size="small">
            {(['ALL', 'Dine-In', 'Takeaway', 'Delivery'] as const).map((type) => (
              <Button
                key={type}
                variant={filterType === type ? 'contained' : 'outlined'}
                onClick={() => setFilterType(type)}
                sx={{
                  fontWeight: 700,
                  color: filterType === type ? '#ffffff' : '#ac2d00',
                  borderColor: '#ac2d00',
                  '&:hover': {
                    borderColor: '#ac2d00',
                  },
                }}
              >
                {type}
              </Button>
            ))}
          </ButtonGroup>
        </Box>
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, flexWrap: 'wrap' }}>
          <TextField
            placeholder="Search Ticket, Table, Item..."
            size="small"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            slotProps={{
              input: {
                startAdornment: (
                  <InputAdornment position="start">
                    <SearchIcon fontSize="small" />
                  </InputAdornment>
                ),
              },
            }}
            sx={{ width: { xs: 200, sm: 260 } }}
          />
          <Button
            variant="contained"
            color="primary"
            startIcon={<AddIcon />}
            onClick={onAddSampleOrder}
            sx={{ fontWeight: 800 }}
          >
            NEW TEST ORDER
          </Button>
        </Box>
      </Paper>
      {/* 4 Column Kanban Board Grid */}
      <Grid container spacing={2}>
        {columns.map((col) => {
          const colOrders = filteredOrders.filter((o) => o.status === col.status);
          return (
            <Grid size={{ xs: 12, sm: 6, md: 3 }} key={col.status}>
              <Paper
                elevation={0}
                sx={{
                  p: 1.5,
                  minHeight: '75vh',
                  backgroundColor: '#f6f7f8',
                  border: '1px solid #e4beb4',
                  borderRadius: '12px',
                }}
              >
                {/* Column Header */}
                <Box
                  sx={{
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'space-between',
                    mb: 2,
                    pb: 1,
                    borderBottom: '2px solid #e2e2e2',
                  }}
                >
                  <Typography variant="subtitle2" sx={{ fontWeight: 800, color: col.color, letterSpacing: '0.05em' }}>
                    {col.title}
                  </Typography>
                  <Chip
                    label={colOrders.length}
                    size="small"
                    sx={{
                      fontWeight: 800,
                      backgroundColor: col.bg,
                      color: col.color,
                    }}
                  />
                </Box>
                {/* Column Tickets */}
                <Box>
                  {colOrders.length === 0 ? (
                    <Box
                      sx={{
                        p: 4,
                        textAlign: 'center',
                        color: '#8f7068',
                        border: '2px dashed #e2e2e2',
                        borderRadius: '8px',
                        mt: 2,
                      }}
                    >
                      <Typography variant="caption" sx={{ fontWeight: 600 }}>
                        No orders in {col.title.toLowerCase()}
                      </Typography>
                    </Box>
                  ) : (
                    colOrders.map((order) => (
                      <KDSTicketCard
                        key={order.id}
                        order={order}
                        onStatusChange={onStatusChange}
                        onToggleItem={onToggleItem}
                      />
                    ))
                  )}
                </Box>
              </Paper>
            </Grid>
          );
        })}
      </Grid>
    </Box>
  );
 };
--- a/src/components/kds/KDSTicketCard.tsx
+++ b/src/components/kds/KDSTicketCard.tsx
@ -0,0 +1,244 @@
 import React from 'react';
 import {
  Card,
  CardContent,
  CardActions,
  Typography,
  Box,
  Button,
  Checkbox,
  Divider,
  Chip,
  IconButton,
  Tooltip,
 } from '@mui/material';
 import AccessTimeIcon from '@mui/icons-material/AccessTime';
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import PriorityHighIcon from '@mui/icons-material/PriorityHigh';
 import type { KDSOrder, OrderStatus } from '../../types';
 import { StatusBadge } from '../common/StatusBadge';
 interface KDSTicketCardProps {
  order: KDSOrder;
  onStatusChange: (id: string, newStatus: OrderStatus) => void;
  onToggleItem: (orderId: string, itemId: string) => void;
 }
 export const KDSTicketCard: React.FC<KDSTicketCardProps> = ({
  order,
  onStatusChange,
  onToggleItem,
 }) => {
  // Calculate SLA timer color
  const isUrgent = order.timeElapsedMinutes >= 25 || order.priority === 'urgent';
  const isWarning = order.timeElapsedMinutes >= 15 && order.timeElapsedMinutes < 25;
  const timerBg = isUrgent ? '#ffdad6' : isWarning ? '#ffddba' : '#e2e2e2';
  const timerColor = isUrgent ? '#93000a' : isWarning ? '#673d00' : '#1a1c1c';
  const nextStatusMap: Record<OrderStatus, OrderStatus | null> = {
    pending: 'preparing',
    preparing: 'ready',
    ready: 'served',
    served: null,
  };
  const prevStatusMap: Record<OrderStatus, OrderStatus | null> = {
    pending: null,
    preparing: 'pending',
    ready: 'preparing',
    served: 'ready',
  };
  const nextStatus = nextStatusMap[order.status];
  const prevStatus = prevStatusMap[order.status];
  const actionButtonText = {
    pending: 'START PREP',
    preparing: 'MARK READY',
    ready: 'COMPLETE / SERVE',
    served: 'COMPLETED',
  }[order.status];
  const allItemsChecked = order.items.every((i) => i.completed);
  return (
    <Card
      sx={{
        mb: 2,
        position: 'relative',
        borderLeft: isUrgent ? '5px solid #ba1a1a' : isWarning ? '5px solid #845000' : '5px solid #ac2d00',
        transition: 'transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out',
        '&:hover': {
          boxShadow: '0 4px 16px rgba(0,0,0,0.1)',
        },
      }}
    >
      {/* Ticket Header */}
      <Box
        sx={{
          p: 1.5,
          backgroundColor: '#f3f3f3',
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          borderBottom: '1px solid #e2e2e2',
        }}
      >
        <Box>
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
            <Typography variant="h6" sx={{ fontFamily: '"JetBrains Mono", monospace', fontWeight: 800 }}>
              #{order.ticketNumber}
            </Typography>
            <StatusBadge type={order.orderType} />
            {order.priority === 'urgent' && (
              <Chip
                icon={<PriorityHighIcon fontSize="small" />}
                label="URGENT"
                size="small"
                color="error"
                sx={{ height: 20, fontSize: '0.65rem', fontWeight: 800 }}
              />
            )}
          </Box>
          <Typography variant="caption" sx={{ color: '#5b4139', display: 'block', mt: 0.2 }}>
            {order.tableNumber ? `Table ${order.tableNumber}` : order.customerName || 'Walk-in Guest'}
            {order.serverName && ` • Server: ${order.serverName}`}
          </Typography>
        </Box>
        {/* SLA Timer Badge */}
        <Box
          sx={{
            display: 'flex',
            alignItems: 'center',
            gap: 0.5,
            px: 1,
            py: 0.4,
            borderRadius: '6px',
            backgroundColor: timerBg,
            color: timerColor,
            fontWeight: 700,
          }}
        >
          <AccessTimeIcon fontSize="small" />
          <Typography variant="caption" sx={{ fontWeight: 800, fontSize: '0.8rem' }}>
            {order.timeElapsedMinutes}m
          </Typography>
        </Box>
      </Box>
      {/* Ticket Body / Items */}
      <CardContent sx={{ p: 1.5, '&:last-child': { pb: 1.5 } }}>
        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
          {order.items.map((item) => (
            <Box
              key={item.id}
              onClick={() => onToggleItem(order.id, item.id)}
              sx={{
                display: 'flex',
                alignItems: 'flex-start',
                justifyContent: 'space-between',
                p: 0.8,
                borderRadius: '6px',
                cursor: 'pointer',
                backgroundColor: item.completed ? '#f0eded' : 'transparent',
                textDecoration: item.completed ? 'line-through' : 'none',
                opacity: item.completed ? 0.6 : 1,
                '&:hover': {
                  backgroundColor: '#f6f3f2',
                },
              }}
            >
              <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 1 }}>
                <Checkbox
                  checked={!!item.completed}
                  size="small"
                  sx={{ p: 0, mt: 0.2, color: '#ac2d00', '&.Mui-checked': { color: '#11651d' } }}
                />
                <Box>
                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                    <Typography
                      variant="body2"
                      sx={{
                        fontWeight: 700,
                        fontFamily: '"JetBrains Mono", monospace',
                        color: '#ac2d00',
                      }}
                    >
                      {item.quantity}x
                    </Typography>
                    <Typography variant="body2" sx={{ fontWeight: 700 }}>
                      {item.name}
                    </Typography>
                    {item.dietary && <StatusBadge dietary={item.dietary} />}
                  </Box>
                  {item.notes && (
                    <Typography
                      variant="caption"
                      sx={{
                        color: '#ba1a1a',
                        fontWeight: 700,
                        display: 'block',
                        mt: 0.2,
                        backgroundColor: '#ffdad6',
                        px: 0.8,
                        py: 0.2,
                        borderRadius: '4px',
                      }}
                    >
                      ⚠️ {item.notes}
                    </Typography>
                  )}
                </Box>
              </Box>
              <Typography variant="caption" sx={{ color: '#5b4139', fontWeight: 600 }}>
                ${(item.price * item.quantity).toFixed(2)}
              </Typography>
            </Box>
          ))}
        </Box>
      </CardContent>
      <Divider />
      {/* Ticket Footer Actions */}
      <CardActions sx={{ p: 1, justifyContent: 'space-between', backgroundColor: '#fafafa' }}>
        <Box>
          {prevStatus && (
            <Tooltip title={`Revert to ${prevStatus}`}>
              <IconButton size="small" onClick={() => onStatusChange(order.id, prevStatus)}>
                <ArrowBackIcon fontSize="small" />
              </IconButton>
            </Tooltip>
          )}
        </Box>
        {nextStatus ? (
          <Button
            size="small"
            variant="contained"
            color={allItemsChecked ? 'success' : order.status === 'pending' ? 'primary' : 'warning'}
            onClick={() => onStatusChange(order.id, nextStatus)}
            endIcon={<ArrowForwardIcon fontSize="small" />}
            sx={{ fontWeight: 800, fontSize: '0.75rem' }}
          >
            {actionButtonText}
          </Button>
        ) : (
          <Chip
            icon={<CheckCircleIcon fontSize="small" />}
            label="SERVED"
            color="success"
            size="small"
            sx={{ fontWeight: 800 }}
          />
        )}
      </CardActions>
    </Card>
  );
 };
--- a/src/components/table/TableLandingView.tsx
+++ b/src/components/table/TableLandingView.tsx
@ -0,0 +1,283 @@
 import React, { useState } from 'react';
 import {
  Box,
  Grid,
  Paper,
  Typography,
  Button,
  Card,
  CardMedia,
  Chip,
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  Divider,
  Alert,
 } from '@mui/material';
 import TableRestaurantIcon from '@mui/icons-material/TableRestaurant';
 import NotificationsActiveIcon from '@mui/icons-material/NotificationsActive';
 import ReceiptLongIcon from '@mui/icons-material/ReceiptLong';
 import LocalOfferIcon from '@mui/icons-material/LocalOffer';
 import RestaurantIcon from '@mui/icons-material/Restaurant';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import { StatusBadge } from '../common/StatusBadge';
 export const TableLandingView: React.FC = () => {
  const [waiterCalled, setWaiterCalled] = useState(false);
  const [billOpen, setBillOpen] = useState(false);
  const activeTableOrder = [
    { name: 'Butter Chicken Special', qty: 2, price: 18.0, total: 36.0 },
    { name: 'Paneer Tikka Masala', qty: 1, price: 16.0, total: 16.0 },
    { name: 'Truffle Garlic Naan', qty: 4, price: 5.0, total: 20.0 },
    { name: 'Mango Lassi Craft', qty: 3, price: 5.0, total: 15.0 },
  ];
  const subtotal = activeTableOrder.reduce((acc, i) => acc + i.total, 0);
  const tax = subtotal * 0.1;
  const grandTotal = subtotal + tax;
  const chefRecommendations = [
    {
      name: 'Gulab Jamun Flambé',
      desc: 'Warm milk dumplings soaked in saffron syrup with pistachio crumble.',
      price: '$8.50',
      dietary: 'veg' as const,
      image: 'https://images.unsplash.com/photo-1589301760014-d929f3979dbc?w=500&auto=format&fit=crop&q=60',
    },
    {
      name: 'Masala Chai Gelato',
      desc: 'Artisanal spice-infused Indian tea gelato topped with cardamom tuile.',
      price: '$7.00',
      dietary: 'veg' as const,
      image: 'https://images.unsplash.com/photo-1563805042-7684c019e1cb?w=500&auto=format&fit=crop&q=60',
    },
  ];
  const handleCallWaiter = () => {
    setWaiterCalled(true);
    setTimeout(() => {
      setWaiterCalled(false);
    }, 4000);
  };
  return (
    <Box sx={{ p: { xs: 2, md: 4 }, maxWidth: 1100, mx: 'auto' }}>
      {/* Table Welcome Banner */}
      <Paper
        elevation={0}
        sx={{
          p: 3.5,
          mb: 4,
          borderRadius: '20px',
          background: 'linear-gradient(135deg, #ac2d00 0%, #d53e0b 100%)',
          color: '#ffffff',
          boxShadow: '0 8px 24px rgba(172, 45, 0, 0.25)',
        }}
      >
        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 2 }}>
          <Box>
            <Chip
              icon={<TableRestaurantIcon style={{ color: '#ffffff' }} />}
              label="TABLE #12 • SEATED (4 GUESTS)"
              sx={{ bgcolor: 'rgba(255, 255, 255, 0.2)', color: '#ffffff', fontWeight: 800, mb: 1 }}
            />
            <Typography variant="h4" sx={{ fontWeight: 800 }}>
              Welcome to RestroAI Dining
            </Typography>
            <Typography variant="body1" sx={{ opacity: 0.9, mt: 0.5 }}>
              Active Session • Started 42 mins ago • Server: Rahul S.
            </Typography>
          </Box>
          <Button
            variant="contained"
            size="large"
            onClick={handleCallWaiter}
            startIcon={waiterCalled ? <CheckCircleIcon /> : <NotificationsActiveIcon />}
            sx={{
              bgcolor: '#ffffff',
              color: '#ac2d00',
              fontWeight: 800,
              px: 3,
              py: 1.5,
              '&:hover': {
                bgcolor: '#ffdbd1',
              },
            }}
          >
            {waiterCalled ? 'WAITER NOTIFIED!' : 'CALL WAITER'}
          </Button>
        </Box>
      </Paper>
      {waiterCalled && (
        <Alert severity="success" sx={{ mb: 3, fontWeight: 700 }}>
          🔔 Alert sent to Server Rahul S. A staff member is on their way to Table 12!
        </Alert>
      )}
      {/* Quick Action Grid */}
      <Grid container spacing={2.5} sx={{ mb: 4 }}>
        <Grid size={{ xs: 12, sm: 6, md: 3 }}>
          <Card
            onClick={() => setBillOpen(true)}
            sx={{
              p: 2.5,
              cursor: 'pointer',
              bgcolor: '#ffffff',
              border: '1px solid #e4beb4',
              '&:hover': { bgcolor: '#ffdbd1', transform: 'translateY(-2px)' },
              transition: 'all 0.2s ease',
            }}
          >
            <ReceiptLongIcon sx={{ fontSize: 40, color: '#ac2d00', mb: 1 }} />
            <Typography variant="h6" sx={{ fontWeight: 800, color: '#1a1c1c' }}>
              View Table Bill
            </Typography>
            <Typography variant="caption" sx={{ color: '#5b4139', fontWeight: 600 }}>
              Instant summary: ${grandTotal.toFixed(2)}
            </Typography>
          </Card>
        </Grid>
        <Grid size={{ xs: 12, sm: 6, md: 3 }}>
          <Card
            onClick={handleCallWaiter}
            sx={{
              p: 2.5,
              cursor: 'pointer',
              bgcolor: '#ffffff',
              border: '1px solid #e4beb4',
              '&:hover': { bgcolor: '#ffdbd1', transform: 'translateY(-2px)' },
              transition: 'all 0.2s ease',
            }}
          >
            <NotificationsActiveIcon sx={{ fontSize: 40, color: '#845000', mb: 1 }} />
            <Typography variant="h6" sx={{ fontWeight: 800, color: '#1a1c1c' }}>
              Request Water
            </Typography>
            <Typography variant="caption" sx={{ color: '#5b4139', fontWeight: 600 }}>
              Refill table water jug
            </Typography>
          </Card>
        </Grid>
        <Grid size={{ xs: 12, sm: 6, md: 3 }}>
          <Card
            sx={{
              p: 2.5,
              cursor: 'pointer',
              bgcolor: '#ffffff',
              border: '1px solid #e4beb4',
              '&:hover': { bgcolor: '#ffdbd1', transform: 'translateY(-2px)' },
              transition: 'all 0.2s ease',
            }}
          >
            <RestaurantIcon sx={{ fontSize: 40, color: '#11651d', mb: 1 }} />
            <Typography variant="h6" sx={{ fontWeight: 800, color: '#1a1c1c' }}>
              Add Extra Breads
            </Typography>
            <Typography variant="caption" sx={{ color: '#5b4139', fontWeight: 600 }}>
              Quick re-order Naan / Roti
            </Typography>
          </Card>
        </Grid>
        <Grid size={{ xs: 12, sm: 6, md: 3 }}>
          <Card
            sx={{
              p: 2.5,
              cursor: 'pointer',
              bgcolor: '#ffffff',
              border: '1px solid #e4beb4',
              '&:hover': { bgcolor: '#ffdbd1', transform: 'translateY(-2px)' },
              transition: 'all 0.2s ease',
            }}
          >
            <LocalOfferIcon sx={{ fontSize: 40, color: '#00a6e0', mb: 1 }} />
            <Typography variant="h6" sx={{ fontWeight: 800, color: '#1a1c1c' }}>
              Special Offers
            </Typography>
            <Typography variant="caption" sx={{ color: '#5b4139', fontWeight: 600 }}>
              15% off on Chef Desserts
            </Typography>
          </Card>
        </Grid>
      </Grid>
      {/* AI Recommended Desserts */}
      <Paper elevation={0} sx={{ p: 3, border: '1px solid #e2e2e2', borderRadius: '16px' }}>
        <Typography variant="h6" sx={{ fontWeight: 800, color: '#ac2d00', mb: 2 }}>
          ✨ Chef's Pairing Recommendations for Table 12
        </Typography>
        <Grid container spacing={2}>
          {chefRecommendations.map((item, index) => (
            <Grid size={{ xs: 12, sm: 6 }} key={index}>
              <Card sx={{ display: 'flex', border: '1px solid #e2e2e2', borderRadius: '12px' }}>
                <CardMedia component="img" sx={{ width: 110 }} image={item.image} alt={item.name} />
                <Box sx={{ display: 'flex', flexDirection: 'column', p: 1.5, flex: 1 }}>
                  <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                    <Typography variant="subtitle2" sx={{ fontWeight: 800 }}>
                      {item.name}
                    </Typography>
                    <StatusBadge dietary={item.dietary} />
                  </Box>
                  <Typography variant="caption" sx={{ color: '#546067', my: 0.5 }}>
                    {item.desc}
                  </Typography>
                  <Typography variant="subtitle2" sx={{ fontWeight: 800, color: '#ac2d00' }}>
                    {item.price}
                  </Typography>
                </Box>
              </Card>
            </Grid>
          ))}
        </Grid>
      </Paper>
      {/* Digital Bill Modal */}
      <Dialog open={billOpen} onClose={() => setBillOpen(false)} maxWidth="xs" fullWidth>
        <DialogTitle sx={{ fontWeight: 800, color: '#ac2d00' }}>
          Table 12 - Digital Bill Summary
        </DialogTitle>
        <DialogContent dividers>
          {activeTableOrder.map((i, idx) => (
            <Box key={idx} sx={{ display: 'flex', justifyContent: 'space-between', py: 1 }}>
              <Typography variant="body2" sx={{ fontWeight: 600 }}>
                {i.qty}x {i.name}
              </Typography>
              <Typography variant="body2" sx={{ fontWeight: 800, fontFamily: 'monospace' }}>
                ${i.total.toFixed(2)}
              </Typography>
            </Box>
          ))}
          <Divider sx={{ my: 1.5 }} />
          <Box sx={{ display: 'flex', justifyContent: 'space-between', py: 0.5 }}>
            <Typography variant="body2" sx={{ color: '#5b4139' }}>Subtotal</Typography>
            <Typography variant="body2" sx={{ fontWeight: 700 }}>${subtotal.toFixed(2)}</Typography>
          </Box>
          <Box sx={{ display: 'flex', justifyContent: 'space-between', py: 0.5 }}>
            <Typography variant="body2" sx={{ color: '#5b4139' }}>GST / Tax (10%)</Typography>
            <Typography variant="body2" sx={{ fontWeight: 700 }}>${tax.toFixed(2)}</Typography>
          </Box>
          <Divider sx={{ my: 1.5 }} />
          <Box sx={{ display: 'flex', justifyContent: 'space-between', py: 0.5 }}>
            <Typography variant="h6" sx={{ fontWeight: 800, color: '#ac2d00' }}>Grand Total</Typography>
            <Typography variant="h6" sx={{ fontWeight: 800, color: '#ac2d00' }}>${grandTotal.toFixed(2)}</Typography>
          </Box>
        </DialogContent>
        <DialogActions sx={{ p: 2 }}>
          <Button onClick={() => setBillOpen(false)} color="inherit">
            Close
          </Button>
          <Button variant="contained" color="primary" onClick={() => setBillOpen(false)} sx={{ fontWeight: 800 }}>
            Request Pay via Server
          </Button>
        </DialogActions>
      </Dialog>
    </Box>
  );
 };
--- a/src/components/voice/VoiceOrderingView.tsx
+++ b/src/components/voice/VoiceOrderingView.tsx
@ -0,0 +1,210 @@
 import React, { useState } from 'react';
 import {
  Box,
  Typography,
  Button,
  Chip,
  Grid,
  List,
  ListItem,
  ListItemText,
  Paper,
  Divider,
 } from '@mui/material';
 import MicIcon from '@mui/icons-material/Mic';
 import GraphicEqIcon from '@mui/icons-material/GraphicEq';
 import SmartToyIcon from '@mui/icons-material/SmartToy';
 import AddShoppingCartIcon from '@mui/icons-material/AddShoppingCart';
 import CheckCircleOutlinedIcon from '@mui/icons-material/CheckCircleOutlined';
 import type { VoiceCommandSuggestion } from '../../types';
 interface VoiceOrderingViewProps {
  onAddOrderFromVoice: (transcript: string) => void;
 }
 export const VoiceOrderingView: React.FC<VoiceOrderingViewProps> = ({ onAddOrderFromVoice }) => {
  const [isListening, setIsListening] = useState(false);
  const [transcript, setTranscript] = useState(
    'Do Butter Chicken, teen Garlic Naan aur ek Mango Lassi Table 12 ke liye'
  );
  const [detectedItems] = useState([
    { name: 'Butter Chicken', qty: 2, price: 360, dietary: 'non-veg' as const },
    { name: 'Garlic Naan', qty: 3, price: 80, dietary: 'veg' as const },
    { name: 'Mango Lassi', qty: 1, price: 120, dietary: 'veg' as const },
  ]);
  const [submitted, setSubmitted] = useState(false);
  const samplePrompts: VoiceCommandSuggestion[] = [
    {
      id: '1',
      label: '2 Butter Chicken & Garlic Naan – Table 12',
      prompt: 'Do Butter Chicken aur do Garlic Naan Table 12 ke liye',
      category: 'order',
    },
    {
      id: '2',
      label: 'Hyderabadi Biryani + Raita – Table 8',
      prompt: 'Ek Hyderabadi Chicken Biryani with extra raita for Table 8',
      category: 'order',
    },
    {
      id: '3',
      label: 'Jain Palak Paneer – no onion no garlic',
      prompt: 'Add 1 Palak Paneer Jain preparation no onion no garlic for Table 4',
      category: 'order',
    },
    {
      id: '4',
      label: 'Extra Cutlery + Tissue for Table 3',
      prompt: 'Please send extra cutlery and tissue paper to Table 3',
      category: 'action',
    },
  ];
  const handleConfirmOrder = () => {
    onAddOrderFromVoice(transcript);
    setSubmitted(true);
    setTimeout(() => setSubmitted(false), 3000);
  };
  const totalValue = detectedItems.reduce((sum, i) => sum + i.price * i.qty, 0);
  return (
    <Box sx={{ p: { xs: 2, md: 4 }, maxWidth: 1100, mx: 'auto' }}>
      <Box sx={{ textAlign: 'center', mb: 4 }}>
        <Typography variant="h4" sx={{ fontWeight: 800, color: '#ac2d00', mb: 1 }}>
          Staff Voice Assistant Terminal
        </Typography>
        <Typography variant="body1" sx={{ color: '#5b4139' }}>
          Hands-free voice intake for servers & kitchen staff. Supports Hindi, English & Hinglish.
        </Typography>
      </Box>
      {/* Voice Orb */}
      <Paper
        elevation={0}
        sx={{
          p: 4,
          mb: 4,
          textAlign: 'center',
          borderRadius: '24px',
          background: 'linear-gradient(180deg, #ffffff 0%, #ffdbd1 100%)',
          border: '1px solid #e4beb4',
        }}
      >
        <Box
          onClick={() => setIsListening(!isListening)}
          sx={{
            width: 130,
            height: 130,
            borderRadius: '50%',
            mx: 'auto',
            mb: 3,
            cursor: 'pointer',
            background: isListening
              ? 'radial-gradient(circle, #d53e0b 0%, #ac2d00 70%)'
              : 'radial-gradient(circle, #ac2d00 0%, #872100 100%)',
            boxShadow: isListening
              ? '0 0 0 18px rgba(213, 62, 11, 0.2), 0 0 0 36px rgba(172, 45, 0, 0.1)'
              : '0 4px 20px rgba(172, 45, 0, 0.3)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            color: '#ffffff',
            transition: 'all 0.3s ease-in-out',
            transform: isListening ? 'scale(1.08)' : 'scale(1)',
          }}
        >
          {isListening ? <GraphicEqIcon sx={{ fontSize: 60 }} /> : <MicIcon sx={{ fontSize: 60 }} />}
        </Box>
        <Typography variant="h6" sx={{ fontWeight: 800, color: '#ac2d00', mb: 0.5 }}>
          {isListening ? '🎙️ Listening & Parsing Voice Input...' : 'Tap Orb or Speak to Begin Order'}
        </Typography>
        <Typography variant="caption" sx={{ color: '#546067', fontWeight: 600, display: 'block', mb: 3 }}>
          Multilingual: English · Hindi · Hinglish
        </Typography>
        {/* Live Transcript */}
        <Paper
          elevation={0}
          sx={{ p: 2.5, maxWidth: 700, mx: 'auto', bgcolor: '#ffffff', borderRadius: '12px', border: '2px solid #ac2d00', textAlign: 'left' }}
        >
          <Typography variant="caption" sx={{ fontWeight: 800, color: '#ac2d00', display: 'block', mb: 0.5 }}>
            LIVE TRANSCRIPT:
          </Typography>
          <Typography variant="body1" sx={{ fontWeight: 700, fontStyle: 'italic', color: '#1a1c1c' }}>
            "{transcript}"
          </Typography>
        </Paper>
      </Paper>
      {/* Quick Prompts */}
      <Box sx={{ mb: 4 }}>
        <Typography variant="subtitle2" sx={{ fontWeight: 800, color: '#546067', mb: 1.5, textTransform: 'uppercase' }}>
          Suggested Quick Voice Commands
        </Typography>
        <Grid container spacing={1.5}>
          {samplePrompts.map((s) => (
            <Grid size={{ xs: 12, sm: 6 }} key={s.id}>
              <Chip
                icon={<SmartToyIcon fontSize="small" />}
                label={s.label}
                onClick={() => { setTranscript(s.prompt); setIsListening(true); setTimeout(() => setIsListening(false), 1500); }}
                clickable
                sx={{ width: '100%', justifyContent: 'flex-start', py: 2.5, px: 1, fontWeight: 700, bgcolor: '#ffffff', border: '1px solid #e4beb4', '&:hover': { bgcolor: '#ffdbd1' } }}
              />
            </Grid>
          ))}
        </Grid>
      </Box>
      {/* Detected Items */}
      <Paper elevation={0} sx={{ p: 3, border: '1px solid #e2e2e2', borderRadius: '16px' }}>
        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
          <Typography variant="h6" sx={{ fontWeight: 800, color: '#1a1c1c' }}>AI Extracted Items</Typography>
          <Chip label="Table 12" color="primary" sx={{ fontWeight: 800 }} />
        </Box>
        <List disablePadding>
          {detectedItems.map((item, idx) => (
            <ListItem
              key={idx}
              sx={{ py: 1.5, px: 2, mb: 1, borderRadius: '8px', bgcolor: '#f6f7f8', display: 'flex', justifyContent: 'space-between' }}
            >
              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
                <Typography variant="h6" sx={{ color: '#ac2d00', fontWeight: 800, fontFamily: 'monospace' }}>
                  {item.qty}×
                </Typography>
                <ListItemText
                  primary={<Typography sx={{ fontWeight: 700 }}>{item.name}</Typography>}
                  secondary={`Subtotal: ₹${(item.qty * item.price)}`}
                />
              </Box>
              <Chip label={item.dietary.toUpperCase()} size="small" variant="outlined" sx={{ fontWeight: 700 }} />
            </ListItem>
          ))}
        </List>
        <Divider sx={{ my: 2 }} />
        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
          <Typography variant="subtitle1" sx={{ fontWeight: 800 }}>Total: ₹{totalValue}</Typography>
        </Box>
        <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
          <Button
            variant="contained"
            color="primary"
            size="large"
            disabled={submitted}
            startIcon={submitted ? <CheckCircleOutlinedIcon /> : <AddShoppingCartIcon />}
            onClick={handleConfirmOrder}
            sx={{ fontWeight: 800, px: 4 }}
          >
            {submitted ? 'ORDER SENT TO KDS!' : 'DISPATCH TO KDS'}
          </Button>
        </Box>
      </Paper>
    </Box>
  );
 };
--- a/src/data/menuData.ts
+++ b/src/data/menuData.ts
@ -0,0 +1,376 @@
 export interface MenuItem {
  id: string;
  name: string;
  nameHindi?: string;
  category: 'Starters' | 'Biryani' | 'Mains' | 'Breads' | 'Drinks' | 'Desserts' | 'Specials';
  price: number; // INR ₹
  prepTimeMinutes: number;
  dietary: 'veg' | 'non-veg' | 'jain' | 'vegan';
  isChefSpecial?: boolean;
  isBestseller?: boolean;
  description: string;
  image: string;
  spiceLevel?: 'mild' | 'medium' | 'hot' | 'extra-hot';
  tags?: string[];
 }
 export const MENU_ITEMS: MenuItem[] = [
  // ─── STARTERS ───────────────────────────────────────────────────
  {
    id: 'm1',
    name: 'Samosa Chaat',
    nameHindi: 'समोसा चाट',
    category: 'Starters',
    price: 160,
    prepTimeMinutes: 8,
    dietary: 'veg',
    isBestseller: true,
    description: 'Crispy golden samosas crushed and topped with tangy tamarind chutney, mint chutney, sev, and fresh pomegranate.',
    image: 'https://images.unsplash.com/photo-1630409346824-4f0e7b080087?w=600&auto=format&fit=crop&q=80',
    spiceLevel: 'medium',
    tags: ['Popular', 'Street Food'],
  },
  {
    id: 'm2',
    name: 'Paneer Tikka',
    nameHindi: 'पनीर टिक्का',
    category: 'Starters',
    price: 280,
    prepTimeMinutes: 15,
    dietary: 'veg',
    isChefSpecial: true,
    description: 'Marinated cottage cheese cubes grilled in tandoor with bell peppers, onions and a smoky tikka masala spice blend.',
    image: 'https://images.unsplash.com/photo-1567188040759-fb8a883dc6d8?w=600&auto=format&fit=crop&q=80',
    spiceLevel: 'medium',
    tags: ["Chef's Special", 'Tandoor'],
  },
  {
    id: 'm3',
    name: 'Chicken 65',
    nameHindi: 'चिकन 65',
    category: 'Starters',
    price: 320,
    prepTimeMinutes: 15,
    dietary: 'non-veg',
    isBestseller: true,
    description: 'South Indian style crispy deep-fried chicken marinated in yogurt, red chilli, ginger-garlic and curry leaves.',
    image: 'https://images.unsplash.com/photo-1610057099443-fde8c4d50f91?w=600&auto=format&fit=crop&q=80',
    spiceLevel: 'hot',
    tags: ['South Indian', 'Crispy'],
  },
  {
    id: 'm4',
    name: 'Hara Bhara Kabab',
    nameHindi: 'हरा भरा कबाब',
    category: 'Starters',
    price: 240,
    prepTimeMinutes: 12,
    dietary: 'veg',
    description: 'Spinach and peas patties blended with paneer and mild spices, pan-fried golden. Served with mint chutney.',
    image: 'https://images.unsplash.com/photo-1555126634-323283e090fa?w=600&auto=format&fit=crop&q=80',
    spiceLevel: 'mild',
    tags: ['Healthy', 'Spinach'],
  },
  {
    id: 'm5',
    name: 'Seekh Kebab',
    nameHindi: 'सीख कबाब',
    category: 'Starters',
    price: 340,
    prepTimeMinutes: 18,
    dietary: 'non-veg',
    isChefSpecial: true,
    description: 'Minced lamb kebabs skewered and slow-cooked over charcoal. Served with laccha onions and green chutney.',
    image: 'https://images.unsplash.com/photo-1599487488170-d11ec9c172f0?w=600&auto=format&fit=crop&q=80',
    spiceLevel: 'medium',
    tags: ['Charcoal Grilled', "Chef's Special"],
  },
  // ─── BIRYANI ────────────────────────────────────────────────────
  {
    id: 'm6',
    name: 'Hyderabadi Chicken Biryani',
    nameHindi: 'हैदराबादी चिकन बिरयानी',
    category: 'Biryani',
    price: 380,
    prepTimeMinutes: 30,
    dietary: 'non-veg',
    isChefSpecial: true,
    isBestseller: true,
    description: 'Slow-cooked dum biryani with tender chicken pieces, aged basmati rice, saffron, caramelized onions and whole spices.',
    image: 'https://images.unsplash.com/photo-1563379091339-03b21ab4a4f8?w=600&auto=format&fit=crop&q=80',
    spiceLevel: 'medium',
    tags: ['Dum Style', 'Hyderabadi', 'Bestseller'],
  },
  {
    id: 'm7',
    name: 'Veg Dum Biryani',
    nameHindi: 'वेज दम बिरयानी',
    category: 'Biryani',
    price: 300,
    prepTimeMinutes: 25,
    dietary: 'veg',
    description: 'Fragrant basmati rice layered with seasonal vegetables, paneer, saffron and aromatic whole spices. Sealed and dum cooked.',
    image: 'https://images.unsplash.com/photo-1600891964599-f61ba0e24092?w=600&auto=format&fit=crop&q=80',
    spiceLevel: 'medium',
    tags: ['Dum Style', 'Veg'],
  },
  {
    id: 'm8',
    name: 'Mutton Biryani',
    nameHindi: 'मटन बिरयानी',
    category: 'Biryani',
    price: 460,
    prepTimeMinutes: 35,
    dietary: 'non-veg',
    description: 'Tender slow-braised mutton pieces layered with fragrant saffron rice, fried onions, fresh mint and yogurt marinade.',
    image: 'https://images.unsplash.com/photo-1589302168068-964664d93dc0?w=600&auto=format&fit=crop&q=80',
    spiceLevel: 'hot',
    tags: ['Premium', 'Slow Cooked'],
  },
  // ─── MAINS ──────────────────────────────────────────────────────
  {
    id: 'm9',
    name: 'Butter Chicken',
    nameHindi: 'बटर चिकन',
    category: 'Mains',
    price: 360,
    prepTimeMinutes: 20,
    dietary: 'non-veg',
    isBestseller: true,
    description: 'Iconic tandoori chicken simmered in velvety smooth tomato-butter-cream gravy with aromatic spices. Pairs perfectly with naan.',
    image: 'https://images.unsplash.com/photo-1588166524941-3bf61a9c41db?w=600&auto=format&fit=crop&q=80',
    spiceLevel: 'mild',
    tags: ['Classic', 'Bestseller'],
  },
  {
    id: 'm10',
    name: 'Dal Makhani',
    nameHindi: 'दाल मखनी',
    category: 'Mains',
    price: 280,
    prepTimeMinutes: 20,
    dietary: 'veg',
    isBestseller: true,
    description: 'Black lentils and red kidney beans slow-cooked overnight in a rich buttery tomato gravy. A Punjabi classic.',
    image: 'https://images.unsplash.com/photo-1546833999-b9f581a1996d?w=600&auto=format&fit=crop&q=80',
    spiceLevel: 'mild',
    tags: ['Punjabi', 'Classic'],
  },
  {
    id: 'm11',
    name: 'Palak Paneer',
    nameHindi: 'पालक पनीर',
    category: 'Mains',
    price: 300,
    prepTimeMinutes: 18,
    dietary: 'jain',
    description: 'Fresh cottage cheese cubes in a vibrant, spiced pureed spinach gravy. Jain preparation available without onion and garlic.',
    image: 'https://images.unsplash.com/photo-1626132647523-66d34b9f7f99?w=600&auto=format&fit=crop&q=80',
    spiceLevel: 'mild',
    tags: ['Healthy', 'Jain Available'],
  },
  {
    id: 'm12',
    name: 'Chicken Kadhai',
    nameHindi: 'चिकन कड़ाही',
    category: 'Mains',
    price: 380,
    prepTimeMinutes: 22,
    dietary: 'non-veg',
    isChefSpecial: true,
    description: 'Bone-in chicken cooked in a traditional iron kadhai with fresh tomatoes, capsicum, ginger and whole spices.',
    image: 'https://images.unsplash.com/photo-1631452180519-c014fe946bc7?w=600&auto=format&fit=crop&q=80',
    spiceLevel: 'hot',
    tags: ['Kadhai Style', "Chef's Special"],
  },
  {
    id: 'm13',
    name: 'Paneer Butter Masala',
    nameHindi: 'पनीर बटर मसाला',
    category: 'Mains',
    price: 320,
    prepTimeMinutes: 18,
    dietary: 'veg',
    description: 'Soft paneer chunks in a rich, creamy, mildly spiced tomato-cashew-butter gravy. A restaurant favourite.',
    image: 'https://images.unsplash.com/photo-1565557623262-b51c2513a641?w=600&auto=format&fit=crop&q=80',
    spiceLevel: 'mild',
    tags: ['Popular'],
  },
  {
    id: 'm14',
    name: 'Rogan Josh',
    nameHindi: 'रोगन जोश',
    category: 'Mains',
    price: 440,
    prepTimeMinutes: 25,
    dietary: 'non-veg',
    description: 'Authentic Kashmiri slow-braised mutton in a deep burgundy gravy of Kashmiri chillies, fennel, and dry ginger.',
    image: 'https://images.unsplash.com/photo-1545247181-516773cae754?w=600&auto=format&fit=crop&q=80',
    spiceLevel: 'medium',
    tags: ['Kashmiri', 'Premium'],
  },
  // ─── BREADS ──────────────────────────────────────────────────────
  {
    id: 'm15',
    name: 'Butter Naan',
    nameHindi: 'बटर नान',
    category: 'Breads',
    price: 60,
    prepTimeMinutes: 5,
    dietary: 'veg',
    description: 'Soft, fluffy leavened bread freshly baked in a tandoor and generously brushed with salted cultured butter.',
    image: 'https://images.unsplash.com/photo-1601050690597-df0568f70950?w=600&auto=format&fit=crop&q=80',
    tags: ['Tandoor'],
  },
  {
    id: 'm16',
    name: 'Garlic Naan',
    nameHindi: 'लहसुन नान',
    category: 'Breads',
    price: 80,
    prepTimeMinutes: 5,
    dietary: 'veg',
    isBestseller: true,
    description: 'Tandoori naan generously topped with roasted garlic, fresh coriander, and whipped butter. Best paired with any gravy.',
    image: 'https://images.unsplash.com/photo-1574071318508-1cdbab80d002?w=600&auto=format&fit=crop&q=80',
    tags: ['Bestseller', 'Tandoor'],
  },
  {
    id: 'm17',
    name: 'Lachha Paratha',
    nameHindi: 'लच्छा पराठा',
    category: 'Breads',
    price: 70,
    prepTimeMinutes: 7,
    dietary: 'veg',
    description: 'Crispy, flaky multi-layered whole wheat paratha cooked on a tawa with pure ghee. A Punjabi comfort classic.',
    image: 'https://images.unsplash.com/photo-1667872078958-4c47b44f4f37?w=600&auto=format&fit=crop&q=80',
    tags: ['Ghee', 'Crispy'],
  },
  // ─── DRINKS ──────────────────────────────────────────────────────
  {
    id: 'm18',
    name: 'Mango Lassi',
    nameHindi: 'आम की लस्सी',
    category: 'Drinks',
    price: 120,
    prepTimeMinutes: 3,
    dietary: 'veg',
    isBestseller: true,
    description: 'Fresh Alphonso mango puree blended with thick homemade yogurt, a pinch of cardamom and rose water. Chilled and served tall.',
    image: 'https://images.unsplash.com/photo-1527161153332-99adcc6f2966?w=600&auto=format&fit=crop&q=80',
    tags: ['Summer Special', 'Fresh'],
  },
  {
    id: 'm19',
    name: 'Masala Chai',
    nameHindi: 'मसाला चाय',
    category: 'Drinks',
    price: 80,
    prepTimeMinutes: 5,
    dietary: 'veg',
    description: 'Aromatic Indian spiced tea brewed with ginger, cardamom, cloves, cinnamon and full-fat milk. Served in a kulhad.',
    image: 'https://images.unsplash.com/photo-1556679343-c7306c1976bc?w=600&auto=format&fit=crop&q=80',
    tags: ['Kulhad', 'Hot'],
  },
  {
    id: 'm20',
    name: 'Sweet Lime Soda',
    nameHindi: 'नींबू सोडा',
    category: 'Drinks',
    price: 90,
    prepTimeMinutes: 3,
    dietary: 'vegan',
    description: 'Freshly squeezed lime juice with black salt, roasted cumin, and chilled sparkling soda. Refreshing and tangy.',
    image: 'https://images.unsplash.com/photo-1513558161293-cdaf765ed2fd?w=600&auto=format&fit=crop&q=80',
    tags: ['Fresh', 'Refreshing'],
  },
  {
    id: 'm21',
    name: 'Rose Sharbat',
    nameHindi: 'गुलाब शरबत',
    category: 'Drinks',
    price: 100,
    prepTimeMinutes: 3,
    dietary: 'vegan',
    description: 'Traditional rose syrup with chilled water, sabja seeds and a splash of lime. A classic summer cooler.',
    image: 'https://images.unsplash.com/photo-1541014741259-de529411b96a?w=600&auto=format&fit=crop&q=80',
    tags: ['Refreshing', 'Traditional'],
  },
  // ─── DESSERTS ────────────────────────────────────────────────────
  {
    id: 'm22',
    name: 'Gulab Jamun',
    nameHindi: 'गुलाब जामुन',
    category: 'Desserts',
    price: 140,
    prepTimeMinutes: 5,
    dietary: 'veg',
    isBestseller: true,
    description: 'Soft, melt-in-your-mouth khoya dumplings soaked in warm cardamom and saffron-scented rose sugar syrup. Served hot.',
    image: 'https://images.unsplash.com/photo-1666190494547-9e02d01c32e2?w=600&auto=format&fit=crop&q=80',
    tags: ['Hot', 'Classic'],
  },
  {
    id: 'm23',
    name: 'Rasmalai',
    nameHindi: 'रसमलाई',
    category: 'Desserts',
    price: 160,
    prepTimeMinutes: 5,
    dietary: 'veg',
    isChefSpecial: true,
    description: 'Delicate soft chenna dumplings soaked in chilled thickened saffron milk (rabri) garnished with crushed pistachios.',
    image: 'https://images.unsplash.com/photo-1601303516534-bf4c44e9fedb?w=600&auto=format&fit=crop&q=80',
    tags: ['Bengali', "Chef's Special", 'Cold'],
  },
  {
    id: 'm24',
    name: 'Gajar Halwa',
    nameHindi: 'गाजर का हलवा',
    category: 'Desserts',
    price: 150,
    prepTimeMinutes: 5,
    dietary: 'veg',
    description: 'Slow-cooked grated carrots in pure ghee, whole milk, sugar, and khoya. Garnished with almonds and cardamom.',
    image: 'https://images.unsplash.com/photo-1604152135912-04a022e23696?w=600&auto=format&fit=crop&q=80',
    tags: ['Winter Special', 'Ghee'],
  },
  // ─── SPECIALS ─────────────────────────────────────────────────────
  {
    id: 'm25',
    name: 'Chef\'s Thali',
    nameHindi: 'शेफ की थाली',
    category: 'Specials',
    price: 550,
    prepTimeMinutes: 25,
    dietary: 'veg',
    isChefSpecial: true,
    isBestseller: true,
    description: 'A complete Indian feast: Dal Makhani, Paneer Butter Masala, 2 Rotis, Steamed Rice, Salad, Papad, Pickle and Gulab Jamun.',
    image: 'https://images.unsplash.com/photo-1585937421612-70a008356fbe?w=600&auto=format&fit=crop&q=80',
    tags: ['Thali', 'Value', 'Complete Meal'],
  },
  {
    id: 'm26',
    name: 'Non-Veg Thali',
    nameHindi: 'नॉन-वेज थाली',
    category: 'Specials',
    price: 650,
    prepTimeMinutes: 30,
    dietary: 'non-veg',
    isChefSpecial: true,
    description: 'Butter Chicken, Mutton Keema, 3 Butter Naans, Steamed Rice, Raita, Salad, Papad, Pickle and Gulab Jamun.',
    image: 'https://images.unsplash.com/photo-1567337710282-00832b415979?w=600&auto=format&fit=crop&q=80',
    tags: ['Thali', 'Value', 'Complete Meal'],
  },
 ];
 export const CATEGORIES = ['All', 'Starters', 'Biryani', 'Mains', 'Breads', 'Drinks', 'Desserts', 'Specials'] as const;
 export type CategoryType = typeof CATEGORIES[number];
--- a/src/hooks/useSpeechRecognition.ts
+++ b/src/hooks/useSpeechRecognition.ts
@ -0,0 +1,153 @@
 import { useState, useEffect, useRef, useCallback } from 'react';
 interface SpeechRecognitionEvent extends Event {
  results: SpeechRecognitionResultList;
  resultIndex: number;
 }
 interface SpeechRecognitionErrorEvent extends Event {
  error: string;
 }
 interface ISpeechRecognition extends EventTarget {
  lang: string;
  continuous: boolean;
  interimResults: boolean;
  maxAlternatives: number;
  start(): void;
  stop(): void;
  abort(): void;
  onresult: ((event: SpeechRecognitionEvent) => void) | null;
  onerror: ((event: SpeechRecognitionErrorEvent) => void) | null;
  onend: (() => void) | null;
  onstart: (() => void) | null;
 }
 declare global {
  interface Window {
    SpeechRecognition: new () => ISpeechRecognition;
    webkitSpeechRecognition: new () => ISpeechRecognition;
  }
 }
 export type VoiceState = 'idle' | 'listening' | 'thinking' | 'speaking' | 'error';
 interface UseSpeechRecognitionReturn {
  voiceState: VoiceState;
  transcript: string;
  interimTranscript: string;
  isSupported: boolean;
  startListening: (lang?: string) => void;
  stopListening: () => void;
  resetTranscript: () => void;
  error: string | null;
 }
 export const useSpeechRecognition = (): UseSpeechRecognitionReturn => {
  const [voiceState, setVoiceState] = useState<VoiceState>('idle');
  const [transcript, setTranscript] = useState<string>('');
  const [interimTranscript, setInterimTranscript] = useState<string>('');
  const [error, setError] = useState<string | null>(null);
  const recognitionRef = useRef<ISpeechRecognition | null>(null);
  const isSupported =
    typeof window !== 'undefined' &&
    ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window);
  useEffect(() => {
    return () => {
      recognitionRef.current?.abort();
    };
  }, []);
  const startListening = useCallback((lang: string = 'en-IN') => {
    if (!isSupported) {
      setError('Voice recognition is not supported in this browser. Please use Chrome.');
      setVoiceState('error');
      return;
    }
    const SpeechRecognitionAPI = window.SpeechRecognition || window.webkitSpeechRecognition;
    const recognition = new SpeechRecognitionAPI();
    recognitionRef.current = recognition;
    recognition.lang = lang;
    recognition.continuous = false;
    recognition.interimResults = true;
    recognition.maxAlternatives = 1;
    recognition.onstart = () => {
      setVoiceState('listening');
      setError(null);
      setInterimTranscript('');
    };
    recognition.onresult = (event: SpeechRecognitionEvent) => {
      let interim = '';
      let final = '';
      for (let i = event.resultIndex; i < event.results.length; i++) {
        const result = event.results[i];
        if (result.isFinal) {
          final += result[0].transcript;
        } else {
          interim += result[0].transcript;
        }
      }
      setInterimTranscript(interim);
      if (final) {
        setTranscript((prev) => prev + ' ' + final.trim());
        setVoiceState('thinking');
      }
    };
    recognition.onerror = (event: SpeechRecognitionErrorEvent) => {
      const errorMessages: Record<string, string> = {
        'no-speech': 'No speech detected. Please try again.',
        'audio-capture': 'Microphone not accessible.',
        'not-allowed': 'Microphone permission denied. Please allow access.',
        'network': 'Network error. Check your internet connection.',
      };
      setError(errorMessages[event.error] || `Voice error: ${event.error}`);
      setVoiceState('error');
    };
    recognition.onend = () => {
      setInterimTranscript('');
      if (voiceState === 'listening') {
        setVoiceState('thinking');
      }
    };
    try {
      recognition.start();
    } catch (e) {
      setError('Could not start voice recognition.');
      setVoiceState('error');
    }
  }, [isSupported, voiceState]);
  const stopListening = useCallback(() => {
    recognitionRef.current?.stop();
    setVoiceState('thinking');
  }, []);
  const resetTranscript = useCallback(() => {
    setTranscript('');
    setInterimTranscript('');
    setVoiceState('idle');
    setError(null);
  }, []);
  return {
    voiceState,
    transcript,
    interimTranscript,
    isSupported,
    startListening,
    stopListening,
    resetTranscript,
    error,
  };
 };
--- a/src/hooks/useSpeechSynthesis.ts
+++ b/src/hooks/useSpeechSynthesis.ts
@ -0,0 +1,52 @@
 import { useCallback } from 'react';
 import type { VoiceState } from './useSpeechRecognition';
 interface UseSpeechSynthesisReturn {
  speak: (text: string, lang?: string, onEnd?: () => void) => void;
  cancel: () => void;
  isSupported: boolean;
 }
 export const useSpeechSynthesis = (
  setVoiceState?: (state: VoiceState) => void
 ): UseSpeechSynthesisReturn => {
  const isSupported =
    typeof window !== 'undefined' && 'speechSynthesis' in window;
  const speak = useCallback(
    (text: string, lang: string = 'en-IN', onEnd?: () => void) => {
      if (!isSupported) return;
      window.speechSynthesis.cancel();
      const utterance = new SpeechSynthesisUtterance(text);
      utterance.lang = lang;
      utterance.rate = 0.95;
      utterance.pitch = 1.05;
      utterance.volume = 1;
      utterance.onstart = () => {
        setVoiceState?.('speaking');
      };
      utterance.onend = () => {
        setVoiceState?.('idle');
        onEnd?.();
      };
      utterance.onerror = () => {
        setVoiceState?.('idle');
      };
      window.speechSynthesis.speak(utterance);
    },
    [isSupported, setVoiceState]
  );
  const cancel = useCallback(() => {
    if (!isSupported) return;
    window.speechSynthesis.cancel();
    setVoiceState?.('idle');
  }, [isSupported, setVoiceState]);
  return { speak, cancel, isSupported };
 };
--- a/src/index.css
+++ b/src/index.css
@ -0,0 +1,111 @@
 :root {
  --text: #6b6375;
  --text-h: #08060d;
  --bg: #fff;
  --border: #e5e4e7;
  --code-bg: #f4f3ec;
  --accent: #aa3bff;
  --accent-bg: rgba(170, 59, 255, 0.1);
  --accent-border: rgba(170, 59, 255, 0.5);
  --social-bg: rgba(244, 243, 236, 0.5);
  --shadow:
    rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
  --sans: system-ui, 'Segoe UI', Roboto, sans-serif;
  --heading: system-ui, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, Consolas, monospace;
  font: 18px/145% var(--sans);
  letter-spacing: 0.18px;
  color-scheme: light dark;
  color: var(--text);
  background: var(--bg);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  @media (max-width: 1024px) {
    font-size: 16px;
  }
 }
@media (prefers-color-scheme: dark) {
  :root {
    --text: #9ca3af;
    --text-h: #f3f4f6;
    --bg: #16171d;
    --border: #2e303a;
    --code-bg: #1f2028;
    --accent: #c084fc;
    --accent-bg: rgba(192, 132, 252, 0.15);
    --accent-border: rgba(192, 132, 252, 0.5);
    --social-bg: rgba(47, 48, 58, 0.5);
    --shadow:
      rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
  }
  #social .button-icon {
    filter: invert(1) brightness(2);
  }
 }
 #root {
  width: 1126px;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
  border-inline: 1px solid var(--border);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
 }
 body {
  margin: 0;
 }
 h1,
 h2 {
  font-family: var(--heading);
  font-weight: 500;
  color: var(--text-h);
 }
 h1 {
  font-size: 56px;
  letter-spacing: -1.68px;
  margin: 32px 0;
  @media (max-width: 1024px) {
    font-size: 36px;
    margin: 20px 0;
  }
 }
 h2 {
  font-size: 24px;
  line-height: 118%;
  letter-spacing: -0.24px;
  margin: 0 0 8px;
  @media (max-width: 1024px) {
    font-size: 20px;
  }
 }
 p {
  margin: 0;
 }
 code,
 .counter {
  font-family: var(--mono);
  display: inline-flex;
  border-radius: 4px;
  color: var(--text-h);
 }
 code {
  font-size: 15px;
  line-height: 135%;
  padding: 4px 8px;
  background: var(--code-bg);
 }
--- a/src/main.tsx
+++ b/src/main.tsx
@ -0,0 +1,10 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App.tsx'
 createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
 )
--- a/src/services/api.ts
+++ b/src/services/api.ts
@ -0,0 +1,913 @@
 import { type MenuItem, MENU_ITEMS } from '../data/menuData';
 const BASE_URL = import.meta.env.VITE_API_URL || 'http://localhost:8000';
 const WS_BASE_URL = import.meta.env.VITE_WS_URL || 'ws://localhost:8000';
 // Helpers to get/set auth tokens
 const getAccessToken = () => localStorage.getItem('access_token');
 export const getRefreshToken = () => localStorage.getItem('refresh_token');
 const setTokens = (access: string, refresh: string) => {
  localStorage.setItem('access_token', access);
  localStorage.setItem('refresh_token', refresh);
 };
 const clearTokens = () => {
  localStorage.removeItem('access_token');
  localStorage.removeItem('refresh_token');
 };
 const getCustomerToken = () => sessionStorage.getItem('customer_session_token');
 const getCustomerSessionId = () => sessionStorage.getItem('customer_session_id');
 const setCustomerSession = (token: string, sessionId: string, tableId: string, restaurantId: string) => {
  sessionStorage.setItem('customer_session_token', token);
  sessionStorage.setItem('customer_session_id', sessionId);
  sessionStorage.setItem('customer_table_id', tableId);
  sessionStorage.setItem('customer_restaurant_id', restaurantId);
 };
 export const clearCustomerSession = () => {
  sessionStorage.removeItem('customer_session_token');
  sessionStorage.removeItem('customer_session_id');
  sessionStorage.removeItem('customer_table_id');
  sessionStorage.removeItem('customer_restaurant_id');
 };
 // Map front-end item ID (e.g. 'm1') to back-end numeric ID
 export const getBackendMenuId = (frontendId: string): number => {
  return parseInt(frontendId.replace(/[^0-9]/g, '')) || 1;
 };
 // Map back-end ID to front-end menu item
 export const getFrontendMenuItem = (backendId: number | string): MenuItem | undefined => {
  const numId = typeof backendId === 'number' ? backendId : parseInt(String(backendId)) || 1;
  return MENU_ITEMS.find(m => m.id === `m${numId}`) || MENU_ITEMS[0];
 };
 // Connection State tracking
 export let isDemoMode = false;
 let onDemoModeChangeCallback: ((demo: boolean) => void) | null = null;
 export const setDemoModeChangeCallback = (cb: (demo: boolean) => void) => {
  onDemoModeChangeCallback = cb;
 };
 const triggerDemoMode = (active: boolean) => {
  if (isDemoMode !== active) {
    isDemoMode = active;
    if (onDemoModeChangeCallback) {
      onDemoModeChangeCallback(active);
    }
  }
 };
 // In-memory mock database for Demo Mode fallback
 const mockDb = {
  tables: [
    { id: 1, number: '1', status: 'available', qr_codes: [{ encoded_url: 'http://localhost:3000/scan/1', qr_image_path: '' }] },
    { id: 2, number: '2', status: 'available', qr_codes: [{ encoded_url: 'http://localhost:3000/scan/2', qr_image_path: '' }] },
    { id: 3, number: '3', status: 'available', qr_codes: [{ encoded_url: 'http://localhost:3000/scan/3', qr_image_path: '' }] },
    { id: 4, number: '4', status: 'occupied', qr_codes: [{ encoded_url: 'http://localhost:3000/scan/4', qr_image_path: '' }] },
    { id: 5, number: '5', status: 'available', qr_codes: [{ encoded_url: 'http://localhost:3000/scan/5', qr_image_path: '' }] },
    { id: 8, number: '8', status: 'available', qr_codes: [{ encoded_url: 'http://localhost:3000/scan/8', qr_image_path: '' }] },
    { id: 12, number: '12', status: 'available', qr_codes: [{ encoded_url: 'http://localhost:3000/scan/12', qr_image_path: '' }] },
  ],
  orders: [] as any[],
  ingredients: [
    { id: '1', name: 'Chicken Breast', stock: 15, unit: 'kg', minStock: 5 },
    { id: '2', name: 'Basmati Rice', stock: 45, unit: 'kg', minStock: 10 },
    { id: '3', name: 'Cottage Cheese (Paneer)', stock: 3, unit: 'kg', minStock: 5 },
    { id: '4', name: 'Butter', stock: 8, unit: 'kg', minStock: 3 },
    { id: '5', name: 'Garlic', stock: 2, unit: 'kg', minStock: 2 },
  ],
  recipes: {} as Record<number, { ingredientId: string; qty: number }[]>,
  suppliers: [
    { id: '1', name: 'Delhi Agro Farms', phone: '9876543210', email: 'agro@farm.com', address: 'Delhi Outer Ring Rd' },
    { id: '2', name: 'Punjab Dairy Syndicate', phone: '9123456780', email: 'contact@pb-dairy.com', address: 'Amritsar bypass' },
  ],
  purchaseOrders: [] as any[],
  reservations: [
    { id: 'res-1', name: 'Mehta Party', size: 4, tableId: 3, time: '19:30', date: new Date().toISOString().split('T')[0], status: 'confirmed' },
    { id: 'res-2', name: 'Kapoor Diner', size: 2, tableId: 5, time: '20:30', date: new Date().toISOString().split('T')[0], status: 'seated' },
  ],
  shifts: [
    { id: 'shift-1', staffName: 'Chef Rahul S.', role: 'chef', clockIn: '09:00', clockOut: '17:00', date: new Date().toISOString().split('T')[0], status: 'completed' },
    { id: 'shift-2', staffName: 'Waiter Amit K.', role: 'waiter', clockIn: '10:00', clockOut: '', date: new Date().toISOString().split('T')[0], status: 'active' },
  ],
  staff: [
    { id: '1', name: 'Chef Rahul S.', role: 'chef', email: 'chef@test.com' },
    { id: '2', name: 'Waiter Amit K.', role: 'waiter', email: 'waiter@test.com' },
    { id: '3', name: 'Manager Sarah D.', role: 'manager', email: 'manager@test.com' },
  ],
  feedback: [
    { id: 'f-1', star_rating: 5, comment_text: 'Excellent Dum Biryani!', date: new Date().toISOString().split('T')[0] },
    { id: 'f-2', star_rating: 4, comment_text: 'Naan was super soft, butter chicken could be sweeter', date: new Date().toISOString().split('T')[0] },
  ],
  bills: [] as any[],
 };
 // Generic HTTP fetch wrapper with Demo fallback support
 async function apiRequest(path: string, options: RequestInit = {}): Promise<any> {
  const url = `${BASE_URL}${path}`;
  const headers = new Headers(options.headers || {});
  // Inject Staff Auth Token
  const staffToken = getAccessToken();
  if (staffToken && !headers.has('Authorization')) {
    headers.set('Authorization', `Bearer ${staffToken}`);
  }
  // Inject Customer Session Token
  const customerToken = getCustomerToken();
  if (customerToken && !headers.has('X-Session-Token')) {
    headers.set('X-Session-Token', customerToken);
  }
  // Ensure content-type
  if (!headers.has('Content-Type') && !(options.body instanceof FormData)) {
    headers.set('Content-Type', 'application/json');
  }
  try {
    const res = await fetch(url, { ...options, headers });
    triggerDemoMode(false);
    if (res.status === 401 && staffToken) {
      // Token expired, clear it
      clearTokens();
      window.location.reload();
      throw new Error('Staff session expired. Please log in again.');
    }
    if (!res.ok) {
      const errText = await res.text();
      let parsedErr;
      try {
        parsedErr = JSON.parse(errText);
      } catch {
        parsedErr = { error: errText };
      }
      throw new Error(parsedErr.error || parsedErr.message || `Request failed: ${res.status}`);
    }
    return await res.json();
  } catch (error) {
    console.warn(`API Request to ${path} failed, falling back to mock database.`, error);
    triggerDemoMode(true);
    return handleMockRequest(path, options);
  }
 }
 // Intercept requests and simulate them in-memory
 function handleMockRequest(path: string, options: RequestInit): any {
  const method = options.method || 'GET';
  const body = options.body ? (typeof options.body === 'string' ? JSON.parse(options.body) : options.body) : null;
  // 1. Health
  if (path === '/health') {
    return { status: 'healthy', database: 'connected', mode: 'demo' };
  }
  // 2. Auth Login
  if (path === '/auth/login') {
    const bodyStr = typeof options.body === 'string' ? options.body : '';
    const params = new URLSearchParams(bodyStr);
    const username = params.get('username') || 'manager@test.com';
    const role = username.includes('manager') ? 'manager' : 'kitchen';
    return {
      access_token: `mock-jwt-token-for-${username}`,
      refresh_token: 'mock-refresh-token',
      token_type: 'bearer',
      role: role
    };
  }
  // 3. Tables start session
  if (path.startsWith('/tables/') && path.endsWith('/start-session')) {
    const tableId = parseInt(path.split('/')[2]) || 12;
    const sessionToken = `mock-session-token-tab-${tableId}-${Date.now()}`;
    const sessionId = String(100 + tableId);
    // Update table status
    const table = mockDb.tables.find(t => t.id === tableId);
    if (table) table.status = 'occupied';
    return {
      session_id: sessionId,
      table_id: tableId,
      restaurant_id: 1,
      session_token: sessionToken,
      language: body?.language || 'en',
      expires_in_seconds: 10800
    };
  }
  // 4. Tables list or operations
  if (path === '/tables') {
    return mockDb.tables;
  }
  if (path.startsWith('/tables/') && path.endsWith('/close-session')) {
    const tableId = parseInt(path.split('/')[2]);
    const table = mockDb.tables.find(t => t.id === tableId);
    if (table) table.status = 'awaiting_clearance';
    return { success: true };
  }
  if (path.startsWith('/tables/') && path.endsWith('/reset')) {
    const tableId = parseInt(path.split('/')[2]);
    const table = mockDb.tables.find(t => t.id === tableId);
    if (table) table.status = 'available';
    return { success: true };
  }
  // 5. Orders
  if (path === '/orders' && method === 'POST') {
    const sessionId = getCustomerSessionId() || '112';
    const tableId = sessionStorage.getItem('customer_table_id') || '12';
    const orderItems = body.items.map((it: any, index: number) => {
      const original = getFrontendMenuItem(it.menu_item_id);
      return {
        id: `oi-${Date.now()}-${index}`,
        menu_item_id: it.menu_item_id,
        name: original?.name || `Dish ${it.menu_item_id}`,
        quantity: it.quantity,
        price: original?.price || 150,
        kds_status: 'queued',
        customization_notes: it.customization_notes || []
      };
    });
    const newOrder = {
      id: `ord-mock-${Date.now()}`,
      ticketNumber: String(100 + mockDb.orders.length + 1),
      tableNumber: tableId,
      session_id: sessionId,
      orderType: 'Dine-In',
      status: 'placed',
      createdAt: new Date().toISOString(),
      timeElapsedMinutes: 0,
      priority: 'normal',
      serverName: `Self-Order Table ${tableId}`,
      totalAmount: orderItems.reduce((acc: number, item: any) => acc + (item.price * item.quantity), 0),
      items: orderItems
    };
    mockDb.orders.push(newOrder);
    return newOrder;
  }
  if (path.startsWith('/orders/') || path.startsWith('/staff/orders/')) {
    const parts = path.split('/');
    const sessionId = parts[parts.length - 1];
    const found = mockDb.orders.find(o => o.session_id === sessionId);
    if (found) return found;
    return mockDb.orders[0] || {
      id: 'ord-empty',
      ticketNumber: '000',
      tableNumber: '12',
      items: [],
      status: 'placed',
      totalAmount: 0
    };
  }
  // Generate bill
  if (path.startsWith('/orders/') && path.endsWith('/generate-bill')) {
    const orderId = path.split('/')[2];
    const order = mockDb.orders.find(o => o.id === orderId) || mockDb.orders[0];
    const subtotal = order ? order.totalAmount : 500;
    const cgst = subtotal * 0.025;
    const sgst = subtotal * 0.025;
    const serviceCharge = subtotal * 0.05;
    const grandTotal = subtotal + cgst + sgst + serviceCharge;
    const newBill = {
      id: `bill-${Date.now()}`,
      order_id: orderId,
      subtotal,
      cgst,
      sgst,
      serviceCharge,
      grandTotal,
      status: 'unpaid'
    };
    mockDb.bills.push(newBill);
    return newBill;
  }
  // 6. Bills
  if (path.startsWith('/bills/')) {
    const parts = path.split('/');
    const billId = parts[2];
    if (parts[3] === 'record-payment') {
      const bill = mockDb.bills.find(b => b.id === billId);
      if (bill) {
        bill.status = 'paid';
        bill.paymentMethod = body.method;
      }
      return { success: true, bill };
    }
    if (parts[3] === 'credit-note') {
      return { success: true, message: 'Credit note issued' };
    }
    return mockDb.bills.find(b => b.id === billId) || mockDb.bills[0];
  }
  // 7. KDS Board
  if (path.startsWith('/kds/')) {
    return mockDb.orders;
  }
  // Patch KDS order item status
  if (path.startsWith('/order-items/') && path.endsWith('/status')) {
    const item_id = path.split('/')[2];
    const newStatus = body.kds_status;
    mockDb.orders.forEach(ord => {
      ord.items.forEach((item: any) => {
        if (item.id === item_id) {
          item.kds_status = newStatus;
        }
      });
      const allReady = ord.items.every((it: any) => it.kds_status === 'ready' || it.kds_status === 'served');
      const allServed = ord.items.every((it: any) => it.kds_status === 'served');
      if (allServed) {
        ord.status = 'served';
      } else if (allReady) {
        ord.status = 'ready';
      } else {
        ord.status = 'in_preparation';
      }
    });
    notifyWsListeners({
      type: 'kds.item_updated',
      item_id,
      status: newStatus
    });
    return { success: true };
  }
  // 8. Ingredients
  if (path === '/ingredients') {
    if (method === 'POST') {
      const newIng = { ...body, id: `ing-${Date.now()}` };
      mockDb.ingredients.push(newIng);
      return newIng;
    }
    return mockDb.ingredients;
  }
  if (path.startsWith('/ingredients/')) {
    const id = path.split('/')[2];
    if (method === 'DELETE') {
      mockDb.ingredients = mockDb.ingredients.filter(i => i.id !== id);
      return { success: true };
    }
    if (method === 'PATCH' || method === 'PUT') {
      const idx = mockDb.ingredients.findIndex(i => i.id === id);
      if (idx !== -1) {
        mockDb.ingredients[idx] = { ...mockDb.ingredients[idx], ...body };
        return mockDb.ingredients[idx];
      }
    }
  }
  if (path === '/inventory/low-stock' || path === '/analytics/low-stock-summary') {
    return mockDb.ingredients.filter(i => i.stock <= i.minStock);
  }
  // Recipes
  if (path.startsWith('/menu-items/') && path.endsWith('/recipe')) {
    const menuId = parseInt(path.split('/')[2]);
    if (method === 'POST') {
      mockDb.recipes[menuId] = body.ingredients;
      return { success: true };
    }
    return { ingredients: mockDb.recipes[menuId] || [] };
  }
  // 9. Suppliers
  if (path === '/suppliers') {
    if (method === 'POST') {
      const newSupp = { ...body, id: `supp-${Date.now()}` };
      mockDb.suppliers.push(newSupp);
      return newSupp;
    }
    return mockDb.suppliers;
  }
  if (path.startsWith('/suppliers/')) {
    const id = path.split('/')[2];
    if (method === 'DELETE') {
      mockDb.suppliers = mockDb.suppliers.filter(s => s.id !== id);
      return { success: true };
    }
  }
  // Purchase Orders
  if (path === '/purchase-orders') {
    if (method === 'POST') {
      const newPO = {
        ...body,
        id: `po-${Date.now()}`,
        status: 'draft',
        createdAt: new Date().toISOString()
      };
      mockDb.purchaseOrders.push(newPO);
      return newPO;
    }
    return mockDb.purchaseOrders;
  }
  if (path.startsWith('/purchase-orders/')) {
    const id = path.split('/')[2];
    const po = mockDb.purchaseOrders.find(p => p.id === id);
    if (method === 'PATCH' || method === 'PUT') {
      if (po) {
        Object.assign(po, body);
        if (body.status === 'received') {
          po.items?.forEach((item: any) => {
            const ingredient = mockDb.ingredients.find(ing => ing.id === item.ingredientId);
            if (ingredient) {
              ingredient.stock += Number(item.qty);
            }
          });
        }
      }
      return po;
    }
    if (method === 'DELETE') {
      mockDb.purchaseOrders = mockDb.purchaseOrders.filter(p => p.id !== id);
      return { success: true };
    }
  }
  // 10. Reservations
  if (path.startsWith('/reservations')) {
    if (method === 'POST') {
      const newRes = { ...body, id: `res-${Date.now()}`, status: 'confirmed' };
      mockDb.reservations.push(newRes);
      const conflicts = mockDb.reservations.filter(r => r.tableId === body.tableId && r.id !== newRes.id);
      const warnings = conflicts.length > 0 ? ['Soft conflict: table is booked within 90 minutes'] : [];
      return { ...newRes, warnings };
    }
    return mockDb.reservations;
  }
  // Staff and Shifts
  if (path === '/staff') {
    if (method === 'POST') {
      const member = { ...body, id: `st-${Date.now()}` };
      mockDb.staff.push(member);
      return member;
    }
    return mockDb.staff;
  }
  if (path === '/roles') {
    return ['waiter', 'chef', 'cashier', 'manager'];
  }
  if (path === '/shifts') {
    return mockDb.shifts;
  }
  if (path.startsWith('/shifts/') && path.endsWith('/clock-in')) {
    const shiftId = path.split('/')[2];
    const shift = mockDb.shifts.find(s => s.id === shiftId);
    if (shift) {
      shift.clockIn = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
      shift.status = 'active';
    }
    return { success: true, shift };
  }
  if (path.startsWith('/shifts/') && path.endsWith('/clock-out')) {
    const shiftId = path.split('/')[2];
    const shift = mockDb.shifts.find(s => s.id === shiftId);
    if (shift) {
      shift.clockOut = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
      shift.status = 'completed';
    }
    return { success: true, shift };
  }
  // Feedback
  if (path === '/feedback') {
    if (method === 'POST') {
      const newFb = { ...body, id: `fb-${Date.now()}`, date: new Date().toISOString().split('T')[0] };
      mockDb.feedback.push(newFb);
      return newFb;
    }
    return mockDb.feedback;
  }
  // Analytics
  if (path.startsWith('/analytics/revenue-trend')) {
    return [
      { date: 'Mon', revenue: 15400 },
      { date: 'Tue', revenue: 18200 },
      { date: 'Wed', revenue: 16500 },
      { date: 'Thu', revenue: 21000 },
      { date: 'Fri', revenue: 29500 },
      { date: 'Sat', revenue: 38000 },
      { date: 'Sun', revenue: 34000 },
    ];
  }
  if (path.startsWith('/analytics/top-items')) {
    return [
      { name: 'Hyderabadi Chicken Biryani', ordersCount: 84, revenue: 31920 },
      { name: 'Butter Chicken', ordersCount: 65, revenue: 23400 },
      { name: 'Garlic Naan', ordersCount: 140, revenue: 11200 },
      { name: 'Palak Paneer', ordersCount: 38, revenue: 11400 },
      { name: 'Mango Lassi', ordersCount: 42, revenue: 5040 },
    ];
  }
  return { success: true };
 }
 // WebSocket connection handlers
 let wsListeners: ((event: any) => void)[] = [];
 export const subscribeToWsEvents = (listener: (event: any) => void) => {
  wsListeners.push(listener);
  return () => {
    wsListeners = wsListeners.filter(l => l !== listener);
  };
 };
 const notifyWsListeners = (event: any) => {
  wsListeners.forEach(listener => {
    try {
      listener(event);
    } catch (e) {
      console.error('Error triggering WS listener', e);
    }
  });
 };
 export class RestroWebSocket {
  private ws: WebSocket | null = null;
  private url: string;
  private reconnectTimer: any = null;
  private isClosedIntentional = false;
  constructor(channel: 'kds' | 'orders', param: string) {
    if (channel === 'kds') {
      const token = getAccessToken() || '';
      this.url = `${WS_BASE_URL}/ws/kds/${param}?token=${encodeURIComponent(token)}`;
    } else {
      const token = getCustomerToken() || '';
      this.url = `${WS_BASE_URL}/ws/orders/${param}?session_token=${encodeURIComponent(token)}`;
    }
  }
  connect() {
    if (isDemoMode) {
      console.log('Skipping real WebSocket connection in Demo Mode');
      return;
    }
    this.isClosedIntentional = false;
    try {
      this.ws = new WebSocket(this.url);
      this.ws.onmessage = (event) => {
        try {
          const data = JSON.parse(event.data);
          notifyWsListeners(data);
        } catch (e) {
          console.error('Error parsing WS message', e);
        }
      };
      this.ws.onclose = () => {
        if (!this.isClosedIntentional) {
          console.log('WebSocket closed. Attempting reconnect in 5s...');
          this.reconnectTimer = setTimeout(() => this.connect(), 5000);
        }
      };
      this.ws.onerror = (err) => {
        console.error('WebSocket error:', err);
        this.ws?.close();
      };
    } catch (e) {
      console.error('WebSocket connection setup failed', e);
    }
  }
  close() {
    this.isClosedIntentional = true;
    if (this.reconnectTimer) clearTimeout(this.reconnectTimer);
    if (this.ws) {
      this.ws.close();
      this.ws = null;
    }
  }
 }
 // Export API Client namespace
 export const api = {
  // Auth
  login: async (username: string, password: string) => {
    const details = { username, password };
    const formBody = Object.entries(details)
      .map(([key, val]) => `${encodeURIComponent(key)}=${encodeURIComponent(val)}`)
      .join('&');
    const res = await apiRequest('/auth/login', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      body: formBody
    });
    if (res.access_token) {
      setTokens(res.access_token, res.refresh_token);
    }
    return res;
  },
  logout: () => {
    clearTokens();
  },
  isLoggedIn: () => {
    return !!getAccessToken();
  },
  // Tables & Session
  startSession: async (tableId: number, language = 'en') => {
    const res = await apiRequest(`/tables/${tableId}/start-session`, {
      method: 'POST',
      body: JSON.stringify({ language })
    });
    if (res.session_token) {
      setCustomerSession(res.session_token, String(res.session_id), String(res.table_id), String(res.restaurant_id));
    }
    return res;
  },
  closeSession: async (tableId: number) => {
    return apiRequest(`/tables/${tableId}/close-session`, { method: 'POST' });
  },
  resetTable: async (tableId: number) => {
    return apiRequest(`/tables/${tableId}/reset`, { method: 'POST' });
  },
  getTables: async () => {
    return apiRequest('/tables');
  },
  // Backend schema: { table_number (string), capacity (int) } - manager role required
  createTable: async (table_number: string, capacity = 4) => {
    return apiRequest('/tables', {
      method: 'POST',
      body: JSON.stringify({ table_number, capacity })
    });
  },
  // Orders
  placeOrder: async (items: { menu_item_id: number; quantity: number; customization_notes?: string[] }[]) => {
    const uuid = `guest-${Math.random().toString(36).substring(2, 9)}`;
    return apiRequest('/orders', {
      method: 'POST',
      headers: {
        'Idempotency-Key': uuid
      },
      body: JSON.stringify({
        channel: 'touch',
        items
      })
    });
  },
  getOrderForSession: async (sessionId: string) => {
    return apiRequest(`/orders/${sessionId}`);
  },
  getStaffOrderForSession: async (sessionId: string) => {
    return apiRequest(`/staff/orders/${sessionId}`);
  },
  // KDS Board — returns { restaurant_id, orders: [...] }, extract .orders in caller
  getKDSBoard: async (restaurantId: string | number) => {
    const data = await apiRequest(`/kds/${restaurantId}/board`);
    // Backend returns KdsBoardResponse: { restaurant_id, orders: KdsBoardOrder[] }
    // Return the raw object so callers can access data.orders
    return data;
  },
  updateOrderItemStatus: async (orderItemId: string, newKDSStatus: string) => {
    return apiRequest(`/order-items/${orderItemId}/status`, {
      method: 'PATCH',
      body: JSON.stringify({ kds_status: newKDSStatus })
    });
  },
  // Billing
  generateBill: async (orderId: string) => {
    return apiRequest(`/orders/${orderId}/generate-bill`, { method: 'POST' });
  },
  recordPayment: async (billId: string, method: string, amount: number) => {
    return apiRequest(`/bills/${billId}/record-payment`, {
      method: 'POST',
      body: JSON.stringify({ method, amount })
    });
  },
  issueCreditNote: async (billId: string) => {
    return apiRequest(`/bills/${billId}/credit-note`, { method: 'POST' });
  },
  getBill: async (billId: string) => {
    return apiRequest(`/bills/${billId}`);
  },
  // Ingredients CRUD
  getIngredients: async () => {
    return apiRequest('/ingredients');
  },
  // Backend schema: { name, unit, current_stock, reorder_threshold, unit_cost }
  createIngredient: async (name: string, current_stock: number, unit: string, reorder_threshold: number, unit_cost = 0) => {
    return apiRequest('/ingredients', {
      method: 'POST',
      body: JSON.stringify({ name, unit, current_stock, reorder_threshold, unit_cost })
    });
  },
  // Backend only allows: name, unit, reorder_threshold, unit_cost
  updateIngredient: async (id: string, updates: { name?: string; unit?: string; reorder_threshold?: number; unit_cost?: number }) => {
    return apiRequest(`/ingredients/${id}`, {
      method: 'PATCH',
      body: JSON.stringify(updates)
    });
  },
  deleteIngredient: async (id: string) => {
    return apiRequest(`/ingredients/${id}`, { method: 'DELETE' });
  },
  getLowStockInventory: async () => {
    return apiRequest('/inventory/low-stock');
  },
  // Recipes
  getRecipe: async (menuItemId: number) => {
    return apiRequest(`/menu-items/${menuItemId}/recipe`);
  },
  // Backend schema: { ingredients: [{ingredient_id, quantity_required}] }
  saveRecipe: async (menuItemId: number, ingredients: { ingredient_id: number; quantity_required: number }[]) => {
    return apiRequest(`/menu-items/${menuItemId}/recipe`, {
      method: 'POST',
      body: JSON.stringify({ ingredients })
    });
  },
  // Suppliers CRUD
  getSuppliers: async () => {
    return apiRequest('/suppliers');
  },
  // Backend schema: { name, contact_phone?, email? } — no address field
  createSupplier: async (supplier: { name: string; contact_phone?: string; email?: string }) => {
    return apiRequest('/suppliers', {
      method: 'POST',
      body: JSON.stringify(supplier)
    });
  },
  deleteSupplier: async (id: string) => {
    return apiRequest(`/suppliers/${id}`, { method: 'DELETE' });
  },
  // Purchase Orders CRUD & Receipt
  getPurchaseOrders: async () => {
    return apiRequest('/purchase-orders');
  },
  // Backend schema: { supplier_id, expected_delivery?, items: [{ingredient_id, quantity, unit_price}] }
  createPurchaseOrder: async (supplier_id: number, items: { ingredient_id: number; quantity: number; unit_price: number }[], expected_delivery?: string) => {
    return apiRequest('/purchase-orders', {
      method: 'POST',
      body: JSON.stringify({ supplier_id, items, ...(expected_delivery ? { expected_delivery } : {}) })
    });
  },
  // Backend endpoint: PATCH /purchase-orders/{id}/status with { status }
  updatePurchaseOrderStatus: async (id: string, status: 'draft' | 'sent' | 'received' | 'cancelled') => {
    return apiRequest(`/purchase-orders/${id}/status`, {
      method: 'PATCH',
      body: JSON.stringify({ status })
    });
  },
  // Reservations
  getReservations: async (date: string) => {
    return apiRequest(`/reservations?date=${date}`);
  },
  // Backend schema: { table_id, customer_name, customer_phone, party_size, reservation_time (ISO datetime), special_requirements? }
  createReservation: async (reservation: {
    table_id: number;
    customer_name: string;
    customer_phone: string;
    party_size: number;
    reservation_time: string; // ISO 8601 datetime string
    special_requirements?: string;
  }) => {
    return apiRequest('/reservations', {
      method: 'POST',
      body: JSON.stringify(reservation)
    });
  },
  updateReservationStatus: async (id: string, status: 'confirmed' | 'seated' | 'cancelled' | 'no_show') => {
    return apiRequest(`/reservations/${id}/status`, {
      method: 'PATCH',
      body: JSON.stringify({ status })
    });
  },
  // Staff and Shifts
  getStaff: async () => {
    return apiRequest('/staff');
  },
  // Backend schema: { full_name, email, password, role_id (int), phone? }
  createStaff: async (staff: { full_name: string; email: string; password: string; role_id: number; phone?: string }) => {
    return apiRequest('/staff', {
      method: 'POST',
      body: JSON.stringify(staff)
    });
  },
  getRoles: async () => {
    return apiRequest('/roles');
  },
  getShifts: async (staff_id?: number) => {
    const query = staff_id ? `?staff_id=${staff_id}` : '';
    return apiRequest(`/shifts${query}`);
  },
  // Backend clock-in/clock-out requires staff auth (not just any POST)
  clockIn: async (shiftId: string) => {
    return apiRequest(`/shifts/${shiftId}/clock-in`, { method: 'POST' });
  },
  clockOut: async (shiftId: string) => {
    return apiRequest(`/shifts/${shiftId}/clock-out`, { method: 'POST' });
  },
  // Feedback
  sendFeedback: async (rating: number, comment: string) => {
    return apiRequest('/feedback', {
      method: 'POST',
      body: JSON.stringify({
        star_rating: rating,
        comment_text: comment,
        channel: 'text_form'
      })
    });
  },
  getFeedback: async (minRating = 0, restaurantId = 1) => {
    return apiRequest(`/feedback?min_rating=${minRating}&restaurant_id=${restaurantId}`);
  },
  // Analytics — backend requires non-empty ISO date strings for revenue-trend
  getRevenueTrend: async (from?: string, to?: string) => {
    const today = new Date().toISOString().split('T')[0];
    const sevenDaysAgo = new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString().split('T')[0];
    const fromDate = from || sevenDaysAgo;
    const toDate = to || today;
    return apiRequest(`/analytics/revenue-trend?from=${fromDate}&to=${toDate}`);
  },
  getTopItems: async (from?: string, to?: string, limit = 5) => {
    const params = new URLSearchParams({ limit: String(limit) });
    if (from) params.set('from', from);
    if (to) params.set('to', to);
    return apiRequest(`/analytics/top-items?${params.toString()}`);
  },
  getLowStockSummary: async () => {
    return apiRequest('/analytics/low-stock-summary');
  }
 };
--- a/src/theme/theme.ts
+++ b/src/theme/theme.ts
@ -0,0 +1,145 @@
 import { createTheme } from '@mui/material/styles';
 export const theme = createTheme({
  palette: {
    mode: 'light',
    primary: {
      main: '#ac2d00',
      light: '#ffb5a0',
      dark: '#872100',
      contrastText: '#ffffff',
    },
    secondary: {
      main: '#546067',
      light: '#818e95',
      dark: '#2a363d',
      contrastText: '#ffffff',
    },
    background: {
      default: '#f8f9fa',
      paper: '#ffffff',
    },
    error: {
      main: '#ba1a1a',
      light: '#ffdad6',
      dark: '#93000a',
    },
    warning: {
      main: '#845000',
      light: '#ffddba',
      dark: '#2b1700',
    },
    success: {
      main: '#11651d',
      light: '#a3f69c',
      dark: '#003915',
    },
    info: {
      main: '#00a6e0',
      light: '#c4e7ff',
      dark: '#00374d',
    },
    text: {
      primary: '#1a1c1c',
      secondary: '#5b4139',
    },
    divider: '#e4beb4',
  },
  typography: {
    fontFamily: '"Inter", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
    h1: {
      fontFamily: '"Plus Jakarta Sans", "Inter", sans-serif',
      fontWeight: 800,
      letterSpacing: '-0.02em',
    },
    h2: {
      fontFamily: '"Plus Jakarta Sans", "Inter", sans-serif',
      fontWeight: 700,
      letterSpacing: '-0.01em',
    },
    h3: {
      fontFamily: '"Plus Jakarta Sans", "Inter", sans-serif',
      fontWeight: 700,
    },
    h4: {
      fontFamily: '"Plus Jakarta Sans", "Inter", sans-serif',
      fontWeight: 600,
    },
    h5: {
      fontFamily: '"Inter", sans-serif',
      fontWeight: 600,
    },
    h6: {
      fontFamily: '"Inter", sans-serif',
      fontWeight: 600,
    },
    subtitle1: {
      fontFamily: '"Inter", sans-serif',
      fontWeight: 600,
    },
    body1: {
      fontFamily: '"Inter", sans-serif',
      lineHeight: 1.5,
    },
    body2: {
      fontFamily: '"Inter", sans-serif',
      lineHeight: 1.43,
    },
    button: {
      fontFamily: '"Inter", sans-serif',
      fontWeight: 600,
      textTransform: 'none',
    },
    caption: {
      fontFamily: '"JetBrains Mono", monospace',
      fontWeight: 500,
    },
  },
  shape: {
    borderRadius: 8,
  },
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          borderRadius: 8,
          padding: '8px 16px',
          boxShadow: 'none',
          '&:hover': {
            boxShadow: '0px 2px 8px rgba(172, 45, 0, 0.25)',
          },
        },
        contained: {
          background: 'linear-gradient(135deg, #ac2d00 0%, #d53e0b 100%)',
        },
      },
    },
    MuiCard: {
      styleOverrides: {
        root: {
          borderRadius: 12,
          boxShadow: '0px 2px 12px rgba(0, 0, 0, 0.05)',
          border: '1px solid rgba(228, 190, 180, 0.4)',
        },
      },
    },
    MuiChip: {
      styleOverrides: {
        root: {
          fontWeight: 600,
          borderRadius: 6,
        },
      },
    },
    MuiAppBar: {
      styleOverrides: {
        root: {
          backgroundColor: '#ffffff',
          color: '#1a1c1c',
          boxShadow: '0px 1px 10px rgba(0,0,0,0.05)',
          borderBottom: '1px solid #e2e2e2',
        },
      },
    },
  },
 });
--- a/src/types/index.ts
+++ b/src/types/index.ts
@ -0,0 +1,52 @@
 export type OrderStatus = 'pending' | 'preparing' | 'ready' | 'served';
 export type OrderType = 'Dine-In' | 'Takeaway' | 'Delivery';
 export interface OrderItem {
  id: string;
  name: string;
  quantity: number;
  notes?: string;
  completed?: boolean;
  dietary?: 'veg' | 'non-veg' | 'jain' | 'vegan';
  price: number;
 }
 export interface KDSOrder {
  id: string;
  ticketNumber: string;
  tableNumber?: string;
  orderType: OrderType;
  customerName?: string;
  items: OrderItem[];
  status: OrderStatus;
  createdAt: string; // ISO timestamp
  timeElapsedMinutes: number;
  priority: 'normal' | 'high' | 'urgent';
  serverName?: string;
  totalAmount: number;
 }
 export interface AnalyticsMetric {
  title: string;
  value: string;
  change: string;
  isPositive: boolean;
  period: string;
 }
 export interface DishPerformance {
  id: string;
  name: string;
  category: string;
  ordersCount: number;
  revenue: number;
  growth: string;
  dietary: 'veg' | 'non-veg' | 'jain' | 'vegan';
 }
 export interface VoiceCommandSuggestion {
  id: string;
  label: string;
  prompt: string;
  category: 'order' | 'status' | 'modify' | 'action';
 }
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@ -0,0 +1,26 @@
 {
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "es2023",
    "lib": ["ES2023", "DOM"],
    "module": "esnext",
    "types": ["vite/client"],
    "allowArbitraryExtensions": true,
    "skipLibCheck": true,
    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "verbatimModuleSyntax": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",
    /* Linting */
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "erasableSyntaxOnly": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"]
 }
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,7 @@
 {
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ]
 }
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@ -0,0 +1,23 @@
 {
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
    "target": "es2023",
    "lib": ["ES2023"],
    "types": ["node"],
    "skipLibCheck": true,
    /* Bundler mode */
    "module": "nodenext",
    "allowImportingTsExtensions": true,
    "verbatimModuleSyntax": true,
    "moduleDetection": "force",
    "noEmit": true,
    /* Linting */
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "erasableSyntaxOnly": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["vite.config.ts"]
 }
--- a/vite.config.ts
+++ b/vite.config.ts
@ -0,0 +1,7 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 // https://vite.dev/config/
 export default defineConfig({
  plugins: [react()],
 })
		`@ -0,0 +1 @@`
							`{"0": "App.tsx", "1": "react", "2": "package.json", "3": "compilerOptions", "4": "devDependencies", "5": "compilerOptions", "6": "VoiceAssistantModal.tsx", "7": "AdminDesktopShell.tsx", "8": "index.ts", "9": "tsconfig.json", "10": "vite.config.ts"}`
		`@ -0,0 +1 @@`
							`{"0": "2fd27a4e049e8550", "1": "f766b666900956c7", "2": "be894a9bb6829423", "3": "5e1b3e45a5cffb50", "4": "8f1d803994b9793e", "5": "fe9accd04c14e54c", "6": "d1b0c48243d20e7d", "7": "8b8a887a71cbef13", "8": "15691021ccd947f3", "9": "7256026fe64f6f6a", "10": "b5cc399b9462978b"}`
		`@ -0,0 +1 @@`
							`C:\Users\hp\AppData\Local\Programs\Python\Python312\python.exe`
		`@ -0,0 +1 @@`
							{"nodes": [{"id": "$graphify-root$_tsconfig_json", "label": "tsconfig.json", "file_type": "code", "source_file": "tsconfig.json", "source_location": "L1"}, {"id": "$graphify-root$_tsconfig_files", "label": "files", "file_type": "code", "source_file": "tsconfig.json", "source_location": "L2"}, {"id": "$graphify-root$_tsconfig_references", "label": "references", "file_type": "code", "source_file": "tsconfig.json", "source_location": "L3"}], "edges": [{"source": "$graphify-root$_tsconfig_json", "target": "$graphify-root$_tsconfig_files", "relation": "contains", "confidence": "EXTRACTED", "source_file": "tsconfig.json", "source_location": "L2", "weight": 1.0}, {"source": "$graphify-root$_tsconfig_json", "target": "$graphify-root$_tsconfig_references", "relation": "contains", "confidence": "EXTRACTED", "source_file": "tsconfig.json", "source_location": "L3", "weight": 1.0}]}
		`@ -0,0 +1 @@`
							{"nodes": [{"id": "$graphify-root$_oxlintrc_json", "label": ".oxlintrc.json", "file_type": "code", "source_file": ".oxlintrc.json", "source_location": "L1"}, {"id": "$graphify-root$_oxlintrc_schema", "label": "$schema", "file_type": "code", "source_file": ".oxlintrc.json", "source_location": "L2"}, {"id": "$graphify-root$_oxlintrc_plugins", "label": "plugins", "file_type": "code", "source_file": ".oxlintrc.json", "source_location": "L3"}, {"id": "ref_react", "label": "react", "file_type": "concept", "source_file": ".oxlintrc.json", "source_location": "L3"}, {"id": "ref_typescript", "label": "typescript", "file_type": "concept", "source_file": ".oxlintrc.json", "source_location": "L3"}, {"id": "ref_oxc", "label": "oxc", "file_type": "concept", "source_file": ".oxlintrc.json", "source_location": "L3"}, {"id": "$graphify-root$_oxlintrc_rules", "label": "rules", "file_type": "code", "source_file": ".oxlintrc.json", "source_location": "L4"}, {"id": "$graphify-root$_oxlintrc_rules_react_rules_of_hooks", "label": "react/rules-of-hooks", "file_type": "code", "source_file": ".oxlintrc.json", "source_location": "L5"}, {"id": "$graphify-root$_oxlintrc_rules_react_only_export_components", "label": "react/only-export-components", "file_type": "code", "source_file": ".oxlintrc.json", "source_location": "L6"}, {"id": "ref_warn", "label": "warn", "file_type": "concept", "source_file": ".oxlintrc.json", "source_location": "L6"}], "edges": [{"source": "$graphify-root$_oxlintrc_json", "target": "$graphify-root$_oxlintrc_schema", "relation": "contains", "confidence": "EXTRACTED", "source_file": ".oxlintrc.json", "source_location": "L2", "weight": 1.0}, {"source": "$graphify-root$_oxlintrc_json", "target": "$graphify-root$_oxlintrc_plugins", "relation": "contains", "confidence": "EXTRACTED", "source_file": ".oxlintrc.json", "source_location": "L3", "weight": 1.0}, {"source": "$graphify-root$_oxlintrc_plugins", "target": "ref_react", "relation": "extends", "confidence": "EXTRACTED", "source_file": ".oxlintrc.json", "source_location": "L3", "weight": 1.0, "context": "import"}, {"source": "$graphify-root$_oxlintrc_plugins", "target": "ref_typescript", "relation": "extends", "confidence": "EXTRACTED", "source_file": ".oxlintrc.json", "source_location": "L3", "weight": 1.0, "context": "import"}, {"source": "$graphify-root$_oxlintrc_plugins", "target": "ref_oxc", "relation": "extends", "confidence": "EXTRACTED", "source_file": ".oxlintrc.json", "source_location": "L3", "weight": 1.0, "context": "import"}, {"source": "$graphify-root$_oxlintrc_json", "target": "$graphify-root$_oxlintrc_rules", "relation": "contains", "confidence": "EXTRACTED", "source_file": ".oxlintrc.json", "source_location": "L4", "weight": 1.0}, {"source": "$graphify-root$_oxlintrc_rules", "target": "$graphify-root$_oxlintrc_rules_react_rules_of_hooks", "relation": "contains", "confidence": "EXTRACTED", "source_file": ".oxlintrc.json", "source_location": "L5", "weight": 1.0}, {"source": "$graphify-root$_oxlintrc_rules", "target": "$graphify-root$_oxlintrc_rules_react_only_export_components", "relation": "contains", "confidence": "EXTRACTED", "source_file": ".oxlintrc.json", "source_location": "L6", "weight": 1.0}, {"source": "$graphify-root$_oxlintrc_rules_react_only_export_components", "target": "ref_warn", "relation": "extends", "confidence": "EXTRACTED", "source_file": ".oxlintrc.json", "source_location": "L6", "weight": 1.0, "context": "import"}]}
		`@ -0,0 +1 @@`
							<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>