Updates to the settings interface and restaurant account creation.

package-lock.json

@@ -16,6 +16,7 @@
         "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/react": "^16.3.0",
         "@testing-library/user-event": "^13.5.0",
+        "axios": "^1.9.0",
         "react": "^19.1.0",
         "react-circular-progressbar": "^2.2.0",
         "react-dom": "^19.1.0",
@@ -5404,6 +5405,32 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.9.0.tgz",
+      "integrity": "sha512-re4CqKTJaURpzbLHtIi6XpDv20/CnpXOtjRY5/CU32L8gU8ek9UIivcfvSWvmKEngmVbrUtPpdDwWDWL7DNHvg==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/axios/node_modules/form-data": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.2.tgz",
+      "integrity": "sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
@@ -14327,6 +14354,12 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
+    },
     "node_modules/psl": {
       "version": "1.15.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.15.0.tgz",

package.json

@@ -11,6 +11,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.9.0",
     "react": "^19.1.0",
     "react-circular-progressbar": "^2.2.0",
     "react-dom": "^19.1.0",

src/components/Authentication/SignUp_In/LoginForm.js

@@ -191,6 +191,7 @@ const LoginForm = () => {
                   fullWidth
                   onClick={handleLogin}
                   sx={{
+                     fontFamily: 'PlusJakartaSans' ,
                     fontWeight: 600,
                     fontSize: { xs: '14px', sm: '16px' },
                     height: { xs: '45px', sm: '52px' },
@@ -210,7 +211,7 @@ const LoginForm = () => {
               {/* Divider */}
               <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, py: 2 }}>
                 <Box sx={{ flex: 1, height: '1px', backgroundColor: '#E0E0E0' }} />
-                <Typography variant="body1" sx={{ fontWeight: 500, fontSize: '16px', color: 'black' }}>
+                <Typography variant="body1" sx={{ fontWeight: 500, fontSize: '16px', color: 'black' , fontFamily: 'PlusJakartaSans' }}>
                   Or
                 </Typography>
                 <Box sx={{ flex: 1, height: '1px', backgroundColor: '#E0E0E0' }} />
@@ -233,6 +234,7 @@ const LoginForm = () => {
                     borderColor: 'black',
                     backgroundColor: 'transparent'
                   }
+                   , fontFamily: 'PlusJakartaSans'  
                 }}
               >
                 <Box sx={{ display: 'flex', alignItems: 'center' }}>
@@ -262,6 +264,7 @@ const LoginForm = () => {
                     borderColor: 'black',
                     backgroundColor: 'transparent'
                   }
+                   , fontFamily: 'PlusJakartaSans'  
                 }}
               >
                 <Box sx={{ display: 'flex', alignItems: 'center' }}>

src/components/Home/AppBar.js

