Initial commit - restaurant dashboard
This commit is contained in:
RaghadMAlkous
+55
-138
@@ -1,4 +1,5 @@
|
||||
import React from 'react';
|
||||
// src/components/AppBar/KitchPlusAppBar.jsx
|
||||
import React, { useEffect, useState, useContext } from 'react';
|
||||
import {
|
||||
AppBar,
|
||||
Toolbar,
|
||||
@@ -7,31 +8,37 @@ import {
|
||||
IconButton,
|
||||
Divider,
|
||||
Avatar,
|
||||
Button,
|
||||
Autocomplete,
|
||||
TextField,
|
||||
InputAdornment,
|
||||
useTheme,
|
||||
useMediaQuery,
|
||||
} from '@mui/material';
|
||||
import { useLocation } from 'react-router-dom';
|
||||
import { useLocation, useNavigate } from 'react-router-dom';
|
||||
import MenuIcon from '@mui/icons-material/Menu';
|
||||
import NotificationsOutlinedIcon from '@mui/icons-material/NotificationsOutlined';
|
||||
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
|
||||
import SearchIcon from '@mui/icons-material/Search';
|
||||
|
||||
const top100Films = [
|
||||
{ title: 'The Shawshank Redemption' },
|
||||
{ title: 'The Godfather' },
|
||||
{ title: 'The Dark Knight' },
|
||||
{ title: 'Pulp Fiction' },
|
||||
];
|
||||
import HomeIcon from '@mui/icons-material/Home';
|
||||
import { useRestaurant } from '../../contexts/RestaurantContext';
|
||||
import authService from '../../services/authService';
|
||||
import { UserContext } from '../../contexts/UserContext'; // ✅ استدعاء UserContext
|
||||
|
||||
const KitchPlusAppBar = ({ onDrawerToggle, sidebarOpen, isMobile }) => {
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
const theme = useTheme();
|
||||
const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
|
||||
const isMediumScreen = useMediaQuery(theme.breakpoints.between('sm', 'md'));
|
||||
const { restaurantId } = useRestaurant();
|
||||
|
||||
const { user } = useContext(UserContext); // ✅ استخدم الـ Context بدلاً من localStorage
|
||||
const [restaurantLogo, setRestaurantLogo] = useState('/images/default-restaurant.png');
|
||||
|
||||
useEffect(() => {
|
||||
const fetchRestaurantLogo = async () => {
|
||||
if (!restaurantId) return;
|
||||
const res = await authService.getRestaurantById(restaurantId);
|
||||
if (res.success && res.data) {
|
||||
setRestaurantLogo(res.data.image_url);
|
||||
}
|
||||
};
|
||||
fetchRestaurantLogo();
|
||||
}, [restaurantId]);
|
||||
|
||||
return (
|
||||
<AppBar
|
||||
@@ -54,156 +61,66 @@ const KitchPlusAppBar = ({ onDrawerToggle, sidebarOpen, isMobile }) => {
|
||||
justifyContent: 'space-between',
|
||||
}}
|
||||
>
|
||||
{/* Left side with toggle button */}
|
||||
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
||||
{/* Toggle button for mobile/tablet */}
|
||||
{/* Left side */}
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 2,
|
||||
mr: 2,
|
||||
}}
|
||||
>
|
||||
{(isMobile || isMediumScreen) && (
|
||||
<IconButton
|
||||
color="inherit"
|
||||
aria-label="open drawer"
|
||||
edge="start"
|
||||
onClick={onDrawerToggle}
|
||||
sx={{ mr: 2 }}
|
||||
>
|
||||
<IconButton color="inherit" edge="start" onClick={onDrawerToggle}>
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
)}
|
||||
|
||||
{location.pathname === '/dashboard' ? (
|
||||
<Typography
|
||||
variant="h6"
|
||||
component="div"
|
||||
sx={{
|
||||
fontWeight: '500',
|
||||
fontSize: { xs: '18px', sm: '20px', md: '24px' },
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
maxWidth: { xs: '200px', sm: 'none' }
|
||||
}}
|
||||
>
|
||||
Welcome to KitchPlus
|
||||
</Typography>
|
||||
) : (
|
||||
<Autocomplete
|
||||
sx={{
|
||||
width: { xs: '200px', sm: '200px', md: '250px' },
|
||||
borderRadius: '8px',
|
||||
}}
|
||||
freeSolo
|
||||
id="free-solo-2-demo"
|
||||
disableClearable
|
||||
options={top100Films.map((option) => option.title)}
|
||||
renderInput={(params) => (
|
||||
<TextField
|
||||
{...params}
|
||||
placeholder="Search"
|
||||
InputProps={{
|
||||
...params.InputProps,
|
||||
type: 'search',
|
||||
endAdornment: (
|
||||
<InputAdornment position="end">
|
||||
<SearchIcon sx={{ color: '#667085' }} />
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
sx={{
|
||||
'& .MuiInputBase-root': {
|
||||
backgroundColor: 'white',
|
||||
height: { xs: 36, sm: 38, md: 40 },
|
||||
},
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
<Typography variant="h6" sx={{ fontWeight: '500' }}>
|
||||
Welcome to KitchPlus
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Right side */}
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: { xs: 0.8, sm: 1, md: 1.5 } }}>
|
||||
{location.pathname === '/dashboard' && !isSmallScreen && (
|
||||
<Button
|
||||
variant="contained"
|
||||
sx={{
|
||||
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: '0px' },
|
||||
backgroundColor: '#61677F',
|
||||
borderRadius: '8px',
|
||||
fontWeight: 600,
|
||||
fontSize: { xs: '12px', sm: '13px', md: '14px' },
|
||||
textTransform: 'none',
|
||||
whiteSpace: 'nowrap',
|
||||
}}
|
||||
>
|
||||
{isMediumScreen ? 'Switch Company' : 'Switch Company Profits'}
|
||||
</Button>
|
||||
)}
|
||||
{location.pathname === '/dashboard' && (
|
||||
<Divider
|
||||
orientation="vertical"
|
||||
flexItem
|
||||
sx={{
|
||||
height: { xs: 30, sm: 36, md: 40 },
|
||||
alignSelf: 'center',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<IconButton color="#667085" size={isSmallScreen ? 'small' : 'medium'}>
|
||||
<NotificationsOutlinedIcon fontSize={isSmallScreen ? 'small' : 'medium'} />
|
||||
{location.pathname === '/dashboard' && <Divider orientation="vertical" flexItem sx={{ height: 40 }} />}
|
||||
|
||||
<IconButton
|
||||
color="#667085"
|
||||
size={isSmallScreen ? 'small' : 'medium'}
|
||||
onClick={() => navigate('/restaurant')}
|
||||
>
|
||||
<HomeIcon fontSize={isSmallScreen ? 'medium' : 'medium'} />
|
||||
</IconButton>
|
||||
|
||||
<Divider
|
||||
orientation="vertical"
|
||||
flexItem
|
||||
sx={{
|
||||
height: { xs: 30, sm: 36, md: 40 },
|
||||
alignSelf: 'center'
|
||||
}}
|
||||
/>
|
||||
<Divider orientation="vertical" flexItem sx={{ height: 40 }} />
|
||||
|
||||
<Avatar
|
||||
alt="Admin"
|
||||
src="/images/waitress3.png"
|
||||
sx={{
|
||||
width: { xs: 28, sm: 32, md: 40 },
|
||||
height: { xs: 28, sm: 32, md: 40 }
|
||||
}}
|
||||
alt="Restaurant Logo"
|
||||
src={restaurantLogo}
|
||||
sx={{ width: { xs: 28, sm: 32, md: 40 }, height: { xs: 28, sm: 32, md: 40 } }}
|
||||
/>
|
||||
|
||||
{!isSmallScreen && (
|
||||
<Typography
|
||||
variant="body1"
|
||||
sx={{
|
||||
ml: { sm: 0.5, md: 1 },
|
||||
ml: 1,
|
||||
color: '#61677F',
|
||||
fontSize: { xs: '12px', sm: '13px', md: '14px' },
|
||||
fontSize: { xs: 12, sm: 13, md: 14 },
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
maxWidth: { xs: '100px', sm: '120px', md: 'none' }
|
||||
overflow: 'visible',
|
||||
textOverflow: 'clip',
|
||||
maxWidth: 200,
|
||||
}}
|
||||
>
|
||||
Admin@gmail.com
|
||||
{user?.email || 'Admin@gmail.com'}
|
||||
</Typography>
|
||||
)}
|
||||
|
||||
<IconButton
|
||||
color="inherit"
|
||||
sx={{
|
||||
mt: 0.5,
|
||||
color: '#A6ACB8',
|
||||
padding: { xs: '4px', sm: '8px' }
|
||||
}}
|
||||
size={isSmallScreen ? 'small' : 'medium'}
|
||||
>
|
||||
<KeyboardArrowDownIcon fontSize={isSmallScreen ? 'small' : 'medium'} />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
);
|
||||
};
|
||||
|
||||
export default KitchPlusAppBar;
|
||||
export default KitchPlusAppBar;
|
||||
|
||||
Reference in New Issue
Block a user