@djb25/digit-ui-module-wt 1.0.24 → 1.0.25

package/dist/index.modern.js

@@ -2299,14 +2299,12 @@ const WTCard = () => {
   const {
     t
   } = useTranslation();
-  const [total, setTotal] = useState("-");
+  const tenantId = Digit.ULBService.getCurrentTenantId();
   const {
-    data,
-    isLoading,
-    isFetching,
-    isSuccess
+    data: citizenInboxData,
+    isLoading: isCitizenInboxLoading
   } = Digit.Hooks.useNewInboxGeneral({
-    tenantId: Digit.ULBService.getCurrentTenantId(),
+    tenantId,
     ModuleCode: "WT",
     filters: {
       limit: 10,
@@ -2323,13 +2321,39 @@ const WTCard = () => {
       enabled: Digit.Utils.wtAccess()
     }
   });
-  useEffect(() => {
-    if (!isFetching && isSuccess) setTotal(data);
-  }, [isFetching]);
+  const {
+    data: fixedPointInboxData,
+    isLoading: isFixedPointInboxLoading
+  } = Digit.Hooks.useNewInboxGeneral({
+    tenantId,
+    ModuleCode: "WT",
+    filters: {
+      limit: 10,
+      offset: 0,
+      services: ["watertanker-fixedpoint"]
+    },
+    config: {
+      select: data => {
+        return {
+          totalCount: data === null || data === void 0 ? void 0 : data.totalCount,
+          nearingSlaCount: data === null || data === void 0 ? void 0 : data.nearingSlaCount
+        } || "-";
+      },
+      enabled: Digit.Utils.wtAccess()
+    }
+  });
+  const citizenInboxCount = isCitizenInboxLoading ? "-" : (citizenInboxData === null || citizenInboxData === void 0 ? void 0 : citizenInboxData.totalCount) ?? 0;
+  const fixedPointInboxCount = isFixedPointInboxLoading ? "-" : (fixedPointInboxData === null || fixedPointInboxData === void 0 ? void 0 : fixedPointInboxData.totalCount) ?? 0;
   const links = [{
-    count: isLoading ? "-" : total === null || total === void 0 ? void 0 : total.totalCount,
+    count: citizenInboxCount,
     label: t("ES_COMMON_INBOX"),
+    subLabel: "citizen",
     link: `${APPLICATION_PATH}/employee/wt/inbox`
+  }, {
+    count: fixedPointInboxCount,
+    label: t("ES_COMMON_INBOX"),
+    subLabel: "Fixed Point",
+    link: `${APPLICATION_PATH}/employee/wt/fixed-point/inbox`
   }, {
     label: t("ES_COMMON_APPLICATION_SEARCH"),
     link: `${APPLICATION_PATH}/employee/wt/my-bookings`
@@ -2354,7 +2378,7 @@ const WTCard = () => {
     Icon: /*#__PURE__*/React.createElement(CHBIcon, null),
     moduleName: t("WT_MODULE_NAME"),
     kpis: [{
-      count: total === null || total === void 0 ? void 0 : total.totalCount,
+      count: citizenInboxCount,
       label: t("ES_TITLE_INBOX"),
       link: `${APPLICATION_PATH}/employee/wt/inbox`
     }],
@@ -3064,6 +3088,7 @@ const Inbox = ({
   useNewInboxAPI,
   parentRoute,
   moduleCode,
+  detailRoute,
   initialStates: _initialStates = {},
   filterComponent,
   isInbox,
@@ -3290,6 +3315,7 @@ const Inbox = ({
         }
       }, /*#__PURE__*/React.createElement(WTDesktopInbox, {
         moduleCode: moduleCode,
+        detailRoute: detailRoute,
         data: data,
         tableConfig: TableConfig(t)[moduleCode],
         isLoading: hookLoading,
@@ -4444,7 +4470,7 @@ const destinationIcon = new L.Icon({
 const Address = ({
   lat,
   lng,
-  fallback: _fallback = "Resolving area..."
+  fallback: _fallback = "Resolving area"
 }) => {
   const [address, setAddress] = useState(_fallback);
   useEffect(() => {
@@ -4462,17 +4488,32 @@ const Address = ({
 };
 const SOCKET_URL = "https://dev-djb.nitcon.in";
 const MapController = ({
-  selectedDriver
+  selectedDriver,
+  mapZoom,
+  mapCenter
 }) => {
   const map = useMap();
   useEffect(() => {
     if (selectedDriver !== null && selectedDriver !== void 0 && selectedDriver.lat && selectedDriver !== null && selectedDriver !== void 0 && selectedDriver.lng) {
-      map.setView([selectedDriver.lat, selectedDriver.lng], 15, {
+      map.setView([selectedDriver.lat, selectedDriver.lng], mapZoom || 15, {
         animate: true,
         duration: 1
       });
     }
   }, [selectedDriver, map]);
+  useEffect(() => {
+    if (Array.isArray(mapCenter) && mapCenter.length === 2) {
+      map.setView(mapCenter, mapZoom || 15, {
+        animate: true,
+        duration: 1
+      });
+    }
+  }, [mapCenter, map]);
+  useEffect(() => {
+    if (mapZoom) {
+      map.setZoom(mapZoom);
+    }
+  }, [mapZoom, map]);
   return null;
 };
 const useRoute = (start, end) => {
@@ -4485,7 +4526,7 @@ const useRoute = (start, end) => {
       setLoading(true);
       try {
         const response = await fetch(`https://router.project-osrm.org/route/v1/driving/${start.lng},${start.lat};${end.lng},${end.lat}?overview=full&geometries=geojson&steps=true`);
-        if (!response.ok) throw new Error("Failed to fetch route");
+        if (!response.ok) throw new Error(t("FAILED_TO_FETCH_ROUTE"));
         const data = await response.json();
         if (data.routes && data.routes[0]) {
           const route = data.routes[0];
@@ -4498,7 +4539,7 @@ const useRoute = (start, end) => {
           });
         }
       } catch (err) {
-        console.error("Error fetching route:", err);
+        console.error(t("Error fetching route:"), err);
         setError(err.message);
       } finally {
         setLoading(false);
@@ -4537,7 +4578,7 @@ const RouteLayer = ({
         boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
         zIndex: 1000
       }
-    }, "Loading route...");
+    }, t("LOADING_ROUTE"));
   }
   if (error) {
     return /*#__PURE__*/React.createElement("div", {
@@ -4552,7 +4593,7 @@ const RouteLayer = ({
         boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
         zIndex: 1000
       }
-    }, "Error loading route: ", error);
+    }, t("ERROR_LOADING_ROUTE"), error);
   }
   if (!routeData) return null;
   const renderRouteSegments = () => {
@@ -4644,7 +4685,7 @@ const RouteLayer = ({
       margin: 0,
       color: "#667eea"
     }
-  }, "Route Information"), /*#__PURE__*/React.createElement("button", {
+  }, t("ROUTE_INFORMATION")), /*#__PURE__*/React.createElement("button", {
     onClick: () => setShowSteps(false),
     style: {
       background: "none",
@@ -4658,14 +4699,14 @@ const RouteLayer = ({
     style: {
       marginBottom: "12px"
     }
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, "Total Distance:"), " ", (routeData.distance / 1000).toFixed(2), " km"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, "Est. Time:"), " ", Math.round(routeData.duration / 60), " minutes")), selectedStep && /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, t("TOTAL_DISTANCE"), ":"), " ", (routeData.distance / 1000).toFixed(2), " km"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, t("ESTIMATED_TIME"), ":"), " ", Math.round(routeData.duration / 60), " minutes")), selectedStep && /*#__PURE__*/React.createElement("div", {
     style: {
       padding: "8px",
       background: "#f5f5f5",
       borderRadius: "4px",
       marginBottom: "8px"
     }
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, "Current Step:"), " ", selectedStep.maneuver.type), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, "Instruction:"), " ", selectedStep.maneuver.instruction || selectedStep.name), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, "Distance:"), " ", (selectedStep.distance / 1000).toFixed(2), " km"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, "Duration:"), " ", Math.round(selectedStep.duration / 60), " min")), showSteps && routeData.legs && /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, t("CURRENT_STEP"), ":"), " ", selectedStep.maneuver.type), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, t("INSTRUCTION"), ":"), " ", selectedStep.maneuver.instruction || selectedStep.name), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, t("DISTANCE"), ":"), " ", (selectedStep.distance / 1000).toFixed(2), " km"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, t("DURATION"), ":"), " ", Math.round(selectedStep.duration / 60), " min")), showSteps && routeData.legs && /*#__PURE__*/React.createElement("div", {
     style: {
       maxHeight: "200px",
       overflowY: "auto"
@@ -4675,7 +4716,7 @@ const RouteLayer = ({
       margin: "8px 0",
       color: "#666"
     }
-  }, "Turn-by-turn directions:"), routeData.legs[0].steps.map((step, idx) => /*#__PURE__*/React.createElement("div", {
+  }, t("TURN_BY_TURN_DIRECTIONS"), ":"), routeData.legs[0].steps.map((step, idx) => /*#__PURE__*/React.createElement("div", {
     key: idx,
     style: {
       padding: "8px",
@@ -4780,6 +4821,9 @@ const DriverCard = ({
   onClick,
   vendorList
 }) => {
+  const {
+    t
+  } = useTranslation();
   const [currentAddress, setCurrentAddress] = useState("Resolving area...");
   const [deliveryAddress, setDeliveryAddress] = useState("Resolving area...");
   const lastResolvedPos = useRef({
@@ -4822,190 +4866,128 @@ const DriverCard = ({
     };
     resolveDest();
   }, [driver.deliveryLat, driver.deliveryLng]);
-  const vehicleNumber = useMemo(() => {
-    if (!vendorList || !vendorList.length) return null;
+  const driverDetails = useMemo(() => {
+    if (!vendorList || !vendorList.length) return {
+      name: "Unknown",
+      vehicle: "N/A"
+    };
     for (const vendor of vendorList) {
-      if (!vendor.drivers || !vendor.drivers.length) continue;
-      const driverMatch = vendor.drivers.find(d => {
-        var _d$owner, _d$owner2, _d$owner3, _d$owner4;
-        return ((_d$owner = d.owner) === null || _d$owner === void 0 ? void 0 : _d$owner.mobileNumber) === driver.driverId || ((_d$owner2 = d.owner) === null || _d$owner2 === void 0 ? void 0 : _d$owner2.uuid) === driver.driverId || d.id === driver.driverId || String((_d$owner3 = d.owner) === null || _d$owner3 === void 0 ? void 0 : _d$owner3.mobileNumber) === String(driver.driverId) || String((_d$owner4 = d.owner) === null || _d$owner4 === void 0 ? void 0 : _d$owner4.uuid) === String(driver.driverId);
+      var _vendor$drivers;
+      const match = (_vendor$drivers = vendor.drivers) === null || _vendor$drivers === void 0 ? void 0 : _vendor$drivers.find(d => {
+        var _d$owner, _d$owner2;
+        return d.id === driver.driverId || ((_d$owner = d.owner) === null || _d$owner === void 0 ? void 0 : _d$owner.mobileNumber) === driver.driverId || ((_d$owner2 = d.owner) === null || _d$owner2 === void 0 ? void 0 : _d$owner2.uuid) === driver.driverId;
       });
-      if (driverMatch && vendor.vehicles && vendor.vehicles.length > 0) {
-        var _vendor$vehicles$, _vendor$vehicles$2;
-        return ((_vendor$vehicles$ = vendor.vehicles[0]) === null || _vendor$vehicles$ === void 0 ? void 0 : _vendor$vehicles$.registrationNumber) || ((_vendor$vehicles$2 = vendor.vehicles[0]) === null || _vendor$vehicles$2 === void 0 ? void 0 : _vendor$vehicles$2.vehicleNo) || null;
+      if (match) {
+        var _match$owner, _vendor$vehicles, _vendor$vehicles$;
+        return {
+          name: ((_match$owner = match.owner) === null || _match$owner === void 0 ? void 0 : _match$owner.name) || "Unknown",
+          vehicle: ((_vendor$vehicles = vendor.vehicles) === null || _vendor$vehicles === void 0 ? void 0 : (_vendor$vehicles$ = _vendor$vehicles[0]) === null || _vendor$vehicles$ === void 0 ? void 0 : _vendor$vehicles$.registrationNumber) || "N/A"
+        };
       }
     }
-    return null;
+    return {
+      name: "Unknown",
+      vehicle: "N/A"
+    };
   }, [vendorList, driver.driverId]);
-  const calculateETA = () => {
-    if (!driver.lat || !driver.lng || !driver.deliveryLat || !driver.deliveryLng) return null;
-    const distance = calculateDistance$1(driver.lat, driver.lng, driver.deliveryLat, driver.deliveryLng);
-    const minutes = Math.round(distance / 30 * 60);
-    return minutes;
-  };
-  const eta = calculateETA();
   return /*#__PURE__*/React.createElement("div", {
     onClick: onClick,
     style: {
       padding: "16px",
-      marginBottom: "12px",
       borderRadius: "12px",
-      background: isSelected ? "#e3f2fd" : "#ffffff",
-      border: `2px solid ${isSelected ? "#2196f3" : "#e0e0e0"}`,
-      boxShadow: isSelected ? "0 4px 12px rgba(33, 150, 243, 0.2)" : "0 2px 8px rgba(0, 0, 0, 0.05)",
+      background: isSelected ? "#f0f4ff" : "white",
+      border: `2px solid ${isSelected ? "#667eea" : "#f0f0f0"}`,
       cursor: "pointer",
-      transition: "all 0.2s ease",
       position: "relative",
-      overflow: "hidden"
+      transition: "all 0.2s ease"
     }
   }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      position: "absolute",
-      top: 0,
-      left: 0,
-      right: 0,
-      height: "4px",
-      background: driver.isOnline ? "linear-gradient(90deg, #4caf50, #81c784)" : "linear-gradient(90deg, #f44336, #e57373)"
-    }
-  }), /*#__PURE__*/React.createElement("div", {
     style: {
       display: "flex",
-      alignItems: "center",
+      gap: "12px",
       marginBottom: "12px"
     }
   }, /*#__PURE__*/React.createElement("div", {
     style: {
       width: "40px",
       height: "40px",
-      borderRadius: "50%",
-      background: driver.isOnline ? "linear-gradient(135deg, #4caf50, #81c784)" : "linear-gradient(135deg, #9e9e9e, #bdbdbd)",
+      borderRadius: "8px",
+      background: "#f0f2f5",
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
-      color: "white",
-      fontWeight: "bold",
-      fontSize: "16px",
-      marginRight: "12px",
-      flexShrink: 0
-    }
-  }, driver.driverId.charAt(0).toUpperCase()), /*#__PURE__*/React.createElement("div", {
-    style: {
-      flex: 1,
-      minWidth: 0
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      fontWeight: "600",
-      fontSize: "16px",
-      color: "#667eea",
-      marginBottom: "4px",
-      overflow: "hidden",
-      textOverflow: "ellipsis",
-      whiteSpace: "nowrap"
+      fontSize: "20px"
     }
-  }, "Driver #", driver.driverId.substring(0, 8), "..."), /*#__PURE__*/React.createElement(StatusBadge, {
-    isOnline: driver.isOnline
-  }))), driver.lat && driver.lng && /*#__PURE__*/React.createElement("div", {
+  }, "\uD83D\uDC64"), /*#__PURE__*/React.createElement("div", {
     style: {
-      marginBottom: "8px"
+      flex: 1
     }
   }, /*#__PURE__*/React.createElement("div", {
     style: {
-      fontSize: "12px",
-      color: "#666",
-      marginBottom: "4px"
-    }
-  }, "Current Location"), /*#__PURE__*/React.createElement("div", {
-    style: {
-      fontSize: "13px",
-      fontWeight: "500",
-      color: "#333",
       display: "flex",
-      alignItems: "center",
-      gap: "4px"
+      justifyContent: "space-between",
+      alignItems: "flex-start"
     }
-  }, /*#__PURE__*/React.createElement("span", {
-    title: `${driver.lat.toFixed(6)}, ${driver.lng.toFixed(6)}`
-  }, currentAddress))), driver.deliveryLat && driver.deliveryLng && /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
     style: {
-      marginBottom: "8px"
+      fontWeight: "700",
+      fontSize: "14px",
+      color: "#0d47a1"
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, "DRV-", driver.driverId.substring(0, 4).toUpperCase()), /*#__PURE__*/React.createElement("div", {
     style: {
-      fontSize: "12px",
-      color: "#666",
-      marginBottom: "4px"
+      fontSize: "11px",
+      color: "#666"
     }
-  }, "Delivery Destination"), /*#__PURE__*/React.createElement("div", {
+  }, driverDetails.name, " \u2022 ", driverDetails.vehicle)), /*#__PURE__*/React.createElement("div", {
     style: {
-      fontSize: "13px",
-      fontWeight: "500",
-      color: "#333",
-      display: "flex",
-      alignItems: "center",
-      gap: "4px"
+      fontSize: "10px",
+      fontWeight: "700",
+      padding: "2px 8px",
+      borderRadius: "4px",
+      background: driver.isOnline ? "#e8f5e9" : "#ffebee",
+      color: driver.isOnline ? "#2e7d32" : "#c62828"
     }
-  }, /*#__PURE__*/React.createElement("span", {
-    title: `${driver.deliveryLat.toFixed(6)}, ${driver.deliveryLng.toFixed(6)}`
-  }, deliveryAddress))), eta !== null && /*#__PURE__*/React.createElement("div", {
+  }, driver.isOnline ? "ONLINE" : "OFFLINE")))), /*#__PURE__*/React.createElement("div", {
     style: {
-      marginTop: "8px",
-      padding: "8px",
-      background: "#f5f5f5",
-      borderRadius: "6px",
-      display: "flex",
-      justifyContent: "space-between",
-      alignItems: "center",
-      flexWrap: "wrap",
-      gap: "8px"
+      display: "grid",
+      gridTemplateColumns: "1fr 1fr",
+      gap: "12px"
     }
   }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
     style: {
-      fontSize: "11px",
-      color: "#666"
-    }
-  }, "Est. Arrival"), /*#__PURE__*/React.createElement("div", {
-    style: {
-      fontSize: "14px",
+      fontSize: "10px",
       fontWeight: "600",
-      color: "#667eea"
+      color: "#aaa",
+      marginBottom: "2px"
     }
-  }, eta, " min")), driver.speed && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+  }, t("CURRENT_LOCATION")), /*#__PURE__*/React.createElement("div", {
     style: {
       fontSize: "11px",
-      color: "#666"
+      fontWeight: "700",
+      color: "#333",
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis"
     }
-  }, "Speed"), /*#__PURE__*/React.createElement("div", {
+  }, currentAddress))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
     style: {
-      fontSize: "14px",
+      fontSize: "10px",
       fontWeight: "600",
-      color: "#4caf50"
+      color: "#aaa",
+      marginBottom: "2px"
     }
-  }, Math.round(driver.speed * 3.6), " km/h"))), /*#__PURE__*/React.createElement("div", {
+  }, t("DESTINATION")), /*#__PURE__*/React.createElement("div", {
     style: {
-      marginTop: "12px",
       fontSize: "11px",
-      color: "#999",
-      borderTop: "1px solid #eee",
-      paddingTop: "8px",
-      display: "grid",
-      gridTemplateColumns: "1fr 1fr",
-      gap: "4px"
-    }
-  }, vehicleNumber && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-    style: {
-      color: "#555"
-    }
-  }, "Vehicle"), /*#__PURE__*/React.createElement("span", {
-    style: {
-      fontWeight: "600",
-      color: "#667eea"
+      fontWeight: "700",
+      color: "#333",
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis"
     }
-  }, vehicleNumber)), driver.accuracy && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, "Accuracy"), /*#__PURE__*/React.createElement("span", null, Math.round(driver.accuracy), "m")), driver.heading && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, "Heading"), /*#__PURE__*/React.createElement("span", null, Math.round(driver.heading), "\xB0")), driver.lastSeen && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, "Last seen"), /*#__PURE__*/React.createElement("span", null, new Date(driver.lastSeen).toLocaleTimeString()))));
+  }, deliveryAddress))));
 };
