batool/RestaurantDash
1
0
نسخ 0
نسخ من RaghadAlkhous/RestaurantDash
الشفرة طلبات السحب النشاط

Work on Create your restaurant and Inventory

تصفح المصدر
هذا الالتزام موجود في:
raghad
2025-06-16 23:18:32 +03:00
الأصل aa9a213676
التزام 4a72e96c76
23 ملفات معدلة مع 32974 إضافات و10818 حذوفات
تنزيل ملف التصحيح تنزيل ملف الاختلاف توسيع جميع الملفات طي جميع الملفات

40609
package-lock.json مولّد
عرض الملف

تم حذف اختلاف الملف لأن الملف كبير جداً تحميل الاختلاف

57
package.json
عرض الملف

@@ -3,49 +3,104 @@
"name": "resturant-dashBord", "name": "resturant-dashBord",
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"dependencies": { "dependencies": {
"@emotion/react": "^11.14.0", "@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.0", "@emotion/styled": "^11.14.0",
"@mui/icons-material": "^7.0.2", "@mui/icons-material": "^7.0.2",
"@mui/material": "^7.0.2", "@mui/material": "^7.0.2",
"@mui/x-date-pickers": "^8.5.2",
"@testing-library/dom": "^10.4.0", "@testing-library/dom": "^10.4.0",
"@testing-library/jest-dom": "^6.6.3", "@testing-library/jest-dom": "^6.6.3",
"@testing-library/react": "^16.3.0", "@testing-library/react": "^16.3.0",
"@testing-library/user-event": "^13.5.0", "@testing-library/user-event": "^13.5.0",
"axios": "^1.9.0", "axios": "^1.9.0",
"date-fns": "^4.1.0",
"file-saver": "^2.0.5",
"jspdf": "^2.5.1",
"jspdf-autotable": "^3.5.23",
"react": "^19.1.0", "react": "^19.1.0",
"react-circular-progressbar": "^2.2.0", "react-circular-progressbar": "^2.2.0",
"react-dom": "^19.1.0", "react-dom": "^19.1.0",
"react-router-dom": "^7.6.0", "react-router-dom": "^7.6.0",
"react-scripts": "5.0.1", "react-scripts": "5.0.1",
"recharts": "^2.15.3", "recharts": "^2.15.3",
"web-vitals": "^2.1.4"
"web-vitals": "^2.1.4",
"xlsx": "^0.18.5"
}, },
"scripts": { "scripts": {
"start": "react-scripts start", "start": "react-scripts start",
"build": "react-scripts build", "build": "react-scripts build",
"test": "react-scripts test", "test": "react-scripts test",
"eject": "react-scripts eject" "eject": "react-scripts eject"
}, },
"eslintConfig": { "eslintConfig": {
"extends": [ "extends": [
"react-app", "react-app",
"react-app/jest" "react-app/jest"
] ]
}, },
"browserslist": { "browserslist": {
"production": [ "production": [
">0.2%", ">0.2%",
"not dead", "not dead",
"not op_mini all" "not op_mini all"
], ],
"development": [ "development": [
"last 1 chrome version", "last 1 chrome version",
"last 1 firefox version", "last 1 firefox version",
"last 1 safari version" "last 1 safari version"
] ]
} }
} }

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

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

بعد

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

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

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

بعد

العرض:  |  الارتفاع:  |  الحجم: 1.1 KiB

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

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

بعد

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

1
src/App.css
عرض الملف

@@ -2,6 +2,7 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
text-align: center; text-align: center;
/* background-color: #9aa0b8; */
} }
body, body,

2
src/components/Home/Analytics&Reporting/TopSellingProduct.js
عرض الملف