@@ -87,7 +87,7 @@ const KitchPlusAppBar = ({ onDrawerToggle, sidebarOpen, isMobile }) => {
                     ) : (
                         <Autocomplete
                             sx={{
-                                width: { xs: '200px', sm: '250px', md: '300px' },
+                                width: { xs: '200px', sm: '200px', md: '250px' },
                                 borderRadius: '8px',
                             }}
                             freeSolo
@@ -128,7 +128,7 @@ const KitchPlusAppBar = ({ onDrawerToggle, sidebarOpen, isMobile }) => {
                                 display: { xs: 'none', sm: 'none', md: 'flex' }, // هذا السطر يخفي الزر عند xs و sm ويظهره من md وما فوق
                                 color: 'white',
                                 height: { xs: 32, sm: 36, md: 40 },
-                                mr: { xs: '6px', sm: '8px', md: '10px' },
+                                mr: { xs: '6px', sm: '8px', md: '0px' },
                                 backgroundColor: '#61677F',
                                 borderRadius: '8px',
                                 fontWeight: 600,
@@ -147,7 +147,6 @@ const KitchPlusAppBar = ({ onDrawerToggle, sidebarOpen, isMobile }) => {
                             sx={{
                                 height: { xs: 30, sm: 36, md: 40 },
                                 alignSelf: 'center',
-                                mx: 1 // إضافة هامش أفقي إذا لزم الأمر
                             }}
                         />
                     )}

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 false;
-    //  return true;
-    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: {
+        width: { xs: '100%', sm: '100%', md: '100%' },
-          xs: '100%',
+        marginLeft: { xs: 0, sm: sidebarOpen ? `${drawerWidth}px` : 0, md: 0 },
-          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;

src/components/Home/RestaurantProfile/SideProfile.js

@@ -0,0 +1,163 @@
+import React from 'react';
+import { Box, Typography, Stack, Button, useTheme } from '@mui/material';
+import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
+
+const steps = [
+  { title: 'Basic Information', icon: '/images/createProfile/BasicInf.png' },
+  { title: 'Contact Information', icon: '/images/createProfile/ContactInf.png' },
+  { title: 'Business Hours', icon: '/images/createProfile/BusinessHours.png' },
+  { title: 'Menu Upload', icon: '/images/createProfile/MenuUpload.png' },
+  { title: 'Available Equipment', icon: '/images/createProfile/equipment.png' },
+  { title: 'Operational Capacity', icon: '/images/icons/rocket.png' },
+  { title: 'Type of Restaurant', icon: '/images/createProfile/TypeOfRestaurant.png' },
+  { title: 'Upload Photos', icon: '/images/createProfile/UploadPhotos.png' },
+  { title: 'Submit & Confirmation', icon: '/images/createProfile/Confirmation.png' },
+];
+
+const SideProfile = ({ currentStepIndex = 0, onBack }) => {
+  const theme = useTheme();
+
+  return (
+    <Box
+      sx={{
+        height: '100%',
+        backgroundColor: '#FFFFFF',
+        px: 3,
+        py: 4,
+        display: { xs: 'none', md: 'block' },
+        borderRadius: 2,
+        boxShadow: '0px 1px 4px rgba(0,0,0,0.05)',
+        position: 'relative',
+      }}
+    >
+      {/* العنوان الرئيسي */}
+      <Typography fontSize="18px" fontWeight={600} mb={1.2}>
+        Restaurant Registration Flow
+      </Typography>
+      <Typography variant="body2" color="text.secondary" mb={3}>
+        Complete this process to register your restaurant on our amazing food platform.
+      </Typography>
+
+      {/* الخطوات */}
+      <Stack spacing={3} sx={{ ml: 1, position: 'relative', pb: 12 }}>
+        {steps.map((step, index) => (
+          <Box key={index} position="relative">
+            {/* الخط الرأسي بين الدوائر */}
+            {index !== steps.length - 1 && (
+              <Box
+                sx={{
+                  position: 'absolute',
+                  top: '28px',
+                  left: '23px',
+                  width: '2px',
+                  height: 'calc(100% - 5px)',
+                  backgroundColor: '#E0E0E0',
+                  zIndex: 0,
+                }}
+              />
+            )}
+
+            {/* محتوى كل خطوة */}
+            <Box display="flex" alignItems="center" gap={2}>
+              {/* الدائرة بالأيقونة */}
+              <Box
+                sx={{
+                  position: 'relative',
+                  width: 45,
+                  height: 45,
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  zIndex: 1,
+                }}
+              >
+                {/* الدائرة الخلفية - تظهر دائمًا */}
+                <Box
+                  sx={{
+                    position: 'absolute',
+                    backgroundImage:
+                      index <= currentStepIndex
+                        ? 'linear-gradient(0deg, #FF914D, #F3F3F3)'
+                        : 'linear-gradient(0deg, #DFDFDF, #F0F0F0)',
+                    width: 48,
+                    height: 48,
+                    borderRadius: '50%',
+                    top: '50%',
+                    left: '50%',
+                    transform: 'translate(-50%, -50%)',
+                    zIndex: 0,
+                  }}
+                />
+
+                {/* الدائرة الأمامية بالأيقونة */}
+                <Box
+                  sx={{
+                    width: 40,
+                    height: 40,
+                    borderRadius: '50%',
+                    backgroundColor: '#FFF',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    zIndex: 1,
+                  }}
+                >
+                  <img
+                    src={step.icon}
+                    alt={step.title}
+                    style={{
+                      width: 20,
+                      height: 20,
+                      marginLeft: step.title === 'Available Equipment' ? 7 : 0,
+                      objectFit: 'contain',
+                    }}
+                  />
+                </Box>
+              </Box>
+
+              {/* العنوان */}
+              <Typography
+                sx={{
+                  fontSize: '16px',
+                  fontWeight: 600,
+                  color: '#000',
+                }}
+              >
+                {step.title}
+              </Typography>
+            </Box>
+          </Box>
+        ))}
+      </Stack>
+
+      {/* زر الرجوع */}
+      <Box
+        sx={{
+          position: 'absolute',
+          bottom: 16,
+          right: 24,
+        }}
+      >
+        <Button
+          variant="text"
+          startIcon={<ArrowBackIosIcon sx={{ fontSize: 20 }} />}
+          onClick={onBack}
+          disabled={currentStepIndex === 0}
+          sx={{
+            textTransform: 'none',
+            fontSize: '20px',
+            color: currentStepIndex === 0 ? '#C2C2C2' : '#6B7283',
+            '&:hover': {
+              backgroundColor: 'transparent',
+              color: theme.palette.primary.main,
+            },
+          }}
+        >
+          Back
+        </Button>
+      </Box>
+    </Box>
+  );
+};
+
+export default SideProfile;

src/components/Home/RestaurantProfile/contcet/BasicInformation.js

@@ -0,0 +1,136 @@
+import React from 'react';
+import { Box, Typography, Stack, Button, useTheme, TextField } from '@mui/material';
+
+const BasicInformation = ({ currentStepIndex = 0, onNext, onBack }) => {
+  const theme = useTheme();
+
+  return (
+    <Box
+      sx={{
+        height: { xs: '90%', sm: '100%', md: 740 },
+        backgroundColor: '#FFFFFF',
+        px: 4,
+        pt: 4.5,
+        pb: 10,
+        display: 'block',
+        borderRadius: 2,
+        boxShadow: '0px 1px 4px rgba(0,0,0,0.05)',
+        position: 'relative',
+        width: { xs: '80%', sm: '90%' },
+      }}
+    >
+      <Stack spacing={2.5}>
+        <Typography
+          fontWeight={700}
+          sx={{
+            fontSize: {
+              xs: '1.8rem',
+              sm: '2rem',
+              md: '2.2rem'
+            }
+          }}
+        >
+          Basic Information
+        </Typography>
+        <Box sx={{ width: '70%' }}>
+          <Typography
+            fontSize="16px"
+            color="text.secondary"
+            fontWeight={500}
+            sx={{ pb: 1 }}
+          >
+            Enter your basic information to proceed to registration of your own restaurant on this platform
+          </Typography>
+        </Box>
+
+        {/* Inputs (Restaurant Name, Type, Address, City, Postal Code) */}
+        {[
+          { label: 'Restaurant Name', placeholder: 'Al-Baik Foods' },
+          { label: 'Restaurant Type', placeholder: 'Fast Food' },
+          { label: 'Address', placeholder: 'Ward # 13' },
+          { label: 'City', placeholder: 'Jordan' },
+          { label: 'Postal Code', placeholder: '31200' },
+        ].map((field, index) => (
+          <Box key={index} sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+            <Typography variant="body2" color="black" sx={{ fontWeight: '500', fontSize: '16px' }}>
+              {field.label}
+            </Typography>
+            <TextField
+              placeholder={field.placeholder}
+              variant="outlined"
+              fullWidth
+              sx={{
+                '& input': { fontWeight: 500, fontSize: '15px' },
+                '& input::placeholder': { color: '#969BA7' },
+                '& .MuiOutlinedInput-root': {
+                  borderRadius: '10px',
+                  transition: '0.3s',
+                  '&.Mui-focused fieldset': {
+                    borderColor: theme.palette.primary.main,
+                    boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)'
+                  }
+                },
+                '& .MuiOutlinedInput-root.Mui-focused': {
+                  borderColor: '#3f51b5',
+                  boxShadow: '0 0 0 2px rgba(63,81,181,0.1)'
+                }
+              }}
+            />
+          </Box>
+        ))}
+
+
+        <Box sx={{ pt: 2 }}>
+          <Button
+            variant="contained"
+            fullWidth
+            onClick={onNext}
+            sx={{
+              fontFamily: 'PlusJakartaSans',
+              fontWeight: 600,
+              fontSize: { xs: '14px', sm: '16px' },
+              height: { xs: '45px', sm: '52px' },
+              borderRadius: '50px',
+              textTransform: 'none',
+              color: 'white',
+              backgroundColor: theme.palette.primary.main,
+              '&:hover': {
+                backgroundColor: theme.palette.primary.hover,
+              },
+            }}
+          >
+            Next
+          </Button>
+
+          {/* زر Back تحت زر Next */}
+          <Button
+            variant="outlined"
+            fullWidth
+            onClick={onBack}
+            sx={{
+              mt: 2,
+              fontFamily: 'PlusJakartaSans',
+              fontWeight: 600,
+              fontSize: { xs: '14px', sm: '16px' },
+              height: { xs: '45px', sm: '52px' },
+              borderRadius: '50px',
+              textTransform: 'none',
+              display: { xs: 'block', sm: 'block', md: 'none' }, // يظهر فقط في xs و sm
+              borderColor: theme.palette.primary.main,
+              color: theme.palette.primary.main,
+              '&:hover': {
+                backgroundColor: theme.palette.primary.light,
+                borderColor: theme.palette.primary.main,
+              },
+            }}
+          >
+            Back
+          </Button>
+        </Box>
+
+      </Stack>
+    </Box>
+  );
+};
+
+export default BasicInformation;

src/components/Home/RestaurantProfile/contcet/BusinessHours.js

@@ -0,0 +1,207 @@
+import React, { useState } from 'react';
+import {
+    Box,
+    Typography,
+    Stack,
+    Button,
+    useTheme,
+    TextField,
+    Checkbox,
+    FormGroup,
+    FormControlLabel
+} from '@mui/material';
+
+const BusinessHours = ({ currentStepIndex = 0, onNext, onBack }) => {
+    const theme = useTheme();
+
+    const [selectedDays, setSelectedDays] = useState([]);
+
+    const handleCheckboxChange = (day) => {
+        setSelectedDays((prev) =>
+            prev.includes(day)
+                ? prev.filter((d) => d !== day)
+                : [...prev, day]
+        );
+    };
+
+    const days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
+
+    return (
+        <Box
+            sx={{
+                height: { xs: '90%', sm: '100%', md: 740 },
+                backgroundColor: '#FFFFFF',
+                px: 4,
+                pt: 4.5,
+                pb: 10,
+                display: 'block',
+                borderRadius: 2,
+                boxShadow: '0px 1px 4px rgba(0,0,0,0.05)',
+                position: 'relative',
+                width: { xs: '80%', sm: '90%' },
+            }}
+        >
+            <Stack spacing={2.5}>
+                <Typography
+                    fontWeight={700}
+                    sx={{
+                        fontSize: {
+                            xs: '1.8rem',
+                            sm: '2rem',
+                            md: '2.2rem'
+                        }
+                    }}
+                >
+                    Business Hours
+                </Typography>
+
+                <Box sx={{ width: '70%' }}>
+                    <Typography
+                        fontSize="16px"
+                        color="text.secondary"
+                        fontWeight={500}
+                        sx={{ pb: 1 }}
+                    >
+                        Enter your business hours to proceed to registration of your own restaurant on this platform
+                    </Typography>
+                </Box>
+
+                {/* Operational Hours Input */}
+                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+                    <Typography variant="body2" color="black" sx={{ fontWeight: '500', fontSize: '16px' }}>
+                        Operational Hours
+                    </Typography>
+                    <TextField
+                        placeholder="16 hours"
+                        variant="outlined"
+                        fullWidth
+                        sx={{
+                            '& input': { fontWeight: 500, fontSize: '15px' },
+                            '& input::placeholder': { color: '#969BA7' },
+                            '& .MuiOutlinedInput-root': {
+                                borderRadius: '10px',
+                                transition: '0.3s',
+                                '&.Mui-focused fieldset': {
+                                    borderColor: theme.palette.primary.main,
+                                    boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)'
+                                }
+                            },
+                            '& .MuiOutlinedInput-root.Mui-focused': {
+                                borderColor: '#3f51b5',
+                                boxShadow: '0 0 0 2px rgba(63,81,181,0.1)'
+                            }
+                        }}
+                    />
+                </Box>
+
+                {/* Checkboxes for Days of the Week */}
+                <Box sx={{ mt: 2 }}>
+                    <Typography
+                        variant="body2"
+                        color="black"
+                        sx={{ fontWeight: '500', fontSize: '16px', mb: 1 }}
+                    >
+                        Closed Days
+                    </Typography>
+                    <FormGroup
+                        row
+                        sx={{
+                            display: 'flex',
+                            flexWrap: 'wrap',
+                            gap: 1,
+                        }}
+                    >
+                        {days.map((day) => {
+                            const isChecked = selectedDays.includes(day);
+                            return (
+                                <FormControlLabel
+                                    key={day}
+                                    control={
+                                        <Checkbox
+                                            checked={isChecked}
+                                            onChange={() => handleCheckboxChange(day)}
+                                            sx={{
+                                                transform: 'scale(1.5)',
+                                                color: '#F0EDED',
+                                                '&.Mui-checked': {
+                                                    color: '#FF914D',
+                                                },
+                                            }}
+                                        />
+                                    }
+                                    label={
+                                        <Typography
+                                            sx={{
+                                                color: isChecked ? '#e57f3f' : '#969BA7',
+                                                fontWeight: 500
+                                            }}
+                                        >
+                                            {day}
+                                        </Typography>
+                                    }
+                                    sx={{
+                                        m: 0,
+                                        width: { xs: '45%', sm: '30%', md: '22%' },
+                                    }}
+                                />
+                            );
+                        })}
+                    </FormGroup>
+                </Box>
+
+                {/* Next Button */}
+ 
+                <Box sx={{ pt: 2 }}>
+                                     <Button
+                                         variant="contained"
+                                         fullWidth
+                                         onClick={onNext}
+                                         sx={{
+                                             fontFamily: 'PlusJakartaSans',
+                                             fontWeight: 600,
+                                             fontSize: { xs: '14px', sm: '16px' },
+                                             height: { xs: '45px', sm: '52px' },
+                                             borderRadius: '50px',
+                                             textTransform: 'none',
+                                             color: 'white',
+                                             backgroundColor: theme.palette.primary.main,
+                                             '&:hover': {
+                                                 backgroundColor: theme.palette.primary.hover,
+                                             },
+                                         }}
+                                     >
+                                         Next
+                                     </Button>
+             
+                                     {/* زر Back تحت زر Next */}
+                                     <Button
+                                         variant="outlined"
+                                         fullWidth
+                                         onClick={onBack}
+                                         sx={{
+                                             mt: 2,
+                                             fontFamily: 'PlusJakartaSans',
+                                             fontWeight: 600,
+                                             fontSize: { xs: '14px', sm: '16px' },
+                                             height: { xs: '45px', sm: '52px' },
+                                             borderRadius: '50px',
+                                             textTransform: 'none',
+                                             display: { xs: 'block', sm: 'block', md: 'none' }, // يظهر فقط في xs و sm
+                                             borderColor: theme.palette.primary.main,
+                                             color: theme.palette.primary.main,
+                                             '&:hover': {
+                                                 backgroundColor: theme.palette.primary.light,
+                                                 borderColor: theme.palette.primary.main,
+                                             },
+                                         }}
+                                     >
+                                         Back
+                                     </Button>
+                                 </Box>
+ 
+            </Stack>
+        </Box>
+    );
+};
+
+export default BusinessHours;

src/components/Home/RestaurantProfile/contcet/ConfirmationDialog.js

