@djb25/digit-ui-module-wt 1.0.46 → 1.0.47

package/dist/index.modern.js

@@ -5,7 +5,7 @@ import { useLocation, useRouteMatch, useHistory, Switch, Route, Redirect, Link,
 import { useQueryClient } from 'react-query';
 import { useForm, Controller } from 'react-hook-form';
 import { io } from 'socket.io-client';
-import { MapContainer, TileLayer, Marker, Popup, useMap, Polyline } from 'react-leaflet';
+import { MapContainer, TileLayer, Marker, Popup, useMap, Polyline, Circle } from 'react-leaflet';
 import L from 'leaflet';
 import 'leaflet/dist/leaflet.css';
 
@@ -465,7 +465,7 @@ const WTCreate = () => {
 };
 
 const checkForNotNull = (value = "") => {
-  return value && value != null && value != undefined && value != "" ? true : false;
+  return value && value != null && value !== undefined && value !== "" ? true : false;
 };
 const checkForNA = (value = "") => {
   return checkForNotNull(value) ? value : "NA";
@@ -816,6 +816,10 @@ const WTSearchApplication = ({
   moduleCode,
   isFixedPoint
 }) => {
+  console.log("WTSearchApplication Rendered", {
+    moduleCode,
+    isFixedPoint
+  });
   const isMobile = window.Digit.Utils.browser.isMobile();
   const user = Digit.UserService.getUser().info;
   const [showImageModal, setShowImageModal] = useState(false);
@@ -1092,7 +1096,13 @@ const WTSearchApplication = ({
       }),
       type: "number",
       maxlength: 10
-    }), /*#__PURE__*/React.createElement(CardLabelError, null, formState === null || formState === void 0 ? void 0 : (_formState$errors = formState.errors) === null || _formState$errors === void 0 ? void 0 : (_formState$errors$mob = _formState$errors["mobileNumber"]) === null || _formState$errors$mob === void 0 ? void 0 : _formState$errors$mob.message))), activeTab === t("WT_ADVANCED_SEARCH") && /*#__PURE__*/React.createElement("div", {
+    }), /*#__PURE__*/React.createElement(CardLabelError, null, formState === null || formState === void 0 ? void 0 : (_formState$errors = formState.errors) === null || _formState$errors === void 0 ? void 0 : (_formState$errors$mob = _formState$errors["mobileNumber"]) === null || _formState$errors$mob === void 0 ? void 0 : _formState$errors$mob.message)), /*#__PURE__*/React.createElement("div", {
+      className: "search-field-wrapper"
+    }, /*#__PURE__*/React.createElement("label", null, t("WT_BOOKING_NO")), /*#__PURE__*/React.createElement(TextInput, {
+      name: "bookingNo",
+      inputRef: register({}),
+      id: "wt-booking-no-input"
+    }))), activeTab === t("WT_ADVANCED_SEARCH") && /*#__PURE__*/React.createElement("div", {
       className: "formcomposer-section-grid"
     }, /*#__PURE__*/React.createElement("div", {
       className: "search-field-wrapper"
@@ -1401,11 +1411,8 @@ const App = () => {
     t
   } = useTranslation();
   const location = useLocation();
-  const history = useHistory();
   const {
-    path,
-    url,
-    ...match
+    path
   } = useRouteMatch();
   const WTCreate = (_Digit = Digit) === null || _Digit === void 0 ? void 0 : (_Digit$ComponentRegis = _Digit.ComponentRegistryService) === null || _Digit$ComponentRegis === void 0 ? void 0 : _Digit$ComponentRegis.getComponent("WTCreate");
   const WTApplicationDetails = (_Digit2 = Digit) === null || _Digit2 === void 0 ? void 0 : (_Digit2$ComponentRegi = _Digit2.ComponentRegistryService) === null || _Digit2$ComponentRegi === void 0 ? void 0 : _Digit2$ComponentRegi.getComponent("WTApplicationDetails");
@@ -1416,8 +1423,6 @@ const App = () => {
   const ApplicationDetails = (_Digit6 = Digit) === null || _Digit6 === void 0 ? void 0 : (_Digit6$ComponentRegi = _Digit6.ComponentRegistryService) === null || _Digit6$ComponentRegi === void 0 ? void 0 : _Digit6$ComponentRegi.getComponent("ApplicationDetails");
   const getDynamicBreadcrumbs = () => {
     const pathname = location.pathname;
-    if (pathname.includes("/mt/")) ;
-    if (pathname.includes("/tp/")) ;
     let crumbs = [{
       icon: HomeIcon,
       path: "/digit-ui/citizen"
@@ -1486,7 +1491,7 @@ const App = () => {
     onLeftClick: () => window.history.back(),
     breadcrumbs: getDynamicBreadcrumbs()
   }), /*#__PURE__*/React.createElement("div", {
-    className: "employee-form-content"
+    className: "employee-form-content abcd"
   }, /*#__PURE__*/React.createElement(PrivateRoute, {
     path: `${path}/inbox`,
     component: () => /*#__PURE__*/React.createElement(Inbox, {
@@ -1535,7 +1540,7 @@ const App = () => {
       parentRoute: path
     })
   }), /*#__PURE__*/React.createElement(PrivateRoute, {
-    path: `${path}/wt-Vendor`,
+    path: `${path}/vendor`,
     component: () => Digit.UserService.hasAccess(["WT_VENDOR"]) ? /*#__PURE__*/React.createElement("div", {
       style: {
         display: "flex",
@@ -7286,6 +7291,477 @@ const LocalityModal = ({
   }, t("CS_COMMON_SAVE")))));
 };
 
+delete L.Icon.Default.prototype._getIconUrl;
+L.Icon.Default.mergeOptions({
+  iconRetinaUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png",
+  iconUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png",
+  shadowUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png"
+});
+const fillingPointIcon = new L.Icon({
+  iconUrl: "https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-blue.png",
+  shadowUrl: "https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png",
+  iconSize: [25, 41],
+  iconAnchor: [12, 41],
+  popupAnchor: [1, -34],
+  shadowSize: [41, 41]
+});
+const fixedPointIcon = new L.Icon({
+  iconUrl: "https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png",
+  shadowUrl: "https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png",
+  iconSize: [25, 41],
+  iconAnchor: [12.5, 41],
+  popupAnchor: [1, -34],
+  shadowSize: [41, 41]
+});
+const enlargedFixedPointIcon = new L.Icon({
+  iconUrl: "https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png",
+  shadowUrl: "https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png",
+  iconSize: [35, 57],
+  iconAnchor: [17.5, 57],
+  popupAnchor: [1, -45],
+  shadowSize: [50, 50],
+  className: "bouncing-marker"
+});
+const bounceStyles = `
+  @keyframes marker-bounce {
+    0%, 100% { margin-top: 0px; }
+    50% { margin-top: -15px; }
+  }
+  .bouncing-marker {
+    animation: marker-bounce 0.6s infinite ease-in-out !important;
+  }
+`;
+const ChangeView = ({
+  bounds,
+  center,
+  zoom
+}) => {
+  const map = useMap();
+  useEffect(() => {
+    if (center) {
+      map.setView(center, zoom || 15, {
+        animate: true
+      });
+    } else if (bounds && bounds.length > 0) {
+      map.fitBounds(bounds);
+    }
+  }, [bounds, center, zoom, map]);
+  return null;
+};
+const PointAddressMap = ({
+  fillingPoints: _fillingPoints = [],
+  fixedPoints: _fixedPoints = [],
+  isLoading,
+  t
+}) => {
+  var _selectedFillingPoint;
+  const [selectedFillingPoint, setSelectedFillingPoint] = useState(null);
+  const [selectedFixedPoint, setSelectedFixedPoint] = useState(null);
+  const [hoveredFixedPointId, setHoveredFixedPointId] = useState(null);
+  const [mapCenter, setMapCenter] = useState(null);
+  const [mapZoom, setMapZoom] = useState(11);
+  const defaultCenter = [28.6139, 77.209];
+  const getFpId = fp => {
+    var _fp$fillingpointmetad;
+    return (fp === null || fp === void 0 ? void 0 : fp.id) || (fp === null || fp === void 0 ? void 0 : fp.bookingId) || (fp === null || fp === void 0 ? void 0 : fp.fillingPointId) || (fp === null || fp === void 0 ? void 0 : fp.uuid) || (fp === null || fp === void 0 ? void 0 : (_fp$fillingpointmetad = fp.fillingpointmetadata) === null || _fp$fillingpointmetad === void 0 ? void 0 : _fp$fillingpointmetad.fillingPointId);
+  };
+  const {
+    isLoading: isRelatedLoading,
+    data: relatedFixedPointsData
+  } = Digit.Hooks.wt.useFixedPointSearchAPI({
+    tenantId: Digit.ULBService.getCurrentTenantId(),
+    filters: {
+      fillingPointId: getFpId(selectedFillingPoint),
+      limit: 1000
+    }
+  }, {
+    enabled: !!selectedFillingPoint
+  });
+  const relatedFixedPoints = useMemo(() => {
+    if (!selectedFillingPoint) return [];
+    return (relatedFixedPointsData === null || relatedFixedPointsData === void 0 ? void 0 : relatedFixedPointsData.waterTankerBookingDetail) || [];
+  }, [selectedFillingPoint, relatedFixedPointsData]);
+  const displayFillingPoints = useMemo(() => {
+    if (selectedFillingPoint) {
+      return [selectedFillingPoint].filter(fp => {
+        var _fp$address, _fp$address2;
+        return ((_fp$address = fp.address) === null || _fp$address === void 0 ? void 0 : _fp$address.latitude) && ((_fp$address2 = fp.address) === null || _fp$address2 === void 0 ? void 0 : _fp$address2.longitude);
+      });
+    }
+    return (_fillingPoints === null || _fillingPoints === void 0 ? void 0 : _fillingPoints.filter(fp => {
+      var _fp$address3, _fp$address4;
+      return ((_fp$address3 = fp.address) === null || _fp$address3 === void 0 ? void 0 : _fp$address3.latitude) && ((_fp$address4 = fp.address) === null || _fp$address4 === void 0 ? void 0 : _fp$address4.longitude);
+    })) || [];
+  }, [_fillingPoints, selectedFillingPoint]);
+  const displayFixedPoints = useMemo(() => {
+    if (selectedFixedPoint) {
+      return [selectedFixedPoint].filter(fx => {
+        var _fx$address, _fx$address2;
+        return ((_fx$address = fx.address) === null || _fx$address === void 0 ? void 0 : _fx$address.latitude) && ((_fx$address2 = fx.address) === null || _fx$address2 === void 0 ? void 0 : _fx$address2.longitude);
+      });
+    }
+    return relatedFixedPoints.filter(fx => {
+      var _fx$address3, _fx$address4;
+      return ((_fx$address3 = fx.address) === null || _fx$address3 === void 0 ? void 0 : _fx$address3.latitude) && ((_fx$address4 = fx.address) === null || _fx$address4 === void 0 ? void 0 : _fx$address4.longitude);
+    });
+  }, [relatedFixedPoints, selectedFixedPoint]);
+  const bounds = useMemo(() => {
+    const allPoints = [...displayFillingPoints.map(p => [parseFloat(p.address.latitude), parseFloat(p.address.longitude)]), ...displayFixedPoints.map(p => [parseFloat(p.address.latitude), parseFloat(p.address.longitude)])];
+    if (allPoints.length === 0) return null;
+    return allPoints;
+  }, [displayFillingPoints, displayFixedPoints]);
+  const handleFillingPointSelect = val => {
+    setSelectedFillingPoint(val);
+    setSelectedFixedPoint(null);
+    setMapCenter(null);
+  };
+  const handleFixedPointSelect = val => {
+    var _val$address, _val$address2;
+    setSelectedFixedPoint(val);
+    if (val !== null && val !== void 0 && (_val$address = val.address) !== null && _val$address !== void 0 && _val$address.latitude && val !== null && val !== void 0 && (_val$address2 = val.address) !== null && _val$address2 !== void 0 && _val$address2.longitude) {
+      setMapCenter([parseFloat(val.address.latitude), parseFloat(val.address.longitude)]);
+      setMapZoom(16);
+    }
+  };
+  const fixedPointOptions = useMemo(() => {
+    return relatedFixedPoints.map(fx => {
+      var _fx$applicantDetail;
+      return {
+        ...fx,
+        displayName: (fx === null || fx === void 0 ? void 0 : (_fx$applicantDetail = fx.applicantDetail) === null || _fx$applicantDetail === void 0 ? void 0 : _fx$applicantDetail.name) || (fx === null || fx === void 0 ? void 0 : fx.name) || "NA"
+      };
+    });
+  }, [relatedFixedPoints]);
+  const handleClear = () => {
+    setSelectedFillingPoint(null);
+    setSelectedFixedPoint(null);
+    setMapCenter(null);
+    setMapZoom(11);
+  };
+  if (isLoading || isRelatedLoading) return /*#__PURE__*/React.createElement(Loader, null);
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: window.innerWidth < 768 ? "column" : "row",
+      height: "700px",
+      width: "100%",
+      borderRadius: "12px",
+      overflow: "hidden",
+      border: "1px solid #ddd",
+      marginTop: "20px",
+      boxShadow: "0 8px 24px rgba(0,0,0,0.12)",
+      background: "#fff"
+    }
+  }, /*#__PURE__*/React.createElement("style", null, bounceStyles), /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: window.innerWidth < 768 ? "100%" : "320px",
+      padding: "24px",
+      borderRight: "1px solid #eee",
+      display: "flex",
+      flexDirection: "column",
+      gap: "20px",
+      background: "#f9f9f9",
+      zIndex: 10
+    }
+  }, /*#__PURE__*/React.createElement("h3", {
+    style: {
+      margin: "0 0 8px 0",
+      color: "#1D4E7F",
+      fontSize: "20px",
+      fontWeight: "600"
+    }
+  }, t("WT_MAP_FILTERS")), /*#__PURE__*/React.createElement("div", {
+    className: "filter-item"
+  }, /*#__PURE__*/React.createElement("label", {
+    style: {
+      display: "block",
+      marginBottom: "8px",
+      fontSize: "14px",
+      fontWeight: "500",
+      color: "#666"
+    }
+  }, t("WT_FILLING_POINT")), /*#__PURE__*/React.createElement(Dropdown, {
+    option: _fillingPoints,
+    optionKey: "fillingPointName",
+    selected: selectedFillingPoint,
+    select: handleFillingPointSelect,
+    t: t,
+    placeholder: t("WT_SELECT_FILLING_POINT")
+  })), selectedFillingPoint && /*#__PURE__*/React.createElement("div", {
+    className: "filter-item",
+    style: {
+      flex: 1,
+      display: "flex",
+      flexDirection: "column"
+    }
+  }, /*#__PURE__*/React.createElement("label", {
+    style: {
+      display: "block",
+      marginBottom: "12px",
+      fontSize: "14px",
+      fontWeight: "600",
+      color: "#1D4E7F"
+    }
+  }, t("WT_MAPPED_FIXED_POINTS"), " (", relatedFixedPoints.length, ")"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      maxHeight: "350px",
+      overflowY: "auto",
+      paddingRight: "8px",
+      display: "flex",
+      flexDirection: "column",
+      gap: "8px"
+    }
+  }, relatedFixedPoints.length > 0 ? relatedFixedPoints.map((fx, idx) => {
+    var _fx$applicantDetail2, _selectedFixedPoint$a, _fx$applicantDetail3, _fx$applicantDetail5, _fx$applicantDetail6, _fx$applicantDetail7, _fx$applicantDetail8;
+    const isSelected = (selectedFixedPoint === null || selectedFixedPoint === void 0 ? void 0 : selectedFixedPoint.id) === fx.id || ((_fx$applicantDetail2 = fx.applicantDetail) === null || _fx$applicantDetail2 === void 0 ? void 0 : _fx$applicantDetail2.applicantId) && (selectedFixedPoint === null || selectedFixedPoint === void 0 ? void 0 : (_selectedFixedPoint$a = selectedFixedPoint.applicantDetail) === null || _selectedFixedPoint$a === void 0 ? void 0 : _selectedFixedPoint$a.applicantId) === ((_fx$applicantDetail3 = fx.applicantDetail) === null || _fx$applicantDetail3 === void 0 ? void 0 : _fx$applicantDetail3.applicantId);
+    return /*#__PURE__*/React.createElement("div", {
+      key: idx,
+      onClick: () => handleFixedPointSelect(fx),
+      onMouseEnter: () => {
+        var _fx$applicantDetail4, _fx$address5, _fx$address6;
+        setHoveredFixedPointId(fx.id || ((_fx$applicantDetail4 = fx.applicantDetail) === null || _fx$applicantDetail4 === void 0 ? void 0 : _fx$applicantDetail4.applicantId) || idx);
+        if (fx !== null && fx !== void 0 && (_fx$address5 = fx.address) !== null && _fx$address5 !== void 0 && _fx$address5.latitude && fx !== null && fx !== void 0 && (_fx$address6 = fx.address) !== null && _fx$address6 !== void 0 && _fx$address6.longitude) {
+          setMapCenter([parseFloat(fx.address.latitude), parseFloat(fx.address.longitude)]);
+          setMapZoom(16);
+        }
+      },
+      onMouseLeave: () => setHoveredFixedPointId(null),
+      style: {
+        padding: "12px",
+        background: isSelected ? "#E6EEF5" : "#fff",
+        border: isSelected ? "1.5px solid #1D4E7F" : "1px solid #e0e0e0",
+        borderRadius: "8px",
+        cursor: "pointer",
+        transition: "all 0.2s ease",
+        fontSize: "13px",
+        color: isSelected ? "#1D4E7F" : "#333",
+        fontWeight: isSelected ? "600" : "400",
+        display: "flex",
+        alignItems: "center",
+        gap: "10px",
+        boxShadow: isSelected ? "0 2px 8px rgba(29, 78, 127, 0.15)" : hoveredFixedPointId === (fx.id || ((_fx$applicantDetail5 = fx.applicantDetail) === null || _fx$applicantDetail5 === void 0 ? void 0 : _fx$applicantDetail5.applicantId) || idx) ? "0 4px 12px rgba(0,0,0,0.1)" : "none",
+        transform: hoveredFixedPointId === (fx.id || ((_fx$applicantDetail6 = fx.applicantDetail) === null || _fx$applicantDetail6 === void 0 ? void 0 : _fx$applicantDetail6.applicantId) || idx) ? "translateX(4px)" : "none"
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: "10px",
+        height: "10px",
+        borderRadius: "50%",
+        background: "#417505",
+        boxShadow: "0 0 4px rgba(65, 117, 5, 0.4)"
+      }
+    }), /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: "flex",
+        flexDirection: "column"
+      }
+    }, /*#__PURE__*/React.createElement("span", null, (fx === null || fx === void 0 ? void 0 : (_fx$applicantDetail7 = fx.applicantDetail) === null || _fx$applicantDetail7 === void 0 ? void 0 : _fx$applicantDetail7.name) || (fx === null || fx === void 0 ? void 0 : fx.name) || "NA"), /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: "11px",
+        color: "#888",
+        fontWeight: "400"
+      }
+    }, fx === null || fx === void 0 ? void 0 : (_fx$applicantDetail8 = fx.applicantDetail) === null || _fx$applicantDetail8 === void 0 ? void 0 : _fx$applicantDetail8.fixedPointId)));
+  }) : /*#__PURE__*/React.createElement("div", {
+    style: {
+      textAlign: "center",
+      padding: "20px",
+      color: "#999",
+      fontSize: "13px",
+      border: "1px dashed #ccc",
+      borderRadius: "8px"
+    }
+  }, t("WT_NO_MAPPED_POINTS")))), /*#__PURE__*/React.createElement("button", {
+    onClick: handleClear,
+    style: {
+      marginTop: "auto",
+      padding: "12px",
+      background: "#fff",
+      border: "1px solid #1D4E7F",
+      color: "#1D4E7F",
+      borderRadius: "6px",
+      cursor: "pointer",
+      fontWeight: "600",
+      transition: "all 0.2s"
+    },
+    onMouseOver: e => {
+      e.target.style.background = "#1D4E7F";
+      e.target.style.color = "#fff";
+    },
+    onMouseOut: e => {
+      e.target.style.background = "#fff";
+      e.target.style.color = "#1D4E7F";
+    }
+  }, t("ES_COMMON_CLEAR_ALL")), selectedFillingPoint && /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: "20px",
+      padding: "16px",
+      background: "#fff",
+      borderRadius: "8px",
+      border: "1px solid #e0e0e0"
+    }
+  }, /*#__PURE__*/React.createElement("h4", {
+    style: {
+      margin: "0 0 12px 0",
+      fontSize: "14px",
+      color: "#333",
+      borderBottom: "1px solid #f0f0f0",
+      paddingBottom: "8px"
+    }
+  }, t("WT_SUMMARY")), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: "13px",
+      display: "flex",
+      flexDirection: "column",
+      gap: "8px"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      justifyContent: "space-between"
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: "#777"
+    }
+  }, t("WT_FIXED_POINTS"), ":"), /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontWeight: "600"
+    }
+  }, relatedFixedPoints.length)), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      justifyContent: "space-between"
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: "#777"
+    }
+  }, t("WT_LOCALITY"), ":"), /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontWeight: "600"
+    }
+  }, ((_selectedFillingPoint = selectedFillingPoint.address) === null || _selectedFillingPoint === void 0 ? void 0 : _selectedFillingPoint.locality) || "NA"))))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      position: "relative"
+    }
+  }, /*#__PURE__*/React.createElement(MapContainer, {
+    center: defaultCenter,
+    zoom: 11,
+    style: {
+      height: "100%",
+      width: "100%"
+    },
+    scrollWheelZoom: true
+  }, /*#__PURE__*/React.createElement(TileLayer, {
+    attribution: "\xA9 <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
+    url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+  }), /*#__PURE__*/React.createElement(ChangeView, {
+    bounds: bounds,
+    center: mapCenter,
+    zoom: mapZoom
+  }), displayFillingPoints.map((fp, index) => {
+    var _fp$address5;
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: `fp-group-${fp.id || index}`
+    }, /*#__PURE__*/React.createElement(Circle, {
+      center: [parseFloat(fp.address.latitude), parseFloat(fp.address.longitude)],
+      radius: 5000,
+      pathOptions: {
+        color: "#0d2745ff",
+        fillColor: "#041a34ff",
+        fillOpacity: 0.1,
+        weight: 1,
+        dashArray: "5, 5"
+      }
+    }), /*#__PURE__*/React.createElement(Marker, {
+      key: `fp-${fp.id || index}`,
+      position: [parseFloat(fp.address.latitude), parseFloat(fp.address.longitude)],
+      icon: fillingPointIcon
+    }, /*#__PURE__*/React.createElement(Popup, null, /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: "8px",
+        minWidth: "200px"
+      }
+    }, /*#__PURE__*/React.createElement("h4", {
+      style: {
+        margin: "0 0 8px 0",
+        color: "#1F5FA8",
+        fontSize: "16px",
+        borderBottom: "1px solid #eee",
+        paddingBottom: "4px"
+      }
+    }, fp.fillingPointName, " (Filling Point)"), /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "4px"
+      }
+    }, /*#__PURE__*/React.createElement("p", {
+      style: {
+        margin: 0,
+        fontSize: "12px"
+      }
+    }, /*#__PURE__*/React.createElement("strong", null, t("WT_FILLING_POINT_CODE"), ":"), " ", fp.fillingPointId), /*#__PURE__*/React.createElement("p", {
+      style: {
+        margin: 0,
+        fontSize: "12px"
+      }
+    }, /*#__PURE__*/React.createElement("strong", null, t("WT_LOCALITY"), ":"), " ", ((_fp$address5 = fp.address) === null || _fp$address5 === void 0 ? void 0 : _fp$address5.locality) || "NA"), /*#__PURE__*/React.createElement("p", {
+      style: {
+        margin: 0,
+        fontSize: "12px",
+        color: "#1F5FA8"
+      }
+    }, /*#__PURE__*/React.createElement("strong", null, "Coverage:"), " 5 KM Radius"))))));
+  }), displayFixedPoints.map((fx, index) => {
+    var _fx$applicantDetail9, _fx$applicantDetail0, _fx$applicantDetail1, _fx$applicantDetail10, _fx$address7;
+    const fxId = fx.id || ((_fx$applicantDetail9 = fx.applicantDetail) === null || _fx$applicantDetail9 === void 0 ? void 0 : _fx$applicantDetail9.applicantId) || index;
+    const isHovered = hoveredFixedPointId === fxId;
+    return /*#__PURE__*/React.createElement(Marker, {
+      key: `fx-${fxId}`,
+      position: [parseFloat(fx.address.latitude), parseFloat(fx.address.longitude)],
+      icon: isHovered ? enlargedFixedPointIcon : fixedPointIcon,
+      zIndexOffset: isHovered ? 1000 : 0
+    }, /*#__PURE__*/React.createElement(Popup, null, /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: "8px",
+        minWidth: "200px"
+      }
+    }, /*#__PURE__*/React.createElement("h4", {
+      style: {
+        margin: "0 0 8px 0",
+        color: "#417505",
+        fontSize: "16px",
+        borderBottom: "1px solid #eee",
+        paddingBottom: "4px"
+      }
+    }, (fx === null || fx === void 0 ? void 0 : (_fx$applicantDetail0 = fx.applicantDetail) === null || _fx$applicantDetail0 === void 0 ? void 0 : _fx$applicantDetail0.name) || (fx === null || fx === void 0 ? void 0 : fx.name) || "NA", " (Fixed Point)"), /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "4px"
+      }
+    }, /*#__PURE__*/React.createElement("p", {
+      style: {
+        margin: 0,
+        fontSize: "12px"
+      }
+    }, /*#__PURE__*/React.createElement("strong", null, t("WT_FIXED_POINT_CODE"), ":"), " ", (fx === null || fx === void 0 ? void 0 : (_fx$applicantDetail1 = fx.applicantDetail) === null || _fx$applicantDetail1 === void 0 ? void 0 : _fx$applicantDetail1.fixedPointId) || "NA"), /*#__PURE__*/React.createElement("p", {
+      style: {
+        margin: 0,
+        fontSize: "12px"
+      }
+    }, /*#__PURE__*/React.createElement("strong", null, t("WT_MOBILE_NUMBER"), ":"), " ", (fx === null || fx === void 0 ? void 0 : (_fx$applicantDetail10 = fx.applicantDetail) === null || _fx$applicantDetail10 === void 0 ? void 0 : _fx$applicantDetail10.mobileNumber) || "NA"), /*#__PURE__*/React.createElement("p", {
+      style: {
+        margin: 0,
+        fontSize: "12px"
+      }
+    }, /*#__PURE__*/React.createElement("strong", null, t("WT_LOCALITY"), ":"), " ", (fx === null || fx === void 0 ? void 0 : (_fx$address7 = fx.address) === null || _fx$address7 === void 0 ? void 0 : _fx$address7.locality) || "NA")))));
+  }))));
+};
+
 const SearchFillingPointAddress = () => {
   const {
     t
@@ -7350,6 +7826,18 @@ const SearchFillingPointAddress = () => {
     enabled: true
   });
   const allFillingPoints = (allFillingPointsData === null || allFillingPointsData === void 0 ? void 0 : allFillingPointsData.fillingPoints) || [];
+  const {
+    isLoading: isAllFixedPointsLoading,
+    data: allFixedPointsData
+  } = Digit.Hooks.wt.useFixedPointSearchAPI({
+    tenantId,
+    filters: {
+      limit: 1000
+    }
+  }, {
+    enabled: true
+  });
+  const allFixedPoints = (allFixedPointsData === null || allFixedPointsData === void 0 ? void 0 : allFixedPointsData.waterTankerBookingDetail) || [];
   const {
     mutate: mapFixedFilling
   } = Digit.Hooks.wt.useVendorFillingMapping(tenantId);
@@ -7375,6 +7863,10 @@ const SearchFillingPointAddress = () => {
     FILLING_POINT: {
       label: "WT_FILLING_POINT_NAME",
       placeholder: "WT_ENTER_FILLING_POINT_NAME"
+    },
+    VIEW_ON_MAP: {
+      label: "WT_VIEW_ON_MAP",
+      placeholder: ""
     }
   };
   const statusOptions = [{
@@ -7801,7 +8293,13 @@ const SearchFillingPointAddress = () => {
     style: {
       width: isMobile ? "50%" : "auto"
     }
-  }, t("WT_FILLING_POINT"))), /*#__PURE__*/React.createElement("div", {
+  }, t("WT_FILLING_POINT")), /*#__PURE__*/React.createElement("button", {
+    className: selectedTab === "VIEW_ON_MAP" ? "search-tab-head-selected" : "search-tab-head",
+    onClick: () => onTabChange("VIEW_ON_MAP"),
+    style: {
+      width: isMobile ? "50%" : "auto"
+    }
+  }, t("WT_VIEW_ON_MAP"))), /*#__PURE__*/React.createElement("div", {
     className: "action-bar-wrap-registry",
     style: {
       alignSelf: isMobile ? "flex-end" : "auto"
@@ -7816,7 +8314,7 @@ const SearchFillingPointAddress = () => {
     options: ["FIXED_POINT", "FILLING_POINT"],
     t: t,
     onSelect: onActionSelect
-  }))), /*#__PURE__*/React.createElement("div", {
+  }))), selectedTab !== "VIEW_ON_MAP" && /*#__PURE__*/React.createElement("div", {
     className: "finance-mainlayout"
   }, /*#__PURE__*/React.createElement("div", {
     className: "finance-mainlayout-col1"
@@ -7872,7 +8370,12 @@ const SearchFillingPointAddress = () => {
   }, /*#__PURE__*/React.createElement(Label, null, "\xA0"), /*#__PURE__*/React.createElement(SubmitBar, {
     label: t("ES_COMMON_SEARCH"),
     onSubmit: onSearch
-  })))), /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(ApplicationTable, {
+  })))), selectedTab === "VIEW_ON_MAP" ? /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(PointAddressMap, {
+    fillingPoints: allFillingPoints,
+    fixedPoints: allFixedPoints,
+    isLoading: isAllFillingPointsLoading || isAllFixedPointsLoading,
+    t: t
+  })) : /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(ApplicationTable, {
     key: (allFillingPoints === null || allFillingPoints === void 0 ? void 0 : allFillingPoints.length) > 0 ? "loaded" : "loading",
     data: tableData,
     columns: columns,
@@ -24978,10 +25481,10 @@ const ApplicationDetails$1 = () => {
     applicationData: appDetailsToShow === null || appDetailsToShow === void 0 ? void 0 : (_appDetailsToShow$app = appDetailsToShow.applicationData) === null || _appDetailsToShow$app === void 0 ? void 0 : _appDetailsToShow$app.applicationData,
     closeModal: () => setShowEditModal(false)
   }), /*#__PURE__*/React.createElement("div", {
-    className: `workflow-timeline-wrapper ${hideTimeline ? "hide-workflow" : ""}`,
+    className: `workflow-timeline-wrapper no-scrollbar ${hideTimeline ? "hide-workflow" : ""}`,
     style: {
       flex: "1 1 300px",
-      maxWidth: hideTimeline ? "0px" : "400px",
+      maxWidth: hideTimeline ? "fit-content" : "400px",
       transition: "max-width 0.3s"
     }
   }, /*#__PURE__*/React.createElement(WorkflowTimeline, {
@@ -28114,16 +28617,6 @@ const WTModule = ({
     path,
     url
   } = useRouteMatch();
-  const moduleCode = "WT";
-  const language = Digit.StoreData.getCurrentLanguage();
-  const {
-    isLoading,
-    data: store
-  } = Digit.Services.useStore({
-    stateCode,
-    moduleCode,
-    language
-  });
   Digit.SessionStorage.set("WT_TENANTS", tenants);
   useEffect(() => userType === "employee" && Digit.LocalizationService.getLocale({
     modules: [`rainmaker-${Digit.ULBService.getCurrentTenantId()}`],
@@ -28145,7 +28638,7 @@ const WTLinks = ({
   const {
     t
   } = useTranslation();
-  const [params, setParams, clearParams] = Digit.Hooks.useSessionStorage("WT", {});
+  const [,, clearParams] = Digit.Hooks.useSessionStorage("WT", {});
   useEffect(() => {
     clearParams();
   }, []);