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

Updates to the settings interface and restaurant account creation.

تصفح المصدر
هذا الالتزام موجود في:
raghad
2025-05-24 02:54:04 +03:00
الأصل aacc58c4a6
التزام 8a8e41b4d8
27 ملفات معدلة مع 2464 إضافات و75 حذوفات
تنزيل ملف التصحيح تنزيل ملف الاختلاف توسيع جميع الملفات طي جميع الملفات

217
src/components/Home/Settings/AccountSettings.js Normal file
عرض الملف

@@ -0,0 +1,217 @@
import React, { useState } from 'react';
import {
Box,
Typography,
TextField,
Button,
styled,
useTheme
} from '@mui/material';
import AddAPhotoOutlinedIcon from '@mui/icons-material/AddAPhotoOutlined';
const AccountSettings = () => {
const theme = useTheme();
const [profileImage, setProfileImage] = useState(null);
const [fullName, setFullName] = useState('');
const [username, setUsername] = useState('');
const [bio, setBio] = useState('');
const [email, setEmail] = useState('');
const [phone, setPhone] = useState('');
const handleImageUpload = (event) => {
if (event.target.files && event.target.files[0]) {
setProfileImage(URL.createObjectURL(event.target.files[0]));
}
};
const Input = styled('input')({
display: 'none',
});
const customInputStyle = {
'& input': { fontWeight: 500, fontSize: '15px' },
'& input::placeholder': { color: '#969BA7' },
'& .MuiOutlinedInput-root': {
borderRadius: '10px',
transition: '0.3s',
'&.Mui-focused fieldset': {
borderColor: theme.palette.primary.main,
boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)',
},
},
'& .MuiOutlinedInput-root.Mui-focused': {
borderColor: '#3f51b5',
boxShadow: '0 0 0 2px rgba(63,81,181,0.1)',
},
};
const renderField = (label, value, onChange, type = 'text') => (
<Box
sx={{
flex: 1,
minWidth: { xs: '100%', sm: '45%' },
display: 'flex',
flexDirection: 'column',
gap: 1,
}}
>
<Typography variant="body2" sx={{ fontWeight: '500', fontSize: '16px' }}>
{label}
</Typography>
<TextField
placeholder={`Enter your ${label.toLowerCase()}`}
type={type}
value={value}
onChange={onChange}
variant="outlined"
fullWidth
sx={customInputStyle}
/>
</Box>
);
return (
<Box
sx={{
// margin: 'auto',
p: { xs: 2, sm: 3 },
backgroundColor: '#FFFFFF',
maxWidth: { xs: '90%', md: '100%' },
borderRadius: 2,
}}
>
{/* العنوان الرئيسي */}
<Typography variant="h4" component="h1" sx={{ mb: 3, fontWeight: 'bold' }}>
Account Setting
</Typography>
{/* صورة الملف الشخصي */}
<Typography variant="h6" component="h2" sx={{ mb: 2, fontWeight: 'bold' }}>
Your Profile Picture
</Typography>
<Box sx={{ display: 'flex', alignItems: 'center', mb: 3 }}>
<label htmlFor="icon-button-file">
<Input
accept="image/*"
id="icon-button-file"
type="file"
onChange={handleImageUpload}
/>
<Box
component="span"
sx={{
width: { xs: 100, sm: 110 },
height: { xs: 100, sm: 110 },
border: '2px dashed #4C535F',
borderRadius: 2,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
color: '#4C535F',
cursor: 'pointer',
textAlign: 'center',
backgroundColor: '#f6f6f6',
'&:hover': {
backgroundColor: '#f9f9f9',
},
}}
>
<AddAPhotoOutlinedIcon sx={{ fontSize: 28, mb: 1 }} />
<Typography sx={{ fontSize: '13px', fontWeight: 500 }}>
Upload your photo
</Typography>
</Box>
</label>
</Box>
{/* الحقول النصية */}
<Box sx={{ mb: 3 }}>
<Typography variant="subtitle1" sx={{ fontWeight: 'bold', mb: 2 }}>
Personal Information
</Typography>
{/* السطر الأول: Full Name + Email */}
<Box
sx={{
display: 'flex',
flexWrap: 'wrap',
gap: 2,
mb: 2,
}}
>
{renderField('Full Name', fullName, (e) => setFullName(e.target.value))}
{renderField('Email', email, (e) => setEmail(e.target.value), 'email')}
</Box>
{/* السطر الثاني: Username + Phone Number */}
<Box
sx={{
display: 'flex',
flexWrap: 'wrap',
gap: 2,
mb: 2,
}}
>
{renderField('Username', username, (e) => setUsername(e.target.value))}
{renderField('Phone Number', phone, (e) => setPhone(e.target.value), 'tel')}
</Box>
{/* الحقل Bio منفصل */}
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
<Typography variant="body2" sx={{ fontWeight: '500', fontSize: '16px' }}>
Bio
</Typography>
<TextField
placeholder="Write something about your restaurant"
value={bio}
onChange={(e) => setBio(e.target.value)}
fullWidth
multiline
rows={3}
sx={customInputStyle}
/>
</Box>
</Box>
{/* الأزرار */}
<Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 2, flexWrap: 'wrap' }}>
<Button
variant="outlined"
sx={{
px: 4,
py: 1.5,
borderRadius: 2,
textTransform: 'none',
fontWeight: 'bold',
width: { xs: '100%', sm: 'auto' },
}}
>
Cancel
</Button>
<Button
variant="contained"
sx={{
px: 4,
py: 1.5,
borderRadius: 2,
textTransform: 'none',
fontWeight: 'bold',
color: '#FFFFFF',
width: { xs: '100%', sm: 'auto' },
transition: 'border-color 0.3s',
backgroundColor: theme.palette.primary.main,
'&:hover': {
backgroundColor: theme.palette.primary.hover
}
}}
>
Update
</Button>
</Box>
</Box>
);
};
export default AccountSettings;