@@ -0,0 +1,180 @@
+import React from 'react';
+import {
+    Dialog,
+    DialogTitle,
+    DialogContent,
+    DialogContentText,
+    DialogActions,
+    Button,
+    Box,
+    Typography,
+    useTheme,
+    Divider
+} from '@mui/material';
+import EditIcon from '@mui/icons-material/Edit'; 
+const ConfirmationDialog = ({ open, onClose, onConfirm }) => {
+    const theme = useTheme();
+    return (
+        <Dialog
+            open={open}
+            onClose={onClose}
+            maxWidth="sm"
+           
+            fullWidth
+            PaperProps={{
+                sx: {
+                    width: '525px',
+                    height: '358px',
+                    maxWidth: '100%',
+                    maxHeight: '100%',
+                    borderRadius: '12px',
+                    overflow: 'hidden'
+                }
+            }}
+        >
+            <Box sx={{
+              
+                p: 3,
+                height: '100%',
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'space-between',
+            }}>
+                <Box
+                    sx={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        gap: 2,
+                        mb: 3,
+                          ml:-5,
+                    }}
+                >
+                    {/* الدوائر */}
+                    <Box sx={{
+                        position: 'relative',
+                        width: 100,
+                        height: 100,
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                    }}>
+                        {/* الدائرة الخلفية */}
+                        <Box sx={{
+                            position: 'absolute',
+                            backgroundColor: '#F5F8FF',
+                            width: '100%',
+                            height: '100%',
+                            borderRadius: '50%',
+                            zIndex: 0,
+                        }} />
+
+                        {/* الدائرة الأمامية مع الأيقونة */}
+                        <Box sx={{
+                            width: 80,
+                            height: 80,
+                            borderRadius: '50%',
+                            backgroundColor: '#E9EFFF',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            zIndex: 1,
+                        }}>
+                            <img
+                                src='/images/createProfile/Successful.png'
+                                style={{
+                                    width: 40,
+                                    height: 40,
+                                    objectFit: 'contain',
+                                }}
+                                alt="Success icon"
+                            />
+                        </Box>
+                    </Box>
+
+                    {/* العنوان بجانب الدائرة */}
+                    <DialogTitle sx={{ p: 0 }}>
+                        <Typography
+                            variant="h4"
+                            component="div"
+                            sx={{
+                                fontWeight: 600,
+                                fontSize: '28px',
+                                lineHeight: '1.2'
+                            }}
+                        >
+                            Register successful!
+                        </Typography>
+                    </DialogTitle>
+                </Box>
+                    <DialogContent sx={{ p: 0 }}>
+                        <DialogContentText sx={{
+                            textAlign: 'center',
+                            mb: 0,
+                            fontSize: '16px',
+                            fontWeight: 500,
+                            color: theme.palette.text.secondary
+                        }}>
+                            Congratulations! you have registered your restaurant successfully on our platform
+                        </DialogContentText>
+                    </DialogContent>
+           
+<DialogActions
+  sx={{
+    p: 0,
+    px: 3,
+    pt: 2,
+    flexDirection: 'column',
+    gap: 2,
+  }}
+>
+  {/* الزر الأول - Filled */}
+  <Button
+    variant="contained"
+    fullWidth
+    onClick={onClose}
+    sx={{
+      fontWeight: 600,
+      fontSize: '16px',
+      height: '48px',
+      borderRadius: '50px',
+      textTransform: 'none',
+      color: 'white',
+      backgroundColor: theme.palette.primary.main,
+      '&:hover': {
+        backgroundColor: theme.palette.primary.dark,
+      },
+    }}
+  >
+    View Profile
+  </Button>
+
+  {/* الزر الثاني - Outlined + أيقونة Edit */}
+  <Button
+    variant="outlined"
+    fullWidth
+    onClick={onClose}
+    startIcon={<EditIcon sx={{ color: '#00081D' }} />}
+    sx={{
+      fontWeight: 600,
+      fontSize: '16px',
+      height: '48px',
+      borderRadius: '50px',
+      textTransform: 'none',
+      borderColor: '#E6E7EA',
+      color: '#00081D',
+      '&:hover': {
+        backgroundColor: '#FAFAFA',
+        borderColor: '#E6E7EA',
+      },
+    }}
+  >
+    Edit Profile
+  </Button>
+</DialogActions>
+            </Box>
+        </Dialog>
+    );
+};
+
+export default ConfirmationDialog;

src/components/Home/RestaurantProfile/contcet/ContactInformation.js

@@ -0,0 +1,163 @@
+import React from 'react';
+import { Box, Typography, Stack, Button, useTheme, TextField } from '@mui/material';
+
+const ContactInformation = ({ currentStepIndex = 0, onNext, onBack }) => {
+  const theme = useTheme();
+
+  const handleNext = () => {
+    if (onNext) {
+      onNext();
+    }
+  };
+
+  return (
+    <Box
+      sx={{
+        height: { xs: '90%', sm: '100%', md: 740 },
+        backgroundColor: '#FFFFFF',
+        px: 4,
+        pt: { xs: 6, md: 14.5 },
+        pb: { xs: 20, sm: 20, md: 0 },
+        display: 'block',
+        borderRadius: 2,
+        boxShadow: '0px 1px 4px rgba(0,0,0,0.05)',
+        position: 'relative',
+        width: { xs: '80%', sm: '90%' },
+      }}
+    >
+      <Stack spacing={2.5}>
+        <Typography
+          fontWeight={700}
+          sx={{
+            fontSize: {
+              xs: '1.8rem',
+              sm: '2rem',
+              md: '2.2rem'
+            }
+          }}
+        >
+          Contact Information
+        </Typography>
+        <Box sx={{ width: '70%' }}>
+          <Typography
+            fontSize="16px"
+            color="text.secondary"
+            fontWeight={500}
+            sx={{ pb: 1 }}
+          >
+            Enter your contact information to proceed to registration of your own restaurant on this platform
+          </Typography>
+        </Box>
+
+        {/* Phone Number Input */}
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+          <Typography variant="body2" color="black" sx={{ fontWeight: '500', fontSize: '16px' }}>
+            Phone Number
+          </Typography>
+          <TextField
+            placeholder="03055376864"
+            variant="outlined"
+            fullWidth
+            sx={{
+              '& input': { fontWeight: 500, fontSize: '15px' },
+              '& input::placeholder': { color: '#969BA7' },
+              '& .MuiOutlinedInput-root': {
+                borderRadius: '10px',
+                transition: '0.3s',
+                '&.Mui-focused fieldset': {
+                  borderColor: theme.palette.primary.main,
+                  boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)'
+                }
+              },
+              '& .MuiOutlinedInput-root.Mui-focused': {
+                borderColor: '#3f51b5',
+                boxShadow: '0 0 0 2px rgba(63,81,181,0.1)'
+              }
+            }}
+          />
+        </Box>
+
+        {/* Email Input */}
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+          <Typography variant="body2" color="black" sx={{ fontWeight: '500', fontSize: '16px' }}>
+            Email
+          </Typography>
+          <TextField
+            placeholder="example@example.com"
+            type="email"
+            variant="outlined"
+            fullWidth
+            sx={{
+              '& input': { fontWeight: 500, fontSize: '15px' },
+              '& input::placeholder': { color: '#969BA7' },
+              '& .MuiOutlinedInput-root': {
+                borderRadius: '10px',
+                transition: '0.3s',
+                '&.Mui-focused fieldset': {
+                  borderColor: theme.palette.primary.main,
+                  boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)'
+                }
+              },
+              '& .MuiOutlinedInput-root.Mui-focused': {
+                borderColor: '#3f51b5',
+                boxShadow: '0 0 0 2px rgba(63,81,181,0.1)'
+              }
+            }}
+          />
+        </Box>
+       {/* Next Button */}
+
+                <Box sx={{ pt: 2 }}>
+                    <Button
+                        variant="contained"
+                        fullWidth
+                        onClick={onNext}
+                        sx={{
+                            fontFamily: 'PlusJakartaSans',
+                            fontWeight: 600,
+                            fontSize: { xs: '14px', sm: '16px' },
+                            height: { xs: '45px', sm: '52px' },
+                            borderRadius: '50px',
+                            textTransform: 'none',
+                            color: 'white',
+                            backgroundColor: theme.palette.primary.main,
+                            '&:hover': {
+                                backgroundColor: theme.palette.primary.hover,
+                            },
+                        }}
+                    >
+                        Next
+                    </Button>
+
+                    {/* زر Back تحت زر Next */}
+                    <Button
+                        variant="outlined"
+                        fullWidth
+                        onClick={onBack}
+                        sx={{
+                            mt: 2,
+                            fontFamily: 'PlusJakartaSans',
+                            fontWeight: 600,
+                            fontSize: { xs: '14px', sm: '16px' },
+                            height: { xs: '45px', sm: '52px' },
+                            borderRadius: '50px',
+                            textTransform: 'none',
+                            display: { xs: 'block', sm: 'block', md: 'none' }, // يظهر فقط في xs و sm
+                            borderColor: theme.palette.primary.main,
+                            color: theme.palette.primary.main,
+                            '&:hover': {
+                                backgroundColor: theme.palette.primary.light,
+                                borderColor: theme.palette.primary.main,
+                            },
+                        }}
+                    >
+                        Back
+                    </Button>
+                </Box>
+ 
+      </Stack>
+    </Box>
+  );
+};
+
+export default ContactInformation;

src/components/Home/RestaurantProfile/contcet/Equipment.js

