updates on the ui changes and more things
This commit is contained in:
@@ -47,7 +47,7 @@ const LOGO_FILTER = {
|
||||
|
||||
/** Destinations that sit directly on the header bar. */
|
||||
const NAV = [
|
||||
{ label: 'Dispatch', path: '/doormile/dispatch' },
|
||||
{ label: 'Control X', path: '/doormile/control-x' },
|
||||
{ label: 'Bookings', path: '/doormile/bookings' },
|
||||
{ label: 'Orders', path: '/doormile/orders' },
|
||||
{ label: 'Deliveries', path: '/doormile/deliveries' },
|
||||
@@ -60,21 +60,21 @@ const NAV_GROUPS = [
|
||||
{
|
||||
label: 'Fleet Ops',
|
||||
items: [
|
||||
{ label: 'Hubs', path: '/doormile/hubs', icon: Warehouse, desc: 'Sortation centers & facilities' },
|
||||
{ label: 'Vehicles', path: '/doormile/vehicles', icon: Car, desc: 'Fleet register & EV telematics' },
|
||||
{ label: 'Tripsheets', path: '/doormile/tripsheets', icon: ListTodo, desc: 'Linehaul & middle-mile runs' },
|
||||
{ label: 'Exceptions', path: '/doormile/exceptions', icon: ShieldAlert, desc: 'Live alerts & delivery blockers' },
|
||||
{ label: 'Competitive Intel', path: '/doormile/competitive-intel', icon: Activity, desc: 'Benchmarking & market rates' },
|
||||
{ label: 'App Users', path: '/doormile/app-users', icon: UserCheck, desc: 'System operators & roles' },
|
||||
{ label: 'Hubs', path: '/doormile/hubs', icon: Warehouse },
|
||||
{ label: 'Vehicles', path: '/doormile/vehicles', icon: Car },
|
||||
{ label: 'Tripsheets', path: '/doormile/tripsheets', icon: ListTodo },
|
||||
{ label: 'Exceptions', path: '/doormile/exceptions', icon: ShieldAlert },
|
||||
{ label: 'Competitive Intel', path: '/doormile/competitive-intel', icon: Activity },
|
||||
{ label: 'App Users', path: '/doormile/app-users', icon: UserCheck },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'Reports',
|
||||
items: [
|
||||
{ label: 'Orders Summary', path: '/doormile/reports/orderssummary', icon: FileSpreadsheet, desc: 'Daily volume & status aggregations' },
|
||||
{ label: 'Orders Details', path: '/doormile/reports/ordersdetails', icon: FileText, desc: 'Granular leg-by-leg breakdown' },
|
||||
{ label: 'Milers Summary', path: '/doormile/reports/riderssummary', icon: Bike, desc: 'Fleet KPIs & on-duty shifts' },
|
||||
{ label: 'Profitability', path: '/doormile/reports/profitability', icon: Coins, desc: 'Gross margin & variable costs' },
|
||||
{ label: 'Orders Summary', path: '/doormile/reports/orderssummary', icon: FileSpreadsheet },
|
||||
{ label: 'Orders Details', path: '/doormile/reports/ordersdetails', icon: FileText },
|
||||
{ label: 'Milers Summary', path: '/doormile/reports/riderssummary', icon: Bike },
|
||||
{ label: 'Profitability', path: '/doormile/reports/profitability', icon: Coins },
|
||||
],
|
||||
},
|
||||
];
|
||||
@@ -372,28 +372,31 @@ export default function AdminLayout() {
|
||||
key={item.path}
|
||||
onClick={() => navigate(item.path)}
|
||||
className={cn(
|
||||
'flex items-start gap-2.5 p-2 rounded-xl cursor-pointer transition-colors my-0.5',
|
||||
// items-center, not items-start: with the second
|
||||
// line gone there is nothing to top-align to, and
|
||||
// the icon would sit high against a single label.
|
||||
'flex items-center gap-2.5 p-2 rounded-xl cursor-pointer transition-colors my-0.5',
|
||||
active ? 'bg-brand-tint/80 text-brand' : 'hover:bg-slate-50 text-ink-1'
|
||||
)}
|
||||
>
|
||||
{ItemIcon && (
|
||||
<div
|
||||
className={cn(
|
||||
'w-7 h-7 rounded-lg flex items-center justify-center shrink-0 mt-0.5',
|
||||
'w-7 h-7 rounded-lg flex items-center justify-center shrink-0',
|
||||
active ? 'bg-brand text-white' : 'bg-slate-100 text-slate-600'
|
||||
)}
|
||||
>
|
||||
<ItemIcon className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
)}
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="text-body-sm font-semibold">{item.label}</div>
|
||||
{item.desc && (
|
||||
<div className="text-[11px] text-ink-3 leading-tight mt-0.5 line-clamp-1">
|
||||
{item.desc}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{/* Label only. The descriptions under each item
|
||||
("Sortation centers & facilities", "Linehaul &
|
||||
middle-mile runs") were removed: this is a jump
|
||||
menu for people who already know the console, so a
|
||||
gloss on every row is read once and then skipped
|
||||
past forever while still costing the height that
|
||||
made the menu tall enough to cover the page. */}
|
||||
<div className="min-w-0 flex-1 text-body-sm font-semibold">{item.label}</div>
|
||||
</DropdownMenuItem>
|
||||
);
|
||||
})}
|
||||
@@ -418,17 +421,25 @@ export default function AdminLayout() {
|
||||
assistantOpen ? 'bg-brand-tint text-brand' : 'text-ink-3 hover:bg-surface-sunken hover:text-ink-1'
|
||||
)}
|
||||
>
|
||||
{/* 20px inside a 32px button.
|
||||
Was `h-9 w-9 max-w-none` — a 36px image in a 32px button,
|
||||
so the mark overflowed its own control by 2px on every
|
||||
side. Two visible consequences: it stood proud of the
|
||||
notification bell and avatar beside it, breaking the row's
|
||||
alignment, and it covered the button's own area completely,
|
||||
so the `hover:bg-surface-sunken` tint had nowhere to show —
|
||||
the control looked dead on hover while its neighbours lit
|
||||
up. Sized to sit inside the button, like the Bell's 16px
|
||||
icon does. */}
|
||||
<img className="h-5 w-5 object-contain" src={doormileMark} alt="" aria-hidden="true" />
|
||||
{/* 24px inside a 32px button.
|
||||
|
||||
Started at `h-9 w-9 max-w-none` — a 36px image in a 32px
|
||||
button, so the mark overflowed its own control by 2px on
|
||||
every side. That broke the row's alignment against the
|
||||
bell and avatar AND covered the button completely, leaving
|
||||
`hover:bg-surface-sunken` nowhere to render, so the control
|
||||
looked dead on hover while its neighbours lit up.
|
||||
|
||||
Dropped to 20px to fix both, which read as too faint next
|
||||
to the bell. 24px is the ceiling that keeps the fix: it
|
||||
leaves 4px of button on every side, which is what the
|
||||
hover tint needs to be visible as a ring around the mark.
|
||||
Anything larger and the tint disappears again.
|
||||
|
||||
Bigger than the Bell's 16px on purpose — this is a brand
|
||||
mark carrying its own circular frame, so it reads smaller
|
||||
than its box, where a stroked icon reads full-size. */}
|
||||
<img className="h-6 w-6 object-contain" src={doormileMark} alt="" aria-hidden="true" />
|
||||
</button>
|
||||
)}
|
||||
|
||||
@@ -554,10 +565,10 @@ export default function AdminLayout() {
|
||||
{/* `dai-page` is the handshake with the assistant dock: while the panel
|
||||
is open, DoormileAI.css reserves exactly its width of padding here so
|
||||
the page slides open beside it instead of being covered. */}
|
||||
<div className={cn("dai-page flex flex-col flex-1", !location.pathname.startsWith('/doormile/dispatch') && "px-4 md:flex-row lg:px-6")}>
|
||||
<div className={cn("dai-page flex flex-col flex-1", !location.pathname.startsWith('/doormile/control-x') && "px-4 md:flex-row lg:px-6")}>
|
||||
<main className={cn(
|
||||
"min-w-0 flex-1 flex flex-col",
|
||||
!location.pathname.startsWith('/doormile/dispatch') && location.pathname !== '/doormile/home' && location.pathname !== '/doormile' && "py-6"
|
||||
!location.pathname.startsWith('/doormile/control-x') && location.pathname !== '/doormile/home' && location.pathname !== '/doormile' && "py-6"
|
||||
)}>
|
||||
<Outlet />
|
||||
</main>
|
||||
|
||||
Reference in New Issue
Block a user