Initial commit - restaurant dashboard

src/components/Home/RestaurantProfile/all.js

@@ -0,0 +1,124 @@
+import React, { useEffect, useState, useCallback } from "react";
+import { CircularProgress, Box, useTheme, useMediaQuery, Skeleton } from "@mui/material";
+import RestaurantProfile from "./RestaurantProfile";
+import Setting from "../Settings/AccountProfile";
+import authService from "../../../services/authService";
+import { useRestaurant } from "../../../contexts/RestaurantContext";
+import KitchPlusAppBar from "../AppBar";
+import Sidebar from "../SideHome"
+const drawerWidth = 230;
+
+const RestaurantWrapper = () => {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+  const { restaurantId } = useRestaurant();
+
+  const [loading, setLoading] = useState(true);
+  const [hasProfile, setHasProfile] = useState(false);
+  const [sidebarOpen, setSidebarOpen] = useState(!isMobile);
+
+  const fetchProfile = useCallback(async () => {
+    if (!restaurantId) {
+      setLoading(false);
+      return;
+    }
+    setLoading(true);
+    try {
+      const profile = await authService.getRestaurantProfile(restaurantId);
+      setHasProfile(profile && Object.keys(profile).length > 0);
+    } catch (error) {
+      console.error("Error checking restaurant profile:", error);
+      setHasProfile(false);
+    } finally {
+      setLoading(false);
+    }
+  }, [restaurantId]);
+
+  useEffect(() => {
+    fetchProfile();
+  }, [fetchProfile]);
+
+  useEffect(() => {
+    const handleResize = () =>
+      setSidebarOpen(window.innerWidth >= theme.breakpoints.values.md);
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [theme.breakpoints.values.md]);
+
+  const handleDrawerToggle = () => setSidebarOpen(!sidebarOpen);
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        height: "100vh",
+        backgroundColor: "#F6F6F6",
+        overflow: "hidden",
+      }}
+    >
+      {/* البار الجانبي */}
+      <Sidebar
+        open={sidebarOpen}
+        onClose={handleDrawerToggle}
+        isMobile={isMobile}
+        drawerWidth={drawerWidth}
+      />
+
+      {/* المحتوى الرئيسي */}
+      <Box
+        sx={{
+          flexGrow: 1,
+          display: "flex",
+          flexDirection: "column",
+          width: "100%",
+          marginLeft: {
+            xs: 0,
+            sm: sidebarOpen ? `${drawerWidth}px` : 0,
+            md: 0,
+          },
+          transition: theme.transitions.create(["width"], {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.leavingScreen,
+          }),
+        }}
+      >
+        {/* البار العلوي */}
+        <KitchPlusAppBar
+          onDrawerToggle={handleDrawerToggle}
+          sidebarOpen={sidebarOpen}
+          isMobile={isMobile}
+        />
+
+        {/* المحتوى حسب وجود البروفايل */}
+        <Box
+          sx={{
+            flexGrow: 1,
+            overflowY: "auto",
+            scrollbarWidth: "none",
+            "&::-webkit-scrollbar": { display: "none" },
+            pt: { xs: 2, sm: 3, md: 3 },
+             pl: { xs: 2, sm: 3, md: 3 },
+              pr: { xs: 2, sm: 3, md: 3 },
+          }}
+        >
+          {loading ? (
+            // Skeleton placeholder
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+              <Skeleton variant="rectangular" height={40} width="40%" />
+              <Skeleton variant="rectangular" height={40} width="60%" />
+              <Skeleton variant="rectangular" height={200} width="100%" />
+              <Skeleton variant="rectangular" height={40} width="80%" />
+            </Box>
+          ) : hasProfile ? (
+            <Setting />
+          ) : (
+            <RestaurantProfile refreshProfile={fetchProfile} />
+          )}
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default RestaurantWrapper;