@@ -0,0 +1,163 @@
+import React from 'react';
+import { Box, Typography, Stack, Button, useTheme, TextField } from '@mui/material';
+import AddIcon from '@mui/icons-material/Add';
+import { useNavigate } from 'react-router-dom';
+
+const Equipment = ({ currentStepIndex = 0, onNext, onBack }) => {
+    const theme = useTheme();
+    const navigate = useNavigate();
+
+    const handleNext = () => {
+        if (onNext) onNext();
+        else navigate('/dashboard');
+    };
+
+    return (
+        <Box
+            sx={{
+                height: { xs: '90%', sm: '100%', md: 740 },
+                backgroundColor: '#FFFFFF',
+                px: 4,
+                pt: { xs: 6, md: 12 },
+                pb: { xs: 20, sm: 12, md: 3 },
+                display: 'block',
+                borderRadius: 2,
+                boxShadow: '0px 1px 4px rgba(0,0,0,0.05)',
+                width: { xs: '80%', sm: '90%' },
+                position: 'relative',
+            }}
+        >
+            <Stack spacing={2.5}>
+                <Typography fontWeight={700} sx={{ fontSize: { xs: '1.8rem', sm: '2rem', md: '2.2rem' } }}>
+                    Equipment
+                </Typography>
+
+                <Box sx={{ width: '70%' }}>
+                    <Typography
+                        fontSize="16px"
+                        color="text.secondary"
+                        fontWeight={500}
+                        sx={{ pb: 1 }}
+                    >
+                        Enter your kitchen equipment details to complete your restaurant registration.
+                    </Typography>
+                </Box>
+
+                {/* Oven Input */}
+                <InputField label="Oven" placeholder="5" theme={theme} />
+
+                {/* Grill Input */}
+                <InputField label="Grill" placeholder="20" theme={theme} />
+
+                {/* Refrigerators Input */}
+                <InputField label="Refrigerators" placeholder="200" theme={theme} />
+
+                {/* Add More Equipment Button */}
+                <Box>
+                    <Button
+                        variant="text"
+                        fullWidth
+                        startIcon={<AddIcon />}
+                        sx={{
+                            fontWeight: 600,
+                            fontSize: { xs: '14px', sm: '16px' },
+                            height: { xs: '45px', sm: '52px' },
+                            borderRadius: '50px',
+                            textTransform: 'none',
+                            color: theme.palette.primary.main,
+                            '&:hover': {
+                                backgroundColor: 'transparent',
+                            }
+                        }}
+                        onClick={() => console.log('Add More Equipment')}
+                    >
+                        Add More
+                    </Button>
+                </Box>
+
+                {/* Next Button */}
+
+                <Box sx={{ pt: 2 }}>
+                    <Button
+                        variant="contained"
+                        fullWidth
+                        onClick={onNext}
+                        sx={{
+                            fontFamily: 'PlusJakartaSans',
+                            fontWeight: 600,
+                            fontSize: { xs: '14px', sm: '16px' },
+                            height: { xs: '45px', sm: '52px' },
+                            borderRadius: '50px',
+                            textTransform: 'none',
+                            color: 'white',
+                            backgroundColor: theme.palette.primary.main,
+                            '&:hover': {
+                                backgroundColor: theme.palette.primary.hover,
+                            },
+                        }}
+                    >
+                        Next
+                    </Button>
+
+                    {/* زر Back تحت زر Next */}
+                    <Button
+                        variant="outlined"
+                        fullWidth
+                        onClick={onBack}
+                        sx={{
+                            mt: 2,
+                            fontFamily: 'PlusJakartaSans',
+                            fontWeight: 600,
+                            fontSize: { xs: '14px', sm: '16px' },
+                            height: { xs: '45px', sm: '52px' },
+                            borderRadius: '50px',
+                            textTransform: 'none',
+                            display: { xs: 'block', sm: 'block', md: 'none' }, // يظهر فقط في xs و sm
+                            borderColor: theme.palette.primary.main,
+                            color: theme.palette.primary.main,
+                            '&:hover': {
+                                backgroundColor: theme.palette.primary.light,
+                                borderColor: theme.palette.primary.main,
+                            },
+                        }}
+                    >
+                        Back
+                    </Button>
+                </Box>
+
+            </Stack>
+        </Box>
+    );
+};
+
+// مكون فرعي لتقليل التكرار في الحقول
+const InputField = ({ label, placeholder, theme }) => (
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+        <Typography variant="body2" sx={{ fontWeight: 500, fontSize: '16px', color: 'black' }}>
+            {label}
+        </Typography>
+        <TextField
+            placeholder={placeholder}
+            variant="outlined"
+            fullWidth
+            sx={{
+                '& input': { fontWeight: 500, fontSize: '15px' },
+                '& input::placeholder': { color: '#969BA7' },
+                '& .MuiOutlinedInput-root': {
+                    borderRadius: '10px',
+                    transition: '0.3s',
+                    '&.Mui-focused fieldset': {
+                        borderColor: theme.palette.primary.main,
+                        boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)',
+                    }
+                },
+                '& .MuiOutlinedInput-root.Mui-focused': {
+                    borderColor: theme.palette.primary.main,
+                    boxShadow: '0 0 0 2px rgba(255,145,77,0.1)',
+                }
+            }}
+        />
+    </Box>
+);
+
+export default Equipment;

src/components/Home/RestaurantProfile/contcet/LoginRestaurant.js

@@ -0,0 +1,261 @@
+import React, { useState } from 'react';
+import { TextField, Button, Typography, Stack, Box, IconButton, InputAdornment } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import VisibilityOffOutlinedIcon from '@mui/icons-material/VisibilityOffOutlined';
+import { VisibilityOutlined } from '@mui/icons-material';
+import { useNavigate } from 'react-router-dom';
+import { Link } from 'react-router-dom';
+
+
+const LoginForm = () => {
+
+    const navigate = useNavigate();
+    const theme = useTheme();
+    const [showPassword, setShowPassword] = useState(false);
+
+    const handleTogglePassword = () => {
+        setShowPassword((prev) => !prev);
+    };
+    const handleLogin = () => {
+        // بعد تنفيذ عملية تسجيل الدخول بنجاح، يتم التوجيه
+        navigate('/dashboard');
+    };
+    return (
+
+
+        <Box
+
+            display="flex"
+            sx={{
+                width: '140%',
+                height: '90vh',
+
+            }}
+        >
+
+            {/* Login Content */}
+            <Box
+                sx={{
+                    width: '100%',
+                }}
+            >
+                <Box
+                    flex={1}
+                    paddingTop={4}
+                    paddingBottom={4}
+                    paddingLeft={0}
+                    paddingRight={0}
+                    sx={{
+                        // backgroundColor: '#FFFFFF',
+                        minHeight: '10vh',
+                        justifyContent: 'center',
+                        display: 'flex',
+                        alignItems: 'center',
+                        position: 'sticky',
+                    }}
+                >
+                    <Box
+                        sx={{
+                            backgroundColor: '#FFFFFF',
+                            width: '100%',
+                            maxWidth: 500,
+                            paddingTop: 8,       // زيادة المسافة من الأعلى داخل الكرت
+                            paddingX: 10,         // الجوانب
+                            paddingBottom: 8,    // الأسفل
+                            borderRadius: '16px',
+                            // boxShadow: '0px 4px 20px rgba(0,0,0,0.1)',
+                        }}
+                    >
+
+                        <Stack spacing={1.5}>
+
+                            <Typography
+                                variant="h4"
+                                fontWeight={700}
+                                sx={{
+                                    fontSize: {
+                                        xs: '1.8rem',
+                                        sm: '2rem',
+                                        md: '2.2rem'
+                                    }
+                                }}
+                            >
+                                Login
+                            </Typography>
+
+                            <Typography
+                                variant="body2"
+                                color="text.secondary"
+                                fontWeight={500}
+                                sx={{ pb: 1 }}
+                            >
+                                Enter your username and password to access your account securely. Welcome back to our service!
+                            </Typography>
+
+                            {/* Email Input */}
+                            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+                                <Typography variant="body2" color="black" sx={{ fontWeight: '500', fontSize: '16px' }}>
+                                    Email
+                                </Typography>
+                                <TextField
+                                    placeholder="Enter your email"
+                                    type="email"
+                                    variant="outlined"
+                                    fullWidth
+                                    sx={{
+                                        '& input': { fontWeight: 500, fontSize: '15px' },
+                                        '& input::placeholder': { color: '#969BA7' },
+                                        '& .MuiOutlinedInput-root': {
+                                            borderRadius: '10px',
+                                            transition: '0.3s',
+                                            '&.Mui-focused fieldset': { // أضف هذا الجزء لتغيير لون الحدود عند التركيز
+                                                borderColor: theme.palette.primary.main,
+                                                boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)' // ظل برتقالي خفيف
+                                            }
+                                        },
+                                        '& .MuiOutlinedInput-root.Mui-focused': {
+                                            borderColor: '#3f51b5',
+                                            boxShadow: '0 0 0 2px rgba(63,81,181,0.1)'
+                                        }
+                                    }}
+                                />
+                            </Box>
+
+                            {/* Password Input */}
+                            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+                                <Typography variant="body2" color="black" sx={{ fontWeight: '500', fontSize: '16px' }}>
+                                    Password
+                                </Typography>
+                                <TextField
+                                    type={showPassword ? 'text' : 'password'}
+                                    placeholder="Enter your password"
+                                    fullWidth
+                                    variant="outlined"
+                                    autoComplete="new-password"
+                                    sx={{
+                                        '& input': { fontWeight: 500, fontSize: '15px' },
+                                        '& input::placeholder': { color: '#969BA7' },
+                                        '& .MuiOutlinedInput-root': {
+                                            borderRadius: '10px',
+                                            transition: '0.3s',
+                                            '&.Mui-focused fieldset': { // أضف هذا الجزء لتغيير لون الحدود عند التركيز
+                                                borderColor: theme.palette.primary.main,
+                                                boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)' // ظل برتقالي خفيف
+                                            }
+                                        },
+                                        '& .MuiOutlinedInput-root.Mui-focused': {
+                                            borderColor: '#3f51b5',
+                                            boxShadow: '0 0 0 2px rgba(63,81,181,0.1)'
+                                        },
+                                        '& input::-ms-reveal, & input::-ms-clear': {
+                                            display: 'none',
+                                        },
+                                    }}
+                                    InputProps={{
+                                        endAdornment: (
+                                            <InputAdornment position="end">
+                                                <IconButton onClick={handleTogglePassword} edge="end">
+                                                    {showPassword ? <VisibilityOffOutlinedIcon /> : <VisibilityOutlined />}
+                                                </IconButton>
+                                            </InputAdornment>
+                                        )
+                                    }}
+                                />
+                            </Box>
+
+                            {/* Login Button */}
+                            <Box sx={{ pt: 2 }}>
+                                <Button
+                                    variant="contained"
+                                    fullWidth
+                                    onClick={handleLogin}
+                                    sx={{
+                                        fontWeight: 600,
+                                        fontSize: { xs: '14px', sm: '16px' },
+                                        height: { xs: '45px', sm: '52px' },
+                                        borderRadius: '50px',
+                                        textTransform: 'none',
+                                        color: 'white',
+                                        backgroundColor: theme.palette.primary.main,
+                                        '&:hover': {
+                                            backgroundColor: theme.palette.primary.hover
+                                        }
+                                         , fontFamily: 'PlusJakartaSans'  
+                                    }}
+                                >
+                                    Log in
+                                </Button>
+                            </Box>
+
+                            {/* Divider */}
+                            <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, py: 2 }}>
+                                <Box sx={{ flex: 1, height: '1px', backgroundColor: '#E0E0E0' }} />
+                                <Typography variant="body1" sx={{ fontWeight: 500, fontSize: '16px', color: 'black' , fontFamily: 'PlusJakartaSans'  }}>
+                                    Or
+                                </Typography>
+                                <Box sx={{ flex: 1, height: '1px', backgroundColor: '#E0E0E0' }} />
+                            </Box>
+
+                            {/* Google Button */}
+                            <Button
+                                variant="outlined"
+                                fullWidth
+                                sx={{
+                                    fontWeight: 500,
+                                    fontSize: '16px',
+                                    borderRadius: '50px',
+                                    height: '50px',
+                                    textTransform: 'none',
+                                    gap: 1,
+                                    borderColor: '#E6E6E6',
+                                    color: 'black',
+                                    '&:hover': {
+                                        borderColor: 'black',
+                                        backgroundColor: 'transparent'
+                                    }
+                                }}
+                            >
+                                <Box sx={{ display: 'flex', alignItems: 'center' , fontFamily: 'PlusJakartaSans'   }}>
+                                    <img
+                                        src="https://upload.wikimedia.org/wikipedia/commons/c/c1/Google_%22G%22_logo.svg"
+                                        alt="Google"
+                                        style={{ width: 25, height: 25 }}
+                                    />
+                                </Box>
+                                Login with Google
+                            </Button>
+
+
+
+
+                            {/* Register Link */}
+                            <Typography
+                                variant="body2"
+                                sx={{
+                                    fontSize: '16px',
+                                    textAlign: 'center',
+                                    color: '#969BA7',
+                                    pt: 3
+                                }}
+                            >
+                                Don’t have an account?{' '}
+                                <Link
+                                    to="/register"
+                                    style={{
+                                        color: '#2261FF',
+                                        textDecoration: 'none'
+                                    }}
+                                >
+                                    Register
+                                </Link>
+                            </Typography>
+
+                        </Stack>
+                    </Box>
+                </Box>
+            </Box>
+        </Box>
+    );
+};
+
+export default LoginForm;

