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

updated the ui

Browse Source
This commit is contained in:
Thiru-tenext
2026-06-11 18:09:10 +05:30
parent 251be9afd2
commit f50b4b010c
33 changed files with 1527 additions and 2302 deletions
Download Patch File Download Diff File Expand all files Collapse all files

385
src/pages/nearle/deliveries/deliveries.js
View File

@@ -29,7 +29,11 @@ import {
MdRoute,
MdSkipNext,
MdTune,
MdMyLocation
MdMyLocation,
MdOutlineLocalShipping,
MdOutlinePendingActions,
MdOutlineCheckCircle,
MdOutlineCancel
} from 'react-icons/md';
import { useQuery, useMutation, useInfiniteQuery } from '@tanstack/react-query';
@@ -57,7 +61,6 @@ import {
Autocomplete,
TextField,
TableContainer,
Skeleton,
Backdrop,
MenuItem,
Menu,
@@ -97,6 +100,8 @@ import { OpenToast } from 'components/third-party/OpenToast';
import { OrdersTableSkeleton } from '../orders/OrdersTableSkeleton';
import LocationAutocomplete from 'components/nearle_components/LocationAutocomplete';
import LoaderWithImage from 'components/nearle_components/LoaderWithImage';
import PageHeader from 'components/nearle_components/PageHeader';
import StatCard from 'components/nearle_components/StatCard';
import { MobileCard, MobileCardList, MobileField, MobileFieldGrid } from 'components/nearle_components/MobileCard';
// ============================================================================
@@ -106,18 +111,22 @@ import { MobileCard, MobileCardList, MobileField, MobileFieldGrid } from 'compon
// ============================================================================
const DT = {
radiusPill: 999,
radiusCard: 16,
radiusInner: 12,
shadowSoft: '0 14px 40px rgba(15, 23, 42, 0.10)',
shadowMd: '0 8px 24px rgba(15, 23, 42, 0.08)',
shadowPop: '0 18px 50px rgba(15, 23, 42, 0.18)',
radiusCard: 14,
radiusInner: 10,
radiusField: 10,
// Restrained, low-contrast elevation — corporate (Linear/Stripe), not flashy.
shadowSoft: '0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.05)',
shadowMd: '0 1px 3px rgba(15, 23, 42, 0.06)',
shadowPop: '0 12px 32px rgba(15, 23, 42, 0.12)',
textPrimary: '#0f172a',
textSecondary: '#64748b',
textMuted: '#94a3b8',
borderSubtle: '#e2e8f0',
borderHover: '#cbd5e1',
divider: '#f1f5f9',
surface: '#ffffff',
surfaceAlt: '#f8fafc'
surfaceAlt: '#f8fafc',
brand: '#662582'
};
// Quick alpha helpers (hex + percentage suffix). Mirrors the batch-dropdown
@@ -131,22 +140,26 @@ const edge = (c) => a(c, '55'); // resting border
// Pill input sx — used by every filter Autocomplete/TextField on the page.
// Accepts the accent color and returns sx for the outer TextField. Width is
// driven by parent flex/grid so this helper stays width-agnostic.
const pillFieldSx = (color) => ({
// Neutral, corporate filter field: white surface, hairline border, brand focus
// ring. Colour is no longer used to tint the whole control (that produced the
// "rainbow" filter bar) — accent now lives only in the small start-adornment
// icon, which aids scanning without flooding the surface.
const pillFieldSx = () => ({
cursor: 'pointer',
'& .MuiOutlinedInput-root': {
borderRadius: DT.radiusPill + 'px',
bgcolor: tint(color),
borderRadius: DT.radiusField + 'px',
bgcolor: DT.surface,
fontWeight: 600,
color: DT.textPrimary,
paddingRight: '8px',
cursor: 'pointer',
transition: 'border-color 0.15s, box-shadow 0.15s, background-color 0.2s',
'& fieldset': { borderColor: edge(color), borderWidth: 1.5 },
'&:hover fieldset': { borderColor: color },
'&.Mui-focused': { boxShadow: `0 0 0 3px ${ring(color)}` },
'&.Mui-focused fieldset': { borderColor: color, borderWidth: 2 }
transition: 'border-color 0.15s, box-shadow 0.15s',
'& fieldset': { borderColor: DT.borderSubtle, borderWidth: 1 },
'&:hover fieldset': { borderColor: DT.borderHover },
'&.Mui-focused': { boxShadow: `0 0 0 3px ${ring(DT.brand)}` },
'&.Mui-focused fieldset': { borderColor: DT.brand, borderWidth: 1.5 }
},
'& .MuiAutocomplete-endAdornment .MuiSvgIcon-root': { color: color }
'& .MuiAutocomplete-endAdornment .MuiSvgIcon-root': { color: DT.textMuted }
});
// Status palette — drives tab pills, row status badges, dialogs.
@@ -177,10 +190,10 @@ const STATUS_TABS = [
// KPI palette + icons — mirrors the four cards across the top of the page.
const KPI_META = [
{ key: 'created', label: 'Created Orders', color: '#0ea5e9', icon: MdLocalShipping },
{ key: 'pending', label: 'Pending Orders', color: '#f59e0b', icon: MdHourglassEmpty },
{ key: 'delivered', label: 'Delivered Orders', color: '#10b981', icon: MdCheckCircle },
{ key: 'cancelled', label: 'Cancelled Orders', color: '#ef4444', icon: MdCancel }
{ key: 'created', label: 'Created Orders', color: '#0ea5e9', icon: MdOutlineLocalShipping },
{ key: 'pending', label: 'Pending Orders', color: '#f59e0b', icon: MdOutlinePendingActions },
{ key: 'delivered', label: 'Delivered Orders', color: '#10b981', icon: MdOutlineCheckCircle },
{ key: 'cancelled', label: 'Cancelled Orders', color: '#ef4444', icon: MdOutlineCancel }
];
// Batches mirror the dispatch page's slot definitions so an operator who
@@ -887,64 +900,11 @@ const Deliveries = () => {
</Backdrop>
}
{/* ============================================= || Header | ============================================= */}
<Paper
elevation={0}
sx={{
mb: { xs: 1.5, md: 2 },
p: { xs: 1.5, sm: 2, md: 2.5 },
borderRadius: DT.radiusCard / 8,
border: '1px solid',
borderColor: DT.borderSubtle,
background: `linear-gradient(135deg, ${tint('#6366f1')} 0%, ${tint('#0ea5e9')} 100%)`,
boxShadow: DT.shadowMd
}}
>
<Stack
direction={{ xs: 'column', sm: 'row' }}
alignItems={{ xs: 'flex-start', sm: 'center' }}
justifyContent="space-between"
spacing={{ xs: 1.5, sm: 2 }}
>
<Stack direction="row" alignItems="center" spacing={{ xs: 1.25, sm: 1.75 }}>
<Avatar
sx={{
width: { xs: 40, sm: 48 },
height: { xs: 40, sm: 48 },
bgcolor: '#6366f1',
color: '#fff',
boxShadow: '0 6px 18px rgba(99,102,241,0.32)'
}}
>
<MdLocalShipping size={22} />
</Avatar>
<Stack>
<Typography
variant="h3"
sx={{
fontWeight: 800,
color: DT.textPrimary,
lineHeight: 1.1,
fontSize: { xs: '1.25rem', sm: '1.5rem', md: '1.75rem' }
}}
>
Deliveries
</Typography>
<Stack direction="row" alignItems="center" spacing={0.75} sx={{ mt: 0.5 }}>
<Box
sx={{
width: 8,
height: 8,
borderRadius: '50%',
bgcolor: '#10b981',
boxShadow: '0 0 0 4px rgba(16,185,129,0.18)'
}}
/>
<Typography variant="caption" sx={{ color: DT.textSecondary, fontWeight: 600 }}>
Live · {locaName || 'All Zones'}
</Typography>
</Stack>
</Stack>
</Stack>
<PageHeader
title="Deliveries"
subtitle={`Live · ${locaName || 'All Zones'}`}
live
action={
<LocationAutocomplete
ref={locationRef}
locaName={locaName}
@@ -952,17 +912,17 @@ const Deliveries = () => {
setLocoName={setLocoName}
setPage={setPage}
pill
accentColor="#6366f1"
accentColor="#662582"
icon={<MdMyLocation size={14} />}
placeholder="Select Zone"
paperComponent={SoftPaper}
sx={{ width: { xs: '100%', sm: 280 }, zIndex: 100 }}
/>
</Stack>
</Paper>
}
/>
{/* ============================================= || KPI Cards | ============================================= */}
<Grid container spacing={{ xs: 1.25, sm: 1.5, md: 2 }} sx={{ mt: '1px' }}>
<Grid container spacing={{ xs: 2, md: 2.5 }} sx={{ mb: { xs: 1.5, md: 2 } }}>
{[
{ ...KPI_META[0], value: batchTotals.all, percentage: null },
{ ...KPI_META[1], value: countData?.uncoveredLength, percentage: countData?.total ? Math.round((countData.uncoveredLength / countData.total) * 100) : 0 },
@@ -974,107 +934,14 @@ const Deliveries = () => {
const hasPct = !Number.isNaN(pct) && item.percentage !== undefined && item.percentage !== null;
return (
<Grid item key={item.key} xs={6} sm={6} md={3}>
<Paper
elevation={0}
sx={{
position: 'relative',
overflow: 'hidden',
p: { xs: 1.25, sm: 1.75, md: 2.25 },
borderRadius: DT.radiusCard / 8,
border: '1px solid',
borderColor: DT.borderSubtle,
background: '#fff',
transition: 'transform 0.2s, box-shadow 0.2s, border-color 0.2s',
cursor: 'pointer',
'&:hover': {
transform: 'translateY(-3px)',
boxShadow: DT.shadowMd,
borderColor: edge(item.color)
}
}}
>
<Box
sx={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
height: 3,
background: `linear-gradient(90deg, ${item.color} 0%, ${soft(item.color)} 100%)`
}}
/>
<Stack direction="row" alignItems="flex-start" justifyContent="space-between" spacing={1}>
<Stack spacing={0.5} sx={{ minWidth: 0, flex: 1 }}>
<Typography
variant="caption"
sx={{
color: DT.textSecondary,
fontWeight: 700,
letterSpacing: 0.4,
textTransform: 'uppercase',
fontSize: { xs: 10, sm: 11 },
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis'
}}
>
{item.label}
</Typography>
{fetchCountIsLoading ? (
<Skeleton sx={{ width: 70, height: { xs: 28, md: 36 } }} animation="wave" />
) : (
<Typography
sx={{
fontWeight: 800,
color: DT.textPrimary,
lineHeight: 1.1,
fontSize: { xs: '1.5rem', sm: '1.75rem', md: '2rem' }
}}
>
{item.value ?? 0}
</Typography>
)}
{hasPct && (
<Stack direction="row" alignItems="center" spacing={0.5} sx={{ mt: 0.5, flexWrap: 'wrap' }}>
<Box
sx={{
display: 'inline-flex',
alignItems: 'center',
gap: 0.25,
px: 0.75,
py: 0.25,
borderRadius: 999,
bgcolor: soft(item.color),
color: item.color,
fontSize: { xs: 10, sm: 11 },
fontWeight: 800
}}
>
{Math.abs(pct)}%
</Box>
<Typography
variant="caption"
sx={{ color: DT.textMuted, display: { xs: 'none', sm: 'inline' } }}
>
of total
</Typography>
</Stack>
)}
</Stack>
<Avatar
sx={{
width: { xs: 36, sm: 42, md: 48 },
height: { xs: 36, sm: 42, md: 48 },
bgcolor: soft(item.color),
color: item.color,
boxShadow: `inset 0 0 0 1px ${edge(item.color)}`,
flexShrink: 0
}}
>
<Icon size={20} />
</Avatar>
</Stack>
</Paper>
<StatCard
title={item.label}
value={item.value ?? 0}
icon={<Icon size={20} />}
color={item.color}
loading={fetchCountIsLoading}
caption={hasPct ? `${Math.abs(pct)}% of total` : undefined}
/>
</Grid>
);
})}
@@ -1095,7 +962,7 @@ const Deliveries = () => {
}}
>
<Stack direction="row" alignItems="center" spacing={1} sx={{ mb: { xs: 1, md: 1.5 }, color: DT.textSecondary }}>
<Avatar sx={{ width: 28, height: 28, bgcolor: soft('#6366f1'), color: '#6366f1' }}>
<Avatar sx={{ width: 28, height: 28, bgcolor: soft('#662582'), color: '#662582' }}>
<MdTune size={16} />
</Avatar>
<Typography variant="caption" sx={{ fontWeight: 800, letterSpacing: 0.6, textTransform: 'uppercase', color: DT.textSecondary }}>
@@ -1249,29 +1116,19 @@ const Deliveries = () => {
minWidth: { xs: 180, sm: 220, md: 240 },
cursor: 'pointer',
'& .MuiOutlinedInput-root': {
borderRadius: '999px',
bgcolor: `${activeBatch.color}08`,
fontWeight: 700,
color: activeBatch.color,
borderRadius: '10px',
bgcolor: '#ffffff',
fontWeight: 600,
color: '#0f172a',
paddingRight: '8px',
cursor: 'pointer',
transition: 'border-color 0.15s, box-shadow 0.15s, background-color 0.2s',
'& fieldset': {
borderColor: `${activeBatch.color}55`,
borderWidth: 1.5
},
'&:hover fieldset': { borderColor: activeBatch.color },
'&.Mui-focused': {
boxShadow: `0 0 0 3px ${activeBatch.color}26`
},
'&.Mui-focused fieldset': {
borderColor: activeBatch.color,
borderWidth: 2
}
transition: 'border-color 0.15s, box-shadow 0.15s',
'& fieldset': { borderColor: '#e2e8f0', borderWidth: 1 },
'&:hover fieldset': { borderColor: '#cbd5e1' },
'&.Mui-focused': { boxShadow: `0 0 0 3px ${ring('#662582')}` },
'&.Mui-focused fieldset': { borderColor: '#662582', borderWidth: 1.5 }
},
'& .MuiAutocomplete-endAdornment .MuiSvgIcon-root': {
color: activeBatch.color
}
'& .MuiAutocomplete-endAdornment .MuiSvgIcon-root': { color: '#94a3b8' }
}}
/>
)}
@@ -1291,18 +1148,18 @@ const Deliveries = () => {
pl: 0.5,
pr: 1.25,
py: 0.5,
borderRadius: 999,
borderRadius: '10px',
cursor: 'pointer',
bgcolor: tint('#f59e0b'),
border: `1.5px solid ${edge('#f59e0b')}`,
transition: 'border-color 0.15s, box-shadow 0.15s',
'&:hover': { borderColor: '#f59e0b', boxShadow: `0 0 0 3px ${ring('#f59e0b')}` }
bgcolor: '#ffffff',
border: '1px solid #e2e8f0',
transition: 'border-color 0.15s',
'&:hover': { borderColor: '#cbd5e1' }
}}
>
<AccentAvatar color="#f59e0b">
<AccentAvatar color="#94a3b8">
<MdOutlineDateRange size={14} />
</AccentAvatar>
<Typography variant="caption" sx={{ fontWeight: 700, color: '#f59e0b', whiteSpace: 'nowrap' }}>
<Typography variant="caption" sx={{ fontWeight: 600, color: '#475569', whiteSpace: 'nowrap' }}>
{dayjs(startdate).format('DD MMM')} – {dayjs(enddate).format('DD MMM')}
</Typography>
</Stack>
@@ -1346,7 +1203,7 @@ const Deliveries = () => {
...params.InputProps,
startAdornment: (
<Stack direction="row" alignItems="center" spacing={0.75} sx={{ pl: 0.5, mr: 0.25, flexShrink: 0 }}>
<AccentAvatar color="#0ea5e9"><MdStorefront size={14} /></AccentAvatar>
<AccentAvatar color="#94a3b8"><MdStorefront size={14} /></AccentAvatar>
</Stack>
)
}}
@@ -1390,7 +1247,7 @@ const Deliveries = () => {
...params.InputProps,
startAdornment: (
<Stack direction="row" alignItems="center" spacing={0.75} sx={{ pl: 0.5, mr: 0.25, flexShrink: 0 }}>
<AccentAvatar color="#14b8a6"><MdLocationOn size={14} /></AccentAvatar>
<AccentAvatar color="#94a3b8"><MdLocationOn size={14} /></AccentAvatar>
</Stack>
)
}}
@@ -1424,7 +1281,7 @@ const Deliveries = () => {
...params.InputProps,
startAdornment: (
<Stack direction="row" alignItems="center" spacing={0.75} sx={{ pl: 0.5, mr: 0.25, flexShrink: 0 }}>
<AccentAvatar color="#8b5cf6"><MdDirectionsBike size={14} /></AccentAvatar>
<AccentAvatar color="#94a3b8"><MdDirectionsBike size={14} /></AccentAvatar>
</Stack>
)
}}
@@ -1486,33 +1343,33 @@ const Deliveries = () => {
py: 0.5,
flexShrink: 0,
cursor: 'pointer',
borderRadius: 999,
border: `1.5px solid ${active ? meta.color : edge(meta.color)}`,
bgcolor: active ? meta.color : tint(meta.color),
color: active ? '#fff' : meta.color,
fontWeight: 700,
boxShadow: active ? `0 6px 18px ${ring(meta.color)}` : 'none',
transition: 'all 0.18s',
borderRadius: DT.radiusField + 'px',
border: `1px solid ${active ? meta.color : DT.borderSubtle}`,
bgcolor: active ? meta.color : DT.surface,
color: active ? '#fff' : DT.textSecondary,
fontWeight: 600,
boxShadow: 'none',
transition: 'background-color 0.15s, border-color 0.15s, color 0.15s',
'&:hover': {
borderColor: meta.color,
boxShadow: active ? `0 6px 18px ${ring(meta.color)}` : `0 0 0 3px ${ring(meta.color)}`
borderColor: active ? meta.color : DT.borderHover,
bgcolor: active ? meta.color : DT.surfaceAlt
}
}}
>
<Avatar
sx={{
width: { xs: 22, md: 26 },
height: { xs: 22, md: 26 },
width: { xs: 20, md: 22 },
height: { xs: 20, md: 22 },
bgcolor: active ? 'rgba(255,255,255,0.22)' : soft(meta.color),
color: active ? '#fff' : meta.color
}}
>
<Icon size={13} />
<Icon size={12} />
</Avatar>
<Typography
variant="caption"
sx={{
fontWeight: 800,
fontWeight: 600,
fontSize: { xs: 11.5, md: 13 },
lineHeight: 1
}}
@@ -1521,18 +1378,18 @@ const Deliveries = () => {
</Typography>
<Box
sx={{
minWidth: { xs: 22, md: 26 },
height: { xs: 18, md: 22 },
minWidth: { xs: 20, md: 24 },
height: { xs: 18, md: 20 },
px: 0.625,
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
borderRadius: 999,
fontSize: { xs: 10, md: 11 },
fontWeight: 800,
bgcolor: active ? 'rgba(255,255,255,0.22)' : '#fff',
color: active ? '#fff' : meta.color,
border: active ? 'none' : `1px solid ${edge(meta.color)}`
fontWeight: 700,
bgcolor: active ? 'rgba(255,255,255,0.22)' : DT.surfaceAlt,
color: active ? '#fff' : DT.textSecondary,
border: 'none'
}}
>
{count}
@@ -1551,12 +1408,12 @@ const Deliveries = () => {
sx={{
m: 0,
width: '100%',
borderRadius: 999,
bgcolor: tint('#6366f1'),
'& fieldset': { borderColor: edge('#6366f1'), borderWidth: 1.5 },
'&:hover fieldset': { borderColor: '#6366f1' },
'&.Mui-focused fieldset': { borderColor: '#6366f1', borderWidth: 2 },
'&.Mui-focused': { boxShadow: `0 0 0 3px ${ring('#6366f1')}` }
borderRadius: DT.radiusField + 'px',
bgcolor: DT.surface,
'& fieldset': { borderColor: DT.borderSubtle, borderWidth: 1 },
'&:hover fieldset': { borderColor: DT.borderHover },
'&.Mui-focused fieldset': { borderColor: DT.brand, borderWidth: 1.5 },
'&.Mui-focused': { boxShadow: `0 0 0 3px ${ring(DT.brand)}` }
}}
/>
</Box>
@@ -1585,10 +1442,10 @@ const Deliveries = () => {
overflowX: 'auto',
'&::-webkit-scrollbar': { width: '10px', height: '10px', cursor: 'pointer' },
'&::-webkit-scrollbar-thumb': {
backgroundColor: edge('#6366f1'),
backgroundColor: edge('#662582'),
borderRadius: '8px',
cursor: 'pointer',
'&:hover': { backgroundColor: '#6366f1' }
'&:hover': { backgroundColor: '#662582' }
},
'&::-webkit-scrollbar-track': { backgroundColor: DT.surfaceAlt }
}}
@@ -1632,7 +1489,7 @@ const Deliveries = () => {
const RowStatusIcon = rowStatusMeta.icon;
const isSelected = !!deliverylist.find((res1) => res1.orderheaderid == row.orderheaderid);
const isOpen = productCollapse?.orderid === row?.orderid;
const chipSx = (c) => ({ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', px: 1, py: 0.25, borderRadius: 999, bgcolor: tint(c), color: c, fontWeight: 700, fontSize: 11, border: `1px solid ${edge(c)}`, whiteSpace: 'nowrap' });
const chipSx = (c) => ({ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: c, fontWeight: 700, fontSize: 12, whiteSpace: 'nowrap' });
return (
<MobileCard
key={row.orderheaderid ?? `${row.tenantname}-${index}`}
@@ -1705,7 +1562,7 @@ const Deliveries = () => {
<IconButton
size="small"
onClick={(e) => handleMenuOpen(e, row)}
sx={{ borderRadius: 999, bgcolor: tint('#6366f1'), color: '#6366f1', border: `1px solid ${edge('#6366f1')}`, '&:hover': { bgcolor: soft('#6366f1') } }}
sx={{ borderRadius: 999, bgcolor: tint('#662582'), color: '#662582', border: `1px solid ${edge('#662582')}`, '&:hover': { bgcolor: soft('#662582') } }}
>
<EditOutlined />
</IconButton>
@@ -1793,7 +1650,7 @@ const Deliveries = () => {
</MobileField>
<MobileField label="Step">
{row.step ? (
<Box sx={{ ...chipSx('#6366f1'), minWidth: 30, fontWeight: 800 }}>{row.step}</Box>
<Box sx={{ ...chipSx('#662582'), minWidth: 30, fontWeight: 800 }}>{row.step}</Box>
) : (
<Typography variant="caption" sx={{ color: DT.textMuted }}>—</Typography>
)}
@@ -1807,8 +1664,8 @@ const Deliveries = () => {
{isOpen && (
<Box sx={{ mt: 1.5, p: 1.25, borderRadius: 2, bgcolor: DT.surfaceAlt, border: `1px solid ${DT.divider}` }}>
<Stack direction="row" alignItems="center" spacing={1} sx={{ mb: 1 }}>
<AccentAvatar color="#6366f1" size={22}><MdInventory2 size={12} /></AccentAvatar>
<Typography variant="caption" sx={{ fontWeight: 800, letterSpacing: 0.5, textTransform: 'uppercase', color: '#6366f1' }}>
<AccentAvatar color="#662582" size={22}><MdInventory2 size={12} /></AccentAvatar>
<Typography variant="caption" sx={{ fontWeight: 800, letterSpacing: 0.5, textTransform: 'uppercase', color: '#662582' }}>
Product Details
</Typography>
</Stack>
@@ -2208,9 +2065,9 @@ const Deliveries = () => {
height: 24,
px: 0.875,
borderRadius: 999,
bgcolor: tint('#6366f1'),
border: `1px solid ${edge('#6366f1')}`,
color: '#6366f1',
bgcolor: tint('#662582'),
border: `1px solid ${edge('#662582')}`,
color: '#662582',
fontWeight: 800,
fontSize: 11
}}
@@ -2276,10 +2133,10 @@ const Deliveries = () => {
onClick={(e) => handleMenuOpen(e, row)}
sx={{
borderRadius: 999,
bgcolor: tint('#6366f1'),
color: '#6366f1',
border: `1px solid ${edge('#6366f1')}`,
'&:hover': { bgcolor: soft('#6366f1') }
bgcolor: tint('#662582'),
color: '#662582',
border: `1px solid ${edge('#662582')}`,
'&:hover': { bgcolor: soft('#662582') }
}}
>
<EditOutlined />
@@ -2311,9 +2168,9 @@ const Deliveries = () => {
background: '#fff'
}}
>
<Stack direction="row" alignItems="center" spacing={1} sx={{ px: 2, py: 1.25, borderBottom: `1px solid ${DT.divider}`, bgcolor: tint('#6366f1') }}>
<AccentAvatar color="#6366f1"><MdInventory2 size={14} /></AccentAvatar>
<Typography variant="caption" sx={{ fontWeight: 800, letterSpacing: 0.5, textTransform: 'uppercase', color: '#6366f1' }}>
<Stack direction="row" alignItems="center" spacing={1} sx={{ px: 2, py: 1.25, borderBottom: `1px solid ${DT.divider}`, bgcolor: tint('#662582') }}>
<AccentAvatar color="#662582"><MdInventory2 size={14} /></AccentAvatar>
<Typography variant="caption" sx={{ fontWeight: 800, letterSpacing: 0.5, textTransform: 'uppercase', color: '#662582' }}>
Product Details
</Typography>
</Stack>
@@ -2921,14 +2778,14 @@ const Deliveries = () => {
borderRadius: 2,
bgcolor: '#fff',
'& fieldset': { borderColor: DT.borderSubtle },
'&:hover fieldset': { borderColor: '#6366f1' },
'&.Mui-focused fieldset': { borderColor: '#6366f1', borderWidth: 2 },
'&.Mui-focused': { boxShadow: `0 0 0 3px ${ring('#6366f1')}` }
'&:hover fieldset': { borderColor: '#662582' },
'&.Mui-focused fieldset': { borderColor: '#662582', borderWidth: 2 },
'&.Mui-focused': { boxShadow: `0 0 0 3px ${ring('#662582')}` }
}
}}
>
{['pending','accepted','started','arrived','delivered','cancelled'].map((s) => {
const m = STATUS_META[s] || { label: s, color: '#6366f1', icon: MdHistoryToggleOff };
const m = STATUS_META[s] || { label: s, color: '#662582', icon: MdHistoryToggleOff };
const Ic = m.icon;
return (
<MenuItem key={s} value={s} sx={{ gap: 1 }}>
@@ -2955,9 +2812,9 @@ const Deliveries = () => {
borderRadius: 2,
bgcolor: '#fff',
'& fieldset': { borderColor: DT.borderSubtle },
'&:hover fieldset': { borderColor: '#6366f1' },
'&.Mui-focused fieldset': { borderColor: '#6366f1', borderWidth: 2 },
'&.Mui-focused': { boxShadow: `0 0 0 3px ${ring('#6366f1')}` }
'&:hover fieldset': { borderColor: '#662582' },
'&.Mui-focused fieldset': { borderColor: '#662582', borderWidth: 2 },
'&.Mui-focused': { boxShadow: `0 0 0 3px ${ring('#662582')}` }
}
}}
/>