initialised commit on the ui converted in mui to astryx and changed the design to doormile

src/pages/nearle/dispatch/Preview.js

@@ -1,25 +1,17 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
-import {
-  Backdrop,
-  Box,
-  Button,
-  Card,
-  Chip,
-  IconButton,
-  Stack,
-  Tab,
-  Tabs,
-  Tooltip,
-  Typography
-} from '@mui/material';
 import { useMutation } from '@tanstack/react-query';
 import dayjs from 'dayjs';
-import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import { HiOutlineArrowLeft } from 'react-icons/hi';
 import { IoReload } from 'react-icons/io5';
 import { MdTwoWheeler } from 'react-icons/md';
 
+import { Button } from '@astryxdesign/core/Button';
+import { IconButton } from '@astryxdesign/core/IconButton';
+import { Tooltip } from '@astryxdesign/core/Tooltip';
+import { Stack } from '@astryxdesign/core/Stack';
+import { Heading } from '@astryxdesign/core/Heading';
+
 import {
   createAutomationDeliveries,
   createOptimisationDeliveries,
@@ -32,6 +24,7 @@ import CSVExport from 'components/third-party/ReactTable';
 import CircularLoader from 'components/nearle_components/CircularLoader';
 import Dispatch from './Dispatch';
 import { stepColor } from './dispatchShared';
+import { BRAND, DT } from '../_shared/ordersDesign';
 
 const tuningTypes = [
   { tuneid: 1, type: 'Balanced', value: 'balanced' },
@@ -416,81 +409,79 @@ const Preview = () => {
   };
 
   return (
-    <Box
-      sx={{
+    <div
+      className="dispatch-preview-shell"
+      style={{
         display: 'flex',
         flexDirection: 'column',
-        height: { xs: 'calc(100vh - 56px)', sm: 'calc(100vh - 64px)' },
+        height: 'calc(100vh - var(--appshell-header-height, 64px))',
         overflow: 'hidden',
-        position: 'relative',
-        mt: { xs: -2, sm: -3 },
-        mx: { xs: -2, sm: -3 }
+        position: 'relative'
       }}
     >
-      <Backdrop
-        sx={{ position: 'absolute', color: '#fff', zIndex: (theme) => theme.zIndex.modal + 1 }}
-        open={isLoading}
-      >
-        <CircularLoader color="inherit" />
-      </Backdrop>
+      {isLoading && (
+        <div
+          style={{
+            position: 'absolute',
+            inset: 0,
+            backgroundColor: 'rgba(0, 0, 0, 0.5)',
+            zIndex: 1301,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center'
+          }}
+        >
+          <CircularLoader />
+        </div>
+      )}
 
-      <Box
-        sx={{
-          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%)',
+      <div
+        style={{
+          padding: '12px 20px',
+          borderBottom: `1px solid ${DT.borderSubtle}`,
+          background: 'linear-gradient(135deg, rgba(192, 18, 39,0.06) 0%, rgba(210, 84, 99,0.06) 100%)',
           flexShrink: 0
         }}
       >
-        <Stack direction="row" alignItems="center" justifyContent="space-between">
-          <Stack direction="row" alignItems="center" spacing={1.5}>
-            <Tooltip title="Back to orders" placement="top">
+        <Stack direction="horizontal" vAlign="center" justify="between">
+          <Stack direction="horizontal" vAlign="center" gap={1.5}>
+            <Tooltip content="Back to orders" placement="above">
               <IconButton
+                label="Back to orders"
+                icon={<HiOutlineArrowLeft size={18} />}
+                variant="secondary"
                 onClick={() => navigate('/nearle/orders')}
-                sx={{
-                  bgcolor: '#ffffff',
-                  border: '1px solid #e2e8f0',
-                  color: '#662582',
-                  boxShadow: '0 2px 8px rgba(0, 0, 0, 0.04)',
-                  '&:hover': { bgcolor: '#f8fafc', borderColor: '#662582' }
+                style={{
+                  backgroundColor: '#ffffff',
+                  border: `1px solid ${DT.borderSubtle}`,
+                  color: BRAND,
+                  boxShadow: '0 2px 8px rgba(0, 0, 0, 0.04)'
                 }}
-              >
-                <HiOutlineArrowLeft size={18} />
-              </IconButton>
+              />
             </Tooltip>
-            <Typography variant="h3" fontWeight={700} sx={{ color: '#0f172a' }}>
+            <Heading level={1} style={{ margin: 0, fontSize: 20, fontWeight: 700, color: DT.textPrimary }}>
               Assign Orders
-            </Typography>
+            </Heading>
           </Stack>
 
           <Button
-            variant="contained"
+            label="Assign Orders"
+            variant="primary"
             onClick={handleFinalCreateDelivery}
-            sx={{
+            style={{
               borderRadius: 999,
-              px: 3.5,
-              py: 0.875,
-              bgcolor: '#662582',
+              padding: '7px 28px',
+              backgroundColor: BRAND,
               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'
+              boxShadow: '0 4px 14px rgba(192, 18, 39, 0.25)'
             }}
-          >
-            Assign Orders
-          </Button>
+          />
         </Stack>
-      </Box>
+      </div>
 
-      <Box sx={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
+      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
         {dispatchPreviewData && (
           <Dispatch
             key={dispatchPreviewData?.__cacheKey || JSON.stringify(reconcileRiders.length)}
@@ -498,9 +489,23 @@ const Preview = () => {
             embedded
           />
         )}
-      </Box>
+      </div>
 
-    </Box>
+      <style>{`
+        .dispatch-preview-shell {
+          margin-top: -24px;
+          margin-left: -24px;
+          margin-right: -24px;
+        }
+        @media (max-width: 480px) {
+          .dispatch-preview-shell {
+            margin-top: -16px;
+            margin-left: -16px;
+            margin-right: -16px;
+          }
+        }
+      `}</style>
+    </div>
   );
 };