diff --git a/.env.development b/.env.development index 972e18a..a174436 100644 --- a/.env.development +++ b/.env.development @@ -5,4 +5,8 @@ REACT_APP_STAFF_TOKEN= REACT_APP_GOOGLE_MAPS_API_KEY=AIzaSyCF4KatYCI3vqz1_H3kiHeyS3yCMfYToh8 REACT_APP_RIDER_ACCESS_ID=AAAAILMpCEU:APA91bEavuOllBI6sFgYtxXAgNmAVwNA-MnCMHLGlR4_t7UqpLajAkdn3T0CZr_zaLBknLyim9ytFLMZgbeXmKqTad_PKCbqlYjHpaizVrLXtecxqyEy4UktIacK2UvHVUATHL-7VQQk +GENERATE_SOURCEMAP=false +DISABLE_ESLINT_PLUGIN=true + + diff --git a/.env.staging b/.env.staging index b0c47ec..675c68a 100644 --- a/.env.staging +++ b/.env.staging @@ -1,3 +1,6 @@ -REACT_APP_URL=https://jupiter.nearle.app/live/api/v1 -REACT_APP_URL2= -REACT_APP_STAFF_TOKEN= \ No newline at end of file +REACT_APP_URL=https://jupiter.nearle.app/live/api/v1 +REACT_APP_URL2= +REACT_APP_STAFF_TOKEN= + +GENERATE_SOURCEMAP=false +DISABLE_ESLINT_PLUGIN=true \ No newline at end of file diff --git a/CLAUDE.md b/CLAUDE.md index 021bcad..433702a 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -174,43 +174,43 @@ const AccentAvatar = ({ color, selected, size = 24, children }) => ( ### Page anatomy (every operator page should follow this order) -> **Use brand purple `#662582` (with light variant `#9255AB`) for every brand surface below.** Don't use indigo `#6366f1` — that's reserved for the "Accepted" status badge only. +> **Use brand red `#C01227` (with light variant `#D35968`) for every brand surface below.** Don't use indigo `#6366f1` — that's reserved for the "Accepted" status badge only. -1. **Gradient header ``** — `linear-gradient(135deg, ${tint('#662582')} 0%, ${tint('#9255AB')} 100%)`, 48px filled `#662582` avatar with a page icon, `Typography variant="h3"` title, "Live · {zone}" sub-line with an 8px green pulsing dot, and a pill `LocationAutocomplete` on the right (`pill accentColor="#662582" paperComponent={SoftPaper}`). -2. **KPI tiles row** — `Grid` of 3–4 `Paper` cards, each with a 3px top stripe gradient, uppercase eyebrow label, large bold number, and a soft-tinted avatar holding an icon. The "primary" tile uses brand purple `#662582`; other tiles use semantic status colours. +1. **Gradient header ``** — `linear-gradient(135deg, ${tint('#C01227')} 0%, ${tint('#D35968')} 100%)`, 48px filled `#C01227` avatar with a page icon, `Typography variant="h3"` title, "Live · {zone}" sub-line with an 8px green pulsing dot, and a pill `LocationAutocomplete` on the right (`pill accentColor="#C01227" paperComponent={SoftPaper}`). +2. **KPI tiles row** — `Grid` of 3–4 `Paper` cards, each with a 3px top stripe gradient, uppercase eyebrow label, large bold number, and a soft-tinted avatar holding an icon. The "primary" tile uses brand red `#C01227`; other tiles use semantic status colours. 3. **Filter bar ``** (optional) — pill-style `Autocomplete`s using `pillFieldSx(color)` + `SoftPaper`, each with an `AccentAvatar` start-adornment. -4. **Pill status tabs + pill search** — tabs as clickable `` pills (active = filled accent + glow ring, inactive = `tint` bg + `edge` border), each with an avatar icon and a count badge. Tab accents use the **semantic status colour** for each tab (pending → amber, delivered → emerald, etc.). Search via `DebounceSearchBar` styled with brand purple `#662582` (tint bg, edge border, focus ring). -5. **Table ``** with `` + sticky `` — uppercase muted headers on `DT.surfaceAlt`, rows with `borderBottom: 1px solid ${DT.divider}` and `:hover` row tint. Scrollbar thumb uses brand purple `edge('#662582')`. +4. **Pill status tabs + pill search** — tabs as clickable `` pills (active = filled accent + glow ring, inactive = `tint` bg + `edge` border), each with an avatar icon and a count badge. Tab accents use the **semantic status colour** for each tab (pending → amber, delivered → emerald, etc.). Search via `DebounceSearchBar` styled with brand red `#C01227` (tint bg, edge border, focus ring). +5. **Table ``** with `` + sticky `` — uppercase muted headers on `DT.surfaceAlt`, rows with `borderBottom: 1px solid ${DT.divider}` and `:hover` row tint. Scrollbar thumb uses brand red `edge('#C01227')`. 6. **Status badges in cells** — `Stack` with `AccentAvatar` + label inside a soft pill (tint bg, edge border). Status colours come from a per-page `STATUS_META` map keyed by lowercase status string — these are **semantic**, not brand. -7. **Edit / action icon buttons** — soft-pill `IconButton` using brand purple `#662582` (NOT `#8b5cf6` — that overlaps with the "Picked" status badge and confuses operators). +7. **Edit / action icon buttons** — soft-pill `IconButton` using brand red `#C01227` (NOT `#8b5cf6` — that overlaps with the "Picked" status badge and confuses operators). 8. **Empty state** — centered 64px avatar (soft grey), bold "No X to show" line, and a muted helper sentence. Do not use antd `` for new code. ### Universal brand colour -**`#662582` — NearlExpress brand purple.** This is the canonical primary colour for this app, defined in `src/themes/theme/default.js` as `primary.main`. It drives the sidebar, the logo, and is what every new surface (page headers, KPI primary tile, search bars, edit-action buttons, dialog/popup headers, scrollbars) must use as the brand accent. +**`#C01227` — NearlExpress brand red.** This is the canonical primary colour for this app, defined in `src/themes/theme/default.js` as `primary.main`. It drives the sidebar, the logo, and is what every new surface (page headers, KPI primary tile, search bars, edit-action buttons, dialog/popup headers, scrollbars) must use as the brand accent. Variants (also from `theme/default.js`): | Token | Hex | Use | |---|---|---| -| `primary.lighter` | `#E8D9EF` | Very subtle wash bg | -| `primary.light` / `primary.400` | `#9255AB` | Gradient pair with main | -| `primary.main` | `#662582` | Brand primary — default for all brand surfaces | -| `primary.dark` | `#4D1C61` | Hover / pressed states | -| `primary.darker` | `#260E30` | Deep contrast text on light bg | +| `primary.lighter` | `#F6DBDF` | Very subtle wash bg | +| `primary.light` / `primary.400` | `#D35968` | Gradient pair with main | +| `primary.main` | `#C01227` | Brand primary — default for all brand surfaces | +| `primary.dark` | `#900E1D` | Hover / pressed states | +| `primary.darker` | `#47070E` | Deep contrast text on light bg | -**Page header / dialog header gradient:** `linear-gradient(135deg, ${tint('#662582')} 0%, ${tint('#9255AB')} 100%)` (subtle wash) or `linear-gradient(135deg, #662582 0%, #9255AB 100%)` (solid, for dialog titles). +**Page header / dialog header gradient:** `linear-gradient(135deg, ${tint('#C01227')} 0%, ${tint('#D35968')} 100%)` (subtle wash) or `linear-gradient(135deg, #C01227 0%, #D35968 100%)` (solid, for dialog titles). -> **Migration note:** `deliveries.js`, `Tenants.js`, and `clientPricing.js` currently use `#6366f1` (indigo) as their brand accent — a holdover from the first design pass before brand purple was canonicalised. They are scheduled to migrate to `#662582`. `customers.js` and the createorder1 Saved-Address dialog have already been migrated. +> **Migration note:** `deliveries.js`, `Tenants.js`, and `clientPricing.js` currently use `#6366f1` (indigo) as their brand accent — a holdover from the first design pass before brand red was canonicalised. They are scheduled to migrate to `#C01227`. `customers.js` and the createorder1 Saved-Address dialog have already been migrated. ### Status palette (semantic — distinct from brand) -These colour-code lifecycle states. Do **not** swap them for brand purple — operators rely on the colour to identify status at a glance. +These colour-code lifecycle states. Do **not** swap them for brand red — operators rely on the colour to identify status at a glance. | Meaning | Colour | |--------------------------|-----------| | Pending / waiting | `#f59e0b` (amber) | -| Accepted / assigned | `#6366f1` (indigo — semantically distinct from brand purple) | +| Accepted / assigned | `#6366f1` (indigo — semantically distinct from brand red) | | Arrived | `#06b6d4` (cyan) | | Picked up | `#8b5cf6` (light purple — distinct from brand) | | Active / in-transit | `#14b8a6` (teal) | diff --git a/public/favicon.png b/public/favicon.png index 73597f0..fc80e35 100644 Binary files a/public/favicon.png and b/public/favicon.png differ diff --git a/public/index.html b/public/index.html index d30ef4c..5bcd5ba 100644 --- a/public/index.html +++ b/public/index.html @@ -4,8 +4,8 @@ - - + + - Nearle Console + Doormile Console ({ diff --git a/src/components/nearle_components/CLAUDE.md b/src/components/nearle_components/CLAUDE.md index fc347f8..9d641b8 100644 --- a/src/components/nearle_components/CLAUDE.md +++ b/src/components/nearle_components/CLAUDE.md @@ -26,13 +26,13 @@ The `DT` design tokens (palette, alpha helpers, `pillFieldSx`, `SoftPaper`, `Acc **Hard rules when editing components here:** -- **Universal brand colour is `#662582`** (NearlExpress purple — from `themes/theme/default.js` `primary.main`). Every brand surface (page header, dialog header, KPI primary tile, search bars, edit-action buttons, scrollbars) uses this. Gradient pair: `#662582 → #9255AB`. -- **Semantic status palette is distinct** from the brand. Use these for lifecycle indicators only: sky `#0ea5e9`, emerald `#10b981`, amber `#f59e0b`, red `#ef4444`, status-purple `#8b5cf6` (lighter than brand), cyan `#06b6d4`, teal `#14b8a6`, orange `#f97316`, muted `#94a3b8`, indigo `#6366f1` (Accepted status). Don't replace these with brand purple — operators colour-code on them. +- **Universal brand colour is `#C01227`** (Doormile red — from `themes/theme/default.js` `primary.main`). Every brand surface (page header, dialog header, KPI primary tile, search bars, edit-action buttons, scrollbars) uses this. Gradient pair: `#C01227 → #D35968`. +- **Semantic status palette is distinct** from the brand. Use these for lifecycle indicators only: sky `#0ea5e9`, emerald `#10b981`, amber `#f59e0b`, red `#ef4444`, status-purple `#8b5cf6` (lighter than brand), cyan `#06b6d4`, teal `#14b8a6`, orange `#f97316`, muted `#94a3b8`, indigo `#6366f1` (Accepted status). Don't replace these with brand red — operators colour-code on them. - Don't introduce a colour from `theme.palette` for new surfaces — those are Mantis defaults and don't match the DT system. Use the hex values above directly. - Border radii: `12` (inner), `16` (card), `999` (pill). No other values. - Shadows: `DT.shadowSoft` / `DT.shadowMd` / `DT.shadowPop`. No raw `box-shadow` strings. -> Some existing redesigned pages (`deliveries.js`, `Tenants.js`, `clientPricing.js`) still use `#6366f1` as the brand accent — this is a legacy from the first design pass. `customers.js` and the `createorder1` Saved-Address dialog are already on `#662582`. When you next edit one of the legacy pages, migrate it to brand purple in the same PR. +> Some existing redesigned pages (`deliveries.js`, `Tenants.js`, `clientPricing.js`) still use `#6366f1` as the brand accent — this is a legacy from the first design pass. `customers.js` and the `createorder1` Saved-Address dialog are already on `#C01227`. When you next edit one of the legacy pages, migrate it to brand red in the same PR. --- diff --git a/src/components/nearle_components/LoaderWithImage.js b/src/components/nearle_components/LoaderWithImage.js index 10e1395..8510ee3 100644 --- a/src/components/nearle_components/LoaderWithImage.js +++ b/src/components/nearle_components/LoaderWithImage.js @@ -1,7 +1,7 @@ // LoaderWithImage.jsx import React from 'react'; import { Box, CircularProgress } from '@mui/material'; -import nelogo from '../../assets/images/logo-sm.png'; +import nelogo from '../../assets/images/doormile-mark.png'; export default function LoaderWithImage({ size = 70, imgSize = 40, alt = 'loader' }) { return ( diff --git a/src/components/nearle_components/MobileCard.js b/src/components/nearle_components/MobileCard.js index 31e2f69..20d564f 100644 --- a/src/components/nearle_components/MobileCard.js +++ b/src/components/nearle_components/MobileCard.js @@ -42,7 +42,7 @@ MobileCardList.propTypes = { // Card shell — coloured accent rail on the left, a header slot (status badge / // title / action buttons), then any field grid / collapse content as children. -export const MobileCard = ({ accent = '#662582', header, footer, selected = false, onClick, children, sx }) => ( +export const MobileCard = ({ accent = '#C01227', header, footer, selected = false, onClick, children, sx }) => ( diff --git a/src/layout/MainLayout/Drawer/DrawerContent/Navigation/NavCollapse.js b/src/layout/MainLayout/Drawer/DrawerContent/Navigation/NavCollapse.js index 3504851..4b5bf95 100644 --- a/src/layout/MainLayout/Drawer/DrawerContent/Navigation/NavCollapse.js +++ b/src/layout/MainLayout/Drawer/DrawerContent/Navigation/NavCollapse.js @@ -234,13 +234,27 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s ...(drawerOpen && { '&:hover': { - // bgcolor: theme.palette.mode === ThemeMode.DARK ? 'divider' : 'primary.lighter' - bgcolor: '#7b1fa2' + bgcolor: '#fff', + '& .MuiTypography-root': { + color: '#C01227 !important' + }, + '& svg, & .anticon': { + color: '#C01227 !important' + } }, '&.Mui-selected': { bgcolor: 'transparent', color: iconSelectedColor, - '&:hover': { color: iconSelectedColor, bgcolor: theme.palette.mode === ThemeMode.DARK ? 'divider' : 'transparent' } + '&:hover': { + bgcolor: '#fff', + color: '#C01227', + '& .MuiTypography-root': { + color: '#C01227 !important' + }, + '& svg, & .anticon': { + color: '#C01227 !important' + } + } } }), ...(!drawerOpen && { @@ -273,20 +287,23 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s alignItems: 'center', justifyContent: 'center', '&:hover': { - // bgcolor: theme.palette.mode === ThemeMode.DARK ? 'secondary.light' : 'secondary.lighter' - bgcolor: '#7b1fa2', - color: 'white' + bgcolor: '#fff', + '& svg': { + color: '#C01227 !important' + } } }), ...(!drawerOpen && selected === menu.id && { - bgcolor: 'primary.light', - color: 'primary.main', - '&:hover': { - bgcolor: '#7b1fa2', - color: 'primary.main' + bgcolor: 'primary.light', + color: 'primary.main', + '&:hover': { + bgcolor: '#fff', + '& svg': { + color: '#C01227 !important' } - }) + } + }) }} > {menuIcon} diff --git a/src/layout/MainLayout/Drawer/DrawerContent/Navigation/NavItem.js b/src/layout/MainLayout/Drawer/DrawerContent/Navigation/NavItem.js index 3cd1a24..97d7b28 100644 --- a/src/layout/MainLayout/Drawer/DrawerContent/Navigation/NavItem.js +++ b/src/layout/MainLayout/Drawer/DrawerContent/Navigation/NavItem.js @@ -1,5 +1,5 @@ import PropTypes from 'prop-types'; -import { forwardRef, useEffect, useState } from 'react'; +import { forwardRef, useEffect } from 'react'; import { Link } from 'react-router-dom'; import { useDispatch, useSelector } from 'react-redux'; @@ -41,7 +41,7 @@ const NavItem = ({ item, level }) => { const isSelected = openItem.findIndex((id) => id === item.id) > -1; const itemIcon = item.icon ? ( - + ) : ( false ); @@ -97,87 +97,96 @@ const NavItem = ({ item, level }) => { onClick={() => { // dispatch(setSelectedMenu(item)); }} - sx={{ - zIndex: 1201, - pl: drawerOpen ? `${level * 28}px` : 1.5, - py: !drawerOpen && level === 1 ? 1.25 : 1, - ...(drawerOpen && { - '&:hover': { - bgcolor: '#7b1fa2' - }, - '&.Mui-selected': { - bgcolor: theme.palette.mode === ThemeMode.DARK ? 'divider' : 'primary.lighter', - borderRight: `2px solid ${theme.palette.primary.main}`, - color: iconSelectedColor, + sx={{ + zIndex: 1201, + pl: drawerOpen ? `${level * 28}px` : 1.5, + py: !drawerOpen && level === 1 ? 1.25 : 1, + ...(drawerOpen && { '&:hover': { - color: iconSelectedColor, - bgcolor: theme.palette.mode === ThemeMode.DARK ? 'divider' : 'primary.lighter' - } - } - }), - ...(!drawerOpen && { - bgcolor: '#662582', - '&:hover': { - bgcolor: '#662582' - }, - '&.Mui-selected': { - '&:hover': { - bgcolor: 'transparent' - }, - bgcolor: 'transparent' - } - }) - }} - {...(downLG && { - onClick: () => { - dispatch(openDrawer(false)); - } - })} - > - {itemIcon && ( - { + dispatch(openDrawer(false)); + } + })} + > + {itemIcon && ( + - {itemIcon} - - )} - {(drawerOpen || (!drawerOpen && level !== 1)) && ( - - {item.title} - - } - /> - )} - {(drawerOpen || (!drawerOpen && level !== 1)) && item.chip && ( - {item.chip.avatar}} - /> - )} + }} + > + {itemIcon} + + )} + {(drawerOpen || (!drawerOpen && level !== 1)) && ( + + {item.title} + + } + /> + )} + {(drawerOpen || (!drawerOpen && level !== 1)) && item.chip && ( + {item.chip.avatar}} + /> + )} ) : ( @@ -229,11 +238,11 @@ const NavItem = ({ item, level }) => { }), ...(!drawerOpen && isSelected && { - bgcolor: 'transparent', - '&:hover': { - bgcolor: 'transparent' - } - }) + bgcolor: 'transparent', + '&:hover': { + bgcolor: 'transparent' + } + }) }} > {itemIcon} @@ -254,11 +263,11 @@ const NavItem = ({ item, level }) => { }), ...(!drawerOpen && isSelected && { - bgcolor: 'transparent', - '&:hover': { - bgcolor: 'transparent' - } - }) + bgcolor: 'transparent', + '&:hover': { + bgcolor: 'transparent' + } + }) }} > diff --git a/src/layout/MainLayout/Drawer/DrawerHeader/index.js b/src/layout/MainLayout/Drawer/DrawerHeader/index.js index 57b10dd..c1c0313 100644 --- a/src/layout/MainLayout/Drawer/DrawerHeader/index.js +++ b/src/layout/MainLayout/Drawer/DrawerHeader/index.js @@ -10,8 +10,12 @@ import DrawerHeaderStyled from './DrawerHeaderStyled'; import { MenuOrientation } from 'config'; import useConfig from 'hooks/useConfig'; -import logo from 'assets/images/logo-nearle9.png' -import logo1 from 'assets/images/logo-sm1.png' +import logo from 'assets/images/doormile-logo.png' +import logo1 from 'assets/images/doormile-mark.png' + +// doormile-logo.png is a white asset; this recolours it to brand red (#C01227) for the light sidebar background. +const DOORMILE_RED_FILTER = 'brightness(0) saturate(100%) invert(14%) sepia(85%) saturate(4649%) hue-rotate(345deg) brightness(97%) contrast(92%)'; + // ==============================|| DRAWER HEADER ||============================== // const DrawerHeader = ({ open }) => { @@ -37,15 +41,13 @@ const DrawerHeader = ({ open }) => { {(open) && logo + style={{ height: '29px', width: 'auto' }} + alt='Doormile'/> } {(!open) && - logo + Doormile } ); diff --git a/src/layout/MainLayout/Drawer/MiniDrawerStyled.js b/src/layout/MainLayout/Drawer/MiniDrawerStyled.js index ec2de91..dd9fe42 100644 --- a/src/layout/MainLayout/Drawer/MiniDrawerStyled.js +++ b/src/layout/MainLayout/Drawer/MiniDrawerStyled.js @@ -15,7 +15,7 @@ const openedMixin = (theme) => ({ }), overflowX: 'hidden', boxShadow: theme.palette.mode === ThemeMode.DARK ? theme.customShadows.z1 : 'none', - backgroundColor:'#662582', + backgroundColor:'#C01227', }); const closedMixin = (theme) => ({ @@ -27,7 +27,7 @@ const closedMixin = (theme) => ({ width: theme.spacing(7.5), borderRight: 'none', boxShadow: theme.customShadows.z1, - backgroundColor:'#662582', + backgroundColor:'#C01227', }); // ==============================|| DRAWER - MINI STYLED ||============================== // diff --git a/src/layout/MainLayout/Drawer/index.js b/src/layout/MainLayout/Drawer/index.js index 18e1d55..1db45d5 100644 --- a/src/layout/MainLayout/Drawer/index.js +++ b/src/layout/MainLayout/Drawer/index.js @@ -55,7 +55,7 @@ const MainDrawer = ({ window }) => { borderRight: `1px solid ${theme.palette.divider}`, backgroundImage: 'none', boxShadow: 'inherit', - bgcolor:'#662582' + bgcolor:'#C01227' } }} > diff --git a/src/layout/MainLayout/Header/HeaderContent/MobileSection.js b/src/layout/MainLayout/Header/HeaderContent/MobileSection.js index 82eab82..5477886 100644 --- a/src/layout/MainLayout/Header/HeaderContent/MobileSection.js +++ b/src/layout/MainLayout/Header/HeaderContent/MobileSection.js @@ -8,7 +8,6 @@ import { AppBar, Box, ClickAwayListener, Paper, Popper, Toolbar } from '@mui/mat import Profile from './Profile'; import IconButton from 'components/@extended/IconButton'; import Transitions from 'components/@extended/Transitions'; -import { ThemeMode } from 'config'; // assets import { MoreOutlined } from '@ant-design/icons'; diff --git a/src/layout/MainLayout/Header/HeaderContent/Notification.js b/src/layout/MainLayout/Header/HeaderContent/Notification.js index ddc7f8e..ff656b8 100644 --- a/src/layout/MainLayout/Header/HeaderContent/Notification.js +++ b/src/layout/MainLayout/Header/HeaderContent/Notification.js @@ -24,7 +24,6 @@ import { import MainCard from 'components/MainCard'; import IconButton from 'components/@extended/IconButton'; import Transitions from 'components/@extended/Transitions'; -import { ThemeMode } from 'config'; // assets import { BellOutlined, CheckCircleOutlined, GiftOutlined, MessageOutlined, SettingOutlined } from '@ant-design/icons'; @@ -90,7 +89,7 @@ const Notification = () => { // color="primary" sx={{ "& .MuiBadge-badge": { - color: "#662582", + color: "#C01227", backgroundColor: "white" } }} diff --git a/src/layout/MainLayout/Header/HeaderContent/Profile/index.js b/src/layout/MainLayout/Header/HeaderContent/Profile/index.js index f02bec4..a9bd387 100644 --- a/src/layout/MainLayout/Header/HeaderContent/Profile/index.js +++ b/src/layout/MainLayout/Header/HeaderContent/Profile/index.js @@ -13,8 +13,6 @@ import Avatar from 'components/@extended/Avatar'; import MainCard from 'components/MainCard'; import Transitions from 'components/@extended/Transitions'; import IconButton from 'components/@extended/IconButton'; - -import { ThemeMode } from 'config'; // import useAuth from 'hooks/useAuth'; // assets @@ -83,13 +81,7 @@ const Profile = () => { { zIndex: 1200, width: isHorizontal ? '100%' : drawerOpen ? 'calc(100% - 260px)' : { xs: '100%', lg: 'calc(100% - 60px)' }, // boxShadow: theme.customShadows.z1 - bgcolor:'#662582' + bgcolor:'#C01227' } }; diff --git a/src/menu-items/nearle.js b/src/menu-items/nearle.js index d1fdc9a..de980d9 100644 --- a/src/menu-items/nearle.js +++ b/src/menu-items/nearle.js @@ -59,7 +59,7 @@ const icons = { const nearle = { id: 'nearle_Pages', - title: , + title: , icon: icons.FileDoneOutlined, type: 'group', children: [ diff --git a/src/pages/auth/check-mail.js b/src/pages/auth/check-mail.js deleted file mode 100644 index cce339d..0000000 --- a/src/pages/auth/check-mail.js +++ /dev/null @@ -1,57 +0,0 @@ -import { Link } from 'react-router-dom'; - -// material-ui -import { useTheme } from '@mui/material/styles'; -import { Box, Button, Grid, Divider, Typography, useMediaQuery } from '@mui/material'; - -// project import -import useAuth from 'hooks/useAuth'; -import AnimateButton from 'components/@extended/AnimateButton'; -import AuthWrapper from 'sections/auth/AuthWrapper'; - -// ================================|| CHECK MAIL ||================================ // - -const CheckMail = () => { - const theme = useTheme(); - const matchDownSM = useMediaQuery(theme.breakpoints.down('sm')); - - const { isLoggedIn } = useAuth(); - - return ( - - - - - Hi, Check Your Mail - - We have sent a password recover instructions to your email. - - - - - - - - - - - Sign up with - - - - - ); -}; - -export default CheckMail; diff --git a/src/pages/auth/code-verification.js b/src/pages/auth/code-verification.js deleted file mode 100644 index 8a8098d..0000000 --- a/src/pages/auth/code-verification.js +++ /dev/null @@ -1,29 +0,0 @@ -// material-ui -import { Grid, Stack, Typography } from '@mui/material'; - -// project import -import AuthWrapper from 'sections/auth/AuthWrapper'; -import AuthCodeVerification from 'sections/auth/auth-forms/AuthCodeVerification'; - -// ================================|| CODE VERIFICATION ||================================ // - -const CodeVerification = () => ( - - - - - Enter Verification Code - We send you on mail. - - - - We`ve send you code on jone. ****@company.com - - - - - - -); - -export default CodeVerification; diff --git a/src/pages/auth/forgot-password.js b/src/pages/auth/forgot-password.js deleted file mode 100644 index 79a8543..0000000 --- a/src/pages/auth/forgot-password.js +++ /dev/null @@ -1,41 +0,0 @@ -import { Link } from 'react-router-dom'; - -// material-ui -import { Grid, Stack, Typography } from '@mui/material'; - -// project import -import useAuth from 'hooks/useAuth'; -import AuthWrapper from 'sections/auth/AuthWrapper'; -import AuthForgotPassword from 'sections/auth/auth-forms/AuthForgotPassword'; - -// ================================|| FORGOT PASSWORD ||================================ // - -const ForgotPassword = () => { - const { isLoggedIn } = useAuth(); - - return ( - - - - - Forgot Password - - Back to Login - - - - - - - - - ); -}; - -export default ForgotPassword; diff --git a/src/pages/auth/login.js b/src/pages/auth/login.js deleted file mode 100644 index 0742fa4..0000000 --- a/src/pages/auth/login.js +++ /dev/null @@ -1,41 +0,0 @@ -import { Link } from 'react-router-dom'; - -// material-ui -import { Grid, Stack, Typography } from '@mui/material'; - -// project import -import useAuth from 'hooks/useAuth'; -import AuthWrapper from 'sections/auth/AuthWrapper'; -import AuthLogin from 'sections/auth/auth-forms/AuthLogin'; - -// ================================|| LOGIN ||================================ // - -const Login = () => { - const { isLoggedIn } = useAuth(); - - return ( - - - - - Login - - Don't have an account? - - - - - - - - - ); -}; - -export default Login; diff --git a/src/pages/auth/register.js b/src/pages/auth/register.js deleted file mode 100644 index c9d0cad..0000000 --- a/src/pages/auth/register.js +++ /dev/null @@ -1,41 +0,0 @@ -import { Link } from 'react-router-dom'; - -// material-ui -import { Grid, Stack, Typography } from '@mui/material'; - -// project import -import useAuth from 'hooks/useAuth'; -import AuthWrapper from 'sections/auth/AuthWrapper'; -import FirebaseRegister from 'sections/auth/auth-forms/AuthRegister'; - -// ================================|| REGISTER ||================================ // - -const Register = () => { - const { isLoggedIn } = useAuth(); - - return ( - - - - - Sign up - - Already have an account? - - - - - - - - - ); -}; - -export default Register; diff --git a/src/pages/auth/reset-password.js b/src/pages/auth/reset-password.js deleted file mode 100644 index aa4c286..0000000 --- a/src/pages/auth/reset-password.js +++ /dev/null @@ -1,26 +0,0 @@ -// material-ui -import { Grid, Stack, Typography } from '@mui/material'; - -// project import -import AuthWrapper from 'sections/auth/AuthWrapper'; -import AuthResetPassword from 'sections/auth/auth-forms/AuthResetPassword'; - -// ================================|| RESET PASSWORD ||================================ // - -const ResetPassword = () => ( - - - - - Reset Password - Please choose your new password - - - - - - - -); - -export default ResetPassword; diff --git a/src/pages/ctrlK.js b/src/pages/ctrlK.js deleted file mode 100644 index 8fc0305..0000000 --- a/src/pages/ctrlK.js +++ /dev/null @@ -1,24 +0,0 @@ -import React, { useRef, useEffect } from 'react'; - -const CtrlK = () => { - useEffect(() => { - const handleKeyPress = (event) => { - if (event.key === 'k' && (event.metaKey || event.ctrlKey)) { - event.preventDefault(); - textFieldRef.current.focus(); - } - - if (event.key === 'Escape' && document.activeElement === textFieldRef.current) { - textFieldRef.current.blur(); - } - }; - - document.addEventListener('keydown', handleKeyPress); - - return () => { - document.removeEventListener('keydown', handleKeyPress); - }; - }, [textFieldRef]); -}; - -export default CtrlK; diff --git a/src/pages/extra-pages/sample-page.js b/src/pages/extra-pages/sample-page.js deleted file mode 100644 index 5ed2c60..0000000 --- a/src/pages/extra-pages/sample-page.js +++ /dev/null @@ -1,20 +0,0 @@ -// material-ui -import { Typography } from '@mui/material'; - -// project import -import MainCard from 'components/MainCard'; - -// ==============================|| SAMPLE PAGE ||============================== // - -const SamplePage = () => ( - - - Lorem ipsum dolor sit amen, consenter nipissing eli, sed do elusion tempos incident ut laborers et doolie magna alissa. Ut enif ad - minim venice, quin nostrum exercitation illampu laborings nisi ut liquid ex ea commons construal. Duos aube grue dolor in reprehended - in voltage veil esse colum doolie eu fujian bulla parian. Exceptive sin ocean cuspidate non president, sunk in culpa qui officiate - descent molls anim id est labours. - - -); - -export default SamplePage; diff --git a/src/pages/nearle/accountsettings.js b/src/pages/nearle/accountsettings.js deleted file mode 100644 index 5ba6cdb..0000000 --- a/src/pages/nearle/accountsettings.js +++ /dev/null @@ -1,45 +0,0 @@ -import { Grid, useMediaQuery, useTheme } from '@mui/material'; -import { useQuery } from '@tanstack/react-query'; -import CircularLoader from 'components/CircularLoader'; -import Loader from 'components/Loader'; -import MainCard from 'components/MainCard'; -import { getusers } from 'pages/api/api'; - -const ViewProfile = () => { - const theme = useTheme(); - const isMobile = useMediaQuery(theme.breakpoints.down('md')); - const { - data: userdata, - isLoading, - isError, - error - } = useQuery({ - queryKey: ['getuser'], - queryFn: getusers - }); - return ( - <> - {isLoading && ( - <> - - - - )} - - - - {userdata?.firstname} - - - {' '} - - - {' '} - - - - - ); -}; - -export default ViewProfile; diff --git a/src/pages/nearle/clientPricing/clientPricing.js b/src/pages/nearle/clientPricing/clientPricing.js index 46b75f3..6b895bb 100644 --- a/src/pages/nearle/clientPricing/clientPricing.js +++ b/src/pages/nearle/clientPricing/clientPricing.js @@ -61,7 +61,7 @@ const DT = { divider: '#f1f5f9', surface: '#ffffff', surfaceAlt: '#f8fafc', - brand: '#662582' + brand: '#C01227' }; const a = (c, suffix) => `${c}${suffix}`; const tint = (c) => a(c, '08'); @@ -69,7 +69,7 @@ const soft = (c) => a(c, '18'); const ring = (c) => a(c, '26'); const edge = (c) => a(c, '55'); -const BRAND = '#662582'; +const BRAND = '#C01227'; const SoftPaper = (props) => ( ({ '& fieldset': { borderColor: '#e2e8f0', borderWidth: 1 }, '&:hover fieldset': { borderColor: '#cbd5e1' }, '&.Mui-focused': { boxShadow: `0 0 0 3px ${ring(color)}` }, - '&.Mui-focused fieldset': { borderColor: '#662582', borderWidth: 1.5 } + '&.Mui-focused fieldset': { borderColor: '#C01227', borderWidth: 1.5 } }, '& .MuiAutocomplete-endAdornment .MuiSvgIcon-root': { color: color } }); @@ -596,7 +596,7 @@ const Clients1 = () => { setLocoName={setLocoName} setPage={setPage} pill - accentColor="#662582" + accentColor="#C01227" icon={} placeholder="Select Zone" paperComponent={SoftPaper} @@ -622,7 +622,7 @@ const Clients1 = () => { title={item.label} value={value ?? 0} icon={} - color={idx === 0 ? '#662582' : item.color} + color={idx === 0 ? '#C01227' : item.color} loading={summaryDataIsLoading} /> @@ -749,11 +749,11 @@ const Clients1 = () => { m: 0, width: '100%', borderRadius: 999, - bgcolor: tint('#662582'), - '& fieldset': { borderColor: edge('#662582'), borderWidth: 1.5 }, - '&:hover fieldset': { borderColor: '#662582' }, - '&.Mui-focused fieldset': { borderColor: '#662582', borderWidth: 2 }, - '&.Mui-focused': { boxShadow: `0 0 0 3px ${ring('#662582')}` } + bgcolor: tint('#C01227'), + '& fieldset': { borderColor: edge('#C01227'), borderWidth: 1.5 }, + '&:hover fieldset': { borderColor: '#C01227' }, + '&.Mui-focused fieldset': { borderColor: '#C01227', borderWidth: 2 }, + '&.Mui-focused': { boxShadow: `0 0 0 3px ${ring('#C01227')}` } }} /> @@ -780,9 +780,9 @@ const Clients1 = () => { maxHeight: { xs: 'calc(100vh - 220px)', md: 'calc(100vh - 190px)' }, '&::-webkit-scrollbar': { width: '10px', height: '10px' }, '&::-webkit-scrollbar-thumb': { - backgroundColor: edge('#662582'), + backgroundColor: edge('#C01227'), borderRadius: '8px', - '&:hover': { backgroundColor: '#662582' } + '&:hover': { backgroundColor: '#C01227' } }, '&::-webkit-scrollbar-track': { backgroundColor: DT.surfaceAlt } }} @@ -883,7 +883,7 @@ const Clients1 = () => { - + @@ -996,10 +996,10 @@ const Clients1 = () => { { setSelectedCustomer(row); @@ -1913,7 +1913,7 @@ const Clients1 = () => { header={ - + @@ -2012,10 +2012,10 @@ const Clients1 = () => { { setSelectedCustomer(row); @@ -2108,7 +2108,7 @@ const Clients1 = () => { > } placeholder="Select Zone" paperComponent={SoftPaper} @@ -466,7 +466,7 @@ export default function Customers() { spacing={1.25} > - + @@ -491,11 +491,11 @@ export default function Customers() { m: 0, width: '100%', borderRadius: 999, - bgcolor: tint('#662582'), - '& fieldset': { borderColor: edge('#662582'), borderWidth: 1.5 }, - '&:hover fieldset': { borderColor: '#662582' }, - '&.Mui-focused fieldset': { borderColor: '#662582', borderWidth: 2 }, - '&.Mui-focused': { boxShadow: `0 0 0 3px ${ring('#662582')}` } + bgcolor: tint('#C01227'), + '& fieldset': { borderColor: edge('#C01227'), borderWidth: 1.5 }, + '&:hover fieldset': { borderColor: '#C01227' }, + '&.Mui-focused fieldset': { borderColor: '#C01227', borderWidth: 2 }, + '&.Mui-focused': { boxShadow: `0 0 0 3px ${ring('#C01227')}` } }} /> @@ -535,11 +535,11 @@ export default function Customers() { rows?.map((row, index) => ( - + @@ -626,9 +626,9 @@ export default function Customers() { maxHeight: { xs: 'calc(100vh - 220px)', md: 'calc(100vh - 190px)' }, '&::-webkit-scrollbar': { width: 10, height: 10 }, '&::-webkit-scrollbar-thumb': { - backgroundColor: edge('#662582'), + backgroundColor: edge('#C01227'), borderRadius: 8, - '&:hover': { backgroundColor: '#662582' } + '&:hover': { backgroundColor: '#C01227' } }, '&::-webkit-scrollbar-track': { backgroundColor: DT.surfaceAlt } }} @@ -700,7 +700,7 @@ export default function Customers() { - + @@ -829,7 +829,7 @@ export default function Customers() { { - return ( - <> -

