288 lines
11 KiB
JavaScript
288 lines
11 KiB
JavaScript
import { useState, useRef, useEffect } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import {
|
|
AppBar,
|
|
Toolbar,
|
|
IconButton,
|
|
Box,
|
|
InputBase,
|
|
Badge,
|
|
Avatar,
|
|
Typography,
|
|
Menu,
|
|
MenuItem,
|
|
Divider,
|
|
ListItemIcon,
|
|
ListItemText,
|
|
Tooltip,
|
|
Button,
|
|
Stack,
|
|
Select,
|
|
alpha
|
|
} from '@mui/material';
|
|
import MenuIcon from '@mui/icons-material/Menu';
|
|
import SearchIcon from '@mui/icons-material/Search';
|
|
import NotificationsNoneIcon from '@mui/icons-material/NotificationsNone';
|
|
import PersonOutlineIcon from '@mui/icons-material/PersonOutline';
|
|
import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined';
|
|
import LogoutIcon from '@mui/icons-material/Logout';
|
|
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
|
|
import PlaceOutlinedIcon from '@mui/icons-material/PlaceOutlined';
|
|
import Inventory2OutlinedIcon from '@mui/icons-material/Inventory2Outlined';
|
|
import TwoWheelerOutlinedIcon from '@mui/icons-material/TwoWheelerOutlined';
|
|
import PaymentsOutlinedIcon from '@mui/icons-material/PaymentsOutlined';
|
|
import AssignmentOutlinedIcon from '@mui/icons-material/AssignmentOutlined';
|
|
import DoneAllIcon from '@mui/icons-material/DoneAll';
|
|
|
|
import Logo from '@/components/Logo';
|
|
import { locations } from '@/data/mock';
|
|
import { useFilters } from '@/store/Filters';
|
|
|
|
const RED = '#C01227'; // brand accent (reserved for attention: avatar, unread dots)
|
|
|
|
const INITIAL_NOTIFICATIONS = [
|
|
{ id: 1, icon: Inventory2OutlinedIcon, title: 'New order #ORD-10482 placed', time: '2 min ago', to: '/orders', read: false },
|
|
{ id: 2, icon: TwoWheelerOutlinedIcon, title: 'Rider Imran went online', time: '18 min ago', to: '/fleet', read: false },
|
|
{ id: 3, icon: PaymentsOutlinedIcon, title: 'Invoice INV-2041 marked paid', time: '1 hr ago', to: '/invoice', read: false },
|
|
{ id: 4, icon: AssignmentOutlinedIcon, title: 'MileTruth AI re-optimized 41 routes', time: '3 hrs ago', to: '/dispatch', read: true }
|
|
];
|
|
|
|
export default function Header({ onToggle }) {
|
|
const navigate = useNavigate();
|
|
const [account, setAccount] = useState(null);
|
|
const [notifAnchor, setNotifAnchor] = useState(null);
|
|
const [notifications, setNotifications] = useState(INITIAL_NOTIFICATIONS);
|
|
const [search, setSearch] = useState('');
|
|
const { location, setLocation } = useFilters(); // global location — single source of truth
|
|
const searchRef = useRef(null);
|
|
|
|
const unread = notifications.filter((n) => !n.read).length;
|
|
|
|
// ⌘K / Ctrl+K focuses global search
|
|
useEffect(() => {
|
|
const onKey = (e) => {
|
|
if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
|
|
e.preventDefault();
|
|
searchRef.current?.focus();
|
|
}
|
|
};
|
|
window.addEventListener('keydown', onKey);
|
|
return () => window.removeEventListener('keydown', onKey);
|
|
}, []);
|
|
|
|
const openNotif = (e) => setNotifAnchor(e.currentTarget);
|
|
const closeNotif = () => setNotifAnchor(null);
|
|
const markAllRead = () => setNotifications((prev) => prev.map((n) => ({ ...n, read: true })));
|
|
const onNotifClick = (n) => {
|
|
setNotifications((prev) => prev.map((x) => (x.id === n.id ? { ...x, read: true } : x)));
|
|
closeNotif();
|
|
navigate(n.to);
|
|
};
|
|
|
|
const submitSearch = (e) => {
|
|
e.preventDefault();
|
|
const q = search.trim();
|
|
if (q) navigate(`/orders?q=${encodeURIComponent(q)}`);
|
|
};
|
|
|
|
return (
|
|
<AppBar
|
|
position="fixed"
|
|
elevation={0}
|
|
sx={{
|
|
bgcolor: '#FFFFFF',
|
|
color: 'grey.800',
|
|
zIndex: (t) => t.zIndex.drawer + 1,
|
|
borderBottom: '1px solid',
|
|
borderColor: 'grey.200'
|
|
}}
|
|
>
|
|
<Toolbar sx={{ minHeight: 64, px: { xs: 1.5, sm: 2.5 }, gap: 1 }}>
|
|
{/* LEFT — hamburger + brand (equal-flex zone) */}
|
|
<Box sx={{ flex: 1, minWidth: 0, display: 'flex', alignItems: 'center', gap: 1 }}>
|
|
<IconButton edge="start" onClick={onToggle} sx={{ color: 'grey.700' }}>
|
|
<MenuIcon />
|
|
</IconButton>
|
|
<Box
|
|
onClick={() => navigate('/dashboard')}
|
|
sx={{ display: 'flex', alignItems: 'center', cursor: 'pointer', flexShrink: 0 }}
|
|
>
|
|
<Logo height={24} />
|
|
</Box>
|
|
</Box>
|
|
|
|
{/* CENTER — global search, the primary nav element (fixed width = stays truly centered) */}
|
|
<Box
|
|
component="form"
|
|
onSubmit={submitSearch}
|
|
sx={{
|
|
display: { xs: 'none', sm: 'flex' },
|
|
flexShrink: 0,
|
|
alignItems: 'center',
|
|
height: 46,
|
|
px: 1.75,
|
|
bgcolor: 'grey.50',
|
|
border: '1px solid',
|
|
borderColor: 'grey.200',
|
|
borderRadius: 2.5,
|
|
width: { sm: 300, md: 460, lg: 560 },
|
|
transition: 'all 0.15s ease',
|
|
'&:hover': { borderColor: 'grey.300' },
|
|
'&:focus-within': { borderColor: 'primary.main', bgcolor: '#fff', boxShadow: '0 0 0 3px rgba(192,18,39,0.08)' }
|
|
}}
|
|
>
|
|
<SearchIcon sx={{ fontSize: 20, mr: 1, color: 'grey.500' }} />
|
|
<InputBase
|
|
inputRef={searchRef}
|
|
value={search}
|
|
onChange={(e) => setSearch(e.target.value)}
|
|
placeholder="Search orders, shipments, riders, customers…"
|
|
sx={{ color: 'grey.800', fontSize: '0.875rem', flex: 1 }}
|
|
inputProps={{ 'aria-label': 'search' }}
|
|
/>
|
|
<Box
|
|
sx={{
|
|
display: { xs: 'none', md: 'flex' },
|
|
alignItems: 'center',
|
|
gap: 0.25,
|
|
px: 0.75,
|
|
py: 0.4,
|
|
ml: 1,
|
|
borderRadius: 1,
|
|
border: '1px solid',
|
|
borderColor: 'grey.300',
|
|
bgcolor: '#fff',
|
|
color: 'grey.500',
|
|
fontSize: '0.6875rem',
|
|
fontWeight: 700,
|
|
lineHeight: 1,
|
|
flexShrink: 0
|
|
}}
|
|
>
|
|
⌘K
|
|
</Box>
|
|
</Box>
|
|
|
|
{/* RIGHT — location + notifications + profile (equal-flex zone, right-aligned) */}
|
|
<Box sx={{ flex: 1, minWidth: 0, display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 0.5 }}>
|
|
<Select
|
|
value={location}
|
|
onChange={(e) => setLocation(e.target.value)}
|
|
size="small"
|
|
IconComponent={KeyboardArrowDownIcon}
|
|
startAdornment={<PlaceOutlinedIcon sx={{ fontSize: 18, color: 'grey.500', mr: 0.75 }} />}
|
|
sx={{
|
|
display: { xs: 'none', md: 'flex' },
|
|
minWidth: 168,
|
|
bgcolor: 'grey.50',
|
|
'& .MuiOutlinedInput-notchedOutline': { borderColor: 'grey.200' },
|
|
'& .MuiSelect-select': { display: 'flex', alignItems: 'center', fontSize: '0.8125rem', fontWeight: 600, color: 'grey.700' }
|
|
}}
|
|
>
|
|
<MenuItem value="all">All Locations</MenuItem>
|
|
{locations.map((l) => (
|
|
<MenuItem key={l} value={l}>{l}</MenuItem>
|
|
))}
|
|
</Select>
|
|
|
|
<Tooltip title="Notifications">
|
|
<IconButton onClick={openNotif} sx={{ color: 'grey.700' }}>
|
|
<Badge badgeContent={unread} color="error">
|
|
<NotificationsNoneIcon />
|
|
</Badge>
|
|
</IconButton>
|
|
</Tooltip>
|
|
|
|
<Box
|
|
onClick={(e) => setAccount(e.currentTarget)}
|
|
sx={{ display: 'flex', alignItems: 'center', gap: 1, cursor: 'pointer', py: 0.5, px: 0.5, borderRadius: 2, '&:hover': { bgcolor: 'grey.100' } }}
|
|
>
|
|
<Avatar sx={{ width: 34, height: 34, bgcolor: RED, color: '#fff', fontWeight: 700, fontSize: '0.8rem' }}>AD</Avatar>
|
|
<Box sx={{ display: { xs: 'none', md: 'block' }, lineHeight: 1.1 }}>
|
|
<Typography variant="subtitle2" sx={{ color: 'grey.800', fontWeight: 600 }}>
|
|
Aman Deshmukh
|
|
</Typography>
|
|
<Typography variant="caption" sx={{ color: 'grey.500' }}>
|
|
Operations Admin
|
|
</Typography>
|
|
</Box>
|
|
<KeyboardArrowDownIcon sx={{ fontSize: 18, color: 'grey.500', display: { xs: 'none', md: 'block' } }} />
|
|
</Box>
|
|
</Box>
|
|
|
|
{/* Notifications dropdown */}
|
|
<Menu
|
|
anchorEl={notifAnchor}
|
|
open={Boolean(notifAnchor)}
|
|
onClose={closeNotif}
|
|
transformOrigin={{ horizontal: 'right', vertical: 'top' }}
|
|
anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
|
|
PaperProps={{ sx: { mt: 1, width: 360, maxWidth: '90vw' } }}
|
|
>
|
|
<Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ px: 2, py: 1.25 }}>
|
|
<Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
|
|
Notifications
|
|
</Typography>
|
|
<Button size="small" startIcon={<DoneAllIcon fontSize="small" />} onClick={markAllRead} disabled={unread === 0}>
|
|
Mark all read
|
|
</Button>
|
|
</Stack>
|
|
<Divider />
|
|
{notifications.length === 0 && (
|
|
<MenuItem disabled>
|
|
<ListItemText primary="No notifications" />
|
|
</MenuItem>
|
|
)}
|
|
{notifications.map((n) => {
|
|
const Icon = n.icon;
|
|
return (
|
|
<MenuItem key={n.id} onClick={() => onNotifClick(n)} sx={{ py: 1.25, whiteSpace: 'normal', alignItems: 'flex-start' }}>
|
|
<ListItemIcon sx={{ mt: 0.25 }}>
|
|
<Avatar sx={{ width: 34, height: 34, bgcolor: n.read ? 'grey.100' : alpha(RED, 0.12), color: n.read ? 'grey.500' : RED }}>
|
|
<Icon fontSize="small" />
|
|
</Avatar>
|
|
</ListItemIcon>
|
|
<ListItemText
|
|
primary={n.title}
|
|
secondary={n.time}
|
|
primaryTypographyProps={{ fontSize: '0.875rem', fontWeight: n.read ? 500 : 700 }}
|
|
secondaryTypographyProps={{ fontSize: '0.75rem' }}
|
|
/>
|
|
{!n.read && <Box sx={{ width: 8, height: 8, borderRadius: '50%', bgcolor: RED, mt: 1, ml: 0.5 }} />}
|
|
</MenuItem>
|
|
);
|
|
})}
|
|
<Divider />
|
|
<MenuItem onClick={() => { closeNotif(); navigate('/dashboard'); }} sx={{ justifyContent: 'center', color: 'primary.main', fontWeight: 600 }}>
|
|
View all activity
|
|
</MenuItem>
|
|
</Menu>
|
|
|
|
{/* Account dropdown */}
|
|
<Menu
|
|
anchorEl={account}
|
|
open={Boolean(account)}
|
|
onClose={() => setAccount(null)}
|
|
transformOrigin={{ horizontal: 'right', vertical: 'top' }}
|
|
anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
|
|
PaperProps={{ sx: { mt: 1, minWidth: 200 } }}
|
|
>
|
|
<MenuItem onClick={() => { setAccount(null); navigate('/profile'); }}>
|
|
<ListItemIcon><PersonOutlineIcon fontSize="small" /></ListItemIcon>
|
|
View Profile
|
|
</MenuItem>
|
|
<MenuItem onClick={() => { setAccount(null); navigate('/settings'); }}>
|
|
<ListItemIcon><SettingsOutlinedIcon fontSize="small" /></ListItemIcon>
|
|
Settings
|
|
</MenuItem>
|
|
<Divider />
|
|
<MenuItem onClick={() => { setAccount(null); navigate('/login'); }} sx={{ color: 'error.main' }}>
|
|
<ListItemIcon><LogoutIcon fontSize="small" color="error" /></ListItemIcon>
|
|
Logout
|
|
</MenuItem>
|
|
</Menu>
|
|
</Toolbar>
|
|
</AppBar>
|
|
);
|
|
}
|