Jalal/ci_cd_repo
1
0
نسخ 0
الشفرة المشكلات طلبات السحب Actions Packages المشاريع الإصدارات الويكي النشاط

Work on Host Kitchen

تصفح المصدر
هذا الالتزام موجود في:
raghad
2025-05-24 18:43:43 +03:00
الأصل f4d30ed0d7
التزام aa9a213676
22 ملفات معدلة مع 1665 إضافات و57 حذوفات
تنزيل ملف التصحيح تنزيل ملف الاختلاف توسيع جميع الملفات طي جميع الملفات

ثنائية
public/images/createProfile/Expansion.png Normal file
عرض الملف

ملف ثنائي غير معروض.
جنبًا إلى جنب

بعد

العرض:  |  الارتفاع:  |  الحجم: 732 B

ثنائية
public/images/createProfile/Facilitaion.png Normal file
عرض الملف

ملف ثنائي غير معروض.
جنبًا إلى جنب

بعد

العرض:  |  الارتفاع:  |  الحجم: 859 B

2
public/index.html
عرض الملف

@@ -14,7 +14,7 @@
/> />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
<style> <style>
* { * {
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;

ثنائية
restored-file.js Normal file
عرض الملف

ملف ثنائي غير معروض.

124
src/components/Home/HostKitchen/HostKitchen.js
عرض الملف

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

162
src/components/Home/HostKitchen/SideProfile.js Normal file
عرض الملف

@@ -0,0 +1,162 @@
import React from 'react';
import { Box, Typography, Stack, Button, useTheme } from '@mui/material';
import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
const steps = [
{ title: 'Cloud Kitchen Hosting', icon: '/images/createProfile/BasicInf.png' },
{ title: 'Restaurant Operations', icon: '/images/icons/rocket.png' },
{ title: 'Infrastructure & Equipment', icon: '/images/createProfile/equipment.png' },
{ title: 'Facilitaion & Cooperation', icon: '/images/createProfile/Facilitaion.png' },
{ title: 'Expansion & Future Cooperation', icon: '/images/createProfile/Expansion.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: 'block' ,
borderRadius: 2,
boxShadow: '0px 1px 4px rgba(0,0,0,0.05)',
position: 'relative',
}}
>
{/* العنوان الرئيسي */}
<Typography fontSize="18px" fontWeight={600} mb={1.2}>
Host Kitchen 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={5} sx={{ ml: 1, position: 'relative', pb: 15 }}>
{steps.map((step, index) => (
<Box key={index} position="relative">
{/* الخط الرأسي بين الدوائر */}
{index !== steps.length - 1 && (
<Box
sx={{
position: 'absolute',
top: {sm:'50px',md:'40px'},
left: '22px',
width: '2px',
height: {sm:'130%',md:'calc(100% - 0px)'},
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 === 'Infrastructure & 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,
mt:10
}}
>
<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;

135
src/components/Home/HostKitchen/contcet/CloudKitchenHosting.js Normal file
عرض الملف

@@ -0,0 +1,135 @@
import React from 'react';
import { Box, Typography, Stack, Button, useTheme, TextField } from '@mui/material';
const CloudKitchenHosting = ({ currentStepIndex = 0, onNext, onBack }) => {
const theme = useTheme();
return (
<Box
sx={{
height: { xs: '90%', sm: '100%', md: '92.5%' },
backgroundColor: '#FFFFFF',
px: 4,
pt: 5,
pb: 10,
display: 'block',
borderRadius: 2,
boxShadow: '0px 1px 4px rgba(0,0,0,0.05)',
position: 'relative',
width: { xs: '85%', sm: '90%' },
}}
>
<Stack spacing={2.5}>
<Typography
fontWeight={700}
sx={{
fontSize: {
xs: '1.8rem',
sm: '2rem',
md: '2.2rem'
}
}}
>
Cloud Kitchen Hosting
</Typography>
<Box sx={{ width: '80%' }}>
<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 Location', placeholder: 'Street 123, Jordan' },
{ label: 'Availabel Space', placeholder: '300 sq. feet' },
{ label: 'Number of Employees', placeholder: '200' },
].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: 'none', 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 CloudKitchenHosting;

158
src/components/Home/HostKitchen/contcet/ConfirmationDialog.js Normal file
عرض الملف

@@ -0,0 +1,158 @@
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: '300px',
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,
},
}}
>
Done
</Button>
</DialogActions>
</Box>
</Dialog>
);
};
export default ConfirmationDialog;

233
src/components/Home/HostKitchen/contcet/Expansion.js Normal file
عرض الملف

@@ -0,0 +1,233 @@
import React, { useState } from 'react';
import {
Box, Typography, Stack, Button, useTheme, TextField, Radio,
RadioGroup,
FormControlLabel,
} from '@mui/material';
import ConfirmationDialog from './ConfirmationDialog'; // ✅ استدعاء المودال المنفصل
const Expansion = ({ currentStepIndex = 0, onNext, onBack }) => {
const theme = useTheme();
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: '92.5%' },
backgroundColor: '#FFFFFF',
px: 4,
pt: 5,
pb: 23.2,
display: 'block',
borderRadius: 2,
boxShadow: '0px 1px 4px rgba(0,0,0,0.05)',
position: 'relative',
width: { xs: '85%', sm: '90%' },
}}
>
<Stack spacing={2.5}>
<Typography
fontWeight={700}
sx={{
fontSize: {
xs: '1.8rem',
sm: '2rem',
md: '2.2rem'
}
}}
>
Expansion & Future Cooperation
</Typography>
<Box sx={{ width: '80%' }}>
<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>
<Box>
<Typography
variant="body2"
sx={{ fontWeight: 500, fontSize: '16px', mb: 1.5, color: '#191635' }}
>
Hosting Multiple Cloud Kitchens
</Typography>
<RadioGroup row name="additionalFacilities">
<FormControlLabel
value="yes"
control={
<Radio
sx={{
color: 'rgba(150, 155, 167, 0.6)', // شفافية اللون
transform: 'scale(0.85)', // تقليل حجم الزر لتقليل "سُمك الحواف"
'&.Mui-checked': {
color: theme.palette.primary.main
}
}}
/>
}
label="Yes"
/>
<FormControlLabel
value="no"
control={
<Radio
sx={{
color: 'rgba(150, 155, 167, 0.6)',
transform: 'scale(0.85)',
'&.Mui-checked': {
color: theme.palette.primary.main
}
}}
/>
}
label="No"
/>
</RadioGroup>
</Box>
{/* Inputs (Restaurant Name, Type, Address, City, Postal Code) */}
{[
{ label: 'Future Kitchen Plans', placeholder: '20' },
].map((field, index) => (
<Box key={index} sx={{ display: 'flex', flexDirection: 'column', gap: 1, mt: 3 }}>
<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={{ mt: 2 }}>
<Typography
variant="body2"
sx={{ fontWeight: 500, fontSize: '16px', mb: 1.5, mt: 2, color: '#191635' }}
>
Partnership & Support
</Typography>
<RadioGroup row name="additionalFacilities">
<FormControlLabel
value="yes"
control={
<Radio
sx={{
color: 'rgba(150, 155, 167, 0.6)', // شفافية اللون
transform: 'scale(0.85)', // تقليل حجم الزر لتقليل "سُمك الحواف"
'&.Mui-checked': {
color: theme.palette.primary.main
}
}}
/>
}
label="Yes"
/>
<FormControlLabel
value="no"
control={
<Radio
sx={{
color: 'rgba(150, 155, 167, 0.6)',
transform: 'scale(0.85)',
'&.Mui-checked': {
color: theme.palette.primary.main
}
}}
/>
}
label="No"
/>
</RadioGroup>
</Box>
<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>
{/* زر 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: 'none', 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>
{/* ✅ 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 Expansion;

260
src/components/Home/HostKitchen/contcet/Facilitation.js Normal file
عرض الملف

@@ -0,0 +1,260 @@
import React from 'react';
import {
Box, Typography, Stack, Button, useTheme, TextField, Radio,
RadioGroup,
FormControlLabel,
} from '@mui/material';
const Facilitation = ({ currentStepIndex = 0, onNext, onBack }) => {
const theme = useTheme();
return (
<Box
sx={{
height: { xs: '90%', sm: '100%', md: '92.5%' },
backgroundColor: '#FFFFFF',
px: 4,
pt: 5,
pb: 5.8,
display: 'block',
borderRadius: 2,
boxShadow: '0px 1px 4px rgba(0,0,0,0.05)',
position: 'relative',
width: { xs: '85%', sm: '90%' },
}}
>
<Stack spacing={2.5}>
<Typography
fontWeight={700}
sx={{
fontSize: {
xs: '1.8rem',
sm: '2rem',
md: '2.2rem'
}
}}
>
Facilitation & Cooperation
</Typography>
<Box sx={{ width: '80%' }}>
<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>
<Box>
<Typography
variant="body2"
sx={{ fontWeight: 500, fontSize: '16px', mb: 1, color: '#191635' }}
>
Additional Services Provided
</Typography>
<RadioGroup row name="additionalFacilities">
<FormControlLabel
value="yes"
control={
<Radio
sx={{
color: 'rgba(150, 155, 167, 0.6)', // شفافية اللون
transform: 'scale(0.85)', // تقليل حجم الزر لتقليل "سُمك الحواف"
'&.Mui-checked': {
color: theme.palette.primary.main
}
}}
/>
}
label="Yes"
/>
<FormControlLabel
value="no"
control={
<Radio
sx={{
color: 'rgba(150, 155, 167, 0.6)',
transform: 'scale(0.85)',
'&.Mui-checked': {
color: theme.palette.primary.main
}
}}
/>
}
label="No"
/>
</RadioGroup>
</Box>
{/* Additional Services Input */}
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
<Typography variant="body2" sx={{ fontWeight: 500, fontSize: '16px' }}>
Additional Services
</Typography>
<TextField
placeholder={`1. Marketing\n2. Logistics\n3. Staff Training`}
variant="outlined"
fullWidth
multiline
minRows={4}
sx={{
'& .MuiInputBase-root': {
fontWeight: 500,
fontSize: '15px',
alignItems: 'start',
},
'& textarea::placeholder': {
color: '#969BA7',
whiteSpace: 'pre-line', // لعرض الأسطر بشكل صحيح
},
'& .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={{}}>
<Typography
variant="body2"
sx={{ fontWeight: 500, fontSize: '16px', mb: 1, color: '#191635' }}
>
Ventilation and Cooling System
</Typography>
<RadioGroup row name="additionalFacilities">
<FormControlLabel
value="yes"
control={
<Radio
sx={{
color: 'rgba(150, 155, 167, 0.6)', // شفافية اللون
transform: 'scale(0.85)', // تقليل حجم الزر لتقليل "سُمك الحواف"
'&.Mui-checked': {
color: theme.palette.primary.main
}
}}
/>
}
label="Yes"
/>
<FormControlLabel
value="no"
control={
<Radio
sx={{
color: 'rgba(150, 155, 167, 0.6)',
transform: 'scale(0.85)',
'&.Mui-checked': {
color: theme.palette.primary.main
}
}}
/>
}
label="No"
/>
</RadioGroup>
</Box>
{/* Inputs (Restaurant Name, Type, Address, City, Postal Code) */}
{[
{ label: 'Working Hours', placeholder: '8 hours' },
].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: 1 }}>
<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: 'none', 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 Facilitation;

214
src/components/Home/HostKitchen/contcet/Infrastructure.js Normal file
عرض الملف

@@ -0,0 +1,214 @@
import React from 'react';
import {
Box, Typography, Stack, Button, useTheme, TextField, Radio,
RadioGroup,
FormControlLabel,
} from '@mui/material';
const Infrastructure = ({ currentStepIndex = 0, onNext, onBack }) => {
const theme = useTheme();
return (
<Box
sx={{
height: { xs: '90%', sm: '100%', md: '92.5%' },
backgroundColor: '#FFFFFF',
px: 4,
pt: 5,
pb: 11,
display: 'block',
borderRadius: 2,
boxShadow: '0px 1px 4px rgba(0,0,0,0.05)',
position: 'relative',
width: { xs: '85%', sm: '90%' },
}}
>
<Stack spacing={2.5}>
<Typography
fontWeight={700}
sx={{
fontSize: {
xs: '1.8rem',
sm: '2rem',
md: '2.2rem'
}
}}
>
Infrastructure & Equipments
</Typography>
<Box sx={{ width: '80%' }}>
<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: 'Current Equipment', placeholder: 'oven, refrgerators' },
].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={{}}>
<Typography
variant="body2"
sx={{ fontWeight: 500, fontSize: '16px', mb: 1, mt: 2, color: '#191635' }}
>
Additional Facilities Needed
</Typography>
<RadioGroup row name="additionalFacilities">
<FormControlLabel
value="yes"
control={
<Radio
sx={{
color: 'rgba(150, 155, 167, 0.6)', // شفافية اللون
transform: 'scale(0.85)', // تقليل حجم الزر لتقليل "سُمك الحواف"
'&.Mui-checked': {
color: theme.palette.primary.main
}
}}
/>
}
label="Yes"
/>
<FormControlLabel
value="no"
control={
<Radio
sx={{
color: 'rgba(150, 155, 167, 0.6)',
transform: 'scale(0.85)',
'&.Mui-checked': {
color: theme.palette.primary.main
}
}}
/>
}
label="No"
/>
</RadioGroup>
</Box>
{/* Description Input */}
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
<Typography variant="body2" sx={{ fontWeight: 500, fontSize: '16px' }}>
Description
</Typography>
<TextField
placeholder="We need Pizza Machine"
variant="outlined"
fullWidth
multiline
minRows={5}
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>
<Box sx={{ pt: 2.8 }}>
<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: 'none', 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 Infrastructure;

230
src/components/Home/HostKitchen/contcet/PostSubmission.js Normal file
عرض الملف

@@ -0,0 +1,230 @@
import React from 'react';
import { Box, Button, Card, CardContent, Stack, Typography, useMediaQuery } from '@mui/material';
import AirportShuttleIcon from '@mui/icons-material/AirportShuttle';
import CampaignIcon from '@mui/icons-material/Campaign';
import Inventory2Icon from '@mui/icons-material/Inventory2';
import DeveloperBoardIcon from '@mui/icons-material/DeveloperBoard';
import ArrowOutwardIcon from '@mui/icons-material/ArrowOutward';
import { useTheme } from '@mui/material/styles';
import AddIcon from '@mui/icons-material/Add';
const IconCircle = ({ children, bgColor = '#DEDEFA', outerColor = '#EFEFFD' }) => (
<Box
sx={{
position: 'relative',
width: { xs: 40, sm: 45, md: 50 },
height: { xs: 43, sm: 48, md: 53 },
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
<Box
sx={{
position: 'absolute',
width: { xs: 32, sm: 36, md: 40 },
height: { xs: 35, sm: 39, md: 43 },
borderRadius: '50%',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
backgroundColor: outerColor,
zIndex: 0,
}}
/>
<Box
sx={{
width: { xs: 24, sm: 27, md: 30 },
height: { xs: 27, sm: 30, md: 33 },
backgroundColor: bgColor,
borderRadius: '50%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
zIndex: 1,
}}
>
{children}
</Box>
</Box>
);
const StatusCard = ({
icon,
statusText,
statusColor,
iconColor,
outerColor,
innerColor,
height = {
xs: 'calc(140px + 0.5vh)',
sm: 'calc(150px + 0.5vh)',
md: 'calc(162px + 0.5vh)'
},
width = {
xs: 'min(90%, 600px)', // تقليل من 90% إلى 85% والحد الأقصى من 300px إلى 280px
sm: 'clamp(220px, 23vw, 280px)', // تقليل جميع القيم
md: 'clamp(220px, 19vw, 300px)'
},
transition = 'width 0.3s ease',
iconSpacing = { xs: 6, sm: 8, md: 12 },
extraButton,
statusButtonWidth,
title = 'Point Of Sale',
}) => {
const theme = useTheme();
const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
return (
<Card sx={{
height,
width,
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
p: 0,
pb: 2,
borderRadius: '8px',
boxShadow: 'none',
minWidth: { xs: 180, sm: 220 }
}}>
<CardContent>
<Box sx={{ display: 'flex', alignItems: 'center', gap: iconSpacing }}>
<IconCircle bgColor={innerColor} outerColor={outerColor}>
{React.cloneElement(icon, { sx: { color: iconColor, fontSize: { xs: 16, sm: 18, md: 20 } } })}
</IconCircle>
<Button
variant="contained"
sx={{
backgroundColor: '#E7F4EE',
color: statusColor,
textTransform: 'none',
boxShadow: 'none',
borderRadius: '100px',
width: statusButtonWidth || 'auto',
fontSize: { xs: '0.7rem', sm: '0.8rem', md: '0.9rem' },
px: { xs: 1, sm: 1.5 },
py: 0.5
}}
>
{statusText}
</Button>
</Box>
<Typography
variant="h6"
gutterBottom
mt={1.5}
sx={{
color: '#667085',
fontSize: { xs: '14px', sm: '15px', md: '16px' },
fontWeight: 500
}}
>
{title}
</Typography>
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mt: 2 }}>
{extraButton ? extraButton : <Box />}
<Button
variant="contained"
sx={{
backgroundColor: '#F7F7F7',
width: { xs: '26px', sm: '28px', md: '30px' },
height: { xs: '26px', sm: '28px', md: '30px' },
minWidth: '0',
padding: 0,
borderRadius: '12px',
boxShadow: 'none',
'&:hover': {
backgroundColor: '#e0e0e0',
},
}}
>
<ArrowOutwardIcon
sx={{
color: theme.palette.primary.main,
width: { xs: '16px', sm: '18px', md: '20px' },
height: { xs: '16px', sm: '18px', md: '20px' },
}}
/>
</Button>
</Box>
</CardContent>
</Card>
);
};
const PostSubmission = () => {
const theme = useTheme();
const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
const isMediumScreen = useMediaQuery(theme.breakpoints.between('sm', 'md'));
return (
<>
{/* Header Section */}
<Box
sx={{
display: 'flex',
justifyContent: 'space-between',
alignItems: { xs: 'flex-start', sm: 'center', md: 'center' },
mb: 3,
pl: 1,
pr: { xs: 1, sm: 3 },
flexDirection: { xs: 'column', sm: 'row', md: 'row' },
gap: { xs: 2, sm: 0 }
}}
>
{/* Title */}
<Typography
variant="h6"
sx={{
fontWeight: '500',
fontSize: { xs: '20px', sm: '22px', md: '24px' },
color: '#121212'
}}
>
Post Submission
</Typography>
{/* Buttons */}
<Box sx={{
display: 'flex',
gap: { xs: 1, sm: 2 },
flexWrap: { xs: 'wrap', sm: 'nowrap' },
width: { xs: '100%', sm: 'auto' },
justifyContent: { xs: 'space-between', sm: 'space-between', md: 'flex-end' }
}}>
<Button
variant="contained"
sx={{
textTransform: 'none',
color: 'white',
backgroundColor: theme.palette.primary.main,
boxShadow: 'none',
borderRadius: '8px',
height: '40px',
width: { xs: '48%', sm: '130px', md: '100px' },
fontSize: { xs: '12px', sm: '13px', md: '14px' },
fontWeight: 600,
p: 0,
m: 0,
whiteSpace: 'nowrap',
minWidth: 'unset'
}}
>
{!isSmallScreen && 'Interested'}
</Button>
</Box>
</Box>
</>
);
};
export default PostSubmission;

135
src/components/Home/HostKitchen/contcet/RstaurantOperations.js Normal file
عرض الملف

@@ -0,0 +1,135 @@
import React from 'react';
import { Box, Typography, Stack, Button, useTheme, TextField } from '@mui/material';
const CloudKitchenHosting = ({ currentStepIndex = 0, onNext, onBack }) => {
const theme = useTheme();
return (
<Box
sx={{
height: { xs: '90%', sm: '100%', md: '92.5%' },
backgroundColor: '#FFFFFF',
px: 4,
pt: 5,
pb: 10,
display: 'block',
borderRadius: 2,
boxShadow: '0px 1px 4px rgba(0,0,0,0.05)',
position: 'relative',
width: { xs: '85%', sm: '90%' },
}}
>
<Stack spacing={2.5}>
<Typography
fontWeight={700}
sx={{
fontSize: {
xs: '1.8rem',
sm: '2rem',
md: '2.2rem'
}
}}
>
Rstaurant Operations
</Typography>
<Box sx={{ width: '80%' }}>
<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: 'Monthly Sales Value', placeholder: '$400' },
{ label: 'Operating Size (Customers/Day)', placeholder: '20' },
{ label: 'Peak Hours', placeholder:'Breakfast' },
{ label: 'Preferred Cuisine to Host', placeholder: 'Fast Food' },
].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 CloudKitchenHosting;

36
src/components/Home/RestaurantProfile/RestaurantProfile.js
عرض الملف

@@ -106,24 +106,24 @@ const RestaurantProfile = () => {
<Box> <Box>
<Box sx={{ <Box sx={{
display: 'flex', height: '100vh', display: 'flex', height: '100vh',
}}> }}>
<Box sx={{ <Box sx={{
height: '100vh', height: '100vh',
ml: 3, ml: 3,
mb: 2, mb: 2,
width: { md: '30%' }, width: { md: '30%' },
display: { xs: 'none', sm: 'none', md: 'block' }, display: { xs: 'none', sm: 'none', md: 'block' },
overflowY: 'auto', overflowY: 'auto',
scrollbarWidth: 'none', scrollbarWidth: 'none',
'&::-webkit-scrollbar': { '&::-webkit-scrollbar': {
display: 'none', display: 'none',
}, },
}}> }}>
<Box sx={{ <Box sx={{
minHeight: '100%', pb: 15, pt: 3, minHeight: '100%', pb: 15, pt: 3,
}}> }}>
<SideProfile <SideProfile
currentStepIndex={currentStep} currentStepIndex={currentStep}
@@ -136,23 +136,23 @@ const RestaurantProfile = () => {
<Box sx={{ <Box sx={{
ml: { xs: 2, md: 3 }, ml: { xs: 2, md: 3 },
flexGrow: 1, flexGrow: 1,
height: '100vh', height: '100vh',
pr: { sm: 2, md: 1 }, pr: { sm: 2, md: 1 },
pt: 3, pt: 3,
mb: { sm: 20 }, mb: { sm: 20 },
width: { md: '60%' }, display: { xs: 'block', sm: 'block', md: 'block' }, width: { md: '60%' }, display: { xs: 'block', sm: 'block', md: 'block' },
overflowY: 'auto', overflowY: 'auto',
scrollbarWidth: 'none', scrollbarWidth: 'none',
'&::-webkit-scrollbar': { '&::-webkit-scrollbar': {
display: 'none', display: 'none',
}, },
}}> }}>
<Box sx={{ <Box sx={{
minHeight: '100%', pb: 18, minHeight: '100%', pb: 18,
}}> }}>
{steps[currentStep]} {steps[currentStep]}
</Box> </Box>

5
src/components/Home/RestaurantProfile/contcet/BasicInformation.js
عرض الملف

@@ -10,13 +10,14 @@ const BasicInformation = ({ currentStepIndex = 0, onNext, onBack }) => {
height: { xs: '90%', sm: '100%', md: 740 }, height: { xs: '90%', sm: '100%', md: 740 },
backgroundColor: '#FFFFFF', backgroundColor: '#FFFFFF',
px: 4, px: 4,
pt: 4.5, pt: {xs:4,md: 4.5},
pb: 10, pb: 10,
display: 'block', display: 'block',
borderRadius: 2, borderRadius: 2,
boxShadow: '0px 1px 4px rgba(0,0,0,0.05)', boxShadow: '0px 1px 4px rgba(0,0,0,0.05)',
position: 'relative', position: 'relative',
width: { xs: '80%', sm: '90%' }, width: { xs: '85%', sm: '90%' },
}} }}
> >
<Stack spacing={2.5}> <Stack spacing={2.5}>

4
src/components/Home/RestaurantProfile/contcet/BusinessHours.js
عرض الملف

@@ -32,13 +32,13 @@ const BusinessHours = ({ currentStepIndex = 0, onNext, onBack }) => {
height: { xs: '90%', sm: '100%', md: 740 }, height: { xs: '90%', sm: '100%', md: 740 },
backgroundColor: '#FFFFFF', backgroundColor: '#FFFFFF',
px: 4, px: 4,
pt: 4.5, pt: {xs:4,md:4.5},
pb: 10, pb: 10,
display: 'block', display: 'block',
borderRadius: 2, borderRadius: 2,
boxShadow: '0px 1px 4px rgba(0,0,0,0.05)', boxShadow: '0px 1px 4px rgba(0,0,0,0.05)',
position: 'relative', position: 'relative',
width: { xs: '80%', sm: '90%' }, width: { xs: '85%', sm: '90%' },
}} }}
> >
<Stack spacing={2.5}> <Stack spacing={2.5}>

4
src/components/Home/RestaurantProfile/contcet/ContactInformation.js
عرض الملف

@@ -16,13 +16,13 @@ const ContactInformation = ({ currentStepIndex = 0, onNext, onBack }) => {
height: { xs: '90%', sm: '100%', md: 740 }, height: { xs: '90%', sm: '100%', md: 740 },
backgroundColor: '#FFFFFF', backgroundColor: '#FFFFFF',
px: 4, px: 4,
pt: { xs: 6, md: 14.5 }, pt: { xs: 4, md: 14.5 },
pb: { xs: 20, sm: 20, md: 0 }, pb: { xs: 20, sm: 20, md: 0 },
display: 'block', display: 'block',
borderRadius: 2, borderRadius: 2,
boxShadow: '0px 1px 4px rgba(0,0,0,0.05)', boxShadow: '0px 1px 4px rgba(0,0,0,0.05)',
position: 'relative', position: 'relative',
width: { xs: '80%', sm: '90%' }, width: { xs: '85%', sm: '90%' },
}} }}
> >
<Stack spacing={2.5}> <Stack spacing={2.5}>

