Nearle_express/dailygrubs_console
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updates on the ui

Browse Source
This commit is contained in:
dharaneesh-r
2026-06-26 11:25:55 +05:30
parent 5e2a23e7e2
commit 1695ad3d34
5 changed files with 145 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -334,6 +334,21 @@ const Deliveries = () => {
</>
)}
{/* ============================================= || Sticky top shell || ============================================= */}
<Box
sx={{
position: 'sticky',
top: 0,
zIndex: 100,
bgcolor: DT.surfaceAlt,
pt: 0,
pb: 0,
mx: { xs: -0.75, sm: -1.25 },
px: { xs: 0.75, sm: 1.25 },
boxShadow: '0 4px 16px rgba(15,23,42,0.07)'
}}
>
{/* ============================================= || Header (compact) || ============================================= */}
<Paper
elevation={0}
@@ -354,6 +369,7 @@ const Deliveries = () => {
justifyContent="space-between"
spacing={{ xs: 1, sm: 1.5 }}
>
{/* LEFT: icon + title + live subtitle */}
<Stack direction="row" alignItems="center" spacing={1.25}>
<Avatar
variant="rounded"
@@ -380,22 +396,49 @@ const Deliveries = () => {
>
Deliveries
</Typography>
<Stack direction="row" alignItems="center" spacing={0.75}>
<Stack direction="row" alignItems="center" spacing={0.625}>
<Box
sx={{
width: 7,
height: 7,
borderRadius: '50%',
bgcolor: '#10b981',
boxShadow: '0 0 0 3px rgba(16,185,129,0.18)'
boxShadow: '0 0 0 3px rgba(16,185,129,0.18)',
flexShrink: 0
}}
/>
<Typography sx={{ fontSize: 11.5, color: DT.textSecondary, fontWeight: 600 }}>
<Typography sx={{ fontSize: 11.5, color: DT.textSecondary, fontWeight: 600, whiteSpace: 'nowrap' }}>
Live · {locoName} · {datestatus}
</Typography>
</Stack>
</Stack>
</Stack>
{/* RIGHT: date pill */}
<Tooltip title="Change date filter" placement="top">
<Box
onClick={() => setDateOpen(true)}
sx={{
display: 'inline-flex',
alignItems: 'center',
gap: 0.75,
px: 1.25,
py: 0.625,
borderRadius: 999,
cursor: 'pointer',
bgcolor: tint('#f59e0b'),
border: `1.5px solid ${edge('#f59e0b')}`,
color: '#b45309',
fontWeight: 800,
fontSize: 12,
transition: 'all 0.18s',
'&:hover': { borderColor: '#f59e0b', boxShadow: `0 0 0 3px ${ring('#f59e0b')}` }
}}
>
<MdCalendarMonth size={13} />
{dayjs(startdate).format('DD/MM/YY')} – {dayjs(enddate).format('DD/MM/YY')}
</Box>
</Tooltip>
</Stack>
</Paper>
@@ -490,71 +533,6 @@ const Deliveries = () => {
})}
</Grid>
{/* ============================================= || Filter Bar (compact) || ============================================= */}
<Paper
elevation={0}
sx={{
mt: { xs: 1, md: 1.25 },
p: { xs: 1, md: 1.125 },
borderRadius: 2,
border: '1px solid',
borderColor: DT.borderSubtle,
background: '#fff',
boxShadow: DT.shadowSoft
}}
>
<Stack
direction={{ xs: 'column', md: 'row' }}
spacing={1.25}
alignItems={{ xs: 'stretch', md: 'center' }}
justifyContent={{ xs: 'flex-start', md: 'space-between' }}
>
<Stack direction="row" spacing={1} alignItems="center" flexWrap="wrap" useFlexGap>
<Tooltip title="Date Filter" placement="top">
<Box
onClick={() => setDateOpen(true)}
sx={{
display: 'inline-flex',
alignItems: 'center',
gap: 0.75,
px: 1.25,
py: 0.75,
borderRadius: 999,
cursor: 'pointer',
bgcolor: tint('#f59e0b'),
border: `1.5px solid ${edge('#f59e0b')}`,
color: '#f59e0b',
fontWeight: 800,
fontSize: 12,
transition: 'all 0.18s',
'&:hover': { borderColor: '#f59e0b', boxShadow: `0 0 0 3px ${ring('#f59e0b')}` }
}}
>
<MdCalendarMonth size={14} />
{dayjs(startdate).format('DD/MM/YY')} – {dayjs(enddate).format('DD/MM/YY')}
</Box>
</Tooltip>
<Box
sx={{
display: 'inline-flex',
alignItems: 'center',
gap: 0.5,
px: 1,
py: 0.5,
borderRadius: 999,
bgcolor: tint(BRAND),
border: `1px solid ${edge(BRAND)}`,
color: BRAND,
fontSize: 11,
fontWeight: 800
}}
>
<MdReceiptLong size={12} /> {datestatus}
</Box>
</Stack>
</Stack>
</Paper>
{/* ============================================= || Status Tabs + Search (compact) || ============================================= */}
<Paper
elevation={0}
@@ -709,6 +687,8 @@ const Deliveries = () => {
</Stack>
</Paper>
</Box>{/* end sticky shell */}
{/* ============================================= || Table (dense, sticky header) || ============================================= */}
<Paper
elevation={0}

2
src/pages/nearle/dispatch/Dispatch.js
View File

@@ -3474,6 +3474,7 @@ const Dispatch = ({
{!embedded && (
<button className={`sbt ${viewMode === 'all' ? 'active' : ''}`} onClick={() => { logger.info('View mode changed: All Active Routes'); setViewMode('all'); handleRiderFocus(null); setFocusedKitchen(null); setFocusedZone(null); }}><span className="sbt-icon"><MdPublic /></span>Active</button>
)}
{!embedded && (
<button
type="button"
className={`sbt sbt-rider-info ${viewMode === 'rider-info' ? 'active' : ''}`}
@@ -3487,6 +3488,7 @@ const Dispatch = ({
>
<span className="sbt-icon"><MdInfoOutline /></span> Rider Info
</button>
)}
</div>
{shouldFetchLive && viewMode !== 'rider-info' && (

99
src/pages/nearle/dispatch/Preview.js
View File

@@ -301,6 +301,12 @@ const Preview = () => {
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
useEffect(() => {
const prev = document.body.style.overflow;
document.body.style.overflow = 'hidden';
return () => { document.body.style.overflow = prev; };
}, []);
const [csvExportData, setCsvExportData] = useState([]);
const [isLoading, setIsLoading] = useState(false);
const [tabValue, setTabValue] = useState(0);
@@ -544,7 +550,17 @@ const Preview = () => {
};
return (
<Box sx={{ display: 'flex', flexDirection: 'column', height: '100vh', overflow: 'hidden', position: 'relative' }}>
<Box
sx={{
display: 'flex',
flexDirection: 'column',
height: { xs: 'calc(100vh - 56px)', sm: 'calc(100vh - 64px)' },
overflow: 'hidden',
position: 'relative',
mt: { xs: -2, sm: -3 },
mx: { xs: -2, sm: -3 }
}}
>
<Backdrop
sx={{ position: 'absolute', color: '#fff', zIndex: (theme) => theme.zIndex.modal + 1 }}
open={isLoading}
@@ -557,7 +573,8 @@ const Preview = () => {
py: 1.5,
px: 2.5,
borderBottom: '1px solid #e2e8f0',
background: 'linear-gradient(135deg, rgba(102,37,130,0.06) 0%, rgba(146,85,171,0.06) 100%)'
background: 'linear-gradient(135deg, rgba(102,37,130,0.06) 0%, rgba(146,85,171,0.06) 100%)',
flexShrink: 0
}}
>
<Stack direction="row" alignItems="center" justifyContent="space-between">
@@ -580,6 +597,30 @@ const Preview = () => {
Assign Orders
</Typography>
</Stack>
<Button
variant="contained"
onClick={handleFinalCreateDelivery}
sx={{
borderRadius: 999,
px: 3.5,
py: 0.875,
bgcolor: '#662582',
color: '#ffffff',
textTransform: 'none',
fontWeight: 800,
fontSize: 13,
boxShadow: '0 4px 14px rgba(102, 37, 130, 0.25)',
'&:hover': {
bgcolor: '#9255ab',
transform: 'translateY(-1px)',
boxShadow: '0 6px 20px rgba(102, 37, 130, 0.35)'
},
transition: 'all 0.2s'
}}
>
Assign Orders
</Button>
</Stack>
</Box>
@@ -599,60 +640,6 @@ const Preview = () => {
)}
</Box>
<Box
sx={{
px: 3,
py: 1.75,
borderTop: '1px solid #e2e8f0',
bgcolor: '#ffffff',
boxShadow: '0 -4px 20px rgba(0, 0, 0, 0.03)'
}}
>
<Stack direction="row" gap={2} alignItems="center" justifyContent="end">
<Button
variant="outlined"
onClick={() => navigate(-1)}
sx={{
borderRadius: 999,
px: 3,
py: 1,
borderColor: '#e2e8f0',
color: '#64748b',
textTransform: 'none',
fontWeight: 700,
'&:hover': {
borderColor: '#cbd5e1',
bgcolor: '#f8fafc'
}
}}
>
Back
</Button>
<Button
variant="contained"
onClick={handleFinalCreateDelivery}
sx={{
borderRadius: 999,
px: 4,
py: 1,
bgcolor: '#662582',
color: '#ffffff',
textTransform: 'none',
fontWeight: 800,
boxShadow: '0 4px 14px rgba(102, 37, 130, 0.25)',
'&:hover': {
bgcolor: '#9255ab',
transform: 'translateY(-1px)',
boxShadow: '0 6px 20px rgba(102, 37, 130, 0.35)'
},
transition: 'all 0.2s'
}}
>
Assign Orders
</Button>
</Stack>
</Box>
<Dialog open={changeDialogOpen} onClose={() => setChangeDialogOpen(false)} maxWidth="xs" fullWidth>
<DialogTitle sx={{ fontWeight: 700 }}>Change Rider</DialogTitle>
<DialogContent>

50
src/pages/nearle/orders/multipleOrders.js
View File

@@ -116,6 +116,7 @@ const MultipleOrders = () => {
const [uploadType, setUploadType] = useState(null);
const [users, setUsers] = useState([]);
const [fileName, setFileName] = useState('');
const [slotDropdownOpen, setSlotDropdownOpen] = useState(false);
const toastCacheRef = useRef({});
@@ -538,7 +539,7 @@ const MultipleOrders = () => {
// ============================== derived ==============================
const canSubmit = !!locationid && !!pickupSlot && dropCust.length > 0;
const prereqOk = true;
const prereqOk = !!locationid;
const previewMode = dropCust.length > 0 ? 'drops' : users.length > 0 ? 'preview' : 'empty';
// ============================== render ==============================
@@ -621,7 +622,10 @@ const MultipleOrders = () => {
</InputAdornment>
)
}}
sx={{ '& .MuiOutlinedInput-root': { borderRadius: '10px', height: '36px' } }}
sx={{
'& .MuiOutlinedInput-root': { borderRadius: '10px', height: '36px', alignItems: 'center' },
'& .MuiOutlinedInput-input': { padding: '0 14px !important' }
}}
/>
) : (
<Autocomplete
@@ -643,8 +647,18 @@ const MultipleOrders = () => {
setPickupSlotsList(value?.slots || null);
}
}}
renderInput={(params) => <TextField {...params} label="Select Business Location" placeholder="Select Business Location" />}
sx={{ '& .MuiOutlinedInput-root': { borderRadius: '10px', height: '36px' } }}
renderInput={(params) => (
<TextField
{...params}
label="Select Business Location"
placeholder="Select Business Location"
InputLabelProps={{ shrink: true }}
/>
)}
sx={{
'& .MuiOutlinedInput-root': { borderRadius: '10px', height: '36px', alignItems: 'center', padding: '0 9px !important' },
'& .MuiAutocomplete-input': { padding: '0 !important' }
}}
/>
)}
</Grid>
@@ -676,7 +690,7 @@ const MultipleOrders = () => {
</InputAdornment>
)
},
sx: { '& .MuiOutlinedInput-root': { borderRadius: '10px', height: '36px', paddingLeft: '10px' } }
sx: { '& .MuiOutlinedInput-root': { borderRadius: '10px', height: '36px' } }
}
}}
/>
@@ -685,7 +699,19 @@ const MultipleOrders = () => {
<Grid item xs={12} sm={6}>
<Autocomplete
size="small" fullWidth options={pickupSlotsList || []}
sx={{ '& .MuiOutlinedInput-root': { borderRadius: '10px', height: '36px' } }}
open={slotDropdownOpen}
onOpen={() => {
if (!locationid) {
OpenToast('Please select a Business Location first.', 'warning', 3000);
return;
}
setSlotDropdownOpen(true);
}}
onClose={() => setSlotDropdownOpen(false)}
sx={{
'& .MuiOutlinedInput-root': { borderRadius: '10px', height: '36px', alignItems: 'center', padding: '0 9px !important' },
'& .MuiAutocomplete-input': { padding: '0 !important' }
}}
onChange={(e, newValue, reason) => {
if (reason === 'clear' || !newValue) { setSelectedtime(null); setPickupSlot(null); return; }
if (!newValue.time) { OpenToast('This slot has no time configured.', 'warning', 3000); return; }
@@ -699,14 +725,12 @@ const MultipleOrders = () => {
<TextField
{...params} label="Pickup Slot" placeholder="Select Pickup Slot" fullWidth
InputLabelProps={{ shrink: true }}
sx={{ '& .MuiOutlinedInput-root': { borderRadius: '10px', height: '36px' } }}
InputProps={{
...params.InputProps,
startAdornment: (
<>
<ClockCircleOutlined style={{ color: '#94a3b8', fontSize: '13px', marginRight: '6px', marginLeft: '2px', flexShrink: 0 }} />
{params.InputProps.startAdornment}
</>
<InputAdornment position="start">
<ClockCircleOutlined style={{ color: '#94a3b8', fontSize: '13px' }} />
</InputAdornment>
)
}}
/>
@@ -758,8 +782,8 @@ const MultipleOrders = () => {
value={otherinstructions}
onChange={(e) => setOtherinstructions(e.target.value)}
sx={{
'& .MuiOutlinedInput-root': { borderRadius: '10px', padding: '0 10px', alignItems: 'center', fontSize: '12px', background: '#ffffff', height: '32px' },
'& .MuiOutlinedInput-input': { padding: '0 !important', fontSize: '12px !important', lineHeight: '32px' }
'& .MuiOutlinedInput-root': { borderRadius: '10px', height: '36px', alignItems: 'center', fontSize: '12px', background: '#ffffff' },
'& .MuiOutlinedInput-input': { padding: '0 14px !important', fontSize: '12px' }
}}
/>
</Box>

4
src/pages/nearle/orders/orders.js
View File

@@ -355,7 +355,7 @@ const Orders = () => {
const createDeliveryMutation = useMutation({
mutationFn: createAutomationDeliveries,
onSuccess: (data, variables) => {
enqueueSnackbar('Orders Optimised Successfully', { variant: 'success', autoHideDuration: 2000 });
enqueueSnackbar('Orders Optimised Successfully', { variant: 'success', autoHideDuration: 2000, anchorOrigin: { vertical: 'top', horizontal: 'right' } });
orderscountRefetch();
refetchOrders();
setCreateloader(false);
@@ -469,7 +469,7 @@ const Orders = () => {
}}
startIcon={<MdLocalShipping size={18} />}
>
Assign All Orders ({rows.length})
Assign Orders ({rows.length})
</Button>
)}