Dashboard

- - ); -}; - -export default Dashboard; diff --git a/src/pages/nearle/deliveries/deliveries.js b/src/pages/nearle/deliveries/deliveries.js index 3040d1a..41a4cc0 100644 --- a/src/pages/nearle/deliveries/deliveries.js +++ b/src/pages/nearle/deliveries/deliveries.js @@ -126,7 +126,7 @@ const DT = { divider: '#f1f5f9', surface: '#ffffff', surfaceAlt: '#f8fafc', - brand: '#662582' + brand: '#C01227' }; // Quick alpha helpers (hex + percentage suffix). Mirrors the batch-dropdown @@ -912,7 +912,7 @@ const Deliveries = () => { setLocoName={setLocoName} setPage={setPage} pill - accentColor="#662582" + accentColor="#C01227" icon={} placeholder="Select Zone" paperComponent={SoftPaper} @@ -962,7 +962,7 @@ const Deliveries = () => { }} > - + @@ -1125,8 +1125,8 @@ const Deliveries = () => { transition: 'border-color 0.15s, box-shadow 0.15s', '& fieldset': { borderColor: '#e2e8f0', borderWidth: 1 }, '&:hover fieldset': { borderColor: '#cbd5e1' }, - '&.Mui-focused': { boxShadow: `0 0 0 3px ${ring('#662582')}` }, - '&.Mui-focused fieldset': { borderColor: '#662582', borderWidth: 1.5 } + '&.Mui-focused': { boxShadow: `0 0 0 3px ${ring('#C01227')}` }, + '&.Mui-focused fieldset': { borderColor: '#C01227', borderWidth: 1.5 } }, '& .MuiAutocomplete-endAdornment .MuiSvgIcon-root': { color: '#94a3b8' } }} @@ -1442,10 +1442,10 @@ const Deliveries = () => { overflowX: 'auto', '&::-webkit-scrollbar': { width: '10px', height: '10px', cursor: 'pointer' }, '&::-webkit-scrollbar-thumb': { - backgroundColor: edge('#662582'), + backgroundColor: edge('#C01227'), borderRadius: '8px', cursor: 'pointer', - '&:hover': { backgroundColor: '#662582' } + '&:hover': { backgroundColor: '#C01227' } }, '&::-webkit-scrollbar-track': { backgroundColor: DT.surfaceAlt } }} @@ -1562,7 +1562,7 @@ const Deliveries = () => { handleMenuOpen(e, row)} - sx={{ borderRadius: 999, bgcolor: tint('#662582'), color: '#662582', border: `1px solid ${edge('#662582')}`, '&:hover': { bgcolor: soft('#662582') } }} + sx={{ borderRadius: 999, bgcolor: tint('#C01227'), color: '#C01227', border: `1px solid ${edge('#C01227')}`, '&:hover': { bgcolor: soft('#C01227') } }} > @@ -1650,7 +1650,7 @@ const Deliveries = () => { {row.step ? ( - {row.step} + {row.step} ) : ( — )} @@ -1664,8 +1664,8 @@ const Deliveries = () => { {isOpen && ( - - + + Product Details @@ -2065,9 +2065,9 @@ const Deliveries = () => { height: 24, px: 0.875, borderRadius: 999, - bgcolor: tint('#662582'), - border: `1px solid ${edge('#662582')}`, - color: '#662582', + bgcolor: tint('#C01227'), + border: `1px solid ${edge('#C01227')}`, + color: '#C01227', fontWeight: 800, fontSize: 11 }} @@ -2133,10 +2133,10 @@ const Deliveries = () => { onClick={(e) => handleMenuOpen(e, row)} sx={{ borderRadius: 999, - bgcolor: tint('#662582'), - color: '#662582', - border: `1px solid ${edge('#662582')}`, - '&:hover': { bgcolor: soft('#662582') } + bgcolor: tint('#C01227'), + color: '#C01227', + border: `1px solid ${edge('#C01227')}`, + '&:hover': { bgcolor: soft('#C01227') } }} > @@ -2168,9 +2168,9 @@ const Deliveries = () => { background: '#fff' }} > - - - + + + Product Details @@ -2778,14 +2778,14 @@ const Deliveries = () => { borderRadius: 2, bgcolor: '#fff', '& fieldset': { borderColor: DT.borderSubtle }, - '&:hover fieldset': { borderColor: '#662582' }, - '&.Mui-focused fieldset': { borderColor: '#662582', borderWidth: 2 }, - '&.Mui-focused': { boxShadow: `0 0 0 3px ${ring('#662582')}` } + '&:hover fieldset': { borderColor: '#C01227' }, + '&.Mui-focused fieldset': { borderColor: '#C01227', borderWidth: 2 }, + '&.Mui-focused': { boxShadow: `0 0 0 3px ${ring('#C01227')}` } } }} > {['pending','accepted','started','arrived','delivered','cancelled'].map((s) => { - const m = STATUS_META[s] || { label: s, color: '#662582', icon: MdHistoryToggleOff }; + const m = STATUS_META[s] || { label: s, color: '#C01227', icon: MdHistoryToggleOff }; const Ic = m.icon; return ( @@ -2812,9 +2812,9 @@ const Deliveries = () => { borderRadius: 2, bgcolor: '#fff', '& fieldset': { borderColor: DT.borderSubtle }, - '&:hover fieldset': { borderColor: '#662582' }, - '&.Mui-focused fieldset': { borderColor: '#662582', borderWidth: 2 }, - '&.Mui-focused': { boxShadow: `0 0 0 3px ${ring('#662582')}` } + '&:hover fieldset': { borderColor: '#C01227' }, + '&.Mui-focused fieldset': { borderColor: '#C01227', borderWidth: 2 }, + '&.Mui-focused': { boxShadow: `0 0 0 3px ${ring('#C01227')}` } } }} /> diff --git a/src/pages/nearle/dispatch/Dispatch.css b/src/pages/nearle/dispatch/Dispatch.css index 25247c2..3da55d9 100644 --- a/src/pages/nearle/dispatch/Dispatch.css +++ b/src/pages/nearle/dispatch/Dispatch.css @@ -3,11 +3,11 @@ --bg-sub: #f8fafc; --bg-card: #ffffff; --border: #e2e8f0; - --border-active: #9255AB; + --border-active: #D35968; --text: #1e293b; --text-muted: #64748b; - --accent: #9255AB; - --accent-soft: rgba(146, 85, 171, 0.08); + --accent: #D35968; + --accent-soft: rgba(211, 89, 104, 0.08); --kitchen: #f59e0b; --kitchen-soft: rgba(245, 158, 11, 0.1); --success: #22c55e; @@ -68,7 +68,7 @@ width: 32px; height: 32px; border-radius: 8px; - background: linear-gradient(135deg, #9255AB, #2563eb); + background: linear-gradient(135deg, #D35968, #2563eb); display: flex; align-items: center; justify-content: center; @@ -308,7 +308,7 @@ background: var(--accent); border-color: var(--accent); color: #fff; - box-shadow: 0 4px 12px rgba(146, 85, 171, 0.25); + box-shadow: 0 4px 12px rgba(211, 89, 104, 0.25); } /* SVG icon slot inside each tab button — fixed square, color inherits from button @@ -389,7 +389,7 @@ .dispatch-container .strat-stat-orders { background: var(--accent-soft); - border-color: rgba(146, 85, 171, 0.25); + border-color: rgba(211, 89, 104, 0.25); } .dispatch-container .strat-stat-orders .strat-stat-value { @@ -511,22 +511,22 @@ } .dispatch-container .date-chip.is-open { - border-color: #662582; - box-shadow: 0 0 0 3px rgba(102, 37, 130, 0.2), - 0 12px 30px rgba(102, 37, 130, 0.22); + border-color: #C01227; + box-shadow: 0 0 0 3px rgba(192, 18, 39, 0.2), + 0 12px 30px rgba(192, 18, 39, 0.22); } .dispatch-container .date-chip:hover { - border-color: rgba(102, 37, 130, 0.45); + border-color: rgba(192, 18, 39, 0.45); box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06), - 0 8px 22px rgba(102, 37, 130, 0.15); + 0 8px 22px rgba(192, 18, 39, 0.15); transform: translateY(-1px); } .dispatch-container .date-chip:focus-within { - border-color: #662582; - box-shadow: 0 0 0 3px rgba(102, 37, 130, 0.2), - 0 8px 22px rgba(102, 37, 130, 0.22); + border-color: #C01227; + box-shadow: 0 0 0 3px rgba(192, 18, 39, 0.2), + 0 8px 22px rgba(192, 18, 39, 0.22); } /* Center card — visible chrome the operator reads. Renders as a - - - - )} - {users.length >= 1 && ( - - )} - - - } - > - - - - - S.No - Customer - Address - Kms - Charge - Action - - - - {dropCust.map((customer, index) => ( - - {index + 1} - {customer.firstname} - {/* {customer.ReceiverName} */} - {customer.address} - {customer.distance} - {`₹${customer.totalcharge}.00`} - - { - <> - handleCheckboxChange(event, customer)} - /> - - } - - - ))} - {dropCust.length != 0 && ( - - Total - - - - {`${totaldist} `} - - - - {`₹${totalAmt}.00`} - - - - )} - -
- - - - - - {/* ================================================= || Notes || ================================================= */} - - - - setOtherinstructions(e.target.value)} - /> - - - - - - - - - {/* ============================================= || saved address Dialog || ============================================= */} - { - setIsCustomerOpen(false); - }} - fullWidth - sx={{ minWidth: 'lg' }} - > - - - {`Select Drop Customers (${dropCust.length || 0})`} - - - setSearchCustList(e.target.value)} - sx={{ - '& .MuiOutlinedInput-input': { - p: '10.5px 0px 12px' - }, - bgcolor: 'white' - }} - startAdornment={ - - - - } - endAdornment={ - { - setSearchCustList(''); - }} - > - - - } - autoComplete="off" - /> - - - - - - - {customerlist.length == 0 ? ( - - - - ) : ( - - {customerlist && - customerlist.map((customer, index) => ( - - cust.customerid === customer.customerid)} // Set the checked state of the checkbox based on whether the customer is in `dropCust` - onChange={(event) => handleCheckboxChange(event, customer)} - /> - } - label={ -
- - {`${customer.firstname} (${customer.contactno})`} - - - - {customer.address} - -
- } - /> - - ))} - - )} - - - - - - - - ); -}; - -export default MultipleOrders; diff --git a/src/pages/nearle/orders/newcreateOrder.js b/src/pages/nearle/orders/newcreateOrder.js deleted file mode 100644 index e137ad3..0000000 --- a/src/pages/nearle/orders/newcreateOrder.js +++ /dev/null @@ -1,2466 +0,0 @@ -import * as React from 'react'; -import { useEffect, useState, useRef, Fragment } from 'react'; -import { - FormControl, - InputAdornment, - Grid, - Typography, - Stack, - Button, - TextField, - Autocomplete, - Chip, - Divider, - DialogTitle, - DialogContent, - Checkbox, - DialogActions, - CircularProgress, - IconButton, - Switch, - OutlinedInput, - FormGroup, - FormControlLabel, - Avatar, - Box -} from '@mui/material'; - -import CloseIcon from '@mui/icons-material/Close'; -import { Empty } from 'antd'; -import { FaPhoneAlt } from 'react-icons/fa'; -import { calculateDrivingDistance, calculateTotalCharge } from '../../../utils/distance'; -import { GiDoorHandle } from 'react-icons/gi'; -import { FaLandmarkDome } from 'react-icons/fa6'; -import ClearIcon from '@mui/icons-material/Clear'; -import { useNavigate } from 'react-router'; -import { TbMapPinCode } from 'react-icons/tb'; -import { FaLocationDot } from 'react-icons/fa6'; -import axios from 'axios'; -import { useTheme } from '@mui/material/styles'; -import Geocode from 'react-geocode'; -import Loader from 'components/Loader'; -import MainCard from 'components/MainCard'; -import { FaUser } from 'react-icons/fa6'; -import { DatePicker } from '@mui/x-date-pickers/DatePicker'; -import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; -import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; -import Dialog from '@mui/material/Dialog'; -import dayjs from 'dayjs'; -import { enqueueSnackbar } from 'notistack'; -var utc = require('dayjs/plugin/utc'); -dayjs.extend(utc); -import { ArrowDownOutlined, ArrowUpOutlined, SearchOutlined } from '@ant-design/icons'; -import MyLocationIcon from '@mui/icons-material/MyLocation'; -import HighlightOffIcon from '@mui/icons-material/HighlightOff'; -import { OpenToast } from 'components/third-party/OpenToast'; -import TitleCard from 'components/nearle_components/TitleCard'; -import AccessTimeIcon from '@mui/icons-material/AccessTime'; -import { TimePicker } from '@mui/x-date-pickers'; -import ArrowOutwardIcon from '@mui/icons-material/ArrowOutward'; -import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward'; -import LocationOnOutlinedIcon from '@mui/icons-material/LocationOnOutlined'; -import { MapContainer, TileLayer, Marker, Polyline, useMap } from 'react-leaflet'; -import L from 'leaflet'; -import 'leaflet/dist/leaflet.css'; - -const pickupIcon = typeof window !== 'undefined' ? new L.Icon({ - iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-blue.png', - shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon.png', - iconSize: [25, 41], - iconAnchor: [12, 41], - popupAnchor: [1, -34], - shadowSize: [41, 41] -}) : null; - -const dropoffIcon = typeof window !== 'undefined' ? new L.Icon({ - iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png', - shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon.png', - iconSize: [25, 41], - iconAnchor: [12, 41], - popupAnchor: [1, -34], - shadowSize: [41, 41] -}) : null; - -const MapBoundsController = ({ startPoint, endPoint }) => { - const map = useMap(); - useEffect(() => { - const points = []; - const pLat = parseFloat(startPoint?.latitude); - const pLng = parseFloat(startPoint?.longitude); - const dLat = parseFloat(endPoint?.latitude); - const dLng = parseFloat(endPoint?.longitude); - - if (!isNaN(pLat) && !isNaN(pLng) && pLat !== 0 && pLng !== 0) { - points.push([pLat, pLng]); - } - if (!isNaN(dLat) && !isNaN(dLng) && dLat !== 0 && dLng !== 0) { - points.push([dLat, dLng]); - } - - if (points.length === 1) { - map.setView(points[0], 14); - } else if (points.length === 2) { - map.fitBounds(points, { padding: [50, 50] }); - } - }, [startPoint?.latitude, startPoint?.longitude, endPoint?.latitude, endPoint?.longitude, map]); - return null; -}; - -const OrderMap = ({ startPoint, endPoint, appLocaLat, appLocaLng }) => { - const defaultCenter = [ - parseFloat(appLocaLat) || 11.0168, - parseFloat(appLocaLng) || 76.9558 - ]; - - const hasPick = startPoint?.latitude && startPoint?.longitude && parseFloat(startPoint.latitude) !== 0; - const hasDrop = endPoint?.latitude && endPoint?.longitude && parseFloat(endPoint.latitude) !== 0; - - const pickCoords = hasPick ? [parseFloat(startPoint.latitude), parseFloat(startPoint.longitude)] : null; - const dropCoords = hasDrop ? [parseFloat(endPoint.latitude), parseFloat(endPoint.longitude)] : null; - - // ---- Animation state (mirrors Dispatch.js pattern) ---- - const [osrmRoute, setOsrmRoute] = useState(null); // full road path [[lat,lng],...] - const [animatedSegments, setAnimatedSegments] = useState([]); // drawn pair-by-pair - const [isAnimating, setIsAnimating] = useState(false); - const isAnimatingRef = useRef(false); - const timeoutsRef = useRef([]); - - // Fetch OSRM route whenever both points are available - useEffect(() => { - if (!hasPick || !hasDrop) { - setOsrmRoute(null); - setAnimatedSegments([]); - setIsAnimating(false); - return; - } - const url = `https://router.project-osrm.org/route/v1/driving/${pickCoords[1]},${pickCoords[0]};${dropCoords[1]},${dropCoords[0]}?overview=full&geometries=geojson`; - fetch(url) - .then((r) => r.json()) - .then((data) => { - const coords = data?.routes?.[0]?.geometry?.coordinates; - if (coords && coords.length >= 2) { - // OSRM returns [lng, lat], Leaflet needs [lat, lng] - setOsrmRoute(coords.map(([lng, lat]) => [lat, lng])); - } else { - // Fallback to straight line - setOsrmRoute([pickCoords, dropCoords]); - } - }) - .catch(() => { - setOsrmRoute([pickCoords, dropCoords]); - }); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [startPoint?.latitude, startPoint?.longitude, endPoint?.latitude, endPoint?.longitude]); - - // Reset animation when route changes - useEffect(() => { - setAnimatedSegments([]); - setIsAnimating(false); - isAnimatingRef.current = false; - timeoutsRef.current.forEach(clearTimeout); - timeoutsRef.current = []; - }, [osrmRoute]); - - const startAnimation = () => { - // Stop if already animating - if (isAnimating) { - setIsAnimating(false); - isAnimatingRef.current = false; - setAnimatedSegments([]); - timeoutsRef.current.forEach(clearTimeout); - timeoutsRef.current = []; - return; - } - - const path = osrmRoute || (hasPick && hasDrop ? [pickCoords, dropCoords] : null); - if (!path || path.length < 2) return; - - setIsAnimating(true); - isAnimatingRef.current = true; - setAnimatedSegments([]); - timeoutsRef.current.forEach(clearTimeout); - timeoutsRef.current = []; - - // Build segments same way as Dispatch.js: path[i] → path[i+1], each with a delay - const allSegs = []; - for (let i = 0; i < path.length - 1; i++) { - allSegs.push({ from: path[i], to: path[i + 1], delay: i * 18 }); - } - - allSegs.forEach((s, idx) => { - const t = setTimeout(() => { - if (!isAnimatingRef.current) return; - setAnimatedSegments((prev) => [...prev, s]); - if (idx === allSegs.length - 1) { - const finalT = setTimeout(() => { - setIsAnimating(false); - isAnimatingRef.current = false; - }, 800); - timeoutsRef.current.push(finalT); - } - }, s.delay); - timeoutsRef.current.push(t); - }); - }; - - // Cleanup on unmount - useEffect(() => () => { - timeoutsRef.current.forEach(clearTimeout); - isAnimatingRef.current = false; - }, []); - - const staticRoute = osrmRoute || (hasPick && hasDrop ? [pickCoords, dropCoords] : null); - - return ( -
- - - {hasPick && } - {hasDrop && } - - {/* Static solid polyline (shown when not animating) */} - {!isAnimating && staticRoute && staticRoute.length >= 2 && ( - - )} - - {/* Animated segments — drawn pair-by-pair, matching Dispatch.js pattern */} - {isAnimating && animatedSegments.map((s, i) => ( - - ))} - - - - - {/* Floating Animate Routes button — same style as Dispatch's sbt button */} - {hasPick && hasDrop && ( - - )} -
- ); -}; - - -function loadScript(src, position, id) { - if (!position) { - return; - } - - const script = document.createElement('script'); - script.setAttribute('async', ''); - script.setAttribute('id', id); - script.src = src; - position.appendChild(script); -} - -const Createorder1 = () => { - Geocode.setApiKey(process.env.REACT_APP_GOOGLE_MAPS_API_KEY); - // ================================================= || GoogleMaps (Drawer) || ================================================= - const loaded = React.useRef(false); - const navigate = useNavigate(); - const theme = useTheme(); - const locationRef = useRef(null); - const tenantRef = useRef(null); - const [inputValue1, setInputValue1] = React.useState(''); - const [inputValue2, setInputValue2] = React.useState(''); - const textFieldRef1 = useRef(null); - const textFieldRef1a = useRef(null); - const textFieldRef2 = useRef(null); - const [appId, setAppId] = useState(0); - const [open, setOpen] = useState(false); - const [startdate, setStartdate] = useState(dayjs().format('MM-DD-YYYY')); - const [starttime, setStatrttime] = useState(); - const [endtime, setEndtime] = useState(); - const [timeslotarr, setTimeslotarr] = useState([]); - const [otherinstructions, setOtherinstructions] = useState(''); - const [loading2, setLoading2] = useState(false); - const [loading, setLoading] = useState(false); - const [btnLoading, setBtnLoading] = useState(false); - const [alertmessage, setAlertmessage] = useState(''); - const [admintoken, setAdmintoken] = useState(); - const [tenant, setTenant] = useState({}); - const [selectedtime, setSelectedtime] = useState(''); - const [tenantlist, setTenantlist] = useState([]); - const [startPoint, setStartPoint] = useState({ latitude: 0, longitude: 0 }); - const [endPoint, setEndPoint] = useState({ latitude: 0, longitude: 0 }); - const [showDistance, setShowDistance] = useState(false); - const [distance, setDistance] = useState(0); - const [basePrice, setBasePrice] = useState(0); - const [pricePerKm, setPricePerKm] = useState(0); - const [minKm, setMinKm] = useState(0); - const [totalCharge, setTotalCharge] = useState(0); - const [subCat, setSubCat] = useState([]); - const [subCatName, setSubCatName] = useState('Select '); - const [subCatId, setSubCatId] = useState(0); - const [weight, setWeight] = useState(''); - const [tenantid, setTenantid] = useState(0); - const [locationid, setLocationid] = useState(0); - const [selectedCatChip, setSelectedCatChip] = useState(null); - const [isCustomerOpen, setIsCustomerOpen] = useState(false); - const [searchCustList, setSearchCustList] = useState(''); - const [customerlist, setCustomerlist] = useState([]); - const [pickCust, setPickCust] = useState(null); - const [dropCust, setDropCust] = useState(null); - const [pickordrop, setpickordrop] = useState(0); // 1 ->pick 2 -> drop - const [addId1, setAddId1] = useState(0); - const [addId2, setAddId2] = useState(0); - const [tenantLocations, setTenantlocations] = useState([]); - const [appLocaLat, setAppLocaLat] = useState(); - const [appLocaLng, setAppLocaLng] = useState(); - const [appLocaRadius, setAppLocaRadius] = useState(); - const [locations, setLocations] = useState('Select Location'); - const userid = localStorage.getItem('userid'); - const [isNumChange1, setIsNumChange1] = useState(0); - const [isNumChange2, setIsNumChange2] = useState(0); - const [showCheck1, setShowCheck1] = useState(0); - const [showCheck2, setShowCheck2] = useState(0); - const [pickNum, setPickNum] = useState(); - const [dropNum, setdropNum] = useState(); - const [numErr1, setNumErr1] = useState(false); - const [numErr2, setNumErr2] = useState(false); - const [isSms, setIsSms] = useState(0); - const [collectionamt, setCollectionamt] = useState(0); - const [quantity, setQuantity] = useState(1); - const [tenantValue, setTenantValue] = useState(null); - const [locationValue, setLocationValue] = useState(null); - const [pickupdate, setPickupdate] = useState(dayjs().add(5, 'minute')); - const [pickDialog, setPickDialog] = useState(false); - const [deliverydate, setDeliverydate] = useState(dayjs().add(30, 'minute')); - const [deliveryDialog, setDeliveryDialog] = useState(false); - const [pickupSearchOpen, setPickupSearchOpen] = useState(false); - const [dropSearchOpen, setDropSearchOpen] = useState(false); - - const pickerRef = useRef(null); - const deliveryRef = useRef(null); - - const handlePickupChange = (newValue) => { - if (!newValue) return; - setPickupdate(newValue); - if (deliverydate.isBefore(newValue)) { - setDeliverydate(newValue.add(30, 'minute')); - } - }; - - if (typeof window !== 'undefined' && !loaded.current) { - if (!document.querySelector('#google-maps')) { - loadScript( - `https://maps.googleapis.com/maps/api/js?key=${process.env.REACT_APP_GOOGLE_MAPS_API_KEY}&libraries=places&location=10.3656,77.9690&radius=50000&components=country:IN&strictbounds=true`, - document.querySelector('head'), - 'google-maps' - ); - } - loaded.current = true; - } - - // ==============================|| fetchAppLocations ||============================== // - const fetchAppLocations = async () => { - try { - const locationRes = await axios.get(`${process.env.REACT_APP_URL}/partners/getlocations/?userid=${userid}`); - console.log('fetchAppLocations', locationRes.data.details); - setLocations(locationRes.data.details); - } catch (err) { - console.log('locationRes', err); - } - }; - useEffect(() => { - fetchAppLocations(); - }, []); - - // ===================================================== || fetchtenantinfolist || ===================================================== - - const fetchtenantinfolist = async () => { - setLoading(true); - await axios - .get(`${process.env.REACT_APP_URL}/tenants/gettenants/?applocationid=${appId}&status=active`) - - .then((res) => { - console.log(res); - if (res.data.status) { - let arr = []; - res.data.details.map((val) => { - arr.push({ - ...val, - label: `${val.tenantname}` - }); - }); - setTenantlist(arr); - } - setLoading(false); - }) - .catch((err) => { - console.log(err); - setLoading(false); - }); - }; - useEffect(() => { - appId && fetchtenantinfolist(); - }, [appId]); - - const handleChipClick = (chipLabel) => { - setSelectedCatChip(chipLabel); - }; - - const chipStyle = (chipLabel) => ({ - cursor: 'pointer', - backgroundColor: selectedCatChip === chipLabel ? theme.palette.primary.main : 'default', - color: selectedCatChip === chipLabel ? '#fff' : '', - '&:hover': { - backgroundColor: selectedCatChip === chipLabel ? theme.palette.primary.main : theme.palette.primary.light, - color: '#fff' - } - }); - - const fetchTenantPricing = async (id) => { - try { - const pricingResponse = await axios.get(`${process.env.REACT_APP_URL}/tenants/gettenantpricing/?tenantid=${id}`); - console.log('pricingResponse', pricingResponse.data.details); - setBasePrice(pricingResponse.data.details.baseprice); - setPricePerKm(pricingResponse.data.details.priceperkm); - setMinKm(pricingResponse.data.details.minkm); - } catch (error) { - console.log('fetchTenantPricing error', error); - } - }; - - useEffect(() => { - console.log('startPoint', startPoint); - console.log('endPoint', endPoint); - if (startPoint.latitude != 0 && startPoint.longitude != 0 && endPoint.latitude != 0 && endPoint.longitude != 0) { - // getDistance(); - calculateDistance(startPoint, endPoint); - } - }, [startPoint, endPoint]); - - const calculateDistance = async (pickup, drop) => { - try { - const roundedDistance = await calculateDrivingDistance(pickup, drop); - console.log('calculated distance in km:', roundedDistance); - setDistance(roundedDistance); - - const total = calculateTotalCharge(roundedDistance, basePrice, pricePerKm, minKm); - console.log('total charge:', total); - setTotalCharge(total); - - setShowDistance(true); - if (roundedDistance > appLocaRadius) { - setShowDistance(true); - setOpen(true); - } - } catch (error) { - console.error('Error calculating distance:', error); - } - }; - - useEffect(() => { - if (tenantid) { - clientdetails(); - } - }, [searchCustList?.length > 3, searchCustList == '', tenantid, pickupSearchOpen, dropSearchOpen]); - - useEffect(() => { - if (timeslotarr[0]) { - let arr = []; - timeslotarr.map((val) => { - if (dayjs().diff(dayjs(`${dayjs(startdate).format('MM-DD-YYYY')} ${dayjs(val).format('HH:mm:ss')}`), 'm') <= 0) { - arr.push(val); - } - }); - } - }, [timeslotarr]); - - // ==================================================== || fetchtenantinfo || ==================================================== - const fetchtenantinfo = async () => { - setLoading(true); - console.log('tenantid', tenantid); - - await axios - .get(`${process.env.REACT_APP_URL}/tenants/gettenantinfo/?tenantid=${tenantid}`) - .then((res) => { - console.log('fetchtenantinfo', res); - if (res.data.status) { - setTenant(res.data.details); - - fetchAppAdminTokens(); - setSubCatName(res.data.details.subcategoryname); - setSubCatId(res.data.details.subcategoryid); - } - setLoading(false); - }) - .catch((err) => { - console.log(err); - setLoading(false); - }); - }; - useEffect(() => { - if (tenantid) { - fetchtenantinfo(); - } - }, [tenantid]); - // ==================================================== || getsubcategories || ==================================================== - const getsubcategories = async () => { - await axios - .get(`${process.env.REACT_APP_URL}/utils/getsubcategories/?moduleid=6`) - .then((res) => { - console.log('subcateRes', res.data.details); - if (res.data.status) { - setSubCat(res.data.details); - } - }) - .catch((err) => { - console.log(err); - }); - }; - useEffect(() => { - getsubcategories(); - }, []); - - // ==================================================== || fetchTiming || ==================================================== - const fetchTiming = async () => { - setLoading(true); - await axios - .get(`${process.env.REACT_APP_URL}/utils/getapplocations/?applocationid=${appId}`) - .then((res) => { - console.log('fetchTiming', res); - const { opentime, closetime, latitude, longitude, radius } = res.data.details[0]; - if (res.data.status) { - setAppLocaLat(latitude); - setAppLocaLng(longitude); - setAppLocaRadius(radius); - console.log('radius', radius); - setStatrttime(`${dayjs().format('MM-DD-YYYY')} ${opentime}`); - setEndtime(`${dayjs().format('MM-DD-YYYY')} ${closetime}`); - console.log('starttime', `${dayjs().format('MM-DD-YYYY')} ${opentime}`); - console.log('endtime', `${dayjs().format('MM-DD-YYYY')} ${closetime} `); - let arr = []; - for ( - let i = `${dayjs().format('MM-DD-YYYY')} ${opentime}`, j = 0; - dayjs(`${dayjs().format('MM-DD-YYYY')} ${closetime} `).diff(i, 'm') >= 0; - j++, i = dayjs(i).add(30, 'm') - ) { - arr.push(i); - } - console.log('setTimeslotarr', arr); - setTimeslotarr(arr); - } - setLoading(false); - }) - .catch((err) => { - console.log(err); - setLoading(false); - }); - }; - useEffect(() => { - if (appId) { - fetchTiming(); - } - }, [appId]); - - // =============================================== || fetchAppAdminTokens (via appId) || =============================================== - const fetchAppAdminTokens = async () => { - setLoading(true); - await axios - .get(`${process.env.REACT_APP_URL}/utils/getapplocationconfig/?applocationid=${appId}`) - .then((res) => { - const userfcmtokemArray = res.data.details.applocationadmins.map((admin) => admin.userfcmtokem); // fcm => firebase cloud messaging - console.log('fetchAppAdminTokens', res); - console.log('userfcmtokemArray', userfcmtokemArray); - if (res.data.status) { - setAdmintoken(userfcmtokemArray); - } - setLoading(false); - }) - .catch((err) => { - console.log(err); - setLoading(false); - }); - }; - - useEffect(() => { - if (starttime && endtime) { - fetchAppAdminTokens(); - } - }, [starttime, endtime]); - - // =============================================== || opentoast || =============================================== - - const opentoast = (message, variant, time) => { - enqueueSnackbar(message, { - variant: variant, - anchorOrigin: { vertical: 'top', horizontal: 'right' }, - autoHideDuration: time ? time : 1500 - }); - console.log(alertmessage); - }; - - const createsubmitobj2 = async () => { - let arr = {}; - arr = { - orders: { - applocationid: tenant.applolcationid, - cancellled: '', - categoryid: +tenant.categoryid, - configid: 9, - customerid: isNumChange1 == 0 ? +pickCust.customerid || 0 : 0, - deliveryaddress: dropCust.address || '', - deliverycharge: +totalCharge.toFixed(2) || 0, - deliverycity: dropCust.city || '', - deliverycontactno: dropCust.contactno || '', - deliverycustomer: dropCust.firstname || '', - deliveryid: isNumChange2 == 0 ? +dropCust.customerid || 0 : 0, - deliverylandmark: dropCust.landmark || '', - deliverylat: dropCust.latitude.toString(), - deliverylocation: dropCust.suburb || '', - deliverylocationid: dropCust.deliverylocationid || 0, - deliverylong: dropCust.longitude.toString(), - deliverytime: `${dayjs(startdate).format('YYYY-MM-DD')} ${dayjs(selectedtime.$d).format('HH:mm:ss')}`, - deliverytype: 'B', - delivered: '', - itemcount: 1, - kms: distance.toString() || 0, - locationid: +locationid, - moduleid: +tenant.moduleid, - orderamount: +totalCharge.toFixed(2) || 0, - ordercharges: 0.0, - orderdate: dayjs().format('YYYY-MM-DD HH:mm:ss'), - ordernotes: otherinstructions, - orderstatus: 'created', - ordervalue: +totalCharge.toFixed(2) || 0, - partnerid: tenant.partnerid, - partneruserid: +userid, - paymentstatus: 1, - paymenttype: 42, - pickupaddress: pickCust.address || '', - pickupcity: pickCust.city || '', - pickupcontactno: pickCust.contactno || '', - pickupcustomer: pickCust.firstname || '', - pickuplandmark: pickCust.landmark || '', - pickuplat: pickCust.latitude.toString() || '', - pickuplocation: pickCust.suburb || '', - pickuplocationid: pickCust.deliverylocationid || 0, - pickuplong: pickCust.longitude.toString() || '', - smsdelivery: isSms, - subcategoryid: +subCatId, - tenantid: tenant.tenantid, - collectionamt: +collectionamt, - quantity: +quantity, - weight - }, - pickup: { - address: pickCust.address || '', - applocationid: tenant.applolcationid, - city: pickCust.city || '', - configid: 1, - contactno: pickCust.contactno || '', - customertoken: '', - customerid: isNumChange1 == 0 ? pickCust.customerid || 0 : 0, - devicetype: '', - deviceid: '', - dialcode: '+91', - doorno: pickCust.doorno || '', - email: pickCust.email || '', - firstname: pickCust.firstname || '', - landmark: pickCust.landmark || '', - latitude: pickCust.latitude.toString() || '', - longitude: pickCust.longitude.toString() || '', - postcode: pickCust.postcode || '', - primaryaddress: 1, - locationid: pickCust.deliverylocationid || 0, - profileimage: '', - state: pickCust.state || '', - suburb: pickCust.suburb || '', - tenantid: tenant.tenantid - }, - drop: { - address: dropCust.address || '', - applocationid: tenant.applolcationid, - city: dropCust.city || '', - configid: 1, - contactno: dropCust.contactno || '', - customertoken: '', - customerid: isNumChange2 == 0 ? dropCust.customerid || 0 : 0, - devicetype: '', - deviceid: '', - locationid: dropCust.deliverylocationid || 0, - dialcode: '+91', - doorno: dropCust.doorno || '', - email: dropCust.email || '', - firstname: dropCust.firstname || '', - landmark: dropCust.landmark || '', - latitude: dropCust.latitude.toString(), - longitude: dropCust.longitude.toString(), - postcode: dropCust.postcode || '', - primaryaddress: 1, - profileimage: '', - state: dropCust.state || '', - suburb: dropCust.suburb || '', - tenantid: tenant.tenantid - } - }; - console.log('createsubmitobj2', arr); - if (!pickCust.firstname) { - opentoast('Enter Pickup Contact Name ', 'warning', 2000); - } else if (!pickCust.contactno) { - opentoast('Enter Pickup Contact Number ', 'warning', 2000); - } else if (pickCust.contactno.length != 10) { - opentoast('Check Pickup Contact Number ', 'error', 2000); - } else if (!pickCust.suburb) { - opentoast('Enter Pickup Location ', 'warning', 2000); - } - // else if (!pickCust.city) { - // opentoast('Enter Pickup City ', 'warning', 2000); - // } - else if (!pickCust.postcode) { - opentoast('Enter Pickup Postcode ', 'warning', 2000); - } else if (!pickCust.landmark) { - opentoast('Enter Pickup Landmark ', 'warning', 2000); - } else if (!dropCust.firstname) { - opentoast('Enter Drop Contact Name ', 'warning', 2000); - } else if (!dropCust.contactno) { - opentoast('Enter Drop Contact Number', 'warning', 2000); - } else if (dropCust.contactno.length !== 10) { - opentoast('Check Drop Contact Number ', 'error', 2000); - } else if (!dropCust.suburb) { - opentoast('Enter Drop Suburb ', 'warning', 2000); - } - // else if (!dropCust.city) { - // opentoast('Enter Drop City ', 'warning', 2000); - // } - else if (!dropCust.postcode) { - opentoast('Enter Drop postcode ', 'warning', 2000); - } else if (!dropCust.landmark) { - opentoast('Enter Drop Landmark ', 'warning', 2000); - } else if (!selectedtime) { - opentoast('Choose deliverytime ', 'warning', 2000); - } else if (!setSubCatId) { - opentoast('Choose SubCategory ', 'warning', 2000); - } else { - try { - const createRes = await axios.post(`${process.env.REACT_APP_URL2}/orders/createorder`, arr); - if (createRes.data.status) { - console.log('createRes', createRes); - enqueueSnackbar('Order Created Successfully', { - variant: 'success', - anchorOrigin: { vertical: 'top', horizontal: 'right' }, - autoHideDuration: 1000 - }); - if (admintoken) { - // notifyadmin(admintoken); - sendnotifications(); - } - navigate('/nearle/orders'); - } else { - opentoast('Error in creating orders', 'warning'); - } - setLoading(false); - } catch (error) { - opentoast(error.message, 'warning'); - console.log('createResErr', error); - } - } - }; - - // ========================================================= || clientdetails || ========================================================= - const clientdetails = async () => { - setLoading2(true); - try { - let url = - searchCustList == '' - ? `${process.env.REACT_APP_URL}/customers/gettenantcustomers/?tenantid=${tenantid}&pageno=1&pagesize=30` - : `${process.env.REACT_APP_URL}/customers/search/?tenantid=${tenantid}&keyword=${searchCustList}`; - await axios - .get(url) - .then((res) => { - if (res.data.status) { - console.log('clientdetails', res.data.details); - setCustomerlist(res.data.details); - } - setLoading2(false); - }) - .catch((err) => { - console.log(err); - setLoading2(false); - opentoast('server error', 'warning'); - }); - } catch (err) { - console.log(err); - setLoading2(false); - } - }; - - // ================================================== || sendnotifications || ================================================== - const sendnotifications = async () => { - setLoading(true); - await axios - .post(`${process.env.REACT_APP_URL}/utils/sendnotifications`, { - priority: 'high', - registration_ids: admintoken, - data: { - accessid: process.env.REACT_APP_RIDER_ACCESS_ID - }, - notification: { - title: 'Nearle Merchant', - body: 'An Order has been placed successfully,kindly process the same', - sound: 'ring' - } - }) - .then((res) => { - console.log(res); - if (res.data.message == 'Success') { - enqueueSnackbar('Notification sent Successfully', { - variant: 'success', - anchorOrigin: { vertical: 'top', horizontal: 'right' }, - autoHideDuration: 1000 - }); - } - setLoading(false); - }) - .catch((err) => { - console.log(err); - enqueueSnackbar(err.message, { - variant: 'error', - anchorOrigin: { vertical: 'top', horizontal: 'right' }, - autoHideDuration: 1000 - }); - setLoading(false); - }); - }; - // ============================================= || Google Maps Autocomplete(pick) || ============================================= - useEffect(() => { - // Initialize Google Maps Autocomplete - if (inputValue1) { - const autocompleteInput = document.getElementById('addressAuto1'); - const autocomplete = new window.google.maps.places.Autocomplete(autocompleteInput, { - // types: ['(cities)'], // You can adjust the types parameter based on your requirements - strictBounds: true, - bounds: new window.google.maps.Circle({ - // center: new window.google.maps.LatLng(11.0050707, 76.9509083), - // radius: 100000 - center: new window.google.maps.LatLng(appLocaLat, appLocaLng), - radius: appLocaRadius * 1000 - }).getBounds() - }); - - // Event listener for autocomplete place changed - autocomplete.addListener('place_changed', () => { - const place = autocomplete.getPlace(); - setInputValue1(`${place.name}, ${place.formatted_address}`); - console.log('new place', place); // Do something with the selected place - console.log(' pick (new place) lat lng', { lat: place.geometry.location.lat(), lng: place.geometry.location.lng() }); // Do something with the selected place - // to trigger getDistance - setStartPoint({ latitude: place.geometry.location.lat(), longitude: place.geometry.location.lng() }); - setPickCust({ ...pickCust, address: `${place.name} ${place.formatted_address}` }); - const address = { - address: `${place.name} ${place.formatted_address}`, - street_number: '', - route: '', - locality: '', - sublocality_level_1: '', - administrative_area_level_3: '', - administrative_area_level_1: '', - country: '', - postal_code: '' - }; - place.address_components.forEach((component) => { - component.types.forEach((type) => { - switch (type) { - case 'street_number': - address.street_number = component.long_name; - break; - case 'route': - address.route = component.long_name; - break; - case 'locality': - address.locality = component.long_name; - break; - case 'sublocality_level_1': - address.sublocality_level_1 = component.long_name; - break; - case 'administrative_area_level_3': - address.administrative_area_level_3 = component.long_name; - break; - case 'administrative_area_level_1': - address.administrative_area_level_1 = component.long_name; - break; - case 'country': - address.country = component.long_name; - break; - case 'postal_code': - address.postal_code = component.long_name; - break; - // Add more cases as needed for other types - } - }); - }); - - // Use address object as per your requirements - setPickCust({ - ...pickCust, - address: address.address, - doorno: `${address.street_number} ${address.route}`, - suburb: address.sublocality_level_1, - city: address.locality, - postcode: address.postal_code, - latitude: place.geometry.location.lat(), - longitude: place.geometry.location.lng() - }); - console.log('Pick Address:', address); - }); - } - }, [inputValue1]); - // ============================================= || Google Maps Autocomplete(Drop) || ============================================= - - useEffect(() => { - if (inputValue2) { - // Initialize Google Maps Autocomplete - const autocompleteInput = document.getElementById('addressAuto2'); - const autocomplete = new window.google.maps.places.Autocomplete(autocompleteInput, { - // types: ['(cities)'], // You can adjust the types parameter based on your requirements - strictBounds: true, - bounds: new window.google.maps.Circle({ - // center: new window.google.maps.LatLng(11.0050707, 76.9509083), - center: new window.google.maps.LatLng(appLocaLat, appLocaLng), - radius: appLocaRadius * 1000 //km to m - // radius: 100000 //km to m - }).getBounds() - }); - let arr = []; - // Event listener for autocomplete place changed - autocomplete.addListener('place_changed', () => { - const place = autocomplete.getPlace(); - setInputValue2(`${place.name}, ${place.formatted_address}`); - console.log('new place', place); // Do something with the selected place - console.log('drop (new place) lat lng', { lat: place.geometry.location.lat(), lng: place.geometry.location.lng() }); // Do something with the selected place - setEndPoint({ latitude: place.geometry.location.lat(), longitude: place.geometry.location.lng() }); - - setDropCust({ ...dropCust, address: `${place.name} ${place.formatted_address}` }); - const address = { - address: `${place.name} ${place.formatted_address}`, - street_number: '', - route: '', - locality: '', - sublocality_level_1: '', - administrative_area_level_3: '', - administrative_area_level_1: '', - country: '', - postal_code: '' - }; - place.address_components.forEach((component) => { - component.types.forEach((type) => { - switch (type) { - case 'street_number': - address.street_number = component.long_name; - break; - case 'route': - address.route = component.long_name; - break; - case 'locality': - address.locality = component.long_name; - break; - case 'sublocality_level_1': - address.sublocality_level_1 = component.long_name; - break; - case 'administrative_area_level_3': - address.administrative_area_level_3 = component.long_name; - break; - case 'administrative_area_level_1': - address.administrative_area_level_1 = component.long_name; - break; - case 'country': - address.country = component.long_name; - break; - case 'postal_code': - address.postal_code = component.long_name; - break; - // Add more cases as needed for other types - } - }); - }); - - // Use address object as per your requirements - setDropCust({ - ...dropCust, - address: address.address, - doorno: `${address.street_number} ${address.route}`, - suburb: address.sublocality_level_1, - city: address.locality, - postcode: address.postal_code, - latitude: place.geometry.location.lat(), - longitude: place.geometry.location.lng() - }); - console.log('Drop Address:', address); - }); - } - }, [inputValue2]); - - // ============================================= || gettenantlocations (branches) || ============================================= - const gettenantlocations = async (id) => { - try { - const res = await axios.get(`${process.env.REACT_APP_URL}/tenants/gettenantlocations/?tenantid=${id}`); - console.log('gettenantlocations', res.data.details); - if (res.data.details.length == 1) { - setTenantlocations(res.data.details); - setLocationid(res.data.details[0].locationid); - setLocationValue(res.data.details[0].locationid); - } else { - setTenantlocations(res.data.details); - } - } catch (err) { - console.log('gettenantlocations', err); - } - }; - - return ( - <> - {loading && } - {loading2 && } - - - - - - 1 - - Select Location and Client - - - - {/* ===================================================== || Choose App location || ===================================================== */} - - `${option.locationname}`} - onChange={(event, value, reason) => { - if (reason === 'clear') { - setAppId(0); - setTenantid(0); - setTenantValue(null); - setTenantlist([]); - setLocationid(0); - setLocationValue(null); - setTenantlocations([]); - setPickCust(null); - setDropCust(null); - } else { - setAppId(value.applocationid); - setPickCust(null); - setDropCust(null); - setTenantid(0); - setTenantValue(null); - setTenantlist([]); - setLocationid(0); - setLocationValue(null); - setTenantlocations([]); - } - }} - renderInput={(params) => } - /> - - {/* ===================================================== || Choose client || ===================================================== */} - - { - if (!appId) { - event.preventDefault(); - OpenToast('Please select a your location first!', 'warning', 3000); - setTimeout(() => { - locationRef.current?.focus(); - }, 0); - } - }} - onChange={(e, val, reason) => { - if (reason == 'clear') { - setTenantid(0); - setTenantValue(null); - setLocationid(0); - setLocationValue(null); - setTenantlocations([]); - setPickCust(null); - setDropCust(null); - } else { - setTenantid(val?.tenantid || 0); - setTenantValue(val); - setLocationid(0); - setLocationValue(null); - fetchTenantPricing(val.tenantid); - gettenantlocations(val.tenantid); - setDropCust(null); - } - }} - renderInput={(params) => } - /> - - {/* ===================================================== ||Business Location || ===================================================== */} - - {tenantLocations.length == 1 ? ( - - - - ) - }} - /> - ) : ( - `${option.locationname} (${option.suburb})` || ''} - onOpen={(event) => { - if (!appId && !tenantid) { - event.preventDefault(); - OpenToast('Please select Location and Tenant first!', 'warning', 3000); - setTimeout(() => { - locationRef.current?.focus(); - }, 0); - } else if (!tenantid) { - event.preventDefault(); - OpenToast('Please select a your Tenant first!', 'warning', 3000); - setTimeout(() => { - tenantRef.current?.focus(); - }, 0); - } - }} - onChange={(event, value, reason) => { - if (reason === 'clear') { - setLocationid(0); - setLocationValue(null); - setPickCust(null); - } else { - setLocationid(value.locationid || 0); - setLocationValue(value); - } - }} - renderInput={(params) => } - /> - )} - - - - - - {/* ================================================= || Pickup & Drop || ================================================= */} - - - - - - 2 - - Pickup & Drop Details - - - - - - - - - {/* ================================================= || Pickup || ================================================= */} - - - - - - - - Pickup Details - - - {pickCust?.firstname && ( - - ✓ Selected - - )} - - - - - {/* ============ Inline Pickup Search Panel ============ */} -
-
- {/* Search Input */} - setSearchCustList(e.target.value)} - sx={{ bgcolor: 'white', borderRadius: '8px' }} - startAdornment={ - - - - } - endAdornment={ - searchCustList ? ( - setSearchCustList('')}> - - - ) : null - } - /> - - {/* Customer List */} -
- {customerlist?.length === 0 ? ( - - - - ) : ( - customerlist?.map((address, index) => ( - - )) - )} -
-
-
- - - - - {/* ====================================== ||Contact Name (pick) || ====================================== */} - - - - - ) - }} - variant="outlined" - label="Contact Name" - value={pickCust?.firstname || ''} - onChange={(e) => { - setPickCust({ ...pickCust, firstname: e.target.value }); - }} - /> - - {/* ====================================== ||Contact Number(pick) || ====================================== */} - - - - - ) - }} - variant="outlined" - label="Contact Number" - value={pickCust?.contactno || ''} - onChange={(e) => { - if (e.target.value.length <= 10) { - setPickCust({ ...pickCust, contactno: e.target.value }); - } - if (pickNum == e.target.value) { - setShowCheck1(0); - } else { - setShowCheck1(1); - } - if (e.target.value.length < 10) { - setNumErr1(true); - } else { - setNumErr1(false); - } - }} - /> - - {/* ====================================== || Address(pick) || ====================================== */} - - - {addId1 == 0 ? ( -
- setInputValue1(e.target.value)} - InputProps={{ - endAdornment: ( - { - setInputValue1(''); - setPickCust({ - ...pickCust, - doorno: '', - suburb: '', - city: '', - postcode: '', - landmark: '' - }); - setShowDistance(false); - setStartPoint({ latitude: 0, longitude: 0 }); - }} - size="small" - > - - - ) - }} - /> -
- ) : ( - { - setAddId1(0); - setPickCust({ - ...pickCust, - doorno: '', - suburb: '', - city: '', - postcode: '', - landmark: '' - }); - setShowDistance(false); - setStartPoint({ latitude: 0, longitude: 0 }); - }} - > - - - ) - }} - value={pickCust?.address || ''} - onChange={(e) => { - setPickCust({ ...pickCust, address: e.target.value }); - if (e.target.value == '') { - setAddId1(0); - setShowDistance(false); - setStartPoint({ latitude: 0, longitude: 0 }); - } - }} - /> - )} - - - {/* ====================================== ||Door No (pick) || ====================================== */} - - - - - ) - }} - variant="outlined" - label="Door No / Street" - value={pickCust?.doorno || ''} - onChange={(e) => { - setPickCust({ ...pickCust, doorno: e.target.value }); - }} - /> - - {/* ====================================== || Suburb (pick) || ====================================== */} - - - - - ) - }} - variant="outlined" - label="Location" - value={pickCust?.suburb || ''} - onChange={(e) => { - setPickCust({ ...pickCust, suburb: e.target.value }); - }} - /> - - - {/* ====================================== || postcode (pick) || ====================================== */} - - - - - ) - }} - variant="outlined" - label="Postcode" - value={pickCust?.postcode || ''} - onChange={(e) => { - setPickCust({ ...pickCust, postcode: e.target.value }); - }} - /> - - {/* ====================================== || Landmark (pick) || ====================================== */} - - - - - ) - }} - variant="outlined" - label="Landmark" - value={pickCust?.landmark || ''} - onChange={(e) => { - setPickCust({ ...pickCust, landmark: e.target.value }); - }} - /> - - {/* ====================================== ||Checkbox save for later (pick) || ====================================== */} - {showCheck1 == 1 && ( - - - { - setIsNumChange1(e.target.checked ? 1 : 0); - }} - /> - } - label="Save For Later" - /> - - - )} - - - - - - - {/* ================================================= || Drop || ================================================= */} - - - - - - - - Drop Details - - - {dropCust?.firstname && ( - - ✓ Selected - - )} - - - - - {/* ============ Inline Drop Search Panel ============ */} -
-
- {/* Search Input */} - setSearchCustList(e.target.value)} - sx={{ bgcolor: 'white', borderRadius: '8px' }} - startAdornment={ - - - - } - endAdornment={ - searchCustList ? ( - setSearchCustList('')}> - - - ) : null - } - /> - - {/* Customer List */} -
- {customerlist?.length === 0 ? ( - - - - ) : ( - customerlist?.map((address, index) => ( - - )) - )} -
-
-
- - - - - {/* ====================================== ||Contact Name (drop) || ====================================== */} - - - - - ) - }} - value={dropCust?.firstname || ''} - onChange={(e) => { - setDropCust({ ...dropCust, firstname: e.target.value }); - }} - /> - - {/* ====================================== ||Contact Number (drop) || ====================================== */} - - - - - ) - }} - value={dropCust?.contactno || ''} - onChange={(e) => { - if (e.target.value.length <= 10) { - setDropCust({ ...dropCust, contactno: e.target.value }); - } - if (dropNum == e.target.value) { - setShowCheck2(0); - } else { - setShowCheck2(1); - } - if (e.target.value.length < 10) { - setNumErr2(true); - } else { - setNumErr2(false); - } - }} - sx={{ color: numErr2 ? 'red' : 'inherit' }} - /> - - - {/* ====================================== || Address (drop) || ====================================== */} - - - {addId2 == 0 ? ( -
- setInputValue2(e.target.value)} - InputProps={{ - endAdornment: ( - { - setInputValue2(''); - setDropCust({ - ...dropCust, - doorno: '', - suburb: '', - city: '', - postcode: '', - landmark: '' - }); - setShowDistance(false); - setEndPoint({ latitude: 0, longitude: 0 }); - }} - size="small" - > - - - ) - }} - /> -
- ) : ( - { - setAddId2(0); - setDropCust({ - ...dropCust, - // firstname: '', - // contactno: '', - doorno: '', - suburb: '', - city: '', - postcode: '', - landmark: '' - }); - setShowDistance(false); - setEndPoint({ latitude: 0, longitude: 0 }); - }} - > - - - ) - }} - value={dropCust?.address || ''} - onChange={(e) => { - setPickCust({ ...dropCust, address: e.target.value }); - if (e.target.value == '') { - setAddId2(0); - setShowDistance(false); - setEndPoint({ latitude: 0, longitude: 0 }); - } - }} - /> - )} - - - - {/* ====================================== ||Door No (drop) || ====================================== */} - - - - - ) - }} - value={dropCust?.doorno || ''} - onChange={(e) => { - setDropCust({ ...dropCust, doorno: e.target.value }); - }} - /> - - {/* ====================================== ||Suburb (drop) || ====================================== */} - - - - - ) - }} - value={dropCust?.suburb || ''} - onChange={(e) => { - setDropCust({ ...dropCust, suburb: e.target.value }); - }} - /> - - - {/* ====================================== ||Postcode (drop) || ====================================== */} - - - - - ) - }} - value={dropCust?.postcode || ''} - onChange={(e) => { - setDropCust({ ...dropCust, postcode: e.target.value }); - }} - /> - - {/* ====================================== ||Landmark (drop) || ====================================== */} - - - - - ) - }} - value={dropCust?.landmark || ''} - onChange={(e) => { - setDropCust({ ...dropCust, landmark: e.target.value }); - }} - /> - - {/* ====================================== ||Checkbox save for later (drop) || ====================================== */} - {showCheck2 == 1 && ( - - - { - setIsNumChange2(e.target.checked ? 1 : 0); - }} - /> - } - label="Save For Later" - /> - - - )} - - - - - - - - - {/* ================================================= || Live Map Preview || ================================================= */} - - - - Live Route Preview - -
- -
- - - - - {/* ================================================= || Category || ================================================= */} - - - - - 3 - - Package Details - - - - - - `${option.subcategoryname}` || ''} - fullWidth - renderInput={(params) => } - onChange={(event, value, reason) => { - if (value) { - console.log(value); - setSubCatName(value.subcategoryname || ''); - setSubCatId(value.subcategoryid || 0); - } else if (reason) { - setSubCatName(null); - setSubCatId(null); - } - }} - /> - - - - - { - setCollectionamt(e.target.value); - }} - inputProps={{ min: 0 }} - /> - - - - - { - setQuantity(e.target.value); - }} - inputProps={{ min: 1 }} - /> - - - - - - - - - 4 - - Schedule & Delivery Options - - - - {/* ================================================= || Time || ================================================= */} - - - - - - {/* - - - - - Schedule - */} - Pickup Slots - Date - - - { - let dateres11 = dayjs().diff(dayjs(`${dayjs(e).format('YYYY-MM-DD')}`), 'd'); - console.log('dateres11'); - console.log(dateres11); - setSelectedtime(''); - if (dateres11 <= 0) { - console.log('startdate', e); - setStartdate(e); - - let arr = []; - timeslotarr.map((val) => { - if ( - dayjs().diff(dayjs(`${dayjs(e).format('MM-DD-YYYY')} ${dayjs(val).format('HH:mm:ss')}`), 'm') <= 0 - ) { - arr.push(val); - } - }); - } else { - setAlertmessage('choose Upcoming Date'); - opentoast('choose Upcoming Date', 'warning'); - setStartdate(NaN); - } - }} - value={dayjs(startdate)} - sx={{ width: '100%', mt: 2 }} - disablePast - /> - - - Time - - - - - {/* ================= PICKUP ================= */} - setPickDialog(true)} - > - setPickDialog(false)} - onAccept={() => setPickDialog(false)} // ✅ CLOSE HERE - value={pickupdate} - onChange={handlePickupChange} - disablePast - minutesStep={5} - slotProps={{ - textField: { - sx: { - position: 'absolute', - inset: 0, - opacity: 0 - } - } - }} - /> - - - - - - - - Pickup Time - - - - - {pickupdate.format('hh:mm A')} - - - - {/* ================= DELIVERY ================= */} - setDeliveryDialog(true)} - > - setDeliveryDialog(false)} - onAccept={() => setDeliveryDialog(false)} // ✅ CLOSE HERE - value={deliverydate} - onChange={(newValue) => { - if (!newValue) return; - // Prevent delivery before pickup - if (newValue.isBefore(pickupdate)) { - setDeliverydate(pickupdate.add(30, 'minute')); - } else { - setDeliverydate(newValue); - } - setDeliveryDialog(false); - }} - minTime={pickupdate} - disablePast - minutesStep={5} - slotProps={{ - textField: { - sx: { - position: 'absolute', - inset: 0, - opacity: 0 - } - } - }} - /> - - - - - - - - Delivery Time - - - - - {deliverydate.format('hh:mm A')} - - - - - - {/* - - {timeslotarr.map((val, index) => { - if ( - dayjs().diff(dayjs(`${dayjs(startdate).format('MM-DD-YYYY')} ${dayjs(val).format('HH:mm:ss')}`), 'm') <= 0 - ) { - return ( - - - { - if (distance > appLocaRadius) { - setOpen(true); - } else if (showDistance) { - console.log('selectedtime', val); - setSelectedtime(val); - } else { - opentoast('Out of city limit', 'error'); - } - }} - /> - - - ); - } - })} - - */} - - - - - - - {showDistance && ( - - - - - - - - - )} - Weight - - { - handleChipClick('1-10kgs'); - setWeight('1-10kgs'); - }} - /> - { - handleChipClick('11-20kgs'); - setWeight('11-20kgs'); - }} - /> - { - handleChipClick('21-30kgs'); - setWeight('21-30kgs'); - }} - /> - - - - SMS Delivery - - { - setIsSms(e.target.checked ? 1 : 0); - }} - /> - - - - Notes - - setOtherinstructions(e.target.value)} - /> - - - - - - - - {/* ================================================= || Notes || ================================================= */} - - - - {/* */} - - - - - - - - - {/* */} - - - {/* Customer Dialog removed — replaced with inline search panels above */} - {/* ============================================= || location error Dialog || ============================================= */} - { - setOpen(false); - }} - > - - - - Error - - - - - Service not available at this location - - - { - setOpen(false); - }} - > - Close - - - - - ); -}; - -export default Createorder1; diff --git a/src/pages/nearle/orders/optimisedOrderPreview.js b/src/pages/nearle/orders/optimisedOrderPreview.js deleted file mode 100644 index a80efe4..0000000 --- a/src/pages/nearle/orders/optimisedOrderPreview.js +++ /dev/null @@ -1,741 +0,0 @@ -import { - Autocomplete, - Button, - Chip, - Divider, - Grid, - Stack, - Table, - TableBody, - TableCell, - TableContainer, - TableHead, - TableRow, - TextField, - Tooltip, - Typography, - Backdrop, - IconButton, - Badge, - Accordion, - AccordionSummary, - AccordionActions, - AccordionDetails, - useMediaQuery -} from '@mui/material'; -import React, { Fragment, useEffect, useMemo, useState } from 'react'; -import { useTheme } from '@mui/material/styles'; -import { MobileCard, MobileCardList, MobileField, MobileFieldGrid } from 'components/nearle_components/MobileCard'; -import { useLocation, useNavigate } from 'react-router-dom'; -import dayjs from 'dayjs'; -import MainCard from 'components/MainCard'; -import ArrowBackIcon from '@mui/icons-material/ArrowBack'; -import { createAutomationDeliveries, fetchPaymentType, fetchRidersList, finalCreatedeliveries, notifyRider } from 'pages/api/api'; -import { OpenToast } from 'components/third-party/OpenToast'; -import { useMutation, useQuery } from '@tanstack/react-query'; -import Loader from 'components/Loader'; -import CircularLoader from 'components/CircularLoader'; -import { Empty } from 'antd'; -import HoverSocialCard from 'components/cards/statistics/HoverSocialCard'; -import { DashboardFilled, DashboardOutlined, OpenAIFilled } from '@ant-design/icons'; -import { MdDirectionsBike } from 'react-icons/md'; -import { FaMapLocationDot } from 'react-icons/fa6'; -import { HiOutlineArrowLeft } from 'react-icons/hi'; -import { IoReload } from 'react-icons/io5'; -import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank'; -import CheckBoxIcon from '@mui/icons-material/CheckBox'; -import { GiProfit } from 'react-icons/gi'; -import { ArrowRightAltOutlined } from '@mui/icons-material'; -import LocalShippingIcon from '@mui/icons-material/LocalShipping'; -import WarningIcon from '@mui/icons-material/Warning'; -import BoltIcon from '@mui/icons-material/Bolt'; -import CurrencyRupeeIcon from '@mui/icons-material/CurrencyRupee'; -import SavingsIcon from '@mui/icons-material/Savings'; -import EnergySavingsLeafIcon from '@mui/icons-material/EnergySavingsLeaf'; -import DirectionsBikeOutlinedIcon from '@mui/icons-material/DirectionsBikeOutlined'; -import DownloadOutlinedIcon from '@mui/icons-material/DownloadOutlined'; -import { exportToExcel } from 'components/exportToExcel'; -import CSVExport from 'components/third-party/ReactTable'; - -var utc = require('dayjs/plugin/utc'); -dayjs.extend(utc); - -const OptimisedOrderPreview = () => { - const theme = useTheme(); - const isMobile = useMediaQuery(theme.breakpoints.down('md')); - const navigate = useNavigate(); - const location = useLocation(); - console.log('location.state', location.state); - const [rider, setRider] = useState(null); - const [payment, setPayment] = useState(null); - const [finaldeliveryList, setFinalDeliveryList] = useState([]); - const [isLoading, setIsLoading] = useState(false); - const [deliverylist, setDeliverylist] = useState(location.state?.deliverylist); - const [zoneData, setZoneData] = useState(location?.state?.zoneData); - const [metaData, setMetaData] = useState(location.state?.metaData); - const riderToken = location.state?.riderToken; - const appId = location.state?.appId; - const aiMode = location.state?.aiMode; - const reassignOrders = location.state?.reassignOrders; - const [csvExportData, setCsvExportData] = useState([]); - - useEffect(() => { - console.log('called'); - - console.log('aiMode', aiMode); - console.log('riderToken', riderToken); - console.log('zoneData', zoneData); - console.log('metaData', metaData); - console.log('reassignOrders', reassignOrders); - }, [zoneData, metaData, deliverylist]); - - useEffect(() => { - const filtered = finaldeliveryList.map((item) => ({ - zone_name: item.zone_name, - ordernotes: item.ordernotes, - rider: item.rider, - step: item.step, - ordertype: item.ordertype, - orderamount: item.orderamount, - riderkms: item.riderkms, - cumulativekms: item.cumulativekms, - baseprice: item.baseprice, - minkm: item.minkm, - priceperkm: item.priceperkm, - kms: item.kms, - actualkms: item.actualkms, - rider_charge: item.rider_charge, - deliveryamt: item.deliveryamt, - deliverycharges: item.deliverycharges, - profit: item.profit - })); - - setCsvExportData(filtered); - - console.log('csvExportData', filtered); - }, [finaldeliveryList]); - useEffect(() => { - if (!deliverylist?.length) return; - const updateDeliveryAmtList = deliverylist.map((list) => { - const cumulativeKms = Number(list.cumulativekms || 0); - const minKm = Number(list.minkm || 0); - const basePrice = Number(list.baseprice || 0); - const pricePerKm = Number(list.priceperkm || 0); - if (cumulativeKms <= minKm) { - return { - ...list, - deliveryamt: basePrice - }; - } - return { - ...list, - deliveryamt: (cumulativeKms - minKm) * pricePerKm + basePrice - }; - }); - - setFinalDeliveryList(updateDeliveryAmtList); - console.log('finaldeliveryList', updateDeliveryAmtList); - }, [deliverylist]); - - // ==============================|| fetchPaymentType ||============================== // - - const { - data: paymentModes = [], - isLoading: paymentModesLoading, - isError: paymentModesError, - error: paymentModesErrorMessage - } = useQuery({ - queryKey: ['paymentmodes'], - queryFn: fetchPaymentType - }); - - // ==============================|| fetchRidersList ||============================== // - - const { - data: ridersList = [], - isLoading: ridersListLoading, - isError: ridersListError, - error: ridersListErrorMessage, - refetch: ridersListRefetch - } = useQuery({ - queryKey: ['ridersList', appId], // Unique key for caching & re-fetching - queryFn: fetchRidersList, - enabled: appId !== 0 // Ensures query runs only when appId is valid - }); - - const getRiderName = async (userid) => { - await ridersList.map((rider) => { - if (rider.userid == userid) { - return rider.firstname; - } - }); - }; - - // ======================================================= || notifyRiderMutation || ======================================================= - - const notifyRiderMutation = useMutation({ - mutationFn: notifyRider, // Using the separate function - onSuccess: () => { - OpenToast('Notification sent Successfully', 'success', 2000); - }, - onError: (error) => { - OpenToast(error.message, 'error', 2000); - } - }); - - const createFinalDeliveryMutation = useMutation({ - mutationFn: finalCreatedeliveries, // for optimised delivery create - - onSuccess: (data, variables) => { - console.log('data', data); - console.log('varialbles', variables); - notifyRiderMutation.mutate(rider.userfcmtoken || riderToken); // Call notifyRider after success - if (data.status == 'accepted') { - OpenToast('Delivery Created Successfully', 'success', 2000); - } - }, - onError: (error) => { - OpenToast(error.message, 'error', 4000); - }, - onSettled: () => { - setTimeout(() => { - setIsLoading(false); - navigate('/nearle/deliveries'); - }, 2000); - } - }); - - const handleFinalCreateDelivery = async () => { - // console.log('Final delivery list:', finaldeliveryList); - - setIsLoading(true); - createFinalDeliveryMutation.mutate({ - deliveries: finaldeliveryList - }); - }; - const createDeliveryMutation = useMutation({ - // 0 -> manual rider assign 1 -> ai rider assign - mutationFn: createAutomationDeliveries, - onSuccess: (data, variables) => { - console.log('data', data); - console.log('varialbles', variables); - OpenToast('Orders Optimised Successfully', 'success', 2000); - // notifyRiderMutation.mutate(variables?.riderToken); // Call notifyRider after success - setZoneData(data?.zones); - setDeliverylist(data?.details); - setMetaData(data?.meta); - setIsLoading(false); - }, - onError: (error) => { - OpenToast(error.message, 'error', 4000); - setIsLoading(false); - }, - onSettled: () => { - setIsLoading(false); - } - }); - - const tuningTypes = [ - { - tuneid: 1, - type: 'Rider' - }, - { - tuneid: 2, - type: 'Pickup' - }, - { - tuneid: 3, - type: 'Zone' - } - ]; - - return ( - - { - theme.zIndex.drawer + 1 - }} - open={paymentModesLoading || ridersListLoading || isLoading} // when loader = true, backdrop covers the page - > - - - } - {(paymentModesLoading || ridersListLoading || isLoading) && ( - <> - - - - )} - - - - navigate('/nearle/orders')} - sx={{ - bgcolor: 'action.hover', - '&:hover': { bgcolor: 'action.selected' } - }} - > - - - - - Assign Orders - - - - {/* */} - option.type} - renderOption={(props, option, { selected }) => { - const { id, ...optionProps } = props; - const SelectionIcon = selected ? CheckBoxIcon : CheckBoxOutlineBlankIcon; - - return ( -
  • - - {option.type} -
    • - ); - }} - sx={{ width: { xs: '100%', md: 400 } }} - renderInput={(params) => ( - - )} - /> - {/* */} - -     - - - - } - color={theme.palette.success.main} - sx={{ cursor: 'pointer' }} - /> - - - } - color={theme.palette.warning.main} - /> - - - } - color={theme.palette.info.main} - /> - - - } - color={theme.palette.error.main} - /> - - - - - {zoneData?.map((zone, index) => { - const riders = zone?.riders.flatMap((rider) => rider); - const orders = zone?.riders?.flatMap((rider) => rider.orders); - - return ( - - - - - Zone {index + 1} : - - - - - - - - - - - - - - - - {isMobile ? ( - - {orders.map((val, i) => { - const typeAccent = - val.ordertype === 'Economy' ? '#10b981' : val.ordertype === 'Risky' ? '#ef4444' : '#662582'; - return ( - - - - - - {`${val.locationname}-(${val.locationsuburb})`} - - - - ) : val.ordertype === 'Risky' ? ( - - ) : ( - - ) - } - color={val.ordertype === 'Economy' ? 'success' : val.ordertype === 'Risky' ? 'error' : 'primary'} - variant="light" - /> - - - - - - {val.rider} - - ID : {val.userid} - - - - - {val.pickupcustomer} - - - {val.pickupcontactno} - - - - {val.pickupsuburb || val.pickupaddress.slice(0, 20)} - - - - - - - - - {val.deliverycustomer} - - - {val.deliverycontactno} - - - - {val.deliverysuburb || val.deliveryaddress.slice(0, 20)} - - - - - - {val.ordernotes ? : null} - - - - - - - - - - - - - - - ); - })} - - ) : ( - - - - - # - {/* Tenant */} - Order Location - Pickup - Delivery - Notes - Rider - Type - Profit - Charges - KMS - - - - - {orders.map((val, i) => ( - - - - {i + 1} - - {/* - - - {val.tenantname} - - - {val.tenantsuburb} -
    -     - - - {val.applocation} - -     -     */} - - - - {`${val.locationname}-(${val.locationsuburb})`} - - - - - {val.orderid} - - - - - - {dayjs(val.pickupslot).format('DD/MM/YYYY')} - - - - - - - {dayjs(val.expecteddeliverytime).format('DD/MM/YYYY')} - - - - - - - - - {val.pickupcustomer} - {val.pickupcontactno} - - - {val.pickupsuburb || val.pickupaddress.slice(0, 20)} - - - - - - - - - {val.deliverycustomer} - {val.deliverycontactno} - - - {val.deliverysuburb || val.deliveryaddress.slice(0, 20)} - - - - - - - - {val.ordernotes} - - - - - - {val.rider} - -
    - ID : {val.userid} -     - - - - ) : val.ordertype === 'Risky' ? ( - - ) : ( - - ) - } - color={val.ordertype === 'Economy' ? 'success' : val.ordertype === 'Risky' ? 'error' : 'primary'} - variant="light" - /> - - - - - - - - - - - {/* - - */} - - - - - - - - - - - - -     -     - ))} -     -
    -     - )} -     -     - ); - })} - - - - - - -     -     - ); -}; - -export default OptimisedOrderPreview; diff --git a/src/pages/nearle/orders/orders.js b/src/pages/nearle/orders/orders.js index 9aaab12..5021f56 100644 --- a/src/pages/nearle/orders/orders.js +++ b/src/pages/nearle/orders/orders.js @@ -144,7 +144,7 @@ const dtSoft = (c) => dtA(c, '18'); const dtRing = (c) => dtA(c, '26'); const dtEdge = (c) => dtA(c, '55'); -const BRAND = '#662582'; +const BRAND = '#C01227'; const SoftPaper = (props) => ( ({ fontWeight: 600, '& fieldset': { borderColor: '#e2e8f0', borderWidth: 1 }, '&:hover fieldset': { borderColor: '#cbd5e1' }, - '&.Mui-focused': { boxShadow: `0 0 0 3px ${dtRing('#662582')}` }, - '&.Mui-focused fieldset': { borderColor: '#662582', borderWidth: 1.5 } + '&.Mui-focused': { boxShadow: `0 0 0 3px ${dtRing('#C01227')}` }, + '&.Mui-focused fieldset': { borderColor: '#C01227', borderWidth: 1.5 } } }); @@ -967,7 +967,7 @@ const Orders = () => { {/* ============================================= || KPI Cards || ============================================= */} {[ - { key: 'created', label: 'Created Orders', color: '#662582', icon: MdOutlineReceiptLong, value: percentageData?.created, percentage: percentageData?.percentage1 }, + { key: 'created', label: 'Created Orders', color: '#C01227', icon: MdOutlineReceiptLong, value: percentageData?.created, percentage: percentageData?.percentage1 }, { key: 'pending', label: 'Pending Orders', color: '#f59e0b', icon: MdOutlinePendingActions, value: percentageData?.uncoveredOrders, percentage: percentageData?.percentage2 }, { key: 'delivered', label: 'Delivered Orders', color: '#10b981', icon: MdOutlineCheckCircle, value: percentageData?.coveredOrders, percentage: percentageData?.percentage3 }, { key: 'cancelled', label: 'Cancelled Orders', color: '#ef4444', icon: MdOutlineCancel, value: percentageData?.cancelled, percentage: percentageData?.percentage4 } @@ -1279,7 +1279,7 @@ const Orders = () => { bgcolor: dtTint(BRAND), '& fieldset': { borderColor: dtEdge(BRAND), borderWidth: 1.5 }, '&:hover fieldset': { borderColor: '#cbd5e1' }, - '&.Mui-focused fieldset': { borderColor: '#662582', borderWidth: 1.5 }, + '&.Mui-focused fieldset': { borderColor: '#C01227', borderWidth: 1.5 }, '&.Mui-focused': { boxShadow: `0 0 0 3px ${dtRing(BRAND)}` } }} /> diff --git a/src/pages/nearle/reports/RidersRoutes.js b/src/pages/nearle/reports/RidersRoutes.js index 24fc765..76e9983 100644 --- a/src/pages/nearle/reports/RidersRoutes.js +++ b/src/pages/nearle/reports/RidersRoutes.js @@ -107,7 +107,7 @@ export default function RidersRoutes({ details, loading, riderName, dateRange, o // brand purple to match the planned-route polyline below. const stepIcon = (n, isFocused) => { const size = isFocused ? 38 : 32; - const color = isFocused ? '#4D1C61' : '#662582'; + const color = isFocused ? '#900E1D' : '#C01227'; const svg = encodeURIComponent( `` + `` + @@ -126,7 +126,7 @@ export default function RidersRoutes({ details, loading, riderName, dateRange, o px: 2, py: 1.25, borderBottom: '1px solid rgba(15, 23, 42, 0.08)', - background: 'linear-gradient(135deg, #662582 0%, #9255AB 100%)', + background: 'linear-gradient(135deg, #C01227 0%, #D35968 100%)', color: '#fff', flexShrink: 0 }} @@ -207,12 +207,12 @@ export default function RidersRoutes({ details, loading, riderName, dateRange, o {/* Translucent backdrop so the route stays legible on busy tiles. */} {/* Road-following planned route from the Directions API. */} ) : ( @@ -221,7 +221,7 @@ export default function RidersRoutes({ details, loading, riderName, dateRange, o a(c, '18'); const ring = (c) => a(c, '26'); const edge = (c) => a(c, '55'); -const BRAND = '#662582'; -const BRAND_LIGHT = '#9255AB'; +const BRAND = '#C01227'; +const BRAND_LIGHT = '#D35968'; const SoftPaper = (props) => ( ({ '& fieldset': { borderColor: '#e2e8f0', borderWidth: 1 }, '&:hover fieldset': { borderColor: '#cbd5e1' }, '&.Mui-focused': { boxShadow: `0 0 0 3px ${ring(color)}` }, - '&.Mui-focused fieldset': { borderColor: '#662582', borderWidth: 1.5 } + '&.Mui-focused fieldset': { borderColor: '#C01227', borderWidth: 1.5 } } }); @@ -1172,7 +1172,7 @@ export default function OrdersDetails() { bgcolor: '#ffffff', '& fieldset': { borderColor: '#e2e8f0', borderWidth: 1 }, '&:hover fieldset': { borderColor: '#cbd5e1' }, - '&.Mui-focused fieldset': { borderColor: '#662582', borderWidth: 1.5 }, + '&.Mui-focused fieldset': { borderColor: '#C01227', borderWidth: 1.5 }, '&.Mui-focused': { boxShadow: `0 0 0 3px ${ring(BRAND)}` } }} /> diff --git a/src/pages/nearle/reports/ordersSummary.js b/src/pages/nearle/reports/ordersSummary.js index 7a48691..2906ab0 100644 --- a/src/pages/nearle/reports/ordersSummary.js +++ b/src/pages/nearle/reports/ordersSummary.js @@ -87,8 +87,8 @@ const soft = (c) => a(c, '18'); const ring = (c) => a(c, '26'); const edge = (c) => a(c, '55'); -const BRAND = '#662582'; -const BRAND_LIGHT = '#9255AB'; +const BRAND = '#C01227'; +const BRAND_LIGHT = '#D35968'; const SoftPaper = (props) => ( ({ '& fieldset': { borderColor: '#e2e8f0', borderWidth: 1 }, '&:hover fieldset': { borderColor: '#cbd5e1' }, '&.Mui-focused': { boxShadow: `0 0 0 3px ${ring(color)}` }, - '&.Mui-focused fieldset': { borderColor: '#662582', borderWidth: 1.5 } + '&.Mui-focused fieldset': { borderColor: '#C01227', borderWidth: 1.5 } } }); @@ -588,7 +588,7 @@ export default function OrdersReport() { bgcolor: '#ffffff', '& fieldset': { borderColor: '#e2e8f0', borderWidth: 1 }, '&:hover fieldset': { borderColor: '#cbd5e1' }, - '&.Mui-focused fieldset': { borderColor: '#662582', borderWidth: 1.5 }, + '&.Mui-focused fieldset': { borderColor: '#C01227', borderWidth: 1.5 }, '&.Mui-focused': { boxShadow: `0 0 0 3px ${ring(BRAND)}` } }} /> diff --git a/src/pages/nearle/reports/profitability.js b/src/pages/nearle/reports/profitability.js index d973863..aa320f7 100644 --- a/src/pages/nearle/reports/profitability.js +++ b/src/pages/nearle/reports/profitability.js @@ -66,7 +66,7 @@ const tint = (c) => aColor(c, '08'); const edge = (c) => aColor(c, '55'); const ring = (c) => aColor(c, '26'); -const BRAND = '#662582'; +const BRAND = '#C01227'; const SoftPaper = (props) => ( diff --git a/src/pages/nearle/reports/ridersSummary.js b/src/pages/nearle/reports/ridersSummary.js index 300612d..7841cf7 100644 --- a/src/pages/nearle/reports/ridersSummary.js +++ b/src/pages/nearle/reports/ridersSummary.js @@ -86,8 +86,8 @@ const soft = (c) => a(c, '18'); const ring = (c) => a(c, '26'); const edge = (c) => a(c, '55'); -const BRAND = '#662582'; -const BRAND_LIGHT = '#9255AB'; +const BRAND = '#C01227'; +const BRAND_LIGHT = '#D35968'; const SoftPaper = (props) => ( diff --git a/src/pages/nearle/requests/requests.js b/src/pages/nearle/requests/requests.js index 7d13a77..e2ecf9f 100644 --- a/src/pages/nearle/requests/requests.js +++ b/src/pages/nearle/requests/requests.js @@ -902,7 +902,7 @@ const Requests = () => { {loading && [0, 1, 2, 3, 4].map((item) => ( - + @@ -923,13 +923,13 @@ const Requests = () => { return ( handleClick(event, row.sno)} header={ - + {row.requestor ? String(row.requestor).charAt(0).toUpperCase() : '#'} @@ -942,7 +942,7 @@ const Requests = () => { {row.amount != null && ( - + )} } diff --git a/src/pages/nearle/riders/RiderSubstitution.js b/src/pages/nearle/riders/RiderSubstitution.js index c1ce1e3..fbe862b 100644 --- a/src/pages/nearle/riders/RiderSubstitution.js +++ b/src/pages/nearle/riders/RiderSubstitution.js @@ -269,7 +269,7 @@ export default function RiderSubstitution({ bgcolor: BRAND, color: '#fff', '&:hover': { - bgcolor: '#4D1C61' + bgcolor: '#900E1D' } } } @@ -657,7 +657,7 @@ export default function RiderSubstitution({ fontWeight: 700, textTransform: 'none', '&:hover': { - bgcolor: '#4D1C61' + bgcolor: '#900E1D' } }} > diff --git a/src/pages/nearle/riders/riders.js b/src/pages/nearle/riders/riders.js index ed99329..e82eab0 100644 --- a/src/pages/nearle/riders/riders.js +++ b/src/pages/nearle/riders/riders.js @@ -77,7 +77,7 @@ import RiderSubstitution from './RiderSubstitution'; // ============================================================================ // Design tokens — shared with the deliveries / tenants / customers pages so // every surface (header, KPI tiles, table, badges, dialog) speaks the same -// visual language. Brand purple `#662582` is the canonical primary; status +// visual language. Brand purple `#C01227` is the canonical primary; status // colours are semantic and distinct from the brand. // ============================================================================ const DT = { @@ -100,7 +100,7 @@ const soft = (c) => a(c, '18'); const ring = (c) => a(c, '26'); const edge = (c) => a(c, '55'); -const BRAND = '#662582'; +const BRAND = '#C01227'; const SoftPaper = (props) => ( { bgcolor: '#ffffff', '& fieldset': { borderColor: '#e2e8f0', borderWidth: 1 }, '&:hover fieldset': { borderColor: '#cbd5e1' }, - '&.Mui-focused fieldset': { borderColor: '#662582', borderWidth: 1.5 }, + '&.Mui-focused fieldset': { borderColor: '#C01227', borderWidth: 1.5 }, '&.Mui-focused': { boxShadow: `0 0 0 3px ${ring(BRAND)}` } }} /> @@ -813,7 +813,7 @@ const Riders = () => { bgcolor: BRAND, color: '#fff', '&:hover': { - bgcolor: '#4D1C61' + bgcolor: '#900E1D' } } } @@ -1914,7 +1914,7 @@ const Riders = () => { fontWeight: 600, bgcolor: BRAND, color: '#fff', - '&:hover': { bgcolor: '#4D1C61' } + '&:hover': { bgcolor: '#900E1D' } }} > Save Changes diff --git a/src/pages/nearle/viewProfile.js b/src/pages/nearle/viewProfile.js index 04eeb91..772a1c7 100644 --- a/src/pages/nearle/viewProfile.js +++ b/src/pages/nearle/viewProfile.js @@ -31,8 +31,8 @@ const DT = { surface: '#ffffff', surfaceAlt: '#f8fafc' }; -const BRAND = '#662582'; -const BRAND_LIGHT = '#9255AB'; +const BRAND = '#C01227'; +const BRAND_LIGHT = '#D35968'; const tint = (c) => `${c}08`; const soft = (c) => `${c}18`; @@ -143,7 +143,7 @@ const ViewProfile = () => { color: '#fff', fontSize: { xs: 24, md: 28 }, fontWeight: 700, - boxShadow: '0 10px 24px rgba(102, 37, 130, 0.35)' + boxShadow: '0 10px 24px rgba(192, 18, 39, 0.35)' }} > {initialsOf(fullname)} diff --git a/src/pages/titleCard.js b/src/pages/titleCard.js deleted file mode 100644 index b7595d3..0000000 --- a/src/pages/titleCard.js +++ /dev/null @@ -1,31 +0,0 @@ -import React from 'react'; -import { useTheme } from '@mui/material/styles'; -import { CardActions, Grid, Stack, Typography } from '@mui/material'; - -const TitleCard = ({ title, secondary, sx }) => { - const theme = useTheme(); - - return ( - - - - - {title} - {secondary} - - - - - ); -}; - -export default TitleCard; diff --git a/src/themes/index.js b/src/themes/index.js index 9444eaf..115d2b6 100644 --- a/src/themes/index.js +++ b/src/themes/index.js @@ -121,7 +121,7 @@ export default function ThemeCustomization({ children }) { // soft slate that tints toward brand purple on hover. '*': { scrollbarWidth: 'thin', // Firefox - scrollbarColor: 'rgba(102, 37, 130, 0.28) transparent' + scrollbarColor: 'rgba(192, 18, 39, 0.28) transparent' }, '*::-webkit-scrollbar': { width: '10px', @@ -131,13 +131,13 @@ export default function ThemeCustomization({ children }) { backgroundColor: 'transparent' }, '*::-webkit-scrollbar-thumb': { - backgroundColor: 'rgba(102, 37, 130, 0.26)', + backgroundColor: 'rgba(192, 18, 39, 0.26)', borderRadius: '8px', border: '2px solid transparent', backgroundClip: 'padding-box' }, '*::-webkit-scrollbar-thumb:hover': { - backgroundColor: 'rgba(102, 37, 130, 0.45)' + backgroundColor: 'rgba(192, 18, 39, 0.45)' }, '*::-webkit-scrollbar-corner': { backgroundColor: 'transparent' diff --git a/src/themes/overrides/Autocomplete.js b/src/themes/overrides/Autocomplete.js index 5c61492..e999218 100644 --- a/src/themes/overrides/Autocomplete.js +++ b/src/themes/overrides/Autocomplete.js @@ -23,10 +23,10 @@ export default function Autocomplete() { borderRadius: 8, margin: '1px 0', '&[aria-selected="true"]': { - backgroundColor: 'rgba(102, 37, 130, 0.08)' + backgroundColor: 'rgba(192, 18, 39, 0.08)' }, '&.Mui-focused': { - backgroundColor: 'rgba(102, 37, 130, 0.06)' + backgroundColor: 'rgba(192, 18, 39, 0.06)' } } }, diff --git a/src/themes/theme/default.js b/src/themes/theme/default.js index 8272d42..f8506c1 100644 --- a/src/themes/theme/default.js +++ b/src/themes/theme/default.js @@ -40,16 +40,16 @@ const Default = (colors) => { // contrastText // }, primary: { - lighter: '#E8D9EF', - 100: '#CBA7DA', - 200: '#AE76C4', - light: '#9255AB', - 400: '#9255AB', - main: '#662582', - dark: '#4D1C61', - 700: '#3A1549', - darker: '#260E30', - 900: '#17081D', + lighter: '#F6DBDF', + 100: '#E9ACB3', + 200: '#DD7F8A', + light: '#D35968', + 400: '#D35968', + main: '#C01227', + dark: '#900E1D', + 700: '#6D0A16', + darker: '#47070E', + 900: '#2A0409', contrastText: '#FFFFFF' }, secondary: { diff --git a/src/utils/locales/en.json b/src/utils/locales/en.json index c8cc420..9efe4c1 100644 --- a/src/utils/locales/en.json +++ b/src/utils/locales/en.json @@ -18,5 +18,6 @@ "riderslogs": "Riders Logs", "invoice": "Invoice", "dispatch": "Dispatch", - "profitability": "Profitability" + "profitability": "Profitability", + "Doormile": "Doormile" }