updates on the ui changes and frully removed the mui and converted into astryx and color change
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user