92
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 (
<Box sx={{
display: 'flex',
height: '100vh',
backgroundColor: '#F6F6F6',
overflow: 'hidden',
}}>
<Box
sx={{
display: 'flex',
height: '100vh',
backgroundColor: '#F6F6F6',
overflow: 'hidden',
}}
>
<Sidebar
open={sidebarOpen}
onClose={handleDrawerToggle}
isMobile={isMobile}
drawerWidth={drawerWidth}
/>
<Box sx={{
flexGrow: 1,
display: 'flex',
flexDirection: 'column',
width: {
xs: '100%',
sm: '100%',
md: '100%'
},
marginLeft: {
xs: 0,
sm: sidebarOpen ? `${drawerWidth}px` : 0,
md: 0
},
transition: theme.transitions.create(['width'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
}}>
<Box
sx={{
flexGrow: 1,
display: 'flex',
flexDirection: 'column',
width: '100%',
marginLeft: {
xs: 0,
sm: sidebarOpen ? `${drawerWidth}px` : 0,
md: 0,
},
transition: theme.transitions.create(['width'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
}}
>
<KitchPlusAppBar
onDrawerToggle={handleDrawerToggle}
sidebarOpen={sidebarOpen}
isMobile={isMobile}
/>
<Typography>Setting</Typography>
<Box sx={{
flexGrow: 1,
width: sidebarOpen ? 'calc(100% - 40px)' : '100%',
pt: { xs:2, sm: 3 },
overflowY: 'auto',
pl: { xs: 2, sm: 3 },
pb: { xs: 2, sm: 4 },
scrollbarWidth: 'none',
'&::-webkit-scrollbar': { display: 'none' },
transition: theme.transitions.create(['margin'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
}}>
<AccountSettings />
</Box>
</Box>
</Box>
);
};
export default Setting;
export default Setting;