نسخ من RaghadAlkhous/RestaurantDash
Updates to the settings interface and restaurant account creation.
هذا الالتزام موجود في:
raghad
33
package-lock.json
مولّد
33
package-lock.json
مولّد
@@ -16,6 +16,7 @@
|
||||
"@testing-library/jest-dom": "^6.6.3",
|
||||
"@testing-library/react": "^16.3.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"axios": "^1.9.0",
|
||||
"react": "^19.1.0",
|
||||
"react-circular-progressbar": "^2.2.0",
|
||||
"react-dom": "^19.1.0",
|
||||
@@ -5404,6 +5405,32 @@
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/axios": {
|
||||
"version": "1.9.0",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-1.9.0.tgz",
|
||||
"integrity": "sha512-re4CqKTJaURpzbLHtIi6XpDv20/CnpXOtjRY5/CU32L8gU8ek9UIivcfvSWvmKEngmVbrUtPpdDwWDWL7DNHvg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"follow-redirects": "^1.15.6",
|
||||
"form-data": "^4.0.0",
|
||||
"proxy-from-env": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/axios/node_modules/form-data": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.2.tgz",
|
||||
"integrity": "sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"asynckit": "^0.4.0",
|
||||
"combined-stream": "^1.0.8",
|
||||
"es-set-tostringtag": "^2.1.0",
|
||||
"mime-types": "^2.1.12"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/axobject-query": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
|
||||
@@ -14327,6 +14354,12 @@
|
||||
"node": ">= 0.10"
|
||||
}
|
||||
},
|
||||
"node_modules/proxy-from-env": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
|
||||
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/psl": {
|
||||
"version": "1.15.0",
|
||||
"resolved": "https://registry.npmjs.org/psl/-/psl-1.15.0.tgz",
|
||||
|
||||
@@ -11,6 +11,7 @@
|
||||
"@testing-library/jest-dom": "^6.6.3",
|
||||
"@testing-library/react": "^16.3.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"axios": "^1.9.0",
|
||||
"react": "^19.1.0",
|
||||
"react-circular-progressbar": "^2.2.0",
|
||||
"react-dom": "^19.1.0",
|
||||
|
||||
ثنائية
public/images/createProfile/BasicInf.png
Normal file
ثنائية
public/images/createProfile/BasicInf.png
Normal file
ملف ثنائي غير معروض.
|
بعد العرض: | الارتفاع: | الحجم: 841 B |
ثنائية
public/images/createProfile/BusinessHours.png
Normal file
ثنائية
public/images/createProfile/BusinessHours.png
Normal file
ملف ثنائي غير معروض.
|
بعد العرض: | الارتفاع: | الحجم: 957 B |
ثنائية
public/images/createProfile/Confirmation.png
Normal file
ثنائية
public/images/createProfile/Confirmation.png
Normal file
ملف ثنائي غير معروض.
|
بعد العرض: | الارتفاع: | الحجم: 599 B |
ثنائية
public/images/createProfile/ContactInf.png
Normal file
ثنائية
public/images/createProfile/ContactInf.png
Normal file
ملف ثنائي غير معروض.
|
بعد العرض: | الارتفاع: | الحجم: 847 B |
ثنائية
public/images/createProfile/Equipment.png
Normal file
ثنائية
public/images/createProfile/Equipment.png
Normal file
ملف ثنائي غير معروض.
|
بعد العرض: | الارتفاع: | الحجم: 579 B |
ثنائية
public/images/createProfile/MenuUpload.png
Normal file
ثنائية
public/images/createProfile/MenuUpload.png
Normal file
ملف ثنائي غير معروض.
|
بعد العرض: | الارتفاع: | الحجم: 1.1 KiB |
ثنائية
public/images/createProfile/Successful.png
Normal file
ثنائية
public/images/createProfile/Successful.png
Normal file
ملف ثنائي غير معروض.
|
بعد العرض: | الارتفاع: | الحجم: 3.9 KiB |
ثنائية
public/images/createProfile/TypeOfRestaurant.png
Normal file
ثنائية
public/images/createProfile/TypeOfRestaurant.png
Normal file
ملف ثنائي غير معروض.
|
بعد العرض: | الارتفاع: | الحجم: 816 B |
ثنائية
public/images/createProfile/UploadPhotos.png
Normal file
ثنائية
public/images/createProfile/UploadPhotos.png
Normal file
ملف ثنائي غير معروض.
|
بعد العرض: | الارتفاع: | الحجم: 850 B |
@@ -191,6 +191,7 @@ const LoginForm = () => {
|
||||
fullWidth
|
||||
onClick={handleLogin}
|
||||
sx={{
|
||||
fontFamily: 'PlusJakartaSans' ,
|
||||
fontWeight: 600,
|
||||
fontSize: { xs: '14px', sm: '16px' },
|
||||
height: { xs: '45px', sm: '52px' },
|
||||
@@ -210,7 +211,7 @@ const LoginForm = () => {
|
||||
{/* Divider */}
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, py: 2 }}>
|
||||
<Box sx={{ flex: 1, height: '1px', backgroundColor: '#E0E0E0' }} />
|
||||
<Typography variant="body1" sx={{ fontWeight: 500, fontSize: '16px', color: 'black' }}>
|
||||
<Typography variant="body1" sx={{ fontWeight: 500, fontSize: '16px', color: 'black' , fontFamily: 'PlusJakartaSans' }}>
|
||||
Or
|
||||
</Typography>
|
||||
<Box sx={{ flex: 1, height: '1px', backgroundColor: '#E0E0E0' }} />
|
||||
@@ -233,6 +234,7 @@ const LoginForm = () => {
|
||||
borderColor: 'black',
|
||||
backgroundColor: 'transparent'
|
||||
}
|
||||
, fontFamily: 'PlusJakartaSans'
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
||||
@@ -262,6 +264,7 @@ const LoginForm = () => {
|
||||
borderColor: 'black',
|
||||
backgroundColor: 'transparent'
|
||||
}
|
||||
, fontFamily: 'PlusJakartaSans'
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
||||
|
||||
@@ -87,7 +87,7 @@ const KitchPlusAppBar = ({ onDrawerToggle, sidebarOpen, isMobile }) => {
|
||||
) : (
|
||||
<Autocomplete
|
||||
sx={{
|
||||
width: { xs: '200px', sm: '250px', md: '300px' },
|
||||
width: { xs: '200px', sm: '200px', md: '250px' },
|
||||
borderRadius: '8px',
|
||||
}}
|
||||
freeSolo
|
||||
@@ -128,7 +128,7 @@ const KitchPlusAppBar = ({ onDrawerToggle, sidebarOpen, isMobile }) => {
|
||||
display: { xs: 'none', sm: 'none', md: 'flex' }, // هذا السطر يخفي الزر عند xs و sm ويظهره من md وما فوق
|
||||
color: 'white',
|
||||
height: { xs: 32, sm: 36, md: 40 },
|
||||
mr: { xs: '6px', sm: '8px', md: '10px' },
|
||||
mr: { xs: '6px', sm: '8px', md: '0px' },
|
||||
backgroundColor: '#61677F',
|
||||
borderRadius: '8px',
|
||||
fontWeight: 600,
|
||||
@@ -147,7 +147,6 @@ const KitchPlusAppBar = ({ onDrawerToggle, sidebarOpen, isMobile }) => {
|
||||
sx={{
|
||||
height: { xs: 30, sm: 36, md: 40 },
|
||||
alignSelf: 'center',
|
||||
mx: 1 // إضافة هامش أفقي إذا لزم الأمر
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
@@ -1,34 +1,50 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Box, useTheme, useMediaQuery, Typography } from '@mui/material';
|
||||
import { Box, useTheme, useMediaQuery } from '@mui/material';
|
||||
import KitchPlusAppBar from '../AppBar';
|
||||
import Sidebar from '../SideHome';
|
||||
import LoginRestaurant from './contcet/LoginRestaurant';
|
||||
import BasicInformation from './contcet/BasicInformation';
|
||||
import ContactInformation from './contcet/ContactInformation';
|
||||
import BusinessHours from './contcet/BusinessHours';
|
||||
import UploadMenu from './contcet/UploadMenu';
|
||||
import Equipment from './contcet/Equipment';
|
||||
import TypeOfRestaurant from './contcet/TypeOfRestaurant';
|
||||
import OperationalCapacity from './contcet/OperationalCapacity';
|
||||
import UploadPhotos from './contcet/UploadPhotos';
|
||||
import SideProfile from './SideProfile';
|
||||
|
||||
const drawerWidth = 230;
|
||||
|
||||
const RestaurantProfile = () => {
|
||||
const theme = useTheme();
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
|
||||
const [hasProducts, setHasProducts] = useState(false); // حالة لتتبع وجود المنتجات
|
||||
const [hasProducts, setHasProducts] = useState(false);
|
||||
const [sidebarOpen, setSidebarOpen] = useState(!isMobile);
|
||||
|
||||
// محاكاة للتحقق من وجود المنتجات (استبدل هذا بمنطقك الفعلي)
|
||||
// ⬇️ إدارة الخطوة الحالية
|
||||
const [currentStep, setCurrentStep] = useState(0);
|
||||
|
||||
const steps = [
|
||||
<BasicInformation onNext={() => setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />,
|
||||
<ContactInformation onNext={() => setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />,
|
||||
<BusinessHours onNext={() => setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />,
|
||||
<UploadMenu onNext={() => setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />,
|
||||
<Equipment onNext={() => setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />,
|
||||
<OperationalCapacity onNext={() => setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />,
|
||||
<TypeOfRestaurant onNext={() => setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />,
|
||||
<UploadPhotos onBack={() => setCurrentStep(currentStep - 1)} />,
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
// هنا يجب استبدال هذا بمنطق فعلي للتحقق من وجود المنتجات
|
||||
// مثلاً استدعاء API أو التحقق من state
|
||||
const checkProducts = async () => {
|
||||
// محاكاة لاستدعاء API
|
||||
const productsExist = await checkIfProductsExist(); // استبدل هذه الدالة بمنطقك الفعلي
|
||||
const productsExist = await checkIfProductsExist();
|
||||
setHasProducts(productsExist);
|
||||
};
|
||||
|
||||
checkProducts();
|
||||
}, []);
|
||||
|
||||
// دالة مساعدة لمحاكاة التحقق من المنتجات (استبدلها بمنطقك الفعلي)
|
||||
const checkIfProductsExist = async () => {
|
||||
// محاكاة - يمكن أن يكون هذا استدعاء لـ API أو تحقق من state
|
||||
// return true;
|
||||
return false; // غير هذه القيمة حسب منطقك
|
||||
return false;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
@@ -50,7 +66,6 @@ const RestaurantProfile = () => {
|
||||
|
||||
handleResize();
|
||||
window.addEventListener('resize', handleResize);
|
||||
|
||||
return () => window.removeEventListener('resize', handleResize);
|
||||
}, [theme.breakpoints.values.md]);
|
||||
|
||||
@@ -76,16 +91,8 @@ const RestaurantProfile = () => {
|
||||
flexGrow: 1,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
width: {
|
||||
xs: '100%',
|
||||
sm: '100%',
|
||||
md: '100%'
|
||||
},
|
||||
marginLeft: {
|
||||
xs: 0,
|
||||
sm: sidebarOpen ? `${drawerWidth}px` : 0,
|
||||
md: 0
|
||||
},
|
||||
width: { xs: '100%', sm: '100%', md: '100%' },
|
||||
marginLeft: { xs: 0, sm: sidebarOpen ? `${drawerWidth}px` : 0, md: 0 },
|
||||
transition: theme.transitions.create(['width'], {
|
||||
easing: theme.transitions.easing.sharp,
|
||||
duration: theme.transitions.duration.leavingScreen,
|
||||
@@ -96,10 +103,65 @@ const RestaurantProfile = () => {
|
||||
sidebarOpen={sidebarOpen}
|
||||
isMobile={isMobile}
|
||||
/>
|
||||
<Typography>RestaurantProfile</Typography>
|
||||
<Box>
|
||||
<Box sx={{
|
||||
display: 'flex', height: '100vh',
|
||||
|
||||
}}>
|
||||
<Box sx={{
|
||||
height: '100vh',
|
||||
ml: 3,
|
||||
mb: 2,
|
||||
width: { md: '30%' },
|
||||
display: { xs: 'none', sm: 'none', md: 'block' },
|
||||
overflowY: 'auto',
|
||||
scrollbarWidth: 'none',
|
||||
'&::-webkit-scrollbar': {
|
||||
display: 'none',
|
||||
},
|
||||
}}>
|
||||
|
||||
<Box sx={{
|
||||
minHeight: '100%', pb: 15, pt: 3,
|
||||
|
||||
}}>
|
||||
<SideProfile
|
||||
currentStepIndex={currentStep}
|
||||
onBack={() => setCurrentStep(prev => Math.max(prev - 1, 0))}
|
||||
/>
|
||||
|
||||
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box sx={{
|
||||
ml: { xs: 2, md: 3 },
|
||||
|
||||
flexGrow: 1,
|
||||
height: '100vh',
|
||||
pr: { sm: 2, md: 1 },
|
||||
|
||||
pt: 3,
|
||||
mb: { sm: 20 },
|
||||
width: { md: '60%' }, display: { xs: 'block', sm: 'block', md: 'block' },
|
||||
overflowY: 'auto',
|
||||
scrollbarWidth: 'none',
|
||||
'&::-webkit-scrollbar': {
|
||||
display: 'none',
|
||||
},
|
||||
}}>
|
||||
<Box sx={{
|
||||
minHeight: '100%', pb: 18,
|
||||
|
||||
}}>
|
||||
{steps[currentStep]}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default RestaurantProfile;
|
||||
export default RestaurantProfile;
|
||||
|
||||
163
src/components/Home/RestaurantProfile/SideProfile.js
Normal file
163
src/components/Home/RestaurantProfile/SideProfile.js
Normal file
@@ -0,0 +1,163 @@
|
||||
import React from 'react';
|
||||
import { Box, Typography, Stack, Button, useTheme } from '@mui/material';
|
||||
import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
|
||||
|
||||
const steps = [
|
||||
{ title: 'Basic Information', icon: '/images/createProfile/BasicInf.png' },
|
||||
{ title: 'Contact Information', icon: '/images/createProfile/ContactInf.png' },
|
||||
{ title: 'Business Hours', icon: '/images/createProfile/BusinessHours.png' },
|
||||
{ title: 'Menu Upload', icon: '/images/createProfile/MenuUpload.png' },
|
||||
{ title: 'Available Equipment', icon: '/images/createProfile/equipment.png' },
|
||||
{ title: 'Operational Capacity', icon: '/images/icons/rocket.png' },
|
||||
{ title: 'Type of Restaurant', icon: '/images/createProfile/TypeOfRestaurant.png' },
|
||||
{ title: 'Upload Photos', icon: '/images/createProfile/UploadPhotos.png' },
|
||||
{ title: 'Submit & Confirmation', icon: '/images/createProfile/Confirmation.png' },
|
||||
];
|
||||
|
||||
const SideProfile = ({ currentStepIndex = 0, onBack }) => {
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
height: '100%',
|
||||
backgroundColor: '#FFFFFF',
|
||||
px: 3,
|
||||
py: 4,
|
||||
display: { xs: 'none', md: 'block' },
|
||||
borderRadius: 2,
|
||||
boxShadow: '0px 1px 4px rgba(0,0,0,0.05)',
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
{/* العنوان الرئيسي */}
|
||||
<Typography fontSize="18px" fontWeight={600} mb={1.2}>
|
||||
Restaurant Registration Flow
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary" mb={3}>
|
||||
Complete this process to register your restaurant on our amazing food platform.
|
||||
</Typography>
|
||||
|
||||
{/* الخطوات */}
|
||||
<Stack spacing={3} sx={{ ml: 1, position: 'relative', pb: 12 }}>
|
||||
{steps.map((step, index) => (
|
||||
<Box key={index} position="relative">
|
||||
{/* الخط الرأسي بين الدوائر */}
|
||||
{index !== steps.length - 1 && (
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
top: '28px',
|
||||
left: '23px',
|
||||
width: '2px',
|
||||
height: 'calc(100% - 5px)',
|
||||
backgroundColor: '#E0E0E0',
|
||||
zIndex: 0,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* محتوى كل خطوة */}
|
||||
<Box display="flex" alignItems="center" gap={2}>
|
||||
{/* الدائرة بالأيقونة */}
|
||||
<Box
|
||||
sx={{
|
||||
position: 'relative',
|
||||
width: 45,
|
||||
height: 45,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
zIndex: 1,
|
||||
}}
|
||||
>
|
||||
{/* الدائرة الخلفية - تظهر دائمًا */}
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
backgroundImage:
|
||||
index <= currentStepIndex
|
||||
? 'linear-gradient(0deg, #FF914D, #F3F3F3)'
|
||||
: 'linear-gradient(0deg, #DFDFDF, #F0F0F0)',
|
||||
width: 48,
|
||||
height: 48,
|
||||
borderRadius: '50%',
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
zIndex: 0,
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* الدائرة الأمامية بالأيقونة */}
|
||||
<Box
|
||||
sx={{
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: '50%',
|
||||
backgroundColor: '#FFF',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
zIndex: 1,
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={step.icon}
|
||||
alt={step.title}
|
||||
style={{
|
||||
width: 20,
|
||||
height: 20,
|
||||
marginLeft: step.title === 'Available Equipment' ? 7 : 0,
|
||||
objectFit: 'contain',
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* العنوان */}
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: '16px',
|
||||
fontWeight: 600,
|
||||
color: '#000',
|
||||
}}
|
||||
>
|
||||
{step.title}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
))}
|
||||
</Stack>
|
||||
|
||||
{/* زر الرجوع */}
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
bottom: 16,
|
||||
right: 24,
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
variant="text"
|
||||
startIcon={<ArrowBackIosIcon sx={{ fontSize: 20 }} />}
|
||||
onClick={onBack}
|
||||
disabled={currentStepIndex === 0}
|
||||
sx={{
|
||||
textTransform: 'none',
|
||||
fontSize: '20px',
|
||||
color: currentStepIndex === 0 ? '#C2C2C2' : '#6B7283',
|
||||
'&:hover': {
|
||||
backgroundColor: 'transparent',
|
||||
color: theme.palette.primary.main,
|
||||
},
|
||||
}}
|
||||
>
|
||||
Back
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default SideProfile;
|
||||
@@ -0,0 +1,136 @@
|
||||
import React from 'react';
|
||||
import { Box, Typography, Stack, Button, useTheme, TextField } from '@mui/material';
|
||||
|
||||
const BasicInformation = ({ currentStepIndex = 0, onNext, onBack }) => {
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
height: { xs: '90%', sm: '100%', md: 740 },
|
||||
backgroundColor: '#FFFFFF',
|
||||
px: 4,
|
||||
pt: 4.5,
|
||||
pb: 10,
|
||||
display: 'block',
|
||||
borderRadius: 2,
|
||||
boxShadow: '0px 1px 4px rgba(0,0,0,0.05)',
|
||||
position: 'relative',
|
||||
width: { xs: '80%', sm: '90%' },
|
||||
}}
|
||||
>
|
||||
<Stack spacing={2.5}>
|
||||
<Typography
|
||||
fontWeight={700}
|
||||
sx={{
|
||||
fontSize: {
|
||||
xs: '1.8rem',
|
||||
sm: '2rem',
|
||||
md: '2.2rem'
|
||||
}
|
||||
}}
|
||||
>
|
||||
Basic Information
|
||||
</Typography>
|
||||
<Box sx={{ width: '70%' }}>
|
||||
<Typography
|
||||
fontSize="16px"
|
||||
color="text.secondary"
|
||||
fontWeight={500}
|
||||
sx={{ pb: 1 }}
|
||||
>
|
||||
Enter your basic information to proceed to registration of your own restaurant on this platform
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Inputs (Restaurant Name, Type, Address, City, Postal Code) */}
|
||||
{[
|
||||
{ label: 'Restaurant Name', placeholder: 'Al-Baik Foods' },
|
||||
{ label: 'Restaurant Type', placeholder: 'Fast Food' },
|
||||
{ label: 'Address', placeholder: 'Ward # 13' },
|
||||
{ label: 'City', placeholder: 'Jordan' },
|
||||
{ label: 'Postal Code', placeholder: '31200' },
|
||||
].map((field, index) => (
|
||||
<Box key={index} sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||
<Typography variant="body2" color="black" sx={{ fontWeight: '500', fontSize: '16px' }}>
|
||||
{field.label}
|
||||
</Typography>
|
||||
<TextField
|
||||
placeholder={field.placeholder}
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
sx={{
|
||||
'& input': { fontWeight: 500, fontSize: '15px' },
|
||||
'& input::placeholder': { color: '#969BA7' },
|
||||
'& .MuiOutlinedInput-root': {
|
||||
borderRadius: '10px',
|
||||
transition: '0.3s',
|
||||
'&.Mui-focused fieldset': {
|
||||
borderColor: theme.palette.primary.main,
|
||||
boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)'
|
||||
}
|
||||
},
|
||||
'& .MuiOutlinedInput-root.Mui-focused': {
|
||||
borderColor: '#3f51b5',
|
||||
boxShadow: '0 0 0 2px rgba(63,81,181,0.1)'
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
))}
|
||||
|
||||
|
||||
<Box sx={{ pt: 2 }}>
|
||||
<Button
|
||||
variant="contained"
|
||||
fullWidth
|
||||
onClick={onNext}
|
||||
sx={{
|
||||
fontFamily: 'PlusJakartaSans',
|
||||
fontWeight: 600,
|
||||
fontSize: { xs: '14px', sm: '16px' },
|
||||
height: { xs: '45px', sm: '52px' },
|
||||
borderRadius: '50px',
|
||||
textTransform: 'none',
|
||||
color: 'white',
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
'&:hover': {
|
||||
backgroundColor: theme.palette.primary.hover,
|
||||
},
|
||||
}}
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
|
||||
{/* زر Back تحت زر Next */}
|
||||
<Button
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
onClick={onBack}
|
||||
sx={{
|
||||
mt: 2,
|
||||
fontFamily: 'PlusJakartaSans',
|
||||
fontWeight: 600,
|
||||
fontSize: { xs: '14px', sm: '16px' },
|
||||
height: { xs: '45px', sm: '52px' },
|
||||
borderRadius: '50px',
|
||||
textTransform: 'none',
|
||||
display: { xs: 'block', sm: 'block', md: 'none' }, // يظهر فقط في xs و sm
|
||||
borderColor: theme.palette.primary.main,
|
||||
color: theme.palette.primary.main,
|
||||
'&:hover': {
|
||||
backgroundColor: theme.palette.primary.light,
|
||||
borderColor: theme.palette.primary.main,
|
||||
},
|
||||
}}
|
||||
>
|
||||
Back
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default BasicInformation;
|
||||
207
src/components/Home/RestaurantProfile/contcet/BusinessHours.js
Normal file
207
src/components/Home/RestaurantProfile/contcet/BusinessHours.js
Normal file
@@ -0,0 +1,207 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Typography,
|
||||
Stack,
|
||||
Button,
|
||||
useTheme,
|
||||
TextField,
|
||||
Checkbox,
|
||||
FormGroup,
|
||||
FormControlLabel
|
||||
} from '@mui/material';
|
||||
|
||||
const BusinessHours = ({ currentStepIndex = 0, onNext, onBack }) => {
|
||||
const theme = useTheme();
|
||||
|
||||
const [selectedDays, setSelectedDays] = useState([]);
|
||||
|
||||
const handleCheckboxChange = (day) => {
|
||||
setSelectedDays((prev) =>
|
||||
prev.includes(day)
|
||||
? prev.filter((d) => d !== day)
|
||||
: [...prev, day]
|
||||
);
|
||||
};
|
||||
|
||||
const days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
height: { xs: '90%', sm: '100%', md: 740 },
|
||||
backgroundColor: '#FFFFFF',
|
||||
px: 4,
|
||||
pt: 4.5,
|
||||
pb: 10,
|
||||
display: 'block',
|
||||
borderRadius: 2,
|
||||
boxShadow: '0px 1px 4px rgba(0,0,0,0.05)',
|
||||
position: 'relative',
|
||||
width: { xs: '80%', sm: '90%' },
|
||||
}}
|
||||
>
|
||||
<Stack spacing={2.5}>
|
||||
<Typography
|
||||
fontWeight={700}
|
||||
sx={{
|
||||
fontSize: {
|
||||
xs: '1.8rem',
|
||||
sm: '2rem',
|
||||
md: '2.2rem'
|
||||
}
|
||||
}}
|
||||
>
|
||||
Business Hours
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ width: '70%' }}>
|
||||
<Typography
|
||||
fontSize="16px"
|
||||
color="text.secondary"
|
||||
fontWeight={500}
|
||||
sx={{ pb: 1 }}
|
||||
>
|
||||
Enter your business hours to proceed to registration of your own restaurant on this platform
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Operational Hours Input */}
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||
<Typography variant="body2" color="black" sx={{ fontWeight: '500', fontSize: '16px' }}>
|
||||
Operational Hours
|
||||
</Typography>
|
||||
<TextField
|
||||
placeholder="16 hours"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
sx={{
|
||||
'& input': { fontWeight: 500, fontSize: '15px' },
|
||||
'& input::placeholder': { color: '#969BA7' },
|
||||
'& .MuiOutlinedInput-root': {
|
||||
borderRadius: '10px',
|
||||
transition: '0.3s',
|
||||
'&.Mui-focused fieldset': {
|
||||
borderColor: theme.palette.primary.main,
|
||||
boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)'
|
||||
}
|
||||
},
|
||||
'& .MuiOutlinedInput-root.Mui-focused': {
|
||||
borderColor: '#3f51b5',
|
||||
boxShadow: '0 0 0 2px rgba(63,81,181,0.1)'
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Checkboxes for Days of the Week */}
|
||||
<Box sx={{ mt: 2 }}>
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="black"
|
||||
sx={{ fontWeight: '500', fontSize: '16px', mb: 1 }}
|
||||
>
|
||||
Closed Days
|
||||
</Typography>
|
||||
<FormGroup
|
||||
row
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
gap: 1,
|
||||
}}
|
||||
>
|
||||
{days.map((day) => {
|
||||
const isChecked = selectedDays.includes(day);
|
||||
return (
|
||||
<FormControlLabel
|
||||
key={day}
|
||||
control={
|
||||
<Checkbox
|
||||
checked={isChecked}
|
||||
onChange={() => handleCheckboxChange(day)}
|
||||
sx={{
|
||||
transform: 'scale(1.5)',
|
||||
color: '#F0EDED',
|
||||
'&.Mui-checked': {
|
||||
color: '#FF914D',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
}
|
||||
label={
|
||||
<Typography
|
||||
sx={{
|
||||
color: isChecked ? '#e57f3f' : '#969BA7',
|
||||
fontWeight: 500
|
||||
}}
|
||||
>
|
||||
{day}
|
||||
</Typography>
|
||||
}
|
||||
sx={{
|
||||
m: 0,
|
||||
width: { xs: '45%', sm: '30%', md: '22%' },
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</FormGroup>
|
||||
</Box>
|
||||
|
||||
{/* Next Button */}
|
||||
|
||||
<Box sx={{ pt: 2 }}>
|
||||
<Button
|
||||
variant="contained"
|
||||
fullWidth
|
||||
onClick={onNext}
|
||||
sx={{
|
||||
fontFamily: 'PlusJakartaSans',
|
||||
fontWeight: 600,
|
||||
fontSize: { xs: '14px', sm: '16px' },
|
||||
height: { xs: '45px', sm: '52px' },
|
||||
borderRadius: '50px',
|
||||
textTransform: 'none',
|
||||
color: 'white',
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
'&:hover': {
|
||||
backgroundColor: theme.palette.primary.hover,
|
||||
},
|
||||
}}
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
|
||||
{/* زر Back تحت زر Next */}
|
||||
<Button
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
onClick={onBack}
|
||||
sx={{
|
||||
mt: 2,
|
||||
fontFamily: 'PlusJakartaSans',
|
||||
fontWeight: 600,
|
||||
fontSize: { xs: '14px', sm: '16px' },
|
||||
height: { xs: '45px', sm: '52px' },
|
||||
borderRadius: '50px',
|
||||
textTransform: 'none',
|
||||
display: { xs: 'block', sm: 'block', md: 'none' }, // يظهر فقط في xs و sm
|
||||
borderColor: theme.palette.primary.main,
|
||||
color: theme.palette.primary.main,
|
||||
'&:hover': {
|
||||
backgroundColor: theme.palette.primary.light,
|
||||
borderColor: theme.palette.primary.main,
|
||||
},
|
||||
}}
|
||||
>
|
||||
Back
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default BusinessHours;
|
||||
@@ -0,0 +1,180 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
DialogContent,
|
||||
DialogContentText,
|
||||
DialogActions,
|
||||
Button,
|
||||
Box,
|
||||
Typography,
|
||||
useTheme,
|
||||
Divider
|
||||
} from '@mui/material';
|
||||
import EditIcon from '@mui/icons-material/Edit';
|
||||
const ConfirmationDialog = ({ open, onClose, onConfirm }) => {
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<Dialog
|
||||
open={open}
|
||||
onClose={onClose}
|
||||
maxWidth="sm"
|
||||
|
||||
fullWidth
|
||||
PaperProps={{
|
||||
sx: {
|
||||
width: '525px',
|
||||
height: '358px',
|
||||
maxWidth: '100%',
|
||||
maxHeight: '100%',
|
||||
borderRadius: '12px',
|
||||
overflow: 'hidden'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Box sx={{
|
||||
|
||||
p: 3,
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'space-between',
|
||||
}}>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: 2,
|
||||
mb: 3,
|
||||
ml:-5,
|
||||
}}
|
||||
>
|
||||
{/* الدوائر */}
|
||||
<Box sx={{
|
||||
position: 'relative',
|
||||
width: 100,
|
||||
height: 100,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}>
|
||||
{/* الدائرة الخلفية */}
|
||||
<Box sx={{
|
||||
position: 'absolute',
|
||||
backgroundColor: '#F5F8FF',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
borderRadius: '50%',
|
||||
zIndex: 0,
|
||||
}} />
|
||||
|
||||
{/* الدائرة الأمامية مع الأيقونة */}
|
||||
<Box sx={{
|
||||
width: 80,
|
||||
height: 80,
|
||||
borderRadius: '50%',
|
||||
backgroundColor: '#E9EFFF',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
zIndex: 1,
|
||||
}}>
|
||||
<img
|
||||
src='/images/createProfile/Successful.png'
|
||||
style={{
|
||||
width: 40,
|
||||
height: 40,
|
||||
objectFit: 'contain',
|
||||
}}
|
||||
alt="Success icon"
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* العنوان بجانب الدائرة */}
|
||||
<DialogTitle sx={{ p: 0 }}>
|
||||
<Typography
|
||||
variant="h4"
|
||||
component="div"
|
||||
sx={{
|
||||
fontWeight: 600,
|
||||
fontSize: '28px',
|
||||
lineHeight: '1.2'
|
||||
}}
|
||||
>
|
||||
Register successful!
|
||||
</Typography>
|
||||
</DialogTitle>
|
||||
</Box>
|
||||
<DialogContent sx={{ p: 0 }}>
|
||||
<DialogContentText sx={{
|
||||
textAlign: 'center',
|
||||
mb: 0,
|
||||
fontSize: '16px',
|
||||
fontWeight: 500,
|
||||
color: theme.palette.text.secondary
|
||||
}}>
|
||||
Congratulations! you have registered your restaurant successfully on our platform
|
||||
</DialogContentText>
|
||||
</DialogContent>
|
||||
|
||||
<DialogActions
|
||||
sx={{
|
||||
p: 0,
|
||||
px: 3,
|
||||
pt: 2,
|
||||
flexDirection: 'column',
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
{/* الزر الأول - Filled */}
|
||||
<Button
|
||||
variant="contained"
|
||||
fullWidth
|
||||
onClick={onClose}
|
||||
sx={{
|
||||
fontWeight: 600,
|
||||
fontSize: '16px',
|
||||
height: '48px',
|
||||
borderRadius: '50px',
|
||||
textTransform: 'none',
|
||||
color: 'white',
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
'&:hover': {
|
||||
backgroundColor: theme.palette.primary.dark,
|
||||
},
|
||||
}}
|
||||
>
|
||||
View Profile
|
||||
</Button>
|
||||
|
||||
{/* الزر الثاني - Outlined + أيقونة Edit */}
|
||||
<Button
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
onClick={onClose}
|
||||
startIcon={<EditIcon sx={{ color: '#00081D' }} />}
|
||||
sx={{
|
||||
fontWeight: 600,
|
||||
fontSize: '16px',
|
||||
height: '48px',
|
||||
borderRadius: '50px',
|
||||
textTransform: 'none',
|
||||
borderColor: '#E6E7EA',
|
||||
color: '#00081D',
|
||||
'&:hover': {
|
||||
backgroundColor: '#FAFAFA',
|
||||
borderColor: '#E6E7EA',
|
||||
},
|
||||
}}
|
||||
>
|
||||
Edit Profile
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Box>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default ConfirmationDialog;
|
||||
@@ -0,0 +1,163 @@
|
||||
import React from 'react';
|
||||
import { Box, Typography, Stack, Button, useTheme, TextField } from '@mui/material';
|
||||
|
||||
const ContactInformation = ({ currentStepIndex = 0, onNext, onBack }) => {
|
||||
const theme = useTheme();
|
||||
|
||||
const handleNext = () => {
|
||||
if (onNext) {
|
||||
onNext();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
height: { xs: '90%', sm: '100%', md: 740 },
|
||||
backgroundColor: '#FFFFFF',
|
||||
px: 4,
|
||||
pt: { xs: 6, md: 14.5 },
|
||||
pb: { xs: 20, sm: 20, md: 0 },
|
||||
display: 'block',
|
||||
borderRadius: 2,
|
||||
boxShadow: '0px 1px 4px rgba(0,0,0,0.05)',
|
||||
position: 'relative',
|
||||
width: { xs: '80%', sm: '90%' },
|
||||
}}
|
||||
>
|
||||
<Stack spacing={2.5}>
|
||||
<Typography
|
||||
fontWeight={700}
|
||||
sx={{
|
||||
fontSize: {
|
||||
xs: '1.8rem',
|
||||
sm: '2rem',
|
||||
md: '2.2rem'
|
||||
}
|
||||
}}
|
||||
>
|
||||
Contact Information
|
||||
</Typography>
|
||||
<Box sx={{ width: '70%' }}>
|
||||
<Typography
|
||||
fontSize="16px"
|
||||
color="text.secondary"
|
||||
fontWeight={500}
|
||||
sx={{ pb: 1 }}
|
||||
>
|
||||
Enter your contact information to proceed to registration of your own restaurant on this platform
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Phone Number Input */}
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||
<Typography variant="body2" color="black" sx={{ fontWeight: '500', fontSize: '16px' }}>
|
||||
Phone Number
|
||||
</Typography>
|
||||
<TextField
|
||||
placeholder="03055376864"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
sx={{
|
||||
'& input': { fontWeight: 500, fontSize: '15px' },
|
||||
'& input::placeholder': { color: '#969BA7' },
|
||||
'& .MuiOutlinedInput-root': {
|
||||
borderRadius: '10px',
|
||||
transition: '0.3s',
|
||||
'&.Mui-focused fieldset': {
|
||||
borderColor: theme.palette.primary.main,
|
||||
boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)'
|
||||
}
|
||||
},
|
||||
'& .MuiOutlinedInput-root.Mui-focused': {
|
||||
borderColor: '#3f51b5',
|
||||
boxShadow: '0 0 0 2px rgba(63,81,181,0.1)'
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Email Input */}
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||
<Typography variant="body2" color="black" sx={{ fontWeight: '500', fontSize: '16px' }}>
|
||||
Email
|
||||
</Typography>
|
||||
<TextField
|
||||
placeholder="example@example.com"
|
||||
type="email"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
sx={{
|
||||
'& input': { fontWeight: 500, fontSize: '15px' },
|
||||
'& input::placeholder': { color: '#969BA7' },
|
||||
'& .MuiOutlinedInput-root': {
|
||||
borderRadius: '10px',
|
||||
transition: '0.3s',
|
||||
'&.Mui-focused fieldset': {
|
||||
borderColor: theme.palette.primary.main,
|
||||
boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)'
|
||||
}
|
||||
},
|
||||
'& .MuiOutlinedInput-root.Mui-focused': {
|
||||
borderColor: '#3f51b5',
|
||||
boxShadow: '0 0 0 2px rgba(63,81,181,0.1)'
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
{/* Next Button */}
|
||||
|
||||
<Box sx={{ pt: 2 }}>
|
||||
<Button
|
||||
variant="contained"
|
||||
fullWidth
|
||||
onClick={onNext}
|
||||
sx={{
|
||||
fontFamily: 'PlusJakartaSans',
|
||||
fontWeight: 600,
|
||||
fontSize: { xs: '14px', sm: '16px' },
|
||||
height: { xs: '45px', sm: '52px' },
|
||||
borderRadius: '50px',
|
||||
textTransform: 'none',
|
||||
color: 'white',
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
'&:hover': {
|
||||
backgroundColor: theme.palette.primary.hover,
|
||||
},
|
||||
}}
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
|
||||
{/* زر Back تحت زر Next */}
|
||||
<Button
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
onClick={onBack}
|
||||
sx={{
|
||||
mt: 2,
|
||||
fontFamily: 'PlusJakartaSans',
|
||||
fontWeight: 600,
|
||||
fontSize: { xs: '14px', sm: '16px' },
|
||||
height: { xs: '45px', sm: '52px' },
|
||||
borderRadius: '50px',
|
||||
textTransform: 'none',
|
||||
display: { xs: 'block', sm: 'block', md: 'none' }, // يظهر فقط في xs و sm
|
||||
borderColor: theme.palette.primary.main,
|
||||
color: theme.palette.primary.main,
|
||||
'&:hover': {
|
||||
backgroundColor: theme.palette.primary.light,
|
||||
borderColor: theme.palette.primary.main,
|
||||
},
|
||||
}}
|
||||
>
|
||||
Back
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default ContactInformation;
|
||||
163
src/components/Home/RestaurantProfile/contcet/Equipment.js
Normal file
163
src/components/Home/RestaurantProfile/contcet/Equipment.js
Normal file
@@ -0,0 +1,163 @@
|
||||
import React from 'react';
|
||||
import { Box, Typography, Stack, Button, useTheme, TextField } from '@mui/material';
|
||||
import AddIcon from '@mui/icons-material/Add';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
const Equipment = ({ currentStepIndex = 0, onNext, onBack }) => {
|
||||
const theme = useTheme();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleNext = () => {
|
||||
if (onNext) onNext();
|
||||
else navigate('/dashboard');
|
||||
};
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
height: { xs: '90%', sm: '100%', md: 740 },
|
||||
backgroundColor: '#FFFFFF',
|
||||
px: 4,
|
||||
pt: { xs: 6, md: 12 },
|
||||
pb: { xs: 20, sm: 12, md: 3 },
|
||||
display: 'block',
|
||||
borderRadius: 2,
|
||||
boxShadow: '0px 1px 4px rgba(0,0,0,0.05)',
|
||||
width: { xs: '80%', sm: '90%' },
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
<Stack spacing={2.5}>
|
||||
<Typography fontWeight={700} sx={{ fontSize: { xs: '1.8rem', sm: '2rem', md: '2.2rem' } }}>
|
||||
Equipment
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ width: '70%' }}>
|
||||
<Typography
|
||||
fontSize="16px"
|
||||
color="text.secondary"
|
||||
fontWeight={500}
|
||||
sx={{ pb: 1 }}
|
||||
>
|
||||
Enter your kitchen equipment details to complete your restaurant registration.
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Oven Input */}
|
||||
<InputField label="Oven" placeholder="5" theme={theme} />
|
||||
|
||||
{/* Grill Input */}
|
||||
<InputField label="Grill" placeholder="20" theme={theme} />
|
||||
|
||||
{/* Refrigerators Input */}
|
||||
<InputField label="Refrigerators" placeholder="200" theme={theme} />
|
||||
|
||||
{/* Add More Equipment Button */}
|
||||
<Box>
|
||||
<Button
|
||||
variant="text"
|
||||
fullWidth
|
||||
startIcon={<AddIcon />}
|
||||
sx={{
|
||||
fontWeight: 600,
|
||||
fontSize: { xs: '14px', sm: '16px' },
|
||||
height: { xs: '45px', sm: '52px' },
|
||||
borderRadius: '50px',
|
||||
textTransform: 'none',
|
||||
color: theme.palette.primary.main,
|
||||
'&:hover': {
|
||||
backgroundColor: 'transparent',
|
||||
}
|
||||
}}
|
||||
onClick={() => console.log('Add More Equipment')}
|
||||
>
|
||||
Add More
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
{/* Next Button */}
|
||||
|
||||
<Box sx={{ pt: 2 }}>
|
||||
<Button
|
||||
variant="contained"
|
||||
fullWidth
|
||||
onClick={onNext}
|
||||
sx={{
|
||||
fontFamily: 'PlusJakartaSans',
|
||||
fontWeight: 600,
|
||||
fontSize: { xs: '14px', sm: '16px' },
|
||||
height: { xs: '45px', sm: '52px' },
|
||||
borderRadius: '50px',
|
||||
textTransform: 'none',
|
||||
color: 'white',
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
'&:hover': {
|
||||
backgroundColor: theme.palette.primary.hover,
|
||||
},
|
||||
}}
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
|
||||
{/* زر Back تحت زر Next */}
|
||||
<Button
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
onClick={onBack}
|
||||
sx={{
|
||||
mt: 2,
|
||||
fontFamily: 'PlusJakartaSans',
|
||||
fontWeight: 600,
|
||||
fontSize: { xs: '14px', sm: '16px' },
|
||||
height: { xs: '45px', sm: '52px' },
|
||||
borderRadius: '50px',
|
||||
textTransform: 'none',
|
||||
display: { xs: 'block', sm: 'block', md: 'none' }, // يظهر فقط في xs و sm
|
||||
borderColor: theme.palette.primary.main,
|
||||
color: theme.palette.primary.main,
|
||||
'&:hover': {
|
||||
backgroundColor: theme.palette.primary.light,
|
||||
borderColor: theme.palette.primary.main,
|
||||
},
|
||||
}}
|
||||
>
|
||||
Back
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
// مكون فرعي لتقليل التكرار في الحقول
|
||||
const InputField = ({ label, placeholder, theme }) => (
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||
<Typography variant="body2" sx={{ fontWeight: 500, fontSize: '16px', color: 'black' }}>
|
||||
{label}
|
||||
</Typography>
|
||||
<TextField
|
||||
placeholder={placeholder}
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
sx={{
|
||||
'& input': { fontWeight: 500, fontSize: '15px' },
|
||||
'& input::placeholder': { color: '#969BA7' },
|
||||
'& .MuiOutlinedInput-root': {
|
||||
borderRadius: '10px',
|
||||
transition: '0.3s',
|
||||
'&.Mui-focused fieldset': {
|
||||
borderColor: theme.palette.primary.main,
|
||||
boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)',
|
||||
}
|
||||
},
|
||||
'& .MuiOutlinedInput-root.Mui-focused': {
|
||||
borderColor: theme.palette.primary.main,
|
||||
boxShadow: '0 0 0 2px rgba(255,145,77,0.1)',
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
|
||||
export default Equipment;
|
||||
261
src/components/Home/RestaurantProfile/contcet/LoginRestaurant.js
Normal file
261
src/components/Home/RestaurantProfile/contcet/LoginRestaurant.js
Normal file
@@ -0,0 +1,261 @@
|
||||
import React, { useState } from 'react';
|
||||
import { TextField, Button, Typography, Stack, Box, IconButton, InputAdornment } from '@mui/material';
|
||||
import { useTheme } from '@mui/material/styles';
|
||||
import VisibilityOffOutlinedIcon from '@mui/icons-material/VisibilityOffOutlined';
|
||||
import { VisibilityOutlined } from '@mui/icons-material';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
|
||||
const LoginForm = () => {
|
||||
|
||||
const navigate = useNavigate();
|
||||
const theme = useTheme();
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
|
||||
const handleTogglePassword = () => {
|
||||
setShowPassword((prev) => !prev);
|
||||
};
|
||||
const handleLogin = () => {
|
||||
// بعد تنفيذ عملية تسجيل الدخول بنجاح، يتم التوجيه
|
||||
navigate('/dashboard');
|
||||
};
|
||||
return (
|
||||
|
||||
|
||||
<Box
|
||||
|
||||
display="flex"
|
||||
sx={{
|
||||
width: '140%',
|
||||
height: '90vh',
|
||||
|
||||
}}
|
||||
>
|
||||
|
||||
{/* Login Content */}
|
||||
<Box
|
||||
sx={{
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
flex={1}
|
||||
paddingTop={4}
|
||||
paddingBottom={4}
|
||||
paddingLeft={0}
|
||||
paddingRight={0}
|
||||
sx={{
|
||||
// backgroundColor: '#FFFFFF',
|
||||
minHeight: '10vh',
|
||||
justifyContent: 'center',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
position: 'sticky',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
backgroundColor: '#FFFFFF',
|
||||
width: '100%',
|
||||
maxWidth: 500,
|
||||
paddingTop: 8, // زيادة المسافة من الأعلى داخل الكرت
|
||||
paddingX: 10, // الجوانب
|
||||
paddingBottom: 8, // الأسفل
|
||||
borderRadius: '16px',
|
||||
// boxShadow: '0px 4px 20px rgba(0,0,0,0.1)',
|
||||
}}
|
||||
>
|
||||
|
||||
<Stack spacing={1.5}>
|
||||
|
||||
<Typography
|
||||
variant="h4"
|
||||
fontWeight={700}
|
||||
sx={{
|
||||
fontSize: {
|
||||
xs: '1.8rem',
|
||||
sm: '2rem',
|
||||
md: '2.2rem'
|
||||
}
|
||||
}}
|
||||
>
|
||||
Login
|
||||
</Typography>
|
||||
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="text.secondary"
|
||||
fontWeight={500}
|
||||
sx={{ pb: 1 }}
|
||||
>
|
||||
Enter your username and password to access your account securely. Welcome back to our service!
|
||||
</Typography>
|
||||
|
||||
{/* Email Input */}
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||
<Typography variant="body2" color="black" sx={{ fontWeight: '500', fontSize: '16px' }}>
|
||||
Email
|
||||
</Typography>
|
||||
<TextField
|
||||
placeholder="Enter your email"
|
||||
type="email"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
sx={{
|
||||
'& input': { fontWeight: 500, fontSize: '15px' },
|
||||
'& input::placeholder': { color: '#969BA7' },
|
||||
'& .MuiOutlinedInput-root': {
|
||||
borderRadius: '10px',
|
||||
transition: '0.3s',
|
||||
'&.Mui-focused fieldset': { // أضف هذا الجزء لتغيير لون الحدود عند التركيز
|
||||
borderColor: theme.palette.primary.main,
|
||||
boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)' // ظل برتقالي خفيف
|
||||
}
|
||||
},
|
||||
'& .MuiOutlinedInput-root.Mui-focused': {
|
||||
borderColor: '#3f51b5',
|
||||
boxShadow: '0 0 0 2px rgba(63,81,181,0.1)'
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Password Input */}
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||
<Typography variant="body2" color="black" sx={{ fontWeight: '500', fontSize: '16px' }}>
|
||||
Password
|
||||
</Typography>
|
||||
<TextField
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
placeholder="Enter your password"
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
autoComplete="new-password"
|
||||
sx={{
|
||||
'& input': { fontWeight: 500, fontSize: '15px' },
|
||||
'& input::placeholder': { color: '#969BA7' },
|
||||
'& .MuiOutlinedInput-root': {
|
||||
borderRadius: '10px',
|
||||
transition: '0.3s',
|
||||
'&.Mui-focused fieldset': { // أضف هذا الجزء لتغيير لون الحدود عند التركيز
|
||||
borderColor: theme.palette.primary.main,
|
||||
boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)' // ظل برتقالي خفيف
|
||||
}
|
||||
},
|
||||
'& .MuiOutlinedInput-root.Mui-focused': {
|
||||
borderColor: '#3f51b5',
|
||||
boxShadow: '0 0 0 2px rgba(63,81,181,0.1)'
|
||||
},
|
||||
'& input::-ms-reveal, & input::-ms-clear': {
|
||||
display: 'none',
|
||||
},
|
||||
}}
|
||||
InputProps={{
|
||||
endAdornment: (
|
||||
<InputAdornment position="end">
|
||||
<IconButton onClick={handleTogglePassword} edge="end">
|
||||
{showPassword ? <VisibilityOffOutlinedIcon /> : <VisibilityOutlined />}
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Login Button */}
|
||||
<Box sx={{ pt: 2 }}>
|
||||
<Button
|
||||
variant="contained"
|
||||
fullWidth
|
||||
onClick={handleLogin}
|
||||
sx={{
|
||||
fontWeight: 600,
|
||||
fontSize: { xs: '14px', sm: '16px' },
|
||||
height: { xs: '45px', sm: '52px' },
|
||||
borderRadius: '50px',
|
||||
textTransform: 'none',
|
||||
color: 'white',
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
'&:hover': {
|
||||
backgroundColor: theme.palette.primary.hover
|
||||
}
|
||||
, fontFamily: 'PlusJakartaSans'
|
||||
}}
|
||||
>
|
||||
Log in
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
{/* Divider */}
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, py: 2 }}>
|
||||
<Box sx={{ flex: 1, height: '1px', backgroundColor: '#E0E0E0' }} />
|
||||
<Typography variant="body1" sx={{ fontWeight: 500, fontSize: '16px', color: 'black' , fontFamily: 'PlusJakartaSans' }}>
|
||||
Or
|
||||
</Typography>
|
||||
<Box sx={{ flex: 1, height: '1px', backgroundColor: '#E0E0E0' }} />
|
||||
</Box>
|
||||
|
||||
{/* Google Button */}
|
||||
<Button
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
sx={{
|
||||
fontWeight: 500,
|
||||
fontSize: '16px',
|
||||
borderRadius: '50px',
|
||||
height: '50px',
|
||||
textTransform: 'none',
|
||||
gap: 1,
|
||||
borderColor: '#E6E6E6',
|
||||
color: 'black',
|
||||
'&:hover': {
|
||||
borderColor: 'black',
|
||||
backgroundColor: 'transparent'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center' , fontFamily: 'PlusJakartaSans' }}>
|
||||
<img
|
||||
src="https://upload.wikimedia.org/wikipedia/commons/c/c1/Google_%22G%22_logo.svg"
|
||||
alt="Google"
|
||||
style={{ width: 25, height: 25 }}
|
||||
/>
|
||||
</Box>
|
||||
Login with Google
|
||||
</Button>
|
||||
|
||||
|
||||
|
||||
|
||||
{/* Register Link */}
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
fontSize: '16px',
|
||||
textAlign: 'center',
|
||||
color: '#969BA7',
|
||||
pt: 3
|
||||
}}
|
||||
>
|
||||
Don’t have an account?{' '}
|
||||
<Link
|
||||
to="/register"
|
||||
style={{
|
||||
color: '#2261FF',
|
||||
textDecoration: 'none'
|
||||
}}
|
||||
>
|
||||
Register
|
||||
</Link>
|
||||
</Typography>
|
||||
|
||||
</Stack>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default LoginForm;
|
||||
@@ -0,0 +1,213 @@
|
||||
import React from 'react';
|
||||
import { Box, Typography, Stack, Button, useTheme, TextField } from '@mui/material';
|
||||
|
||||
const OperationalCapacity = ({ currentStepIndex = 0, onNext, onBack }) => {
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
height: { xs: '90%', sm: '100%', md:740 },
|
||||
backgroundColor: '#FFFFFF',
|
||||
px: 4,
|
||||
pt: 12,
|
||||
pb: 4,
|
||||
display: 'block',
|
||||
borderRadius: 2,
|
||||
boxShadow: '0px 1px 4px rgba(0,0,0,0.05)',
|
||||
position: 'relative',
|
||||
width: { xs: '80%', sm: '90%' },
|
||||
}}
|
||||
>
|
||||
<Stack spacing={2.5}>
|
||||
<Typography
|
||||
fontWeight={700}
|
||||
sx={{
|
||||
fontSize: {
|
||||
xs: '1.8rem',
|
||||
sm: '2rem',
|
||||
md: '2.2rem'
|
||||
}
|
||||
}}
|
||||
>
|
||||
Operational Capacity
|
||||
</Typography>
|
||||
<Box sx={{ width: '70%' }}>
|
||||
<Typography
|
||||
fontSize="16px"
|
||||
color="text.secondary"
|
||||
fontWeight={500}
|
||||
sx={{ pb: 1 }}
|
||||
>
|
||||
Enter your basic information to proceed to registration of your own restaurant on this platform
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Maximum Orders Per Day Input */}
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||
<Typography variant="body2" color="black" sx={{ fontWeight: '500', fontSize: '16px' }}>
|
||||
Maximum Orders Per Day
|
||||
</Typography>
|
||||
<TextField
|
||||
placeholder="5000"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
sx={{
|
||||
'& input': { fontWeight: 500, fontSize: '15px' },
|
||||
'& input::placeholder': { color: '#969BA7' },
|
||||
'& .MuiOutlinedInput-root': {
|
||||
borderRadius: '10px',
|
||||
transition: '0.3s',
|
||||
'&.Mui-focused fieldset': {
|
||||
borderColor: theme.palette.primary.main,
|
||||
boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)'
|
||||
}
|
||||
},
|
||||
'& .MuiOutlinedInput-root.Mui-focused': {
|
||||
borderColor: '#3f51b5',
|
||||
boxShadow: '0 0 0 2px rgba(63,81,181,0.1)'
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Number of Cheff Input */}
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||
<Typography variant="body2" color="black" sx={{ fontWeight: '500', fontSize: '16px' }}>
|
||||
Number of Cheff
|
||||
</Typography>
|
||||
<TextField
|
||||
placeholder="20"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
sx={{
|
||||
'& input': { fontWeight: 500, fontSize: '15px' },
|
||||
'& input::placeholder': { color: '#969BA7' },
|
||||
'& .MuiOutlinedInput-root': {
|
||||
borderRadius: '10px',
|
||||
transition: '0.3s',
|
||||
'&.Mui-focused fieldset': {
|
||||
borderColor: theme.palette.primary.main,
|
||||
boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)'
|
||||
}
|
||||
},
|
||||
'& .MuiOutlinedInput-root.Mui-focused': {
|
||||
borderColor: '#3f51b5',
|
||||
boxShadow: '0 0 0 2px rgba(63,81,181,0.1)'
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Number of Waiters Input */}
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||
<Typography variant="body2" color="black" sx={{ fontWeight: '500', fontSize: '16px' }}>
|
||||
Number of Waiters
|
||||
</Typography>
|
||||
<TextField
|
||||
placeholder="200"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
sx={{
|
||||
'& input': { fontWeight: 500, fontSize: '15px' },
|
||||
'& input::placeholder': { color: '#969BA7' },
|
||||
'& .MuiOutlinedInput-root': {
|
||||
borderRadius: '10px',
|
||||
transition: '0.3s',
|
||||
'&.Mui-focused fieldset': {
|
||||
borderColor: theme.palette.primary.main,
|
||||
boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)'
|
||||
}
|
||||
},
|
||||
'& .MuiOutlinedInput-root.Mui-focused': {
|
||||
borderColor: '#3f51b5',
|
||||
boxShadow: '0 0 0 2px rgba(63,81,181,0.1)'
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Number of Kitchen Assistant Input */}
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||
<Typography variant="body2" color="black" sx={{ fontWeight: '500', fontSize: '16px' }}>
|
||||
Number of Kitchen Assistant
|
||||
</Typography>
|
||||
<TextField
|
||||
placeholder="200"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
sx={{
|
||||
'& input': { fontWeight: 500, fontSize: '15px' },
|
||||
'& input::placeholder': { color: '#969BA7' },
|
||||
'& .MuiOutlinedInput-root': {
|
||||
borderRadius: '10px',
|
||||
transition: '0.3s',
|
||||
'&.Mui-focused fieldset': {
|
||||
borderColor: theme.palette.primary.main,
|
||||
boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)'
|
||||
}
|
||||
},
|
||||
'& .MuiOutlinedInput-root.Mui-focused': {
|
||||
borderColor: '#3f51b5',
|
||||
boxShadow: '0 0 0 2px rgba(63,81,181,0.1)'
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Buttons */}
|
||||
|
||||
<Box sx={{ pt: 2 }}>
|
||||
<Button
|
||||
variant="contained"
|
||||
fullWidth
|
||||
onClick={onNext}
|
||||
sx={{
|
||||
fontFamily: 'PlusJakartaSans',
|
||||
fontWeight: 600,
|
||||
fontSize: { xs: '14px', sm: '16px' },
|
||||
height: { xs: '45px', sm: '52px' },
|
||||
borderRadius: '50px',
|
||||
textTransform: 'none',
|
||||
color: 'white',
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
'&:hover': {
|
||||
backgroundColor: theme.palette.primary.hover,
|
||||
},
|
||||
}}
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
|
||||
{/* زر Back تحت زر Next */}
|
||||
<Button
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
onClick={onBack}
|
||||
sx={{
|
||||
mt: 2,
|
||||
fontFamily: 'PlusJakartaSans',
|
||||
fontWeight: 600,
|
||||
fontSize: { xs: '14px', sm: '16px' },
|
||||
height: { xs: '45px', sm: '52px' },
|
||||
borderRadius: '50px',
|
||||
textTransform: 'none',
|
||||
display: { xs: 'block', sm: 'block', md: 'none' }, // يظهر فقط في xs و sm
|
||||
borderColor: theme.palette.primary.main,
|
||||
color: theme.palette.primary.main,
|
||||
'&:hover': {
|
||||
backgroundColor: theme.palette.primary.light,
|
||||
borderColor: theme.palette.primary.main,
|
||||
},
|
||||
}}
|
||||
>
|
||||
Back
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default OperationalCapacity;
|
||||
@@ -0,0 +1,165 @@
|
||||
// TypeOfRestaurant.jsx
|
||||
import React from 'react';
|
||||
import {
|
||||
Box,
|
||||
Typography,
|
||||
Stack,
|
||||
Button,
|
||||
useTheme,
|
||||
TextField
|
||||
} from '@mui/material';
|
||||
|
||||
const TypeOfRestaurant = ({ currentStepIndex = 0, onNext, onBack }) => {
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
height: { xs: '90%', sm: '100%', md: 700 },
|
||||
backgroundColor: '#FFFFFF',
|
||||
px: 4,
|
||||
pt: { xs: 6, md: 19.5 },
|
||||
pb: { xs: 20, sm: 20, md: 0 },
|
||||
display: 'block',
|
||||
borderRadius: 2,
|
||||
boxShadow: '0px 1px 4px rgba(0,0,0,0.05)',
|
||||
position: 'relative',
|
||||
width: { xs: '80%', sm: '90%' },
|
||||
}}
|
||||
>
|
||||
<Stack spacing={2.5}>
|
||||
{/* العنوان */}
|
||||
<Typography
|
||||
fontWeight={700}
|
||||
sx={{
|
||||
fontSize: {
|
||||
xs: '1.8rem',
|
||||
sm: '2rem',
|
||||
md: '2.2rem'
|
||||
}
|
||||
}}
|
||||
>
|
||||
Type of Restaurant
|
||||
</Typography>
|
||||
|
||||
{/* الوصف */}
|
||||
<Box sx={{ width: '70%' }}>
|
||||
<Typography
|
||||
fontSize="16px"
|
||||
color="text.secondary"
|
||||
fontWeight={500}
|
||||
sx={{ pb: 1 }}
|
||||
>
|
||||
Enter your restaurant type you want to collaborate to proceed to registration of your own restaurant on this platform
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* الحقول */}
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||
<Typography variant="body2" color="black" sx={{ fontWeight: '500', fontSize: '16px' }}>
|
||||
Open to Host Restaurant/Cousin type*
|
||||
</Typography>
|
||||
<TextField
|
||||
placeholder="Fine Dining"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
sx={{
|
||||
'& input': { fontWeight: 500, fontSize: '15px' },
|
||||
'& input::placeholder': { color: '#969BA7' },
|
||||
'& .MuiOutlinedInput-root': {
|
||||
borderRadius: '10px',
|
||||
transition: '0.3s',
|
||||
'&.Mui-focused fieldset': {
|
||||
borderColor: theme.palette.primary.main,
|
||||
boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)'
|
||||
}
|
||||
},
|
||||
'& .MuiOutlinedInput-root.Mui-focused': {
|
||||
borderColor: '#3f51b5',
|
||||
boxShadow: '0 0 0 2px rgba(63,81,181,0.1)'
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||
<Typography variant="body2" color="black" sx={{ fontWeight: '500', fontSize: '16px' }}>
|
||||
Select Restaurant type Willing to Collaborate With
|
||||
</Typography>
|
||||
<TextField
|
||||
placeholder="Catering Services"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
sx={{
|
||||
'& input': { fontWeight: 500, fontSize: '15px' },
|
||||
'& input::placeholder': { color: '#969BA7' },
|
||||
'& .MuiOutlinedInput-root': {
|
||||
borderRadius: '10px',
|
||||
transition: '0.3s',
|
||||
'&.Mui-focused fieldset': {
|
||||
borderColor: theme.palette.primary.main,
|
||||
boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)'
|
||||
}
|
||||
},
|
||||
'& .MuiOutlinedInput-root.Mui-focused': {
|
||||
borderColor: '#3f51b5',
|
||||
boxShadow: '0 0 0 2px rgba(63,81,181,0.1)'
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ pt: 2 }}>
|
||||
<Button
|
||||
variant="contained"
|
||||
fullWidth
|
||||
onClick={onNext}
|
||||
sx={{
|
||||
fontFamily: 'PlusJakartaSans',
|
||||
fontWeight: 600,
|
||||
fontSize: { xs: '14px', sm: '16px' },
|
||||
height: { xs: '45px', sm: '52px' },
|
||||
borderRadius: '50px',
|
||||
textTransform: 'none',
|
||||
color: 'white',
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
'&:hover': {
|
||||
backgroundColor: theme.palette.primary.hover,
|
||||
},
|
||||
}}
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
|
||||
{/* زر Back تحت زر Next */}
|
||||
<Button
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
onClick={onBack}
|
||||
sx={{
|
||||
mt: 2,
|
||||
fontFamily: 'PlusJakartaSans',
|
||||
fontWeight: 600,
|
||||
fontSize: { xs: '14px', sm: '16px' },
|
||||
height: { xs: '45px', sm: '52px' },
|
||||
borderRadius: '50px',
|
||||
textTransform: 'none',
|
||||
display: { xs: 'block', sm: 'block', md: 'none' }, // يظهر فقط في xs و sm
|
||||
borderColor: theme.palette.primary.main,
|
||||
color: theme.palette.primary.main,
|
||||
'&:hover': {
|
||||
backgroundColor: theme.palette.primary.light,
|
||||
borderColor: theme.palette.primary.main,
|
||||
},
|
||||
}}
|
||||
>
|
||||
Back
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default TypeOfRestaurant;
|
||||
240
src/components/Home/RestaurantProfile/contcet/UploadMenu.js
Normal file
240
src/components/Home/RestaurantProfile/contcet/UploadMenu.js
Normal file
@@ -0,0 +1,240 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
Box,
|
||||
Typography,
|
||||
Stack,
|
||||
Button,
|
||||
useTheme,
|
||||
TextField
|
||||
} from '@mui/material';
|
||||
import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
|
||||
|
||||
const UploadMenu = ({ currentStepIndex = 0, onNext, onBack }) => {
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
height: { xs: '90%', sm: '100%', md: 740 },
|
||||
backgroundColor: '#FFFFFF',
|
||||
px: 4,
|
||||
pt: 4.5,
|
||||
pb: 10,
|
||||
borderRadius: 2,
|
||||
boxShadow: '0px 1px 4px rgba(0,0,0,0.05)',
|
||||
width: { xs: '80%', sm: '90%' },
|
||||
mx: 'auto'
|
||||
}}
|
||||
>
|
||||
<Stack spacing={2.5}>
|
||||
<Typography
|
||||
fontWeight={700}
|
||||
sx={{
|
||||
fontSize: {
|
||||
xs: '1.8rem',
|
||||
sm: '2rem',
|
||||
md: '2.2rem'
|
||||
}
|
||||
}}
|
||||
>
|
||||
Upload Menu
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ width: '70%' }}>
|
||||
<Typography
|
||||
fontSize="16px"
|
||||
color="text.secondary"
|
||||
fontWeight={500}
|
||||
sx={{ pb: 1 }}
|
||||
>
|
||||
Enter your basic information to proceed to registration of your own restaurant on this platform
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Item Name Input */}
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||
<Typography variant="body2" sx={{ fontWeight: 500, fontSize: '16px' }}>
|
||||
Item Name
|
||||
</Typography>
|
||||
<TextField
|
||||
placeholder="Burgers"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
sx={{
|
||||
'& input': { fontWeight: 500, fontSize: '15px' },
|
||||
'& input::placeholder': { color: '#969BA7' },
|
||||
'& .MuiOutlinedInput-root': {
|
||||
borderRadius: '10px',
|
||||
transition: '0.3s',
|
||||
'&.Mui-focused fieldset': {
|
||||
borderColor: theme.palette.primary.main,
|
||||
boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)'
|
||||
}
|
||||
},
|
||||
'& .MuiOutlinedInput-root.Mui-focused': {
|
||||
borderColor: '#3f51b5',
|
||||
boxShadow: '0 0 0 2px rgba(63,81,181,0.1)'
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Price Input */}
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||
<Typography variant="body2" sx={{ fontWeight: 500, fontSize: '16px' }}>
|
||||
Price
|
||||
</Typography>
|
||||
<TextField
|
||||
placeholder="$120"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
sx={{
|
||||
'& input': { fontWeight: 500, fontSize: '15px' },
|
||||
'& input::placeholder': { color: '#969BA7' },
|
||||
'& .MuiOutlinedInput-root': {
|
||||
borderRadius: '10px',
|
||||
transition: '0.3s',
|
||||
'&.Mui-focused fieldset': {
|
||||
borderColor: theme.palette.primary.main,
|
||||
boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)'
|
||||
}
|
||||
},
|
||||
'& .MuiOutlinedInput-root.Mui-focused': {
|
||||
borderColor: '#3f51b5',
|
||||
boxShadow: '0 0 0 2px rgba(63,81,181,0.1)'
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Description Input */}
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||
<Typography variant="body2" sx={{ fontWeight: 500, fontSize: '16px' }}>
|
||||
Description
|
||||
</Typography>
|
||||
<TextField
|
||||
placeholder="Write here..."
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
multiline
|
||||
minRows={3}
|
||||
sx={{
|
||||
'& .MuiInputBase-root': {
|
||||
fontWeight: 500,
|
||||
fontSize: '15px',
|
||||
alignItems: 'start',
|
||||
},
|
||||
'& textarea::placeholder': {
|
||||
color: '#969BA7',
|
||||
},
|
||||
'& .MuiOutlinedInput-root': {
|
||||
borderRadius: '10px',
|
||||
transition: '0.3s',
|
||||
'&.Mui-focused fieldset': {
|
||||
borderColor: theme.palette.primary.main,
|
||||
boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)',
|
||||
},
|
||||
},
|
||||
'& .MuiOutlinedInput-root.Mui-focused': {
|
||||
borderColor: '#3f51b5',
|
||||
boxShadow: '0 0 0 2px rgba(63,81,181,0.1)',
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* OR Separator */}
|
||||
<Box>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', mb: 1.5 }}>
|
||||
<Box sx={{ flex: 1, height: '0px', backgroundColor: '#E0E0E0' }} />
|
||||
<Typography sx={{ px: 2, fontWeight: 500, fontSize: '16px', color: 'black' }}>
|
||||
OR
|
||||
</Typography>
|
||||
<Box sx={{ flex: 1, height: '0px', backgroundColor: '#E0E0E0' }} />
|
||||
</Box>
|
||||
|
||||
{/* Upload Menu Picture */}
|
||||
<Box
|
||||
component="label"
|
||||
htmlFor="upload-image"
|
||||
sx={{
|
||||
border: '2px dashed #ccc',
|
||||
borderRadius: '10px',
|
||||
height: '150px',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
cursor: 'pointer',
|
||||
color: '#969BA7',
|
||||
backgroundColor: '#FAFAFA',
|
||||
fontWeight: 500,
|
||||
fontSize: '15px',
|
||||
textAlign: 'center',
|
||||
transition: 'border-color 0.3s',
|
||||
'&:hover': {
|
||||
borderColor: '#FF914D',
|
||||
backgroundColor: '#fffaf5',
|
||||
}
|
||||
}}
|
||||
>
|
||||
Upload Menu Picture
|
||||
<input id="upload-image" type="file" accept="image/*" hidden />
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Buttons: Back and Next */}
|
||||
|
||||
<Box sx={{ pt: 2 }}>
|
||||
<Button
|
||||
variant="contained"
|
||||
fullWidth
|
||||
onClick={onNext}
|
||||
sx={{
|
||||
fontFamily: 'PlusJakartaSans',
|
||||
fontWeight: 600,
|
||||
fontSize: { xs: '14px', sm: '16px' },
|
||||
height: { xs: '45px', sm: '52px' },
|
||||
borderRadius: '50px',
|
||||
textTransform: 'none',
|
||||
color: 'white',
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
'&:hover': {
|
||||
backgroundColor: theme.palette.primary.hover,
|
||||
},
|
||||
}}
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
|
||||
{/* زر Back تحت زر Next */}
|
||||
<Button
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
onClick={onBack}
|
||||
sx={{
|
||||
mt: 2,
|
||||
fontFamily: 'PlusJakartaSans',
|
||||
fontWeight: 600,
|
||||
fontSize: { xs: '14px', sm: '16px' },
|
||||
height: { xs: '45px', sm: '52px' },
|
||||
borderRadius: '50px',
|
||||
textTransform: 'none',
|
||||
display: { xs: 'block', sm: 'block', md: 'none' }, // يظهر فقط في xs و sm
|
||||
borderColor: theme.palette.primary.main,
|
||||
color: theme.palette.primary.main,
|
||||
'&:hover': {
|
||||
backgroundColor: theme.palette.primary.light,
|
||||
borderColor: theme.palette.primary.main,
|
||||
},
|
||||
}}
|
||||
>
|
||||
Back
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default UploadMenu;
|
||||
183
src/components/Home/RestaurantProfile/contcet/UploadPhotos.js
Normal file
183
src/components/Home/RestaurantProfile/contcet/UploadPhotos.js
Normal file
@@ -0,0 +1,183 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Typography,
|
||||
Stack,
|
||||
Button,
|
||||
useTheme
|
||||
} from '@mui/material';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import ConfirmationDialog from './ConfirmationDialog'; // ✅ استدعاء المودال المنفصل
|
||||
|
||||
const UploadPhotos = ({ currentStepIndex = 0, onNext, onBack }) => {
|
||||
const theme = useTheme();
|
||||
const navigate = useNavigate();
|
||||
const [openModal, setOpenModal] = useState(false);
|
||||
|
||||
const handleOpenModal = () => setOpenModal(true);
|
||||
const handleCloseModal = () => setOpenModal(false);
|
||||
const handleConfirmNext = () => {
|
||||
handleCloseModal();
|
||||
onNext();
|
||||
};
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
height: { xs: '90%', sm: '100%', md: 740 },
|
||||
backgroundColor: '#FFFFFF',
|
||||
px: 4,
|
||||
pt: 11,
|
||||
pb: 10,
|
||||
display: 'block',
|
||||
borderRadius: 2,
|
||||
boxShadow: '0px 1px 4px rgba(0,0,0,0.05)',
|
||||
position: 'relative',
|
||||
width: { xs: '80%', sm: '90%' },
|
||||
}}
|
||||
>
|
||||
<Stack spacing={2.5}>
|
||||
<Typography fontWeight={700} sx={{
|
||||
fontSize: { xs: '1.8rem', sm: '2rem', md: '2.2rem' }
|
||||
}}>
|
||||
Upload Photos
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ width: '70%' }}>
|
||||
<Typography fontSize="16px" color="text.secondary" fontWeight={500} sx={{ pb: 1 }}>
|
||||
Enter your basic information to proceed to registration of your own restaurant on this platform
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Kitchen Interior’s */}
|
||||
<Box sx={{ pt: 1 }}>
|
||||
<Typography variant="body2" color="black" sx={{ fontWeight: '500', fontSize: '16px' }}>
|
||||
Kitchen Interior’s
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', mt: 1 }}>
|
||||
<Box
|
||||
component="label"
|
||||
htmlFor="upload-image-interior"
|
||||
sx={{
|
||||
border: '2px dashed #ccc',
|
||||
borderRadius: '10px',
|
||||
height: '120px',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
cursor: 'pointer',
|
||||
color: '#969BA7',
|
||||
backgroundColor: '#FAFAFA',
|
||||
fontWeight: 500,
|
||||
fontSize: '15px',
|
||||
textAlign: 'center',
|
||||
transition: 'border-color 0.3s',
|
||||
'&:hover': {
|
||||
borderColor: '#FF914D',
|
||||
backgroundColor: '#fffaf5',
|
||||
}
|
||||
}}
|
||||
>
|
||||
Upload Interior Picture
|
||||
<input id="upload-image-interior" type="file" accept="image/*" hidden />
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Kitchen Equipment’s */}
|
||||
<Box sx={{ pt: 1 }}>
|
||||
<Typography variant="body2" color="black" sx={{ fontWeight: '500', fontSize: '16px' }}>
|
||||
Kitchen Equipment’s
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', mt: 1 }}>
|
||||
<Box
|
||||
component="label"
|
||||
htmlFor="upload-image-equipment"
|
||||
sx={{
|
||||
border: '2px dashed #ccc',
|
||||
borderRadius: '10px',
|
||||
height: '120px',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
cursor: 'pointer',
|
||||
color: '#969BA7',
|
||||
backgroundColor: '#FAFAFA',
|
||||
fontWeight: 500,
|
||||
fontSize: '15px',
|
||||
textAlign: 'center',
|
||||
transition: 'border-color 0.3s',
|
||||
'&:hover': {
|
||||
borderColor: '#FF914D',
|
||||
backgroundColor: '#fffaf5',
|
||||
}
|
||||
}}
|
||||
>
|
||||
Upload Equipment Picture
|
||||
<input id="upload-image-equipment" type="file" accept="image/*" hidden />
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Buttons */}
|
||||
<Box sx={{ pt: 2 }}>
|
||||
<Button
|
||||
variant="contained"
|
||||
fullWidth
|
||||
onClick={handleOpenModal}
|
||||
sx={{
|
||||
fontFamily: 'PlusJakartaSans',
|
||||
fontWeight: 600,
|
||||
fontSize: { xs: '14px', sm: '16px' },
|
||||
height: { xs: '45px', sm: '52px' },
|
||||
borderRadius: '50px',
|
||||
textTransform: 'none',
|
||||
color: 'white',
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
'&:hover': {
|
||||
backgroundColor: theme.palette.primary.hover
|
||||
}
|
||||
}}
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
onClick={onBack}
|
||||
sx={{
|
||||
mt: 2,
|
||||
fontFamily: 'PlusJakartaSans',
|
||||
fontWeight: 600,
|
||||
fontSize: { xs: '14px', sm: '16px' },
|
||||
height: { xs: '45px', sm: '52px' },
|
||||
borderRadius: '50px',
|
||||
textTransform: 'none',
|
||||
display: { xs: 'block', sm: 'block', md: 'none' },
|
||||
borderColor: theme.palette.primary.main,
|
||||
color: theme.palette.primary.main,
|
||||
'&:hover': {
|
||||
backgroundColor: theme.palette.primary.light,
|
||||
borderColor: theme.palette.primary.main,
|
||||
}
|
||||
}}
|
||||
>
|
||||
Back
|
||||
</Button>
|
||||
</Box>
|
||||
</Stack>
|
||||
|
||||
{/* ✅ Confirmation Modal */}
|
||||
<ConfirmationDialog
|
||||
open={openModal}
|
||||
onClose={handleCloseModal}
|
||||
onConfirm={handleConfirmNext}
|
||||
title="Confirm Submission"
|
||||
description="Are you sure you want to proceed to the next step?"
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default UploadPhotos;
|
||||
217
src/components/Home/Settings/AccountSettings.js
Normal file
217
src/components/Home/Settings/AccountSettings.js
Normal file
@@ -0,0 +1,217 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Typography,
|
||||
TextField,
|
||||
Button,
|
||||
styled,
|
||||
useTheme
|
||||
} from '@mui/material';
|
||||
import AddAPhotoOutlinedIcon from '@mui/icons-material/AddAPhotoOutlined';
|
||||
|
||||
const AccountSettings = () => {
|
||||
const theme = useTheme();
|
||||
const [profileImage, setProfileImage] = useState(null);
|
||||
const [fullName, setFullName] = useState('');
|
||||
const [username, setUsername] = useState('');
|
||||
const [bio, setBio] = useState('');
|
||||
const [email, setEmail] = useState('');
|
||||
const [phone, setPhone] = useState('');
|
||||
|
||||
const handleImageUpload = (event) => {
|
||||
if (event.target.files && event.target.files[0]) {
|
||||
setProfileImage(URL.createObjectURL(event.target.files[0]));
|
||||
}
|
||||
};
|
||||
|
||||
const Input = styled('input')({
|
||||
display: 'none',
|
||||
});
|
||||
|
||||
const customInputStyle = {
|
||||
'& input': { fontWeight: 500, fontSize: '15px' },
|
||||
'& input::placeholder': { color: '#969BA7' },
|
||||
'& .MuiOutlinedInput-root': {
|
||||
borderRadius: '10px',
|
||||
transition: '0.3s',
|
||||
'&.Mui-focused fieldset': {
|
||||
borderColor: theme.palette.primary.main,
|
||||
boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)',
|
||||
},
|
||||
},
|
||||
'& .MuiOutlinedInput-root.Mui-focused': {
|
||||
borderColor: '#3f51b5',
|
||||
boxShadow: '0 0 0 2px rgba(63,81,181,0.1)',
|
||||
},
|
||||
};
|
||||
|
||||
const renderField = (label, value, onChange, type = 'text') => (
|
||||
<Box
|
||||
sx={{
|
||||
flex: 1,
|
||||
minWidth: { xs: '100%', sm: '45%' },
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: 1,
|
||||
}}
|
||||
>
|
||||
<Typography variant="body2" sx={{ fontWeight: '500', fontSize: '16px' }}>
|
||||
{label}
|
||||
</Typography>
|
||||
<TextField
|
||||
placeholder={`Enter your ${label.toLowerCase()}`}
|
||||
type={type}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
sx={customInputStyle}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
// margin: 'auto',
|
||||
p: { xs: 2, sm: 3 },
|
||||
backgroundColor: '#FFFFFF',
|
||||
maxWidth: { xs: '90%', md: '100%' },
|
||||
borderRadius: 2,
|
||||
}}
|
||||
>
|
||||
{/* العنوان الرئيسي */}
|
||||
<Typography variant="h4" component="h1" sx={{ mb: 3, fontWeight: 'bold' }}>
|
||||
Account Setting
|
||||
</Typography>
|
||||
|
||||
{/* صورة الملف الشخصي */}
|
||||
<Typography variant="h6" component="h2" sx={{ mb: 2, fontWeight: 'bold' }}>
|
||||
Your Profile Picture
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', mb: 3 }}>
|
||||
<label htmlFor="icon-button-file">
|
||||
<Input
|
||||
accept="image/*"
|
||||
id="icon-button-file"
|
||||
type="file"
|
||||
onChange={handleImageUpload}
|
||||
/>
|
||||
<Box
|
||||
component="span"
|
||||
sx={{
|
||||
width: { xs: 100, sm: 110 },
|
||||
height: { xs: 100, sm: 110 },
|
||||
border: '2px dashed #4C535F',
|
||||
borderRadius: 2,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
color: '#4C535F',
|
||||
cursor: 'pointer',
|
||||
textAlign: 'center',
|
||||
backgroundColor: '#f6f6f6',
|
||||
'&:hover': {
|
||||
backgroundColor: '#f9f9f9',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<AddAPhotoOutlinedIcon sx={{ fontSize: 28, mb: 1 }} />
|
||||
<Typography sx={{ fontSize: '13px', fontWeight: 500 }}>
|
||||
Upload your photo
|
||||
</Typography>
|
||||
</Box>
|
||||
</label>
|
||||
</Box>
|
||||
|
||||
{/* الحقول النصية */}
|
||||
<Box sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle1" sx={{ fontWeight: 'bold', mb: 2 }}>
|
||||
Personal Information
|
||||
</Typography>
|
||||
|
||||
{/* السطر الأول: Full Name + Email */}
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
gap: 2,
|
||||
mb: 2,
|
||||
}}
|
||||
>
|
||||
{renderField('Full Name', fullName, (e) => setFullName(e.target.value))}
|
||||
{renderField('Email', email, (e) => setEmail(e.target.value), 'email')}
|
||||
</Box>
|
||||
|
||||
{/* السطر الثاني: Username + Phone Number */}
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
gap: 2,
|
||||
mb: 2,
|
||||
}}
|
||||
>
|
||||
{renderField('Username', username, (e) => setUsername(e.target.value))}
|
||||
{renderField('Phone Number', phone, (e) => setPhone(e.target.value), 'tel')}
|
||||
</Box>
|
||||
|
||||
{/* الحقل Bio منفصل */}
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||
<Typography variant="body2" sx={{ fontWeight: '500', fontSize: '16px' }}>
|
||||
Bio
|
||||
</Typography>
|
||||
<TextField
|
||||
placeholder="Write something about your restaurant"
|
||||
value={bio}
|
||||
onChange={(e) => setBio(e.target.value)}
|
||||
fullWidth
|
||||
multiline
|
||||
rows={3}
|
||||
sx={customInputStyle}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* الأزرار */}
|
||||
<Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 2, flexWrap: 'wrap' }}>
|
||||
<Button
|
||||
variant="outlined"
|
||||
sx={{
|
||||
px: 4,
|
||||
py: 1.5,
|
||||
borderRadius: 2,
|
||||
textTransform: 'none',
|
||||
fontWeight: 'bold',
|
||||
width: { xs: '100%', sm: 'auto' },
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
sx={{
|
||||
px: 4,
|
||||
py: 1.5,
|
||||
borderRadius: 2,
|
||||
textTransform: 'none',
|
||||
fontWeight: 'bold',
|
||||
color: '#FFFFFF',
|
||||
width: { xs: '100%', sm: 'auto' },
|
||||
transition: 'border-color 0.3s',
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
'&:hover': {
|
||||
backgroundColor: theme.palette.primary.hover
|
||||
}
|
||||
}}
|
||||
>
|
||||
Update
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default AccountSettings;
|
||||
@@ -1,32 +1,16 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Box, useTheme, useMediaQuery, Typography } from '@mui/material';
|
||||
import { Box, useTheme, useMediaQuery } from '@mui/material';
|
||||
import KitchPlusAppBar from '../AppBar';
|
||||
import Sidebar from '../SideHome';
|
||||
import AccountSettings from './AccountSettings';
|
||||
|
||||
const drawerWidth = 230;
|
||||
|
||||
const Setting = () => {
|
||||
const theme = useTheme();
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
|
||||
const [hasProducts, setHasProducts] = useState(false); // حالة لتتبع وجود المنتجات
|
||||
const [sidebarOpen, setSidebarOpen] = useState(!isMobile);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
const checkProducts = async () => {
|
||||
|
||||
const productsExist = await checkIfProductsExist();
|
||||
setHasProducts(productsExist);
|
||||
};
|
||||
|
||||
checkProducts();
|
||||
}, []);
|
||||
|
||||
|
||||
const checkIfProductsExist = async () => {
|
||||
return false;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (window.innerWidth >= theme.breakpoints.values.md) {
|
||||
setSidebarOpen(true);
|
||||
@@ -55,47 +39,63 @@ const Setting = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<Box sx={{
|
||||
display: 'flex',
|
||||
height: '100vh',
|
||||
backgroundColor: '#F6F6F6',
|
||||
overflow: 'hidden',
|
||||
}}>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
height: '100vh',
|
||||
backgroundColor: '#F6F6F6',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
<Sidebar
|
||||
open={sidebarOpen}
|
||||
onClose={handleDrawerToggle}
|
||||
isMobile={isMobile}
|
||||
drawerWidth={drawerWidth}
|
||||
/>
|
||||
|
||||
<Box sx={{
|
||||
flexGrow: 1,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
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,
|
||||
}),
|
||||
}}>
|
||||
<Box
|
||||
sx={{
|
||||
flexGrow: 1,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
width: '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,
|
||||
}),
|
||||
}}
|
||||
>
|
||||
<KitchPlusAppBar
|
||||
onDrawerToggle={handleDrawerToggle}
|
||||
sidebarOpen={sidebarOpen}
|
||||
isMobile={isMobile}
|
||||
/>
|
||||
<Typography>Setting</Typography>
|
||||
<Box sx={{
|
||||
flexGrow: 1,
|
||||
width: sidebarOpen ? 'calc(100% - 40px)' : '100%',
|
||||
pt: { xs:2, sm: 3 },
|
||||
overflowY: 'auto',
|
||||
pl: { xs: 2, sm: 3 },
|
||||
pb: { xs: 2, sm: 4 },
|
||||
scrollbarWidth: 'none',
|
||||
'&::-webkit-scrollbar': { display: 'none' },
|
||||
transition: theme.transitions.create(['margin'], {
|
||||
easing: theme.transitions.easing.sharp,
|
||||
duration: theme.transitions.duration.leavingScreen,
|
||||
}),
|
||||
}}>
|
||||
|
||||
<AccountSettings />
|
||||
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default Setting;
|
||||
export default Setting;
|
||||
|
||||
المرجع في مشكلة جديدة
حظر مستخدم