نسخ من RaghadAlkhous/RestaurantDash
Work on Create your restaurant and Inventory
هذا الالتزام موجود في:
raghad
@@ -1,34 +1,47 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Box, useTheme, useMediaQuery, Typography } from '@mui/material';
|
||||
import { Box, useTheme, useMediaQuery } from '@mui/material';
|
||||
import KitchPlusAppBar from '../AppBar';
|
||||
import Sidebar from '../SideHome';
|
||||
import CloudKitchenProject from './contcet/CloudKitchenProject';
|
||||
import OperationalDetails from './contcet/OperationalDetails';
|
||||
import RequiredEquipments from './contcet/RequiredEquipments';
|
||||
import VisualIdentity from './contcet/VisualIdentity';
|
||||
import Budget from './contcet/Budget';
|
||||
import AdditionalSupport from './contcet/AdditionalSupport';
|
||||
import AdditionalNotes from './contcet/AdditionalNotes';
|
||||
import SideProfile from './SideProfile';
|
||||
|
||||
const drawerWidth = 230;
|
||||
|
||||
const CreateRestaurant = () => {
|
||||
const theme = useTheme();
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
|
||||
const [hasProducts, setHasProducts] = useState(false); // حالة لتتبع وجود المنتجات
|
||||
const [hasProducts, setHasProducts] = useState(false);
|
||||
const [sidebarOpen, setSidebarOpen] = useState(!isMobile);
|
||||
|
||||
// محاكاة للتحقق من وجود المنتجات (استبدل هذا بمنطقك الفعلي)
|
||||
// ⬇️ إدارة الخطوة الحالية
|
||||
const [currentStep, setCurrentStep] = useState(0);
|
||||
|
||||
const steps = [
|
||||
<CloudKitchenProject onNext={() => setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />,
|
||||
<OperationalDetails onNext={() => setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />,
|
||||
<RequiredEquipments onNext={() => setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />,
|
||||
<VisualIdentity onNext={() => setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />,
|
||||
<Budget onNext={() => setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />,
|
||||
<AdditionalSupport onNext={() => setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />,
|
||||
<AdditionalNotes onBack={() => setCurrentStep(currentStep - 1)} />,
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
// هنا يجب استبدال هذا بمنطق فعلي للتحقق من وجود المنتجات
|
||||
// مثلاً استدعاء API أو التحقق من state
|
||||
const checkProducts = async () => {
|
||||
// محاكاة لاستدعاء API
|
||||
const productsExist = await checkIfProductsExist(); // استبدل هذه الدالة بمنطقك الفعلي
|
||||
const productsExist = await checkIfProductsExist();
|
||||
setHasProducts(productsExist);
|
||||
};
|
||||
|
||||
checkProducts();
|
||||
}, []);
|
||||
|
||||
// دالة مساعدة لمحاكاة التحقق من المنتجات (استبدلها بمنطقك الفعلي)
|
||||
const checkIfProductsExist = async () => {
|
||||
// محاكاة - يمكن أن يكون هذا استدعاء لـ API أو تحقق من state
|
||||
// return true;
|
||||
return false; // غير هذه القيمة حسب منطقك
|
||||
return false;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
@@ -50,7 +63,6 @@ const CreateRestaurant = () => {
|
||||
|
||||
handleResize();
|
||||
window.addEventListener('resize', handleResize);
|
||||
|
||||
return () => window.removeEventListener('resize', handleResize);
|
||||
}, [theme.breakpoints.values.md]);
|
||||
|
||||
@@ -76,16 +88,8 @@ const CreateRestaurant = () => {
|
||||
flexGrow: 1,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
width: {
|
||||
xs: '100%',
|
||||
sm: '100%',
|
||||
md: '100%'
|
||||
},
|
||||
marginLeft: {
|
||||
xs: 0,
|
||||
sm: sidebarOpen ? `${drawerWidth}px` : 0,
|
||||
md: 0
|
||||
},
|
||||
width: { xs: '100%', sm: '100%', md: '100%' },
|
||||
marginLeft: { xs: 0, sm: sidebarOpen ? `${drawerWidth}px` : 0, md: 0 },
|
||||
transition: theme.transitions.create(['width'], {
|
||||
easing: theme.transitions.easing.sharp,
|
||||
duration: theme.transitions.duration.leavingScreen,
|
||||
@@ -96,10 +100,66 @@ const CreateRestaurant = () => {
|
||||
sidebarOpen={sidebarOpen}
|
||||
isMobile={isMobile}
|
||||
/>
|
||||
<Typography>CreateYourRestaurant</Typography>
|
||||
<Box>
|
||||
<Box sx={{
|
||||
display: 'flex', height: '100vh',
|
||||
|
||||
}}>
|
||||
<Box sx={{
|
||||
height: '100vh',
|
||||
ml: 3,
|
||||
mb: 2,
|
||||
width: { md: '30%' },
|
||||
display: { xs: 'none', sm: 'none', md: 'block' },
|
||||
overflowY: 'auto',
|
||||
scrollbarWidth: 'none',
|
||||
'&::-webkit-scrollbar': {
|
||||
display: 'none',
|
||||
},
|
||||
}}>
|
||||
|
||||
<Box sx={{
|
||||
minHeight: '100%', pb: 15, pt: 3,
|
||||
|
||||
}}>
|
||||
<SideProfile
|
||||
currentStepIndex={currentStep}
|
||||
onBack={() => setCurrentStep(prev => Math.max(prev - 1, 0))}
|
||||
/>
|
||||
|
||||
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box sx={{
|
||||
ml: { xs: 2, md: 3 },
|
||||
|
||||
flexGrow: 1,
|
||||
height: '100vh',
|
||||
pr: { sm: 2, md: 1 },
|
||||
|
||||
pt: 3,
|
||||
mb: { sm: 20 },
|
||||
width: { md: '60%' }, display: { xs: 'block', sm: 'block', md: 'block' },
|
||||
overflowY: 'auto',
|
||||
scrollbarWidth: 'none',
|
||||
'&::-webkit-scrollbar': {
|
||||
display: 'none',
|
||||
},
|
||||
}}>
|
||||
<Box sx={{
|
||||
minHeight: '100%', pb: 18,
|
||||
|
||||
}}>
|
||||
{steps[currentStep]}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
export default CreateRestaurant;
|
||||
162
src/components/Home/CreateYourRestaurant/SideProfile.js
Normal file
162
src/components/Home/CreateYourRestaurant/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 Project', icon: '/images/createProfile/BasicInf.png' },
|
||||
{ title: 'OperationalDetails', icon: '/images/icons/rocket.png' },
|
||||
{ title: 'Required Equipments', icon: '/images/createProfile/equipment.png'},
|
||||
{ title: 'Visual Identity', icon: '/images/createProfile/Vector.png' },
|
||||
{ title: 'Budget & Expansion', icon: '/images/createProfile/Expansion.png' },
|
||||
{ title: 'Additional Support', icon: '/images/createProfile/hand.png' },
|
||||
{ title: 'Additional Notes & Concerns', icon: '/images/createProfile/Group.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}>
|
||||
Create Your Restaurant
|
||||
</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 === 'Required Equipments' ? 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;
|
||||
@@ -0,0 +1,151 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Typography,
|
||||
Stack,
|
||||
Button,
|
||||
useTheme,
|
||||
TextField
|
||||
} from '@mui/material';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import ConfirmationDialog from './ConfirmationDialog'; // ✅ استدعاء المودال المنفصل
|
||||
|
||||
const AdditionalNotes = ({ 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: { xs: 4, md: 11 },
|
||||
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' }
|
||||
}}>
|
||||
Additional Notes
|
||||
</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>
|
||||
|
||||
{/*Notes / Concerns Input */}
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||
<Typography variant="body2" sx={{ fontWeight: 500, fontSize: '16px' }}>
|
||||
Notes / Concerns
|
||||
</Typography>
|
||||
<TextField
|
||||
placeholder="Write for us"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
multiline
|
||||
minRows={7}
|
||||
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>
|
||||
|
||||
|
||||
{/* 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 AdditionalNotes;
|
||||
@@ -0,0 +1,175 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Typography,
|
||||
Stack,
|
||||
Button,
|
||||
useTheme,
|
||||
FormGroup,
|
||||
FormControlLabel,
|
||||
Checkbox,
|
||||
} from '@mui/material';
|
||||
|
||||
const AdditionalSupport = ({ currentStepIndex = 0, onNext, onBack }) => {
|
||||
const theme = useTheme();
|
||||
const [selectedOptions, setSelectedOptions] = useState([]);
|
||||
|
||||
const handleCheckboxChange = (option) => {
|
||||
setSelectedOptions((prev) =>
|
||||
prev.includes(option)
|
||||
? prev.filter((o) => o !== option)
|
||||
: [...prev, option]
|
||||
);
|
||||
};
|
||||
|
||||
const options = ['Supplier Assistance', 'Staff Training'];
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
height: { xs: '90%', sm: '100%', md: 740 },
|
||||
backgroundColor: '#FFFFFF',
|
||||
px: 4,
|
||||
pt: { xs: 4, md: 12 },
|
||||
pb: 4,
|
||||
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',
|
||||
},
|
||||
}}
|
||||
>
|
||||
Additional Support
|
||||
</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>
|
||||
|
||||
{/* Checkboxes for Additional Support Options */}
|
||||
<Box sx={{ mt: 2 }}>
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="black"
|
||||
sx={{ fontWeight: '500', fontSize: '16px', mb: 1 }}
|
||||
>
|
||||
Select Additional Support Options
|
||||
</Typography>
|
||||
<FormGroup
|
||||
row
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
gap: 1.5,
|
||||
}}
|
||||
>
|
||||
{options.map((option) => {
|
||||
const isChecked = selectedOptions.includes(option);
|
||||
return (
|
||||
<FormControlLabel
|
||||
key={option}
|
||||
control={
|
||||
<Checkbox
|
||||
checked={isChecked}
|
||||
onChange={() => handleCheckboxChange(option)}
|
||||
sx={{
|
||||
transform: 'scale(1.5)',
|
||||
color: '#F0EDED',
|
||||
'&.Mui-checked': {
|
||||
color: '#FF914D',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
}
|
||||
label={
|
||||
<Typography
|
||||
sx={{
|
||||
color: isChecked ? '#e57f3f' : '#969BA7',
|
||||
fontWeight: 500,
|
||||
fontSize: '16px',
|
||||
}}
|
||||
>
|
||||
{option}
|
||||
</Typography>
|
||||
}
|
||||
sx={{
|
||||
m: 0,
|
||||
width: { xs: '100%', sm: '48%', md: '40%' },
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</FormGroup>
|
||||
</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>
|
||||
|
||||
<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>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default AdditionalSupport;
|
||||
139
src/components/Home/CreateYourRestaurant/contcet/Budget.js
Normal file
139
src/components/Home/CreateYourRestaurant/contcet/Budget.js
Normal file
@@ -0,0 +1,139 @@
|
||||
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 Budget= ({ 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: 4, 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: '85%', sm: '90%' },
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
<Stack spacing={2.5}>
|
||||
<Typography fontWeight={700} sx={{ fontSize: { xs: '1.8rem', sm: '2rem', md: '2.2rem' } }}>
|
||||
Budget & Expansion
|
||||
</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>
|
||||
|
||||
{/* Estimated Budget Input */}
|
||||
<InputField label="Estimated Budget" placeholder="$4200" theme={theme} />
|
||||
|
||||
{/* Expansion Plans Through Cloud Kitchen (No of Branches) Input */}
|
||||
<InputField label="Expansion Plans Through Cloud Kitchen (No of Branches)" placeholder="200" theme={theme} />
|
||||
|
||||
|
||||
|
||||
{/* 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 Budget;
|
||||
@@ -0,0 +1,325 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
Box, Typography, Stack, Button, useTheme, TextField, Radio,
|
||||
RadioGroup,
|
||||
FormControlLabel,
|
||||
} from '@mui/material';
|
||||
|
||||
const CloudKitchenProject = ({ 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'
|
||||
}
|
||||
}}
|
||||
>
|
||||
Cloud Kitchen Project
|
||||
</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>
|
||||
|
||||
{[
|
||||
{ label: 'Restaurant Name', placeholder: 'Al-Baik Foods' },
|
||||
{ label: 'Cuisine Type', placeholder: 'Italian, Chinese, etc.' },
|
||||
].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' }}
|
||||
>
|
||||
Existing Brand
|
||||
</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>
|
||||
|
||||
{/* Further Brand Details Input */}
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||
<Typography variant="body2" sx={{ fontWeight: 500, fontSize: '16px' }}>
|
||||
Further Brand Details
|
||||
</Typography>
|
||||
<TextField
|
||||
placeholder="We need Pizza Machine"
|
||||
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>
|
||||
|
||||
{[
|
||||
{ label: 'Age Group', placeholder: '15 - 75' },
|
||||
{ label: 'Location', placeholder: 'Street 123, Jordan' },
|
||||
].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' }}
|
||||
>
|
||||
Menu Status
|
||||
</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>
|
||||
|
||||
{/* Further Brand Details Input */}
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||
<Typography variant="body2" sx={{ fontWeight: 500, fontSize: '16px' }}>
|
||||
Need Help
|
||||
</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>
|
||||
|
||||
<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 CloudKitchenProject;
|
||||
@@ -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;
|
||||
@@ -0,0 +1,218 @@
|
||||
import React from 'react';
|
||||
import { Box, Typography, Stack, Button, useTheme, TextField, MenuItem } from '@mui/material';
|
||||
|
||||
const OperationalDetails = ({ currentStepIndex = 0, onNext, onBack }) => {
|
||||
const theme = useTheme();
|
||||
const countries = [
|
||||
{ code: 'US', name: 'United States' },
|
||||
{ code: 'GB', name: 'United Kingdom' },
|
||||
{ code: 'FR', name: 'France' },
|
||||
{ code: 'DE', name: 'Germany' },
|
||||
{ code: 'SA', name: 'Saudi Arabia' },
|
||||
{ code: 'EG', name: 'Egypt' },
|
||||
{ code: 'AE', name: 'United Arab Emirates' },
|
||||
// أضف المزيد حسب الحاجة
|
||||
];
|
||||
const handleNext = () => {
|
||||
if (onNext) {
|
||||
onNext();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
height: { xs: '90%', sm: '100%', md: 740 },
|
||||
backgroundColor: '#FFFFFF',
|
||||
px: 4,
|
||||
pt: { xs: 4, 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: '85%', sm: '90%' },
|
||||
}}
|
||||
>
|
||||
<Stack spacing={2.5}>
|
||||
<Typography
|
||||
fontWeight={700}
|
||||
sx={{
|
||||
fontSize: {
|
||||
xs: '1.8rem',
|
||||
sm: '2rem',
|
||||
md: '2.2rem'
|
||||
}
|
||||
}}
|
||||
>
|
||||
Operational Details
|
||||
</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>
|
||||
|
||||
{/* Staff MembersInput */}
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||
<Typography variant="body2" color="black" sx={{ fontWeight: '500', fontSize: '16px' }}>
|
||||
Staff Members
|
||||
</Typography>
|
||||
<TextField
|
||||
placeholder="200 (100 Chefs, 100 Cooks)"
|
||||
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>
|
||||
|
||||
|
||||
{/* Country Selector */}
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||
<Typography variant="body2" color="black" sx={{ fontWeight: '500', fontSize: '16px' }}>
|
||||
Country
|
||||
</Typography>
|
||||
<TextField
|
||||
select
|
||||
fullWidth
|
||||
defaultValue=""
|
||||
placeholder="Select your country"
|
||||
sx={{
|
||||
'& .MuiSelect-select': {
|
||||
fontWeight: 500,
|
||||
fontSize: '15px',
|
||||
minHeight: '40px',
|
||||
display: 'flex',
|
||||
alignItems: 'center'
|
||||
},
|
||||
'& .MuiOutlinedInput-input': { padding: '10.5px 14px' },
|
||||
'& .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)'
|
||||
}
|
||||
}}
|
||||
|
||||
>
|
||||
<MenuItem value="" disabled hidden>
|
||||
Select your country
|
||||
</MenuItem>
|
||||
{countries.map((country) => (
|
||||
<MenuItem key={country.code} value={country.code}>
|
||||
{country.name}
|
||||
</MenuItem>
|
||||
))}
|
||||
</TextField>
|
||||
</Box>
|
||||
|
||||
|
||||
{/* Expansion Plan Cities MembersInput */}
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||
<Typography variant="body2" color="black" sx={{ fontWeight: '500', fontSize: '16px' }}>
|
||||
Expansion Plan Cities
|
||||
</Typography>
|
||||
<TextField
|
||||
placeholder="Layyah Lahore Islamabad"
|
||||
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 OperationalDetails;
|
||||
@@ -0,0 +1,223 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Typography,
|
||||
Stack,
|
||||
Button,
|
||||
useTheme,
|
||||
TextField,
|
||||
FormControlLabel,
|
||||
RadioGroup,
|
||||
Radio
|
||||
} from '@mui/material';
|
||||
|
||||
const RequiredEquipments = ({ currentStepIndex = 0, onNext, onBack }) => {
|
||||
const theme = useTheme();
|
||||
|
||||
const [selectedDays, setSelectedDays] = useState([]);
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
height: { xs: '90%', sm: '100%', md: 740 },
|
||||
backgroundColor: '#FFFFFF',
|
||||
px: 4,
|
||||
pt: { xs: 4, md: 4.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'
|
||||
}
|
||||
}}
|
||||
>
|
||||
Required Equipments
|
||||
</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>
|
||||
|
||||
{/* Operational Hours Input */}
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||
<Typography variant="body2" color="black" sx={{ fontWeight: '500', fontSize: '16px' }}>
|
||||
Equipment
|
||||
</Typography>
|
||||
<TextField
|
||||
placeholder=" Ovens Refrigerators Pizza Machines |"
|
||||
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' }}
|
||||
>
|
||||
Need Specialized Equipment
|
||||
</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={{
|
||||
pl: 5,
|
||||
color: 'rgba(150, 155, 167, 0.6)',
|
||||
transform: 'scale(0.85)',
|
||||
'&.Mui-checked': {
|
||||
color: theme.palette.primary.main
|
||||
}
|
||||
}}
|
||||
/>
|
||||
}
|
||||
label="No"
|
||||
/>
|
||||
</RadioGroup>
|
||||
</Box>
|
||||
|
||||
|
||||
|
||||
{/* Specialized Equipments For Food Preparation Input */}
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||
<Typography variant="body2" sx={{ fontWeight: 500, fontSize: '16px' }}>
|
||||
Specialized Equipments For Food Preparation
|
||||
</Typography>
|
||||
<TextField
|
||||
placeholder="Knife Spoon Handle |"
|
||||
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>
|
||||
|
||||
{/* 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 RequiredEquipments;
|
||||
@@ -0,0 +1,201 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
Box,
|
||||
Typography,
|
||||
Stack,
|
||||
Button,
|
||||
useTheme,
|
||||
TextField,
|
||||
RadioGroup,
|
||||
FormControlLabel,
|
||||
Radio
|
||||
} from '@mui/material';
|
||||
import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
|
||||
|
||||
const VisualIdentity = ({ currentStepIndex = 0, onNext, onBack }) => {
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
height: { xs: '90%', sm: '100%', md: 740 },
|
||||
backgroundColor: '#FFFFFF',
|
||||
px: 4,
|
||||
pt: { xs: 4, md: 4.5 },
|
||||
pb: 10,
|
||||
borderRadius: 2,
|
||||
boxShadow: '0px 1px 4px rgba(0,0,0,0.05)',
|
||||
width: { xs: '85%', sm: '90%' },
|
||||
mx: 'auto'
|
||||
}}
|
||||
>
|
||||
<Stack spacing={2.5}>
|
||||
<Typography
|
||||
fontWeight={700}
|
||||
sx={{
|
||||
fontSize: {
|
||||
xs: '1.8rem',
|
||||
sm: '2rem',
|
||||
md: '2.2rem'
|
||||
}
|
||||
}}
|
||||
>
|
||||
Visual Identity
|
||||
</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>
|
||||
|
||||
|
||||
<Box sx={{}}>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ fontWeight: 500, fontSize: '16px', mb: 1, mt: 2, color: '#191635' }}
|
||||
>
|
||||
Visual Identity
|
||||
</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={{
|
||||
pl: 5,
|
||||
color: 'rgba(150, 155, 167, 0.6)',
|
||||
transform: 'scale(0.85)',
|
||||
'&.Mui-checked': {
|
||||
color: theme.palette.primary.main
|
||||
}
|
||||
}}
|
||||
/>
|
||||
}
|
||||
label="No"
|
||||
/>
|
||||
</RadioGroup>
|
||||
</Box>
|
||||
|
||||
{/* OR Separator */}
|
||||
<Box>
|
||||
|
||||
<Typography
|
||||
sx={{
|
||||
fontWeight: 500,
|
||||
fontSize: '16px',
|
||||
color: 'black',
|
||||
mb:2 ,
|
||||
pl: 1, // padding left (اختياري)
|
||||
}}
|
||||
>
|
||||
Upload Logo / Color Scheme If Any
|
||||
</Typography>
|
||||
|
||||
{/* Upload Menu Picture */}
|
||||
<Box
|
||||
component="label"
|
||||
htmlFor="upload-image"
|
||||
sx={{
|
||||
border: '2px dashed #ccc',
|
||||
borderRadius: '10px',
|
||||
height: '100px',
|
||||
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 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 VisualIdentity;
|
||||
المرجع في مشكلة جديدة
حظر مستخدم