Doormile/doormile_app_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated the ui for the doormile

Browse Source
This commit is contained in:
Thiru-tenext
2026-06-08 18:02:27 +05:30
parent a162fa89e5
commit 4ad40b2c6d
24 changed files with 2434 additions and 238 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/layout/MainLayout/Header.jsx
View File

@@ -34,13 +34,14 @@ import DoneAllIcon from '@mui/icons-material/DoneAll';
import Logo from '@/components/Logo';
const RED = '#C01227';
const RED = '#C01227'; // brand accent (avatars, dots)
const BAR = '#8E1F2A'; // muted deep-brick top bar (toned down from vivid #C01227)
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: '/riders', 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: '3 new onboarding requests', time: '3 hrs ago', to: '/requests', read: true }
{ id: 4, icon: AssignmentOutlinedIcon, title: 'MileTruth AI re-optimized 41 routes', time: '3 hrs ago', to: '/dispatch', read: true }
];
const MESSAGES = [
@@ -78,7 +79,7 @@ export default function Header({ onToggle }) {
<AppBar
position="fixed"
elevation={0}
sx={{ bgcolor: RED, color: '#fff', zIndex: (t) => t.zIndex.drawer + 1, boxShadow: '0 1px 0 rgba(0,0,0,0.06)' }}
sx={{ bgcolor: BAR, color: '#fff', zIndex: (t) => t.zIndex.drawer + 1, boxShadow: '0 1px 0 rgba(0,0,0,0.06)' }}
>
<Toolbar sx={{ minHeight: 64, px: { xs: 1.5, sm: 2.5 }, gap: 1 }}>
<IconButton color="inherit" edge="start" onClick={onToggle} sx={{ mr: 0.5 }}>
@@ -194,7 +195,7 @@ export default function Header({ onToggle }) {
);
})}
<Divider />
<MenuItem onClick={() => { closeNotif(); navigate('/requests'); }} sx={{ justifyContent: 'center', color: 'primary.main', fontWeight: 600 }}>
<MenuItem onClick={() => { closeNotif(); navigate('/dashboard'); }} sx={{ justifyContent: 'center', color: 'primary.main', fontWeight: 600 }}>
View all activity
</MenuItem>
</Menu>

37
src/layout/MainLayout/Sidebar.jsx
View File

@@ -19,10 +19,10 @@ import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
import navItems from '@/menu/navItems';
import Logo from '@/components/Logo';
export const DRAWER_WIDTH = 264;
export const MINI_WIDTH = 78;
export const DRAWER_WIDTH = 232;
export const MINI_WIDTH = 76;
const RED = '#C01227';
const NAV_BG = '#8E1F2A'; // muted deep-brick brand red (toned down from vivid #C01227)
function NavLeaf({ item, open, active, depth = 0, onClick }) {
const Icon = item.icon;
@@ -80,11 +80,31 @@ export default function Sidebar({ open, mobileOpen, onMobileClose, isMobile }) {
};
const content = (
<Box sx={{ bgcolor: RED, height: '100%', color: '#fff', display: 'flex', flexDirection: 'column' }}>
<Box sx={{ bgcolor: NAV_BG, height: '100%', color: '#fff', display: 'flex', flexDirection: 'column' }}>
<Toolbar sx={{ px: expanded ? 2.5 : 0, justifyContent: expanded ? 'flex-start' : 'center', minHeight: 64 }}>
<Logo onDark compact={!expanded} />
</Toolbar>
<Box sx={{ overflowY: 'auto', overflowX: 'hidden', flexGrow: 1, pb: 2 }}>
<Box
sx={{
overflowY: 'auto',
overflowX: 'hidden',
flexGrow: 1,
pb: 2,
// slim, subtle scrollbar tuned for the dark-red sidebar — only shows on hover
scrollbarWidth: 'thin',
scrollbarColor: 'transparent transparent',
'&:hover': { scrollbarColor: 'rgba(255,255,255,0.3) transparent' },
'&::-webkit-scrollbar': { width: 6 },
'&::-webkit-scrollbar-track': { background: 'transparent' },
'&::-webkit-scrollbar-thumb': {
backgroundColor: 'transparent',
borderRadius: 8,
transition: 'background-color 0.2s ease'
},
'&:hover::-webkit-scrollbar-thumb': { backgroundColor: 'rgba(255,255,255,0.28)' },
'&::-webkit-scrollbar-thumb:hover': { backgroundColor: 'rgba(255,255,255,0.45)' }
}}
>
{navItems.map((grp) => (
<Box key={grp.group} sx={{ mt: 1 }}>
{expanded && (
@@ -156,8 +176,11 @@ export default function Sidebar({ open, mobileOpen, onMobileClose, isMobile }) {
</Box>
{expanded && (
<Box sx={{ p: 2, borderTop: '1px solid rgba(255,255,255,0.12)' }}>
<Typography variant="caption" sx={{ color: 'rgba(255,255,255,0.55)' }}>
Doormile Console v1.0
<Typography variant="caption" sx={{ color: '#fff', fontWeight: 600, display: 'block', lineHeight: 1.3 }}>
Delivering Trust.
</Typography>
<Typography variant="caption" sx={{ color: 'rgba(255,255,255,0.6)' }}>
Beyond Boundaries · v1.0
</Typography>
</Box>
)}