src/components/Home/RestaurantProfile/contcet/OperationalCapacity.js

@@ -0,0 +1,213 @@
+import React from 'react';
+import { Box, Typography, Stack, Button, useTheme, TextField } from '@mui/material';
+
+const OperationalCapacity = ({ currentStepIndex = 0, onNext, onBack }) => {
+    const theme = useTheme();
+
+    return (
+        <Box
+            sx={{
+                height: { xs: '90%', sm: '100%', md:740 },
+                backgroundColor: '#FFFFFF',
+                px: 4,
+                pt: 12,
+                pb: 4,
+                display: 'block',
+                borderRadius: 2,
+                boxShadow: '0px 1px 4px rgba(0,0,0,0.05)',
+                position: 'relative',
+                width: { xs: '80%', sm: '90%' },
+            }}
+        >
+            <Stack spacing={2.5}>
+                <Typography
+                    fontWeight={700}
+                    sx={{
+                        fontSize: {
+                            xs: '1.8rem',
+                            sm: '2rem',
+                            md: '2.2rem'
+                        }
+                    }}
+                >
+                    Operational Capacity
+                </Typography>
+                <Box sx={{ width: '70%' }}>
+                    <Typography
+                        fontSize="16px"
+                        color="text.secondary"
+                        fontWeight={500}
+                        sx={{ pb: 1 }}
+                    >
+                        Enter your basic information to proceed to registration of your own restaurant on this platform
+                    </Typography>
+                </Box>
+
+                {/* Maximum Orders Per Day Input */}
+                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+                    <Typography variant="body2" color="black" sx={{ fontWeight: '500', fontSize: '16px' }}>
+                        Maximum Orders Per Day
+                    </Typography>
+                    <TextField
+                        placeholder="5000"
+                        variant="outlined"
+                        fullWidth
+                        sx={{
+                            '& input': { fontWeight: 500, fontSize: '15px' },
+                            '& input::placeholder': { color: '#969BA7' },
+                            '& .MuiOutlinedInput-root': {
+                                borderRadius: '10px',
+                                transition: '0.3s',
+                                '&.Mui-focused fieldset': {
+                                    borderColor: theme.palette.primary.main,
+                                    boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)'
+                                }
+                            },
+                            '& .MuiOutlinedInput-root.Mui-focused': {
+                                borderColor: '#3f51b5',
+                                boxShadow: '0 0 0 2px rgba(63,81,181,0.1)'
+                            }
+                        }}
+                    />
+                </Box>
+
+                {/* Number of Cheff Input */}
+                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+                    <Typography variant="body2" color="black" sx={{ fontWeight: '500', fontSize: '16px' }}>
+                        Number of Cheff
+                    </Typography>
+                    <TextField
+                        placeholder="20"
+                        variant="outlined"
+                        fullWidth
+                        sx={{
+                            '& input': { fontWeight: 500, fontSize: '15px' },
+                            '& input::placeholder': { color: '#969BA7' },
+                            '& .MuiOutlinedInput-root': {
+                                borderRadius: '10px',
+                                transition: '0.3s',
+                                '&.Mui-focused fieldset': {
+                                    borderColor: theme.palette.primary.main,
+                                    boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)'
+                                }
+                            },
+                            '& .MuiOutlinedInput-root.Mui-focused': {
+                                borderColor: '#3f51b5',
+                                boxShadow: '0 0 0 2px rgba(63,81,181,0.1)'
+                            }
+                        }}
+                    />
+                </Box>
+
+                {/* Number of Waiters Input */}
+                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+                    <Typography variant="body2" color="black" sx={{ fontWeight: '500', fontSize: '16px' }}>
+                        Number of Waiters
+                    </Typography>
+                    <TextField
+                        placeholder="200"
+                        variant="outlined"
+                        fullWidth
+                        sx={{
+                            '& input': { fontWeight: 500, fontSize: '15px' },
+                            '& input::placeholder': { color: '#969BA7' },
+                            '& .MuiOutlinedInput-root': {
+                                borderRadius: '10px',
+                                transition: '0.3s',
+                                '&.Mui-focused fieldset': {
+                                    borderColor: theme.palette.primary.main,
+                                    boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)'
+                                }
+                            },
+                            '& .MuiOutlinedInput-root.Mui-focused': {
+                                borderColor: '#3f51b5',
+                                boxShadow: '0 0 0 2px rgba(63,81,181,0.1)'
+                            }
+                        }}
+                    />
+                </Box>
+
+                {/* Number of Kitchen Assistant Input */}
+                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+                    <Typography variant="body2" color="black" sx={{ fontWeight: '500', fontSize: '16px' }}>
+                        Number of Kitchen Assistant
+                    </Typography>
+                    <TextField
+                        placeholder="200"
+                        variant="outlined"
+                        fullWidth
+                        sx={{
+                            '& input': { fontWeight: 500, fontSize: '15px' },
+                            '& input::placeholder': { color: '#969BA7' },
+                            '& .MuiOutlinedInput-root': {
+                                borderRadius: '10px',
+                                transition: '0.3s',
+                                '&.Mui-focused fieldset': {
+                                    borderColor: theme.palette.primary.main,
+                                    boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)'
+                                }
+                            },
+                            '& .MuiOutlinedInput-root.Mui-focused': {
+                                borderColor: '#3f51b5',
+                                boxShadow: '0 0 0 2px rgba(63,81,181,0.1)'
+                            }
+                        }}
+                    />
+                </Box>
+
+                {/* Buttons */}
+   
+                  <Box sx={{ pt: 2 }}>
+                                       <Button
+                                           variant="contained"
+                                           fullWidth
+                                           onClick={onNext}
+                                           sx={{
+                                               fontFamily: 'PlusJakartaSans',
+                                               fontWeight: 600,
+                                               fontSize: { xs: '14px', sm: '16px' },
+                                               height: { xs: '45px', sm: '52px' },
+                                               borderRadius: '50px',
+                                               textTransform: 'none',
+                                               color: 'white',
+                                               backgroundColor: theme.palette.primary.main,
+                                               '&:hover': {
+                                                   backgroundColor: theme.palette.primary.hover,
+                                               },
+                                           }}
+                                       >
+                                           Next
+                                       </Button>
+               
+                                       {/* زر Back تحت زر Next */}
+                                       <Button
+                                           variant="outlined"
+                                           fullWidth
+                                           onClick={onBack}
+                                           sx={{
+                                               mt: 2,
+                                               fontFamily: 'PlusJakartaSans',
+                                               fontWeight: 600,
+                                               fontSize: { xs: '14px', sm: '16px' },
+                                               height: { xs: '45px', sm: '52px' },
+                                               borderRadius: '50px',
+                                               textTransform: 'none',
+                                               display: { xs: 'block', sm: 'block', md: 'none' }, // يظهر فقط في xs و sm
+                                               borderColor: theme.palette.primary.main,
+                                               color: theme.palette.primary.main,
+                                               '&:hover': {
+                                                   backgroundColor: theme.palette.primary.light,
+                                                   borderColor: theme.palette.primary.main,
+                                               },
+                                           }}
+                                       >
+                                           Back
+                                       </Button>
+                                   </Box>
+   
+            </Stack>
+        </Box>
+    );
+};
+
+export default OperationalCapacity;

