246 lines
8.7 KiB
JavaScript
246 lines
8.7 KiB
JavaScript
import React, { useRef, useEffect } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import {
|
|
MdTwoWheeler,
|
|
MdLocationOn,
|
|
MdRestaurant,
|
|
MdMyLocation,
|
|
MdAccessTime,
|
|
MdInventory2
|
|
} from 'react-icons/md';
|
|
|
|
import { List, ListItem } from '@astryxdesign/core/List';
|
|
import { VStack } from '@astryxdesign/core/VStack';
|
|
import { HStack } from '@astryxdesign/core/HStack';
|
|
import { Center } from '@astryxdesign/core/Center';
|
|
import { Text } from '@astryxdesign/core/Text';
|
|
import { EmptyState } from '@astryxdesign/core/EmptyState';
|
|
import { Tooltip } from '@astryxdesign/core/Tooltip';
|
|
|
|
import { parseDoormileTimestamp } from 'utils/doormileTimestamp';
|
|
import LoaderWithImage from 'components/nearle_components/LoaderWithImage';
|
|
import StatusBadge from 'components/nearle_components/StatusBadge';
|
|
import { AccentAvatar } from 'themes/dt/primitives';
|
|
import { getActiveOrder } from './dispatchShared';
|
|
import { OpenToast } from 'components/third-party/OpenToast';
|
|
|
|
// ==============================|| ACTIVE DELIVERIES (sidebar) ||============================== //
|
|
// Rows, not cards. Astryx's design rule is that dense operator data reads as
|
|
// edge-to-edge rows — the old `.adcard` bordered cards cost ~16px of chrome per
|
|
// delivery, which is a lot of scrolling once a slot has 20+ riders out.
|
|
//
|
|
// Status comes from <StatusBadge> (themes/dt/status.js), which is now the only
|
|
// status-colour table in this folder — dispatchShared's rival copy has been
|
|
// deleted and its getStatusStyle reduced to an adapter over the same source.
|
|
|
|
// Small labelled metric — icon + value, used for the distance/ETA pair.
|
|
// The old markup carried a native `title` for the label ("Distance to drop");
|
|
// Astryx's BaseProps deliberately omits `title`, so the affordance moves to the
|
|
// real <Tooltip> rather than silently disappearing onto a dropped attribute.
|
|
const Metric = ({ icon, children, label }) => (
|
|
<Tooltip content={label}>
|
|
<HStack gap={0.5} vAlign="center">
|
|
<Center isInline width={14} height={14} style={{ color: 'var(--color-icon-secondary)' }}>
|
|
{icon}
|
|
</Center>
|
|
<Text size="sm" type="supporting" hasTabularNumbers>
|
|
{children}
|
|
</Text>
|
|
</HStack>
|
|
</Tooltip>
|
|
);
|
|
|
|
Metric.propTypes = {
|
|
icon: PropTypes.node,
|
|
children: PropTypes.node,
|
|
label: PropTypes.string
|
|
};
|
|
|
|
// One line of secondary context (rider / drop area / pickup) under the customer.
|
|
// `maxLines={1}` turns on Text's own truncate tooltip, which replaces the
|
|
// `title` the old spans used to show the full value when clipped.
|
|
const ContextLine = ({ icon, children }) => (
|
|
<HStack gap={1} vAlign="center">
|
|
<Center isInline width={13} height={13} style={{ flexShrink: 0, color: 'var(--color-icon-secondary)' }}>
|
|
{icon}
|
|
</Center>
|
|
<Text size="sm" type="supporting" maxLines={1}>
|
|
{children}
|
|
</Text>
|
|
</HStack>
|
|
);
|
|
|
|
ContextLine.propTypes = {
|
|
icon: PropTypes.node,
|
|
children: PropTypes.node
|
|
};
|
|
|
|
const ActiveSection = ({
|
|
visibleRiders,
|
|
riders,
|
|
focusedStop,
|
|
handleRiderFocus,
|
|
setFocusedStop,
|
|
calculateEstMeters,
|
|
getRiderColor,
|
|
formatMeters,
|
|
isLoading
|
|
}) => {
|
|
// Sort by live distance ascending (closest drop-off first; null/unknown last)
|
|
const activeDeliveries = visibleRiders
|
|
.map((r) => getActiveOrder(r.orders))
|
|
.filter(Boolean)
|
|
.sort((a, b) => {
|
|
const mA = calculateEstMeters(a.rider_id || a.userid, a) ?? Infinity;
|
|
const mB = calculateEstMeters(b.rider_id || b.userid, b) ?? Infinity;
|
|
return mA - mB;
|
|
});
|
|
|
|
// Toast notifications: detect status transitions across renders
|
|
const prevStatusMapRef = useRef(null);
|
|
|
|
useEffect(() => {
|
|
const currentMap = {};
|
|
visibleRiders.forEach((r) => {
|
|
(r.orders || []).forEach((o) => {
|
|
currentMap[String(o.orderid)] = {
|
|
status: String(o.orderstatus || '').toLowerCase(),
|
|
riderName: o.rider_name || o.ridername || 'Rider',
|
|
customer: o.deliverycustomer || o.customername || `Order #${o.orderid}`
|
|
};
|
|
});
|
|
});
|
|
|
|
const prev = prevStatusMapRef.current;
|
|
if (prev !== null) {
|
|
Object.entries(currentMap).forEach(([oid, cur]) => {
|
|
const old = prev[oid];
|
|
if (!old) {
|
|
// Brand-new order that is already active → rider has taken a new order
|
|
if (cur.status === 'active') {
|
|
OpenToast(`🛵 ${cur.riderName} is now delivering to ${cur.customer}`, 'success', 3000);
|
|
}
|
|
return;
|
|
}
|
|
// Rider transitioned into active → started heading to customer
|
|
if (old.status !== 'active' && cur.status === 'active') {
|
|
OpenToast(`🛵 ${cur.riderName} is now delivering to ${cur.customer}`, 'success', 3000);
|
|
}
|
|
// Rider delivered → reached customer location
|
|
if (old.status === 'active' && cur.status === 'delivered') {
|
|
OpenToast(`${cur.riderName} has reached ${cur.customer}'s location`, 'info', 3000);
|
|
}
|
|
});
|
|
}
|
|
|
|
prevStatusMapRef.current = currentMap;
|
|
}, [visibleRiders]);
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<VStack gap={2} padding={4} hAlign="center" vAlign="center" minHeight={200}>
|
|
<LoaderWithImage size={44} imgSize={24} />
|
|
<Text type="supporting">Loading active deliveries…</Text>
|
|
</VStack>
|
|
);
|
|
}
|
|
|
|
if (activeDeliveries.length === 0) {
|
|
return (
|
|
<EmptyState
|
|
title="No active deliveries"
|
|
description="No deliveries are currently in progress for this slot."
|
|
icon={<MdInventory2 size={28} />}
|
|
/>
|
|
);
|
|
}
|
|
|
|
const renderActiveDelivery = (o) => {
|
|
const rid = o.rider_id || o.userid;
|
|
const rider = riders.find((r) => String(r.id) === String(rid));
|
|
const color = getRiderColor(rid);
|
|
const lat = parseFloat(o.droplat || o.deliverylat);
|
|
const lon = parseFloat(o.droplon || o.deliverylong);
|
|
const canFocus = Number.isFinite(lat) && Number.isFinite(lon);
|
|
const estMeters = calculateEstMeters(rid, o);
|
|
const customer = o.deliverycustomer || o.customername || `Order #${o.orderid}`;
|
|
const dropArea = o.deliverysuburb || o.deliveryaddress || o.zone_name || '';
|
|
const riderName = o.rider_name || o.ridername || 'Unassigned';
|
|
const isSelected = canFocus && focusedStop && String(focusedStop.orderid) === String(o.orderid);
|
|
const initials =
|
|
riderName
|
|
.split(/\s+/)
|
|
.filter(Boolean)
|
|
.slice(0, 2)
|
|
.map((w) => w[0])
|
|
.join('')
|
|
.toUpperCase() || '•';
|
|
|
|
const deliveredAt = o.deliverytime
|
|
? parseDoormileTimestamp(o.deliverytime).isValid()
|
|
? parseDoormileTimestamp(o.deliverytime).format('HH:mm:ss')
|
|
: String(o.deliverytime)
|
|
: null;
|
|
|
|
// 20 km/h is the same city-average assumption the old card used.
|
|
const etaMin = estMeters !== null ? (estMeters / 1000 / 20) * 60 : null;
|
|
|
|
return (
|
|
<ListItem
|
|
key={o.orderid}
|
|
label={customer}
|
|
isSelected={!!isSelected}
|
|
onClick={() => {
|
|
if (rider) handleRiderFocus(rider);
|
|
if (canFocus) setFocusedStop({ orderid: o.orderid, lat, lon });
|
|
}}
|
|
startContent={
|
|
// Rider colour is an arbitrary per-rider hex assigned by the map's
|
|
// palette, which no semantic token can express — this is the same
|
|
// caller-supplied-accent escape hatch StatCard uses.
|
|
<AccentAvatar color={color} selected size={32}>
|
|
<Text size="sm" weight="bold" style={{ color: 'inherit' }}>
|
|
{initials}
|
|
</Text>
|
|
</AccentAvatar>
|
|
}
|
|
description={
|
|
<VStack gap={0.5} padding={0}>
|
|
<ContextLine icon={<MdTwoWheeler size={13} />}>{riderName}</ContextLine>
|
|
{dropArea && <ContextLine icon={<MdLocationOn size={13} />}>{dropArea}</ContextLine>}
|
|
{o.pickupcustomer && <ContextLine icon={<MdRestaurant size={13} />}>{o.pickupcustomer}</ContextLine>}
|
|
</VStack>
|
|
}
|
|
endContent={
|
|
<VStack gap={1} padding={0} hAlign="end">
|
|
<StatusBadge status={o.orderstatus} />
|
|
{deliveredAt && (
|
|
<Text size="sm" type="supporting" hasTabularNumbers>
|
|
{deliveredAt}
|
|
</Text>
|
|
)}
|
|
{estMeters !== null && (
|
|
<HStack gap={2} vAlign="center">
|
|
<Metric icon={<MdMyLocation size={14} />} label="Distance to drop">
|
|
{formatMeters(estMeters)}
|
|
</Metric>
|
|
<Metric icon={<MdAccessTime size={14} />} label="Estimated time to drop">
|
|
{etaMin < 1 ? '< 1 min' : `${Math.ceil(etaMin)} min`}
|
|
</Metric>
|
|
</HStack>
|
|
)}
|
|
</VStack>
|
|
}
|
|
/>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<List density="balanced" hasDividers>
|
|
{activeDeliveries.map(renderActiveDelivery)}
|
|
</List>
|
|
);
|
|
};
|
|
|
|
export default ActiveSection;
|