@@ -198,7 +198,7 @@ const TopSellingProduct = ({ data = [] }) => {
color: theme.palette.primary.main, color: theme.palette.primary.main,
borderRadius: '8px', borderRadius: '8px',
'&.Mui-selected': { '&.Mui-selected': {
backgroundColor: '#FFB088', backgroundColor: theme.palette.primary.main,
color: '#fff', color: '#fff',
}, },
'&:hover': { '&:hover': {

108
src/components/Home/CreateYourRestaurant/CreateRestaurant.js
عرض الملف

@@ -1,34 +1,47 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { Box, useTheme, useMediaQuery, Typography } from '@mui/material'; import { Box, useTheme, useMediaQuery } from '@mui/material';
import KitchPlusAppBar from '../AppBar'; import KitchPlusAppBar from '../AppBar';
import Sidebar from '../SideHome'; import Sidebar from '../SideHome';
import 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 drawerWidth = 230;
const CreateRestaurant = () => { const CreateRestaurant = () => {
const theme = useTheme(); const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down('sm')); const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
const [hasProducts, setHasProducts] = useState(false); // حالة لتتبع وجود المنتجات const [hasProducts, setHasProducts] = useState(false);
const [sidebarOpen, setSidebarOpen] = useState(!isMobile); const [sidebarOpen, setSidebarOpen] = useState(!isMobile);
// محاكاة للتحقق من وجود المنتجات (استبدل هذا بمنطقك الفعلي) // ⬇️ إدارة الخطوة الحالية
const [currentStep, setCurrentStep] = useState(0);
const steps = [
<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(() => { useEffect(() => {
// هنا يجب استبدال هذا بمنطق فعلي للتحقق من وجود المنتجات
// مثلاً استدعاء API أو التحقق من state
const checkProducts = async () => { const checkProducts = async () => {
// محاكاة لاستدعاء API const productsExist = await checkIfProductsExist();
const productsExist = await checkIfProductsExist(); // استبدل هذه الدالة بمنطقك الفعلي
setHasProducts(productsExist); setHasProducts(productsExist);
}; };
checkProducts(); checkProducts();
}, []); }, []);
// دالة مساعدة لمحاكاة التحقق من المنتجات (استبدلها بمنطقك الفعلي)
const checkIfProductsExist = async () => { const checkIfProductsExist = async () => {
// محاكاة - يمكن أن يكون هذا استدعاء لـ API أو تحقق من state return false;
// return true;
return false; // غير هذه القيمة حسب منطقك
}; };
useEffect(() => { useEffect(() => {
@@ -50,7 +63,6 @@ const CreateRestaurant = () => {
handleResize(); handleResize();
window.addEventListener('resize', handleResize); window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize);
}, [theme.breakpoints.values.md]); }, [theme.breakpoints.values.md]);
@@ -76,16 +88,8 @@ const CreateRestaurant = () => {
flexGrow: 1, flexGrow: 1,
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
width: { width: { xs: '100%', sm: '100%', md: '100%' },
xs: '100%', marginLeft: { xs: 0, sm: sidebarOpen ? `${drawerWidth}px` : 0, md: 0 },
sm: '100%',
md: '100%'
},
marginLeft: {
xs: 0,
sm: sidebarOpen ? `${drawerWidth}px` : 0,
md: 0
},
transition: theme.transitions.create(['width'], { transition: theme.transitions.create(['width'], {
easing: theme.transitions.easing.sharp, easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen, duration: theme.transitions.duration.leavingScreen,
@@ -96,10 +100,66 @@ const CreateRestaurant = () => {
sidebarOpen={sidebarOpen} sidebarOpen={sidebarOpen}
isMobile={isMobile} 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>
</Box> </Box>
); );
}; };
export default CreateRestaurant; export default CreateRestaurant;

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;

151
src/components/Home/CreateYourRestaurant/contcet/AdditionalNotes.js Normal file
عرض الملف

@@ -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;

175
src/components/Home/CreateYourRestaurant/contcet/AdditionalSupport.js Normal file
عرض الملف

@@ -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
عرض الملف

@@ -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;

325
src/components/Home/CreateYourRestaurant/contcet/CloudKitchenProject.js Normal file
عرض الملف

@@ -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;

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

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

218
src/components/Home/CreateYourRestaurant/contcet/OperationalDetails.js Normal file
عرض الملف

@@ -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;

223
src/components/Home/CreateYourRestaurant/contcet/RequiredEquipments.js Normal file
عرض الملف

@@ -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;

201
src/components/Home/CreateYourRestaurant/contcet/VisualIdentity.js Normal file
عرض الملف

@@ -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;

12
src/components/Home/Dashboard/NoProdectDash.js
عرض الملف

@@ -23,22 +23,14 @@ const NoProdectDash = () => {
justifyContent: 'space-between', justifyContent: 'space-between',
alignItems: { xs: 'flex-start', sm: 'center', md: 'center' }, alignItems: { xs: 'flex-start', sm: 'center', md: 'center' },
mb: 3, mb: 3,
mt:10,
pl: 1, pl: 1,
pr: { xs: 1, sm: 3 }, pr: { xs: 1, sm: 3 },
flexDirection: { xs: 'column', sm: 'row', md: 'row' }, flexDirection: { xs: 'column', sm: 'row', md: 'row' },
gap: { xs: 2, sm: 0 } gap: { xs: 2, sm: 0 }
}} }}
> >
<Typography
variant="h6"
sx={{
fontWeight: '500',
fontSize: { xs: '20px', sm: '22px', md: '24px' },
color: '#121212'
}}
>
Dashboard
</Typography>
</Box> </Box>
{/* Empty State Content */} {/* Empty State Content */}

177
src/components/Home/Inventory/Inventory.js
عرض الملف

@@ -1,105 +1,142 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { Box, useTheme, useMediaQuery, Typography } from '@mui/material'; import { Box, useTheme, useMediaQuery } from '@mui/material';
import KitchPlusAppBar from '../AppBar'; import KitchPlusAppBar from '../AppBar';
import Sidebar from '../SideHome'; import Sidebar from '../SideHome';
import ProductEntry from './ProductEntry';
import TableView from './TableView';
const drawerWidth = 230; const drawerWidth = 230;
const initialProducts = [
{
product: 'Apple Watch',
sales: 150,
amount: 45000,
price: 299,
status: 'Published',
expiration: '30 Days Left',
},
{
product: 'Samsung Galaxy',
sales: 90,
amount: 36000,
price: 400,
status: 'Low Stock',
expiration: '12 Days Left',
},
{
product: 'Sony Headphones',
sales: 60,
amount: 18000,
price: 299,
status: 'Draft',
expiration: '5 Days Left',
},
];
const Inventory = () => { const Inventory = () => {
const theme = useTheme(); const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down('sm')); const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
const [hasProducts, setHasProducts] = useState(false); // حالة لتتبع وجود المنتجات
const [sidebarOpen, setSidebarOpen] = useState(!isMobile); const [sidebarOpen, setSidebarOpen] = useState(!isMobile);
// محاكاة للتحقق من وجود المنتجات (استبدل هذا بمنطقك الفعلي) const [products, setProducts] = useState(initialProducts);
useEffect(() => { const [showProductEntry, setShowProductEntry] = useState(true);
// هنا يجب استبدال هذا بمنطق فعلي للتحقق من وجود المنتجات
// مثلاً استدعاء API أو التحقق من state const addProduct = (newProduct) => {
const checkProducts = async () => { const formattedProduct = {
// محاكاة لاستدعاء API product: newProduct.fullName || 'Unnamed Product',
const productsExist = await checkIfProductsExist(); // استبدل هذه الدالة بمنطقك الفعلي sales: newProduct.stocksLevel ? Number(newProduct.stocksLevel) : 0,
setHasProducts(productsExist); amount: newProduct.productPrice
? Number(newProduct.productPrice) * (newProduct.stocksLevel || 1)
: 0,
price: newProduct.productPrice ? Number(newProduct.productPrice) : 0,
status: newProduct.consumptionStatus ? 'Published' : 'Draft',
expiration: newProduct.expirationDate
? `${Math.ceil(
(new Date(newProduct.expirationDate) - new Date()) /
(1000 * 60 * 60 * 24)
)} Days Left`
: 'N/A',
}; };
checkProducts(); setProducts((prev) => [...prev, formattedProduct]);
}, []);
// دالة مساعدة لمحاكاة التحقق من المنتجات (استبدلها بمنطقك الفعلي) setShowProductEntry(false);
const checkIfProductsExist = async () => {
// محاكاة - يمكن أن يكون هذا استدعاء لـ API أو تحقق من state
// return true;
return false; // غير هذه القيمة حسب منطقك
}; };
useEffect(() => { const handleAddNewProduct = () => {
if (window.innerWidth >= theme.breakpoints.values.md) { setShowProductEntry(true);
setSidebarOpen(true); };
} else {
setSidebarOpen(false);
}
}, [theme.breakpoints.values.md]);
useEffect(() => { const handleShowTable = () => {
const handleResize = () => { setShowProductEntry(false);
if (window.innerWidth >= theme.breakpoints.values.md) {
setSidebarOpen(true);
} else {
setSidebarOpen(false);
}
};
handleResize();
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, [theme.breakpoints.values.md]);
const handleDrawerToggle = () => {
setSidebarOpen(!sidebarOpen);
}; };
return ( return (
<Box sx={{ <Box
display: 'flex', sx={{
height: '100vh', display: 'flex',
backgroundColor: '#F6F6F6', height: '100vh',
overflow: 'hidden', backgroundColor: '#F6F6F6',
}}> overflow: 'hidden',
}}
>
<Sidebar <Sidebar
open={sidebarOpen} open={sidebarOpen}
onClose={handleDrawerToggle} onClose={() => setSidebarOpen(!sidebarOpen)}
isMobile={isMobile} isMobile={isMobile}
drawerWidth={drawerWidth} drawerWidth={drawerWidth}
/> />
<Box sx={{ <Box
flexGrow: 1, sx={{
display: 'flex', flexGrow: 1,
flexDirection: 'column', display: 'flex',
width: { flexDirection: 'column',
xs: '100%', width: '100%',
sm: '100%', marginLeft: {
md: '100%' xs: 0,
}, sm: sidebarOpen ? `${drawerWidth}px` : 0,
marginLeft: { md: 0,
xs: 0, },
sm: sidebarOpen ? `${drawerWidth}px` : 0, transition: theme.transitions.create(['width'], {
md: 0 easing: theme.transitions.easing.sharp,
}, duration: theme.transitions.duration.leavingScreen,
transition: theme.transitions.create(['width'], { }),
easing: theme.transitions.easing.sharp, }}
duration: theme.transitions.duration.leavingScreen, >
}),
}}>
<KitchPlusAppBar <KitchPlusAppBar
onDrawerToggle={handleDrawerToggle} onDrawerToggle={() => setSidebarOpen(!sidebarOpen)}
sidebarOpen={sidebarOpen} sidebarOpen={sidebarOpen}
isMobile={isMobile} isMobile={isMobile}
/> />
<Typography>Inventory</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 },
pr: { xs: 2, sm: 3 },
scrollbarWidth: 'none',
'&::-webkit-scrollbar': { display: 'none' },
transition: theme.transitions.create(['margin'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
}}
>
{showProductEntry ? (
<ProductEntry onAdd={addProduct} onShowTable={handleShowTable} />
) : (
<TableView data={products} onAddNewProduct={handleAddNewProduct} />
)}
</Box>
</Box> </Box>
</Box> </Box>
); );
}; };
export default Inventory; export default Inventory;

41
src/components/Home/Inventory/InventoryTablePage.js Normal file
عرض الملف

@@ -0,0 +1,41 @@
import React, { useState } from 'react';
import TableView from './TableView';
const initialProducts = [
{
product: 'Apple Watch',
sales: 150,
amount: 45000,
price: 299,
status: 'Published',
expiration: '30 Days Left',
},
{
product: 'Samsung Galaxy',
sales: 90,
amount: 36000,
price: 400,
status: 'Low Stock',
expiration: '12 Days Left',
},
{
product: 'Sony Headphones',
sales: 60,
amount: 18000,
price: 299,
status: 'Draft',
expiration: '5 Days Left',
},
];
const InventoryTablePage = () => {
const [products, setProducts] = useState(initialProducts);
const handleAddNewProduct = () => {
alert('Navigate to Add Product page or open form here');
};
return <TableView data={products} onAddNewProduct={handleAddNewProduct} />;
};
export default InventoryTablePage;

101
src/components/Home/Inventory/NoProdectDash.js Normal file
عرض الملف

@@ -0,0 +1,101 @@
import React from 'react';
import {
Box,
Button,
Card,
CardContent,
Typography,
useMediaQuery
} from '@mui/material';
import { useTheme } from '@mui/material/styles';
import AddIcon from '@mui/icons-material/Add';
const NoProdectDash = () => {
const theme = useTheme();
const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
return (
<>
{/* Header Section */}
<Box
sx={{
display: 'flex',
justifyContent: 'space-between',
alignItems: { xs: 'flex-start', sm: 'center', md: 'center' },
mb: 3,
mt:10,
pl: 1,
pr: { xs: 1, sm: 3 },
flexDirection: { xs: 'column', sm: 'row', md: 'row' },
gap: { xs: 2, sm: 0 }
}}
>
</Box>
{/* Empty State Content */}
<Card
sx={{
boxShadow: 'none',
p: 4,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
textAlign: 'center',
backgroundColor: 'transparent'
}}
>
<CardContent>
{/* Image Placeholder */}
<Box
component="img"
src="/images/compeoter.png"
alt="No products available"
sx={{
width: isSmallScreen ? 150 : 200,
height: 'auto',
mb: 1,
opacity: 0.8
}}
/>
{/* Title with colored "Sorry!" */}
<Typography
variant="h5"
sx={{
fontWeight: 400,
fontSize: { xs: '14px', md: '18px' },
mb: 2,
color: '#5F6868',
whiteSpace: 'pre-line' // هذا يسمح بكسر السطر عند المسافات
}}
>
<Box component="span" sx={{ fontWeight: 600, fontSize: '18px' }}>Sorry!</Box>{' '}
There is no campaign available.
Please initiate the {'\n'}creation of a new campaign.
</Typography>
{/* Action Button */}
<Button
variant="contained"
startIcon={<AddIcon />}
sx={{
textTransform: 'none',
px: 4,
py: 1.5,
fontSize: '13px',
fontWeight: 500,
borderRadius: 2,
color:'white',
width:179
}}
>
Add a Product
</Button>
</CardContent>
</Card>
</>
);
};
export default NoProdectDash;

434
src/components/Home/Inventory/ProductEntry.js Normal file
عرض الملف

@@ -0,0 +1,434 @@
import React, { useState, useEffect } from 'react';
import {
Box,
Typography,
TextField,
Button,
styled,
useTheme,
MenuItem,
Radio,
RadioGroup,
FormControlLabel,
Radio as MuiRadio
} from '@mui/material';
import axios from 'axios';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import TableView from './TableView';
const ProductEntry = ({ onAdd, onShowTable }) => {
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 [selectedBranch, setSelectedBranch] = useState('default');
const [branches, setBranches] = useState([
{ label: 'Damascus Branch', value: 'damascus' },
{ label: 'Aleppo Branch', value: 'aleppo' },
{ label: 'Homs Branch', value: 'homs' }
]);
const [expirationDate, setExpirationDate] = useState(null);
const [consumptionStatus, setConsumptionStatus] = useState(false);
const [showTable, setShowTable] = useState(false);
const [products, setProducts] = useState([]);
// حالات جديدة للحفظ
const [stocksLevel, setStocksLevel] = useState('');
const [productCategory, setProductCategory] = useState('default');
const [supplierName, setSupplierName] = useState('');
const [supplierNumber, setSupplierNumber] = useState('');
const [productPrice, setProductPrice] = useState('');
const [phoneNumber, setPhoneNumber] = useState('');
const [productCost, setProductCost] = useState('');
// قائمة فئات المنتجات
const productCategories = [
{ label: 'Food', value: 'food' },
{ label: 'Beverages', value: 'beverages' },
{ label: 'Electronics', value: 'electronics' },
{ label: 'Clothing', value: 'clothing' },
];
const handleShowTable = () => {
setShowTable(true);
};
useEffect(() => {
axios.get('https://mocki.io/v1/0b9d4121-d7e7-42f4-b1d5-b14f82e35b69')
.then((response) => {
setBranches(response.data);
})
.catch((error) => {
console.error('Error fetching branches:', error);
});
const savedData = localStorage.getItem('productEntryData');
if (savedData) {
const data = JSON.parse(savedData);
setFullName(data.fullName || '');
setUsername(data.username || '');
setEmail(data.email || '');
setSelectedBranch(data.selectedBranch || 'default');
setExpirationDate(data.expirationDate ? new Date(data.expirationDate) : null);
setConsumptionStatus(data.consumptionStatus || false);
setStocksLevel(data.stocksLevel || '');
setProductCategory(data.productCategory || 'default');
setSupplierName(data.supplierName || '');
setSupplierNumber(data.supplierNumber || '');
setProductPrice(data.productPrice || '');
setPhoneNumber(data.phoneNumber || '');
}
}, []);
useEffect(() => {
const dataToSave = {
fullName,
username,
email,
selectedBranch,
expirationDate: expirationDate ? expirationDate.toISOString() : null,
consumptionStatus,
stocksLevel,
productCategory,
supplierName,
supplierNumber,
productPrice,
phoneNumber,
};
localStorage.setItem('productEntryData', JSON.stringify(dataToSave));
}, [
fullName,
username,
email,
selectedBranch,
expirationDate,
consumptionStatus,
stocksLevel,
productCategory,
supplierName,
supplierNumber,
productPrice,
phoneNumber,
]);
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', placeholder = '') => (
<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={placeholder}
type={type}
value={value}
onChange={onChange}
variant="outlined"
fullWidth
sx={customInputStyle}
/>
</Box>
);
const renderSelectField = (label, value, onChange, options = []) => (
<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
select
value={value}
onChange={onChange}
fullWidth
sx={customInputStyle}
>
<MenuItem value="default" disabled sx={{ color: '#9e9e9e' }}>
Select {label}...
</MenuItem>
{options.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
</Box>
);
const handleSave = () => {
// احصل على أكبر رقم منتج موجود في القائمة
const maxProductNumber = products.length > 0
? Math.max(...products.map(p => Number(p.username) || 0))
: 0;
const newProductNumber = maxProductNumber + 1;
const newProduct = {
fullName,
username: newProductNumber.toString(), // هنا رقم المنتج يتزاد تلقائياً
email,
selectedBranch,
expirationDate: expirationDate ? expirationDate.toISOString().split('T')[0] : '',
consumptionStatus,
stocksLevel,
productCategory,
supplierName,
supplierNumber,
productPrice,
phoneNumber,
productCost,
};
// أضف المنتج الجديد لقائمة المنتجات
setProducts(prev => [...prev, newProduct]);
// استدعي دالة onAdd إن كانت موجودة
if (onAdd) {
onAdd(newProduct);
}
// إعادة تعيين الحقول (يمكنك إزالة إعادة تعيين username لأنه أصبح تلقائي)
setFullName('');
setEmail('');
setSelectedBranch('default');
setExpirationDate(null);
setConsumptionStatus(false);
setStocksLevel('');
setProductCategory('default');
setSupplierName('');
setSupplierNumber('');
setProductPrice('');
setPhoneNumber('');
setProductCost('');
};
return (
<Box
sx={{
p: { xs: 2, sm: 3 },
backgroundColor: '#FFFFFF',
maxWidth: { xs: '90%', md: '100%' },
borderRadius: 2,
}}
>
{/* الحقول النصية */}
<Box sx={{ mb: 3 }}>
{/* السطر الأول: Product Name + Barcode Maker */}
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2, mb: 2 }}>
{renderField('Product Name', fullName, (e) => setFullName(e.target.value), 'text', 'Pizza')}
{renderField('Barcode Maker', email, (e) => setEmail(e.target.value), 'text', '12344')}
</Box>
{/* السطر الثاني: Branch Select + Product Number */}
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2, mb: 2 }}>
{renderField('Product Number', username, (e) => setUsername(e.target.value), 'text', '#123')}
{renderSelectField('Branch Select', selectedBranch, (e) => setSelectedBranch(e.target.value), branches)}
</Box>
{/* السطر الثالث: Expiration Date + Consumption Status */}
<Box
sx={{
display: 'flex',
flexWrap: 'wrap',
gap: 2,
mb: 2,
alignItems: 'center',
}}
>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<Box
sx={{
flex: 1,
minWidth: { xs: '100%', sm: '45%' },
display: 'flex',
flexDirection: 'column',
gap: 1,
}}
>
<Typography
variant="body2"
sx={{ fontWeight: '500', fontSize: '16px', mb: 1 }}
>
Expiration Date
</Typography>
<DatePicker
value={expirationDate}
onChange={(newValue) => setExpirationDate(newValue)}
renderInput={(params) => (
<TextField
{...params}
fullWidth
sx={{
'& .MuiOutlinedInput-root': {
borderRadius: '2px !important',
transition: '0.3s',
'&.Mui-focused fieldset': {
borderColor: theme.palette.primary.main,
boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)',
},
},
'& fieldset': {
borderRadius: '20px !important',
},
flex: 1,
minWidth: { xs: '100%', sm: '45%' },
display: 'flex',
flexDirection: 'column',
gap: 1,
}}
/>
)}
/>
</Box>
</LocalizationProvider>
<Box sx={{ flex: 1, minWidth: { xs: '100%', sm: '45%' } }}>
<Typography
variant="body2"
sx={{ fontWeight: '500', fontSize: '16px', mb: 1 }}
>
Consumption Status
</Typography>
<RadioGroup
row
aria-label="consumption-status"
name="row-radio-buttons-group"
value={consumptionStatus ? 'yes' : 'no'}
onChange={(e) => setConsumptionStatus(e.target.value === 'yes')}
>
<FormControlLabel
value="yes"
control={<MuiRadio />}
label="Yes"
/>
<FormControlLabel
value="no"
control={<MuiRadio />}
label="No"
/>
</RadioGroup>
</Box>
</Box>
{/* السطر الرابع: Stocks Level + Product Category */}
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2, mb: 2 }}>
{renderField('Stocks Level', stocksLevel, (e) => setStocksLevel(e.target.value), 'number', 'Enter level')}
{renderSelectField('Product Category', productCategory, (e) => setProductCategory(e.target.value), productCategories)}
</Box>
{/* السطر الخامس: Supplier Name + Supplier Number */}
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2, mb: 2 }}>
{renderField('Supplier Name', supplierName, (e) => setSupplierName(e.target.value), 'text', 'Supplier XYZ')}
{renderField('Supplier Number', supplierNumber, (e) => setSupplierNumber(e.target.value), 'text', '0900-78601')}
</Box>
{/* السطر السادس: Product Price + Phone Number */}
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2, mb: 3 }}>
{renderField('Product Price', productPrice, (e) => setProductPrice(e.target.value), 'number', '$200')}
{renderField('Product Cost', productCost, (e) => setProductCost(e.target.value), 'number', '$230')}
</Box>
{/* زر الحفظ */}
<Box
sx={{
display: 'flex',
justifyContent: 'flex-end',
mb: 2,
gap:2
}}
>
<Button
variant="contained"
onClick={handleSave}
sx={{
width: '150px',
height: '50px',
backgroundColor: theme.palette.primary.main,
color: 'white',
borderRadius: '10px',
fontWeight: 'bold',
fontSize: '16px',
textTransform: 'none',
'&:hover': {
backgroundColor: theme.palette.primary.dark,
},
}}
>
Save Product
</Button>
<Button
variant="outlined"
onClick={onShowTable}
sx={{
width: '150px',
height: '50px',
borderRadius: '10px',
fontWeight: 'bold',
fontSize: '16px',
textTransform: 'none',
color: theme.palette.primary.main,
borderColor: theme.palette.primary.main,
'&:hover': {
backgroundColor: theme.palette.primary.main,
color: '#fff',
borderColor: theme.palette.primary.dark,
},
}}
>
Show Table
</Button>
</Box>
</Box>
</Box>
);
};
export default ProductEntry;