4
src/components/Home/RestaurantProfile/contcet/Equipment.js
عرض الملف

@@ -18,12 +18,12 @@ const Equipment = ({ currentStepIndex = 0, onNext, onBack }) => {
height: { xs: '90%', sm: '100%', md: 740 }, height: { xs: '90%', sm: '100%', md: 740 },
backgroundColor: '#FFFFFF', backgroundColor: '#FFFFFF',
px: 4, px: 4,
pt: { xs: 6, md: 12 }, pt: { xs: 4, md: 12 },
pb: { xs: 20, sm: 12, md: 3 }, pb: { xs: 20, sm: 12, md: 3 },
display: 'block', display: 'block',
borderRadius: 2, borderRadius: 2,
boxShadow: '0px 1px 4px rgba(0,0,0,0.05)', boxShadow: '0px 1px 4px rgba(0,0,0,0.05)',
width: { xs: '80%', sm: '90%' }, width: { xs: '85%', sm: '90%' },
position: 'relative', position: 'relative',
}} }}
> >

4
src/components/Home/RestaurantProfile/contcet/OperationalCapacity.js
عرض الملف

@@ -10,13 +10,13 @@ const OperationalCapacity = ({ currentStepIndex = 0, onNext, onBack }) => {
height: { xs: '90%', sm: '100%', md:740 }, height: { xs: '90%', sm: '100%', md:740 },
backgroundColor: '#FFFFFF', backgroundColor: '#FFFFFF',
px: 4, px: 4,
pt: 12, pt: {xs:4,md:12},
pb: 4, pb: 4,
display: 'block', display: 'block',
borderRadius: 2, borderRadius: 2,
boxShadow: '0px 1px 4px rgba(0,0,0,0.05)', boxShadow: '0px 1px 4px rgba(0,0,0,0.05)',
position: 'relative', position: 'relative',
width: { xs: '80%', sm: '90%' }, width: { xs: '85%', sm: '90%' },
}} }}
> >
<Stack spacing={2.5}> <Stack spacing={2.5}>