src/components/Home/RestaurantProfile/contcet/TypeOfRestaurant.js

@@ -0,0 +1,165 @@
+// TypeOfRestaurant.jsx
+import React from 'react';
+import {
+    Box,
+    Typography,
+    Stack,
+    Button,
+    useTheme,
+    TextField
+} from '@mui/material';
+
+const TypeOfRestaurant = ({ currentStepIndex = 0, onNext, onBack }) => {
+    const theme = useTheme();
+
+    return (
+        <Box
+            sx={{
+                height: { xs: '90%', sm: '100%', md: 700 },
+                backgroundColor: '#FFFFFF',
+                px: 4,
+                pt: { xs: 6, md: 19.5 },
+                pb: { xs: 20, sm: 20, md: 0 },
+                display: 'block',
+                borderRadius: 2,
+                boxShadow: '0px 1px 4px rgba(0,0,0,0.05)',
+                position: 'relative',
+                width: { xs: '80%', sm: '90%' },
+            }}
+        >
+            <Stack spacing={2.5}>
+                {/* العنوان */}
+                <Typography
+                    fontWeight={700}
+                    sx={{
+                        fontSize: {
+                            xs: '1.8rem',
+                            sm: '2rem',
+                            md: '2.2rem'
+                        }
+                    }}
+                >
+                    Type of Restaurant
+                </Typography>
+
+                {/* الوصف */}
+                <Box sx={{ width: '70%' }}>
+                    <Typography
+                        fontSize="16px"
+                        color="text.secondary"
+                        fontWeight={500}
+                        sx={{ pb: 1 }}
+                    >
+                        Enter your restaurant type you want to collaborate to proceed to registration of your own restaurant on this platform
+                    </Typography>
+                </Box>
+
+                {/* الحقول */}
+                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+                    <Typography variant="body2" color="black" sx={{ fontWeight: '500', fontSize: '16px' }}>
+                        Open to Host Restaurant/Cousin type*
+                    </Typography>
+                    <TextField
+                        placeholder="Fine Dining"
+                        variant="outlined"
+                        fullWidth
+                        sx={{
+                            '& input': { fontWeight: 500, fontSize: '15px' },
+                            '& input::placeholder': { color: '#969BA7' },
+                            '& .MuiOutlinedInput-root': {
+                                borderRadius: '10px',
+                                transition: '0.3s',
+                                '&.Mui-focused fieldset': {
+                                    borderColor: theme.palette.primary.main,
+                                    boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)'
+                                }
+                            },
+                            '& .MuiOutlinedInput-root.Mui-focused': {
+                                borderColor: '#3f51b5',
+                                boxShadow: '0 0 0 2px rgba(63,81,181,0.1)'
+                            }
+                        }}
+                    />
+                </Box>
+
+                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+                    <Typography variant="body2" color="black" sx={{ fontWeight: '500', fontSize: '16px' }}>
+                        Select Restaurant type Willing to Collaborate With
+                    </Typography>
+                    <TextField
+                        placeholder="Catering Services"
+                        variant="outlined"
+                        fullWidth
+                        sx={{
+                            '& input': { fontWeight: 500, fontSize: '15px' },
+                            '& input::placeholder': { color: '#969BA7' },
+                            '& .MuiOutlinedInput-root': {
+                                borderRadius: '10px',
+                                transition: '0.3s',
+                                '&.Mui-focused fieldset': {
+                                    borderColor: theme.palette.primary.main,
+                                    boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)'
+                                }
+                            },
+                            '& .MuiOutlinedInput-root.Mui-focused': {
+                                borderColor: '#3f51b5',
+                                boxShadow: '0 0 0 2px rgba(63,81,181,0.1)'
+                            }
+                        }}
+                    />
+                </Box>
+
+               <Box sx={{ pt: 2 }}>
+                                    <Button
+                                        variant="contained"
+                                        fullWidth
+                                        onClick={onNext}
+                                        sx={{
+                                            fontFamily: 'PlusJakartaSans',
+                                            fontWeight: 600,
+                                            fontSize: { xs: '14px', sm: '16px' },
+                                            height: { xs: '45px', sm: '52px' },
+                                            borderRadius: '50px',
+                                            textTransform: 'none',
+                                            color: 'white',
+                                            backgroundColor: theme.palette.primary.main,
+                                            '&:hover': {
+                                                backgroundColor: theme.palette.primary.hover,
+                                            },
+                                        }}
+                                    >
+                                        Next
+                                    </Button>
+            
+                                    {/* زر Back تحت زر Next */}
+                                    <Button
+                                        variant="outlined"
+                                        fullWidth
+                                        onClick={onBack}
+                                        sx={{
+                                            mt: 2,
+                                            fontFamily: 'PlusJakartaSans',
+                                            fontWeight: 600,
+                                            fontSize: { xs: '14px', sm: '16px' },
+                                            height: { xs: '45px', sm: '52px' },
+                                            borderRadius: '50px',
+                                            textTransform: 'none',
+                                            display: { xs: 'block', sm: 'block', md: 'none' }, // يظهر فقط في xs و sm
+                                            borderColor: theme.palette.primary.main,
+                                            color: theme.palette.primary.main,
+                                            '&:hover': {
+                                                backgroundColor: theme.palette.primary.light,
+                                                borderColor: theme.palette.primary.main,
+                                            },
+                                        }}
+                                    >
+                                        Back
+                                    </Button>
+                                </Box>
+
+            </Stack>
+        </Box>
+    );
+};
+
+export default TypeOfRestaurant;

src/components/Home/RestaurantProfile/contcet/UploadMenu.js

@@ -0,0 +1,240 @@
+import React from 'react';
+import {
+    Box,
+    Typography,
+    Stack,
+    Button,
+    useTheme,
+    TextField
+} from '@mui/material';
+import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
+
+const UploadMenu = ({ currentStepIndex = 0, onNext, onBack }) => {
+    const theme = useTheme();
+
+    return (
+        <Box
+            sx={{
+                height: { xs: '90%', sm: '100%', md: 740 },
+                backgroundColor: '#FFFFFF',
+                px: 4,
+                pt: 4.5,
+                pb: 10,
+                borderRadius: 2,
+                boxShadow: '0px 1px 4px rgba(0,0,0,0.05)',
+                width: { xs: '80%', sm: '90%' },
+                mx: 'auto'
+            }}
+        >
+            <Stack spacing={2.5}>
+                <Typography
+                    fontWeight={700}
+                    sx={{
+                        fontSize: {
+                            xs: '1.8rem',
+                            sm: '2rem',
+                            md: '2.2rem'
+                        }
+                    }}
+                >
+                    Upload Menu
+                </Typography>
+
+                <Box sx={{ width: '70%' }}>
+                    <Typography
+                        fontSize="16px"
+                        color="text.secondary"
+                        fontWeight={500}
+                        sx={{ pb: 1 }}
+                    >
+                        Enter your basic information to proceed to registration of your own restaurant on this platform
+                    </Typography>
+                </Box>
+
+                {/* Item Name Input */}
+                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+                    <Typography variant="body2" sx={{ fontWeight: 500, fontSize: '16px' }}>
+                        Item Name
+                    </Typography>
+                    <TextField
+                        placeholder="Burgers"
+                        variant="outlined"
+                        fullWidth
+                        sx={{
+                            '& input': { fontWeight: 500, fontSize: '15px' },
+                            '& input::placeholder': { color: '#969BA7' },
+                            '& .MuiOutlinedInput-root': {
+                                borderRadius: '10px',
+                                transition: '0.3s',
+                                '&.Mui-focused fieldset': {
+                                    borderColor: theme.palette.primary.main,
+                                    boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)'
+                                }
+                            },
+                            '& .MuiOutlinedInput-root.Mui-focused': {
+                                borderColor: '#3f51b5',
+                                boxShadow: '0 0 0 2px rgba(63,81,181,0.1)'
+                            }
+                        }}
+                    />
+                </Box>
+
+                {/* Price Input */}
+                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+                    <Typography variant="body2" sx={{ fontWeight: 500, fontSize: '16px' }}>
+                        Price
+                    </Typography>
+                    <TextField
+                        placeholder="$120"
+                        variant="outlined"
+                        fullWidth
+                        sx={{
+                            '& input': { fontWeight: 500, fontSize: '15px' },
+                            '& input::placeholder': { color: '#969BA7' },
+                            '& .MuiOutlinedInput-root': {
+                                borderRadius: '10px',
+                                transition: '0.3s',
+                                '&.Mui-focused fieldset': {
+                                    borderColor: theme.palette.primary.main,
+                                    boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)'
+                                }
+                            },
+                            '& .MuiOutlinedInput-root.Mui-focused': {
+                                borderColor: '#3f51b5',
+                                boxShadow: '0 0 0 2px rgba(63,81,181,0.1)'
+                            }
+                        }}
+                    />
+                </Box>
+
+                {/* Description Input */}
+                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+                    <Typography variant="body2" sx={{ fontWeight: 500, fontSize: '16px' }}>
+                        Description
+                    </Typography>
+                    <TextField
+                        placeholder="Write here..."
+                        variant="outlined"
+                        fullWidth
+                        multiline
+                        minRows={3}
+                        sx={{
+                            '& .MuiInputBase-root': {
+                                fontWeight: 500,
+                                fontSize: '15px',
+                                alignItems: 'start',
+                            },
+                            '& textarea::placeholder': {
+                                color: '#969BA7',
+                            },
+                            '& .MuiOutlinedInput-root': {
+                                borderRadius: '10px',
+                                transition: '0.3s',
+                                '&.Mui-focused fieldset': {
+                                    borderColor: theme.palette.primary.main,
+                                    boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)',
+                                },
+                            },
+                            '& .MuiOutlinedInput-root.Mui-focused': {
+                                borderColor: '#3f51b5',
+                                boxShadow: '0 0 0 2px rgba(63,81,181,0.1)',
+                            }
+                        }}
+                    />
+                </Box>
+
+                {/* OR Separator */}
+                <Box>
+                    <Box sx={{ display: 'flex', alignItems: 'center', mb: 1.5 }}>
+                        <Box sx={{ flex: 1, height: '0px', backgroundColor: '#E0E0E0' }} />
+                        <Typography sx={{ px: 2, fontWeight: 500, fontSize: '16px', color: 'black' }}>
+                            OR
+                        </Typography>
+                        <Box sx={{ flex: 1, height: '0px', backgroundColor: '#E0E0E0' }} />
+                    </Box>
+
+                    {/* Upload Menu Picture */}
+                    <Box
+                        component="label"
+                        htmlFor="upload-image"
+                        sx={{
+                            border: '2px dashed #ccc',
+                            borderRadius: '10px',
+                            height: '150px',
+                            display: 'flex',
+                            justifyContent: 'center',
+                            alignItems: 'center',
+                            cursor: 'pointer',
+                            color: '#969BA7',
+                            backgroundColor: '#FAFAFA',
+                            fontWeight: 500,
+                            fontSize: '15px',
+                            textAlign: 'center',
+                            transition: 'border-color 0.3s',
+                            '&:hover': {
+                                borderColor: '#FF914D',
+                                backgroundColor: '#fffaf5',
+                            }
+                        }}
+                    >
+                        Upload Menu Picture
+                        <input id="upload-image" type="file" accept="image/*" hidden />
+                    </Box>
+                </Box>
+
+                {/* Buttons: Back and Next */}
+            
+                           <Box sx={{ pt: 2 }}>
+                                                <Button
+                                                    variant="contained"
+                                                    fullWidth
+                                                    onClick={onNext}
+                                                    sx={{
+                                                        fontFamily: 'PlusJakartaSans',
+                                                        fontWeight: 600,
+                                                        fontSize: { xs: '14px', sm: '16px' },
+                                                        height: { xs: '45px', sm: '52px' },
+                                                        borderRadius: '50px',
+                                                        textTransform: 'none',
+                                                        color: 'white',
+                                                        backgroundColor: theme.palette.primary.main,
+                                                        '&:hover': {
+                                                            backgroundColor: theme.palette.primary.hover,
+                                                        },
+                                                    }}
+                                                >
+                                                    Next
+                                                </Button>
+                        
+                                                {/* زر Back تحت زر Next */}
+                                                <Button
+                                                    variant="outlined"
+                                                    fullWidth
+                                                    onClick={onBack}
+                                                    sx={{
+                                                        mt: 2,
+                                                        fontFamily: 'PlusJakartaSans',
+                                                        fontWeight: 600,
+                                                        fontSize: { xs: '14px', sm: '16px' },
+                                                        height: { xs: '45px', sm: '52px' },
+                                                        borderRadius: '50px',
+                                                        textTransform: 'none',
+                                                        display: { xs: 'block', sm: 'block', md: 'none' }, // يظهر فقط في xs و sm
+                                                        borderColor: theme.palette.primary.main,
+                                                        color: theme.palette.primary.main,
+                                                        '&:hover': {
+                                                            backgroundColor: theme.palette.primary.light,
+                                                            borderColor: theme.palette.primary.main,
+                                                        },
+                                                    }}
+                                                >
+                                                    Back
+                                                </Button>
+                                            </Box>
+            
+            </Stack>
+        </Box>
+    );
+};
+
+export default UploadMenu;