498
src/components/Home/Inventory/TableView.js Normal file
عرض الملف

@@ -0,0 +1,498 @@
import React, { useState } from 'react';
import { useTheme } from '@mui/material/styles';
import {
useMediaQuery,
Box,
Typography,
Paper,
Table,
TableBody,
TableCell,
TableHead,
TableRow,
Chip,
Pagination,
Button,
Avatar,
TableContainer,
TextField,
IconButton,
} from '@mui/material';
import AssignmentIcon from '@mui/icons-material/Assignment';
import DriveFileRenameOutlineSharpIcon from '@mui/icons-material/DriveFileRenameOutlineSharp';
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
import CloseIcon from '@mui/icons-material/Close';
import { green } from '@mui/material/colors';
import jsPDF from 'jspdf';
import autoTable from 'jspdf-autotable';
import * as XLSX from 'xlsx';
import { saveAs } from 'file-saver';
import TuneIcon from '@mui/icons-material/Tune';
const TableView = ({ data = [], onAddNewProduct }) => {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
const itemsPerPage = 5;
const [currentPage, setCurrentPage] = useState(1);
const [showSearch, setShowSearch] = useState(false);
const [searchTerm, setSearchTerm] = useState('');
// فلترة البيانات بناءً على نص البحث (غير حساس لحالة الأحرف)
const filteredData = data.filter((item) =>
item.product.toLowerCase().includes(searchTerm.toLowerCase())
);
const pageCount = Math.ceil(filteredData.length / itemsPerPage);
const paginatedData = filteredData.slice(
(currentPage - 1) * itemsPerPage,
currentPage * itemsPerPage
);
const handleSearchChange = (e) => {
setSearchTerm(e.target.value);
setCurrentPage(1); // العودة للصفحة الأولى عند تغيير البحث
};
const handleExportPDF = () => {
const doc = new jsPDF();
doc.setFontSize(14);
doc.text('Top Selling Products', 14, 20);
const tableColumn = ['No.', 'Product', 'Sales', 'Amount', 'Price', 'Expiration', 'Status'];
const tableRows = data.map((row, i) => ([
i + 1,
row.product,
row.sales,
`$${row.amount}`,
`$${row.price}`,
row.expiration,
row.status
]));
autoTable(doc, {
startY: 30,
head: [tableColumn],
body: tableRows,
styles: { fontSize: 10 },
headStyles: { fillColor: [240, 240, 240] }
});
doc.save('top_selling_products.pdf');
};
const handleExportSpreadsheet = () => {
const wsData = [
['No.', 'Product', 'Sales', 'Amount', 'Price', 'Expiration', 'Status'],
...data.map((row, i) => [
i + 1,
row.product,
row.sales,
`$${row.amount}`,
`$${row.price}`,
row.expiration,
row.status
])
];
const worksheet = XLSX.utils.aoa_to_sheet(wsData);
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, "Top Selling");
const wbout = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
const blob = new Blob([wbout], { type: 'application/octet-stream' });
saveAs(blob, 'top_selling_products.xlsx');
};
return (
<Paper
sx={{
backgroundColor: '#FFFFFF',
maxWidth: { xs: '90%', md: '100%' },
borderRadius: 2,
height: { xs: 'auto', md: '100vh' },
display: 'flex',
flexDirection: 'column',
overflow: 'hidden',
boxShadow: theme.shadows[1],
}}
>
{/* Header */}
<Box
sx={{
display: 'flex',
justifyContent: 'space-between',
alignItems: { xs: 'flex-start', sm: 'center', md: 'center' },
mb: 3,
pl: { xs: 1, sm: 3 },
pt:2,
pr: { xs: 1, sm: 3 },
flexDirection: { xs: 'column', sm: 'row', md: 'row' },
gap: { xs: 2, sm: 0 }
}}
>
<Typography variant="h6" sx={{ fontSize: { xs: '1rem', sm: '1.25rem' } }}>
Table View
</Typography>
<Box
display="flex"
gap={1}
flexWrap={{ xs: 'wrap', sm: 'nowrap' }}
width={{ xs: '100%', sm: 'auto' }}
justifyContent={{ xs: 'space-between', sm: 'flex-end' }}
>
{/* زر إضافة منتج جديد */}
<Button
variant="contained"
color="primary"
onClick={onAddNewProduct}
sx={{
textTransform: 'none',
borderRadius: '8px',
height: '40px',
width: { xs: '100%', sm: 'auto' },
fontSize: { xs: '12px', sm: '14px' },
fontWeight: 600,
}}
>
Add New Product
</Button>
{/* زر تصدير جدول (Spreadsheet) */}
<Button
variant="contained"
sx={{
textTransform: 'none',
color: 'white',
backgroundColor: '#5F6868',
boxShadow: 'none',
borderRadius: '8px',
height: '40px',
width: { xs: '48%', sm: '140px', md: '166px' },
fontSize: { xs: '12px', sm: '13px', md: '14px' },
fontWeight: 600,
p: 0,
m: 0,
whiteSpace: 'nowrap',
minWidth: 'unset',
}}
onClick={handleExportSpreadsheet}
>
{isMobile ? 'Export' : 'Export Spreadsheet'}
</Button>
{/* زر PDF */}
<Button
variant="contained"
sx={{
textTransform: 'none',
color: 'white',
backgroundColor: theme.palette.primary.main,
boxShadow: 'none',
borderRadius: '8px',
height: '40px',
width: { xs: '48%', sm: '90px', md: '105px' },
fontSize: { xs: '12px', sm: '13px', md: '14px' },
fontWeight: 600,
p: 0,
m: 0,
whiteSpace: 'nowrap',
minWidth: 'unset',
}}
onClick={handleExportPDF}
>
Export PDF
</Button>
{/* زر الفلاتر */}
<Button
variant="outlined"
sx={{
textTransform: 'none',
color: '#667085',
borderColor: '#e0e0e0',
backgroundColor: '#fff',
borderRadius: '8px',
height: '40px',
width: { xs: '100%', sm: '120px', md: '99px' },
fontSize: { xs: '12px', sm: '13px', md: '14px' },
fontWeight: 600,
p: 0,
m: 0,
whiteSpace: 'nowrap',
minWidth: 'unset',
}}
startIcon={<TuneIcon fontSize={isMobile ? 'small' : 'medium'} />}
>
{isMobile ? '' : 'Filters'}
</Button>
</Box>
</Box>
{/* جدول البيانات */}
<TableContainer
sx={{
flexGrow: 1,
overflowX: 'auto',
maxHeight: { xs: '60vh', md: 'calc(100vh - 160px)' },
'&::-webkit-scrollbar': { height: 4 },
}}
>
<Table
size={isMobile ? 'small' : 'medium'}
sx={{
minWidth: 750,
'& .MuiTableCell-root': {
borderBottom: '1px solid #e0e0e0',
py: { xs: 0.5, sm: 1.5 },
},
'& thead .MuiTableCell-root': {
borderBottom: 'none',
fontWeight: 600,
fontSize: { xs: '11px', sm: '14px' },
px: { xs: 0.5, sm: 2 },
},
}}
>
<TableHead sx={{ backgroundColor: '#F0F1F3' }}>
<TableRow sx={{ height: { xs: '6vh', sm: '10vh' } }}>
<TableCell width="6%">No.</TableCell>
<TableCell width="20%" sx={{ position: 'relative' }}>
<Box
sx={{ display: 'flex', alignItems: 'center', gap: 1, cursor: 'pointer', userSelect: 'none' }}
onClick={() => setShowSearch(prev => !prev)}
>
<Typography>Product Name</Typography>
<ArrowDropDownIcon
fontSize="small"
sx={{
transform: showSearch ? 'rotate(180deg)' : 'rotate(0deg)',
transition: 'transform 0.3s ease',
}}
/>
</Box>
{showSearch && (
<TextField
size="small"
variant="outlined"
placeholder="Search product..."
value={searchTerm}
onChange={handleSearchChange}
sx={{ mt: 1, width: '100%' }}
InputProps={{
endAdornment: searchTerm && (
<IconButton
size="small"
onClick={() => setSearchTerm('')}
aria-label="Clear search"
>
<CloseIcon fontSize="small" />
</IconButton>
),
}}
/>
)}
</TableCell>
{!isMobile && <TableCell width="10%">Barcode</TableCell>}
<TableCell width="10%">Branch</TableCell>
{!isMobile && <TableCell width="10%">Expiration</TableCell>}
{!isMobile && <TableCell width="15%">Stock Quantity </TableCell>}
<TableCell width="15%">Consumption Status</TableCell>
<TableCell width="10%" align="center">
Action
</TableCell>
</TableRow>
</TableHead>
<TableBody
sx={{
'& .MuiTableCell-root': {
px: { xs: 2, sm: 3 },
},
}}
>
{paginatedData.length > 0 ? (
paginatedData.map((row, i) => (
<TableRow key={i} sx={{ height: { xs: '8vh', sm: '13vh' } }}>
<TableCell sx={{ fontSize: { xs: '11px', sm: '14px' } }}>
{(currentPage - 1) * itemsPerPage + i + 1}
</TableCell>
<TableCell>
<Box
sx={{
display: 'flex',
alignItems: 'center',
gap: { xs: 1, sm: 2 },
}}
>
<Avatar
sx={{
bgcolor: green[50],
width: { xs: 28, sm: 40 },
height: { xs: 28, sm: 40 },
}}
variant="rounded"
>
<AssignmentIcon
fontSize={isMobile ? 'small' : 'medium'}
/>
</Avatar>
<Box
sx={{
fontSize: { xs: '11px', sm: '14px' },
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
maxWidth: { xs: '80px', sm: '200px' },
}}
>
{row.product}
</Box>
</Box>
</TableCell>
{!isMobile && (
<TableCell sx={{ fontSize: { xs: '11px', sm: '14px' } }}>
{row.sales}
</TableCell>
)}
<TableCell sx={{ fontSize: { xs: '11px', sm: '14px' } }}>
${row.amount.toLocaleString()}
</TableCell>
{!isMobile && (
<TableCell sx={{ fontSize: { xs: '11px', sm: '14px' } }}>
${row.price}
</TableCell>
)}
{!isMobile && (
<TableCell sx={{ fontSize: { xs: '11px', sm: '14px' } }}>
{row.expiration}
</TableCell>
)}
<TableCell>
<Chip
label={isMobile ? row.status.substring(0, 3) : row.status}
size={isMobile ? 'small' : 'medium'}
sx={{
fontSize: { xs: '10px', sm: '14px' },
fontWeight: 600,
backgroundColor:
row.status === 'Published'
? '#E7F4EE'
: row.status === 'Low Stock'
? '#FDF1E8'
: row.status === 'Out of Stock'
? '#FFCDD2'
: '#E0E0E0',
color:
row.status === 'Published'
? '#0D894F'
: row.status === 'Low Stock'
? '#E46A11'
: row.status === 'Out of Stock'
? '#C62828'
: '#424242',
minWidth: { xs: '50px', sm: '100px' },
}}
/>
</TableCell>
<TableCell align="center">
<Button
variant="text"
size="small"
onClick={() => console.log('Edit', row)}
sx={{ minWidth: 0, padding: 0 }}
>
<DriveFileRenameOutlineSharpIcon
fontSize={isMobile ? 'small' : 'medium'}
sx={{ color: '#5F6868' }}
/>
</Button>
</TableCell>
</TableRow>
))
) : (
<TableRow>
<TableCell colSpan={8} align="center" sx={{ py: 5 }}>
No products found.
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
</TableContainer>
{/* Pagination Footer */}
<Box
display="flex"
justifyContent="space-between"
alignItems="center"
p={{ xs: 1, sm: 2 }}
sx={{
position: 'sticky',
bottom: 0,
backgroundColor: theme.palette.background.paper,
borderTop: '1px solid #f0f0f0',
zIndex: 1,
}}
>
<Typography
variant="body2"
color="text.secondary"
sx={{
fontSize: { xs: '11px', sm: '14px' },
whiteSpace: 'nowrap',
}}
>
Showing{' '}
{(currentPage - 1) * itemsPerPage + 1} to{' '}
{Math.min(currentPage * itemsPerPage, filteredData.length)} of{' '}
{filteredData.length}
</Typography>
<Pagination
count={pageCount}
page={currentPage}
onChange={(event, value) => setCurrentPage(value)}
size={isMobile ? 'small' : 'medium'}
sx={{
'& .MuiPaginationItem-root': {
fontSize: { xs: '12px', sm: '14px' },
minWidth: { xs: 24, sm: 32 },
height: { xs: 24, sm: 32 },
backgroundColor: '#FFECE0',
color: theme.palette.primary.main,
borderRadius: '8px',
'&.Mui-selected': {
backgroundColor: theme.palette.primary.main,
color: '#fff',
},
'&:hover': {
backgroundColor: '#FFD6B5',
},
},
}}
/>
</Box>
</Paper>
);
};
export default TableView;