- {countIsFetchingNext ? (
-
- · End of list ·
-
- )}
-
-
+ {countIsFetchingNext || countHasNext ? (
+
+ · End of list ·
+
+ )}
+
+ )}
+
+ {countIsFetchingNext ? (
+
+ · End of list ·
+
+ )}
+
+ ${(name || 'K').charAt(0).toUpperCase()}
`
+ html: `${(name || 'K').charAt(0).toUpperCase()}
`
});
};
@@ -3292,7 +3304,9 @@ const Dispatch = ({
{!embedded && (
-
D
+
+ 
+
Dispatch
{appLocations && appLocations.length > 0 && (
@@ -3637,8 +3651,10 @@ const Dispatch = ({
Batch
{/* Status-wise (time-field) filter is hidden for now per spec —
- bucketing is locked to `assigntime`. Restore this block to bring
- back the Delivered/Pending/Assigned/... dropdown.
+ bucketing is locked to `due` (expecteddeliverytime). Restore this
+ block to bring back the Delivered/Due/Assigned/... dropdown. Note
+ that picking "Assigned" there buckets on the booking's
+ last-modified column, which drifts through the day (see api.js).
)}
{row.applocationid ?? '—'}
{row.address || '—'}
{row.pincode || '—'}
- {row.status || '—'}
+ {row.status ?
(
/>
);
-import {
- MdAddShoppingCart,
- MdMyLocation,
- MdLocationOn,
- MdSchedule,
- MdLocalShipping,
- MdAttachMoney,
- MdNotes,
- MdCheckCircle,
- MdReceiptLong,
- MdInventory2,
- MdStraighten,
- MdPersonPin,
- MdPerson,
- MdHistoryToggleOff
-} from 'react-icons/md';
-
-const dtA = (c, suffix) => `${c}${suffix}`;
-const BRAND = '#000000';
-const BRAND_LIGHT = '#3A3A3A';
-
-// Soft card section header — coloured banner above each form section.
-const SectionHeader = ({ color, icon, title, subtitle, action }) => (
-
-
- {icon}
-
- {title}
- {subtitle && (
-
- {subtitle}
-
- )}
-
-
- {action}
-
-);
-
-// Section wrapper Paper used as the outer card for each form block.
-const SectionCard = ({ children, sx = {} }) => (
-
- {children}
-
-);
-
-// Some saved locations come back from GET /admin/tenants/:id/locations with
-// a blank locationname (live-confirmed, e.g. tenant 1's only location) — fall
-// back to the address rather than rendering a bare icon with no text.
-const locationDisplayName = (loc) => (loc?.locationname && loc.locationname.trim()) || loc?.address || 'Unnamed location';
-
-// Tenants with many locations in the same city (DailyGrubs has 23, all in
-// Coimbatore) made the old "(city)" suffix useless for telling them apart —
-// sort primary-first then alphabetically so the picker is at least ordered
-// the same way every time; the full address is shown per-option instead
-// (see renderOption on the Business Location Autocomplete below).
-const sortLocations = (locations) =>
- [...(locations || [])].sort((a, b) => {
- if (!!a.isprimary !== !!b.isprimary) return a.isprimary ? -1 : 1;
- return locationDisplayName(a).localeCompare(locationDisplayName(b));
- });
-
-// POST /admin/expressbooking's parcels[].itemcategory is a free-text string
-// (see express-console-api.md's sample body) — the old jupiter backend had a
-// real /utils/getsubcategories lookup table behind this dropdown, but that
-// endpoint has no equivalent on the new API (confirmed — see
-// src/pages/api/CLAUDE.md's list of retired-with-no-replacement resources).
-// This is a fixed, curated list rather than a live lookup so the dropdown
-// actually has options; `freeSolo` lets an operator type a category that
-// isn't on the list instead of being blocked.
-const PARCEL_CATEGORIES = ['Food', 'Groceries', 'Documents', 'Electronics', 'Clothing & Apparel', 'Medicines', 'Furniture', 'Others'];
-
-const Createorder1 = () => {
- // ================================================= || GoogleMaps (Drawer) || =================================================
- const [inputValue, setInputValue] = React.useState('');
- const [inputValue1, setInputValue1] = React.useState('');
- const [inputValue2, setInputValue2] = React.useState('');
- const [inputValue3, setInputValue3] = React.useState('');
- const [options, setOptions] = React.useState([]);
- const [options1, setOptions1] = React.useState([]);
- const loaded1 = React.useRef(false);
- const [mobilenumber, setMobilenumber] = useState('');
- const [emailaddress, setEmailaddress] = useState('');
- const [city, setCity] = useState('');
- const [city1, setCity1] = useState('');
- const [zipcode, setZipcode] = useState('');
- const [zipcode1, setZipcode1] = useState('');
- const [state, setState] = useState('');
- const [state1, setState1] = useState('');
- const [suburb, setSuburb] = useState('');
- const [suburb1, setSuburb1] = useState('');
- const [pickContactName, setPickContactName] = useState('');
- const [dropContactName, setDropContactName] = useState('');
- const [pickdoorno, setPickDoorno] = useState('');
- const [dropDoorno, setDropDoorno] = useState('');
- const [pickLandmark, setPickLandmark] = useState('');
- const [dropLandmark, setDropLandmark] = useState('');
- const [latlong, setLatlong] = useState({});
- const [latlong1, setLatlong1] = useState({});
- const autocompleteService = useRef(null);
- const [tenanatLocoId, setTenanatLocoId] = useState(localStorage.getItem('locationid'));
- const [isLocation, setIsLocation] = useState(false);
- // Drives what shows in place of the Business Location picker. A toast alone
- // wasn't enough — it's easy to miss, and an empty Autocomplete with no
- // toast visible reads as "broken" with zero explanation. This makes the
- // reason a persistent, visible message instead.
- const [locationsStatus, setLocationsStatus] = useState('loading');
- const textFieldRef1 = useRef(null);
- const textFieldRef2 = useRef(null);
- const [collectionamt, setCollectionamt] = useState(0);
- const [quantity, setQuantity] = useState(1);
-
- const handleOkClick1 = () => {
- // Set focus back to the text field after clicking the "OK" chip
- if (textFieldRef1.current) {
- textFieldRef1.current.focus();
- }
- };
-
- const handleOkClick2 = () => {
- // Set focus back to the text field after clicking the "OK" chip
- if (textFieldRef2.current) {
- textFieldRef2.current.focus();
- }
- };
-
- const top100Films = [
- { label: 'The Shawshank Redemption', year: 1994 },
- { label: 'The Godfather', year: 1972 },
- { label: 'The Godfather: Part II', year: 1974 },
- { label: 'The Dark Knight', year: 2008 },
- { label: '12 Angry Men', year: 1957 }
- ];
-
- const appId = localStorage.getItem('applocationid');
- const navigate = useNavigate();
- const [open, setOpen] = useState({});
- const [open1, setOpen1] = useState('');
- const [open2, setOpen2] = useState(false);
- const [open3, setOpen3] = useState(false);
- const [open4, setOpen4] = useState(false);
- const [shift, setShift] = useState(1);
- const [clientlist, setClientlist] = useState([]);
- const [clientdetail, setClientdetail] = useState([]);
- const [eventname, setEventname] = useState('');
- const [startdate, setStartdate] = useState(dayjs().format('MM-DD-YYYY'));
- const [enddate, setEnddate] = useState(dayjs().add(1, 'day').format('MM-DD-YYYY'));
- // const [starttime, setStatrttime] = useState(`${dayjs().format('MM-DD-YYYY')} 08:00:00`);
- const [starttime, setStatrttime] = useState();
- // const [endtime, setEndtime] = useState(`${dayjs().format('MM-DD-YYYY')} 20:00:00`);
- const [endtime, setEndtime] = useState();
- const [timeslotarr, setTimeslotarr] = useState([]);
- const [currentsno, setCurrentsno] = useState('');
- const [roleoptions, setRoleoptions] = useState([]);
- const theme = useTheme();
- const [otherinstructions, setOtherinstructions] = useState('');
- const [attireslist, setAttireslist] = useState([]);
- const [serviceaddonslist, setServiceaddonslist] = useState([]);
- const [orderaddonobj, setOrderaddonobj] = useState([]);
- const [stafflist, setStafflist] = useState([]);
- const [loading2, setLoading2] = useState(false);
- const [loading, setLoading] = useState(false);
- const [shiftarr, setShiftarr] = useState([]);
- const [shiftarr1, setShiftarr1] = useState([]);
- const [orderarr, setOrderarr] = useState([]);
- const [alertmessage, setAlertmessage] = useState('');
- const [tabstatus, setTabstatus] = useState('');
- const [tenantinfo, setTenantinfo] = useState({});
- const [searchword, setSearchword] = useState('');
- const [clientdetailarr, setClientdetailarr] = useState([]);
- const [admintoken, setAdmintoken] = useState();
- const [tenantlocationlist, setTenantlocationlist] = useState([]);
- const [tenant, setTenant] = useState({});
- const [clientinfo, setClientinfo] = useState({});
- const [selectedtime, setSelectedtime] = useState('');
- const [tenantlist, setTenantlist] = useState([]);
- const [tenantid, setTenantid] = useState();
- const [tenantlocation, setTenantlocation] = useState('');
- const [pickupswitch, setPickupswitch] = useState(true);
- const [deliverytype, setDeliverytype] = useState('B');
- const [dropswitch, setDropswitch] = useState(false);
- 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 [category, setCategory] = useState(null);
- const [weight, setWeight] = useState('');
- // Per express-console-api.md's "Tenant scoping" section: token tenantid
- // 0/null means Doormile's own staff, who can see/act on every tenant —
- // NOT an error state. A client (tenant) login carries a real tenantid and
- // never needs this picker at all. loggedInTenantId is what's actually on
- // the account; selectedTenantId is what the page operates as right now
- // (auto-filled for a client login, chosen from the picker for staff).
- const loggedInTenantId = localStorage.getItem('tenantid');
- const isStaffLogin = !loggedInTenantId || loggedInTenantId === '0';
- const [selectedTenantId, setSelectedTenantId] = useState(isStaffLogin ? '' : loggedInTenantId);
- const [staffTenantList, setStaffTenantList] = useState([]);
- const [staffTenantListLoading, setStaffTenantListLoading] = useState(false);
- const tid = selectedTenantId;
- const [selectedCatChip, setSelectedCatChip] = useState(null);
- const [isCustomerOpen, setIsCustomerOpen] = useState(false);
- const [searchCustList, setSearchCustList] = useState('');
- const [customerlist, setCustomerlist] = useState([]);
- const [pickCust, setPickCust] = useState({});
- const [dropCust, setDropCust] = useState({});
- 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 [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 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 () => {
- try {
- const pricing = (await getAdminPricing()) || [];
- // tid comes from localStorage (always a string) but pricing.tenantid is
- // numeric — a strict === here never matched, so basePrice/pricePerKm/
- // minKm stayed at their 0 defaults and every order priced at ₹0.
- const match = pricing.find((p) => String(p.tenantid) === String(tid));
- if (match) {
- setBasePrice(match.baseprice);
- setPricePerKm(match.priceperkm);
- setMinKm(match.basedistance);
- }
- } catch (error) {
- // swallow — pricing defaults to 0 and stays there, handled upstream
- }
- };
- useEffect(() => {
- if (tid) fetchTenantPricing();
- }, [tid]);
-
- useEffect(() => {
- if (startPoint.latitude != 0 && startPoint.longitude != 0 && endPoint.latitude != 0 && endPoint.longitude != 0) {
- // getDistance();
- calculateDistance(startPoint, endPoint);
- }
- }, [startPoint, endPoint]);
-
- const getDistance = () => {
- const dist = geolib.getPreciseDistance(startPoint, endPoint, 1);
- const distanceInKm = (dist / 1000).toFixed(2);
- const roundedDistance = Math.round(distanceInKm);
- setDistance(roundedDistance.toFixed(2));
- if (roundedDistance < minKm) {
- setTotalCharge(basePrice);
- } else {
- const total = (roundedDistance - minKm) * pricePerKm + basePrice;
- setTotalCharge(total);
- }
- setShowDistance(true);
- if (roundedDistance > appLocaRadius) {
- setShowDistance(true);
- setOpen4(true);
- }
- };
-
- const calculateDistance = async (pickup, drop) => {
- try {
- const roundedDistance = await calculateDrivingDistance(pickup, drop);
- setDistance(roundedDistance);
-
- const total = calculateTotalCharge(roundedDistance, basePrice, pricePerKm, minKm);
- setTotalCharge(total);
-
- setShowDistance(true);
- if (roundedDistance > appLocaRadius) {
- setShowDistance(true);
- setOpen4(true);
- }
- } catch (error) {
- console.error('Error calculating distance:', error);
- }
- };
-
- 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);
- }
- });
-
- if (arr[0]) {
- setOrderarr([
- {
- sno: 1,
- address: '',
- customerid: '',
- deliverytime: dayjs(arr[0]) || '',
- deliverylocationid: '',
- clientname: '',
- contactno: '',
- latitude: '',
- longitude: ''
- }
- ]);
- }
- }
- }, [timeslotarr]);
-
- useEffect(() => {
- if (searchword) {
- let arr = clientdetail.filter((val) => {
- return (
- val.address.toLowerCase().includes(searchword.toLowerCase()) ||
- val.firstname.toLowerCase().includes(searchword.toLowerCase()) ||
- val.contactno.toLowerCase().includes(searchword.toLowerCase())
- );
- });
- setClientdetailarr([...arr]);
- } else {
- setClientdetailarr([...clientdetail]);
- }
- }, [searchword]);
-
- // ==================================================== || fetchtenantinfo || ====================================================
- const fetchtenantinfo = async () => {
- setLoading(true);
- try {
- const info = await getAdminTenant(tid);
- if (info) {
- setTenant(info);
- setTenantid(info.tenantid);
- fetchAppAdminTokens();
- }
- } catch (err) {
- // doormileAxios's response interceptor rejects with error.response.data
- // (not the raw axios error), so the message lives at err.message here.
- opentoast(err?.message || 'Could not load tenant info', 'error', 3000);
- } finally {
- setLoading(false);
- }
- };
- useEffect(() => {
- if (tid) fetchtenantinfo();
- }, [tid]);
-
- // ==================================================== || fetchTiming || ====================================================
- // No per-zone open/close-hours or geofence-radius endpoint in the new API
- // (applocationid/"zones" aren't a resource there at all — see fetchAppLocations
- // in pages/api/api.js). Falls back to a fixed 09:00–21:00 delivery window so
- // the order-row / time-slot picker below still has slots to initialise from,
- // and a generous default radius so the "too far" warning doesn't misfire.
- const fetchTiming = async () => {
- setLoading(true);
- const opentime = '09:00:00';
- const closetime = '21:00:00';
- setAppLocaLat(0);
- setAppLocaLng(0);
- setAppLocaRadius(100);
- setStatrttime(`${dayjs().format('MM-DD-YYYY')} ${opentime}`);
- setEndtime(`${dayjs().format('MM-DD-YYYY')} ${closetime}`);
- let arr = [];
- for (
- let i = `${dayjs().format('MM-DD-YYYY')} ${opentime}`;
- dayjs(`${dayjs().format('MM-DD-YYYY')} ${closetime} `).diff(i, 'm') >= 0;
- i = dayjs(i).add(30, 'm')
- ) {
- arr.push(i);
- }
- setTimeslotarr(arr);
- setLoading(false);
- };
- useEffect(() => {
- fetchTiming();
- }, []);
-
- // =============================================== || fetchAppAdminTokens (via appId) || ===============================================
- // No zone-admin-token lookup endpoint in the new API.
- const fetchAppAdminTokens = async () => setAdmintoken([]);
-
- 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 : 2000
- });
- };
-
- function closeAddressModal() {
- setOpen2(false);
- }
- function closetimemodal() {
- setOpen3(false);
- setCurrentsno('');
- }
-
- // =============================================== || createsubmitobj1 (create orders) || ===============================================
-
- const createsubmitobj2 = async () => {
- // POST /admin/expressbooking's schema is a single flat booking object
- // (tenantid, pickup* fields, customer_phone/name, delivery* fields,
- // service_option, finalprice, notes, parcels[]) — nothing like the old
- // pickup/drop/orders triple. The drop contact becomes the booking's
- // customer (new API models the delivery recipient as "the customer").
- //
- // Always send raw pickupaddress/pickuppincode/pickupcity/pickuplatitude/
- // pickuplongitude, even when a saved location was picked (the Business
- // Location Autocomplete + gettenantlocations()'s single-location
- // auto-select both copy the chosen location's fields into pickCust) —
- // live-confirmed the pickuplocationid shortcut currently 500s on
- // POST /admin/expressbooking (backend bug, reported; not something a
- // frontend fix can work around other than avoiding the field).
- const arr = {
- tenantid: Number(tid) || tenant.tenantid,
- pickupaddress: pickCust.address || '',
- pickuppincode: pickCust.postcode || '',
- pickupcity: pickCust.city || '',
- pickuplatitude: Number(pickCust.latitude) || 0,
- pickuplongitude: Number(pickCust.longitude) || 0,
- customer_phone: dropCust.contactno || '',
- customer_name: dropCust.firstname || '',
- deliveryaddress: dropCust.address || '',
- deliverypincode: dropCust.postcode || '',
- deliverycity: dropCust.city || '',
- deliverylatitude: Number(dropCust.latitude) || 0,
- deliverylongitude: Number(dropCust.longitude) || 0,
- service_option: 'Normal',
- finalprice: +totalCharge.toFixed(2) || 0,
- notes: otherinstructions || '',
- // The parcel object has no numeric quantity field (confirmed against
- // express-console-api.md's schema) — "N items" is expressed by sending
- // N parcel entries, which is also how the Deliveries page already reads
- // it back (fetchDeliveries in api.js: `Quantity: b.parcels?.length`).
- // This previously always sent exactly one parcel regardless of what the
- // operator typed into the Quantity field, so it silently got dropped —
- // matching "I entered 5, deliveries page shows 1".
- parcels: Array.from({ length: Math.max(1, Number(quantity) || 1) }, () => ({
- itemcategory: category || 'General',
- itemdescription: 'Order',
- declaredvalue: +totalCharge.toFixed(2) || 0
- }))
- };
- if (!arr.tenantid) {
- opentoast('Pick a tenant before creating an order', 'warning', 2000);
- } else 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 {
- setLoading(true);
- try {
- const createRes = await createExpressBooking(arr);
- if (createRes.success) {
- enqueueSnackbar('Order Created Successfully', {
- variant: 'success',
- anchorOrigin: { vertical: 'top', horizontal: 'right' },
- autoHideDuration: 1000
- });
- navigate('/doormile/orders');
- } else {
- opentoast(createRes.message || 'Something went wrong, Cannot create order', 'warning');
- }
- } catch (error) {
- // Previously silent — a thrown error here (network failure, CityGate
- // rejection, validation error) left the operator with no feedback at
- // all and a permanently stuck loading spinner (setLoading(false) was
- // only reachable on the success path). doormileAxios's response
- // interceptor already unwraps to error.response.data before
- // rejecting, so the message lives at error.message, not
- // error.response.data.message.
- opentoast(error?.message || 'Cannot create order', 'error', 3000);
- } finally {
- setLoading(false);
- }
- }
- };
-
- const clicked1 = (e) => {
- setShift(e);
- };
-
- const dialogopen = (i, result) => {
- setOpen({ shiftsno: result.sno, sno: i.sno });
- };
- const dialogclose = () => {
- setOpen('');
- };
- // ========================================================= || clientdetails || =========================================================
- // GET /admin/customers (B2C directory), not /admin/tenantcustomers — that
- // resource is a manually-added contact book with nothing in it unless
- // someone explicitly creates an entry. This one is confirmed to auto-grow:
- // POST /admin/expressbooking's customer_phone/customer_name "creates a
- // Guest customer if unknown" (see express-console-api.md), so every order
- // placed lands a reusable contact here — matching the old jupiter flow
- // where placing an order (customerid: 0) auto-saved the customer too.
- // Field shape is { appcustomerid, createdat, email, name, phone,
- // totalbookings } — a single `name`, not firstname/lastname, and still no
- // address at all (see the Saved Contacts dialog below).
- const clientdetails = async () => {
- setLoading2(true);
- try {
- const customers = (await getAdminCustomers()) || [];
- const filtered = searchCustList
- ? customers.filter((val) => val.name?.toLowerCase().includes(searchCustList.toLowerCase()) || val.phone?.includes(searchCustList))
- : customers;
- setClientdetail(filtered);
- setCustomerlist(filtered);
- setClientdetailarr(filtered.map((val) => ({ label: `${val.name} | ${val.phone}`, ...val })));
- } catch (err) {
- opentoast('server error', 'warning');
- } finally {
- setLoading2(false);
- }
- };
- useEffect(() => {
- clientdetails();
- }, [searchCustList.length > 3, searchCustList == '']);
- // ================================================== || sendnotifications || ==================================================
- // No bulk-notify endpoint in the new API — never actually called (dead in
- // the original code too, only referenced from a commented-out call site).
- const sendnotifications = async () => {};
- // ============================================= || Address Autocomplete (pick) || =============================================
- const handlePickPlaceSelected = (place) => {
- setInputValue2(`${place.name}, ${place.formatted_address}`);
- // 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()
- });
- };
- // ============================================= || Address Autocomplete (Drop) || =============================================
-
- const handleDropPlaceSelected = (place) => {
- setInputValue3(`${place.name}, ${place.formatted_address}`);
- 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()
- });
- };
-
- // ============================================= || gettenantlocations (branches) || =============================================
- const gettenantlocations = async () => {
- if (!tid) {
- // Staff login (express-console-api.md: token tenantid 0/null = Doormile
- // staff, who can act on any tenant) with no tenant picked yet — the
- // picker UI covers this, not an error. A genuinely tenant-less,
- // non-staff account can't get here at all (isStaffLogin would be true).
- setLocationsStatus('no-tenant');
- return;
- }
- setLocationsStatus('loading');
- try {
- const locations = (await getTenantLocations(tid)) || [];
- setTenantlocations(locations);
- if (locations.length === 1) {
- setLocationsStatus('ready');
- setIsLocation(true);
- setTenanatLocoId(locations[0].tenantlocationid);
- const loc = locations[0];
- setPickCust((prev) => ({
- ...prev,
- address: loc.address || '',
- suburb: loc.locationname || loc.city || '',
- city: loc.city || '',
- postcode: loc.pincode || '',
- landmark: loc.address || '',
- latitude: loc.latitude,
- longitude: loc.longitude
- }));
- } else if (locations.length === 0) {
- // No saved locations for this tenant — every pickup field below is a
- // plain manual TextField anyway, so let the operator fill it in by
- // hand instead of leaving the form permanently disabled.
- setLocationsStatus('empty');
- setIsLocation(true);
- opentoast('No saved business locations — enter pickup details manually below', 'info', 3000);
- } else {
- setLocationsStatus('ready');
- }
- } catch (err) {
- // doormileAxios's response interceptor rejects with error.response.data
- // (not the raw axios error) — so the message is err.message here, not
- // err.response.data.message (that was reading through a layer that no
- // longer exists at this point and always fell back to the generic text).
- setTenantlocations([]);
- setLocationsStatus('error');
- opentoast(err?.message || 'Could not load business locations', 'error', 4000);
- }
- };
- useEffect(() => {
- gettenantlocations();
- }, [tid]);
-
- // ============================================= || fetchStaffTenantList (Doormile staff picker) || =============================================
- // Only staff logins (loggedInTenantId blank/0) need this — a client login's
- // tenant is already fixed by their token and this never fetches for them.
- useEffect(() => {
- if (!isStaffLogin) return;
- setStaffTenantListLoading(true);
- getAdminTenants()
- .then((tenants) => setStaffTenantList((tenants || []).filter((t) => t.status === 'Active')))
- .catch((err) => {
- opentoast(err?.message || 'Could not load tenant list', 'error', 4000);
- })
- .finally(() => setStaffTenantListLoading(false));
- }, []);
-
- return (
- <>
- {loading &&
-
-
-
-
-
-
-
-
- Create Order
-
-
-
- Fill pickup, drop, schedule & pricing details
-
-
-
-
-
- {locationsStatus === 'loading' ? (
-
- Loading business locations…
-
- ) : locationsStatus === 'no-tenant' && isStaffLogin ? (
- // Staff login (express-console-api.md: token tenantid 0/null
- // = "Doormile's own staff... sees everything, all tenants")
- // — pick which tenant to create this order for. Everything
- // downstream (pricing, saved locations, the booking's own
- // tenantid) is keyed off `tid`, which equals selectedTenantId.
- option?.tenantname || ''}
- isOptionEqualToValue={(option, value) => option?.tenantid === value?.tenantid}
- PaperComponent={SoftPaper}
- sx={{ width: { xs: '100%', sm: 300 } }}
- size="small"
- onChange={(event, value) => setSelectedTenantId(value ? String(value.tenantid) : '')}
- renderInput={(params) => (
-
-
-
-
- )
- }}
- sx={{
- '& .MuiOutlinedInput-root': {
- borderRadius: DT.radiusPill + 'px',
- bgcolor: '#fff',
- fontWeight: 600,
- '& fieldset': { borderColor: edge(BRAND), borderWidth: 1.5 },
- '&:hover fieldset': { borderColor: BRAND },
- '&.Mui-focused': { boxShadow: `0 0 0 3px ${ring(BRAND)}` },
- '&.Mui-focused fieldset': { borderColor: BRAND, borderWidth: 2 }
- }
- }}
- />
- )}
- />
- ) : locationsStatus === 'no-tenant' ? (
-
- This login has no tenant assigned — sign in as a tenant user
-
- ) : locationsStatus === 'error' ? (
-
- Could not load business locations — tap to retry
-
- ) : locationsStatus === 'empty' ? (
-
- No saved locations — enter pickup details manually below
-
- ) : tenantLocations.length === 1 ? (
-
-
- ) : (
- locationDisplayName(option)}
- isOptionEqualToValue={(option, value) => option?.tenantlocationid === value?.tenantlocationid}
- renderOption={(props, option) => (
-
-
-
-
- {locationDisplayName(option)}
-
- {option.isprimary && (
-
- PRIMARY
-
- )}
-
-
- {option.address || option.city || ''}
-
-
-
- )}
- PaperComponent={SoftPaper}
- sx={{ width: { xs: '100%', sm: 320 } }}
- size="small"
- renderInput={(params) => (
-
-
-
-
- )
- }}
- sx={{
- '& .MuiOutlinedInput-root': {
- borderRadius: DT.radiusPill + 'px',
- bgcolor: '#fff',
- fontWeight: 600,
- '& fieldset': { borderColor: edge(BRAND), borderWidth: 1.5 },
- '&:hover fieldset': { borderColor: BRAND },
- '&.Mui-focused': { boxShadow: `0 0 0 3px ${ring(BRAND)}` },
- '&.Mui-focused fieldset': { borderColor: BRAND, borderWidth: 2 }
- }
- }}
- />
- )}
- onChange={(event, value, reason) => {
- if (value) {
- setTenanatLocoId(value.tenantlocationid);
- setIsLocation(true);
- // Also fill pickCust's raw address fields from the
- // picked location — POST /admin/expressbooking's
- // pickuplocationid currently 500s server-side (live-
- // confirmed), so createsubmitobj2() always sends raw
- // pickup* fields instead; this keeps that path working
- // when a saved location is chosen here.
- setPickCust((prev) => ({
- ...prev,
- address: value.address || '',
- suburb: value.locationname || value.city || '',
- city: value.city || '',
- postcode: value.pincode || '',
- landmark: value.address || '',
- latitude: value.latitude,
- longitude: value.longitude
- }));
- }
- if (reason === 'clear') {
- setIsLocation(false);
- }
- }}
- />
- )}
-
-
-
-
-
-
-
-
-
- {/* ================================================= || Pickup || ================================================= */}
-
-
-
-
-
-
- {/* ====================================== ||Contact Name (pick) || ====================================== */}
-
-
-
- )
- }}
- variant="outlined"
- label="Contact Name"
- value={pickCust.firstname}
- onChange={(e) => {
- setPickCust({ ...pickCust, firstname: e.target.value });
- }}
- />
-
- {/* ====================================== ||Contact Number(pick) || ====================================== */}
-
-
-
- {/* ====================================== || Address (pick) || ====================================== */}
-
-
- {addId1 == 0 ? (
- {
- setAddId1(0);
- setPickCust({
- ...pickCust,
- // firstname: '',
- // contactno: '',
- doorno: '',
- suburb: '',
- city: '',
- postcode: '',
- landmark: ''
- });
- setShowDistance(false);
- setStartPoint({ latitude: 0, longitude: 0 });
- }}
- >
-
-
-
- {/* ====================================== ||Door No (pick) || ====================================== */}
-
-
-
- {/* ====================================== || Suburb (pick) || ====================================== */}
-
-
-
- {/* ====================================== || City (pick) || ====================================== */}
-
-
-
- {/* ====================================== || postcode (pick) || ====================================== */}
-
-
-
- {/* ====================================== || Landmark (pick) || ====================================== */}
-
-
-
- {/* ====================================== ||Checkbox save for later (pick) || ====================================== */}
- {showCheck1 == 1 && (
-
-
- {
- setIsNumChange1(e.target.checked ? 1 : 0);
- }}
- />
- }
- label="Save For Later"
- />
-
-
- )}
-
-
-
-
-
-
- {/* ================================================= || Drop || ================================================= */}
-
-
-
-
-
-
-
- Drop Details
-
-
- {/* Customer */}
- {/* {
- if (val) {
- setDropswitch(true);
- setClientinfo({});
- } else {
- setDropswitch(false);
- setClientinfo({});
- }
- }}
- size="small"
- />
- Business */}
-
-
-
- {/* new2 */}
- {/* `${option.firstname} (${option.contactno})`}
- sx={{ mt: 0, mb: 1 }}
- renderInput={(params) => (
- {
- setSearchCustList(e.target.value);
- }}
- InputProps={{
- ...params.InputProps,
- inputProps: {
- ...params.inputProps,
- maxLength: 10
- }
- }}
- />
- )}
- onChange={(e, val, reason) => {
- if (val) {
- if (pickCust.customerid === val.customerid) {
- opentoast('Select Another Customer', 'error');
- setSearchCustList('');
- } else {
- setDropCust(val);
- setEndPoint({ latitude: val.latitude, longitude: val.longitude });
- setAddId2(1);
- }
- }
- if (reason == 'clear') {
- setSearchCustList('');
- }
- }}
- noOptionsText={
- /^[0-9]{10}$/.test(searchCustList) ? (
-
- {
- setDropCust({ ...dropCust, contactno: searchCustList });
- handleOkClick2();
- setSearchCustList('');
- }}
- />
-
- ) : null
- }
- /> */}
-
-
-
-
- {/* ====================================== ||Contact Name (drop) || ====================================== */}
-
-
-
- {/* ====================================== ||Contact Number (drop) || ====================================== */}
-
-
-
-
-
- {addId2 == 0 ? (
- {
- setAddId2(0);
- setDropCust({
- ...dropCust,
- firstname: '',
- contactno: '',
- doorno: '',
- suburb: '',
- city: '',
- postcode: '',
- landmark: ''
- });
- setShowDistance(false);
- setEndPoint({ latitude: 0, longitude: 0 });
- }}
- >
-
-
-
- {/* ====================================== ||Door No (drop) || ====================================== */}
-
-
-
- {/* ====================================== ||Suburb (drop) || ====================================== */}
-
-
-
- {/* ====================================== ||City (drop) || ====================================== */}
-
-
-
-
- {/* ====================================== ||Postcode (drop) || ====================================== */}
-
-
-
- {/* ====================================== ||Landmark (drop) || ====================================== */}
-
-
-
- {/* ====================================== ||Checkbox save for later (drop) || ====================================== */}
- {showCheck2 == 1 && (
-
-
- {
- setIsNumChange2(e.target.checked ? 1 : 0);
- }}
- />
- }
- label="Save For Later"
- />
-
-
- )}
-
-
- {/*
-
- */}
-
-
-
-
- {/* ================================================= || Time || ================================================= */}
-
-
-
-
-
-
- Date
-
-
- {
- let dateres11 = dayjs().diff(dayjs(`${dayjs(e).format('YYYY-MM-DD')}`), 'd');
- setSelectedtime('');
- if (dateres11 <= 0) {
- setStartdate(e);
- setEnddate(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);
- }
- });
- if (arr[0]) {
- setOrderarr([
- {
- sno: 1,
- address: '',
- customerid: '',
- deliverytime: dayjs(arr[0]) || '',
- deliverylocationid: '',
- clientname: '',
- contactno: '',
- latitude: '',
- longitude: ''
- }
- ]);
- } else {
- setOrderarr([]);
- }
- } else {
- setAlertmessage('choose Upcoming Date');
- opentoast('choose Upcoming Date', 'warning');
- setStartdate(NaN);
- }
- }}
- value={dayjs(startdate)}
- sx={{ width: '100%', mt: 2 }}
- disablePast
- />
-
-
- Time
-
-
-
- {timeslotarr.map((val, index) => {
- if (
- dayjs().diff(dayjs(`${dayjs(startdate).format('MM-DD-YYYY')} ${dayjs(val).format('HH:mm:ss')}`), 'm') <=
- 0
- ) {
- const active = dayjs(selectedtime).format('HH:mm') == dayjs(val).format('HH:mm');
- return (
- {
- if (distance > appLocaRadius) {
- setOpen4(true);
- } else if (showDistance) {
- setSelectedtime(val);
- } else {
- opentoast('Select Pickup and Drop', 'error');
- }
- }}
- sx={{
- display: 'inline-flex',
- alignItems: 'center',
- gap: 0.5,
- px: 1.25,
- py: 0.5,
- cursor: 'pointer',
- borderRadius: 999,
- border: `1.5px solid ${active ? '#f59e0b' : edge('#f59e0b')}`,
- bgcolor: active ? '#f59e0b' : tint('#f59e0b'),
- color: active ? '#fff' : '#f59e0b',
- fontSize: 12,
- fontWeight: 800,
- transition: 'all 0.15s',
- boxShadow: active ? `0 6px 18px ${ring('#f59e0b')}` : 'none',
- '&:hover': {
- borderColor: '#f59e0b',
- boxShadow: active ? `0 6px 18px ${ring('#f59e0b')}` : `0 0 0 3px ${ring('#f59e0b')}`
- }
- }}
- >
-
- );
- }
- })}
-
-
-
-
-
-
-
-
-
-
- {showDistance && (
-
-
-
-
-
-
- )}
-
- Category
-
- 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);
- }}
- />
-
-
-
-
-
-
-
-
- {/* ============================== || Cash Collect & Quantity || ============================== */}
-
-
-
-
- setCollectionamt(e.target.value)}
- inputProps={{ min: 0 }}
- />
-
-
- setQuantity(e.target.value)}
- inputProps={{ min: 1 }}
- />
-
-
-
-
-
- {/* ================================================= || Notes || ================================================= */}
-
-
- setOtherinstructions(e.target.value)}
- />
-
- {!showDistance && (
-
- Set pickup & drop to enable
-
- )}
- }
- onClick={createsubmitobj2}
- sx={{
- borderRadius: 999,
- px: 3,
- py: 1,
- fontWeight: 800,
- textTransform: 'none',
- fontSize: 13,
- background: `linear-gradient(135deg, ${BRAND} 0%, ${BRAND_LIGHT} 100%)`,
- color: '#fff',
- boxShadow: `0 8px 22px ${ring(BRAND)}`,
- transition: 'all 0.18s',
- '&:hover': {
- background: `linear-gradient(135deg, #4D1C61 0%, ${BRAND} 100%)`,
- transform: 'translateY(-1px)',
- boxShadow: `0 10px 26px ${ring(BRAND)}`
- },
- '&.Mui-disabled': {
- background: DT.divider,
- color: DT.textMuted,
- boxShadow: 'none'
- }
- }}
- >
- {loading ?
-
-
-
-
-
- {/* */}
-
- {/* ============================================= || saved address Dialog || ============================================= */}
-
-
-
-
-
- );
-};
-
-export default Createorder1;
+import {
+ MdAddShoppingCart,
+ MdMyLocation,
+ MdLocationOn,
+ MdSchedule,
+ MdLocalShipping,
+ MdAttachMoney,
+ MdNotes,
+ MdCheckCircle,
+ MdReceiptLong,
+ MdInventory2,
+ MdStraighten,
+ MdPersonPin,
+ MdPerson,
+ MdHistoryToggleOff
+} from 'react-icons/md';
+
+const dtA = (c, suffix) => `${c}${suffix}`;
+const BRAND = '#000000';
+const BRAND_LIGHT = '#3A3A3A';
+
+// Soft card section header — coloured banner above each form section.
+const SectionHeader = ({ color, icon, title, subtitle, action }) => (
+
+
+ {icon}
+
+ {title}
+ {subtitle && (
+
+ {subtitle}
+
+ )}
+
+
+ {action}
+
+);
+
+// Section wrapper Paper used as the outer card for each form block.
+const SectionCard = ({ children, sx = {} }) => (
+
+ {children}
+
+);
+
+// Some saved locations come back from GET /admin/tenants/:id/locations with
+// a blank locationname (live-confirmed, e.g. tenant 1's only location) — fall
+// back to the address rather than rendering a bare icon with no text.
+const locationDisplayName = (loc) => (loc?.locationname && loc.locationname.trim()) || loc?.address || 'Unnamed location';
+
+// Tenants with many locations in the same city (DailyGrubs has 23, all in
+// Coimbatore) made the old "(city)" suffix useless for telling them apart —
+// sort primary-first then alphabetically so the picker is at least ordered
+// the same way every time; the full address is shown per-option instead
+// (see renderOption on the Business Location Autocomplete below).
+const sortLocations = (locations) =>
+ [...(locations || [])].sort((a, b) => {
+ if (!!a.isprimary !== !!b.isprimary) return a.isprimary ? -1 : 1;
+ return locationDisplayName(a).localeCompare(locationDisplayName(b));
+ });
+
+// POST /admin/expressbooking's parcels[].itemcategory is a free-text string
+// (see express-console-api.md's sample body) — the old jupiter backend had a
+// real /utils/getsubcategories lookup table behind this dropdown, but that
+// endpoint has no equivalent on the new API (confirmed — see
+// src/pages/api/CLAUDE.md's list of retired-with-no-replacement resources).
+// This is a fixed, curated list rather than a live lookup so the dropdown
+// actually has options; `freeSolo` lets an operator type a category that
+// isn't on the list instead of being blocked.
+const PARCEL_CATEGORIES = ['Food', 'Groceries', 'Documents', 'Electronics', 'Clothing & Apparel', 'Medicines', 'Furniture', 'Others'];
+
+const Createorder1 = () => {
+ // ================================================= || GoogleMaps (Drawer) || =================================================
+ const [inputValue, setInputValue] = React.useState('');
+ const [inputValue1, setInputValue1] = React.useState('');
+ const [inputValue2, setInputValue2] = React.useState('');
+ const [inputValue3, setInputValue3] = React.useState('');
+ const [options, setOptions] = React.useState([]);
+ const [options1, setOptions1] = React.useState([]);
+ const loaded1 = React.useRef(false);
+ const [mobilenumber, setMobilenumber] = useState('');
+ const [emailaddress, setEmailaddress] = useState('');
+ const [city, setCity] = useState('');
+ const [city1, setCity1] = useState('');
+ const [zipcode, setZipcode] = useState('');
+ const [zipcode1, setZipcode1] = useState('');
+ const [state, setState] = useState('');
+ const [state1, setState1] = useState('');
+ const [suburb, setSuburb] = useState('');
+ const [suburb1, setSuburb1] = useState('');
+ const [pickContactName, setPickContactName] = useState('');
+ const [dropContactName, setDropContactName] = useState('');
+ const [pickdoorno, setPickDoorno] = useState('');
+ const [dropDoorno, setDropDoorno] = useState('');
+ const [pickLandmark, setPickLandmark] = useState('');
+ const [dropLandmark, setDropLandmark] = useState('');
+ const [latlong, setLatlong] = useState({});
+ const [latlong1, setLatlong1] = useState({});
+ const autocompleteService = useRef(null);
+ const [tenanatLocoId, setTenanatLocoId] = useState(localStorage.getItem('locationid'));
+ const [isLocation, setIsLocation] = useState(false);
+ // Drives what shows in place of the Business Location picker. A toast alone
+ // wasn't enough — it's easy to miss, and an empty Autocomplete with no
+ // toast visible reads as "broken" with zero explanation. This makes the
+ // reason a persistent, visible message instead.
+ const [locationsStatus, setLocationsStatus] = useState('loading');
+ const textFieldRef1 = useRef(null);
+ const textFieldRef2 = useRef(null);
+ const [collectionamt, setCollectionamt] = useState(0);
+ const [quantity, setQuantity] = useState(1);
+
+ const handleOkClick1 = () => {
+ // Set focus back to the text field after clicking the "OK" chip
+ if (textFieldRef1.current) {
+ textFieldRef1.current.focus();
+ }
+ };
+
+ const handleOkClick2 = () => {
+ // Set focus back to the text field after clicking the "OK" chip
+ if (textFieldRef2.current) {
+ textFieldRef2.current.focus();
+ }
+ };
+
+ const top100Films = [
+ { label: 'The Shawshank Redemption', year: 1994 },
+ { label: 'The Godfather', year: 1972 },
+ { label: 'The Godfather: Part II', year: 1974 },
+ { label: 'The Dark Knight', year: 2008 },
+ { label: '12 Angry Men', year: 1957 }
+ ];
+
+ const appId = localStorage.getItem('applocationid');
+ const navigate = useNavigate();
+ const [open, setOpen] = useState({});
+ const [open1, setOpen1] = useState('');
+ const [open2, setOpen2] = useState(false);
+ const [open3, setOpen3] = useState(false);
+ const [open4, setOpen4] = useState(false);
+ const [shift, setShift] = useState(1);
+ const [clientlist, setClientlist] = useState([]);
+ const [clientdetail, setClientdetail] = useState([]);
+ const [eventname, setEventname] = useState('');
+ const [startdate, setStartdate] = useState(dayjs().format('MM-DD-YYYY'));
+ const [enddate, setEnddate] = useState(dayjs().add(1, 'day').format('MM-DD-YYYY'));
+ // const [starttime, setStatrttime] = useState(`${dayjs().format('MM-DD-YYYY')} 08:00:00`);
+ const [starttime, setStatrttime] = useState();
+ // const [endtime, setEndtime] = useState(`${dayjs().format('MM-DD-YYYY')} 20:00:00`);
+ const [endtime, setEndtime] = useState();
+ const [timeslotarr, setTimeslotarr] = useState([]);
+ const [currentsno, setCurrentsno] = useState('');
+ const [roleoptions, setRoleoptions] = useState([]);
+ const theme = useTheme();
+ const [otherinstructions, setOtherinstructions] = useState('');
+ const [attireslist, setAttireslist] = useState([]);
+ const [serviceaddonslist, setServiceaddonslist] = useState([]);
+ const [orderaddonobj, setOrderaddonobj] = useState([]);
+ const [stafflist, setStafflist] = useState([]);
+ const [loading2, setLoading2] = useState(false);
+ const [loading, setLoading] = useState(false);
+ const [shiftarr, setShiftarr] = useState([]);
+ const [shiftarr1, setShiftarr1] = useState([]);
+ const [orderarr, setOrderarr] = useState([]);
+ const [alertmessage, setAlertmessage] = useState('');
+ const [tabstatus, setTabstatus] = useState('');
+ const [tenantinfo, setTenantinfo] = useState({});
+ const [searchword, setSearchword] = useState('');
+ const [clientdetailarr, setClientdetailarr] = useState([]);
+ const [admintoken, setAdmintoken] = useState();
+ const [tenantlocationlist, setTenantlocationlist] = useState([]);
+ const [tenant, setTenant] = useState({});
+ const [clientinfo, setClientinfo] = useState({});
+ const [selectedtime, setSelectedtime] = useState('');
+ const [tenantlist, setTenantlist] = useState([]);
+ const [tenantid, setTenantid] = useState();
+ const [tenantlocation, setTenantlocation] = useState('');
+ const [pickupswitch, setPickupswitch] = useState(true);
+ const [deliverytype, setDeliverytype] = useState('B');
+ const [dropswitch, setDropswitch] = useState(false);
+ 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 [category, setCategory] = useState(null);
+ const [weight, setWeight] = useState('');
+ // Per express-console-api.md's "Tenant scoping" section: token tenantid
+ // 0/null means Doormile's own staff, who can see/act on every tenant —
+ // NOT an error state. A client (tenant) login carries a real tenantid and
+ // never needs this picker at all. loggedInTenantId is what's actually on
+ // the account; selectedTenantId is what the page operates as right now
+ // (auto-filled for a client login, chosen from the picker for staff).
+ const loggedInTenantId = localStorage.getItem('tenantid');
+ const isStaffLogin = !loggedInTenantId || loggedInTenantId === '0';
+ const [selectedTenantId, setSelectedTenantId] = useState(isStaffLogin ? '' : loggedInTenantId);
+ const [staffTenantList, setStaffTenantList] = useState([]);
+ const [staffTenantListLoading, setStaffTenantListLoading] = useState(false);
+ const tid = selectedTenantId;
+ const [selectedCatChip, setSelectedCatChip] = useState(null);
+ const [isCustomerOpen, setIsCustomerOpen] = useState(false);
+ const [searchCustList, setSearchCustList] = useState('');
+ const [customerlist, setCustomerlist] = useState([]);
+ const [pickCust, setPickCust] = useState({});
+ const [dropCust, setDropCust] = useState({});
+ 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 [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 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 () => {
+ try {
+ const pricing = (await getAdminPricing()) || [];
+ // tid comes from localStorage (always a string) but pricing.tenantid is
+ // numeric — a strict === here never matched, so basePrice/pricePerKm/
+ // minKm stayed at their 0 defaults and every order priced at ₹0.
+ const match = pricing.find((p) => String(p.tenantid) === String(tid));
+ if (match) {
+ setBasePrice(match.baseprice);
+ setPricePerKm(match.priceperkm);
+ setMinKm(match.basedistance);
+ }
+ } catch (error) {
+ // swallow — pricing defaults to 0 and stays there, handled upstream
+ }
+ };
+ useEffect(() => {
+ if (tid) fetchTenantPricing();
+ }, [tid]);
+
+ useEffect(() => {
+ if (startPoint.latitude != 0 && startPoint.longitude != 0 && endPoint.latitude != 0 && endPoint.longitude != 0) {
+ // getDistance();
+ calculateDistance(startPoint, endPoint);
+ }
+ }, [startPoint, endPoint]);
+
+ const getDistance = () => {
+ const dist = geolib.getPreciseDistance(startPoint, endPoint, 1);
+ const distanceInKm = (dist / 1000).toFixed(2);
+ const roundedDistance = Math.round(distanceInKm);
+ setDistance(roundedDistance.toFixed(2));
+ if (roundedDistance < minKm) {
+ setTotalCharge(basePrice);
+ } else {
+ const total = (roundedDistance - minKm) * pricePerKm + basePrice;
+ setTotalCharge(total);
+ }
+ setShowDistance(true);
+ if (roundedDistance > appLocaRadius) {
+ setShowDistance(true);
+ setOpen4(true);
+ }
+ };
+
+ const calculateDistance = async (pickup, drop) => {
+ try {
+ const roundedDistance = await calculateDrivingDistance(pickup, drop);
+ setDistance(roundedDistance);
+
+ const total = calculateTotalCharge(roundedDistance, basePrice, pricePerKm, minKm);
+ setTotalCharge(total);
+
+ setShowDistance(true);
+ if (roundedDistance > appLocaRadius) {
+ setShowDistance(true);
+ setOpen4(true);
+ }
+ } catch (error) {
+ console.error('Error calculating distance:', error);
+ }
+ };
+
+ 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);
+ }
+ });
+
+ if (arr[0]) {
+ setOrderarr([
+ {
+ sno: 1,
+ address: '',
+ customerid: '',
+ deliverytime: dayjs(arr[0]) || '',
+ deliverylocationid: '',
+ clientname: '',
+ contactno: '',
+ latitude: '',
+ longitude: ''
+ }
+ ]);
+ }
+ }
+ }, [timeslotarr]);
+
+ useEffect(() => {
+ if (searchword) {
+ let arr = clientdetail.filter((val) => {
+ return (
+ val.address.toLowerCase().includes(searchword.toLowerCase()) ||
+ val.firstname.toLowerCase().includes(searchword.toLowerCase()) ||
+ val.contactno.toLowerCase().includes(searchword.toLowerCase())
+ );
+ });
+ setClientdetailarr([...arr]);
+ } else {
+ setClientdetailarr([...clientdetail]);
+ }
+ }, [searchword]);
+
+ // ==================================================== || fetchtenantinfo || ====================================================
+ const fetchtenantinfo = async () => {
+ setLoading(true);
+ try {
+ const info = await getAdminTenant(tid);
+ if (info) {
+ setTenant(info);
+ setTenantid(info.tenantid);
+ fetchAppAdminTokens();
+ }
+ } catch (err) {
+ // doormileAxios's response interceptor rejects with error.response.data
+ // (not the raw axios error), so the message lives at err.message here.
+ opentoast(err?.message || 'Could not load tenant info', 'error', 3000);
+ } finally {
+ setLoading(false);
+ }
+ };
+ useEffect(() => {
+ if (tid) fetchtenantinfo();
+ }, [tid]);
+
+ // ==================================================== || fetchTiming || ====================================================
+ // No per-zone open/close-hours or geofence-radius endpoint in the new API
+ // (applocationid/"zones" aren't a resource there at all — see fetchAppLocations
+ // in pages/api/api.js). Falls back to a fixed 09:00–21:00 delivery window so
+ // the order-row / time-slot picker below still has slots to initialise from,
+ // and a generous default radius so the "too far" warning doesn't misfire.
+ const fetchTiming = async () => {
+ setLoading(true);
+ const opentime = '09:00:00';
+ const closetime = '21:00:00';
+ setAppLocaLat(0);
+ setAppLocaLng(0);
+ setAppLocaRadius(100);
+ setStatrttime(`${dayjs().format('MM-DD-YYYY')} ${opentime}`);
+ setEndtime(`${dayjs().format('MM-DD-YYYY')} ${closetime}`);
+ let arr = [];
+ for (
+ let i = `${dayjs().format('MM-DD-YYYY')} ${opentime}`;
+ dayjs(`${dayjs().format('MM-DD-YYYY')} ${closetime} `).diff(i, 'm') >= 0;
+ i = dayjs(i).add(30, 'm')
+ ) {
+ arr.push(i);
+ }
+ setTimeslotarr(arr);
+ setLoading(false);
+ };
+ useEffect(() => {
+ fetchTiming();
+ }, []);
+
+ // =============================================== || fetchAppAdminTokens (via appId) || ===============================================
+ // No zone-admin-token lookup endpoint in the new API.
+ const fetchAppAdminTokens = async () => setAdmintoken([]);
+
+ 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 : 2000
+ });
+ };
+
+ function closeAddressModal() {
+ setOpen2(false);
+ }
+ function closetimemodal() {
+ setOpen3(false);
+ setCurrentsno('');
+ }
+
+ // =============================================== || createsubmitobj1 (create orders) || ===============================================
+
+ const createsubmitobj2 = async () => {
+ // POST /admin/expressbooking's schema is a single flat booking object
+ // (tenantid, pickup* fields, customer_phone/name, delivery* fields,
+ // service_option, finalprice, notes, parcels[]) — nothing like the old
+ // pickup/drop/orders triple. The drop contact becomes the booking's
+ // customer (new API models the delivery recipient as "the customer").
+ //
+ // Always send raw pickupaddress/pickuppincode/pickupcity/pickuplatitude/
+ // pickuplongitude, even when a saved location was picked (the Business
+ // Location Autocomplete + gettenantlocations()'s single-location
+ // auto-select both copy the chosen location's fields into pickCust) —
+ // live-confirmed the pickuplocationid shortcut currently 500s on
+ // POST /admin/expressbooking (backend bug, reported; not something a
+ // frontend fix can work around other than avoiding the field).
+ const arr = {
+ tenantid: Number(tid) || tenant.tenantid,
+ pickupaddress: pickCust.address || '',
+ pickuppincode: pickCust.postcode || '',
+ pickupcity: pickCust.city || '',
+ pickuplatitude: Number(pickCust.latitude) || 0,
+ pickuplongitude: Number(pickCust.longitude) || 0,
+ customer_phone: dropCust.contactno || '',
+ customer_name: dropCust.firstname || '',
+ deliveryaddress: dropCust.address || '',
+ deliverypincode: dropCust.postcode || '',
+ deliverycity: dropCust.city || '',
+ deliverylatitude: Number(dropCust.latitude) || 0,
+ deliverylongitude: Number(dropCust.longitude) || 0,
+ service_option: 'Normal',
+ finalprice: +totalCharge.toFixed(2) || 0,
+ notes: otherinstructions || '',
+ // The parcel object has no numeric quantity field (confirmed against
+ // express-console-api.md's schema) — "N items" is expressed by sending
+ // N parcel entries, which is also how the Deliveries page already reads
+ // it back (fetchDeliveries in api.js: `Quantity: b.parcels?.length`).
+ // This previously always sent exactly one parcel regardless of what the
+ // operator typed into the Quantity field, so it silently got dropped —
+ // matching "I entered 5, deliveries page shows 1".
+ parcels: Array.from({ length: Math.max(1, Number(quantity) || 1) }, () => ({
+ itemcategory: category || 'General',
+ itemdescription: 'Order',
+ declaredvalue: +totalCharge.toFixed(2) || 0
+ }))
+ };
+ if (!arr.tenantid) {
+ opentoast('Pick a tenant before creating an order', 'warning', 2000);
+ } else 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 {
+ setLoading(true);
+ try {
+ const createRes = await createExpressBooking(arr);
+ if (createRes.success) {
+ enqueueSnackbar('Order Created Successfully', {
+ variant: 'success',
+ anchorOrigin: { vertical: 'top', horizontal: 'right' },
+ autoHideDuration: 1000
+ });
+ navigate('/doormile/orders');
+ } else {
+ opentoast(createRes.message || 'Something went wrong, Cannot create order', 'warning');
+ }
+ } catch (error) {
+ // Previously silent — a thrown error here (network failure, CityGate
+ // rejection, validation error) left the operator with no feedback at
+ // all and a permanently stuck loading spinner (setLoading(false) was
+ // only reachable on the success path). doormileAxios's response
+ // interceptor already unwraps to error.response.data before
+ // rejecting, so the message lives at error.message, not
+ // error.response.data.message.
+ opentoast(error?.message || 'Cannot create order', 'error', 3000);
+ } finally {
+ setLoading(false);
+ }
+ }
+ };
+
+ const clicked1 = (e) => {
+ setShift(e);
+ };
+
+ const dialogopen = (i, result) => {
+ setOpen({ shiftsno: result.sno, sno: i.sno });
+ };
+ const dialogclose = () => {
+ setOpen('');
+ };
+ // ========================================================= || clientdetails || =========================================================
+ // GET /admin/customers (B2C directory), not /admin/tenantcustomers — that
+ // resource is a manually-added contact book with nothing in it unless
+ // someone explicitly creates an entry. This one is confirmed to auto-grow:
+ // POST /admin/expressbooking's customer_phone/customer_name "creates a
+ // Guest customer if unknown" (see express-console-api.md), so every order
+ // placed lands a reusable contact here — matching the old jupiter flow
+ // where placing an order (customerid: 0) auto-saved the customer too.
+ // Field shape is { appcustomerid, createdat, email, name, phone,
+ // totalbookings } — a single `name`, not firstname/lastname, and still no
+ // address at all (see the Saved Contacts dialog below).
+ const clientdetails = async () => {
+ setLoading2(true);
+ try {
+ const customers = (await getAdminCustomers()) || [];
+ const filtered = searchCustList
+ ? customers.filter((val) => val.name?.toLowerCase().includes(searchCustList.toLowerCase()) || val.phone?.includes(searchCustList))
+ : customers;
+ setClientdetail(filtered);
+ setCustomerlist(filtered);
+ setClientdetailarr(filtered.map((val) => ({ label: `${val.name} | ${val.phone}`, ...val })));
+ } catch (err) {
+ opentoast('server error', 'warning');
+ } finally {
+ setLoading2(false);
+ }
+ };
+ useEffect(() => {
+ clientdetails();
+ }, [searchCustList.length > 3, searchCustList == '']);
+ // ================================================== || sendnotifications || ==================================================
+ // No bulk-notify endpoint in the new API — never actually called (dead in
+ // the original code too, only referenced from a commented-out call site).
+ const sendnotifications = async () => {};
+ // ============================================= || Address Autocomplete (pick) || =============================================
+ const handlePickPlaceSelected = (place) => {
+ setInputValue2(`${place.name}, ${place.formatted_address}`);
+ // 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()
+ });
+ };
+ // ============================================= || Address Autocomplete (Drop) || =============================================
+
+ const handleDropPlaceSelected = (place) => {
+ setInputValue3(`${place.name}, ${place.formatted_address}`);
+ 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()
+ });
+ };
+
+ // ============================================= || gettenantlocations (branches) || =============================================
+ const gettenantlocations = async () => {
+ if (!tid) {
+ // Staff login (express-console-api.md: token tenantid 0/null = Doormile
+ // staff, who can act on any tenant) with no tenant picked yet — the
+ // picker UI covers this, not an error. A genuinely tenant-less,
+ // non-staff account can't get here at all (isStaffLogin would be true).
+ setLocationsStatus('no-tenant');
+ return;
+ }
+ setLocationsStatus('loading');
+ try {
+ const locations = (await getTenantLocations(tid)) || [];
+ setTenantlocations(locations);
+ if (locations.length === 1) {
+ setLocationsStatus('ready');
+ setIsLocation(true);
+ setTenanatLocoId(locations[0].tenantlocationid);
+ const loc = locations[0];
+ setPickCust((prev) => ({
+ ...prev,
+ address: loc.address || '',
+ suburb: loc.locationname || loc.city || '',
+ city: loc.city || '',
+ postcode: loc.pincode || '',
+ landmark: loc.address || '',
+ latitude: loc.latitude,
+ longitude: loc.longitude
+ }));
+ } else if (locations.length === 0) {
+ // No saved locations for this tenant — every pickup field below is a
+ // plain manual TextField anyway, so let the operator fill it in by
+ // hand instead of leaving the form permanently disabled.
+ setLocationsStatus('empty');
+ setIsLocation(true);
+ opentoast('No saved business locations — enter pickup details manually below', 'info', 3000);
+ } else {
+ setLocationsStatus('ready');
+ }
+ } catch (err) {
+ // doormileAxios's response interceptor rejects with error.response.data
+ // (not the raw axios error) — so the message is err.message here, not
+ // err.response.data.message (that was reading through a layer that no
+ // longer exists at this point and always fell back to the generic text).
+ setTenantlocations([]);
+ setLocationsStatus('error');
+ opentoast(err?.message || 'Could not load business locations', 'error', 4000);
+ }
+ };
+ useEffect(() => {
+ gettenantlocations();
+ }, [tid]);
+
+ // ============================================= || fetchStaffTenantList (Doormile staff picker) || =============================================
+ // Only staff logins (loggedInTenantId blank/0) need this — a client login's
+ // tenant is already fixed by their token and this never fetches for them.
+ useEffect(() => {
+ if (!isStaffLogin) return;
+ setStaffTenantListLoading(true);
+ getAdminTenants()
+ .then((tenants) => setStaffTenantList((tenants || []).filter((t) => t.status === 'Active')))
+ .catch((err) => {
+ opentoast(err?.message || 'Could not load tenant list', 'error', 4000);
+ })
+ .finally(() => setStaffTenantListLoading(false));
+ }, []);
+
+ return (
+ <>
+ {loading &&
+
+
+
+
+
+
+
+
+ Create Order
+
+
+
+ Fill pickup, drop, schedule & pricing details
+
+
+
+
+
+ {locationsStatus === 'loading' ? (
+
+ Loading business locations…
+
+ ) : locationsStatus === 'no-tenant' && isStaffLogin ? (
+ // Staff login (express-console-api.md: token tenantid 0/null
+ // = "Doormile's own staff... sees everything, all tenants")
+ // — pick which tenant to create this order for. Everything
+ // downstream (pricing, saved locations, the booking's own
+ // tenantid) is keyed off `tid`, which equals selectedTenantId.
+ option?.tenantname || ''}
+ isOptionEqualToValue={(option, value) => option?.tenantid === value?.tenantid}
+ PaperComponent={SoftPaper}
+ sx={{ width: { xs: '100%', sm: 300 } }}
+ size="small"
+ onChange={(event, value) => setSelectedTenantId(value ? String(value.tenantid) : '')}
+ renderInput={(params) => (
+
+
+
+
+ )
+ }}
+ sx={{
+ '& .MuiOutlinedInput-root': {
+ borderRadius: DT.radiusPill + 'px',
+ bgcolor: '#fff',
+ fontWeight: 600,
+ '& fieldset': { borderColor: edge(BRAND), borderWidth: 1.5 },
+ '&:hover fieldset': { borderColor: BRAND },
+ '&.Mui-focused': { boxShadow: `0 0 0 3px ${ring(BRAND)}` },
+ '&.Mui-focused fieldset': { borderColor: BRAND, borderWidth: 2 }
+ }
+ }}
+ />
+ )}
+ />
+ ) : locationsStatus === 'no-tenant' ? (
+
+ This login has no tenant assigned — sign in as a tenant user
+
+ ) : locationsStatus === 'error' ? (
+
+ Could not load business locations — tap to retry
+
+ ) : locationsStatus === 'empty' ? (
+
+ No saved locations — enter pickup details manually below
+
+ ) : tenantLocations.length === 1 ? (
+
+
+ ) : (
+ locationDisplayName(option)}
+ isOptionEqualToValue={(option, value) => option?.tenantlocationid === value?.tenantlocationid}
+ renderOption={(props, option) => (
+
+
+
+
+ {locationDisplayName(option)}
+
+ {option.isprimary && (
+
+ PRIMARY
+
+ )}
+
+
+ {option.address || option.city || ''}
+
+
+
+ )}
+ PaperComponent={SoftPaper}
+ sx={{ width: { xs: '100%', sm: 320 } }}
+ size="small"
+ renderInput={(params) => (
+
+
+
+
+ )
+ }}
+ sx={{
+ '& .MuiOutlinedInput-root': {
+ borderRadius: DT.radiusPill + 'px',
+ bgcolor: '#fff',
+ fontWeight: 600,
+ '& fieldset': { borderColor: edge(BRAND), borderWidth: 1.5 },
+ '&:hover fieldset': { borderColor: BRAND },
+ '&.Mui-focused': { boxShadow: `0 0 0 3px ${ring(BRAND)}` },
+ '&.Mui-focused fieldset': { borderColor: BRAND, borderWidth: 2 }
+ }
+ }}
+ />
+ )}
+ onChange={(event, value, reason) => {
+ if (value) {
+ setTenanatLocoId(value.tenantlocationid);
+ setIsLocation(true);
+ // Also fill pickCust's raw address fields from the
+ // picked location — POST /admin/expressbooking's
+ // pickuplocationid currently 500s server-side (live-
+ // confirmed), so createsubmitobj2() always sends raw
+ // pickup* fields instead; this keeps that path working
+ // when a saved location is chosen here.
+ setPickCust((prev) => ({
+ ...prev,
+ address: value.address || '',
+ suburb: value.locationname || value.city || '',
+ city: value.city || '',
+ postcode: value.pincode || '',
+ landmark: value.address || '',
+ latitude: value.latitude,
+ longitude: value.longitude
+ }));
+ }
+ if (reason === 'clear') {
+ setIsLocation(false);
+ }
+ }}
+ />
+ )}
+
+
+
+
+
+
+
+
+
+ {/* ================================================= || Pickup || ================================================= */}
+
+
+
+
+
+
+ {/* ====================================== ||Contact Name (pick) || ====================================== */}
+
+
+
+ {/* ====================================== ||Contact Number(pick) || ====================================== */}
+
+
+
+ {/* ====================================== || Address (pick) || ====================================== */}
+
+
+ {addId1 == 0 ? (
+ {
+ setAddId1(0);
+ setPickCust({
+ ...pickCust,
+ // firstname: '',
+ // contactno: '',
+ doorno: '',
+ suburb: '',
+ city: '',
+ postcode: '',
+ landmark: ''
+ });
+ setShowDistance(false);
+ setStartPoint({ latitude: 0, longitude: 0 });
+ }}
+ >
+
+
+
+ {/* ====================================== ||Door No (pick) || ====================================== */}
+
+
+
+ {/* ====================================== || Suburb (pick) || ====================================== */}
+
+
+
+ {/* ====================================== || City (pick) || ====================================== */}
+
+
+
+ {/* ====================================== || postcode (pick) || ====================================== */}
+
+
+
+ {/* ====================================== || Landmark (pick) || ====================================== */}
+
+
+
+ {/* ====================================== ||Checkbox save for later (pick) || ====================================== */}
+ {showCheck1 == 1 && (
+
+
+ {
+ setIsNumChange1(e.target.checked ? 1 : 0);
+ }}
+ />
+ }
+ label="Save For Later"
+ />
+
+
+ )}
+
+
+
+
+
+
+ {/* ================================================= || Drop || ================================================= */}
+
+
+
+
+
+
+
+ Drop Details
+
+
+ {/* Customer */}
+ {/* {
+ if (val) {
+ setDropswitch(true);
+ setClientinfo({});
+ } else {
+ setDropswitch(false);
+ setClientinfo({});
+ }
+ }}
+ size="small"
+ />
+ Business */}
+
+
+
+ {/* new2 */}
+ {/* `${option.firstname} (${option.contactno})`}
+ sx={{ mt: 0, mb: 1 }}
+ renderInput={(params) => (
+ {
+ setSearchCustList(e.target.value);
+ }}
+ InputProps={{
+ ...params.InputProps,
+ inputProps: {
+ ...params.inputProps,
+ maxLength: 10
+ }
+ }}
+ />
+ )}
+ onChange={(e, val, reason) => {
+ if (val) {
+ if (pickCust.customerid === val.customerid) {
+ opentoast('Select Another Customer', 'error');
+ setSearchCustList('');
+ } else {
+ setDropCust(val);
+ setEndPoint({ latitude: val.latitude, longitude: val.longitude });
+ setAddId2(1);
+ }
+ }
+ if (reason == 'clear') {
+ setSearchCustList('');
+ }
+ }}
+ noOptionsText={
+ /^[0-9]{10}$/.test(searchCustList) ? (
+
+ {
+ setDropCust({ ...dropCust, contactno: searchCustList });
+ handleOkClick2();
+ setSearchCustList('');
+ }}
+ />
+
+ ) : null
+ }
+ /> */}
+
+
+
+
+ {/* ====================================== ||Contact Name (drop) || ====================================== */}
+
+
+
+ {/* ====================================== ||Contact Number (drop) || ====================================== */}
+
+
+
+
+
+ {addId2 == 0 ? (
+ {
+ setAddId2(0);
+ setDropCust({
+ ...dropCust,
+ firstname: '',
+ contactno: '',
+ doorno: '',
+ suburb: '',
+ city: '',
+ postcode: '',
+ landmark: ''
+ });
+ setShowDistance(false);
+ setEndPoint({ latitude: 0, longitude: 0 });
+ }}
+ >
+
+
+
+ {/* ====================================== ||Door No (drop) || ====================================== */}
+
+
+
+ {/* ====================================== ||Suburb (drop) || ====================================== */}
+
+
+
+ {/* ====================================== ||City (drop) || ====================================== */}
+
+
+
+
+ {/* ====================================== ||Postcode (drop) || ====================================== */}
+
+
+
+ {/* ====================================== ||Landmark (drop) || ====================================== */}
+
+
+
+ {/* ====================================== ||Checkbox save for later (drop) || ====================================== */}
+ {showCheck2 == 1 && (
+
+
+ {
+ setIsNumChange2(e.target.checked ? 1 : 0);
+ }}
+ />
+ }
+ label="Save For Later"
+ />
+
+
+ )}
+
+
+ {/*
+
+ */}
+
+
+
+
+ {/* ================================================= || Time || ================================================= */}
+
+
+
+
+
+
+ Date
+
+ {
+ if (!v) return;
+ let dateres11 = dayjs().diff(dayjs(v), 'd');
+ setSelectedtime('');
+ if (dateres11 <= 0) {
+ setStartdate(dayjs(v));
+ setEnddate(dayjs(v));
+
+ let arr = [];
+ timeslotarr.map((val) => {
+ if (
+ dayjs().diff(dayjs(`${dayjs(v).format('MM-DD-YYYY')} ${dayjs(val).format('HH:mm:ss')}`), 'm') <= 0
+ ) {
+ arr.push(val);
+ }
+ });
+ if (arr[0]) {
+ setOrderarr([
+ {
+ sno: 1,
+ address: '',
+ customerid: '',
+ deliverytime: dayjs(arr[0]) || '',
+ deliverylocationid: '',
+ clientname: '',
+ contactno: '',
+ latitude: '',
+ longitude: ''
+ }
+ ]);
+ } else {
+ setOrderarr([]);
+ }
+ } else {
+ setAlertmessage('choose Upcoming Date');
+ opentoast('choose Upcoming Date', 'warning');
+ setStartdate(NaN);
+ }
+ }}
+ />
+
+ Time
+
+
+
+ {timeslotarr.map((val, index) => {
+ if (
+ dayjs().diff(dayjs(`${dayjs(startdate).format('MM-DD-YYYY')} ${dayjs(val).format('HH:mm:ss')}`), 'm') <=
+ 0
+ ) {
+ const active = dayjs(selectedtime).format('HH:mm') == dayjs(val).format('HH:mm');
+ return (
+ {
+ if (distance > appLocaRadius) {
+ setOpen4(true);
+ } else if (showDistance) {
+ setSelectedtime(val);
+ } else {
+ opentoast('Select Pickup and Drop', 'error');
+ }
+ }}
+ sx={{
+ display: 'inline-flex',
+ alignItems: 'center',
+ gap: 0.5,
+ px: 1.25,
+ py: 0.5,
+ cursor: 'pointer',
+ borderRadius: 999,
+ border: `1.5px solid ${active ? '#f59e0b' : edge('#f59e0b')}`,
+ bgcolor: active ? '#f59e0b' : tint('#f59e0b'),
+ color: active ? '#fff' : '#f59e0b',
+ fontSize: 12,
+ fontWeight: 800,
+ transition: 'all 0.15s',
+ boxShadow: active ? `0 6px 18px ${ring('#f59e0b')}` : 'none',
+ '&:hover': {
+ borderColor: '#f59e0b',
+ boxShadow: active ? `0 6px 18px ${ring('#f59e0b')}` : `0 0 0 3px ${ring('#f59e0b')}`
+ }
+ }}
+ >
+
+ );
+ }
+ })}
+
+
+
+
+
+
+
+
+
+
+ {showDistance && (
+
+
+
+
+
+
+ )}
+
+ Category
+
+ 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);
+ }}
+ />
+
+
+
+
+
+
+
+
+ {/* ============================== || Cash Collect & Quantity || ============================== */}
+
+
+
+
+ setCollectionamt(e.target.value)}
+ inputProps={{ min: 0 }}
+ />
+
+
+ setQuantity(e.target.value)}
+ inputProps={{ min: 1 }}
+ />
+
+
+
+
+
+ {/* ================================================= || Notes || ================================================= */}
+
+
+ setOtherinstructions(e.target.value)}
+ />
+
+ {!showDistance && (
+
+ Set pickup & drop to enable
+
+ )}
+ }
+ onClick={createsubmitobj2}
+ sx={{
+ borderRadius: 999,
+ px: 3,
+ py: 1,
+ fontWeight: 800,
+ textTransform: 'none',
+ fontSize: 13,
+ background: `linear-gradient(135deg, ${BRAND} 0%, ${BRAND_LIGHT} 100%)`,
+ color: '#fff',
+ boxShadow: `0 8px 22px ${ring(BRAND)}`,
+ transition: 'all 0.18s',
+ '&:hover': {
+ background: `linear-gradient(135deg, #4D1C61 0%, ${BRAND} 100%)`,
+ transform: 'translateY(-1px)',
+ boxShadow: `0 10px 26px ${ring(BRAND)}`
+ },
+ '&.Mui-disabled': {
+ background: DT.divider,
+ color: DT.textMuted,
+ boxShadow: 'none'
+ }
+ }}
+ >
+ {loading ?
+
+
+
+
+
+ {/* */}
+
+ {/* ============================================= || saved address Dialog || ============================================= */}
+
+
+
+
+
+ );
+};
+
+export default Createorder1;
diff --git a/src/pages/nearle/orders/multipleOrders.js b/src/pages/nearle/orders/multipleOrders.js
index 45293a7..50ce0f6 100644
--- a/src/pages/nearle/orders/multipleOrders.js
+++ b/src/pages/nearle/orders/multipleOrders.js
@@ -1,1835 +1,1815 @@
-/* eslint-disable no-unused-vars */
-import React, { useEffect, useMemo, useState, useRef } from 'react';
-import { getAdminPricing, getAdminTenants, getTenantLocations, getAdminCustomers, createExpressBookingBulk } from 'pages/api/doormileApi';
-import { fetchAppLocations as fetchZoneLocations } from 'pages/api/api';
-import AddressAutocomplete from 'components/nearle_components/AddressAutocomplete';
-import Papa from 'papaparse';
-import * as XLSX from 'xlsx';
-import dayjs from 'dayjs';
-import { useNavigate } from 'react-router';
-import { useTheme } from '@mui/material/styles';
-import useMediaQuery from '@mui/material/useMediaQuery';
-import { enqueueSnackbar } from 'notistack';
-import { calculateDrivingDistance, calculateTotalCharge } from '../../../utils/distance';
-
-import {
- FormControl,
- InputAdornment,
- Grid,
- Typography,
- Stack,
- Box,
- Card,
- Button,
- TextField,
- Autocomplete,
- Divider,
- Dialog,
- DialogTitle,
- DialogContent,
- Checkbox,
- DialogActions,
- CircularProgress,
- IconButton,
- OutlinedInput,
- FormGroup,
- FormControlLabel,
- Table,
- TableContainer,
- TableCell,
- TableBody,
- TableRow,
- Paper,
- TableHead,
- Backdrop,
- Chip,
- Tooltip
-} from '@mui/material';
-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 ClearIcon from '@mui/icons-material/Clear';
-import MyLocationIcon from '@mui/icons-material/MyLocation';
-import {
- SearchOutlined,
- CloseOutlined,
- ExclamationCircleOutlined,
- FileAddOutlined,
- CalendarOutlined,
- ClockCircleOutlined,
- FileTextOutlined,
- InboxOutlined
-} from '@ant-design/icons';
-import { Empty } from 'antd';
-import { FaUser, FaTruck, FaUsers, FaPaperPlane, FaRoute, FaMoneyBillWave, FaBoxes, FaReceipt } from 'react-icons/fa';
-import { FaLocationDot } from 'react-icons/fa6';
-import { MdOutlineCloudUpload } from 'react-icons/md';
-
-import Loader from 'components/Loader';
-import CircularLoader from 'components/CircularLoader';
-import './OrdersRedesign.css';
-
-var utc = require('dayjs/plugin/utc');
-dayjs.extend(utc);
-
-const cellHeaderSx = { fontSize: 11.5, fontWeight: 700, color: '#475569', py: 0.75, px: 1 };
-const cellBodySx = { fontSize: 12, py: 0.6, px: 1 };
-
-// GET /admin/tenants/:id/locations carries no `slots` field (no per-location
-// pickup-hours endpoint in the new API) — the pickup-slot Autocomplete used
-// to read tenantLocation.slots, which was always undefined, leaving the
-// dropdown permanently empty and the page unsubmittable. Falls back to a
-// fixed 09:00-21:00 / 30-min window, same rationale as createorder1.js's
-// fetchTiming().
-const buildDefaultPickupSlots = () => {
- const arr = [];
- for (let t = dayjs().hour(9).minute(0).second(0); t.hour() < 21 || (t.hour() === 21 && t.minute() === 0); t = t.add(30, 'm')) {
- arr.push({ name: t.format('hh:mm A'), time: t.format('HH:mm') });
- }
- return arr;
-};
-
-// Some saved locations come back with a blank locationname (live-confirmed,
-// e.g. tenant 1's only location) — fall back to the address rather than
-// showing an empty field/option.
-const locationDisplayName = (loc) => (loc?.locationname && loc.locationname.trim()) || loc?.address || 'Unnamed location';
-
-// Tenants with many locations in the same city (DailyGrubs has 23, all in
-// Coimbatore) made a "(city)" suffix useless for telling them apart — sort
-// primary-first then alphabetically; the full address is shown per-option
-// instead (see renderOption on the Business Location Autocomplete below).
-const sortLocations = (locations) =>
- [...(locations || [])].sort((a, b) => {
- if (!!a.isprimary !== !!b.isprimary) return a.isprimary ? -1 : 1;
- return locationDisplayName(a).localeCompare(locationDisplayName(b));
- });
-
-const MultipleOrders = () => {
- const navigate = useNavigate();
- const theme = useTheme();
- const isMobile = useMediaQuery(theme.breakpoints.down('md'));
- const locationRef = useRef(null);
- const userid = localStorage.getItem('userid');
- // Per express-console-api.md's "Tenant scoping" section: token tenantid
- // 0/null means Doormile's own staff, who can act on any tenant — NOT an
- // error state. A client (tenant) login carries a real tenantid and never
- // needs the picker below. `tenantid` (used throughout this file already)
- // now resolves to whichever the operator is currently working as.
- const loggedInTenantId = localStorage.getItem('tenantid');
- const isStaffLogin = !loggedInTenantId || loggedInTenantId === '0';
-
- // ============================== state ==============================
- const [locations, setLocations] = useState([]);
- const [tenantLocations, setTenantlocations] = useState([]);
- const [loading, setLoading] = useState(false);
- const [btnLoading, setBtnLoading] = useState(false);
-
- const [appId, setAppId] = useState(0);
- const [locationid, setLocationid] = useState(0);
- const [locationValue, setLocationValue] = useState(null);
- const [locationsStatus, setLocationsStatus] = useState('loading');
- const [selectedTenantId, setSelectedTenantId] = useState(isStaffLogin ? '' : loggedInTenantId);
- const [staffTenantList, setStaffTenantList] = useState([]);
- const [staffTenantListLoading, setStaffTenantListLoading] = useState(false);
- const tenantid = selectedTenantId;
-
- const [basePrice, setBasePrice] = useState(0);
- const [pricePerKm, setPricePerKm] = useState(0);
- const [minKm, setMinKm] = useState(0);
-
- const [pickCust, setPickCust] = useState(null);
- const [dropCust, setDropCust] = useState([]);
- const [customerlist, setCustomerlist] = useState([]);
- const [isCustomerOpen, setIsCustomerOpen] = useState(false);
- const [searchCustList, setSearchCustList] = useState('');
-
- const [startdate, setStartdate] = useState(dayjs().format('MM-DD-YYYY'));
- const [selectedtime, setSelectedtime] = useState('');
- const [pickupSlotsList, setPickupSlotsList] = useState(buildDefaultPickupSlots);
- const [pickupSlot, setPickupSlot] = useState(null);
-
- const [otherinstructions, setOtherinstructions] = useState('');
- const [admintoken, setAdmintoken] = useState();
-
- const [totaldist, settotaldist] = useState(0);
- const [totalAmt, settotalAmt] = useState(0);
- const [totalQty, settotalQty] = useState(0);
- const [totalCash, settotalCash] = useState(0);
-
- const [uploadType, setUploadType] = useState(null);
- const [users, setUsers] = useState([]);
- const [fileName, setFileName] = useState('');
- const [slotDropdownOpen, setSlotDropdownOpen] = useState(false);
-
- const toastCacheRef = useRef({});
-
- // ============================== toast ==============================
- const opentoast = (message, variant, time) => {
- enqueueSnackbar(message, {
- variant,
- anchorOrigin: { vertical: 'top', horizontal: 'right' },
- autoHideDuration: time || 1500
- });
- };
-
- const OpenToast = (message, type = 'info', timeout = 3000) => {
- const key = `${type}-${message}`;
- if (toastCacheRef.current[key]) return;
- opentoast(message, type, timeout);
- toastCacheRef.current[key] = true;
- setTimeout(() => delete toastCacheRef.current[key], 3000);
- };
-
- // ============================== reset chains ==============================
- useEffect(() => {
- setLocationid(0);
- setLocationValue(null);
- setDropCust([]);
- setUsers([]);
- setUploadType(null);
- setFileName('');
- setPickupSlotsList(buildDefaultPickupSlots());
- setPickupSlot(null);
- setSelectedtime('');
- }, [appId]);
-
- // ============================== fetchAppLocations ==============================
- const fetchAppLocations = async () => {
- setLoading(true);
- try {
- const locations = await fetchZoneLocations();
- setLocations(locations || []);
- } catch (err) {
- OpenToast(err.message, 'error', 5000);
- } finally {
- setLoading(false);
- }
- };
-
- useEffect(() => {
- fetchAppLocations();
- }, []);
-
- // ============================== fetchTenantPricing ==============================
- const fetchTenantPricing = async (id) => {
- try {
- const pricing = (await getAdminPricing()) || [];
- // id comes from localStorage (always a string) but pricing.tenantid is
- // numeric — a strict === here never matched, so basePrice/pricePerKm/
- // minKm stayed at their 0 defaults and every order priced at ₹0.
- const match = pricing.find((p) => String(p.tenantid) === String(id));
- if (match) {
- setBasePrice(match.baseprice || 0);
- setPricePerKm(match.priceperkm || 0);
- setMinKm(match.basedistance || 0);
- }
- } catch (err) {
- // swallow
- }
- };
-
- useEffect(() => {
- if (tenantid) fetchTenantPricing(tenantid);
- }, [tenantid]);
-
- // ============================== gettenantlocations ==============================
- // Drives what shows in place of the Business Location picker. Previously
- // this function was only ever called when `tenantid` was truthy, so an
- // operator on a no-tenant login (the shared admin/developer account has
- // tenantid: null) got a permanently empty picker with zero feedback — not
- // even a toast, since the function body that would show one never ran.
- const gettenantlocations = async (id) => {
- if (!id) {
- // Staff login with no tenant picked yet — the picker UI covers this.
- setLocationsStatus('no-tenant');
- return;
- }
- setLocationsStatus('loading');
- try {
- const details = (await getTenantLocations(id)) || [];
- setTenantlocations(details);
- if (details.length === 1) {
- setLocationsStatus('ready');
- setPickCust(details[0]);
- setLocationid(details[0].tenantlocationid);
- setLocationValue(details[0]);
- } else if (details.length === 0) {
- setLocationsStatus('empty');
- opentoast('No saved business locations for this tenant', 'info', 3000);
- } else {
- setLocationsStatus('ready');
- }
- } catch (err) {
- // doormileAxios's response interceptor rejects with error.response.data
- // (not the raw axios error), so the message lives at err.message here.
- setTenantlocations([]);
- setLocationsStatus('error');
- opentoast(err?.message || 'Could not load business locations', 'error', 4000);
- }
- };
-
- useEffect(() => {
- gettenantlocations(tenantid);
- }, [tenantid]);
-
- // ============================== fetchStaffTenantList (Doormile staff picker) ==============================
- // Only staff logins (loggedInTenantId blank/0) need this — a client login's
- // tenant is already fixed by their token and this never fetches for them.
- useEffect(() => {
- if (!isStaffLogin) return;
- setStaffTenantListLoading(true);
- getAdminTenants()
- .then((tenants) => setStaffTenantList((tenants || []).filter((t) => t.status === 'Active')))
- .catch((err) => {
- opentoast(err?.message || 'Could not load tenant list', 'error', 4000);
- })
- .finally(() => setStaffTenantListLoading(false));
- }, []);
-
- // ============================== clientdetails ==============================
- // GET /admin/customers (B2C directory) — not /admin/tenantcustomers, which
- // is an empty, manually-added contact book with no address/coordinates.
- // This resource auto-grows from real orders (see the identical fix on
- // createorder1.js's Saved Contacts) and has a confirmed live shape of
- // { appcustomerid, createdat, email, name, phone, totalbookings } — no
- // search/query param exists, so it's fetched once and filtered in-memory.
- const clientdetails = async () => {
- try {
- const customers = (await getAdminCustomers()) || [];
- setCustomerlist(customers);
- } catch (err) {
- opentoast('server error', 'warning');
- }
- };
-
- useEffect(() => {
- if (!tenantid || !isCustomerOpen) return;
- clientdetails();
- }, [tenantid, isCustomerOpen]);
-
- const filteredCustomerList = useMemo(() => {
- const q = searchCustList.trim().toLowerCase();
- if (!q) return customerlist;
- return customerlist.filter((c) => c.name?.toLowerCase().includes(q) || c.phone?.includes(searchCustList));
- }, [customerlist, searchCustList]);
-
- // ============================== totals ==============================
- useEffect(() => {
- let a1 = 0,
- a2 = 0,
- a3 = 0,
- a4 = 0;
- dropCust.forEach((c) => {
- a1 += Number(c.distance) || 0;
- a2 += Number(c.totalcharge) || 0;
- a3 += Number(c.quantity) || 0;
- a4 += Number(c.collectionamt) || 0;
- });
- settotaldist(a1);
- settotalAmt(a2);
- settotalQty(a3);
- settotalCash(a4);
- }, [dropCust]);
-
- // ============================== distance (Google) ==============================
- // ============================== distance (OSRM/Haversine) ==============================
- const calculateDistance = async (customer) => {
- try {
- if (!customer || typeof customer !== 'object') throw new Error('Invalid customer data.');
- if (!pickCust || typeof pickCust !== 'object') throw new Error('Origin (pickCust) data missing or invalid.');
-
- const roundedDistance = await calculateDrivingDistance(pickCust, customer);
- const totalcharge = calculateTotalCharge(roundedDistance, basePrice, pricePerKm, minKm);
- return { roundedDistance, totalcharge };
- } catch (error) {
- if (error.message.includes('Origin') || error.message.includes('customer') || error.message.includes('coordinates')) {
- OpenToast('Missing or invalid input data for distance calculation.', 'warning', 3000);
- } else {
- OpenToast('Unexpected error during distance calculation.', 'error', 3000);
- }
- throw error;
- }
- };
-
- // ============================== checkbox handlers ==============================
- // GET /admin/customers has no address/coordinates at all, so a saved
- // customer can no longer be distance-calculated at selection time (that's
- // what used to throw "Invalid coordinates" and silently drop the row every
- // time). Add the row immediately instead — its Address cell renders an
- // editable AddressAutocomplete (see the Drop List table) until the
- // operator picks a real address, which is what fills in lat/lng and lets
- // distance/charge be computed per-row.
- const handleCheckboxChange = (event, customer) => {
- const rowkey = `sel-${customer.appcustomerid}`;
- if (event.target.checked) {
- setDropCust((prev) => {
- if (prev.some((c) => c._rowkey === rowkey)) return prev;
- return [
- ...prev,
- {
- _rowkey: rowkey,
- appcustomerid: customer.appcustomerid,
- firstname: customer.name || '',
- contactno: customer.phone || '',
- address: '',
- city: '',
- postcode: '',
- latitude: null,
- longitude: null,
- distance: 0,
- totalcharge: 0,
- quantity: 0,
- collectionamt: 0
- }
- ];
- });
- } else {
- setDropCust((prev) => prev.filter((c) => c._rowkey !== rowkey));
- }
- };
-
- // Still used by the CSV "Continue" promotion and the Drop List remove
- // button. Safe to keep calling calculateDistance here — CSV rows always
- // carry real latitude/longitude from the sheet, unlike Selection rows.
- const handleCheckboxChange1 = async (customer) => {
- const rowkey = customer._rowkey;
- let wasSelected = false;
- setDropCust((prev) => {
- wasSelected = prev.some((c) => c._rowkey === rowkey);
- if (wasSelected) return prev.filter((c) => c._rowkey !== rowkey);
- return prev;
- });
- if (wasSelected) return;
- setLoading(true);
- try {
- const { roundedDistance, totalcharge } = await calculateDistance(customer);
- setDropCust((prev) => {
- if (prev.some((c) => c._rowkey === rowkey)) return prev;
- return [...prev, { ...customer, distance: roundedDistance, totalcharge }];
- });
- } catch (err) {
- console.error('Failed to calculate distance:', err);
- OpenToast(`Could not calculate distance for ${customer.firstname || 'this row'}`, 'warning', 3000);
- } finally {
- setLoading(false);
- }
- };
-
- // Parses the AddressAutocomplete `place` result (see createorder1.js's
- // handleDropPlaceSelected for the same pattern) for one Drop List row,
- // updates that row's address/coordinates, then recomputes its distance and
- // charge now that coordinates finally exist.
- const handleRowPlaceSelected = async (rowkey, place) => {
- const parsed = { suburb: '', city: '', postcode: '' };
- place.address_components.forEach((component) => {
- component.types.forEach((type) => {
- switch (type) {
- case 'sublocality_level_1':
- case 'sublocality':
- parsed.suburb = component.long_name;
- break;
- case 'locality':
- parsed.city = component.long_name;
- break;
- case 'postal_code':
- parsed.postcode = component.long_name;
- break;
- }
- });
- });
- const latitude = place.geometry.location.lat();
- const longitude = place.geometry.location.lng();
- const address = place.formatted_address || '';
-
- setDropCust((prev) =>
- prev.map((c) => (c._rowkey === rowkey ? { ...c, address, city: parsed.city, postcode: parsed.postcode, latitude, longitude } : c))
- );
-
- try {
- const { roundedDistance, totalcharge } = await calculateDistance({ latitude, longitude });
- setDropCust((prev) => prev.map((c) => (c._rowkey === rowkey ? { ...c, distance: roundedDistance, totalcharge } : c)));
- } catch (err) {
- console.error('Failed to calculate distance:', err);
- }
- };
-
- // No zone-admin-token or bulk-notify endpoint in the new API.
- const fetchAppAdminTokens = async () => setAdmintoken([]);
-
- useEffect(() => {
- if (appId) fetchAppAdminTokens();
- }, [appId]);
-
- // ============================== sendnotifications ==============================
- const sendnotifications = async () => {};
-
- // ============================== CSV / XLSX upload ==============================
- const cleanReceiverName = (name) => (typeof name === 'string' ? name.replace(/^[\d.\s]+/, '').trim() : name);
- const normalizeHeader = (header) => header?.toString().trim().toLowerCase().replace(/\s+/g, '');
-
- const headerMap = {
- 'pickupdate(yyyy-mmm-dd)': 'date',
- 'sendername*': 'locationname',
- 'senderphone*': 'locationcontact',
- 'senderaddress*': 'locationaddress',
- 'receivername*': 'firstname',
- receiverphone: 'contactno',
- 'receiveralternatephone*': 'altcontactno',
- receiverfulladdress: 'address',
- // Best-effort — no live sample sheet to confirm these are the tenant's
- // actual column headers. Without them deliverycity/deliverypincode in
- // the submit payload were always sent blank; if these names are wrong,
- // behavior is unchanged from before (still blank), not worse.
- receivercity: 'city',
- receiverpincode: 'postcode',
- receiverlatitude: 'latitude',
- receiverlongitude: 'longitude',
- 'itemdescription*': 'description',
- Quantity: 'quantity',
- ' Collect Cash': 'collectionamt'
- };
-
- const handleFileDirectUpload = (event) => {
- try {
- const file = event.target.files?.[0];
- if (!file) {
- opentoast('No file selected.', 'warning');
- return;
- }
- const fileNameLower = file.name.toLowerCase();
- const isCSV = fileNameLower.endsWith('.csv');
- const isExcel = fileNameLower.endsWith('.xls') || fileNameLower.endsWith('.xlsx');
- if (!isCSV && !isExcel) {
- opentoast('Invalid file type. Please upload a CSV or Excel file.', 'warning');
- return;
- }
-
- const processData = (data, headers) => {
- const normalizedMap = {};
- for (const key in headerMap) normalizedMap[normalizeHeader(key)] = headerMap[key];
- const mappedData = data.map((row, idx) => {
- const newRow = { _rowkey: `csv-${idx}` };
- for (const key in row) {
- const cleanKey = normalizeHeader(key);
- const newKey = normalizedMap[cleanKey] || cleanKey;
- let value = row[key];
- if (newKey === 'firstname') value = cleanReceiverName(value);
- newRow[newKey] = value;
- }
- return newRow;
- });
- const requiredCols = Object.keys(headerMap).filter((k) => k.trim().endsWith('*'));
- const missingRequired = requiredCols.filter((clientCol) => !headers.includes(normalizeHeader(clientCol)));
- if (missingRequired.length > 0) {
- opentoast(`Missing columns: ${missingRequired.join(', ')}`, 'warning', 3000);
- }
- setUsers(mappedData);
- opentoast('File uploaded successfully', 'success', 2000);
- opentoast('Press Continue to add as drop customers', 'info', 2500);
- };
-
- if (isCSV) {
- Papa.parse(file, {
- header: true,
- dynamicTyping: true,
- skipEmptyLines: true,
- complete: (results) => {
- if (!results.data?.length) {
- opentoast('CSV file is empty or has no valid rows.', 'warning');
- setUsers([]);
- return;
- }
- processData(results.data, results.meta.fields.map(normalizeHeader));
- },
- error: (error) => opentoast(`CSV parsing failed: ${error.message}`, 'warning')
- });
- }
- if (isExcel) {
- const reader = new FileReader();
- reader.onload = (e) => {
- try {
- const workbook = XLSX.read(e.target.result, { type: 'binary' });
- const jsonData = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]], { defval: '' });
- if (!jsonData?.length) {
- opentoast('Excel file is empty or invalid.', 'warning');
- setUsers([]);
- return;
- }
- processData(jsonData, Object.keys(jsonData[0]).map(normalizeHeader));
- } catch (err) {
- opentoast(`Error reading Excel: ${err.message}`, 'warning');
- }
- };
- reader.readAsBinaryString(file);
- }
- } catch (err) {
- opentoast(`Unexpected error: ${err.message}`, 'warning');
- }
- };
-
- const removeFileExtension = (n) => n.replace(/\.[^/.]+$/, '');
- const onFileChange = (event) => {
- const file = event.target.files[0];
- if (!file) return;
- const cleanedName = removeFileExtension(file.name);
- setFileName((prev) => (prev ? `${prev}, ${cleanedName}` : cleanedName));
- handleFileDirectUpload(event);
- };
-
- // ============================== row editors ==============================
- const handleQuantityChange = (rowkey, value) => {
- setDropCust((prev) => prev.map((c) => (c._rowkey === rowkey ? { ...c, quantity: Number(value) || 0 } : c)));
- };
- const handleCollectionAmtChange = (rowkey, value) => {
- setDropCust((prev) => prev.map((c) => (c._rowkey === rowkey ? { ...c, collectionamt: Number(value) || 0 } : c)));
- };
-
- // ============================== buildDeliveryTime ==============================
- const buildDeliveryTime = () => {
- if (pickupSlot) {
- const parsed = dayjs(pickupSlot, ['YYYY-MM-DD hh:mm A', 'YYYY-MM-DD HH:mm:ss']);
- if (parsed.isValid()) return parsed.format('YYYY-MM-DD HH:mm:ss');
- }
- if (startdate && selectedtime) {
- const parsed = dayjs(`${dayjs(startdate).format('YYYY-MM-DD')} ${selectedtime}`, ['YYYY-MM-DD hh:mm A', 'YYYY-MM-DD HH:mm:ss']);
- if (parsed.isValid()) return parsed.format('YYYY-MM-DD HH:mm:ss');
- }
- return dayjs().format('YYYY-MM-DD HH:mm:ss');
- };
-
- // ============================== createorders ==============================
- const createorders = async () => {
- if (!tenantid) {
- opentoast('Client not found. Please re-login.', 'warning');
- return;
- }
- if (!pickCust) {
- opentoast('Pickup location required', 'warning');
- return;
- }
- if (!pickupSlot) {
- opentoast('Select a pickup slot', 'warning');
- return;
- }
- if (!dropCust.length) {
- opentoast('Add at least one drop customer', 'warning');
- return;
- }
- // A Selection-sourced row (picked from Saved Customers) starts with no
- // address/coordinates until the operator fills in its Address cell —
- // block submit rather than send a booking with lat/lng silently at 0.
- const incomplete = dropCust.find((c) => c.latitude == null || c.longitude == null);
- if (incomplete) {
- opentoast(`Add a delivery address for ${incomplete.firstname || 'a selected customer'} before submitting`, 'warning', 4000);
- return;
- }
-
- const deliverytime = buildDeliveryTime();
- // POST /admin/expressbooking/bulk takes { bookings: [...] } where each
- // entry is a flat booking object (tenantid, pickup* fields, customer_*,
- // delivery*, service_option, finalprice, notes, parcels[]) — not the old
- // per-row orders/pickup/drop shape.
- // tenantid comes from the logged-in session (see the top-level `tenantid`
- // const above), not from pickCust — pickCust is a tenant *location*
- // object (GET /admin/tenants/:id/locations) and was never confirmed to
- // carry a tenantid back-reference, so `pickCust.tenantid` was silently
- // undefined on every submit.
- //
- // Always send raw pickup* fields, never pickuplocationid — live-confirmed
- // pickuplocationid currently 500s on POST /admin/expressbooking (and by
- // extension the bulk endpoint, same handler); a saved location's own
- // address/pincode/city/lat/lng (already on pickCust) work fine sent raw.
- // Note: pickCust.pincode, not .postcode — that was also wrong (the real
- // GET /admin/tenants/:id/locations field is `pincode`).
- const bookings = dropCust.map((customer) => ({
- tenantid: Number(tenantid),
- pickupaddress: pickCust.address || '',
- pickuppincode: pickCust.pincode || '',
- pickupcity: pickCust.city || '',
- pickuplatitude: Number(pickCust.latitude) || 0,
- pickuplongitude: Number(pickCust.longitude) || 0,
- customer_phone: customer.contactno?.toString() || '',
- customer_name: customer.firstname || '',
- deliveryaddress: customer.address || '',
- deliverypincode: customer.postcode || '',
- deliverycity: customer.city || '',
- deliverylatitude: Number(customer.latitude) || 0,
- deliverylongitude: Number(customer.longitude) || 0,
- deliverytime,
- service_option: 'Normal',
- finalprice: +customer.totalcharge || 0,
- notes: otherinstructions || '',
- parcels: [{ itemcategory: 'General', itemdescription: 'Order', declaredvalue: +customer.totalcharge || 0 }]
- }));
-
- setLoading(true);
- setBtnLoading(true);
- try {
- const res = await createExpressBookingBulk(bookings);
- if (res.success) {
- opentoast('Orders Created Successfully', 'success', 2000);
- navigate('/doormile/orders');
- } else {
- opentoast(res?.message || 'Order creation failed. Please try again.', 'warning', 3000);
- }
- } catch (err) {
- // doormileAxios's response interceptor rejects with error.response.data
- // (not the raw axios error), so the message lives at err.message here —
- // err.response was always undefined at this point, so this always fell
- // through to the generic "Something went wrong." fallback before.
- opentoast(err?.message || 'Something went wrong.', 'error', 3000);
- } finally {
- setLoading(false);
- setBtnLoading(false);
- }
- };
-
- // ============================== derived ==============================
- const canSubmit = !!locationid && !!pickupSlot && dropCust.length > 0;
- const prereqOk = !!locationid;
- const previewMode = dropCust.length > 0 ? 'drops' : users.length > 0 ? 'preview' : 'empty';
-
- // ============================== render ==============================
- return (
- <>
- {loading && t.zIndex.drawer + 1 }} open={btnLoading}>
-
-
-
- {/* Title bar */}
-
-
- Create Multiple Orders
-
-
- Bulk-create deliveries from CSV/Excel or saved customers.
-
-
-
- {/* 50 / 50 workspace */}
-
- {/* LEFT — input fields */}
-
- {/* Card: Schedule & Pickup */}
-
-
-
- Schedule & Pickup
-
-
-
-
- {locationsStatus === 'loading' ? (
-
- Loading business locations…
-
- ) : locationsStatus === 'no-tenant' && isStaffLogin ? (
- // Staff login (express-console-api.md: token tenantid
- // 0/null = "Doormile's own staff... sees everything, all
- // tenants") — pick which tenant this bulk order is for.
- option?.tenantname || ''}
- isOptionEqualToValue={(option, value) => option?.tenantid === value?.tenantid}
- onChange={(event, value) => setSelectedTenantId(value ? String(value.tenantid) : '')}
- renderInput={(params) => (
-
- This login has no tenant assigned — sign in as a tenant user
-
- ) : locationsStatus === 'error' ? (
- gettenantlocations(tenantid)}
- sx={{
- display: 'flex',
- alignItems: 'center',
- px: 1.5,
- py: 1,
- borderRadius: '10px',
- bgcolor: '#fef2f2',
- border: '1px solid #fecaca',
- color: '#b91c1c',
- fontWeight: 600,
- fontSize: 12.5,
- cursor: 'pointer'
- }}
- >
- Could not load business locations — tap to retry
-
- ) : locationsStatus === 'empty' ? (
-
- No saved business locations for this tenant
-
- ) : tenantLocations?.length === 1 ? (
-
- (option ? locationDisplayName(option) : '')}
- renderOption={(props, option) => (
-
-
-
-
- {locationDisplayName(option)}
-
- {option.isprimary && (
-
- PRIMARY
-
- )}
-
-
- {option.address || option.city || ''}
-
-
-
- )}
- value={locationValue}
- onChange={(event, value, reason) => {
- if (reason === 'clear' || !value) {
- setLocationid(0);
- setLocationValue(null);
- setPickCust(null);
- } else {
- setLocationid(value.tenantlocationid || 0);
- setLocationValue(value);
- setPickCust(value);
- }
- }}
- renderInput={(params) => (
-
-
-
- {
- if (!e || !dayjs(e).isValid()) {
- setStartdate(dayjs().format('MM-DD-YYYY'));
- return;
- }
- const diffDays = dayjs().diff(dayjs(dayjs(e).format('YYYY-MM-DD')), 'd');
- if (diffDays <= 0) {
- setStartdate(dayjs(e).format('MM-DD-YYYY'));
- setSelectedtime('');
- setPickupSlot(null);
- } else {
- opentoast('Choose an upcoming date', 'warning');
- setStartdate(dayjs().format('MM-DD-YYYY'));
- }
- }}
- disablePast
- slotProps={{
- textField: {
- size: 'small',
- fullWidth: true,
- InputLabelProps: { shrink: true },
- InputProps: {
- startAdornment: (
-
-
- )
- },
- sx: { '& .MuiOutlinedInput-root': { borderRadius: '10px', height: '36px' } }
- }
- }}
- />
-
-
-
- {
- if (!locationid) {
- OpenToast('Please select a Business Location first.', 'warning', 3000);
- return;
- }
- setSlotDropdownOpen(true);
- }}
- onClose={() => setSlotDropdownOpen(false)}
- sx={{
- '& .MuiOutlinedInput-root': {
- borderRadius: '10px',
- height: '36px',
- alignItems: 'center',
- padding: '0 9px !important'
- },
- '& .MuiAutocomplete-input': { padding: '0 !important' }
- }}
- onChange={(e, newValue, reason) => {
- if (reason === 'clear' || !newValue) {
- setSelectedtime(null);
- setPickupSlot(null);
- return;
- }
- if (!newValue.time) {
- OpenToast('This slot has no time configured.', 'warning', 3000);
- return;
- }
- const formattedTime = dayjs(newValue.time, 'HH:mm').format('hh:mm A');
- setSelectedtime(formattedTime);
- const finalDateTime = dayjs(`${startdate} ${formattedTime}`, 'MM-DD-YYYY hh:mm A').format('YYYY-MM-DD hh:mm A');
- setPickupSlot(finalDateTime);
- }}
- getOptionLabel={(option) => (option ? option.name : '')}
- renderInput={(params) => (
-
-
-
- {pickCust ? (
-
-
-
-
-
- {pickCust.locationname || '—'}
-
-
- {pickCust.address || '—'}
-
-
-
- ) : (
- Pickup auto-fills once a Business Location is selected.
- )}
-
-
-
-
- {/* Card: Notes */}
-
-
- Order Notes
- Applied to every order
-
-
-
-
- setOtherinstructions(e.target.value)}
- sx={{
- '& .MuiOutlinedInput-root': {
- borderRadius: '10px',
- height: '36px',
- alignItems: 'center',
- fontSize: '12px',
- background: '#ffffff'
- },
- '& .MuiOutlinedInput-input': { padding: '0 14px !important', fontSize: '12px' }
- }}
- />
-
-
-
-
- {/* Card: Summary + Submit */}
-
-
-
- Bulk Summary
-
-
- Live totals
-
-
- {(() => {
- const metric = ({ icon: Icon, label, value, accent, active }) => (
-
-
-
-
-
- {label}
-
-
- {value}
-
-
-
- );
- return (
-
-
- {metric({
- icon: FaRoute,
- label: 'Distance',
- value: totaldist ? `${totaldist} km` : '—',
- accent: '#0ea5e9',
- active: !!totaldist
- })}
-
-
- {metric({ icon: FaBoxes, label: 'Quantity', value: totalQty || 0, accent: '#10b981', active: !!totalQty })}
-
-
- {metric({
- icon: FaMoneyBillWave,
- label: 'Cash Collect',
- value: `₹${Number(totalCash).toFixed(2)}`,
- accent: '#f59e0b',
- active: !!totalCash
- })}
-
-
- {metric({
- icon: FaTruck,
- label: 'Deliveries',
- value: dropCust.length,
- accent: '#8b5cf6',
- active: dropCust.length > 0
- })}
-
-
- );
- })()}
-
- {dropCust.length > 0 && (
-
- }
- onClick={createorders}
- sx={{ minHeight: '36px !important' }}
- >
- {btnLoading ? (
-
-
-
-
- {/* RIGHT — file / drop preview */}
-
-
- {/* Preview header */}
-
-
-
- {previewMode === 'drops' ? 'Drop List' : previewMode === 'preview' ? 'File Preview' : 'Preview'}
-
-
- {previewMode === 'drops' && (
-
-
-
-
- );
- })()}
-
-
- {fileName && (
-
-
- {fileName}
-
-
- )}
-
- {previewMode === 'preview' && users.length >= 1 && (
-
-
-
- Process & Calculate Distances
-
-
- Click continue to import spreadsheet rows and calculate drop charges.
-
-
-
-
- )}
-
- {/* Scrollable preview body */}
-
- {/* Drops — table */}
- {previewMode === 'drops' && (
-
-
-
-
- )}
-
- {/* File preview — table */}
- {previewMode === 'preview' && (
-
-
-
-
- )}
-
- {/* Empty state */}
- {previewMode === 'empty' &&
- (() => {
- const handleEmptyPick = (val) => {
- if (!prereqOk) {
- OpenToast('Please select a Business Location first.', 'warning', 3000);
- return;
- }
- setUploadType(val);
- setDropCust([]);
- setUsers([]);
- setFileName('');
- if (val === 0) document.getElementById('upload-file')?.click();
- else if (val === 1) {
- setIsCustomerOpen(true);
- setSearchCustList('');
- }
- };
- const tile = ({ value, icon: Icon, title, sub, accent }) => (
- handleEmptyPick(value)}
- onKeyDown={(e) => {
- if (e.key === 'Enter' || e.key === ' ') {
- e.preventDefault();
- handleEmptyPick(value);
- }
- }}
- sx={{
- flex: 1,
- minWidth: 0,
- display: 'flex',
- alignItems: 'center',
- textAlign: 'left',
- gap: 1.25,
- px: 1.5,
- py: 1.25,
- borderRadius: '10px',
- border: '1.5px solid #eef2f6',
- bgcolor: '#fff',
- opacity: prereqOk ? 1 : 0.6,
- cursor: prereqOk ? 'pointer' : 'not-allowed',
- transition: 'all 0.18s ease',
- '&:hover': prereqOk
- ? { borderColor: accent, boxShadow: `0 4px 12px -4px ${accent}40`, transform: 'translateY(-1px)' }
- : undefined
- }}
- >
-
-
-
- {title}
-
- {sub}
-
-
-
- );
- return (
-
-
-
- Choose a Drop Source to begin
-
- Select a source below to import or pick your delivery customers.
-
-
- {tile({
- value: 0,
- icon: MdOutlineCloudUpload,
- title: 'Excel / CSV',
- sub: 'Bulk upload a sheet',
- accent: '#0ea5e9'
- })}
- {tile({ value: 1, icon: FaUsers, title: 'Selection', sub: 'Pick saved customers', accent: '#8b5cf6' })}
-
-
- );
- })()}
-
-
-
-
-
-
-
-
- {/* Saved customers dialog */}
-
-
- );
-};
-
-export default MultipleOrders;
+/* eslint-disable no-unused-vars */
+import React, { useEffect, useMemo, useState, useRef } from 'react';
+import { getAdminPricing, getAdminTenants, getTenantLocations, getAdminCustomers, createExpressBookingBulk } from 'pages/api/doormileApi';
+import { fetchAppLocations as fetchZoneLocations } from 'pages/api/api';
+import AddressAutocomplete from 'components/nearle_components/AddressAutocomplete';
+import Papa from 'papaparse';
+import * as XLSX from 'xlsx';
+import dayjs from 'dayjs';
+import { useNavigate } from 'react-router';
+import { useTheme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { enqueueSnackbar } from 'notistack';
+import { calculateDrivingDistance, calculateTotalCharge } from '../../../utils/distance';
+
+import {
+ FormControl,
+ InputAdornment,
+ Grid,
+ Typography,
+ Stack,
+ Box,
+ Card,
+ Button,
+ TextField,
+ Autocomplete,
+ Divider,
+ Dialog,
+ DialogTitle,
+ DialogContent,
+ Checkbox,
+ DialogActions,
+ CircularProgress,
+ IconButton,
+ OutlinedInput,
+ FormGroup,
+ FormControlLabel,
+ Table,
+ TableContainer,
+ TableCell,
+ TableBody,
+ TableRow,
+ Paper,
+ TableHead,
+ Backdrop,
+ Chip,
+ Tooltip
+} from '@mui/material';
+import { DateInput } from '@astryxdesign/core/DateInput';
+import ClearIcon from '@mui/icons-material/Clear';
+import MyLocationIcon from '@mui/icons-material/MyLocation';
+import {
+ SearchOutlined,
+ CloseOutlined,
+ ExclamationCircleOutlined,
+ FileAddOutlined,
+ ClockCircleOutlined,
+ FileTextOutlined,
+ InboxOutlined
+} from '@ant-design/icons';
+import { Empty } from 'antd';
+import { FaUser, FaTruck, FaUsers, FaPaperPlane, FaRoute, FaMoneyBillWave, FaBoxes, FaReceipt } from 'react-icons/fa';
+import { FaLocationDot } from 'react-icons/fa6';
+import { MdOutlineCloudUpload } from 'react-icons/md';
+
+import Loader from 'components/Loader';
+import CircularLoader from 'components/CircularLoader';
+import './OrdersRedesign.css';
+
+var utc = require('dayjs/plugin/utc');
+dayjs.extend(utc);
+
+const cellHeaderSx = { fontSize: 11.5, fontWeight: 700, color: '#475569', py: 0.75, px: 1 };
+const cellBodySx = { fontSize: 12, py: 0.6, px: 1 };
+
+// GET /admin/tenants/:id/locations carries no `slots` field (no per-location
+// pickup-hours endpoint in the new API) — the pickup-slot Autocomplete used
+// to read tenantLocation.slots, which was always undefined, leaving the
+// dropdown permanently empty and the page unsubmittable. Falls back to a
+// fixed 09:00-21:00 / 30-min window, same rationale as createorder1.js's
+// fetchTiming().
+const buildDefaultPickupSlots = () => {
+ const arr = [];
+ for (let t = dayjs().hour(9).minute(0).second(0); t.hour() < 21 || (t.hour() === 21 && t.minute() === 0); t = t.add(30, 'm')) {
+ arr.push({ name: t.format('hh:mm A'), time: t.format('HH:mm') });
+ }
+ return arr;
+};
+
+// Some saved locations come back with a blank locationname (live-confirmed,
+// e.g. tenant 1's only location) — fall back to the address rather than
+// showing an empty field/option.
+const locationDisplayName = (loc) => (loc?.locationname && loc.locationname.trim()) || loc?.address || 'Unnamed location';
+
+// Tenants with many locations in the same city (DailyGrubs has 23, all in
+// Coimbatore) made a "(city)" suffix useless for telling them apart — sort
+// primary-first then alphabetically; the full address is shown per-option
+// instead (see renderOption on the Business Location Autocomplete below).
+const sortLocations = (locations) =>
+ [...(locations || [])].sort((a, b) => {
+ if (!!a.isprimary !== !!b.isprimary) return a.isprimary ? -1 : 1;
+ return locationDisplayName(a).localeCompare(locationDisplayName(b));
+ });
+
+const MultipleOrders = () => {
+ const navigate = useNavigate();
+ const theme = useTheme();
+ const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+ const locationRef = useRef(null);
+ const userid = localStorage.getItem('userid');
+ // Per express-console-api.md's "Tenant scoping" section: token tenantid
+ // 0/null means Doormile's own staff, who can act on any tenant — NOT an
+ // error state. A client (tenant) login carries a real tenantid and never
+ // needs the picker below. `tenantid` (used throughout this file already)
+ // now resolves to whichever the operator is currently working as.
+ const loggedInTenantId = localStorage.getItem('tenantid');
+ const isStaffLogin = !loggedInTenantId || loggedInTenantId === '0';
+
+ // ============================== state ==============================
+ const [locations, setLocations] = useState([]);
+ const [tenantLocations, setTenantlocations] = useState([]);
+ const [loading, setLoading] = useState(false);
+ const [btnLoading, setBtnLoading] = useState(false);
+
+ const [appId, setAppId] = useState(0);
+ const [locationid, setLocationid] = useState(0);
+ const [locationValue, setLocationValue] = useState(null);
+ const [locationsStatus, setLocationsStatus] = useState('loading');
+ const [selectedTenantId, setSelectedTenantId] = useState(isStaffLogin ? '' : loggedInTenantId);
+ const [staffTenantList, setStaffTenantList] = useState([]);
+ const [staffTenantListLoading, setStaffTenantListLoading] = useState(false);
+ const tenantid = selectedTenantId;
+
+ const [basePrice, setBasePrice] = useState(0);
+ const [pricePerKm, setPricePerKm] = useState(0);
+ const [minKm, setMinKm] = useState(0);
+
+ const [pickCust, setPickCust] = useState(null);
+ const [dropCust, setDropCust] = useState([]);
+ const [customerlist, setCustomerlist] = useState([]);
+ const [isCustomerOpen, setIsCustomerOpen] = useState(false);
+ const [searchCustList, setSearchCustList] = useState('');
+
+ const [startdate, setStartdate] = useState(dayjs().format('MM-DD-YYYY'));
+ const [selectedtime, setSelectedtime] = useState('');
+ const [pickupSlotsList, setPickupSlotsList] = useState(buildDefaultPickupSlots);
+ const [pickupSlot, setPickupSlot] = useState(null);
+
+ const [otherinstructions, setOtherinstructions] = useState('');
+ const [admintoken, setAdmintoken] = useState();
+
+ const [totaldist, settotaldist] = useState(0);
+ const [totalAmt, settotalAmt] = useState(0);
+ const [totalQty, settotalQty] = useState(0);
+ const [totalCash, settotalCash] = useState(0);
+
+ const [uploadType, setUploadType] = useState(null);
+ const [users, setUsers] = useState([]);
+ const [fileName, setFileName] = useState('');
+ const [slotDropdownOpen, setSlotDropdownOpen] = useState(false);
+
+ const toastCacheRef = useRef({});
+
+ // ============================== toast ==============================
+ const opentoast = (message, variant, time) => {
+ enqueueSnackbar(message, {
+ variant,
+ anchorOrigin: { vertical: 'top', horizontal: 'right' },
+ autoHideDuration: time || 1500
+ });
+ };
+
+ const OpenToast = (message, type = 'info', timeout = 3000) => {
+ const key = `${type}-${message}`;
+ if (toastCacheRef.current[key]) return;
+ opentoast(message, type, timeout);
+ toastCacheRef.current[key] = true;
+ setTimeout(() => delete toastCacheRef.current[key], 3000);
+ };
+
+ // ============================== reset chains ==============================
+ useEffect(() => {
+ setLocationid(0);
+ setLocationValue(null);
+ setDropCust([]);
+ setUsers([]);
+ setUploadType(null);
+ setFileName('');
+ setPickupSlotsList(buildDefaultPickupSlots());
+ setPickupSlot(null);
+ setSelectedtime('');
+ }, [appId]);
+
+ // ============================== fetchAppLocations ==============================
+ const fetchAppLocations = async () => {
+ setLoading(true);
+ try {
+ const locations = await fetchZoneLocations();
+ setLocations(locations || []);
+ } catch (err) {
+ OpenToast(err.message, 'error', 5000);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ useEffect(() => {
+ fetchAppLocations();
+ }, []);
+
+ // ============================== fetchTenantPricing ==============================
+ const fetchTenantPricing = async (id) => {
+ try {
+ const pricing = (await getAdminPricing()) || [];
+ // id comes from localStorage (always a string) but pricing.tenantid is
+ // numeric — a strict === here never matched, so basePrice/pricePerKm/
+ // minKm stayed at their 0 defaults and every order priced at ₹0.
+ const match = pricing.find((p) => String(p.tenantid) === String(id));
+ if (match) {
+ setBasePrice(match.baseprice || 0);
+ setPricePerKm(match.priceperkm || 0);
+ setMinKm(match.basedistance || 0);
+ }
+ } catch (err) {
+ // swallow
+ }
+ };
+
+ useEffect(() => {
+ if (tenantid) fetchTenantPricing(tenantid);
+ }, [tenantid]);
+
+ // ============================== gettenantlocations ==============================
+ // Drives what shows in place of the Business Location picker. Previously
+ // this function was only ever called when `tenantid` was truthy, so an
+ // operator on a no-tenant login (the shared admin/developer account has
+ // tenantid: null) got a permanently empty picker with zero feedback — not
+ // even a toast, since the function body that would show one never ran.
+ const gettenantlocations = async (id) => {
+ if (!id) {
+ // Staff login with no tenant picked yet — the picker UI covers this.
+ setLocationsStatus('no-tenant');
+ return;
+ }
+ setLocationsStatus('loading');
+ try {
+ const details = (await getTenantLocations(id)) || [];
+ setTenantlocations(details);
+ if (details.length === 1) {
+ setLocationsStatus('ready');
+ setPickCust(details[0]);
+ setLocationid(details[0].tenantlocationid);
+ setLocationValue(details[0]);
+ } else if (details.length === 0) {
+ setLocationsStatus('empty');
+ opentoast('No saved business locations for this tenant', 'info', 3000);
+ } else {
+ setLocationsStatus('ready');
+ }
+ } catch (err) {
+ // doormileAxios's response interceptor rejects with error.response.data
+ // (not the raw axios error), so the message lives at err.message here.
+ setTenantlocations([]);
+ setLocationsStatus('error');
+ opentoast(err?.message || 'Could not load business locations', 'error', 4000);
+ }
+ };
+
+ useEffect(() => {
+ gettenantlocations(tenantid);
+ }, [tenantid]);
+
+ // ============================== fetchStaffTenantList (Doormile staff picker) ==============================
+ // Only staff logins (loggedInTenantId blank/0) need this — a client login's
+ // tenant is already fixed by their token and this never fetches for them.
+ useEffect(() => {
+ if (!isStaffLogin) return;
+ setStaffTenantListLoading(true);
+ getAdminTenants()
+ .then((tenants) => setStaffTenantList((tenants || []).filter((t) => t.status === 'Active')))
+ .catch((err) => {
+ opentoast(err?.message || 'Could not load tenant list', 'error', 4000);
+ })
+ .finally(() => setStaffTenantListLoading(false));
+ }, []);
+
+ // ============================== clientdetails ==============================
+ // GET /admin/customers (B2C directory) — not /admin/tenantcustomers, which
+ // is an empty, manually-added contact book with no address/coordinates.
+ // This resource auto-grows from real orders (see the identical fix on
+ // createorder1.js's Saved Contacts) and has a confirmed live shape of
+ // { appcustomerid, createdat, email, name, phone, totalbookings } — no
+ // search/query param exists, so it's fetched once and filtered in-memory.
+ const clientdetails = async () => {
+ try {
+ const customers = (await getAdminCustomers()) || [];
+ setCustomerlist(customers);
+ } catch (err) {
+ opentoast('server error', 'warning');
+ }
+ };
+
+ useEffect(() => {
+ if (!tenantid || !isCustomerOpen) return;
+ clientdetails();
+ }, [tenantid, isCustomerOpen]);
+
+ const filteredCustomerList = useMemo(() => {
+ const q = searchCustList.trim().toLowerCase();
+ if (!q) return customerlist;
+ return customerlist.filter((c) => c.name?.toLowerCase().includes(q) || c.phone?.includes(searchCustList));
+ }, [customerlist, searchCustList]);
+
+ // ============================== totals ==============================
+ useEffect(() => {
+ let a1 = 0,
+ a2 = 0,
+ a3 = 0,
+ a4 = 0;
+ dropCust.forEach((c) => {
+ a1 += Number(c.distance) || 0;
+ a2 += Number(c.totalcharge) || 0;
+ a3 += Number(c.quantity) || 0;
+ a4 += Number(c.collectionamt) || 0;
+ });
+ settotaldist(a1);
+ settotalAmt(a2);
+ settotalQty(a3);
+ settotalCash(a4);
+ }, [dropCust]);
+
+ // ============================== distance (Google) ==============================
+ // ============================== distance (OSRM/Haversine) ==============================
+ const calculateDistance = async (customer) => {
+ try {
+ if (!customer || typeof customer !== 'object') throw new Error('Invalid customer data.');
+ if (!pickCust || typeof pickCust !== 'object') throw new Error('Origin (pickCust) data missing or invalid.');
+
+ const roundedDistance = await calculateDrivingDistance(pickCust, customer);
+ const totalcharge = calculateTotalCharge(roundedDistance, basePrice, pricePerKm, minKm);
+ return { roundedDistance, totalcharge };
+ } catch (error) {
+ if (error.message.includes('Origin') || error.message.includes('customer') || error.message.includes('coordinates')) {
+ OpenToast('Missing or invalid input data for distance calculation.', 'warning', 3000);
+ } else {
+ OpenToast('Unexpected error during distance calculation.', 'error', 3000);
+ }
+ throw error;
+ }
+ };
+
+ // ============================== checkbox handlers ==============================
+ // GET /admin/customers has no address/coordinates at all, so a saved
+ // customer can no longer be distance-calculated at selection time (that's
+ // what used to throw "Invalid coordinates" and silently drop the row every
+ // time). Add the row immediately instead — its Address cell renders an
+ // editable AddressAutocomplete (see the Drop List table) until the
+ // operator picks a real address, which is what fills in lat/lng and lets
+ // distance/charge be computed per-row.
+ const handleCheckboxChange = (event, customer) => {
+ const rowkey = `sel-${customer.appcustomerid}`;
+ if (event.target.checked) {
+ setDropCust((prev) => {
+ if (prev.some((c) => c._rowkey === rowkey)) return prev;
+ return [
+ ...prev,
+ {
+ _rowkey: rowkey,
+ appcustomerid: customer.appcustomerid,
+ firstname: customer.name || '',
+ contactno: customer.phone || '',
+ address: '',
+ city: '',
+ postcode: '',
+ latitude: null,
+ longitude: null,
+ distance: 0,
+ totalcharge: 0,
+ quantity: 0,
+ collectionamt: 0
+ }
+ ];
+ });
+ } else {
+ setDropCust((prev) => prev.filter((c) => c._rowkey !== rowkey));
+ }
+ };
+
+ // Still used by the CSV "Continue" promotion and the Drop List remove
+ // button. Safe to keep calling calculateDistance here — CSV rows always
+ // carry real latitude/longitude from the sheet, unlike Selection rows.
+ const handleCheckboxChange1 = async (customer) => {
+ const rowkey = customer._rowkey;
+ let wasSelected = false;
+ setDropCust((prev) => {
+ wasSelected = prev.some((c) => c._rowkey === rowkey);
+ if (wasSelected) return prev.filter((c) => c._rowkey !== rowkey);
+ return prev;
+ });
+ if (wasSelected) return;
+ setLoading(true);
+ try {
+ const { roundedDistance, totalcharge } = await calculateDistance(customer);
+ setDropCust((prev) => {
+ if (prev.some((c) => c._rowkey === rowkey)) return prev;
+ return [...prev, { ...customer, distance: roundedDistance, totalcharge }];
+ });
+ } catch (err) {
+ console.error('Failed to calculate distance:', err);
+ OpenToast(`Could not calculate distance for ${customer.firstname || 'this row'}`, 'warning', 3000);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ // Parses the AddressAutocomplete `place` result (see createorder1.js's
+ // handleDropPlaceSelected for the same pattern) for one Drop List row,
+ // updates that row's address/coordinates, then recomputes its distance and
+ // charge now that coordinates finally exist.
+ const handleRowPlaceSelected = async (rowkey, place) => {
+ const parsed = { suburb: '', city: '', postcode: '' };
+ place.address_components.forEach((component) => {
+ component.types.forEach((type) => {
+ switch (type) {
+ case 'sublocality_level_1':
+ case 'sublocality':
+ parsed.suburb = component.long_name;
+ break;
+ case 'locality':
+ parsed.city = component.long_name;
+ break;
+ case 'postal_code':
+ parsed.postcode = component.long_name;
+ break;
+ }
+ });
+ });
+ const latitude = place.geometry.location.lat();
+ const longitude = place.geometry.location.lng();
+ const address = place.formatted_address || '';
+
+ setDropCust((prev) =>
+ prev.map((c) => (c._rowkey === rowkey ? { ...c, address, city: parsed.city, postcode: parsed.postcode, latitude, longitude } : c))
+ );
+
+ try {
+ const { roundedDistance, totalcharge } = await calculateDistance({ latitude, longitude });
+ setDropCust((prev) => prev.map((c) => (c._rowkey === rowkey ? { ...c, distance: roundedDistance, totalcharge } : c)));
+ } catch (err) {
+ console.error('Failed to calculate distance:', err);
+ }
+ };
+
+ // No zone-admin-token or bulk-notify endpoint in the new API.
+ const fetchAppAdminTokens = async () => setAdmintoken([]);
+
+ useEffect(() => {
+ if (appId) fetchAppAdminTokens();
+ }, [appId]);
+
+ // ============================== sendnotifications ==============================
+ const sendnotifications = async () => {};
+
+ // ============================== CSV / XLSX upload ==============================
+ const cleanReceiverName = (name) => (typeof name === 'string' ? name.replace(/^[\d.\s]+/, '').trim() : name);
+ const normalizeHeader = (header) => header?.toString().trim().toLowerCase().replace(/\s+/g, '');
+
+ const headerMap = {
+ 'pickupdate(yyyy-mmm-dd)': 'date',
+ 'sendername*': 'locationname',
+ 'senderphone*': 'locationcontact',
+ 'senderaddress*': 'locationaddress',
+ 'receivername*': 'firstname',
+ receiverphone: 'contactno',
+ 'receiveralternatephone*': 'altcontactno',
+ receiverfulladdress: 'address',
+ // Best-effort — no live sample sheet to confirm these are the tenant's
+ // actual column headers. Without them deliverycity/deliverypincode in
+ // the submit payload were always sent blank; if these names are wrong,
+ // behavior is unchanged from before (still blank), not worse.
+ receivercity: 'city',
+ receiverpincode: 'postcode',
+ receiverlatitude: 'latitude',
+ receiverlongitude: 'longitude',
+ 'itemdescription*': 'description',
+ Quantity: 'quantity',
+ ' Collect Cash': 'collectionamt'
+ };
+
+ const handleFileDirectUpload = (event) => {
+ try {
+ const file = event.target.files?.[0];
+ if (!file) {
+ opentoast('No file selected.', 'warning');
+ return;
+ }
+ const fileNameLower = file.name.toLowerCase();
+ const isCSV = fileNameLower.endsWith('.csv');
+ const isExcel = fileNameLower.endsWith('.xls') || fileNameLower.endsWith('.xlsx');
+ if (!isCSV && !isExcel) {
+ opentoast('Invalid file type. Please upload a CSV or Excel file.', 'warning');
+ return;
+ }
+
+ const processData = (data, headers) => {
+ const normalizedMap = {};
+ for (const key in headerMap) normalizedMap[normalizeHeader(key)] = headerMap[key];
+ const mappedData = data.map((row, idx) => {
+ const newRow = { _rowkey: `csv-${idx}` };
+ for (const key in row) {
+ const cleanKey = normalizeHeader(key);
+ const newKey = normalizedMap[cleanKey] || cleanKey;
+ let value = row[key];
+ if (newKey === 'firstname') value = cleanReceiverName(value);
+ newRow[newKey] = value;
+ }
+ return newRow;
+ });
+ const requiredCols = Object.keys(headerMap).filter((k) => k.trim().endsWith('*'));
+ const missingRequired = requiredCols.filter((clientCol) => !headers.includes(normalizeHeader(clientCol)));
+ if (missingRequired.length > 0) {
+ opentoast(`Missing columns: ${missingRequired.join(', ')}`, 'warning', 3000);
+ }
+ setUsers(mappedData);
+ opentoast('File uploaded successfully', 'success', 2000);
+ opentoast('Press Continue to add as drop customers', 'info', 2500);
+ };
+
+ if (isCSV) {
+ Papa.parse(file, {
+ header: true,
+ dynamicTyping: true,
+ skipEmptyLines: true,
+ complete: (results) => {
+ if (!results.data?.length) {
+ opentoast('CSV file is empty or has no valid rows.', 'warning');
+ setUsers([]);
+ return;
+ }
+ processData(results.data, results.meta.fields.map(normalizeHeader));
+ },
+ error: (error) => opentoast(`CSV parsing failed: ${error.message}`, 'warning')
+ });
+ }
+ if (isExcel) {
+ const reader = new FileReader();
+ reader.onload = (e) => {
+ try {
+ const workbook = XLSX.read(e.target.result, { type: 'binary' });
+ const jsonData = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]], { defval: '' });
+ if (!jsonData?.length) {
+ opentoast('Excel file is empty or invalid.', 'warning');
+ setUsers([]);
+ return;
+ }
+ processData(jsonData, Object.keys(jsonData[0]).map(normalizeHeader));
+ } catch (err) {
+ opentoast(`Error reading Excel: ${err.message}`, 'warning');
+ }
+ };
+ reader.readAsBinaryString(file);
+ }
+ } catch (err) {
+ opentoast(`Unexpected error: ${err.message}`, 'warning');
+ }
+ };
+
+ const removeFileExtension = (n) => n.replace(/\.[^/.]+$/, '');
+ const onFileChange = (event) => {
+ const file = event.target.files[0];
+ if (!file) return;
+ const cleanedName = removeFileExtension(file.name);
+ setFileName((prev) => (prev ? `${prev}, ${cleanedName}` : cleanedName));
+ handleFileDirectUpload(event);
+ };
+
+ // ============================== row editors ==============================
+ const handleQuantityChange = (rowkey, value) => {
+ setDropCust((prev) => prev.map((c) => (c._rowkey === rowkey ? { ...c, quantity: Number(value) || 0 } : c)));
+ };
+ const handleCollectionAmtChange = (rowkey, value) => {
+ setDropCust((prev) => prev.map((c) => (c._rowkey === rowkey ? { ...c, collectionamt: Number(value) || 0 } : c)));
+ };
+
+ // ============================== buildDeliveryTime ==============================
+ const buildDeliveryTime = () => {
+ if (pickupSlot) {
+ const parsed = dayjs(pickupSlot, ['YYYY-MM-DD hh:mm A', 'YYYY-MM-DD HH:mm:ss']);
+ if (parsed.isValid()) return parsed.format('YYYY-MM-DD HH:mm:ss');
+ }
+ if (startdate && selectedtime) {
+ const parsed = dayjs(`${dayjs(startdate).format('YYYY-MM-DD')} ${selectedtime}`, ['YYYY-MM-DD hh:mm A', 'YYYY-MM-DD HH:mm:ss']);
+ if (parsed.isValid()) return parsed.format('YYYY-MM-DD HH:mm:ss');
+ }
+ return dayjs().format('YYYY-MM-DD HH:mm:ss');
+ };
+
+ // ============================== createorders ==============================
+ const createorders = async () => {
+ if (!tenantid) {
+ opentoast('Client not found. Please re-login.', 'warning');
+ return;
+ }
+ if (!pickCust) {
+ opentoast('Pickup location required', 'warning');
+ return;
+ }
+ if (!pickupSlot) {
+ opentoast('Select a pickup slot', 'warning');
+ return;
+ }
+ if (!dropCust.length) {
+ opentoast('Add at least one drop customer', 'warning');
+ return;
+ }
+ // A Selection-sourced row (picked from Saved Customers) starts with no
+ // address/coordinates until the operator fills in its Address cell —
+ // block submit rather than send a booking with lat/lng silently at 0.
+ const incomplete = dropCust.find((c) => c.latitude == null || c.longitude == null);
+ if (incomplete) {
+ opentoast(`Add a delivery address for ${incomplete.firstname || 'a selected customer'} before submitting`, 'warning', 4000);
+ return;
+ }
+
+ const deliverytime = buildDeliveryTime();
+ // POST /admin/expressbooking/bulk takes { bookings: [...] } where each
+ // entry is a flat booking object (tenantid, pickup* fields, customer_*,
+ // delivery*, service_option, finalprice, notes, parcels[]) — not the old
+ // per-row orders/pickup/drop shape.
+ // tenantid comes from the logged-in session (see the top-level `tenantid`
+ // const above), not from pickCust — pickCust is a tenant *location*
+ // object (GET /admin/tenants/:id/locations) and was never confirmed to
+ // carry a tenantid back-reference, so `pickCust.tenantid` was silently
+ // undefined on every submit.
+ //
+ // Always send raw pickup* fields, never pickuplocationid — live-confirmed
+ // pickuplocationid currently 500s on POST /admin/expressbooking (and by
+ // extension the bulk endpoint, same handler); a saved location's own
+ // address/pincode/city/lat/lng (already on pickCust) work fine sent raw.
+ // Note: pickCust.pincode, not .postcode — that was also wrong (the real
+ // GET /admin/tenants/:id/locations field is `pincode`).
+ const bookings = dropCust.map((customer) => ({
+ tenantid: Number(tenantid),
+ pickupaddress: pickCust.address || '',
+ pickuppincode: pickCust.pincode || '',
+ pickupcity: pickCust.city || '',
+ pickuplatitude: Number(pickCust.latitude) || 0,
+ pickuplongitude: Number(pickCust.longitude) || 0,
+ customer_phone: customer.contactno?.toString() || '',
+ customer_name: customer.firstname || '',
+ deliveryaddress: customer.address || '',
+ deliverypincode: customer.postcode || '',
+ deliverycity: customer.city || '',
+ deliverylatitude: Number(customer.latitude) || 0,
+ deliverylongitude: Number(customer.longitude) || 0,
+ deliverytime,
+ service_option: 'Normal',
+ finalprice: +customer.totalcharge || 0,
+ notes: otherinstructions || '',
+ parcels: [{ itemcategory: 'General', itemdescription: 'Order', declaredvalue: +customer.totalcharge || 0 }]
+ }));
+
+ setLoading(true);
+ setBtnLoading(true);
+ try {
+ const res = await createExpressBookingBulk(bookings);
+ if (res.success) {
+ opentoast('Orders Created Successfully', 'success', 2000);
+ navigate('/doormile/orders');
+ } else {
+ opentoast(res?.message || 'Order creation failed. Please try again.', 'warning', 3000);
+ }
+ } catch (err) {
+ // doormileAxios's response interceptor rejects with error.response.data
+ // (not the raw axios error), so the message lives at err.message here —
+ // err.response was always undefined at this point, so this always fell
+ // through to the generic "Something went wrong." fallback before.
+ opentoast(err?.message || 'Something went wrong.', 'error', 3000);
+ } finally {
+ setLoading(false);
+ setBtnLoading(false);
+ }
+ };
+
+ // ============================== derived ==============================
+ const canSubmit = !!locationid && !!pickupSlot && dropCust.length > 0;
+ const prereqOk = !!locationid;
+ const previewMode = dropCust.length > 0 ? 'drops' : users.length > 0 ? 'preview' : 'empty';
+
+ // ============================== render ==============================
+ return (
+ <>
+ {loading && t.zIndex.drawer + 1 }} open={btnLoading}>
+
+
+
+ {/* Title bar */}
+
+
+ Create Multiple Orders
+
+
+ Bulk-create deliveries from CSV/Excel or saved customers.
+
+
+
+ {/* 50 / 50 workspace */}
+
+ {/* LEFT — input fields */}
+
+ {/* Card: Schedule & Pickup */}
+
+
+
+ Schedule & Pickup
+
+
+
+
+ {locationsStatus === 'loading' ? (
+
+ Loading business locations…
+
+ ) : locationsStatus === 'no-tenant' && isStaffLogin ? (
+ // Staff login (express-console-api.md: token tenantid
+ // 0/null = "Doormile's own staff... sees everything, all
+ // tenants") — pick which tenant this bulk order is for.
+ option?.tenantname || ''}
+ isOptionEqualToValue={(option, value) => option?.tenantid === value?.tenantid}
+ onChange={(event, value) => setSelectedTenantId(value ? String(value.tenantid) : '')}
+ renderInput={(params) => (
+
+ This login has no tenant assigned — sign in as a tenant user
+
+ ) : locationsStatus === 'error' ? (
+ gettenantlocations(tenantid)}
+ sx={{
+ display: 'flex',
+ alignItems: 'center',
+ px: 1.5,
+ py: 1,
+ borderRadius: '10px',
+ bgcolor: '#fef2f2',
+ border: '1px solid #fecaca',
+ color: '#b91c1c',
+ fontWeight: 600,
+ fontSize: 12.5,
+ cursor: 'pointer'
+ }}
+ >
+ Could not load business locations — tap to retry
+
+ ) : locationsStatus === 'empty' ? (
+
+ No saved business locations for this tenant
+
+ ) : tenantLocations?.length === 1 ? (
+
+ (option ? locationDisplayName(option) : '')}
+ renderOption={(props, option) => (
+
+
+
+
+ {locationDisplayName(option)}
+
+ {option.isprimary && (
+
+ PRIMARY
+
+ )}
+
+
+ {option.address || option.city || ''}
+
+
+
+ )}
+ value={locationValue}
+ onChange={(event, value, reason) => {
+ if (reason === 'clear' || !value) {
+ setLocationid(0);
+ setLocationValue(null);
+ setPickCust(null);
+ } else {
+ setLocationid(value.tenantlocationid || 0);
+ setLocationValue(value);
+ setPickCust(value);
+ }
+ }}
+ renderInput={(params) => (
+
+
+ {
+ if (!v || !dayjs(v).isValid()) {
+ setStartdate(dayjs().format('MM-DD-YYYY'));
+ return;
+ }
+ const diffDays = dayjs().diff(dayjs(v), 'd');
+ if (diffDays <= 0) {
+ setStartdate(dayjs(v).format('MM-DD-YYYY'));
+ setSelectedtime('');
+ setPickupSlot(null);
+ } else {
+ opentoast('Choose an upcoming date', 'warning');
+ setStartdate(dayjs().format('MM-DD-YYYY'));
+ }
+ }}
+ />
+
+
+ {
+ if (!locationid) {
+ OpenToast('Please select a Business Location first.', 'warning', 3000);
+ return;
+ }
+ setSlotDropdownOpen(true);
+ }}
+ onClose={() => setSlotDropdownOpen(false)}
+ sx={{
+ '& .MuiOutlinedInput-root': {
+ borderRadius: '10px',
+ height: '36px',
+ alignItems: 'center',
+ padding: '0 9px !important'
+ },
+ '& .MuiAutocomplete-input': { padding: '0 !important' }
+ }}
+ onChange={(e, newValue, reason) => {
+ if (reason === 'clear' || !newValue) {
+ setSelectedtime(null);
+ setPickupSlot(null);
+ return;
+ }
+ if (!newValue.time) {
+ OpenToast('This slot has no time configured.', 'warning', 3000);
+ return;
+ }
+ const formattedTime = dayjs(newValue.time, 'HH:mm').format('hh:mm A');
+ setSelectedtime(formattedTime);
+ const finalDateTime = dayjs(`${startdate} ${formattedTime}`, 'MM-DD-YYYY hh:mm A').format('YYYY-MM-DD hh:mm A');
+ setPickupSlot(finalDateTime);
+ }}
+ getOptionLabel={(option) => (option ? option.name : '')}
+ renderInput={(params) => (
+
+
+
+ {pickCust ? (
+
+
+
+
+
+ {pickCust.locationname || '—'}
+
+
+ {pickCust.address || '—'}
+
+
+
+ ) : (
+ Pickup auto-fills once a Business Location is selected.
+ )}
+
+
+
+
+ {/* Card: Notes */}
+
+
+ Order Notes
+ Applied to every order
+
+
+
+
+ setOtherinstructions(e.target.value)}
+ sx={{
+ '& .MuiOutlinedInput-root': {
+ borderRadius: '10px',
+ height: '36px',
+ alignItems: 'center',
+ fontSize: '12px',
+ background: '#ffffff'
+ },
+ '& .MuiOutlinedInput-input': { padding: '0 14px !important', fontSize: '12px' }
+ }}
+ />
+
+
+
+
+ {/* Card: Summary + Submit */}
+
+
+
+ Bulk Summary
+
+
+ Live totals
+
+
+ {(() => {
+ const metric = ({ icon: Icon, label, value, accent, active }) => (
+
+
+
+
+
+ {label}
+
+
+ {value}
+
+
+
+ );
+ return (
+
+
+ {metric({
+ icon: FaRoute,
+ label: 'Distance',
+ value: totaldist ? `${totaldist} km` : '—',
+ accent: '#0ea5e9',
+ active: !!totaldist
+ })}
+
+
+ {metric({ icon: FaBoxes, label: 'Quantity', value: totalQty || 0, accent: '#10b981', active: !!totalQty })}
+
+
+ {metric({
+ icon: FaMoneyBillWave,
+ label: 'Cash Collect',
+ value: `₹${Number(totalCash).toFixed(2)}`,
+ accent: '#f59e0b',
+ active: !!totalCash
+ })}
+
+
+ {metric({
+ icon: FaTruck,
+ label: 'Deliveries',
+ value: dropCust.length,
+ accent: '#8b5cf6',
+ active: dropCust.length > 0
+ })}
+
+
+ );
+ })()}
+
+ {dropCust.length > 0 && (
+
+ }
+ onClick={createorders}
+ sx={{ minHeight: '36px !important' }}
+ >
+ {btnLoading ? (
+
+
+
+
+ {/* RIGHT — file / drop preview */}
+
+
+ {/* Preview header */}
+
+
+
+ {previewMode === 'drops' ? 'Drop List' : previewMode === 'preview' ? 'File Preview' : 'Preview'}
+
+
+ {previewMode === 'drops' && (
+
+
+
+
+ );
+ })()}
+
+
+ {fileName && (
+
+
+ {fileName}
+
+
+ )}
+
+ {previewMode === 'preview' && users.length >= 1 && (
+
+
+
+ Process & Calculate Distances
+
+
+ Click continue to import spreadsheet rows and calculate drop charges.
+
+
+
+
+ )}
+
+ {/* Scrollable preview body */}
+
+ {/* Drops — table */}
+ {previewMode === 'drops' && (
+
+
+
+
+ )}
+
+ {/* File preview — table */}
+ {previewMode === 'preview' && (
+
+
+
+
+ )}
+
+ {/* Empty state */}
+ {previewMode === 'empty' &&
+ (() => {
+ const handleEmptyPick = (val) => {
+ if (!prereqOk) {
+ OpenToast('Please select a Business Location first.', 'warning', 3000);
+ return;
+ }
+ setUploadType(val);
+ setDropCust([]);
+ setUsers([]);
+ setFileName('');
+ if (val === 0) document.getElementById('upload-file')?.click();
+ else if (val === 1) {
+ setIsCustomerOpen(true);
+ setSearchCustList('');
+ }
+ };
+ const tile = ({ value, icon: Icon, title, sub, accent }) => (
+ handleEmptyPick(value)}
+ onKeyDown={(e) => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault();
+ handleEmptyPick(value);
+ }
+ }}
+ sx={{
+ flex: 1,
+ minWidth: 0,
+ display: 'flex',
+ alignItems: 'center',
+ textAlign: 'left',
+ gap: 1.25,
+ px: 1.5,
+ py: 1.25,
+ borderRadius: '10px',
+ border: '1.5px solid #eef2f6',
+ bgcolor: '#fff',
+ opacity: prereqOk ? 1 : 0.6,
+ cursor: prereqOk ? 'pointer' : 'not-allowed',
+ transition: 'all 0.18s ease',
+ '&:hover': prereqOk
+ ? { borderColor: accent, boxShadow: `0 4px 12px -4px ${accent}40`, transform: 'translateY(-1px)' }
+ : undefined
+ }}
+ >
+
+
+
+ {title}
+
+ {sub}
+
+
+
+ );
+ return (
+
+
+
+ Choose a Drop Source to begin
+
+ Select a source below to import or pick your delivery customers.
+
+
+ {tile({
+ value: 0,
+ icon: MdOutlineCloudUpload,
+ title: 'Excel / CSV',
+ sub: 'Bulk upload a sheet',
+ accent: '#0ea5e9'
+ })}
+ {tile({ value: 1, icon: FaUsers, title: 'Selection', sub: 'Pick saved customers', accent: '#8b5cf6' })}
+
+
+ );
+ })()}
+
+
+
+
+
+
+
+
+ {/* Saved customers dialog */}
+
+
+ );
+};
+
+export default MultipleOrders;
diff --git a/src/pages/nearle/orders/orders.js b/src/pages/nearle/orders/orders.js
index edafb83..caaaf65 100644
--- a/src/pages/nearle/orders/orders.js
+++ b/src/pages/nearle/orders/orders.js
@@ -704,6 +704,7 @@ const Orders = () => {
-
- newValue && setSelectedDate(newValue)}
- slotProps={{
- textField: {
- size: 'small',
- sx: {
- width: 180,
- '& .MuiOutlinedInput-root': {
- borderRadius: '20px',
- '& fieldset': { borderColor: DT.borderSubtle },
- '&:hover fieldset': { borderColor: BRAND },
- '&.Mui-focused fieldset': { borderColor: BRAND }
- }
- }
- }
- }}
- />
-
+ v && setSelectedDate(dayjs(v))}
+ />
diff --git a/src/pages/nearle/riders/riders.js b/src/pages/nearle/riders/riders.js
index c0f941b..a4684f5 100644
--- a/src/pages/nearle/riders/riders.js
+++ b/src/pages/nearle/riders/riders.js
@@ -34,9 +34,7 @@ import { useTheme } from '@mui/material/styles';
var utc = require('dayjs/plugin/utc');
import dayjs from 'dayjs';
dayjs.extend(utc);
-import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import { DateInput } from '@astryxdesign/core/DateInput';
import {
MdCheckCircle,
MdCancel,
@@ -420,8 +418,8 @@ const Riders = () => {
-
- newValue && setHistoryDate(newValue)}
- slotProps={{
- textField: {
- size: 'small',
- sx: {
- width: 180,
- '& .MuiOutlinedInput-root': {
- borderRadius: '20px',
- '& fieldset': { borderColor: DT.borderSubtle },
- '&:hover fieldset': { borderColor: BRAND },
- '&.Mui-focused fieldset': { borderColor: BRAND }
- }
- }
- }
- }}
- />
-
+ v && setHistoryDate(dayjs(v))}
+ />
diff --git a/src/themes/dt/status.js b/src/themes/dt/status.js
new file mode 100644
index 0000000..4cfafd3
--- /dev/null
+++ b/src/themes/dt/status.js
@@ -0,0 +1,95 @@
+// ============================================================================
+// Canonical lifecycle-status registry.
+//
+// Five pages (deliveries, orders, ordersDetails, Tenants, and the dispatch
+// panels) each carried their own private `STATUS_META` map. They agreed on the
+// hexes but disagreed on everything else — orders.js keys off the raw
+// `GET /admin/bookings` enum (`pending_pickup`, `miler_assigned`, …) while
+// deliveries.js keys off api.js's generic `pending`/`accepted`/`delivered`
+// mapping, so the same order rendered under two different labels depending on
+// which page you were looking at.
+//
+// This module is the one place that knows what a status LOOKS like. It does
+// not know what a status MEANS to a given page — the pending/accepted bucket
+// rules stay in each page's query layer, because those genuinely differ (see
+// the long comment above orders.js's STATUS_TABS).
+//
+// Each entry carries four renderings of the same state so a page never has to
+// pick a colour by hand:
+// color — hex, for the surfaces that take a raw accent (StatCard,
+// AccentAvatar, chart series). Matches CLAUDE.md's status palette.
+// badge — Astryx . Non-semantic tinted variants on purpose:
+// per Astryx's Badge guidance the solid semantic variants
+// (success/warning/error) are for states that demand attention, and
+// a table where every row shouts is a table where nothing does.
+// `cancelled` is the one state that keeps a loud variant.
+// dot — Astryx , which only has five values, so
+// several lifecycle states collapse onto `accent` here.
+// icon — react-icons component (not an element) so callers size it.
+// ============================================================================
+import {
+ MdHourglassEmpty,
+ MdPersonPin,
+ MdLocationOn,
+ MdInventory2,
+ MdRoute,
+ MdSkipNext,
+ MdCheckCircle,
+ MdCancel,
+ MdList,
+ MdHelpOutline
+} from 'react-icons/md';
+
+export const STATUS_META = {
+ all: { label: 'All', color: '#000000', badge: 'neutral', dot: 'neutral', icon: MdList },
+ pending: { label: 'Pending', color: '#f59e0b', badge: 'yellow', dot: 'warning', icon: MdHourglassEmpty },
+ accepted: { label: 'Accepted', color: '#6366f1', badge: 'blue', dot: 'accent', icon: MdPersonPin },
+ arrived: { label: 'Arrived', color: '#06b6d4', badge: 'cyan', dot: 'accent', icon: MdLocationOn },
+ picked: { label: 'Picked', color: '#8b5cf6', badge: 'purple', dot: 'accent', icon: MdInventory2 },
+ active: { label: 'Active', color: '#14b8a6', badge: 'teal', dot: 'success', icon: MdRoute },
+ skipped: { label: 'Skipped', color: '#f97316', badge: 'orange', dot: 'warning', icon: MdSkipNext },
+ delivered: { label: 'Delivered', color: '#10b981', badge: 'green', dot: 'success', icon: MdCheckCircle },
+ cancelled: { label: 'Cancelled', color: '#ef4444', badge: 'error', dot: 'error', icon: MdCancel },
+ inactive: { label: 'Inactive', color: '#ef4444', badge: 'red', dot: 'error', icon: MdCancel }
+};
+
+// Raw backend enums that render as one of the states above. Kept separate from
+// STATUS_META so the canonical list stays readable and so a page can still ask
+// "is this a known alias?" rather than silently falling back.
+//
+// The booking enums come from `GET /admin/bookings` (confirmed live — see
+// orders.js). `converted_to_consignment` is deliberately `accepted` and not
+// `picked`: it fires when the rider marks pickup COMPLETE, but the operator
+// workflow on the Orders page treats everything before hand-off as assigned.
+export const STATUS_ALIASES = {
+ pending_pickup: 'pending',
+ pending_assignment: 'pending',
+ miler_assigned: 'accepted',
+ pickup_scheduled: 'accepted',
+ converted_to_consignment: 'accepted',
+ in_transit: 'active',
+ intransit: 'active',
+ completed: 'delivered',
+ cancel: 'cancelled',
+ canceled: 'cancelled'
+};
+
+// Fallback for a status the backend invents that nobody has mapped yet. Renders
+// as a neutral badge with the raw string as its label, so an unknown state is
+// visible and debuggable rather than blank.
+const unknownStatus = (status) => ({
+ label: String(status || 'Unknown'),
+ color: '#94a3b8',
+ badge: 'neutral',
+ dot: 'neutral',
+ icon: MdHelpOutline
+});
+
+// Resolve any status string — canonical key, backend alias, or arbitrary
+// casing — to its visual meta. Always returns an object; never throws.
+export function getStatusMeta(status) {
+ if (!status) return unknownStatus(status);
+ const raw = String(status).trim();
+ const key = raw.toLowerCase();
+ return STATUS_META[key] || STATUS_META[STATUS_ALIASES[raw]] || STATUS_META[STATUS_ALIASES[key]] || unknownStatus(raw);
+}
diff --git a/src/themes/dt/tokens.js b/src/themes/dt/tokens.js
index ee0fc7f..e15f95e 100644
--- a/src/themes/dt/tokens.js
+++ b/src/themes/dt/tokens.js
@@ -30,6 +30,12 @@ export const DT = {
// Semantic status palette — lifecycle colours, deliberately distinct from the
// brand (see root CLAUDE.md §6). Pages have historically inlined these hexes;
// new code should reference STATUS so there is one place to change them.
+//
+// This map is the RAW HEX layer, for surfaces that take an arbitrary accent
+// (StatCard, AccentAvatar, chart series). To RENDER a status — a row badge or
+// a filter tab — use `themes/dt/status.js` instead: it resolves backend enums
+// and aliases, and carries the matching Astryx Badge/StatusDot variants and
+// icon alongside the hex. Reach for STATUS only when you need the bare colour.
// This also replaces the `theme.palette.error/success/...` lookups that used
// to pull the same colours out of the MUI theme.
// ---------------------------------------------------------------------------
@@ -57,6 +63,26 @@ export const soft = (c) => a(c, '18'); // soft chip / avatar bg
export const ring = (c) => a(c, '26'); // focus ring color
export const edge = (c) => a(c, '55'); // resting border
+// ---------------------------------------------------------------------------
+// ⛔ LEGACY — MUI-ONLY. Everything from here to the end of this file emits MUI
+// `sx` objects and cannot be used by an Astryx page.
+//
+// They stay only because the pages still awaiting conversion import them
+// (`pillFieldSx` ×3 files, `tableScrollSx` ×4, `tableHeadSx` ×3,
+// `tableRowSx` ×3). They are deleted along with the MUI dependency once the
+// last page converts — do NOT add a new call site.
+//
+// Astryx equivalents:
+// pillFieldSx → nothing. Field chrome comes from the theme
+// (`themes/astryx.js` → components['text-input']), so every
+// input matches without a per-call-site helper.
+// tableScrollSx → from themes/dt/primitives (also supplies
+// the sticky header MUI's TableContainer used to provide).
+// tableHeadSx → — header casing and
+// row rules are the component's own chrome.
+// tableRowSx → same; `hasHover` covers the hover tint.
+// ---------------------------------------------------------------------------
+
// Pill input sx — used by every filter Autocomplete/TextField on a page.
// Neutral, corporate filter field: white surface, hairline border, brand
// focus ring. Width is driven by parent flex/grid so this helper stays
-
- ) : (
-
-
- ) : (
-
+
+ ) : (
+
+
+ ) : (
+
-
- )}
-
-
-
- Total Charge
-
- ₹{Number(totalAmt).toFixed(2)}
-
-
+
+ )}
+
+
+
+ Total Charge
+
+ ₹{Number(totalAmt).toFixed(2)}
+
+