updates on the createorder page and preview page as well

src/pages/nearle/dispatch/Preview.js

@@ -664,7 +664,27 @@ const Preview = () => {
   };
 
   return (
-    <Box sx={{ display: 'flex', flexDirection: 'column', height: '100vh', overflow: 'hidden', position: 'relative' }}>
+    // Mirrors Dispatch.css's `.dispatch-container` sizing exactly (this page
+    // embeds that same component below) — MainLayout's `.main-content-area`
+    // has 24px left/right/bottom padding and no padding-top (AppTopNav sits
+    // above it in normal flow), and exposes its own measured height via the
+    // --appshell-header-height CSS var. A bare `height: '100vh'` here (the
+    // previous value) doesn't subtract the top nav's height or cancel the
+    // surrounding padding, so the page's real content was taller than the
+    // visible viewport by roughly the nav height + padding — turning the
+    // whole page (not just the intended internal panels) into a scroll
+    // container, which dragged the rider sidebar along with it instead of
+    // it staying in place.
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        height: 'calc(100vh - var(--appshell-header-height, 64px))',
+        margin: '0 -24px -24px -24px',
+        overflow: 'hidden',
+        position: 'relative'
+      }}
+    >
       <Backdrop
         sx={{ position: 'absolute', color: '#fff', zIndex: (theme) => theme.zIndex.modal + 1 }}
         open={isLoading}
@@ -742,7 +762,12 @@ const Preview = () => {
         </Tabs>
       </Box>
 
-      <Box sx={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
+      {/* minHeight: 0 overrides the flex-item default of min-height: auto —
+          without it, this flex:1 child can grow past its allotted space to
+          fit its content's natural height instead of clipping to it, which
+          is what let the embedded Dispatch view (and its internal
+          overflow-y:auto sidebar) overflow into page-level scroll. */}
+      <Box sx={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden', minHeight: 0 }}>
         {tabValue === 0 && dispatchPreviewData && (
           <Dispatch
             // The key forces a full re-mount when the cache reference changes

src/pages/nearle/orders/createorder1.js

@@ -298,7 +298,6 @@ const Createorder1 = () => {
   const [stafflist, setStafflist] = useState([]);
   const [loading2, setLoading2] = useState(false);
   const [loading, setLoading] = useState(false);
-  const [btnLoading, setBtnLoading] = useState(false);
   const [shiftarr, setShiftarr] = useState([]);
   const [shiftarr1, setShiftarr1] = useState([]);
   const [orderarr, setOrderarr] = useState([]);
@@ -595,13 +594,18 @@ const Createorder1 = () => {
       service_option: 'Normal',
       finalprice: +totalCharge.toFixed(2) || 0,
       notes: otherinstructions || '',
-      parcels: [
+      // The parcel object has no numeric quantity field (confirmed against
-        {
+      // express-console-api.md's schema) — "N items" is expressed by sending
-          itemcategory: category || 'General',
+      // N parcel entries, which is also how the Deliveries page already reads
-          itemdescription: 'Order',
+      // it back (fetchDeliveries in api.js: `Quantity: b.parcels?.length`).
-          declaredvalue: +totalCharge.toFixed(2) || 0
+      // This previously always sent exactly one parcel regardless of what the
-        }
+      // operator typed into the Quantity field, so it silently got dropped —
-      ]
+      // matching "I entered 5, deliveries page shows 1".
+      parcels: Array.from({ length: Math.max(1, Number(quantity) || 1) }, () => ({
+        itemcategory: category || 'General',
+        itemdescription: 'Order',
+        declaredvalue: +totalCharge.toFixed(2) || 0
+      }))
     };
     if (!arr.tenantid) {
       opentoast('Pick a tenant before creating an order', 'warning', 2000);
@@ -2218,18 +2222,21 @@ const Createorder1 = () => {
                   )}
                   <Button
                     size="medium"
-                    disabled={!showDistance}
+                    // Was `!showDistance` only — `loading` wasn't part of the
+                    // disabled condition at all, and the separate `btnLoading`
+                    // state this button used to drive its spinner got reset by
+                    // a hardcoded 1-second setTimeout regardless of whether
+                    // createExpressBooking had actually returned yet. On a
+                    // slower request the button looked re-enabled well before
+                    // the real submission finished, inviting a second click
+                    // that created a second real booking — createsubmitobj2()
+                    // already tracks `loading` correctly via try/finally, so
+                    // just gate on that directly instead of a second,
+                    // independently-timed loading flag.
+                    disabled={!showDistance || loading}
                     variant="contained"
-                    startIcon={btnLoading ? null : <MdCheckCircle size={16} />}
+                    startIcon={loading ? null : <MdCheckCircle size={16} />}
-                    onClick={() => {
+                    onClick={createsubmitobj2}
-                      setLoading(true);
-                      setBtnLoading(true);
-                      createsubmitobj2();
-                      setTimeout(() => {
-                        setLoading(false);
-                        setBtnLoading(false);
-                      }, 1000);
-                    }}
                     sx={{
                       borderRadius: 999,
                       px: 3,
@@ -2253,7 +2260,7 @@ const Createorder1 = () => {
                       }
                     }}
                   >
-                    {btnLoading ? <CircularProgress size={18} thickness={5} sx={{ color: '#fff' }} /> : 'Create Order'}
+                    {loading ? <CircularProgress size={18} thickness={5} sx={{ color: '#fff' }} /> : 'Create Order'}
                   </Button>
                 </Stack>
               </Box>