src/components/Home/RestaurantProfile/contcet/UploadPhotos.js

@@ -0,0 +1,183 @@
+import React, { useState } from 'react';
+import {
+    Box,
+    Typography,
+    Stack,
+    Button,
+    useTheme
+} from '@mui/material';
+import { useNavigate } from 'react-router-dom';
+import ConfirmationDialog from './ConfirmationDialog'; // ✅ استدعاء المودال المنفصل
+
+const UploadPhotos = ({ currentStepIndex = 0, onNext, onBack }) => {
+    const theme = useTheme();
+    const navigate = useNavigate();
+    const [openModal, setOpenModal] = useState(false);
+
+    const handleOpenModal = () => setOpenModal(true);
+    const handleCloseModal = () => setOpenModal(false);
+    const handleConfirmNext = () => {
+        handleCloseModal();
+        onNext();
+    };
+
+    return (
+        <Box
+            sx={{
+                height: { xs: '90%', sm: '100%', md: 740 },
+                backgroundColor: '#FFFFFF',
+                px: 4,
+                pt: 11,
+                pb: 10,
+                display: 'block',
+                borderRadius: 2,
+                boxShadow: '0px 1px 4px rgba(0,0,0,0.05)',
+                position: 'relative',
+                width: { xs: '80%', sm: '90%' },
+            }}
+        >
+            <Stack spacing={2.5}>
+                <Typography fontWeight={700} sx={{
+                    fontSize: { xs: '1.8rem', sm: '2rem', md: '2.2rem' }
+                }}>
+                    Upload Photos
+                </Typography>
+
+                <Box sx={{ width: '70%' }}>
+                    <Typography fontSize="16px" color="text.secondary" fontWeight={500} sx={{ pb: 1 }}>
+                        Enter your basic information to proceed to registration of your own restaurant on this platform
+                    </Typography>
+                </Box>
+
+                {/* Kitchen Interior’s */}
+                <Box sx={{ pt: 1 }}>
+                    <Typography variant="body2" color="black" sx={{ fontWeight: '500', fontSize: '16px' }}>
+                        Kitchen Interior’s
+                    </Typography>
+                    <Box sx={{ display: 'flex', flexDirection: 'column', mt: 1 }}>
+                        <Box
+                            component="label"
+                            htmlFor="upload-image-interior"
+                            sx={{
+                                border: '2px dashed #ccc',
+                                borderRadius: '10px',
+                                height: '120px',
+                                display: 'flex',
+                                justifyContent: 'center',
+                                alignItems: 'center',
+                                cursor: 'pointer',
+                                color: '#969BA7',
+                                backgroundColor: '#FAFAFA',
+                                fontWeight: 500,
+                                fontSize: '15px',
+                                textAlign: 'center',
+                                transition: 'border-color 0.3s',
+                                '&:hover': {
+                                    borderColor: '#FF914D',
+                                    backgroundColor: '#fffaf5',
+                                }
+                            }}
+                        >
+                            Upload Interior Picture
+                            <input id="upload-image-interior" type="file" accept="image/*" hidden />
+                        </Box>
+                    </Box>
+                </Box>
+
+                {/* Kitchen Equipment’s */}
+                <Box sx={{ pt: 1 }}>
+                    <Typography variant="body2" color="black" sx={{ fontWeight: '500', fontSize: '16px' }}>
+                        Kitchen Equipment’s
+                    </Typography>
+                    <Box sx={{ display: 'flex', flexDirection: 'column', mt: 1 }}>
+                        <Box
+                            component="label"
+                            htmlFor="upload-image-equipment"
+                            sx={{
+                                border: '2px dashed #ccc',
+                                borderRadius: '10px',
+                                height: '120px',
+                                display: 'flex',
+                                justifyContent: 'center',
+                                alignItems: 'center',
+                                cursor: 'pointer',
+                                color: '#969BA7',
+                                backgroundColor: '#FAFAFA',
+                                fontWeight: 500,
+                                fontSize: '15px',
+                                textAlign: 'center',
+                                transition: 'border-color 0.3s',
+                                '&:hover': {
+                                    borderColor: '#FF914D',
+                                    backgroundColor: '#fffaf5',
+                                }
+                            }}
+                        >
+                            Upload Equipment Picture
+                            <input id="upload-image-equipment" type="file" accept="image/*" hidden />
+                        </Box>
+                    </Box>
+                </Box>
+
+                {/* Buttons */}
+                <Box sx={{ pt: 2 }}>
+                    <Button
+                        variant="contained"
+                        fullWidth
+                        onClick={handleOpenModal}
+                        sx={{
+                            fontFamily: 'PlusJakartaSans',
+                            fontWeight: 600,
+                            fontSize: { xs: '14px', sm: '16px' },
+                            height: { xs: '45px', sm: '52px' },
+                            borderRadius: '50px',
+                            textTransform: 'none',
+                            color: 'white',
+                            backgroundColor: theme.palette.primary.main,
+                            '&:hover': {
+                                backgroundColor: theme.palette.primary.hover
+                            }
+                        }}
+                    >
+                        Next
+                    </Button>
+
+                    <Button
+                        variant="outlined"
+                        fullWidth
+                        onClick={onBack}
+                        sx={{
+                            mt: 2,
+                            fontFamily: 'PlusJakartaSans',
+                            fontWeight: 600,
+                            fontSize: { xs: '14px', sm: '16px' },
+                            height: { xs: '45px', sm: '52px' },
+                            borderRadius: '50px',
+                            textTransform: 'none',
+                            display: { xs: 'block', sm: 'block', md: 'none' },
+                            borderColor: theme.palette.primary.main,
+                            color: theme.palette.primary.main,
+                            '&:hover': {
+                                backgroundColor: theme.palette.primary.light,
+                                borderColor: theme.palette.primary.main,
+                            }
+                        }}
+                    >
+                        Back
+                    </Button>
+                </Box>
+            </Stack>
+
+            {/* ✅ Confirmation Modal */}
+            <ConfirmationDialog
+                open={openModal}
+                onClose={handleCloseModal}
+                onConfirm={handleConfirmNext}
+                title="Confirm Submission"
+                description="Are you sure you want to proceed to the next step?"
+            />
+        </Box>
+    );
+};
+
+export default UploadPhotos;

