Feature/chef overflow

package.json

@@ -22,6 +22,7 @@
     "react-icons": "^5.5.0",
     "react-router": "^7.9.5",
     "react-router-dom": "^7.9.5",
+    "recharts": "^3.8.1",
     "tailwindcss": "^4.1.17",
     "zod": "^4.3.6",
     "zustand": "^5.0.10"

src/App.jsx

@@ -1,5 +1,6 @@
 import { Route, Routes, Navigate } from "react-router";
-import { AppLayout, AuthLayout } from "./Layout";
+import { AppLayout, AuthLayout, DashboardLayout } from "./Layout";
+import StaffRoute from "./components/StaffRoute";
 
 import {
   Home,
@@ -11,6 +12,13 @@ import {
   Thanks,
   Favorites,
   StoreDebug,
+  Dashboard,
+  Orders,
+  RecipeBuilder,
+  ChefMenu,
+  LiveKitchen,
+  MenuManagement,
+  Ingredients,
 } from "./pages";
 import { useAuthInit } from "./hooks/useAuthInit";
 import Menu from "./pages/Menu/Menu";
@@ -68,8 +76,27 @@ export default function App() {
 
         {/* Catch-all: redirect unknown URLs to Home */}
         <Route path="*" element={<Navigate to="/" replace />} />
+
+        {/* ── Dashboard Routes ──
+            Separate full-screen layout (no Navbar/Footer).
+            Protected: requires authentication (chef/admin).       */}
+        <Route
+          path="/dashboard"
+          element={
+            <StaffRoute>
+              <DashboardLayout />
+            </StaffRoute>
+          }
+        >
+          <Route index element={<Dashboard />} />
+          <Route path="orders" element={<Orders />} />
+          <Route path="recipe-builder" element={<RecipeBuilder />} />
+          <Route path="chef-menu" element={<ChefMenu />} />
+          <Route path="live-kitchen" element={<LiveKitchen />} />
+          <Route path="menu-management" element={<MenuManagement />} />
+          <Route path="ingredients" element={<Ingredients />} />
+        </Route>
       </Routes>
     </>
   );
 }
-

src/Layout/DashboardLayout.jsx

@@ -0,0 +1,32 @@
+import { Outlet } from "react-router-dom";
+import DashboardSidebar from "../components/Dashboard/DashboardSidebar";
+import { useDashboardRealtime } from "../hooks/dashboard/useDashboardRealtime";
+import { ToastContainer } from "../components/Dashboard/shared/useToast";
+
+/**
+ * DashboardLayout
+ * Full-screen staff dashboard shell.
+ * No customer Navbar/Footer — completely separate from AppLayout.
+ * ToastContainer is mounted here so toasts appear globally across all dashboard pages.
+ */
+function DashboardLayout() {
+  // Initialize real-time WebSocket connection for all dashboard views
+  useDashboardRealtime();
+
+  return (
+    <div className="flex min-h-screen bg-[#f5ecdc]" style={{ fontFamily: "'DM Sans', sans-serif" }}>
+      {/* Fixed left sidebar */}
+      <DashboardSidebar />
+
+      {/* Scrollable main content */}
+      <main className="flex-1 overflow-y-auto" style={{ marginLeft: "240px" }}>
+        <Outlet />
+      </main>
+
+      {/* Global toast notifications — renders on top of everything */}
+      <ToastContainer />
+    </div>
+  );
+}
+
+export default DashboardLayout;

src/Layout/index.js

@@ -1,2 +1,3 @@
 export { default as AppLayout } from "./AppLayout";
-export { default as AuthLayout } from "./AuthLayout";
+export { default as AuthLayout } from "./AuthLayout";
+export { default as DashboardLayout } from "./DashboardLayout";