Work on Host Kitchen

src/components/Home/HostKitchen/HostKitchen.js

@@ -1,32 +1,46 @@
 import React, { useState, useEffect } from 'react';
-import { Box, useTheme, useMediaQuery, Typography } from '@mui/material';
+import { Box, useTheme, useMediaQuery } from '@mui/material';
 import KitchPlusAppBar from '../AppBar';
 import Sidebar from '../SideHome';
+import PostSubmission from './contcet/PostSubmission';
+import CloudKitchenHosting from './contcet/CloudKitchenHosting';
+import Infrastructure from './contcet/Infrastructure';
+import RstaurantOperations from './contcet/RstaurantOperations';
+import Facilitation from './contcet/Facilitation';
+import Expansion from './contcet/Expansion';
+
+import SideProfile from './SideProfile';
 
 const drawerWidth = 230;
 
 const HostKitchen = () => {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
-  const [hasProducts, setHasProducts] = useState(false); // حالة لتتبع وجود المنتجات
+  const [hasProducts, setHasProducts] = useState(false);
   const [sidebarOpen, setSidebarOpen] = useState(!isMobile);
 
+  // ⬇️ إدارة الخطوة الحالية
+  const [currentStep, setCurrentStep] = useState(0);
+
+  const steps = [
+    <CloudKitchenHosting onNext={() => setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />,
+    <RstaurantOperations onNext={() => setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />,
+    <Infrastructure onNext={() => setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />,
+    <Facilitation onNext={() => setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />,
+    <Expansion onNext={() => setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />,
+
+  ];
 
   useEffect(() => {
     const checkProducts = async () => {
-    
-      const productsExist = await checkIfProductsExist(); 
+      const productsExist = await checkIfProductsExist();
       setHasProducts(productsExist);
     };
-
     checkProducts();
   }, []);
 
-  // دالة مساعدة لمحاكاة التحقق من المنتجات (استبدلها بمنطقك الفعلي)
   const checkIfProductsExist = async () => {
-    // محاكاة - يمكن أن يكون هذا استدعاء لـ API أو تحقق من state
-    //  return true;
-    return false; // غير هذه القيمة حسب منطقك
+    return false;
   };
 
   useEffect(() => {
@@ -48,7 +62,6 @@ const HostKitchen = () => {
 
     handleResize();
     window.addEventListener('resize', handleResize);
-
     return () => window.removeEventListener('resize', handleResize);
   }, [theme.breakpoints.values.md]);
 
@@ -74,16 +87,8 @@ const HostKitchen = () => {
         flexGrow: 1,
         display: 'flex',
         flexDirection: 'column',
-        width: {
-          xs: '100%',
-          sm: '100%',
-          md: '100%'
-        },
-        marginLeft: {
-          xs: 0,
-          sm: sidebarOpen ? `${drawerWidth}px` : 0,
-          md: 0
-        },
+        width: { xs: '100%', sm: '100%', md: '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,
@@ -94,10 +99,85 @@ const HostKitchen = () => {
           sidebarOpen={sidebarOpen}
           isMobile={isMobile}
         />
-        <Typography>HostKitchen</Typography>
+        {/* <Box sx={{
+          flexGrow: 1,
+          width: sidebarOpen ? 'calc(100% - 20px)' : '100%',
+          pt: { xs: 0.5, sm: 1 },
+          mt: { xs: 1, sm: 2 },
+          overflowY: 'auto',
+          pl: { xs: 0, sm: 2 },
+          pr: { xs: 1, sm: 2 },
+          pb: { xs: 1, sm: 2 },
+          scrollbarWidth: 'none',
+          '&::-webkit-scrollbar': { display: 'none' },
+          transition: theme.transitions.create(['margin'], {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.leavingScreen,
+          }),
+        }}>
+          <PostSubmission />
+        </Box> */}
+        <Box>
+          <Box sx={{
+            display: 'flex', height: '100vh',
+            overflowY: 'auto',
+            scrollbarWidth: 'none',
+            '&::-webkit-scrollbar': {
+              display: 'none',
+            },
+          }}>
+            <Box sx={{
+              height: '100vh',
+              ml: 3,
+              mb: 2,
+              width: { xs: '30%', md: '30%' },
+              display: { xs: 'none', sm: 'block', md: 'block' },
+              // overflowY: 'auto',
+              // scrollbarWidth: 'none',
+              // '&::-webkit-scrollbar': {
+              //   display: 'none',
+              // },
+            }}>
+
+              <Box sx={{
+                minHeight: '100%', pb: 15, pt: 3,
+
+              }}>
+                <SideProfile
+                  currentStepIndex={currentStep}
+                  onBack={() => setCurrentStep(prev => Math.max(prev - 1, 0))}
+                />
+
+
+              </Box>
+            </Box>
+
+            <Box sx={{
+              ml: { xs: 1, md: 3 },
+              flexGrow: 1,
+              height: '100vh',
+              pr: { sm: 2, md: 1 },
+              pt: 3,
+              mb: { sm: 20 },
+              width: { xs: '50%', md: '60%' }, display: { xs: 'block', sm: 'block', md: 'block' },
+              // overflowY: 'auto',
+              // scrollbarWidth: 'none',
+              // '&::-webkit-scrollbar': {
+              //   display: 'none',
+              // },
+            }}>
+              <Box sx={{
+                minHeight: '100%', pb: 18,
+
+              }}>
+                {steps[currentStep]}
+              </Box>
+            </Box>
+          </Box>
+        </Box>
       </Box>
     </Box>
   );
 };
 
-export default HostKitchen;
+export default HostKitchen;