4
src/components/Home/RestaurantProfile/contcet/TypeOfRestaurant.js
عرض الملف

@@ -18,13 +18,13 @@ const TypeOfRestaurant = ({ currentStepIndex = 0, onNext, onBack }) => {
height: { xs: '90%', sm: '100%', md: 700 }, height: { xs: '90%', sm: '100%', md: 700 },
backgroundColor: '#FFFFFF', backgroundColor: '#FFFFFF',
px: 4, px: 4,
pt: { xs: 6, md: 19.5 }, pt: { xs: 4, md: 19.5 },
pb: { xs: 20, sm: 20, md: 0 }, pb: { xs: 20, sm: 20, md: 0 },
display: 'block', display: 'block',
borderRadius: 2, borderRadius: 2,
boxShadow: '0px 1px 4px rgba(0,0,0,0.05)', boxShadow: '0px 1px 4px rgba(0,0,0,0.05)',
position: 'relative', position: 'relative',
width: { xs: '80%', sm: '90%' }, width: { xs: '85%', sm: '90%' },
}} }}
> >
<Stack spacing={2.5}> <Stack spacing={2.5}>

4
src/components/Home/RestaurantProfile/contcet/UploadMenu.js
عرض الملف

@@ -18,11 +18,11 @@ const UploadMenu = ({ currentStepIndex = 0, onNext, onBack }) => {
height: { xs: '90%', sm: '100%', md: 740 }, height: { xs: '90%', sm: '100%', md: 740 },
backgroundColor: '#FFFFFF', backgroundColor: '#FFFFFF',
px: 4, px: 4,
pt: 4.5, pt: {xs:4,md:4.5},
pb: 10, pb: 10,
borderRadius: 2, borderRadius: 2,
boxShadow: '0px 1px 4px rgba(0,0,0,0.05)', boxShadow: '0px 1px 4px rgba(0,0,0,0.05)',
width: { xs: '80%', sm: '90%' }, width: { xs: '85%', sm: '90%' },
mx: 'auto' mx: 'auto'
}} }}
> >

4
src/components/Home/RestaurantProfile/contcet/UploadPhotos.js
عرض الملف

@@ -27,13 +27,13 @@ const UploadPhotos = ({ currentStepIndex = 0, onNext, onBack }) => {
height: { xs: '90%', sm: '100%', md: 740 }, height: { xs: '90%', sm: '100%', md: 740 },
backgroundColor: '#FFFFFF', backgroundColor: '#FFFFFF',
px: 4, px: 4,
pt: 11, pt: {xs:4,md:11},
pb: 10, pb: 10,
display: 'block', display: 'block',
borderRadius: 2, borderRadius: 2,
boxShadow: '0px 1px 4px rgba(0,0,0,0.05)', boxShadow: '0px 1px 4px rgba(0,0,0,0.05)',
position: 'relative', position: 'relative',
width: { xs: '80%', sm: '90%' }, width: { xs: '85%', sm: '90%' },
}} }}
> >
<Stack spacing={2.5}> <Stack spacing={2.5}>