Updates to the settings interface and restaurant account creation.

src/components/Home/RestaurantProfile/RestaurantProfile.js

@@ -1,34 +1,50 @@
 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 LoginRestaurant from './contcet/LoginRestaurant';
+import BasicInformation from './contcet/BasicInformation';
+import ContactInformation from './contcet/ContactInformation';
+import BusinessHours from './contcet/BusinessHours';
+import UploadMenu from './contcet/UploadMenu';
+import Equipment from './contcet/Equipment';
+import TypeOfRestaurant from './contcet/TypeOfRestaurant';
+import OperationalCapacity from './contcet/OperationalCapacity';
+import UploadPhotos from './contcet/UploadPhotos';
+import SideProfile from './SideProfile';
 
 const drawerWidth = 230;
 
 const RestaurantProfile = () => {
   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 = [
+    <BasicInformation onNext={() => setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />,
+    <ContactInformation onNext={() => setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />,
+    <BusinessHours onNext={() => setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />,
+    <UploadMenu onNext={() => setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />,
+    <Equipment onNext={() => setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />,
+    <OperationalCapacity onNext={() => setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />,
+    <TypeOfRestaurant onNext={() => setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />,
+    <UploadPhotos 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 +66,6 @@ const RestaurantProfile = () => {
 
     handleResize();
     window.addEventListener('resize', handleResize);
-
     return () => window.removeEventListener('resize', handleResize);
   }, [theme.breakpoints.values.md]);
 
@@ -76,16 +91,8 @@ const RestaurantProfile = () => {
         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 +103,65 @@ const RestaurantProfile = () => {
           sidebarOpen={sidebarOpen}
           isMobile={isMobile}
         />
-        <Typography>RestaurantProfile</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 RestaurantProfile;
+export default RestaurantProfile;