Work on Create your restaurant and Inventory

src/components/Home/CreateYourRestaurant/CreateRestaurant.js

@@ -1,34 +1,47 @@
 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 CloudKitchenProject from './contcet/CloudKitchenProject';
+import OperationalDetails from './contcet/OperationalDetails';
+import RequiredEquipments from './contcet/RequiredEquipments';
+import VisualIdentity from './contcet/VisualIdentity';
+import Budget from './contcet/Budget';
+import AdditionalSupport from './contcet/AdditionalSupport';
+import AdditionalNotes from './contcet/AdditionalNotes';
+import SideProfile from './SideProfile';
 
 const drawerWidth = 230;
 
 const CreateRestaurant = () => {
   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 = [
+    <CloudKitchenProject onNext={() => setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />,
+    <OperationalDetails onNext={() => setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />,
+    <RequiredEquipments onNext={() => setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />,
+    <VisualIdentity onNext={() => setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />,
+    <Budget onNext={() => setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />,
+    <AdditionalSupport onNext={() => setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />,
+    <AdditionalNotes onBack={() => setCurrentStep(currentStep - 1)} />,
+  ];
+
   useEffect(() => {
-    // هنا يجب استبدال هذا بمنطق فعلي للتحقق من وجود المنتجات
-    // مثلاً استدعاء API أو التحقق من state
     const checkProducts = async () => {
-      // محاكاة لاستدعاء API
-      const productsExist = await checkIfProductsExist(); // استبدل هذه الدالة بمنطقك الفعلي
+      const productsExist = await checkIfProductsExist();
       setHasProducts(productsExist);
     };
-
     checkProducts();
   }, []);
 
-  // دالة مساعدة لمحاكاة التحقق من المنتجات (استبدلها بمنطقك الفعلي)
   const checkIfProductsExist = async () => {
-    // محاكاة - يمكن أن يكون هذا استدعاء لـ API أو تحقق من state
-    //  return true;
-    return false; // غير هذه القيمة حسب منطقك
+    return false;
   };
 
   useEffect(() => {
@@ -50,7 +63,6 @@ const CreateRestaurant = () => {
 
     handleResize();
     window.addEventListener('resize', handleResize);
-
     return () => window.removeEventListener('resize', handleResize);
   }, [theme.breakpoints.values.md]);
 
@@ -76,16 +88,8 @@ const CreateRestaurant = () => {
         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,
@@ -96,10 +100,66 @@ const CreateRestaurant = () => {
           sidebarOpen={sidebarOpen}
           isMobile={isMobile}
         />
-        <Typography>CreateYourRestaurant</Typography>
+        <Box>
+          <Box sx={{
+            display: 'flex', height: '100vh',
+
+          }}>
+            <Box sx={{
+              height: '100vh',
+              ml: 3,
+              mb: 2,
+              width: { md: '30%' },
+              display: { xs: 'none', sm: 'none', 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: 2, md: 3 },
+
+              flexGrow: 1,
+              height: '100vh',
+              pr: { sm: 2, md: 1 },
+
+              pt: 3,
+              mb: { sm: 20 },
+              width: { 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 CreateRestaurant;