updates on the ui

src/pages/nearle/deliveries/deliveries.js

@@ -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}

src/pages/nearle/dispatch/Dispatch.js

@@ -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' && (

src/pages/nearle/dispatch/Preview.js

@@ -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>

src/pages/nearle/orders/multipleOrders.js

@@ -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" />}
+                      renderInput={(params) => (
-                      sx={{ '& .MuiOutlinedInput-root': { borderRadius: '10px', height: '36px' } }}
+                        <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: (
-                            <>
+                            <InputAdornment position="start">
-                              <ClockCircleOutlined style={{ color: '#94a3b8', fontSize: '13px', marginRight: '6px', marginLeft: '2px', flexShrink: 0 }} />
+                              <ClockCircleOutlined style={{ color: '#94a3b8', fontSize: '13px' }} />
-                              {params.InputProps.startAdornment}
+                            </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-root': { borderRadius: '10px', height: '36px', alignItems: 'center', fontSize: '12px', background: '#ffffff' },
-                      '& .MuiOutlinedInput-input': { padding: '0 !important', fontSize: '12px !important', lineHeight: '32px' }
+                      '& .MuiOutlinedInput-input': { padding: '0 14px !important', fontSize: '12px' }
                     }}
                   />
                 </Box>

src/pages/nearle/orders/orders.js

@@ -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>
       )}