updates on the create order page ui changes

src/index.js

@@ -1,3 +1,4 @@
+import logger from './utils/logger';
 import { createRoot } from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
 
@@ -38,6 +39,8 @@ if (process.env.NODE_ENV !== 'development') {
   console.warn = () => {}; // Optionally disable console.warn
 }
 
+logger.info('NearlExpress console application starting...');
+
 // const root = ReactDOM.createRoot(document.getElementById('root'));
 
 // ==============================|| MAIN - REACT DOM RENDER  ||============================== //

src/layout/MainLayout/index.js

@@ -1,4 +1,5 @@
 import { useEffect } from 'react';
+import { useSelector } from 'react-redux';
 import { Outlet } from 'react-router-dom';
 
 // material-ui
@@ -22,6 +23,7 @@ const MainLayout = () => {
   const matchDownXL = useMediaQuery(theme.breakpoints.down('xl'));
   const downLG = useMediaQuery(theme.breakpoints.down('lg'));
 
+  const { drawerOpen } = useSelector((state) => state.menu);
   const { container, miniDrawer, menuOrientation } = useConfig();
 
   const isHorizontal = menuOrientation === MenuOrientation.HORIZONTAL && !downLG;
@@ -39,7 +41,14 @@ const MainLayout = () => {
     <Box sx={{ display: 'flex', width: '100%' }}>
       <Header />
       {!isHorizontal ? <Drawer /> : <HorizontalBar />}
-      <Box component="main" sx={{ width: 'calc(100% - 260px)', flexGrow: 1, p: { xs: 2, sm: 3 } }}>
+      <Box
+        component="main"
+        sx={{
+          width: isHorizontal ? '100%' : drawerOpen ? 'calc(100% - 260px)' : { xs: '100%', lg: 'calc(100% - 60px)' },
+          flexGrow: 1,
+          p: { xs: 2, sm: 3 }
+        }}
+      >
         <Toolbar sx={{ mt: isHorizontal ? 8 : 'inherit' }} />
         <Container
           // maxWidth={container ? 'xl' : false}

src/pages/nearle/deliveries/deliveries.js

@@ -1,3 +1,4 @@
+import logger from '../../../utils/logger';
 import { enqueueSnackbar } from 'notistack';
 import { DeleteFilled, EditOutlined } from '@ant-design/icons';
 import { useState, useEffect, Fragment, useRef } from 'react';
@@ -258,18 +259,19 @@ const Deliveries = () => {
   // =========================================== ||  changerider || ===========================================
   const changeRiderMutation = useMutation({
     mutationFn: ({ selectedRider, selectedRow }) => changeRiderAPI(selectedRider, selectedRow),
-    onSuccess: (res) => {
+    onSuccess: (res, { selectedRider, selectedRow }) => {
       setLoading1(false);
       setChangeDialogOpen(false);
       if (res.data.message === 'Success') {
+        logger.info(`Rider changed successfully for order ID ${selectedRow?.orderid}. New Rider: ${selectedRider?.firstname} ${selectedRider?.lastname}`);
         opentoast('Rider Changed Successfully', 'success');
       }
       fetchCountRefetch(); // Refresh count data
       fetchDeliveriesRefetch(); // Refresh deliveries
       notifyRiderMutation.mutate(selectedRider.userfcmtoken);
     },
-    onError: (err) => {
-      console.log(err);
+    onError: (err, { selectedRider, selectedRow }) => {
+      logger.error(`Failed to change rider for order ID ${selectedRow?.orderid}:`, err);
       opentoast(err.message, 'error');
       setLoading1(false);
     }
@@ -1236,7 +1238,7 @@ const Deliveries = () => {
                                   Notify Rider
                                 </MenuItem>
                               )}
-                              {['pending', 'accepted', 'arrived'].includes(selectedRow?.orderstatus) && (
+                              {/* {['pending', 'accepted', 'arrived'].includes(selectedRow?.orderstatus) && (
                                 <MenuItem
                                   onClick={() => {
                                     if (!appId) {
@@ -1250,7 +1252,7 @@ const Deliveries = () => {
                                 >
                                   Change Rider
                                 </MenuItem>
-                              )}
+                              )} */}
                               {(roleid == 1 || roleid == 2) && (
                                 <MenuItem
                                   onClick={() => {
@@ -1487,7 +1489,7 @@ const Deliveries = () => {
                 renderInput={(params) => <TextField {...params} label="Choose Rider" />}
                 onChange={(e, value) => {
                   setSelectedRider(value);
-                  console.log('selected rider', value);
+                  logger.debug('Rider selected in dropdown:', value ? `${value.firstname} ${value.lastname}` : 'None');
                 }}
               />
             </Grid>
@@ -1509,6 +1511,7 @@ const Deliveries = () => {
               color="primary"
               onClick={() => {
                 setLoading1(true);
+                logger.info(`Initiating rider assignment change for order ID ${selectedRow?.orderid} to rider: ${selectedRider?.firstname} ${selectedRider?.lastname}`);
                 changeRiderMutation.mutate({ selectedRider, selectedRow });
               }}
             >

src/utils/logger.js

@@ -0,0 +1,66 @@
+const LOG_LEVELS = {
+  DEBUG: 0,
+  INFO: 1,
+  WARN: 2,
+  ERROR: 3,
+};
+
+// Default log level based on environment
+const currentEnv = process.env.NODE_ENV || 'development';
+const isDev = currentEnv === 'development';
+const GLOBAL_LOG_LEVEL = isDev ? LOG_LEVELS.DEBUG : LOG_LEVELS.WARN;
+
+const style = (bg, color) => `background: ${bg}; color: ${color}; padding: 2px 5px; border-radius: 4px; font-weight: bold;`;
+
+const PREFIX = '%c[NearlExpress]';
+const PREFIX_STYLE = style('#2563eb', '#ffffff');
+
+// Capture original console methods before any global overrides occur
+const originalLog = console.log;
+const originalWarn = console.warn || console.log;
+const originalError = console.error || console.log;
+
+const print = (levelName, args, labelStyle) => {
+  const levelValue = LOG_LEVELS[levelName];
+  if (levelValue < GLOBAL_LOG_LEVEL) return;
+
+  const [message, ...extra] = args;
+  const isMessageString = typeof message === 'string';
+
+  const formatPrefix = `${PREFIX}%c ${levelName}`;
+  const styles = [PREFIX_STYLE, labelStyle];
+
+  const consoleMethod =
+    levelName === 'ERROR' ? originalError :
+    levelName === 'WARN' ? originalWarn :
+    originalLog;
+
+  if (isMessageString) {
+    consoleMethod(
+      `${formatPrefix}%c ${message}`,
+      ...styles,
+      'color: inherit;',
+      ...extra
+    );
+  } else {
+    // If first argument is an object/array, preserve raw interactive log
+    consoleMethod(
+      `${formatPrefix}`,
+      ...styles,
+      message,
+      ...extra
+    );
+  }
+};
+
+const logger = {
+  debug: (...args) => print('DEBUG', args, style('#64748b', '#ffffff')),
+  info: (...args) => print('INFO', args, style('#10b981', '#ffffff')),
+  warn: (...args) => print('WARN', args, style('#f59e0b', '#ffffff')),
+  error: (...args) => {
+    print('ERROR', args, style('#ef4444', '#ffffff'));
+    // Future expansion hook: e.g., Sentry.captureException(args[0]);
+  },
+};
+
+export default logger;