diff --git a/package-lock.json b/package-lock.json index 08ae0d2..e7896bd 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index fe33f01..77f859f 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "^16.3.0", "@testing-library/user-event": "^13.5.0", + "axios": "^1.9.0", "react": "^19.1.0", "react-circular-progressbar": "^2.2.0", "react-dom": "^19.1.0", diff --git a/public/images/createProfile/BasicInf.png b/public/images/createProfile/BasicInf.png new file mode 100644 index 0000000..0e84038 Binary files /dev/null and b/public/images/createProfile/BasicInf.png differ diff --git a/public/images/createProfile/BusinessHours.png b/public/images/createProfile/BusinessHours.png new file mode 100644 index 0000000..24b19cf Binary files /dev/null and b/public/images/createProfile/BusinessHours.png differ diff --git a/public/images/createProfile/Confirmation.png b/public/images/createProfile/Confirmation.png new file mode 100644 index 0000000..2ff8948 Binary files /dev/null and b/public/images/createProfile/Confirmation.png differ diff --git a/public/images/createProfile/ContactInf.png b/public/images/createProfile/ContactInf.png new file mode 100644 index 0000000..86d11f8 Binary files /dev/null and b/public/images/createProfile/ContactInf.png differ diff --git a/public/images/createProfile/Equipment.png b/public/images/createProfile/Equipment.png new file mode 100644 index 0000000..d69c6ae Binary files /dev/null and b/public/images/createProfile/Equipment.png differ diff --git a/public/images/createProfile/MenuUpload.png b/public/images/createProfile/MenuUpload.png new file mode 100644 index 0000000..e533047 Binary files /dev/null and b/public/images/createProfile/MenuUpload.png differ diff --git a/public/images/createProfile/Successful.png b/public/images/createProfile/Successful.png new file mode 100644 index 0000000..4afe6dd Binary files /dev/null and b/public/images/createProfile/Successful.png differ diff --git a/public/images/createProfile/TypeOfRestaurant.png b/public/images/createProfile/TypeOfRestaurant.png new file mode 100644 index 0000000..2767370 Binary files /dev/null and b/public/images/createProfile/TypeOfRestaurant.png differ diff --git a/public/images/createProfile/UploadPhotos.png b/public/images/createProfile/UploadPhotos.png new file mode 100644 index 0000000..4d27e36 Binary files /dev/null and b/public/images/createProfile/UploadPhotos.png differ diff --git a/src/components/Authentication/SignUp_In/LoginForm.js b/src/components/Authentication/SignUp_In/LoginForm.js index ee7b8a3..a372f76 100644 --- a/src/components/Authentication/SignUp_In/LoginForm.js +++ b/src/components/Authentication/SignUp_In/LoginForm.js @@ -191,6 +191,7 @@ const LoginForm = () => { fullWidth onClick={handleLogin} sx={{ + fontFamily: 'PlusJakartaSans' , fontWeight: 600, fontSize: { xs: '14px', sm: '16px' }, height: { xs: '45px', sm: '52px' }, @@ -210,7 +211,7 @@ const LoginForm = () => { {/* Divider */} - + Or @@ -233,6 +234,7 @@ const LoginForm = () => { borderColor: 'black', backgroundColor: 'transparent' } + , fontFamily: 'PlusJakartaSans' }} > @@ -262,6 +264,7 @@ const LoginForm = () => { borderColor: 'black', backgroundColor: 'transparent' } + , fontFamily: 'PlusJakartaSans' }} > diff --git a/src/components/Home/AppBar.js b/src/components/Home/AppBar.js index b4ca373..4dc6987 100644 --- a/src/components/Home/AppBar.js +++ b/src/components/Home/AppBar.js @@ -87,7 +87,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 // إضافة هامش أفقي إذا لزم الأمر }} /> )} diff --git a/src/components/Home/RestaurantProfile/RestaurantProfile.js b/src/components/Home/RestaurantProfile/RestaurantProfile.js index 020a5b9..b5ba92f 100644 --- a/src/components/Home/RestaurantProfile/RestaurantProfile.js +++ b/src/components/Home/RestaurantProfile/RestaurantProfile.js @@ -1,34 +1,50 @@ import React, { useState, useEffect } from 'react'; -import { Box, useTheme, useMediaQuery, Typography } from '@mui/material'; +import { Box, useTheme, useMediaQuery } from '@mui/material'; import KitchPlusAppBar from '../AppBar'; import Sidebar from '../SideHome'; +import LoginRestaurant from './contcet/LoginRestaurant'; +import BasicInformation from './contcet/BasicInformation'; +import ContactInformation from './contcet/ContactInformation'; +import BusinessHours from './contcet/BusinessHours'; +import UploadMenu from './contcet/UploadMenu'; +import Equipment from './contcet/Equipment'; +import TypeOfRestaurant from './contcet/TypeOfRestaurant'; +import OperationalCapacity from './contcet/OperationalCapacity'; +import UploadPhotos from './contcet/UploadPhotos'; +import SideProfile from './SideProfile'; const drawerWidth = 230; const RestaurantProfile = () => { const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down('sm')); - const [hasProducts, setHasProducts] = useState(false); // حالة لتتبع وجود المنتجات + const [hasProducts, setHasProducts] = useState(false); const [sidebarOpen, setSidebarOpen] = useState(!isMobile); - // محاكاة للتحقق من وجود المنتجات (استبدل هذا بمنطقك الفعلي) + // ⬇️ إدارة الخطوة الحالية + const [currentStep, setCurrentStep] = useState(0); + + const steps = [ + setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />, + setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />, + setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />, + setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />, + setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />, + setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />, + setCurrentStep(currentStep + 1)} onBack={() => setCurrentStep(currentStep - 1)} />, + 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} /> - RestaurantProfile + + + + + + setCurrentStep(prev => Math.max(prev - 1, 0))} + /> + + + + + + + + {steps[currentStep]} + + + + ); }; -export default RestaurantProfile; \ No newline at end of file +export default RestaurantProfile; diff --git a/src/components/Home/RestaurantProfile/SideProfile.js b/src/components/Home/RestaurantProfile/SideProfile.js new file mode 100644 index 0000000..e7508c0 --- /dev/null +++ b/src/components/Home/RestaurantProfile/SideProfile.js @@ -0,0 +1,163 @@ +import React from 'react'; +import { Box, Typography, Stack, Button, useTheme } from '@mui/material'; +import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'; + +const steps = [ + { title: 'Basic Information', icon: '/images/createProfile/BasicInf.png' }, + { title: 'Contact Information', icon: '/images/createProfile/ContactInf.png' }, + { title: 'Business Hours', icon: '/images/createProfile/BusinessHours.png' }, + { title: 'Menu Upload', icon: '/images/createProfile/MenuUpload.png' }, + { title: 'Available Equipment', icon: '/images/createProfile/equipment.png' }, + { title: 'Operational Capacity', icon: '/images/icons/rocket.png' }, + { title: 'Type of Restaurant', icon: '/images/createProfile/TypeOfRestaurant.png' }, + { title: 'Upload Photos', icon: '/images/createProfile/UploadPhotos.png' }, + { title: 'Submit & Confirmation', icon: '/images/createProfile/Confirmation.png' }, +]; + +const SideProfile = ({ currentStepIndex = 0, onBack }) => { + const theme = useTheme(); + + return ( + + {/* العنوان الرئيسي */} + + Restaurant Registration Flow + + + Complete this process to register your restaurant on our amazing food platform. + + + {/* الخطوات */} + + {steps.map((step, index) => ( + + {/* الخط الرأسي بين الدوائر */} + {index !== steps.length - 1 && ( + + )} + + {/* محتوى كل خطوة */} + + {/* الدائرة بالأيقونة */} + + {/* الدائرة الخلفية - تظهر دائمًا */} + + + {/* الدائرة الأمامية بالأيقونة */} + + {step.title} + + + + {/* العنوان */} + + {step.title} + + + + ))} + + + {/* زر الرجوع */} + + + + + ); +}; + +export default SideProfile; diff --git a/src/components/Home/RestaurantProfile/contcet/BasicInformation.js b/src/components/Home/RestaurantProfile/contcet/BasicInformation.js new file mode 100644 index 0000000..19eb41c --- /dev/null +++ b/src/components/Home/RestaurantProfile/contcet/BasicInformation.js @@ -0,0 +1,136 @@ +import React from 'react'; +import { Box, Typography, Stack, Button, useTheme, TextField } from '@mui/material'; + +const BasicInformation = ({ currentStepIndex = 0, onNext, onBack }) => { + const theme = useTheme(); + + return ( + + + + Basic Information + + + + Enter your basic information to proceed to registration of your own restaurant on this platform + + + + {/* 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) => ( + + + {field.label} + + + + ))} + + + + + + {/* زر Back تحت زر Next */} + + + + + + ); +}; + +export default BasicInformation; diff --git a/src/components/Home/RestaurantProfile/contcet/BusinessHours.js b/src/components/Home/RestaurantProfile/contcet/BusinessHours.js new file mode 100644 index 0000000..8341452 --- /dev/null +++ b/src/components/Home/RestaurantProfile/contcet/BusinessHours.js @@ -0,0 +1,207 @@ +import React, { useState } from 'react'; +import { + Box, + Typography, + Stack, + Button, + useTheme, + TextField, + Checkbox, + FormGroup, + FormControlLabel +} from '@mui/material'; + +const BusinessHours = ({ currentStepIndex = 0, onNext, onBack }) => { + const theme = useTheme(); + + const [selectedDays, setSelectedDays] = useState([]); + + const handleCheckboxChange = (day) => { + setSelectedDays((prev) => + prev.includes(day) + ? prev.filter((d) => d !== day) + : [...prev, day] + ); + }; + + const days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']; + + return ( + + + + Business Hours + + + + + Enter your business hours to proceed to registration of your own restaurant on this platform + + + + {/* Operational Hours Input */} + + + Operational Hours + + + + + {/* Checkboxes for Days of the Week */} + + + Closed Days + + + {days.map((day) => { + const isChecked = selectedDays.includes(day); + return ( + handleCheckboxChange(day)} + sx={{ + transform: 'scale(1.5)', + color: '#F0EDED', + '&.Mui-checked': { + color: '#FF914D', + }, + }} + /> + } + label={ + + {day} + + } + sx={{ + m: 0, + width: { xs: '45%', sm: '30%', md: '22%' }, + }} + /> + ); + })} + + + + {/* Next Button */} + + + + + {/* زر Back تحت زر Next */} + + + + + + ); +}; + +export default BusinessHours; diff --git a/src/components/Home/RestaurantProfile/contcet/ConfirmationDialog.js b/src/components/Home/RestaurantProfile/contcet/ConfirmationDialog.js new file mode 100644 index 0000000..ed1108a --- /dev/null +++ b/src/components/Home/RestaurantProfile/contcet/ConfirmationDialog.js @@ -0,0 +1,180 @@ +import React from 'react'; +import { + Dialog, + DialogTitle, + DialogContent, + DialogContentText, + DialogActions, + Button, + Box, + Typography, + useTheme, + Divider +} from '@mui/material'; +import EditIcon from '@mui/icons-material/Edit'; +const ConfirmationDialog = ({ open, onClose, onConfirm }) => { + const theme = useTheme(); + return ( + + + + {/* الدوائر */} + + {/* الدائرة الخلفية */} + + + {/* الدائرة الأمامية مع الأيقونة */} + + Success icon + + + + {/* العنوان بجانب الدائرة */} + + + Register successful! + + + + + + Congratulations! you have registered your restaurant successfully on our platform + + + + + {/* الزر الأول - Filled */} + + + {/* الزر الثاني - Outlined + أيقونة Edit */} + + + + + ); +}; + +export default ConfirmationDialog; \ No newline at end of file diff --git a/src/components/Home/RestaurantProfile/contcet/ContactInformation.js b/src/components/Home/RestaurantProfile/contcet/ContactInformation.js new file mode 100644 index 0000000..c78229c --- /dev/null +++ b/src/components/Home/RestaurantProfile/contcet/ContactInformation.js @@ -0,0 +1,163 @@ +import React from 'react'; +import { Box, Typography, Stack, Button, useTheme, TextField } from '@mui/material'; + +const ContactInformation = ({ currentStepIndex = 0, onNext, onBack }) => { + const theme = useTheme(); + + const handleNext = () => { + if (onNext) { + onNext(); + } + }; + + return ( + + + + Contact Information + + + + Enter your contact information to proceed to registration of your own restaurant on this platform + + + + {/* Phone Number Input */} + + + Phone Number + + + + + {/* Email Input */} + + + Email + + + + {/* Next Button */} + + + + + {/* زر Back تحت زر Next */} + + + + + + ); +}; + +export default ContactInformation; diff --git a/src/components/Home/RestaurantProfile/contcet/Equipment.js b/src/components/Home/RestaurantProfile/contcet/Equipment.js new file mode 100644 index 0000000..5aa3c55 --- /dev/null +++ b/src/components/Home/RestaurantProfile/contcet/Equipment.js @@ -0,0 +1,163 @@ +import React from 'react'; +import { Box, Typography, Stack, Button, useTheme, TextField } from '@mui/material'; +import AddIcon from '@mui/icons-material/Add'; +import { useNavigate } from 'react-router-dom'; + +const Equipment = ({ currentStepIndex = 0, onNext, onBack }) => { + const theme = useTheme(); + const navigate = useNavigate(); + + const handleNext = () => { + if (onNext) onNext(); + else navigate('/dashboard'); + }; + + return ( + + + + Equipment + + + + + Enter your kitchen equipment details to complete your restaurant registration. + + + + {/* Oven Input */} + + + {/* Grill Input */} + + + {/* Refrigerators Input */} + + + {/* Add More Equipment Button */} + + + + + {/* Next Button */} + + + + + {/* زر Back تحت زر Next */} + + + + + + ); +}; + +// مكون فرعي لتقليل التكرار في الحقول +const InputField = ({ label, placeholder, theme }) => ( + + + {label} + + + +); + +export default Equipment; diff --git a/src/components/Home/RestaurantProfile/contcet/LoginRestaurant.js b/src/components/Home/RestaurantProfile/contcet/LoginRestaurant.js new file mode 100644 index 0000000..8c91a08 --- /dev/null +++ b/src/components/Home/RestaurantProfile/contcet/LoginRestaurant.js @@ -0,0 +1,261 @@ +import React, { useState } from 'react'; +import { TextField, Button, Typography, Stack, Box, IconButton, InputAdornment } from '@mui/material'; +import { useTheme } from '@mui/material/styles'; +import VisibilityOffOutlinedIcon from '@mui/icons-material/VisibilityOffOutlined'; +import { VisibilityOutlined } from '@mui/icons-material'; +import { useNavigate } from 'react-router-dom'; +import { Link } from 'react-router-dom'; + + +const LoginForm = () => { + + const navigate = useNavigate(); + const theme = useTheme(); + const [showPassword, setShowPassword] = useState(false); + + const handleTogglePassword = () => { + setShowPassword((prev) => !prev); + }; + const handleLogin = () => { + // بعد تنفيذ عملية تسجيل الدخول بنجاح، يتم التوجيه + navigate('/dashboard'); + }; + return ( + + + + + {/* Login Content */} + + + + + + + + Login + + + + Enter your username and password to access your account securely. Welcome back to our service! + + + {/* Email Input */} + + + Email + + + + + {/* Password Input */} + + + Password + + + + {showPassword ? : } + + + ) + }} + /> + + + {/* Login Button */} + + + + + {/* Divider */} + + + + Or + + + + + {/* Google Button */} + + + + + + {/* Register Link */} + + Don’t have an account?{' '} + + Register + + + + + + + + + ); +}; + +export default LoginForm; diff --git a/src/components/Home/RestaurantProfile/contcet/OperationalCapacity.js b/src/components/Home/RestaurantProfile/contcet/OperationalCapacity.js new file mode 100644 index 0000000..8d10217 --- /dev/null +++ b/src/components/Home/RestaurantProfile/contcet/OperationalCapacity.js @@ -0,0 +1,213 @@ +import React from 'react'; +import { Box, Typography, Stack, Button, useTheme, TextField } from '@mui/material'; + +const OperationalCapacity = ({ currentStepIndex = 0, onNext, onBack }) => { + const theme = useTheme(); + + return ( + + + + Operational Capacity + + + + Enter your basic information to proceed to registration of your own restaurant on this platform + + + + {/* Maximum Orders Per Day Input */} + + + Maximum Orders Per Day + + + + + {/* Number of Cheff Input */} + + + Number of Cheff + + + + + {/* Number of Waiters Input */} + + + Number of Waiters + + + + + {/* Number of Kitchen Assistant Input */} + + + Number of Kitchen Assistant + + + + + {/* Buttons */} + + + + + {/* زر Back تحت زر Next */} + + + + + + ); +}; + +export default OperationalCapacity; diff --git a/src/components/Home/RestaurantProfile/contcet/TypeOfRestaurant.js b/src/components/Home/RestaurantProfile/contcet/TypeOfRestaurant.js new file mode 100644 index 0000000..3c01e7f --- /dev/null +++ b/src/components/Home/RestaurantProfile/contcet/TypeOfRestaurant.js @@ -0,0 +1,165 @@ +// TypeOfRestaurant.jsx +import React from 'react'; +import { + Box, + Typography, + Stack, + Button, + useTheme, + TextField +} from '@mui/material'; + +const TypeOfRestaurant = ({ currentStepIndex = 0, onNext, onBack }) => { + const theme = useTheme(); + + return ( + + + {/* العنوان */} + + Type of Restaurant + + + {/* الوصف */} + + + Enter your restaurant type you want to collaborate to proceed to registration of your own restaurant on this platform + + + + {/* الحقول */} + + + Open to Host Restaurant/Cousin type* + + + + + + + Select Restaurant type Willing to Collaborate With + + + + + + + + {/* زر Back تحت زر Next */} + + + + + + ); +}; + +export default TypeOfRestaurant; diff --git a/src/components/Home/RestaurantProfile/contcet/UploadMenu.js b/src/components/Home/RestaurantProfile/contcet/UploadMenu.js new file mode 100644 index 0000000..2d012c2 --- /dev/null +++ b/src/components/Home/RestaurantProfile/contcet/UploadMenu.js @@ -0,0 +1,240 @@ +import React from 'react'; +import { + Box, + Typography, + Stack, + Button, + useTheme, + TextField +} from '@mui/material'; +import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'; + +const UploadMenu = ({ currentStepIndex = 0, onNext, onBack }) => { + const theme = useTheme(); + + return ( + + + + Upload Menu + + + + + Enter your basic information to proceed to registration of your own restaurant on this platform + + + + {/* Item Name Input */} + + + Item Name + + + + + {/* Price Input */} + + + Price + + + + + {/* Description Input */} + + + Description + + + + + {/* OR Separator */} + + + + + OR + + + + + {/* Upload Menu Picture */} + + Upload Menu Picture + + + + + {/* Buttons: Back and Next */} + + + + + {/* زر Back تحت زر Next */} + + + + + + ); +}; + +export default UploadMenu; diff --git a/src/components/Home/RestaurantProfile/contcet/UploadPhotos.js b/src/components/Home/RestaurantProfile/contcet/UploadPhotos.js new file mode 100644 index 0000000..449be11 --- /dev/null +++ b/src/components/Home/RestaurantProfile/contcet/UploadPhotos.js @@ -0,0 +1,183 @@ +import React, { useState } from 'react'; +import { + Box, + Typography, + Stack, + Button, + useTheme +} from '@mui/material'; +import { useNavigate } from 'react-router-dom'; +import ConfirmationDialog from './ConfirmationDialog'; // ✅ استدعاء المودال المنفصل + +const UploadPhotos = ({ currentStepIndex = 0, onNext, onBack }) => { + const theme = useTheme(); + const navigate = useNavigate(); + const [openModal, setOpenModal] = useState(false); + + const handleOpenModal = () => setOpenModal(true); + const handleCloseModal = () => setOpenModal(false); + const handleConfirmNext = () => { + handleCloseModal(); + onNext(); + }; + + return ( + + + + Upload Photos + + + + + Enter your basic information to proceed to registration of your own restaurant on this platform + + + + {/* Kitchen Interior’s */} + + + Kitchen Interior’s + + + + Upload Interior Picture + + + + + + {/* Kitchen Equipment’s */} + + + Kitchen Equipment’s + + + + Upload Equipment Picture + + + + + + {/* Buttons */} + + + + + + + + {/* ✅ Confirmation Modal */} + + + ); +}; + +export default UploadPhotos; diff --git a/src/components/Home/Settings/AccountSettings.js b/src/components/Home/Settings/AccountSettings.js new file mode 100644 index 0000000..fd07243 --- /dev/null +++ b/src/components/Home/Settings/AccountSettings.js @@ -0,0 +1,217 @@ +import React, { useState } from 'react'; +import { + Box, + Typography, + TextField, + Button, + styled, + useTheme +} from '@mui/material'; +import AddAPhotoOutlinedIcon from '@mui/icons-material/AddAPhotoOutlined'; + +const AccountSettings = () => { + const theme = useTheme(); + const [profileImage, setProfileImage] = useState(null); + const [fullName, setFullName] = useState(''); + const [username, setUsername] = useState(''); + const [bio, setBio] = useState(''); + const [email, setEmail] = useState(''); + const [phone, setPhone] = useState(''); + + const handleImageUpload = (event) => { + if (event.target.files && event.target.files[0]) { + setProfileImage(URL.createObjectURL(event.target.files[0])); + } + }; + + const Input = styled('input')({ + display: 'none', + }); + + const customInputStyle = { + '& input': { fontWeight: 500, fontSize: '15px' }, + '& input::placeholder': { color: '#969BA7' }, + '& .MuiOutlinedInput-root': { + borderRadius: '10px', + transition: '0.3s', + '&.Mui-focused fieldset': { + borderColor: theme.palette.primary.main, + boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)', + }, + }, + '& .MuiOutlinedInput-root.Mui-focused': { + borderColor: '#3f51b5', + boxShadow: '0 0 0 2px rgba(63,81,181,0.1)', + }, + }; + + const renderField = (label, value, onChange, type = 'text') => ( + + + {label} + + + + ); + + return ( + + {/* العنوان الرئيسي */} + + Account Setting + + + {/* صورة الملف الشخصي */} + + Your Profile Picture + + + + + + + {/* الحقول النصية */} + + + Personal Information + + + {/* السطر الأول: Full Name + Email */} + + {renderField('Full Name', fullName, (e) => setFullName(e.target.value))} + {renderField('Email', email, (e) => setEmail(e.target.value), 'email')} + + + {/* السطر الثاني: Username + Phone Number */} + + {renderField('Username', username, (e) => setUsername(e.target.value))} + {renderField('Phone Number', phone, (e) => setPhone(e.target.value), 'tel')} + + + {/* الحقل Bio منفصل */} + + + Bio + + setBio(e.target.value)} + fullWidth + multiline + rows={3} + sx={customInputStyle} + /> + + + + {/* الأزرار */} + + + + + + ); +}; + +export default AccountSettings; diff --git a/src/components/Home/Settings/Setting.js b/src/components/Home/Settings/Setting.js index e717d83..a6aa6a2 100644 --- a/src/components/Home/Settings/Setting.js +++ b/src/components/Home/Settings/Setting.js @@ -1,32 +1,16 @@ import React, { useState, useEffect } from 'react'; -import { Box, useTheme, useMediaQuery, Typography } from '@mui/material'; +import { Box, useTheme, useMediaQuery } from '@mui/material'; import KitchPlusAppBar from '../AppBar'; import Sidebar from '../SideHome'; +import AccountSettings from './AccountSettings'; const drawerWidth = 230; const Setting = () => { const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down('sm')); - const [hasProducts, setHasProducts] = useState(false); // حالة لتتبع وجود المنتجات const [sidebarOpen, setSidebarOpen] = useState(!isMobile); - - useEffect(() => { - const checkProducts = async () => { - - const productsExist = await checkIfProductsExist(); - setHasProducts(productsExist); - }; - - checkProducts(); - }, []); - - - const checkIfProductsExist = async () => { - return false; - }; - useEffect(() => { if (window.innerWidth >= theme.breakpoints.values.md) { setSidebarOpen(true); @@ -55,47 +39,63 @@ const Setting = () => { }; return ( - + - - + - Setting + + + + + ); }; -export default Setting; \ No newline at end of file +export default Setting;