updates on the design and added the riders route page

src/pages/nearle/reports/ridersSummary.js

@@ -193,6 +193,8 @@ export default function RidersSummary() {
   const [loading, setLoading] = useState(false);
   const [mapOpen, setMapOpen] = useState(false);
   const [logDetails, setLogDetails] = useState(null);
+  const [selectedRider, setSelectedRider] = useState(null);
+  const [routeLoading, setRouteLoading] = useState(false);
   const [searchword, setSearchword] = useState('');
   const [debouncedSearch, setDebouncedSearch] = useState('');
 
@@ -244,15 +246,71 @@ export default function RidersSummary() {
     }
   };
 
-  // ==============================|| rider delivery logs (for map) ||============================== //
+  // ==============================|| rider planned route (for map) ||============================== //
+  // Pulls every delivery the rider was assigned over the page's date range, then
+  // emits an ordered waypoint list sorted by `step` (the planning sequence). The
+  // map dialog renders this as the rider's PLANNED route — the path the
+  // optimizer told them to follow — not their actual GPS trail.
   const getuserdeliverylogs = async (userid) => {
+    setRouteLoading(true);
     try {
-      const response = await axios.get(
-        `${process.env.REACT_APP_URL}/deliveries/getuserdeliverylogs/?userid=${userid}&fromdate=2026-01-28&todate=2026-01-28 `
-      );
-      setLogDetails(response.data.details);
+      // /deliveries/getdeliveries treats applocationid=0 differently from a
+      // real location id — when appId===0 ("All") the backend expects the
+      // logged-in operator's userid via appuserid instead. Mirrors the
+      // branching in api.js#fetchDeliveries.
+      const loggedInUserId = typeof window !== 'undefined' ? localStorage.getItem('userid') || 0 : 0;
+      const scopeParam = appId === 0
+        ? `appuserid=${loggedInUserId}`
+        : `applocationid=${appId}`;
+      const url =
+        `${process.env.REACT_APP_URL}/deliveries/getdeliveries/` +
+        `?${scopeParam}` +
+        `&status=all` +
+        `&fromdate=${startdate}` +
+        `&todate=${enddate}` +
+        `&pageno=1` +
+        `&pagesize=200` +
+        `&keyword=` +
+        `&tenantid=` +
+        `&locationid=` +
+        `&userid=${userid}`;
+      const response = await axios.get(url);
+      const rowsRaw = response?.data?.details || [];
+      const toNum = (v) => {
+        const n = Number(v);
+        return Number.isFinite(n) ? n : null;
+      };
+      const planned = rowsRaw
+        .map((o) => {
+          const dropLat = toNum(o.droplat ?? o.deliverylat);
+          const dropLng = toNum(o.droplon ?? o.deliverylong);
+          const pickLat = toNum(o.pickuplat ?? o.pickuplatitude);
+          const pickLng = toNum(o.pickuplon ?? o.pickuplong ?? o.picklongitude);
+          if (dropLat == null || dropLng == null) return null;
+          return {
+            step: Number(o.step) || 0,
+            orderid: o.orderid,
+            deliveryid: o.deliveryid,
+            customer: o.deliverycustomer || o.customername || `Order ${o.orderid}`,
+            address: o.deliveryaddress || o.deliverysuburb || '',
+            dropLat,
+            dropLng,
+            pickLat: pickLat ?? null,
+            pickLng: pickLng ?? null,
+            // Expected delivery clock — used as a label under the step pin so
+            // the operator can sanity-check sequencing without clicking each
+            // marker.
+            expectedTime: o.expecteddeliverytime || null
+          };
+        })
+        .filter(Boolean)
+        .sort((a, b) => a.step - b.step);
+      setLogDetails(planned);
     } catch (err) {
       OpenToast(err?.message, 'error', 2000);
+      setLogDetails([]);
+    } finally {
+      setRouteLoading(false);
     }
   };
 
@@ -668,10 +726,15 @@ export default function RidersSummary() {
 
                         <TableCell align="right">
                           <Stack direction="row" spacing={0.75} justifyContent="flex-end">
-                            <Tooltip title="View route" placement="top">
+                            <Tooltip title="View planned route" placement="top">
                               <IconButton
                                 size="small"
                                 onClick={() => {
+                                  setSelectedRider({
+                                    userid: row?.userid,
+                                    name: `${row?.firstname || ''} ${row?.lastname || ''}`.trim() || `Rider ${row?.userid}`
+                                  });
+                                  setLogDetails(null);
                                   setMapOpen(true);
                                   getuserdeliverylogs(row?.userid);
                                 }}
@@ -921,9 +984,23 @@ export default function RidersSummary() {
         open={mapOpen}
         onClose={() => {
           setMapOpen(false);
+          setLogDetails(null);
+          setSelectedRider(null);
         }}
       >
-        <DialogContent>{logDetails && <RidersRoutes details={logDetails} />}</DialogContent>
+        <DialogContent sx={{ p: 0, height: '100vh' }}>
+          <RidersRoutes
+            details={logDetails}
+            loading={routeLoading}
+            riderName={selectedRider?.name}
+            dateRange={`${dayjs(startdate).format('DD/MM/YY')} – ${dayjs(enddate).format('DD/MM/YY')}`}
+            onClose={() => {
+              setMapOpen(false);
+              setLogDetails(null);
+              setSelectedRider(null);
+            }}
+          />
+        </DialogContent>
       </Dialog>
 
       {/* ============================================= || Date Filter Dialog || ============================================= */}