Doormile/Doormilexpress_console
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updates on the ui changes and frully removed the mui and converted into astryx and color change

Browse Source
This commit is contained in:
dharaneesh-r
2026-08-13 18:24:04 +05:30
parent 498bb7cbc0
commit 8cd8e34b11
122 changed files with 15111 additions and 22411 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
src/pages/nearle/clients/Tenants.js
View File

@@ -50,7 +50,6 @@ import {
StopOutlined,
CloseOutlined
} from '@ant-design/icons';
import { PopupTransition } from 'components/@extended/Transitions';
import { FaRegCheckCircle, FaRegAddressCard } from 'react-icons/fa';
import { TbBrandDatabricks, TbWorldLongitude, TbWorldLatitude } from 'react-icons/tb';
import { GiMoneyStack, GiModernCity } from 'react-icons/gi';
@@ -64,7 +63,6 @@ import {
MdOutlineCheckCircle,
MdOutlinePendingActions,
MdOutlineCancel,
MdMyLocation,
MdPersonPin,
MdPlace,
MdAdd,
@@ -94,32 +92,8 @@ import {
deleteTenantCustomer
} from 'pages/api/doormileApi';
import { OrdersTableSkeleton } from '../orders/OrdersTableSkeleton';
// ============================================================================
// Design tokens — shared with the deliveries page so every surface (header,
// filters, KPI tiles, tabs, badges, dialogs) speaks the same visual language.
// ============================================================================
const DT = {
radiusPill: 999,
radiusCard: 14,
radiusInner: 12,
shadowSoft: '0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.05)',
shadowMd: '0 1px 3px rgba(15, 23, 42, 0.06)',
shadowPop: '0 12px 32px rgba(15, 23, 42, 0.12)',
textPrimary: '#0f172a',
textSecondary: '#64748b',
textMuted: '#94a3b8',
borderSubtle: '#e2e8f0',
divider: '#f1f5f9',
surface: '#ffffff',
surfaceAlt: '#f8fafc'
};
const a = (c, suffix) => `${c}${suffix}`;
const tint = (c) => a(c, '08');
const soft = (c) => a(c, '18');
const ring = (c) => a(c, '26');
const edge = (c) => a(c, '55');
import { DT, tint, soft, edge } from 'themes/dt/tokens';
import { AccentAvatar } from 'themes/dt/primitives';
// Status palette — drives the pill tabs and per-row badges.
const STATUS_META = {
@@ -140,34 +114,6 @@ const KPI_META = [
{ key: 'inactive', label: 'Inactive Tenants', color: '#ef4444', icon: MdOutlineCancel, countKey: 'inactive' }
];
const SoftPaper = (props) => (
<Paper
{...props}
sx={{
mt: 0.75,
borderRadius: 2,
boxShadow: DT.shadowPop,
border: '1px solid',
borderColor: 'divider',
overflow: 'hidden'
}}
/>
);
const AccentAvatar = ({ color, selected, size = 24, children }) => (
<Avatar
sx={{
width: size,
height: size,
bgcolor: selected ? color : soft(color),
color: selected ? '#fff' : color,
transition: 'background-color 0.15s, color 0.15s'
}}
>
{children}
</Avatar>
);
// ==============================|| Tenant locations (branches/sites) dialog ||============================== //
// Self-contained — deliberately does not touch the existing openRowIndex1/2 +
// Tabs collapse machinery above, which is fragile legacy state. GET/POST/PUT
@@ -548,7 +494,6 @@ const Clients1 = () => {
const [isloader, setisloader] = useState(false);
const [appId, setAppId] = useState(0);
const [locaName, setLocoName] = useState('');
const [locations] = useState('All');
const [value0, setValue0] = useState(0);
const [value1, setValue1] = useState(0);
const [value2, setValue2] = useState(0);
@@ -866,17 +811,11 @@ const Clients1 = () => {
live
action={
<LocationAutocomplete
locations={locations}
locaName={locaName}
setAppId={setAppId}
setLocoName={setLocoName}
setPage={setPage}
pill
accentColor="#662582"
icon={<MdMyLocation size={14} />}
placeholder="Select Zone"
paperComponent={SoftPaper}
sx={{ width: { xs: '100%', sm: 280 }, zIndex: 100 }}
/>
}
/>
@@ -898,7 +837,7 @@ const Clients1 = () => {
title={item.label}
value={value ?? 0}
icon={<Icon size={20} />}
color={idx === 0 ? '#662582' : item.color}
color={idx === 0 ? '#000000' : item.color}
loading={getalltenantsIsLoading}
/>
</Box>
@@ -964,15 +903,18 @@ const Clients1 = () => {
flexShrink: 0,
cursor: 'pointer',
borderRadius: '10px',
border: `1px solid ${active ? meta.color : '#e2e8f0'}`,
bgcolor: active ? meta.color : '#fff',
// Selected tab always shows the brand red, not the status's own
// semantic color (pending=amber, delivered=emerald, etc.) — the
// status color still tints the unselected/resting state below.
border: `1px solid ${active ? '#000000' : '#e2e8f0'}`,
bgcolor: active ? '#000000' : '#fff',
color: active ? '#fff' : '#64748b',
fontWeight: 600,
boxShadow: 'none',
transition: 'background-color 0.15s, border-color 0.15s, color 0.15s',
'&:hover': {
borderColor: active ? meta.color : '#cbd5e1',
bgcolor: active ? meta.color : '#f8fafc'
borderColor: active ? '#000000' : '#cbd5e1',
bgcolor: active ? '#000000' : '#f8fafc'
}
}}
>
@@ -1021,16 +963,6 @@ const Clients1 = () => {
value={searchword}
onChange={setSearchword}
onDebouncedChange={setDebouncedSearch}
sx={{
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')}` }
}}
/>
</Box>
</Stack>
@@ -1056,9 +988,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('#000000'),
borderRadius: '8px',
'&:hover': { backgroundColor: '#662582' }
'&:hover': { backgroundColor: '#000000' }
},
'&::-webkit-scrollbar-track': { backgroundColor: DT.surfaceAlt }
}}
@@ -1159,7 +1091,7 @@ const Clients1 = () => {
</TableCell>
<TableCell>
<Stack direction="row" alignItems="center" spacing={1}>
<AccentAvatar color="#662582" size={32}>
<AccentAvatar color="#000000" size={32}>
<MdPersonPin size={16} />
</AccentAvatar>
<Stack>
@@ -1261,10 +1193,10 @@ const Clients1 = () => {
<IconButton
size="small"
sx={{
bgcolor: openRowIndex1 === index ? '#662582' : soft('#662582'),
color: openRowIndex1 === index ? '#fff' : '#662582',
border: `1px solid ${edge('#662582')}`,
'&:hover': { bgcolor: '#662582', color: '#fff' }
bgcolor: openRowIndex1 === index ? '#000000' : soft('#000000'),
color: openRowIndex1 === index ? '#fff' : '#000000',
border: `1px solid ${edge('#000000')}`,
'&:hover': { bgcolor: '#000000', color: '#fff' }
}}
onClick={() => {
setSelectedCustomer(row);
@@ -1347,7 +1279,7 @@ const Clients1 = () => {
>
<MainCard
content={false}
sx={{
style={{
transform: open ? 'translateY(0)' : 'translateY(-8px)',
opacity: open ? 1 : 0
}}
@@ -1772,7 +1704,6 @@ const Clients1 = () => {
}))
}
onPlaceSelected={handleAddressPlaceSelected}
TextFieldProps={{ variant: 'outlined' }}
/>
</Grid>
</Grid>
@@ -2012,7 +1943,7 @@ const Clients1 = () => {
{/* ============================================= || Mobile cards (xs only) || ============================================= */}
{isMobile && (
<MobileCardList scroll sx={{ display: { xs: 'flex', md: 'none' } }}>
<MobileCardList scroll>
{getalltenantsIsLoading && (
<Stack alignItems="center" sx={{ py: 4 }}>
<Skeleton variant="rounded" width="100%" height={96} animation="wave" />
@@ -2045,7 +1976,7 @@ const Clients1 = () => {
header={
<Stack direction="row" alignItems="flex-start" justifyContent="space-between" spacing={1}>
<Stack direction="row" alignItems="center" spacing={1} sx={{ minWidth: 0 }}>
<AccentAvatar color="#662582" size={36}>
<AccentAvatar color="#000000" size={36}>
<MdPersonPin size={18} />
</AccentAvatar>
<Stack sx={{ minWidth: 0 }}>
@@ -2144,10 +2075,10 @@ const Clients1 = () => {
<IconButton
size="small"
sx={{
bgcolor: expanded ? '#662582' : soft('#662582'),
color: expanded ? '#fff' : '#662582',
border: `1px solid ${edge('#662582')}`,
'&:hover': { bgcolor: '#662582', color: '#fff' }
bgcolor: expanded ? '#000000' : soft('#000000'),
color: expanded ? '#fff' : '#000000',
border: `1px solid ${edge('#000000')}`,
'&:hover': { bgcolor: '#000000', color: '#fff' }
}}
onClick={() => {
setSelectedCustomer(row);
@@ -2251,12 +2182,11 @@ const Clients1 = () => {
onClose={dialogclose}
scroll={'paper'}
maxWidth="sm"
TransitionComponent={PopupTransition}
PaperProps={{ sx: { borderRadius: { xs: 0, sm: 3 } } }}
>
<DialogTitle
sx={{
bgcolor: '#662582',
bgcolor: '#000000',
color: '#fff',
fontSize: '20px'
}}
@@ -2264,7 +2194,7 @@ const Clients1 = () => {
{`Client Pricing - (${selectedCustomer.tenantname})`}
</DialogTitle>
<DialogContent dividers={true}>
<MainCard sx={{ height: '100%' }}>
<MainCard height="100%">
<Grid container spacing={2.5} alignItems={'center'}>
<Grid item xs={12} sm={6}>
<FormLabel>Select Slab</FormLabel>

28
src/pages/nearle/clients/createCustomer.js
View File

@@ -6,7 +6,6 @@ import {
Avatar,
Button,
Grid,
IconButton,
InputLabel,
MenuItem,
Paper,
@@ -17,7 +16,6 @@ import {
useMediaQuery,
useTheme
} from '@mui/material';
import CloseIcon from '@mui/icons-material/Close';
import { MdPersonAddAlt1 } from 'react-icons/md';
import { useMutation, useQuery } from '@tanstack/react-query';
@@ -184,7 +182,7 @@ const Createcustomer = () => {
boxShadow: DT.shadowSoft,
border: '1px solid',
borderColor: DT.borderSubtle,
background: `linear-gradient(135deg, ${tint('#C01227')} 0%, ${tint('#D25463')} 100%)`
background: `linear-gradient(135deg, ${tint('#000000')} 0%, ${tint('#3A3A3A')} 100%)`
}}
>
<Stack direction="row" spacing={1.5} alignItems="center">
@@ -196,18 +194,17 @@ const Createcustomer = () => {
</Paper>
</Grid>
<MainCard
contentSX={{ p: { xs: 1.5, md: 3 } }}
sx={{ borderRadius: DT.radiusCard + 'px', boxShadow: DT.shadowSoft, borderColor: DT.borderSubtle }}
padding={6}
>
<Grid container spacing={isMobile ? 2 : 3}>
<Grid item xs={12}>
<MainCard sx={{ height: '100%' }} contentSX={{ p: { xs: 1.5, md: 2.5 } }}>
<MainCard height="100%" padding={5}>
<Grid container spacing={isMobile ? 2 : 3}>
{/* ===================================================== || Location & Client || ===================================================== */}
<Grid item xs={12} md={6}>
<Stack spacing={1.25}>
<InputLabel>Location</InputLabel>
<LocationAutocomplete locaName={locaName} setAppId={setAppId} setLocoName={setLocoName} sx={{}} />
<LocationAutocomplete locaName={locaName} setAppId={setAppId} setLocoName={setLocoName} />
</Stack>
</Grid>
{isStaffLogin && (
@@ -322,23 +319,6 @@ const Createcustomer = () => {
onChange={(text) => setInputValue2(text)}
onPlaceSelected={handlePlaceSelected}
bias={{ lat: appLocaLat, lng: appLocaLng }}
TextFieldProps={{
variant: 'outlined',
InputProps: {
endAdornment: (
<IconButton
onClick={() => {
setInputValue2('');
setPickCust({});
setStartPoint({ latitude: 0, longitude: 0 });
}}
size="small"
>
<CloseIcon />
</IconButton>
)
}
}}
/>
</Stack>
</Grid>

7
src/pages/nearle/clients/createclient.js
View File

@@ -105,7 +105,7 @@ const Createclient = () => {
boxShadow: DT.shadowSoft,
border: '1px solid',
borderColor: DT.borderSubtle,
background: `linear-gradient(135deg, ${tint('#C01227')} 0%, ${tint('#D25463')} 100%)`
background: `linear-gradient(135deg, ${tint('#000000')} 0%, ${tint('#3A3A3A')} 100%)`
}}
>
<Stack direction="row" spacing={1.5} alignItems="center">
@@ -117,12 +117,11 @@ const Createclient = () => {
</Paper>
</Grid>
<MainCard
contentSX={{ p: { xs: 1.5, md: 3 } }}
sx={{ borderRadius: DT.radiusCard + 'px', boxShadow: DT.shadowSoft, borderColor: DT.borderSubtle }}
padding={6}
>
<Grid container spacing={isMobile ? 2 : 3}>
<Grid item xs={12}>
<MainCard sx={{ height: '100%' }} contentSX={{ p: { xs: 1.5, md: 2.5 } }}>
<MainCard height="100%" padding={5}>
<Grid container spacing={isMobile ? 2 : 3}>
<Grid item xs={12} sm={6}>
<Stack spacing={1.25}>