src/components/Home/Settings/AccountSettings.js

@@ -0,0 +1,217 @@
+import React, { useState } from 'react';
+import {
+    Box,
+    Typography,
+    TextField,
+    Button,
+    styled,
+    useTheme
+} from '@mui/material';
+import AddAPhotoOutlinedIcon from '@mui/icons-material/AddAPhotoOutlined';
+
+const AccountSettings = () => {
+    const theme = useTheme();
+    const [profileImage, setProfileImage] = useState(null);
+    const [fullName, setFullName] = useState('');
+    const [username, setUsername] = useState('');
+    const [bio, setBio] = useState('');
+    const [email, setEmail] = useState('');
+    const [phone, setPhone] = useState('');
+
+    const handleImageUpload = (event) => {
+        if (event.target.files && event.target.files[0]) {
+            setProfileImage(URL.createObjectURL(event.target.files[0]));
+        }
+    };
+
+    const Input = styled('input')({
+        display: 'none',
+    });
+
+    const customInputStyle = {
+        '& input': { fontWeight: 500, fontSize: '15px' },
+        '& input::placeholder': { color: '#969BA7' },
+        '& .MuiOutlinedInput-root': {
+            borderRadius: '10px',
+            transition: '0.3s',
+            '&.Mui-focused fieldset': {
+                borderColor: theme.palette.primary.main,
+                boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)',
+            },
+        },
+        '& .MuiOutlinedInput-root.Mui-focused': {
+            borderColor: '#3f51b5',
+            boxShadow: '0 0 0 2px rgba(63,81,181,0.1)',
+        },
+    };
+
+    const renderField = (label, value, onChange, type = 'text') => (
+        <Box
+            sx={{
+                flex: 1,
+                minWidth: { xs: '100%', sm: '45%' },
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 1,
+            }}
+        >
+            <Typography variant="body2" sx={{ fontWeight: '500', fontSize: '16px' }}>
+                {label}
+            </Typography>
+            <TextField
+                placeholder={`Enter your ${label.toLowerCase()}`}
+                type={type}
+                value={value}
+                onChange={onChange}
+                variant="outlined"
+                fullWidth
+                sx={customInputStyle}
+            />
+        </Box>
+    );
+
+    return (
+        <Box
+            sx={{
+                // margin: 'auto',
+                p: { xs: 2, sm: 3 },
+                backgroundColor: '#FFFFFF',
+                maxWidth: { xs: '90%', md: '100%' },
+                borderRadius: 2,
+            }}
+        >
+            {/* العنوان الرئيسي */}
+            <Typography variant="h4" component="h1" sx={{ mb: 3, fontWeight: 'bold' }}>
+                Account Setting
+            </Typography>
+
+            {/* صورة الملف الشخصي */}
+            <Typography variant="h6" component="h2" sx={{ mb: 2, fontWeight: 'bold' }}>
+                Your Profile Picture
+            </Typography>
+
+            <Box sx={{ display: 'flex', alignItems: 'center', mb: 3 }}>
+                <label htmlFor="icon-button-file">
+                    <Input
+                        accept="image/*"
+                        id="icon-button-file"
+                        type="file"
+                        onChange={handleImageUpload}
+                    />
+                    <Box
+                        component="span"
+                        sx={{
+                            width: { xs: 100, sm: 110 },
+                            height: { xs: 100, sm: 110 },
+                            border: '2px dashed #4C535F',
+                            borderRadius: 2,
+                            display: 'flex',
+                            flexDirection: 'column',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            color: '#4C535F',
+                            cursor: 'pointer',
+                            textAlign: 'center',
+                            backgroundColor: '#f6f6f6',
+                            '&:hover': {
+                                backgroundColor: '#f9f9f9',
+                            },
+                        }}
+                    >
+                        <AddAPhotoOutlinedIcon sx={{ fontSize: 28, mb: 1 }} />
+                        <Typography sx={{ fontSize: '13px', fontWeight: 500 }}>
+                            Upload your photo
+                        </Typography>
+                    </Box>
+                </label>
+            </Box>
+
+            {/* الحقول النصية */}
+            <Box sx={{ mb: 3 }}>
+                <Typography variant="subtitle1" sx={{ fontWeight: 'bold', mb: 2 }}>
+                    Personal Information
+                </Typography>
+
+                {/* السطر الأول: Full Name + Email */}
+                <Box
+                    sx={{
+                        display: 'flex',
+                        flexWrap: 'wrap',
+                        gap: 2,
+                        mb: 2,
+                    }}
+                >
+                    {renderField('Full Name', fullName, (e) => setFullName(e.target.value))}
+                    {renderField('Email', email, (e) => setEmail(e.target.value), 'email')}
+                </Box>
+
+                {/* السطر الثاني: Username + Phone Number */}
+                <Box
+                    sx={{
+                        display: 'flex',
+                        flexWrap: 'wrap',
+                        gap: 2,
+                        mb: 2,
+                    }}
+                >
+                    {renderField('Username', username, (e) => setUsername(e.target.value))}
+                    {renderField('Phone Number', phone, (e) => setPhone(e.target.value), 'tel')}
+                </Box>
+
+                {/* الحقل Bio منفصل */}
+                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+                    <Typography variant="body2" sx={{ fontWeight: '500', fontSize: '16px' }}>
+                        Bio
+                    </Typography>
+                    <TextField
+                        placeholder="Write something about your restaurant"
+                        value={bio}
+                        onChange={(e) => setBio(e.target.value)}
+                        fullWidth
+                        multiline
+                        rows={3}
+                        sx={customInputStyle}
+                    />
+                </Box>
+            </Box>
+
+            {/* الأزرار */}
+            <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 2, flexWrap: 'wrap' }}>
+                <Button
+                    variant="outlined"
+                    sx={{
+                        px: 4,
+                        py: 1.5,
+                        borderRadius: 2,
+                        textTransform: 'none',
+                        fontWeight: 'bold',
+                        width: { xs: '100%', sm: 'auto' },
+                    }}
+                >
+                    Cancel
+                </Button>
+                <Button
+                    variant="contained"
+                    sx={{
+                        px: 4,
+                        py: 1.5,
+                        borderRadius: 2,
+                        textTransform: 'none',
+                        fontWeight: 'bold',
+                        color: '#FFFFFF',
+                        width: { xs: '100%', sm: 'auto' },
+                        transition: 'border-color 0.3s',
+                       backgroundColor: theme.palette.primary.main,
+                            '&:hover': {
+                                backgroundColor: theme.palette.primary.hover
+                            }
+                    }}
+                >
+                    Update
+                </Button>
+            </Box>
+        </Box>
+    );
+};
+
+export default AccountSettings;

src/components/Home/Settings/Setting.js

@@ -1,32 +1,16 @@
 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 AccountSettings from './AccountSettings';
 
 const drawerWidth = 230;
 
 const Setting = () => {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
-  const [hasProducts, setHasProducts] = useState(false); // حالة لتتبع وجود المنتجات
   const [sidebarOpen, setSidebarOpen] = useState(!isMobile);
 
-
-  useEffect(() => {
-    const checkProducts = async () => {
-      
-      const productsExist = await checkIfProductsExist(); 
-      setHasProducts(productsExist);
-    };
-
-    checkProducts();
-  }, []);
-
- 
-  const checkIfProductsExist = async () => {
-    return false; 
-  };
-
   useEffect(() => {
     if (window.innerWidth >= theme.breakpoints.values.md) {
       setSidebarOpen(true);
@@ -55,47 +39,63 @@ const Setting = () => {
   };
 
   return (
-    <Box sx={{
+    <Box
-      display: 'flex',
+      sx={{
-      height: '100vh',
+        display: 'flex',
-      backgroundColor: '#F6F6F6',
+        height: '100vh',
-      overflow: 'hidden',
+        backgroundColor: '#F6F6F6',
-    }}>
+        overflow: 'hidden',
+      }}
+    >
       <Sidebar
         open={sidebarOpen}
         onClose={handleDrawerToggle}
         isMobile={isMobile}
         drawerWidth={drawerWidth}
       />
-
+      <Box
-      <Box sx={{
+        sx={{
-        flexGrow: 1,
+          flexGrow: 1,
-        display: 'flex',
+          display: 'flex',
-        flexDirection: 'column',
+          flexDirection: 'column',
-        width: {
+          width: '100%',
-          xs: '100%',
+          marginLeft: {
-          sm: '100%',
+            xs: 0,
-          md: '100%'
+            sm: sidebarOpen ? `${drawerWidth}px` : 0,
-        },
+            md: 0,
-        marginLeft: {
+          },
-          xs: 0,
+          transition: theme.transitions.create(['width'], {
-          sm: sidebarOpen ? `${drawerWidth}px` : 0,
+            easing: theme.transitions.easing.sharp,
-          md: 0
+            duration: theme.transitions.duration.leavingScreen,
-        },
+          }),
-        transition: theme.transitions.create(['width'], {
+        }}
-          easing: theme.transitions.easing.sharp,
+      >
-          duration: theme.transitions.duration.leavingScreen,
-        }),
-      }}>
         <KitchPlusAppBar
           onDrawerToggle={handleDrawerToggle}
           sidebarOpen={sidebarOpen}
           isMobile={isMobile}
         />
-        <Typography>Setting</Typography>
+        <Box sx={{
+          flexGrow: 1,
+          width: sidebarOpen ? 'calc(100% - 40px)' : '100%',
+          pt: { xs:2, sm: 3 },
+          overflowY: 'auto',
+          pl: { xs: 2, sm: 3 },
+          pb: { xs: 2, sm: 4 },
+          scrollbarWidth: 'none',
+          '&::-webkit-scrollbar': { display: 'none' },
+          transition: theme.transitions.create(['margin'], {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.leavingScreen,
+          }),
+        }}>
+
+          <AccountSettings />
+
+        </Box>
       </Box>
     </Box>
   );
 };
 
-export default Setting;
+export default Setting;