update for the the active section page and the profitability page

2026-06-15 17:42:11 +05:30
parent f50b4b010c
commit ec1957d6ca
6 changed files with 2194 additions and 21 deletions
--- a/src/pages/nearle/dispatch/ActiveSection.js
+++ b/src/pages/nearle/dispatch/ActiveSection.js
@@ -0,0 +1,131 @@
+import React from 'react';
+import {
+  MdTwoWheeler,
+  MdLocationOn,
+  MdRestaurant,
+  MdStraighten,
+  MdMyLocation,
+  MdInventory2
+} from 'react-icons/md';
+import { getStatusStyle, getActiveOrder } from './dispatchShared';
+
+const ActiveSection = ({
+  visibleRiders,
+  riders,
+  focusedStop,
+  handleRiderFocus,
+  setFocusedStop,
+  calculateEstMeters,
+  getRiderColor,
+  formatMeters
+}) => {
+  const activeDeliveries = visibleRiders
+    .map((r) => getActiveOrder(r.orders))
+    .filter(Boolean)
+    .sort((a, b) =>
+      String(a.rider_name || a.ridername || '').localeCompare(
+        String(b.rider_name || b.ridername || '')
+      )
+    );
+
+  if (activeDeliveries.length === 0) {
+    return (
+      <div className="empty-slot">
+        <div className="empty-slot-icon">
+          <MdInventory2 />
+        </div>
+        <div className="empty-slot-title">No active deliveries</div>
+        <div className="empty-slot-sub">
+          No deliveries are currently in progress for this slot
+        </div>
+      </div>
+    );
+  }
+
+  const renderActiveDeliveryCard = (o, i) => {
+    const rid = o.rider_id;
+    const rider = riders.find((r) => String(r.id) === String(rid));
+    const color = getRiderColor(rid);
+    const statusStyle = getStatusStyle(o.orderstatus);
+    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 isActive = canFocus && focusedStop && String(focusedStop.orderid) === String(o.orderid);
+    const initials =
+      riderName
+        .split(/\s+/)
+        .filter(Boolean)
+        .slice(0, 2)
+        .map((w) => w[0])
+        .join('')
+        .toUpperCase() || '•';
+
+    return (
+      <div
+        key={o.orderid}
+        className={`adcard${isActive ? ' is-active' : ''}`}
+        style={{ '--ad-accent': color, animationDelay: `${i * 0.05}s` }}
+        onClick={() => {
+          if (rider) handleRiderFocus(rider);
+          if (canFocus) setFocusedStop({ orderid: o.orderid, lat, lon });
+        }}
+      >
+        <div className="adcard-top">
+          <div className="adcard-avatar" style={{ background: color }}>{initials}</div>
+          <div className="adcard-titles">
+            <div className="adcard-customer" title={customer}>{customer}</div>
+            <div className="adcard-rider" title={riderName}>
+              <MdTwoWheeler style={{ fontSize: 13, flexShrink: 0 }} />
+              <span className="adcard-tx">{riderName}</span>
+            </div>
+          </div>
+          <span
+            className="adcard-status"
+            style={{ background: `${statusStyle.bg}1a`, color: statusStyle.bg }}
+            title={statusStyle.label}
+          >
+            {statusStyle.label}
+          </span>
+        </div>
+
+        {dropArea && (
+          <div className="adcard-addr">
+            <span className="adcard-ic"><MdLocationOn /></span>
+            <span className="adcard-tx adcard-addr-tx" title={dropArea}>{dropArea}</span>
+          </div>
+        )}
+
+        <div className="adcard-foot">
+          {o.pickupcustomer ? (
+            <span className="adcard-pickup" title={o.pickupcustomer}>
+              <span className="adcard-ic"><MdRestaurant /></span>
+              <span className="adcard-tx">{o.pickupcustomer}</span>
+            </span>
+          ) : (
+            <span />
+          )}
+          <span className="adcard-metrics">
+            <span className="adcard-m adcard-m-km" title="Trip distance">
+              <span className="adcard-ic"><MdStraighten /></span>
+              {parseFloat(o.actualkms || o.kms || 0).toFixed(1)} km
+            </span>
+            {estMeters !== null && (
+              <span className="adcard-m adcard-m-eta" title="Estimated distance to drop location">
+                <span className="adcard-ic"><MdMyLocation /></span>
+                {formatMeters(estMeters)}
+              </span>
+            )}
+          </span>
+        </div>
+      </div>
+    );
+  };
+
+  return <div className="adcard-list">{activeDeliveries.map(renderActiveDeliveryCard)}</div>;
+};
+
+export default ActiveSection;