-function calculateDistance$1(lat1, lon1, lat2, lon2) {
-  return calculateDistance(lat1, lon1, lat2, lon2);
-}
 function LiveTrackingSystem() {
   const {
     t
@@ -5059,11 +5041,11 @@ function LiveTrackingSystem() {
       console.log("=== VENDOR DEBUG ===");
       console.log("Vendor[0] vehicles:", (_vendorOptions$ = vendorOptions[0]) === null || _vendorOptions$ === void 0 ? void 0 : _vendorOptions$.vehicles);
       console.log("Vendor[0] drivers:", (_vendorOptions$2 = vendorOptions[0]) === null || _vendorOptions$2 === void 0 ? void 0 : (_vendorOptions$2$driv = _vendorOptions$2.drivers) === null || _vendorOptions$2$driv === void 0 ? void 0 : _vendorOptions$2$driv.map(d => {
-        var _d$owner5, _d$owner6;
+        var _d$owner3, _d$owner4;
         return {
           id: d.id,
-          mobile: (_d$owner5 = d.owner) === null || _d$owner5 === void 0 ? void 0 : _d$owner5.mobileNumber,
-          uuid: (_d$owner6 = d.owner) === null || _d$owner6 === void 0 ? void 0 : _d$owner6.uuid
+          mobile: (_d$owner3 = d.owner) === null || _d$owner3 === void 0 ? void 0 : _d$owner3.mobileNumber,
+          uuid: (_d$owner4 = d.owner) === null || _d$owner4 === void 0 ? void 0 : _d$owner4.uuid
         };
       }));
       console.log("Socket driverId example:", Object.keys(drivers)[0]);
@@ -5161,18 +5143,18 @@ function LiveTrackingSystem() {
     const matchesFillingPoint = !selectedFillingPoint || (() => {
       if (!vendorOptions || !vendorOptions.length) return false;
       return vendorOptions.some(vendor => {
-        var _vendor$fillingPoint2, _vendor$drivers;
+        var _vendor$fillingPoint2, _vendor$drivers2;
         if ((vendor === null || vendor === void 0 ? void 0 : (_vendor$fillingPoint2 = vendor.fillingPoint) === null || _vendor$fillingPoint2 === void 0 ? void 0 : _vendor$fillingPoint2.id) !== (selectedFillingPoint === null || selectedFillingPoint === void 0 ? void 0 : selectedFillingPoint.id)) return false;
-        return (_vendor$drivers = vendor.drivers) === null || _vendor$drivers === void 0 ? void 0 : _vendor$drivers.some(d => {
-          var _d$owner7, _d$owner8, _d$owner9, _d$owner0;
-          return ((_d$owner7 = d.owner) === null || _d$owner7 === void 0 ? void 0 : _d$owner7.mobileNumber) === driver.driverId || ((_d$owner8 = d.owner) === null || _d$owner8 === void 0 ? void 0 : _d$owner8.uuid) === driver.driverId || d.id === driver.driverId || String((_d$owner9 = d.owner) === null || _d$owner9 === void 0 ? void 0 : _d$owner9.mobileNumber) === String(driver.driverId) || String((_d$owner0 = d.owner) === null || _d$owner0 === void 0 ? void 0 : _d$owner0.uuid) === String(driver.driverId);
+        return (_vendor$drivers2 = vendor.drivers) === null || _vendor$drivers2 === void 0 ? void 0 : _vendor$drivers2.some(d => {
+          var _d$owner5, _d$owner6, _d$owner7, _d$owner8;
+          return ((_d$owner5 = d.owner) === null || _d$owner5 === void 0 ? void 0 : _d$owner5.mobileNumber) === driver.driverId || ((_d$owner6 = d.owner) === null || _d$owner6 === void 0 ? void 0 : _d$owner6.uuid) === driver.driverId || d.id === driver.driverId || String((_d$owner7 = d.owner) === null || _d$owner7 === void 0 ? void 0 : _d$owner7.mobileNumber) === String(driver.driverId) || String((_d$owner8 = d.owner) === null || _d$owner8 === void 0 ? void 0 : _d$owner8.uuid) === String(driver.driverId);
         });
       });
     })();
     const matchesVendor = !selectedVendor || (_selectedVendor$drive => {
       const vendorDriverIds = ((_selectedVendor$drive = selectedVendor.drivers) === null || _selectedVendor$drive === void 0 ? void 0 : _selectedVendor$drive.map(d => {
-        var _d$owner1, _d$owner10, _d$owner11, _d$owner12;
-        return [(_d$owner1 = d.owner) === null || _d$owner1 === void 0 ? void 0 : _d$owner1.mobileNumber, (_d$owner10 = d.owner) === null || _d$owner10 === void 0 ? void 0 : _d$owner10.uuid, d.id, String((_d$owner11 = d.owner) === null || _d$owner11 === void 0 ? void 0 : _d$owner11.mobileNumber), String((_d$owner12 = d.owner) === null || _d$owner12 === void 0 ? void 0 : _d$owner12.uuid)];
+        var _d$owner9, _d$owner0, _d$owner1, _d$owner10;
+        return [(_d$owner9 = d.owner) === null || _d$owner9 === void 0 ? void 0 : _d$owner9.mobileNumber, (_d$owner0 = d.owner) === null || _d$owner0 === void 0 ? void 0 : _d$owner0.uuid, d.id, String((_d$owner1 = d.owner) === null || _d$owner1 === void 0 ? void 0 : _d$owner1.mobileNumber), String((_d$owner10 = d.owner) === null || _d$owner10 === void 0 ? void 0 : _d$owner10.uuid)];
       }).flat().filter(Boolean)) || [];
       return vendorDriverIds.some(id => driver.driverId === id);
     })();
@@ -5187,188 +5169,218 @@ function LiveTrackingSystem() {
   return /*#__PURE__*/React.createElement("div", {
     style: {
       display: "flex",
+      flexDirection: "column",
       height: "100vh",
       width: "100%",
       fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, sans-serif",
-      position: "relative",
-      overflow: "hidden"
+      background: "#f0f2f5",
+      padding: "16px",
+      boxSizing: "border-box"
     }
-  }, isMobile && /*#__PURE__*/React.createElement("button", {
-    onClick: toggleSidebar,
+  }, /*#__PURE__*/React.createElement("div", {
     style: {
-      position: "absolute",
-      top: "10px",
-      left: "10px",
-      zIndex: 2000,
-      background: "#667eea",
-      color: "white",
-      border: "none",
-      borderRadius: "8px",
-      padding: "10px 16px",
-      fontSize: "14px",
-      fontWeight: "500",
-      cursor: "pointer",
-      boxShadow: "0 2px 8px rgba(0,0,0,0.2)",
       display: "flex",
+      justifyContent: "space-between",
       alignItems: "center",
-      gap: "8px"
-    }
-  }, /*#__PURE__*/React.createElement("span", {
-    style: {
-      fontSize: "20px"
+      marginBottom: "16px",
+      background: "white",
+      padding: "16px 24px",
+      borderRadius: "12px",
+      boxShadow: "0 2px 8px rgba(0,0,0,0.05)",
+      border: "2px solid #667eea44"
     }
-  }, "\u2630"), showSidebar ? "Hide List" : "Show Drivers"), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     style: {
-      width: isMobile ? showSidebar ? "100%" : "0" : "380px",
-      height: "100%",
-      borderRight: isMobile ? "none" : "1px solid #e0e0e0",
       display: "flex",
-      flexDirection: "column",
-      background: "#ffffff",
-      boxShadow: isMobile ? showSidebar ? "0 0 20px rgba(0,0,0,0.2)" : "none" : "2px 0 8px rgba(0, 0, 0, 0.05)",
-      position: isMobile ? "absolute" : "relative",
-      top: 0,
-      left: 0,
-      zIndex: 1500,
-      transition: "all 0.3s ease-in-out",
-      overflow: showSidebar ? "visible" : "hidden",
-      ...(isMobile && !showSidebar && {
-        width: "0",
-        opacity: 0,
-        pointerEvents: "none"
-      })
-    }
-  }, showSidebar && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    style: {
-      padding: isMobile ? "16px" : "24px",
-      background: "linear-gradient(135deg, #667eea, #0d47a1)",
-      color: "white"
+      flexDirection: "column"
     }
-  }, isMobile && /*#__PURE__*/React.createElement("button", {
-    onClick: toggleSidebar,
+  }, /*#__PURE__*/React.createElement("div", {
     style: {
-      position: "absolute",
-      top: "10px",
-      right: "10px",
-      background: "rgba(255,255,255,0.2)",
-      border: "none",
-      color: "white",
-      fontSize: "20px",
-      cursor: "pointer",
-      width: "30px",
-      height: "30px",
-      borderRadius: "4px",
       display: "flex",
       alignItems: "center",
-      justifyContent: "center"
+      gap: "12px"
     }
-  }, "\u2715"), /*#__PURE__*/React.createElement("h2", {
+  }, /*#__PURE__*/React.createElement("h1", {
     style: {
-      margin: "0 0 8px 0",
-      fontSize: isMobile ? "20px" : "24px",
-      fontWeight: "600",
-      letterSpacing: "-0.5px"
+      margin: 0,
+      fontSize: "24px",
+      fontWeight: "700",
+      color: "#0d47a1"
     }
-  }, "Live Driver Tracking"), /*#__PURE__*/React.createElement("div", {
+  }, t("WT_LIVE_DRIVER_TRACKING")), /*#__PURE__*/React.createElement("div", {
     style: {
       display: "flex",
       alignItems: "center",
-      gap: "8px",
-      fontSize: "14px",
-      opacity: 0.9
+      gap: "6px",
+      background: "#e8f5e9",
+      color: "#2e7d32",
+      padding: "4px 12px",
+      borderRadius: "20px",
+      fontSize: "12px",
+      fontWeight: "700",
+      border: "1px solid #c8e6c9"
     }
   }, /*#__PURE__*/React.createElement("span", {
     style: {
-      display: "inline-block",
-      width: "10px",
-      height: "10px",
+      width: "8px",
+      height: "8px",
       borderRadius: "50%",
       backgroundColor: isConnected ? "#4caf50" : "#f44336",
-      animation: isConnected ? "pulse 2s infinite" : "none"
+      boxShadow: isConnected ? "0 0 8px #4caf50" : "none"
     }
-  }), /*#__PURE__*/React.createElement("span", null, isConnected ? "Connected to server" : "Disconnected"))), /*#__PURE__*/React.createElement("div", {
+  }), isConnected ? "CONNECTED" : "DISCONNECTED")), /*#__PURE__*/React.createElement("p", {
     style: {
-      display: "grid",
-      gridTemplateColumns: "1fr 1fr 1fr 1fr",
-      gap: isMobile ? "4px" : "8px",
-      padding: isMobile ? "12px" : "16px",
-      background: "#f5f5f5",
-      borderBottom: "1px solid #e0e0e0"
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      textAlign: "center"
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      fontSize: isMobile ? "10px" : "11px",
+      margin: "4px 0 0 0",
+      fontSize: "14px",
       color: "#666"
     }
-  }, "Total"), /*#__PURE__*/React.createElement("div", {
+  }, t("REAL_TIME_TELEMETRY_AND_FLEET_COORDINATION"))), /*#__PURE__*/React.createElement("div", {
     style: {
-      fontSize: isMobile ? "16px" : "20px",
-      fontWeight: "bold",
-      color: "#667eea"
+      display: "flex",
+      gap: "12px"
     }
-  }, Object.keys(drivers).length)), /*#__PURE__*/React.createElement("div", {
+  }, [{
+    label: t("TOTAL_FLEET"),
+    value: Object.keys(drivers).length,
+    color: "#0d47a1"
+  }, {
+    label: t("ONLINE"),
+    value: onlineCount,
+    color: "#2e7d32"
+  }, {
+    label: t("OFFLINE"),
+    value: offlineCount,
+    color: "#c62828"
+  }, {
+    label: t("ACTIVE"),
+    value: activeDeliveries,
+    color: "#0d47a1"
+  }].map((stat, idx) => /*#__PURE__*/React.createElement("div", {
+    key: idx,
     style: {
-      textAlign: "center"
+      background: "#f8f9fa",
+      padding: "8px 16px",
+      borderRadius: "8px",
+      minWidth: "100px",
+      display: "flex",
+      flexDirection: "column",
+      border: "1px solid #e0e0e0"
     }
   }, /*#__PURE__*/React.createElement("div", {
     style: {
-      fontSize: isMobile ? "10px" : "11px",
-      color: "#666"
+      fontSize: "10px",
+      fontWeight: "600",
+      color: "#888",
+      marginBottom: "4px"
     }
-  }, "Online"), /*#__PURE__*/React.createElement("div", {
+  }, stat.label), /*#__PURE__*/React.createElement("div", {
     style: {
-      fontSize: isMobile ? "16px" : "20px",
-      fontWeight: "bold",
-      color: "#4caf50"
+      fontSize: "20px",
+      fontWeight: "700",
+      color: stat.color
     }
-  }, onlineCount)), /*#__PURE__*/React.createElement("div", {
+  }, stat.value))))), /*#__PURE__*/React.createElement("div", {
     style: {
-      textAlign: "center"
+      display: "flex",
+      flex: 1,
+      gap: "16px",
+      overflow: "hidden"
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, isMobile && /*#__PURE__*/React.createElement("button", {
+    onClick: toggleSidebar,
     style: {
-      fontSize: isMobile ? "10px" : "11px",
-      color: "#666"
+      position: "absolute",
+      top: "80px",
+      left: "20px",
+      zIndex: 2000,
+      background: "#667eea",
+      color: "white",
+      border: "none",
+      borderRadius: "8px",
+      padding: "8px 12px",
+      fontSize: "12px",
+      cursor: "pointer",
+      boxShadow: "0 2px 8px rgba(0,0,0,0.2)"
     }
-  }, "Offline"), /*#__PURE__*/React.createElement("div", {
+  }, showSidebar ? "Close" : "Menu"), /*#__PURE__*/React.createElement("div", {
     style: {
-      fontSize: isMobile ? "16px" : "20px",
-      fontWeight: "bold",
-      color: "#f44336"
+      width: isMobile ? showSidebar ? "100%" : "0" : "360px",
+      height: "100%",
+      display: "flex",
+      flexDirection: "column",
+      background: "transparent",
+      position: isMobile ? "absolute" : "relative",
+      top: 0,
+      left: 0,
+      zIndex: 1500,
+      transition: "all 0.3s ease-in-out",
+      ...(isMobile && !showSidebar && {
+        width: "0",
+        opacity: 0,
+        pointerEvents: "none"
+      })
     }
-  }, offlineCount)), /*#__PURE__*/React.createElement("div", {
+  }, showSidebar && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     style: {
-      textAlign: "center"
+      padding: "20px",
+      background: "white",
+      borderRadius: "12px",
+      display: "flex",
+      flexDirection: "column",
+      height: "100%",
+      boxShadow: "0 2px 8px rgba(0,0,0,0.05)",
+      border: "1px solid #e0e0e0"
     }
   }, /*#__PURE__*/React.createElement("div", {
     style: {
-      fontSize: isMobile ? "10px" : "11px",
-      color: "#666"
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      marginBottom: "16px"
     }
-  }, "Active"), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("h3", {
     style: {
-      fontSize: isMobile ? "16px" : "20px",
-      fontWeight: "bold",
-      color: "#ff9800"
+      margin: 0,
+      fontSize: "14px",
+      fontWeight: "700",
+      color: "#888",
+      letterSpacing: "1px"
     }
-  }, activeDeliveries))), /*#__PURE__*/React.createElement("div", {
+  }, t("WT_FILTER_FLEET")), /*#__PURE__*/React.createElement("button", {
+    onClick: () => {
+      setSelectedFillingPoint(null);
+      setSelectedVendor(null);
+      setSearchTerm("");
+      setFilterOnline("all");
+    },
     style: {
-      padding: isMobile ? "12px" : "16px",
-      borderBottom: "1px solid #e0e0e0",
-      background: "#fafafa"
+      background: "none",
+      border: "none",
+      color: "#667eea",
+      fontSize: "12px",
+      fontWeight: "700",
+      cursor: "pointer"
+    }
+  }, t("WT_RESET_ALL"))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "16px",
+      marginBottom: "20px"
     }
   }, /*#__PURE__*/React.createElement("div", {
     style: {
       display: "flex",
       flexDirection: "column",
-      gap: "8px",
-      marginBottom: "12px"
+      gap: "6px"
     }
-  }, /*#__PURE__*/React.createElement(Dropdown, {
+  }, /*#__PURE__*/React.createElement("label", {
+    style: {
+      fontSize: "12px",
+      fontWeight: "700",
+      color: "#888"
+    }
+  }, t("WT_SELECT_FILLING_POINT")), /*#__PURE__*/React.createElement(Dropdown, {
     t: t,
     option: fillingPointOptions,
     optionKey: "fillingPointName",
@@ -5377,10 +5389,21 @@ function LiveTrackingSystem() {
     placeholder: t("WT_SELECT_FILLING_POINT"),
     style: {
       width: "100%",
-      margin: 0,
-      padding: 0
+      margin: 0
     }
-  }), /*#__PURE__*/React.createElement(Dropdown, {
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "6px"
+    }
+  }, /*#__PURE__*/React.createElement("label", {
+    style: {
+      fontSize: "12px",
+      fontWeight: "700",
+      color: "#888"
+    }
+  }, t("WT_SELECT_VENDOR")), /*#__PURE__*/React.createElement(Dropdown, {
     t: t,
     option: filteredVendorOptions,
     optionKey: "name",
@@ -5389,55 +5412,78 @@ function LiveTrackingSystem() {
     placeholder: t("WT_SELECT_VENDOR"),
     style: {
       width: "100%",
-      margin: 0,
-      padding: 0
+      margin: 0
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "6px"
     }
-  })), /*#__PURE__*/React.createElement("input", {
+  }, /*#__PURE__*/React.createElement("label", {
+    style: {
+      fontSize: "10px",
+      fontWeight: "700",
+      color: "#888"
+    }
+  }, t("WT_SEARCH_DRIVER_BY_ID")), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "relative"
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      position: "absolute",
+      left: "12px",
+      top: "50%",
+      transform: "translateY(-50%)",
+      color: "#888"
+    }
+  }, "\uD83D\uDD0D"), /*#__PURE__*/React.createElement("input", {
     type: "text",
-    placeholder: "Search by driver ID...",
+    placeholder: t("WT_SEARCH_DRIVER_BY_ID"),
     value: searchTerm,
     onChange: e => setSearchTerm(e.target.value),
     style: {
       width: "100%",
-      padding: isMobile ? "10px" : "12px",
+      padding: "10px 10px 10px 36px",
       border: "1px solid #e0e0e0",
       borderRadius: "8px",
-      fontSize: isMobile ? "14px" : "14px",
-      marginBottom: "12px",
+      fontSize: "12px",
       outline: "none",
-      transition: "border-color 0.2s",
+      background: "#f8f9fa",
       boxSizing: "border-box"
-    },
-    onFocus: e => e.target.style.borderColor = "#667eea",
-    onBlur: e => e.target.style.borderColor = "#e0e0e0"
-  }), /*#__PURE__*/React.createElement("div", {
+    }
+  })))), /*#__PURE__*/React.createElement("div", {
     style: {
       display: "flex",
-      gap: "8px",
-      marginBottom: "8px"
+      justifyContent: "space-between",
+      alignItems: "center",
+      marginBottom: "12px"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      gap: "8px"
     }
   }, ["all", "online", "offline"].map(filter => /*#__PURE__*/React.createElement("button", {
     key: filter,
     onClick: () => setFilterOnline(filter),
     style: {
-      flex: 1,
-      padding: isMobile ? "6px" : "8px",
-      border: "1px solid #e0e0e0",
-      borderRadius: "6px",
-      background: filterOnline === filter ? "#667eea" : "white",
-      color: filterOnline === filter ? "white" : "#333",
+      padding: "4px 12px",
+      borderRadius: "4px",
+      background: filterOnline === filter ? "#667eea" : "transparent",
+      color: filterOnline === filter ? "white" : "#666",
+      border: filterOnline === filter ? "none" : "1px solid #e0e0e0",
       cursor: "pointer",
-      fontSize: isMobile ? "11px" : "12px",
-      fontWeight: "500",
-      textTransform: "capitalize",
-      transition: "all 0.2s"
+      fontSize: "12px",
+      fontWeight: "600",
+      textTransform: "capitalize"
     }
   }, filter))), /*#__PURE__*/React.createElement("div", {
     style: {
       display: "flex",
       alignItems: "center",
-      gap: "8px",
-      marginTop: "8px"
+      gap: "6px"
     }
   }, /*#__PURE__*/React.createElement("input", {
     type: "checkbox",
@@ -5445,59 +5491,49 @@ function LiveTrackingSystem() {
     checked: showRoutes,
     onChange: e => setShowRoutes(e.target.checked),
     style: {
-      cursor: "pointer",
-      width: "16px",
-      height: "16px"
+      cursor: "pointer"
     }
   }), /*#__PURE__*/React.createElement("label", {
     htmlFor: "showRoutes",
     style: {
-      fontSize: isMobile ? "12px" : "13px",
-      color: "#333",
+      fontSize: "12px",
+      color: "#666",
       cursor: "pointer"
     }
-  }, "Show delivery routes"))), /*#__PURE__*/React.createElement("div", {
+  }, "Routes"))), /*#__PURE__*/React.createElement("div", {
     style: {
       flex: 1,
       overflowY: "auto",
-      padding: isMobile ? "12px" : "16px",
-      background: "#f5f5f5"
+      padding: "4px",
+      marginTop: "8px",
+      display: "flex",
+      flexDirection: "column",
+      gap: "12px"
     }
   }, filteredDrivers.length === 0 ? /*#__PURE__*/React.createElement("div", {
     style: {
       textAlign: "center",
-      padding: isMobile ? "20px" : "40px 20px",
-      color: "#999",
-      background: "white",
-      borderRadius: "12px"
+      padding: "40px 20px",
+      color: "#999"
     }
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      fontSize: isMobile ? "36px" : "48px",
-      marginBottom: "16px"
-    }
-  }, "\uD83D\uDE97"), /*#__PURE__*/React.createElement("p", {
-    style: {
-      fontSize: isMobile ? "14px" : "16px",
-      margin: 0
-    }
-  }, Object.keys(drivers).length === 0 ? "No drivers available" : "No drivers match your filters")) : filteredDrivers.map(driver => /*#__PURE__*/React.createElement(DriverCard, {
+  }, /*#__PURE__*/React.createElement("p", null, t("WT_NO_DRIVERS_FOUND"))) : filteredDrivers.map(driver => /*#__PURE__*/React.createElement(DriverCard, {
     key: driver.driverId,
     driver: driver,
     isSelected: (selectedDriver === null || selectedDriver === void 0 ? void 0 : selectedDriver.driverId) === driver.driverId,
     vendorList: vendorOptions,
     onClick: () => {
       setSelectedDriver(driver);
-      if (isMobile) {
-        setShowSidebar(false);
-      }
+      if (isMobile) setShowSidebar(false);
     }
-  }))))), /*#__PURE__*/React.createElement("div", {
+  })))))), /*#__PURE__*/React.createElement("div", {
     style: {
       flex: 1,
       position: "relative",
-      width: isMobile ? "100%" : "calc(100% - 380px)",
-      height: "100%"
+      background: "white",
+      borderRadius: "12px",
+      overflow: "hidden",
+      boxShadow: "0 2px 8px rgba(0,0,0,0.05)",
+      border: "1px solid #e0e0e0"
     }
   }, /*#__PURE__*/React.createElement(MapContainer, {
     center: mapCenter,
@@ -5511,8 +5547,19 @@ function LiveTrackingSystem() {
     url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
     attribution: "\xA9 <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a>"
   }), /*#__PURE__*/React.createElement(MapController, {
-    selectedDriver: selectedDriver
-  }), selectedDriver && selectedDriver.lat != null && selectedDriver.lng != null && /*#__PURE__*/React.createElement(Marker, {
+    selectedDriver: selectedDriver,
+    mapZoom: mapZoom,
+    mapCenter: mapCenter
+  }), filteredDrivers.filter(d => d.driverId !== (selectedDriver === null || selectedDriver === void 0 ? void 0 : selectedDriver.driverId)).map(driver => /*#__PURE__*/React.createElement(Marker, {
+    key: driver.driverId,
+    position: [Number(driver.lat), Number(driver.lng)],
+    icon: driver.isOnline ? onlineIcon : offlineIcon,
+    eventHandlers: {
+      click: () => {
+        setSelectedDriver(driver);
+      }
+    }
+  })), selectedDriver && selectedDriver.lat != null && selectedDriver.lng != null && /*#__PURE__*/React.createElement(Marker, {
     key: selectedDriver.driverId,
     position: [Number(selectedDriver.lat), Number(selectedDriver.lng)],
     icon: selectedDriver.isOnline ? onlineIcon : offlineIcon
@@ -5544,14 +5591,14 @@ function LiveTrackingSystem() {
     style: {
       marginBottom: "8px"
     }
-  }, /*#__PURE__*/React.createElement("strong", null, "\uD83D\uDCCD Current Location"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Address, {
+  }, /*#__PURE__*/React.createElement("strong", null, "Current Location"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Address, {
     lat: selectedDriver.lat,
     lng: selectedDriver.lng
   }))), selectedDriver.deliveryLat && selectedDriver.deliveryLng && /*#__PURE__*/React.createElement("div", {
     style: {
       marginBottom: "8px"
     }
-  }, /*#__PURE__*/React.createElement("strong", null, "\uD83C\uDFAF Delivery Destination"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Address, {
+  }, /*#__PURE__*/React.createElement("strong", null, t("DELIVERY_DESTINATION")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Address, {
     lat: selectedDriver.deliveryLat,
     lng: selectedDriver.deliveryLng
   }))), /*#__PURE__*/React.createElement("div", {
@@ -5564,26 +5611,17 @@ function LiveTrackingSystem() {
       borderRadius: "4px",
       marginTop: "8px"
     }
-  }, selectedDriver.speed && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, "Speed:"), /*#__PURE__*/React.createElement("span", null, (selectedDriver.speed * 3.6).toFixed(1), " km/h")), selectedDriver.heading && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, "Heading:"), /*#__PURE__*/React.createElement("span", null, Math.round(selectedDriver.heading), "\xB0")), selectedDriver.accuracy && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, "Accuracy:"), /*#__PURE__*/React.createElement("span", null, Math.round(selectedDriver.accuracy), "m"))), selectedDriver.lastUpdate && /*#__PURE__*/React.createElement("div", {
+  }, selectedDriver.speed && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, t("WT_SPEED"), ":"), /*#__PURE__*/React.createElement("span", null, (selectedDriver.speed * 3.6).toFixed(1), " ", t("WT_KM_PER_HOUR"))), selectedDriver.heading && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, t("WT_HEADING"), ":"), /*#__PURE__*/React.createElement("span", null, Math.round(selectedDriver.heading), "\xB0")), selectedDriver.accuracy && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, t("WT_ACCURACY"), ":"), /*#__PURE__*/React.createElement("span", null, Math.round(selectedDriver.accuracy), "m"))), selectedDriver.lastUpdate && /*#__PURE__*/React.createElement("div", {
     style: {
       marginTop: "8px",
       color: "#666",
       fontSize: "10px"
     }
-  }, "Last update: ", new Date(selectedDriver.lastUpdate).toLocaleString()))))), selectedDriver && selectedDriver.deliveryLat != null && selectedDriver.deliveryLng != null && /*#__PURE__*/React.createElement(Marker, {
+  }, t("WT_LAST_UPDATE"), ": ", new Date(selectedDriver.lastUpdate).toLocaleString()))))), selectedDriver && selectedDriver.deliveryLat != null && selectedDriver.deliveryLng != null && /*#__PURE__*/React.createElement(Marker, {
     key: `dest-${selectedDriver.driverId}`,
     position: [Number(selectedDriver.deliveryLat), Number(selectedDriver.deliveryLng)],
     icon: destinationIcon
-  }, /*#__PURE__*/React.createElement(Popup, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, "Delivery Destination"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Address, {
-    lat: selectedDriver.deliveryLat,
-    lng: selectedDriver.deliveryLng
-  })), /*#__PURE__*/React.createElement("div", {
-    style: {
-      fontSize: "11px",
-      color: "#666",
-      marginTop: "4px"
-    }
-  }, "Driver: #", selectedDriver.driverId.substring(0, 8), "...")))), showRoutes && selectedDriver && selectedDriver.lat && selectedDriver.lng && selectedDriver.deliveryLat && selectedDriver.deliveryLng && /*#__PURE__*/React.createElement(RouteLayer, {
+  }), showRoutes && selectedDriver && selectedDriver.lat && selectedDriver.lng && selectedDriver.deliveryLat && selectedDriver.deliveryLng && /*#__PURE__*/React.createElement(RouteLayer, {
     start: {
       lat: selectedDriver.lat,
       lng: selectedDriver.lng
@@ -5611,7 +5649,8 @@ function LiveTrackingSystem() {
   }, selectedDriver && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
     onClick: () => {
       if (selectedDriver !== null && selectedDriver !== void 0 && selectedDriver.lat && selectedDriver !== null && selectedDriver !== void 0 && selectedDriver.lng) {
-        setMapCenter([selectedDriver.lat, selectedDriver.lng]);
+        const center = [Number(selectedDriver.lat), Number(selectedDriver.lng)];
+        setMapCenter(center);
         setMapZoom(15);
       }
     },
@@ -5626,7 +5665,7 @@ function LiveTrackingSystem() {
       fontWeight: "500",
       whiteSpace: "nowrap"
     }
-  }, "Center"), /*#__PURE__*/React.createElement("button", {
+  }, t("WT_CENTER")), /*#__PURE__*/React.createElement("button", {
     onClick: () => setSelectedDriver(null),
     style: {
       padding: isMobile ? "10px 12px" : "8px 16px",
@@ -5639,7 +5678,7 @@ function LiveTrackingSystem() {
       fontWeight: "500",
       whiteSpace: "nowrap"
     }
-  }, "Clear")), !selectedDriver && /*#__PURE__*/React.createElement("div", {
+  }, t("WT_CLEAR"))), !selectedDriver && /*#__PURE__*/React.createElement("div", {
     style: {
       padding: isMobile ? "10px 12px" : "8px 16px",
       background: "#f5f5f5",
@@ -5674,23 +5713,61 @@ function LiveTrackingSystem() {
       color: "#667eea",
       fontSize: isMobile ? "14px" : "16px"
     }
-  }, "Selected Driver"), /*#__PURE__*/React.createElement("span", {
-    style: {
-      background: selectedDriver.isOnline ? "#4caf50" : "#f44336",
-      color: "white",
-      padding: "2px 8px",
-      borderRadius: "12px",
-      fontSize: isMobile ? "10px" : "11px",
-      fontWeight: "bold"
-    }
-  }, selectedDriver.isOnline ? "ONLINE" : "OFFLINE")), /*#__PURE__*/React.createElement("div", {
+  }, t("WT_SELECTED_DRIVER")), /*#__PURE__*/React.createElement(StatusBadge, {
+    isOnline: selectedDriver.isOnline
+  })), /*#__PURE__*/React.createElement("div", {
     style: {
       fontSize: isMobile ? "12px" : "13px"
     }
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, "ID:"), " ", selectedDriver.driverId.substring(0, 12), "..."), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, "Location:"), " ", /*#__PURE__*/React.createElement(Address, {
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, t("WT_ID"), ":"), " ", selectedDriver.driverId.substring(0, 6).toUpperCase(), "..."), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, t("WT_LOCATION"), ":"), " ", /*#__PURE__*/React.createElement(Address, {
     lat: selectedDriver.lat,
     lng: selectedDriver.lng
-  })), selectedDriver.speed && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, "Speed:"), " ", Math.round(selectedDriver.speed * 3.6), " km/h"), selectedDriver.lastSeen && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, "Last seen:"), " ", new Date(selectedDriver.lastSeen).toLocaleTimeString())))));
+  })), selectedDriver.speed && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, t("WT_SPEED"), ":"), " ", Math.round(selectedDriver.speed * 3.6), " ", t("km/h")), selectedDriver.lastSeen && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, t("WT_LAST_SEEN"), ":"), " ", new Date(selectedDriver.lastSeen).toLocaleTimeString()))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      top: "20px",
+      left: "20px",
+      zIndex: 1000,
+      display: "flex",
+      flexDirection: "column",
+      gap: "8px"
+    }
+  }, /*#__PURE__*/React.createElement("button", {
+    onClick: () => setMapZoom(prev => prev + 1),
+    style: {
+      width: "32px",
+      height: "32px",
+      background: "white",
+      border: "1px solid #e0e0e0",
+      borderRadius: "4px",
+      fontSize: "18px",
+      fontWeight: "700",
+      cursor: "pointer",
+      boxShadow: "0 2px 4px rgba(0,0,0,0.1)"
+    }
+  }, "+"), /*#__PURE__*/React.createElement("button", {
+    onClick: () => setMapZoom(prev => prev - 1),
+    style: {
+      width: "32px",
+      height: "32px",
+      background: "white",
+      border: "1px solid #e0e0e0",
+      borderRadius: "4px",
+      fontSize: "18px",
+      fontWeight: "700",
+      cursor: "pointer",
+      boxShadow: "0 2px 4px rgba(0,0,0,0.1)"
+    }
+  }, "\u2212")), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      top: "20px",
+      right: "20px",
+      zIndex: 1000,
+      display: "flex",
+      gap: "12px"
+    }
+  }))));
 }
 
 const AddFillingPointMetaData = ({
@@ -6226,7 +6303,7 @@ const AddFixPointAddress = () => {
   const searchFilters = React.useMemo(() => ({
     tenantId,
     filters: {
-      bookingId: editId
+      id: editId
     }
   }), [tenantId, editId]);
   const searchConfig = React.useMemo(() => ({
@@ -6239,7 +6316,10 @@ const AddFixPointAddress = () => {
   const [isDataFetched, setIsDataFetched] = useState(false);
   useEffect(() => {
     if (editId && editData !== null && editData !== void 0 && editData.waterTankerBookingDetail && !isDataFetched) {
-      const data = editData.waterTankerBookingDetail.find(item => item.bookingId === editId);
+      const data = editData.waterTankerBookingDetail.find(item => {
+        var _item$applicantDetail;
+        return ((_item$applicantDetail = item.applicantDetail) === null || _item$applicantDetail === void 0 ? void 0 : _item$applicantDetail.applicantId) === editId;
+      });
       if (data) {
         var _data$applicantDetail, _data$applicantDetail2, _data$applicantDetail3, _data$applicantDetail4, _data$applicantDetail5, _data$address, _data$address2;
         setFormData({
@@ -6635,7 +6715,6 @@ const LocalityModal = ({
 };
 
 const SearchFillingPointAddress = () => {
-  var _fixedPointData$water, _fillingPointData$fil;
   const {
     t
   } = useTranslation();
@@ -6652,7 +6731,7 @@ const SearchFillingPointAddress = () => {
   const [showLocalityModal, setShowLocalityModal] = useState(false);
   const [selectedLocalityRow, setSelectedLocalityRow] = useState(null);
   const [modalMode, setModalMode] = useState("ADD");
-  const [pageSize, setPageSize] = useState(10);
+  const [pageSize, setPageSize] = useState(50);
   const [pageOffset, setPageOffset] = useState(0);
   const tenantId = Digit.ULBService.getCurrentTenantId();
   const closeToast = () => {
@@ -6868,12 +6947,12 @@ const SearchFillingPointAddress = () => {
         Cell: ({
           row
         }) => {
-          var _row$original$applica2;
+          var _row$original$applica2, _row$original$applica3;
           return /*#__PURE__*/React.createElement("span", {
             className: "link"
           }, /*#__PURE__*/React.createElement(Link, {
-            to: `/digit-ui/employee/wt/add-fix-point-address?id=${row.original.bookingId}`
-          }, ((_row$original$applica2 = row.original.applicantDetail) === null || _row$original$applica2 === void 0 ? void 0 : _row$original$applica2.name) || "NA"));
+            to: `/digit-ui/employee/wt/add-fix-point-address?id=${(_row$original$applica2 = row.original.applicantDetail) === null || _row$original$applica2 === void 0 ? void 0 : _row$original$applica2.applicantId}`
+          }, ((_row$original$applica3 = row.original.applicantDetail) === null || _row$original$applica3 === void 0 ? void 0 : _row$original$applica3.name) || "NA"));
         }
       }, {
         Header: t("WT_MOBILE_NUMBER"),
@@ -7028,8 +7107,7 @@ const SearchFillingPointAddress = () => {
   const handlePageSizeChange = e => {
     setPageSize(Number(e.target.value));
   };
-  const fixedLength = (fixedPointData === null || fixedPointData === void 0 ? void 0 : (_fixedPointData$water = fixedPointData.waterTankerBookingDetail) === null || _fixedPointData$water === void 0 ? void 0 : _fixedPointData$water.length) || 0;
-  const fillingLength = (fillingPointData === null || fillingPointData === void 0 ? void 0 : (_fillingPointData$fil = fillingPointData.fillingPoints) === null || _fillingPointData$fil === void 0 ? void 0 : _fillingPointData$fil.length) || 0;
+  const totalCount = Number(selectedTab === "FIXED_POINT" ? (fixedPointData === null || fixedPointData === void 0 ? void 0 : fixedPointData.Count) ?? (fixedPointData === null || fixedPointData === void 0 ? void 0 : fixedPointData.count) ?? (fixedPointData === null || fixedPointData === void 0 ? void 0 : fixedPointData.totalCount) ?? 0 : (fillingPointData === null || fillingPointData === void 0 ? void 0 : fillingPointData.Count) ?? (fillingPointData === null || fillingPointData === void 0 ? void 0 : fillingPointData.count) ?? (fillingPointData === null || fillingPointData === void 0 ? void 0 : fillingPointData.totalCount) ?? 0);
   const applyFixedPointMappedFilter = React.useCallback((rows = []) => {
     if (selectedTab !== "FIXED_POINT" || !(appliedFixedPointStatus !== null && appliedFixedPointStatus !== void 0 && appliedFixedPointStatus.code)) return rows;
     return rows.filter(item => {
@@ -7223,7 +7301,8 @@ const SearchFillingPointAddress = () => {
     onNextPage: fetchNextPage,
     onPrevPage: fetchPrevPage,
     pageSizeLimit: pageSize,
-    totalRecords: fixedLength + fillingLength,
+    totalRecords: totalCount,
+    isPaginationRequired: true,
     showPagination: true,
     showPageSizeOptions: true,
     isSearchRequired: false,
@@ -7299,7 +7378,7 @@ const SelectServiceType = ({
     return /*#__PURE__*/React.createElement(Loader, null);
   }
   if ((userType === null || userType === void 0 ? void 0 : userType.toLowerCase()) === "employee") {
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, config.label), /*#__PURE__*/React.createElement(Dropdown, {
+    return /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, config.label), /*#__PURE__*/React.createElement(Dropdown, {
       className: "payment-form-text-input-correction",
       isMandatory: config.isMandatory,
       selected: serviceTypes,
@@ -7521,6 +7600,7 @@ const EmployeeApp = ({
     t
   } = useTranslation();
   const location = useLocation();
+  const fixedPointInboxLabel = t("WT_FIXED_POINT") !== "WT_FIXED_POINT" ? `${t("WT_FIXED_POINT")} ${t("ES_COMMON_INBOX")}` : "Fixed Point Inbox";
   sessionStorage.removeItem("revalidateddone");
   const getDynamicBreadcrumbs = () => {
     const pathname = location.pathname;
@@ -7534,7 +7614,11 @@ const EmployeeApp = ({
       label: t("WT_MODULE_NAME"),
       path: `/digit-ui/employee/module/details?moduleName=${moduleName}`
     }];
-    if (pathname.includes("/inbox")) {
+    if (pathname.includes("/fixed-point/inbox")) {
+      crumbs.push({
+        label: fixedPointInboxLabel
+      });
+    } else if (pathname.includes("/inbox")) {
       let label = "ES_COMMON_INBOX";
       if (pathname.includes("/tp/inbox")) label = "TP_INBOX";
       crumbs.push({
@@ -7551,6 +7635,14 @@ const EmployeeApp = ({
       crumbs.push({
         label: t("WT_REQUEST_SERVICE")
       });
+    } else if (pathname.includes("/fixed-point/booking-details")) {
+      crumbs.push({
+        label: fixedPointInboxLabel,
+        path: `${path}/fixed-point/inbox`
+      });
+      crumbs.push({
+        label: t("WT_BOOKING_DETAILS")
+      });
     } else if (pathname.includes("/booking-details") || pathname.includes("/bookingsearch/booking-details")) {
       const isSearch = pathname.includes("/bookingsearch");
       if (isSearch) {
@@ -7627,6 +7719,17 @@ const EmployeeApp = ({
       locality: []
     }
   };
+  const inboxInitialStateFixedPoint = {
+    searchParams: {
+      uuid: {
+        code: "ASSIGNED_TO_ALL",
+        name: "ES_INBOX_ASSIGNED_TO_ALL"
+      },
+      services: ["watertanker-fixedpoint"],
+      applicationStatus: [],
+      locality: []
+    }
+  };
   const ApplicationDetails = (_Digit = Digit) === null || _Digit === void 0 ? void 0 : (_Digit$ComponentRegis = _Digit.ComponentRegistryService) === null || _Digit$ComponentRegis === void 0 ? void 0 : _Digit$ComponentRegis.getComponent("ApplicationDetails");
   const WTCreate = (_Digit2 = Digit) === null || _Digit2 === void 0 ? void 0 : (_Digit2$ComponentRegi = _Digit2.ComponentRegistryService) === null || _Digit2$ComponentRegi === void 0 ? void 0 : _Digit2$ComponentRegi.getComponent("WTCreate");
   return /*#__PURE__*/React.createElement(Switch, null, /*#__PURE__*/React.createElement(AppContainer, null, /*#__PURE__*/React.createElement("div", {
@@ -7652,6 +7755,18 @@ const EmployeeApp = ({
       initialStates: inboxInitialState,
       isInbox: true
     }))
+  }), /*#__PURE__*/React.createElement(PrivateRoute, {
+    path: `${path}/fixed-point/inbox`,
+    component: props => /*#__PURE__*/React.createElement(Inbox, Object.assign({}, props, {
+      useNewInboxAPI: true,
+      parentRoute: path,
+      businessService: "watertanker-fixedpoint",
+      detailRoute: `${path}/fixed-point/booking-details`,
+      moduleCode: "WT",
+      filterComponent: "WT_INBOX_FILTER",
+      initialStates: inboxInitialStateFixedPoint,
+      isInbox: true
+    }))
   }), /*#__PURE__*/React.createElement(PrivateRoute, {
     path: `${path}/mt/inbox`,
     component: props => /*#__PURE__*/React.createElement(Inbox, Object.assign({}, props, {
@@ -7683,6 +7798,11 @@ const EmployeeApp = ({
   }), /*#__PURE__*/React.createElement(PrivateRoute, {
     path: `${path}/tp/request-service`,
     component: WTCreate
+  }), /*#__PURE__*/React.createElement(PrivateRoute, {
+    path: `${path}/fixed-point/booking-details/:id`,
+    component: props => /*#__PURE__*/React.createElement(ApplicationDetails, Object.assign({}, props, {
+      parentRoute: path
+    }))
   }), /*#__PURE__*/React.createElement(PrivateRoute, {
     path: `${path}/booking-details/:id`,
     component: props => /*#__PURE__*/React.createElement(ApplicationDetails, Object.assign({}, props, {
@@ -14725,7 +14845,7 @@ const TableConfig = t => ({
         return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
           className: "link"
         }, /*#__PURE__*/React.createElement(Link, {
-          to: `${props.parentRoute}/booking-details/` + `${row === null || row === void 0 ? void 0 : (_row$original = row.original) === null || _row$original === void 0 ? void 0 : (_row$original$searchD = _row$original.searchData) === null || _row$original$searchD === void 0 ? void 0 : _row$original$searchD["bookingNo"]}`
+          to: `${props.detailRoute || `${props.parentRoute}/booking-details`}/${row === null || row === void 0 ? void 0 : (_row$original = row.original) === null || _row$original === void 0 ? void 0 : (_row$original$searchD = _row$original.searchData) === null || _row$original$searchD === void 0 ? void 0 : _row$original$searchD["bookingNo"]}`
         }, (_row$original2 = row.original) === null || _row$original2 === void 0 ? void 0 : (_row$original2$search = _row$original2.searchData) === null || _row$original2$search === void 0 ? void 0 : _row$original2$search["bookingNo"])));
       },
       mobileCell: original => {