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

231
src/components/nearle_components/LocationAutocomplete.js
View File

@@ -1,151 +1,106 @@
import React, { forwardRef, useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
import { Selector } from '@astryxdesign/core/Selector';
import { Autocomplete, TextField, Avatar, Stack } from '@mui/material';
import { MdMyLocation } from 'react-icons/md';
import { fetchAppLocations } from 'pages/api/api';
// Pill variant — opt-in via `pill` prop. Mirrors the design used across the
// deliveries / dispatch filter rows (rounded pill, soft tinted bg, accent
// border + focus ring, optional leading avatar icon). The default
// (`pill={false}` or omitted) renders the original outlined TextField with
// label "Select Zones" so existing callers are not affected.
const LocationAutocomplete = forwardRef(
(
{
locaName,
setAppId,
setLocoName,
setPage,
sx,
textfeildSx,
textfieldSx,
pill = false,
accentColor = '#6366f1',
icon,
placeholder = 'Select Zone',
paperComponent
},
ref
) => {
// Tenant-scoped cache key — fetchAppLocations() now narrows the hub list
// to the logged-in tenant's own city, so caching under one shared flat
// key would leak a previous tenant's list into a different tenant's
// session on the same browser if it ever skipped a full logout clear.
const applocationsCacheKey = `applocations_${localStorage.getItem('tenantid') || 'staff'}`;
const [locations, setLocations] = useState(JSON.parse(localStorage.getItem(applocationsCacheKey) || '[]'));
// ==============================|| ZONE PICKER ||============================== //
// Astryx `Selector` over the hub-derived zone list.
//
// Migration notes: the MUI version carried a `pill` variant plus
// `accentColor` / `icon` / `paperComponent` / `sx` / `textfieldSx` props so
// each page could restyle the field itself. Astryx's Selector owns that
// styling, so all of those are gone and the picker now looks identical
// everywhere. `width` is the one layout prop kept, since call sites genuinely
// differ (220px on pricing, 280px elsewhere).
//
// `ref` still works: three pages (deliveries, ordersDetails, ordersSummary)
// call `locationRef.current.focus()` to pull the operator back to the zone
// picker after a "select your zone first" toast. Selector doesn't forward a
// ref, so we expose `focus()` ourselves and drive its trigger button.
useEffect(() => {
// Zones are derived from GET /admin/hubs (the new API has no dedicated
// zones resource) — see fetchAppLocations in pages/api/api.js.
const fetchLocations = async () => {
try {
const updatedLocations = await fetchAppLocations();
localStorage.setItem(applocationsCacheKey, JSON.stringify(updatedLocations));
setLocations(updatedLocations);
} catch (err) {
console.error('Error fetching locations in LocationAutocomplete:', err);
}
};
const LocationAutocomplete = forwardRef(({ locaName, setAppId, setLocoName, setPage, placeholder = 'Select Zone', width = 280 }, ref) => {
// Tenant-scoped cache key — fetchAppLocations() now narrows the hub list
// to the logged-in tenant's own city, so caching under one shared flat
// key would leak a previous tenant's list into a different tenant's
// session on the same browser if it ever skipped a full logout clear.
const applocationsCacheKey = `applocations_${localStorage.getItem('tenantid') || 'staff'}`;
const [locations, setLocations] = useState(JSON.parse(localStorage.getItem(applocationsCacheKey) || '[]'));
const wrapRef = useRef(null);
if (locations.length === 0) {
fetchLocations();
useImperativeHandle(ref, () => ({
focus: () => wrapRef.current?.querySelector('button')?.focus()
}));
useEffect(() => {
// Zones are derived from GET /admin/hubs (the new API has no dedicated
// zones resource) — see fetchAppLocations in pages/api/api.js.
const fetchLocations = async () => {
try {
const updatedLocations = await fetchAppLocations();
localStorage.setItem(applocationsCacheKey, JSON.stringify(updatedLocations));
setLocations(updatedLocations);
} catch (err) {
console.error('Error fetching locations in LocationAutocomplete:', err);
}
}, [locations.length, applocationsCacheKey]);
};
// Helpers (only used by pill variant) — match the deliveries page's
// token shorthand so the same opacity ramp is applied here.
const a = (suffix) => `${accentColor}${suffix}`;
const ring = a('26');
const soft = a('18');
if (locations.length === 0) {
fetchLocations();
}
}, [locations.length, applocationsCacheKey]);
const pillSx = pill
? {
cursor: 'pointer',
'& .MuiOutlinedInput-root': {
borderRadius: '10px',
bgcolor: '#ffffff',
fontWeight: 600,
color: '#0f172a',
paddingRight: '8px',
cursor: 'pointer',
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}` },
'&.Mui-focused fieldset': { borderColor: accentColor, borderWidth: 1.5 }
},
'& .MuiAutocomplete-endAdornment .MuiSvgIcon-root': { color: '#94a3b8' }
}
: {};
const options = useMemo(() => (locations || []).map((l) => ({ value: l.locationname, label: l.locationname })), [locations]);
const Adornment = pill && (
<Stack direction="row" alignItems="center" spacing={0.75} sx={{ pl: 0.5, mr: 0.25, flexShrink: 0 }}>
<Avatar
sx={{
width: 24,
height: 24,
bgcolor: soft,
color: accentColor,
transition: 'background-color 0.15s, color 0.15s'
}}
>
{icon || <MdMyLocation size={14} />}
</Avatar>
</Stack>
);
const handleChange = (value) => {
if (!value) {
// null (not 0) — 0 is a real, meaningful selection here: the synthetic
// "All" option (fetchAppLocations in api.js appends
// { locationname: 'All', applocationid: 0 }). Callers that gate other
// pickers on "has a zone been chosen yet" (e.g. deliveries.js's
// Tenant/Rider dropdowns) need to tell "nothing picked" apart from
// "deliberately picked All" — both used to collapse to the same falsy 0,
// so choosing All incorrectly still tripped the "select a zone first" gate.
setAppId?.(null);
setLocoName?.('');
setPage?.(0);
return;
}
const picked = (locations || []).find((l) => l.locationname === value);
if (picked) {
setAppId?.(picked.applocationid);
setLocoName?.(picked.locationname);
setPage?.(0);
}
};
return (
<Autocomplete
id="location-autocomplete"
options={locations || []}
// Controlled by the caller's `locaName` string (the selected zone's
// locationname) so an external reset (e.g. setLocoName('All')) is
// reflected in the input — previously uncontrolled, so callers
// passing `locaName` had no effect and the pill silently kept
// showing the last user-picked zone.
value={locaName ? (locations || []).find((l) => l.locationname === locaName) ?? null : null}
isOptionEqualToValue={(option, value) => option?.applocationid === value?.applocationid}
getOptionLabel={(option) => option?.locationname ?? ''}
PaperComponent={paperComponent}
sx={{ ...sx }}
onChange={(event, value, reason) => {
if (reason === 'clear') {
// null (not 0) — 0 is a real, meaningful selection here: the
// synthetic "All" option (fetchAppLocations in api.js appends
// { locationname: 'All', applocationid: 0 }). Callers that gate
// other pickers on "has a zone been chosen yet" (e.g.
// deliveries.js's Tenant/Rider dropdowns) need to tell "nothing
// picked" apart from "deliberately picked All" — both used to
// collapse to the same falsy 0, so choosing All incorrectly
// still tripped the "select a zone first" gate.
setAppId?.(null);
setLocoName?.('');
setPage?.(0);
} else if (value) {
setAppId?.(value.applocationid);
setLocoName?.(value.locationname);
setPage?.(0);
}
}}
renderInput={(params) =>
pill ? (
<TextField
{...params}
inputRef={ref}
placeholder={placeholder}
InputProps={{
...params.InputProps,
startAdornment: Adornment
}}
sx={{ ...pillSx, ...(textfieldSx || textfeildSx || {}) }}
/>
) : (
<TextField {...params} inputRef={ref} label={'Select Zones'} sx={{ ...(textfieldSx || textfeildSx || {}) }} />
)
}
return (
<div ref={wrapRef} style={{ width }}>
<Selector
label="Zone"
isLabelHidden
placeholder={placeholder}
options={options}
value={locaName || undefined}
onChange={handleChange}
hasClear
hasSearch
searchPlaceholder="Search zones…"
/>
);
}
);
</div>
);
});
LocationAutocomplete.displayName = 'LocationAutocomplete';
LocationAutocomplete.propTypes = {
locaName: PropTypes.string,
setAppId: PropTypes.func,
setLocoName: PropTypes.func,
setPage: PropTypes.func,
placeholder: PropTypes.string,
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
};
export default LocationAutocomplete;