@djb25/digit-ui-module-wt 1.0.11 → 1.0.13

package/dist/index.modern.js

@@ -1,9 +1,13 @@
-import { TickMark, ArrowDown, MobileNumber, CardLabelError, TextInput, Dropdown, DatePicker, SubmitBar, Card, Table, Loader, Toast, AppContainer, BackButton, PrivateRoute, KeyNote, Modal, CardHeader, CardText, FormStep, CardLabel, RadioButtons, UploadFile, TextArea, CheckBox, CardSubHeader, StatusTable, Row, GenericFileIcon, LinkButton, EditIcon, Banner, CHBIcon, EmployeeModuleCard, HomeIcon, CloseSvg, Label, LinkLabel, ActionBar, DetailsCard, SearchAction, FilterAction, PopUp, ShippingTruck, ModuleHeader, ArrowLeft, Header, TelePhone, DisplayPhotos, CardSectionHeader, CheckPoint, ConnectingCheckPoints, MultiLink, Localities, RemoveableTag, FormComposer, PDFSvg, LabelFieldPair, MultiUploadWrapper, Close as Close$g, BreakLine, InfoBannerIcon, ViewsIcon, Menu, ButtonSelector, LocationIcon, CitizenHomeCard, PTIcon, ApplicantDetails, AddressDetails } from '@djb25/digit-ui-react-components';
+import { TickMark, ArrowDown, MobileNumber, CardLabelError, TextInput, Dropdown, DatePicker, SubmitBar, Card, Table, Loader, Toast, AppContainer, BackButton, PrivateRoute, KeyNote, Modal, CardHeader, CardText, FormStep, CardLabel, RadioButtons, UploadFile, TextArea, CheckBox, CardSubHeader, StatusTable, Row, GenericFileIcon, LinkButton, EditIcon, Banner, CHBIcon, EmployeeModuleCard, HomeIcon, CloseSvg, Label, LinkLabel, ActionBar, DetailsCard, SearchAction, FilterAction, PopUp, ShippingTruck, LabelFieldPair, AddIcon, Menu, ModuleHeader, ArrowLeft, Header, TelePhone, DisplayPhotos, CardSectionHeader, CheckPoint, ConnectingCheckPoints, MultiLink, Localities, RemoveableTag, FormComposer, PDFSvg, MultiUploadWrapper, Close as Close$g, BreakLine, InfoBannerIcon, ViewsIcon, ButtonSelector, LocationIcon, CitizenHomeCard, PTIcon, ApplicantDetails, AddressDetails } from '@djb25/digit-ui-react-components';
 import React, { useState, useMemo, useCallback, useEffect, Fragment, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useHistory, useRouteMatch, Switch, Route, Redirect, Link, useParams } from 'react-router-dom';
 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 L from 'leaflet';
+import 'leaflet/dist/leaflet.css';
 
 const commonConfig = [{
   head: "ES_TITILE_OWNER_DETAILS",
@@ -568,6 +572,80 @@ const treePruningPayload = data => {
   };
   return formdata;
 };
+const fillingPointPayload = data => {
+  var _Digit$UserService$ge, _Digit$UserService$ge2, _data$owner11, _data$owner12, _data$owner13, _data$owner14, _data$owner15, _data$owner16, _data$owner17, _data$owner18, _data$owner19, _data$owner20, _data$owner21, _data$address36, _data$address37, _data$address38, _data$address39, _data$address40, _data$address41, _data$address41$city, _data$address42, _data$address43, _data$address44, _data$address44$city, _data$address45, _data$address46, _data$address46$local, _data$address47, _data$address48, _data$address48$local, _data$address49, _data$address50, _data$address51;
+  return {
+    RequestInfo: {
+      userInfo: {
+        uuid: ((_Digit$UserService$ge = Digit.UserService.getUser()) === null || _Digit$UserService$ge === void 0 ? void 0 : (_Digit$UserService$ge2 = _Digit$UserService$ge.info) === null || _Digit$UserService$ge2 === void 0 ? void 0 : _Digit$UserService$ge2.uuid) || "user-123"
+      }
+    },
+    fillingPoints: [{
+      id: data === null || data === void 0 ? void 0 : data.id,
+      bookingId: data === null || data === void 0 ? void 0 : data.bookingId,
+      tenantId: data === null || data === void 0 ? void 0 : data.tenantId,
+      fillingPointName: data === null || data === void 0 ? void 0 : (_data$owner11 = data.owner) === null || _data$owner11 === void 0 ? void 0 : _data$owner11.fillingPointName,
+      emergencyName: data === null || data === void 0 ? void 0 : (_data$owner12 = data.owner) === null || _data$owner12 === void 0 ? void 0 : _data$owner12.emergencyName,
+      eeName: data === null || data === void 0 ? void 0 : (_data$owner13 = data.owner) === null || _data$owner13 === void 0 ? void 0 : _data$owner13.eeName,
+      eeEmail: data === null || data === void 0 ? void 0 : (_data$owner14 = data.owner) === null || _data$owner14 === void 0 ? void 0 : _data$owner14.eeEmail,
+      eeMobile: data === null || data === void 0 ? void 0 : (_data$owner15 = data.owner) === null || _data$owner15 === void 0 ? void 0 : _data$owner15.eeMobile,
+      aeName: data === null || data === void 0 ? void 0 : (_data$owner16 = data.owner) === null || _data$owner16 === void 0 ? void 0 : _data$owner16.aeName,
+      aeEmail: data === null || data === void 0 ? void 0 : (_data$owner17 = data.owner) === null || _data$owner17 === void 0 ? void 0 : _data$owner17.aeEmail,
+      aeMobile: data === null || data === void 0 ? void 0 : (_data$owner18 = data.owner) === null || _data$owner18 === void 0 ? void 0 : _data$owner18.aeMobile,
+      jeName: data === null || data === void 0 ? void 0 : (_data$owner19 = data.owner) === null || _data$owner19 === void 0 ? void 0 : _data$owner19.jeName,
+      jeEmail: data === null || data === void 0 ? void 0 : (_data$owner20 = data.owner) === null || _data$owner20 === void 0 ? void 0 : _data$owner20.jeEmail,
+      jeMobile: data === null || data === void 0 ? void 0 : (_data$owner21 = data.owner) === null || _data$owner21 === void 0 ? void 0 : _data$owner21.jeMobile,
+      address: {
+        houseNo: data === null || data === void 0 ? void 0 : (_data$address36 = data.address) === null || _data$address36 === void 0 ? void 0 : _data$address36.houseNo,
+        streetName: data === null || data === void 0 ? void 0 : (_data$address37 = data.address) === null || _data$address37 === void 0 ? void 0 : _data$address37.streetName,
+        addressLine1: data === null || data === void 0 ? void 0 : (_data$address38 = data.address) === null || _data$address38 === void 0 ? void 0 : _data$address38.addressLine1,
+        addressLine2: data === null || data === void 0 ? void 0 : (_data$address39 = data.address) === null || _data$address39 === void 0 ? void 0 : _data$address39.addressLine2,
+        landmark: data === null || data === void 0 ? void 0 : (_data$address40 = data.address) === null || _data$address40 === void 0 ? void 0 : _data$address40.landmark,
+        city: (data === null || data === void 0 ? void 0 : (_data$address41 = data.address) === null || _data$address41 === void 0 ? void 0 : (_data$address41$city = _data$address41.city) === null || _data$address41$city === void 0 ? void 0 : _data$address41$city.name) || (data === null || data === void 0 ? void 0 : (_data$address42 = data.address) === null || _data$address42 === void 0 ? void 0 : _data$address42.city) || "",
+        cityCode: (data === null || data === void 0 ? void 0 : (_data$address43 = data.address) === null || _data$address43 === void 0 ? void 0 : _data$address43.cityCode) || (data === null || data === void 0 ? void 0 : (_data$address44 = data.address) === null || _data$address44 === void 0 ? void 0 : (_data$address44$city = _data$address44.city) === null || _data$address44$city === void 0 ? void 0 : _data$address44$city.code) || "",
+        locality: (data === null || data === void 0 ? void 0 : (_data$address45 = data.address) === null || _data$address45 === void 0 ? void 0 : _data$address45.localityCode) || (data === null || data === void 0 ? void 0 : (_data$address46 = data.address) === null || _data$address46 === void 0 ? void 0 : (_data$address46$local = _data$address46.locality) === null || _data$address46$local === void 0 ? void 0 : _data$address46$local.code) || "",
+        localityCode: (data === null || data === void 0 ? void 0 : (_data$address47 = data.address) === null || _data$address47 === void 0 ? void 0 : _data$address47.localityCode) || (data === null || data === void 0 ? void 0 : (_data$address48 = data.address) === null || _data$address48 === void 0 ? void 0 : (_data$address48$local = _data$address48.locality) === null || _data$address48$local === void 0 ? void 0 : _data$address48$local.code) || "",
+        pincode: data === null || data === void 0 ? void 0 : (_data$address49 = data.address) === null || _data$address49 === void 0 ? void 0 : _data$address49.pincode,
+        latitude: data === null || data === void 0 ? void 0 : (_data$address50 = data.address) === null || _data$address50 === void 0 ? void 0 : _data$address50.latitude,
+        longitude: data === null || data === void 0 ? void 0 : (_data$address51 = data.address) === null || _data$address51 === void 0 ? void 0 : _data$address51.longitude,
+        type: "FILLING-POINT"
+      }
+    }]
+  };
+};
+const fixedPointPayload = data => {
+  var _data$owner22, _data$owner23, _data$owner24, _data$owner25, _data$owner26, _data$address52, _data$address52$addre, _data$address53, _data$address54, _data$address54$city, _data$address55, _data$address56, _data$address56$city, _data$address57, _data$address58, _data$address58$local, _data$address59, _data$address59$local, _data$address60, _data$address61, _data$address61$local, _data$address62, _data$address63, _data$address64, _data$address65, _data$address66, _data$address67, _data$address68, _data$address69, _data$address70;
+  return {
+    waterTankerBookingDetail: {
+      tenantId: data === null || data === void 0 ? void 0 : data.tenantId,
+      bookingId: (data === null || data === void 0 ? void 0 : data.bookingId) || "",
+      auditDetails: (data === null || data === void 0 ? void 0 : data.auditDetails) || null,
+      applicantDetail: {
+        name: (data === null || data === void 0 ? void 0 : (_data$owner22 = data.owner) === null || _data$owner22 === void 0 ? void 0 : _data$owner22.name) || (data === null || data === void 0 ? void 0 : (_data$owner23 = data.owner) === null || _data$owner23 === void 0 ? void 0 : _data$owner23.applicantName) || "",
+        mobileNumber: (data === null || data === void 0 ? void 0 : (_data$owner24 = data.owner) === null || _data$owner24 === void 0 ? void 0 : _data$owner24.mobileNumber) || "",
+        alternateNumber: (data === null || data === void 0 ? void 0 : (_data$owner25 = data.owner) === null || _data$owner25 === void 0 ? void 0 : _data$owner25.alternateNumber) || "",
+        emailId: (data === null || data === void 0 ? void 0 : (_data$owner26 = data.owner) === null || _data$owner26 === void 0 ? void 0 : _data$owner26.emailId) || "",
+        type: "FIXED-POINT"
+      },
+      address: {
+        type: "FIXED-POINT",
+        addressType: (data === null || data === void 0 ? void 0 : (_data$address52 = data.address) === null || _data$address52 === void 0 ? void 0 : (_data$address52$addre = _data$address52.addressType) === null || _data$address52$addre === void 0 ? void 0 : _data$address52$addre.code) || (data === null || data === void 0 ? void 0 : (_data$address53 = data.address) === null || _data$address53 === void 0 ? void 0 : _data$address53.addressType) || "",
+        city: (data === null || data === void 0 ? void 0 : (_data$address54 = data.address) === null || _data$address54 === void 0 ? void 0 : (_data$address54$city = _data$address54.city) === null || _data$address54$city === void 0 ? void 0 : _data$address54$city.name) || (data === null || data === void 0 ? void 0 : (_data$address55 = data.address) === null || _data$address55 === void 0 ? void 0 : _data$address55.city) || "",
+        cityCode: (data === null || data === void 0 ? void 0 : (_data$address56 = data.address) === null || _data$address56 === void 0 ? void 0 : (_data$address56$city = _data$address56.city) === null || _data$address56$city === void 0 ? void 0 : _data$address56$city.code) || (data === null || data === void 0 ? void 0 : (_data$address57 = data.address) === null || _data$address57 === void 0 ? void 0 : _data$address57.cityCode) || "",
+        locality: (data === null || data === void 0 ? void 0 : (_data$address58 = data.address) === null || _data$address58 === void 0 ? void 0 : (_data$address58$local = _data$address58.locality) === null || _data$address58$local === void 0 ? void 0 : _data$address58$local.label) || (data === null || data === void 0 ? void 0 : (_data$address59 = data.address) === null || _data$address59 === void 0 ? void 0 : (_data$address59$local = _data$address59.locality) === null || _data$address59$local === void 0 ? void 0 : _data$address59$local.name) || (data === null || data === void 0 ? void 0 : (_data$address60 = data.address) === null || _data$address60 === void 0 ? void 0 : _data$address60.locality) || "",
+        localityCode: (data === null || data === void 0 ? void 0 : (_data$address61 = data.address) === null || _data$address61 === void 0 ? void 0 : (_data$address61$local = _data$address61.locality) === null || _data$address61$local === void 0 ? void 0 : _data$address61$local.code) || (data === null || data === void 0 ? void 0 : (_data$address62 = data.address) === null || _data$address62 === void 0 ? void 0 : _data$address62.localityCode) || "",
+        houseNo: (data === null || data === void 0 ? void 0 : (_data$address63 = data.address) === null || _data$address63 === void 0 ? void 0 : _data$address63.houseNo) || "",
+        streetName: (data === null || data === void 0 ? void 0 : (_data$address64 = data.address) === null || _data$address64 === void 0 ? void 0 : _data$address64.streetName) || "",
+        addressLine1: (data === null || data === void 0 ? void 0 : (_data$address65 = data.address) === null || _data$address65 === void 0 ? void 0 : _data$address65.addressLine1) || "",
+        addressLine2: (data === null || data === void 0 ? void 0 : (_data$address66 = data.address) === null || _data$address66 === void 0 ? void 0 : _data$address66.addressLine2) || "",
+        landmark: (data === null || data === void 0 ? void 0 : (_data$address67 = data.address) === null || _data$address67 === void 0 ? void 0 : _data$address67.landmark) || "",
+        pincode: (data === null || data === void 0 ? void 0 : (_data$address68 = data.address) === null || _data$address68 === void 0 ? void 0 : _data$address68.pincode) || "",
+        latitude: (data === null || data === void 0 ? void 0 : (_data$address69 = data.address) === null || _data$address69 === void 0 ? void 0 : _data$address69.latitude) || "",
+        longitude: (data === null || data === void 0 ? void 0 : (_data$address70 = data.address) === null || _data$address70 === void 0 ? void 0 : _data$address70.longitude) || ""
+      }
+    }
+  };
+};
 
 const CollapsibleCardPage = ({
   number,
@@ -774,7 +852,7 @@ const WTSearchApplication = ({
       className: "wt-search-grid",
       style: {
         display: "grid",
-        gridTemplateColumns: "1fr 1fr",
+        gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr",
         gap: "24px"
       }
     }, /*#__PURE__*/React.createElement("div", {
@@ -866,7 +944,8 @@ const WTSearchApplication = ({
       className: "wt-search-actions",
       style: {
         display: "flex",
-        justifyContent: "flex-end",
+        justifyContent: isMobile ? "center" : "flex-end",
+        flexDirection: isMobile ? "column-reverse" : "row",
         gap: "24px",
         marginTop: "16px"
       }
@@ -881,7 +960,7 @@ const WTSearchApplication = ({
       }
     }, t("ES_COMMON_CLEAR_ALL")), /*#__PURE__*/React.createElement("div", {
       style: {
-        minWidth: "160px"
+        minWidth: isMobile ? "100%" : "160px"
       }
     }, /*#__PURE__*/React.createElement(SubmitBar, {
       label: t("ES_COMMON_SEARCH"),
@@ -2199,6 +2278,15 @@ const WTCard = () => {
   }, {
     label: t("WT_APPLICATION_CREATE"),
     link: `${APPLICATION_PATH}/employee/wt/request-service`
+  }, {
+    label: t("WT_FIXED_POINT_SCHEDULE_MANAGEMENT"),
+    link: `${APPLICATION_PATH}/employee/wt/fixed-point-schedule`
+  }, {
+    label: t("WT_LIVE_TRACKING_SYSTEM"),
+    link: `${APPLICATION_PATH}/employee/wt/live-tracking`
+  }, {
+    label: t("WT_SEARCH_FIX_POINT"),
+    link: `${APPLICATION_PATH}/employee/wt/search-filling-fix-point`
   }];
   const WT_CEMP = Digit.UserService.hasAccess(["WT_CEMP"]) || false;
   const propsForModuleCard = {
@@ -3033,103 +3121,3192 @@ const Inbox = ({
   }
 };
 
-const EmployeeApp = ({
-  path
+const AddTripModal = ({
+  t,
+  closeModal,
+  onSubmit,
+  initialValues
 }) => {
-  var _Digit, _Digit$ComponentRegis, _Digit2, _Digit2$ComponentRegi;
+  const {
+    register,
+    handleSubmit,
+    control,
+    formState: {
+      errors
+    }
+  } = useForm({
+    defaultValues: initialValues || {}
+  });
+  const dayOptions = [{
+    label: t("MON"),
+    value: "Mon"
+  }, {
+    label: t("TUE"),
+    value: "Tue"
+  }, {
+    label: t("WED"),
+    value: "Wed"
+  }, {
+    label: t("THU"),
+    value: "Thu"
+  }, {
+    label: t("FRI"),
+    value: "Fri"
+  }, {
+    label: t("SAT"),
+    value: "Sat"
+  }, {
+    label: t("SUN"),
+    value: "Sun"
+  }];
+  const activeOptions = [{
+    label: t("YES"),
+    value: "Yes"
+  }, {
+    label: t("NO"),
+    value: "No"
+  }];
+  const onFormSubmit = data => {
+    onSubmit(data);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "custom-modal-overlay",
+    style: {
+      position: "fixed",
+      top: 0,
+      left: 0,
+      width: "100%",
+      height: "100%",
+      backgroundColor: "rgba(0, 0, 0, 0.5)",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      zIndex: 9999
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "custom-modal-content",
+    style: {
+      backgroundColor: "#fff",
+      borderRadius: "8px",
+      width: "70%",
+      maxWidth: "800px",
+      maxHeight: "90vh",
+      display: "flex",
+      flexDirection: "column",
+      boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
+      position: "relative"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "custom-modal-header",
+    style: {
+      padding: "16px 24px",
+      borderBottom: "1px solid #eee",
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center"
+    }
+  }, /*#__PURE__*/React.createElement("h1", {
+    style: {
+      margin: 0,
+      fontSize: "20px",
+      fontWeight: "600",
+      color: "#1D4E7F"
+    }
+  }, initialValues ? t("WT_EDIT_TRIP") : t("WT_ADD_TRIP")), /*#__PURE__*/React.createElement("button", {
+    onClick: closeModal,
+    style: {
+      background: "none",
+      border: "none",
+      fontSize: "24px",
+      cursor: "pointer",
+      color: "#666"
+    }
+  }, "\xD7")), /*#__PURE__*/React.createElement("div", {
+    className: "custom-modal-body",
+    style: {
+      padding: "24px",
+      overflowY: "auto"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "add-trip-form",
+    style: {
+      display: "grid",
+      gridTemplateColumns: "repeat(3, 1fr)",
+      gap: "20px"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "field-group"
+  }, /*#__PURE__*/React.createElement(CardLabel, {
+    style: {
+      marginBottom: "8px",
+      fontWeight: "500"
+    }
+  }, t("WT_SCHEDULE_ID")), /*#__PURE__*/React.createElement(TextInput, {
+    name: "scheduleId",
+    inputRef: register()
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "field-group"
+  }, /*#__PURE__*/React.createElement(CardLabel, {
+    style: {
+      marginBottom: "8px",
+      fontWeight: "500"
+    }
+  }, t("WT_FIXED_POINT_CODE")), /*#__PURE__*/React.createElement(TextInput, {
+    name: "fixedPointCode",
+    inputRef: register()
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "field-group"
+  }, /*#__PURE__*/React.createElement(CardLabel, {
+    style: {
+      marginBottom: "8px",
+      fontWeight: "500"
+    }
+  }, t("WT_DAY")), /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "day",
+    render: props => /*#__PURE__*/React.createElement(Dropdown, {
+      option: dayOptions,
+      optionKey: "label",
+      selected: props.value,
+      select: props.onChange,
+      t: t
+    })
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "field-group"
+  }, /*#__PURE__*/React.createElement(CardLabel, {
+    style: {
+      marginBottom: "8px",
+      fontWeight: "500"
+    }
+  }, t("WT_FREQUENCY_NO")), /*#__PURE__*/React.createElement(TextInput, {
+    name: "frequencyNo",
+    inputRef: register()
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "field-group"
+  }, /*#__PURE__*/React.createElement(CardLabel, {
+    style: {
+      marginBottom: "8px",
+      fontWeight: "500"
+    }
+  }, t("WT_VEHICLE_ID")), /*#__PURE__*/React.createElement(TextInput, {
+    name: "vehicleId",
+    inputRef: register()
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "field-group"
+  }, /*#__PURE__*/React.createElement(CardLabel, {
+    style: {
+      marginBottom: "8px",
+      fontWeight: "500"
+    }
+  }, t("WT_ARRIVAL_TIME_TO_FPL")), /*#__PURE__*/React.createElement(TextInput, {
+    name: "arrivalTimeFpl",
+    inputRef: register(),
+    type: "time"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "field-group"
+  }, /*#__PURE__*/React.createElement(CardLabel, {
+    style: {
+      marginBottom: "8px",
+      fontWeight: "500"
+    }
+  }, t("WT_DEPARTURE_TIME_FROM_FPL")), /*#__PURE__*/React.createElement(TextInput, {
+    name: "departureTimeFpl",
+    inputRef: register(),
+    type: "time"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "field-group"
+  }, /*#__PURE__*/React.createElement(CardLabel, {
+    style: {
+      marginBottom: "8px",
+      fontWeight: "500"
+    }
+  }, t("WT_ARRIVAL_AT_FIXED_POINT")), /*#__PURE__*/React.createElement(TextInput, {
+    name: "arrivalFixedPoint",
+    inputRef: register(),
+    type: "time"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "field-group"
+  }, /*#__PURE__*/React.createElement(CardLabel, {
+    style: {
+      marginBottom: "8px",
+      fontWeight: "500"
+    }
+  }, t("WT_DEPARTURE_AT_FIXED_POINT")), /*#__PURE__*/React.createElement(TextInput, {
+    name: "departureFixedPoint",
+    inputRef: register(),
+    type: "time"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "field-group"
+  }, /*#__PURE__*/React.createElement(CardLabel, {
+    style: {
+      marginBottom: "8px",
+      fontWeight: "500"
+    }
+  }, t("WT_RETURN_TO_FPL")), /*#__PURE__*/React.createElement(TextInput, {
+    name: "returnFpl",
+    inputRef: register(),
+    type: "time"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "field-group"
+  }, /*#__PURE__*/React.createElement(CardLabel, {
+    style: {
+      marginBottom: "8px",
+      fontWeight: "500"
+    }
+  }, t("WT_VOLUME")), /*#__PURE__*/React.createElement(TextInput, {
+    name: "volume",
+    inputRef: register()
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "field-group"
+  }, /*#__PURE__*/React.createElement(CardLabel, {
+    style: {
+      marginBottom: "8px",
+      fontWeight: "500"
+    }
+  }, t("WT_ACTIVE")), /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "active",
+    render: props => /*#__PURE__*/React.createElement(Dropdown, {
+      option: activeOptions,
+      optionKey: "label",
+      selected: props.value,
+      select: props.onChange,
+      t: t
+    })
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "field-group",
+    style: {
+      gridColumn: "span 2"
+    }
+  }, /*#__PURE__*/React.createElement(CardLabel, {
+    style: {
+      marginBottom: "8px",
+      fontWeight: "500"
+    }
+  }, t("WT_REMARKS")), /*#__PURE__*/React.createElement(TextInput, {
+    name: "remarks",
+    inputRef: register()
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: "custom-modal-footer",
+    style: {
+      padding: "16px 24px",
+      borderTop: "1px solid #eee",
+      display: "flex",
+      justifyContent: "flex-end",
+      gap: "12px"
+    }
+  }, /*#__PURE__*/React.createElement("button", {
+    className: "button-cancel",
+    onClick: closeModal,
+    style: {
+      padding: "8px 20px",
+      border: "1px solid #ccc",
+      background: "#f4f4f4",
+      borderRadius: "4px",
+      cursor: "pointer"
+    }
+  }, t("CS_COMMON_CANCEL")), /*#__PURE__*/React.createElement("button", {
+    className: "button-save",
+    onClick: handleSubmit(onFormSubmit),
+    style: {
+      padding: "8px 20px",
+      background: "#1D4E7F",
+      color: "#fff",
+      border: "none",
+      borderRadius: "4px",
+      cursor: "pointer"
+    }
+  }, initialValues ? t("WT_UPDATE") : t("CS_COMMON_SAVE")))));
+};
+
+const FixedPointScheduleManagement = () => {
   const {
     t
   } = useTranslation();
-  const location = useLocation();
-  sessionStorage.removeItem("revalidateddone");
-  const getDynamicBreadcrumbs = () => {
-    const pathname = location.pathname;
-    let moduleName = "WT";
-    if (pathname.includes("/mt/")) moduleName = "MT";
-    if (pathname.includes("/tp/")) moduleName = "TP";
-    let crumbs = [{
-      icon: HomeIcon,
-      path: "/digit-ui/employee"
-    }, {
-      label: t("WT_MODULE_NAME"),
-      path: `/digit-ui/employee/module/details?moduleName=${moduleName}`
-    }];
-    if (pathname.includes("/inbox")) {
-      let label = "ES_COMMON_INBOX";
-      if (pathname.includes("/tp/inbox")) label = "TP_INBOX";
-      crumbs.push({
-        label: t(label)
-      });
-    } else if (pathname.includes("/my-bookings")) {
-      let label = "WT_SEARCH_BOOKINGS";
-      if (pathname.includes("/mt/my-bookings")) label = "MT_SEARCH_BOOKINGS";
-      if (pathname.includes("/tp/my-bookings")) label = "TP_SEARCH_BOOKINGS";
-      crumbs.push({
-        label: t(label)
-      });
-    } else if (pathname.includes("/request-service")) {
-      crumbs.push({
-        label: t("WT_REQUEST_SERVICE")
-      });
-    } else if (pathname.includes("/booking-details") || pathname.includes("/bookingsearch/booking-details")) {
-      const isSearch = pathname.includes("/bookingsearch");
-      if (isSearch) {
-        crumbs.push({
-          label: t("WT_SEARCH_BOOKINGS"),
-          path: `${path}/my-bookings`
-        });
-      } else {
-        crumbs.push({
-          label: t("ES_COMMON_INBOX"),
-          path: `${path}/inbox`
+  const [showModal, setShowModal] = useState(false);
+  const [selectedDay, setSelectedDay] = useState("Mon");
+  const [year, setYear] = useState({
+    label: "Year 2026",
+    value: "2026"
+  });
+  const [fixedPoint, setFixedPoint] = useState({
+    label: "FP01",
+    value: "FP01"
+  });
+  const [day, setDay] = useState({
+    label: "Mon",
+    value: "Mon"
+  });
+  const [status, setStatus] = useState({
+    label: "All Status",
+    value: "all"
+  });
+  const [vehicle, setVehicle] = useState({
+    label: "DL1LAG7729",
+    value: "DL1LAG7729"
+  });
+  const [editingRowIndex, setEditingRowIndex] = useState(null);
+  const handleDelete = index => {
+    const updatedData = data.filter((_, i) => i !== index);
+    setData(updatedData);
+  };
+  const handleDownload = type => {
+    const filename = `FixedPointSchedule_${type.value}_${new Date().toLocaleDateString()}`;
+    if (window.Digit && window.Digit.Download && window.Digit.Download.Excel) {
+      window.Digit.Download.Excel(data, filename);
+    } else {
+      const csvRows = [];
+      const headers = Object.keys(data[0]);
+      csvRows.push(headers.join(","));
+      for (const row of data) {
+        const values = headers.map(header => {
+          const escaped = ("" + row[header]).replace(/"/g, '\\"');
+          return `"${escaped}"`;
         });
+        csvRows.push(values.join(","));
       }
-      crumbs.push({
-        label: t("WT_BOOKING_DETAILS")
+      const blob = new Blob([csvRows.join("\n")], {
+        type: "text/csv"
       });
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.setAttribute("hidden", "");
+      a.setAttribute("href", url);
+      a.setAttribute("download", `${filename}.csv`);
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
     }
-    return crumbs;
   };
-  const inboxInitialState = {
-    searchParams: {
-      uuid: {
-        code: "ASSIGNED_TO_ALL",
-        name: "ES_INBOX_ASSIGNED_TO_ALL"
-      },
-      services: ["watertanker"],
-      applicationStatus: [],
-      locality: []
+  const [data, setData] = useState([{
+    scheduleId: "SASID-0001",
+    fixedPoint: "FP01",
+    day: "Mon",
+    freq: "1",
+    arrToFpl: "06:00",
+    depFromFpl: "06:10",
+    arrAtFixedPoint: "06:40",
+    depAtFixedPoint: "06:55",
+    returnToFpl: "07:20",
+    volume: "3 KL",
+    vehicle: "DL1LAG7729",
+    active: "Y"
+  }, {
+    scheduleId: "SASID-0002",
+    fixedPoint: "FP01",
+    day: "Mon",
+    freq: "2",
+    arrToFpl: "07:20",
+    depFromFpl: "07:30",
+    arrAtFixedPoint: "08:00",
+    depAtFixedPoint: "08:15",
+    returnToFpl: "08:40",
+    volume: "3 KL",
+    vehicle: "DL1LAG7729",
+    active: "Y"
+  }, {
+    scheduleId: "SASID-0003",
+    fixedPoint: "FP02",
+    day: "Tue",
+    freq: "3",
+    arrToFpl: "08:40",
+    depFromFpl: "08:50",
+    arrAtFixedPoint: "09:20",
+    depAtFixedPoint: "09:35",
+    returnToFpl: "10:00",
+    volume: "3 KL",
+    vehicle: "DL1LAG7730",
+    active: "Y"
+  }, {
+    scheduleId: "SASID-0004",
+    fixedPoint: "FP03",
+    day: "Wed",
+    freq: "1",
+    arrToFpl: "09:00",
+    depFromFpl: "09:10",
+    arrAtFixedPoint: "09:40",
+    depAtFixedPoint: "09:55",
+    returnToFpl: "10:20",
+    volume: "5 KL",
+    vehicle: "DL1LAG7731",
+    active: "N"
+  }]);
+  const [masterData] = useState(data);
+  const handleSearch = () => {
+    let filteredData = [...masterData];
+    if (fixedPoint !== null && fixedPoint !== void 0 && fixedPoint.value && fixedPoint.value !== "all") {
+      filteredData = filteredData.filter(item => item.fixedPoint === fixedPoint.value);
     }
-  };
-  const inboxInitialStateMt = {
-    searchParams: {
-      uuid: {
-        code: "ASSIGNED_TO_ALL",
-        name: "ES_INBOX_ASSIGNED_TO_ALL"
-      },
-      services: ["mobileToilet"],
-      applicationStatus: [],
-      locality: []
+    if (day !== null && day !== void 0 && day.value && day.value !== "all") {
+      filteredData = filteredData.filter(item => item.day === day.value);
     }
-  };
-  const inboxInitialStateTp = {
-    searchParams: {
-      uuid: {
-        code: "ASSIGNED_TO_ALL",
-        name: "ES_INBOX_ASSIGNED_TO_ALL"
-      },
-      services: ["treePruning"],
-      applicationStatus: [],
-      locality: []
+    if (status !== null && status !== void 0 && status.value && status.value !== "all") {
+      const activeStatus = status.value === "Active" ? "Y" : "N";
+      filteredData = filteredData.filter(item => item.active === activeStatus);
     }
+    if (vehicle !== null && vehicle !== void 0 && vehicle.value && vehicle.value !== "all") {
+      filteredData = filteredData.filter(item => item.vehicle === vehicle.value);
+    }
+    setData(filteredData);
   };
-  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", {
-    className: "ground-container employee-app-container form-container"
-  }, /*#__PURE__*/React.createElement(ModuleHeader, {
-    leftContent: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ArrowLeft, {
-      className: "icon"
+  const columns = React.useMemo(() => [{
+    Header: t("WT_SCHEDULE_ID"),
+    accessor: "scheduleId"
+  }, {
+    Header: t("WT_FIXED_POINT"),
+    accessor: "fixedPoint"
+  }, {
+    Header: t("WT_DAY"),
+    accessor: "day"
+  }, {
+    Header: t("WT_FREQ"),
+    accessor: "freq"
+  }, {
+    Header: t("WT_ARR_TO_FPL"),
+    accessor: "arrToFpl"
+  }, {
+    Header: t("WT_DEP_FROM_FPL"),
+    accessor: "depFromFpl"
+  }, {
+    Header: t("WT_ARR_AT_FIXED_POINT"),
+    accessor: "arrAtFixedPoint"
+  }, {
+    Header: t("WT_DEP_AT_FIXED_POINT"),
+    accessor: "depAtFixedPoint"
+  }, {
+    Header: t("WT_RETURN_TO_FPL"),
+    accessor: "returnToFpl"
+  }, {
+    Header: t("WT_VOLUME"),
+    accessor: "volume"
+  }, {
+    Header: t("WT_VEHICLE"),
+    accessor: "vehicle"
+  }, {
+    Header: t("WT_ACTIVE"),
+    accessor: "active",
+    Cell: ({
+      value
+    }) => /*#__PURE__*/React.createElement("span", {
+      style: {
+        background: value === "Y" ? "#E6F4EA" : "#FCE8E6",
+        padding: "2px 8px",
+        borderRadius: "10px",
+        color: value === "Y" ? "#1E8E3E" : "#D93025"
+      }
+    }, value)
+  }, {
+    Header: t("WT_ACTION"),
+    Cell: ({
+      row
+    }) => /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: "flex",
+        gap: "5px"
+      }
+    }, /*#__PURE__*/React.createElement("button", {
+      onClick: () => {
+        setEditingRowIndex(row.index);
+        setShowModal(true);
+      },
+      style: {
+        color: "#1D4E7F",
+        border: "1px solid #1D4E7F",
+        background: "none",
+        padding: "2px 8px",
+        cursor: "pointer"
+      }
+    }, t("WT_EDIT")), /*#__PURE__*/React.createElement("button", {
+      onClick: () => handleDelete(row.index),
+      style: {
+        color: "#fff",
+        border: "none",
+        background: "#D93025",
+        padding: "2px 8px",
+        cursor: "pointer"
+      }
+    }, t("WT_DELETE")))
+  }], [t]);
+  const days = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+  return /*#__PURE__*/React.createElement("div", {
+    className: "fixed-point-schedule-management"
+  }, /*#__PURE__*/React.createElement(Card, {
+    style: {
+      padding: "20px"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "finance-mainlayout",
+    style: {
+      marginBottom: "20px"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "finance-mainlayout-col1"
+  }, /*#__PURE__*/React.createElement(Dropdown, {
+    option: [{
+      label: "Year 2024",
+      value: "2024"
+    }, {
+      label: "Year 2025",
+      value: "2025"
+    }, {
+      label: "Year 2026",
+      value: "2026"
+    }],
+    optionKey: "label",
+    selected: year,
+    t: t,
+    select: setYear
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "finance-mainlayout-col1"
+  }, /*#__PURE__*/React.createElement(Dropdown, {
+    option: [{
+      label: "All Fixed Points",
+      value: "all"
+    }, {
+      label: "FP01",
+      value: "FP01"
+    }, {
+      label: "FP02",
+      value: "FP02"
+    }, {
+      label: "FP03",
+      value: "FP03"
+    }],
+    optionKey: "label",
+    selected: fixedPoint,
+    t: t,
+    select: setFixedPoint,
+    placeholder: "All Fixed Points"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "finance-mainlayout-col1"
+  }, /*#__PURE__*/React.createElement(Dropdown, {
+    option: [{
+      label: "All Days",
+      value: "all"
+    }, {
+      label: "Mon",
+      value: "Mon"
+    }, {
+      label: "Tue",
+      value: "Tue"
+    }, {
+      label: "Wed",
+      value: "Wed"
+    }, {
+      label: "Thu",
+      value: "Thu"
+    }, {
+      label: "Fri",
+      value: "Fri"
+    }, {
+      label: "Sat",
+      value: "Sat"
+    }, {
+      label: "Sun",
+      value: "Sun"
+    }],
+    optionKey: "label",
+    selected: day,
+    t: t,
+    select: setDay,
+    placeholder: "All Days"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "finance-mainlayout-col1"
+  }, /*#__PURE__*/React.createElement(Dropdown, {
+    option: [{
+      label: "All Status",
+      value: "all"
+    }, {
+      label: "Active",
+      value: "Active"
+    }, {
+      label: "Inactive",
+      value: "Inactive"
+    }],
+    optionKey: "label",
+    selected: status,
+    t: t,
+    select: setStatus,
+    placeholder: "All Status"
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "finance-mainlayout",
+    style: {
+      marginBottom: "20px"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "finance-mainlayout-col1"
+  }, /*#__PURE__*/React.createElement(Dropdown, {
+    option: [{
+      label: "All Vehicles",
+      value: "all"
+    }, {
+      label: "DL1LAG7729",
+      value: "DL1LAG7729"
+    }, {
+      label: "DL1LAG7730",
+      value: "DL1LAG7730"
+    }, {
+      label: "DL1LAG7731",
+      value: "DL1LAG7731"
+    }],
+    optionKey: "label",
+    selected: vehicle,
+    t: t,
+    select: setVehicle,
+    placeholder: "All Vehicles"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "finance-mainlayout-col1"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "finance-mainlayout-col1"
+  }, /*#__PURE__*/React.createElement(Dropdown, {
+    option: [{
+      label: t("WT_EXCEL_WEEKWISE"),
+      value: "Weekwise"
+    }, {
+      label: t("WT_EXCEL_MONTHWISE"),
+      value: "Monthwise"
+    }, {
+      label: t("WT_EXCEL_YEARWISE"),
+      value: "Yearwise"
+    }],
+    optionKey: "label",
+    placeholder: t("WT_EXPORT"),
+    t: t,
+    select: handleDownload
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "finance-mainlayout-col1"
+  }, /*#__PURE__*/React.createElement(SubmitBar, {
+    label: t("ES_COMMON_SEARCH"),
+    onSubmit: handleSearch
+  }))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      gap: "5px",
+      marginBottom: "20px"
+    }
+  }, days.map(day => /*#__PURE__*/React.createElement("button", {
+    key: day,
+    onClick: () => setSelectedDay(day),
+    style: {
+      padding: "8px 16px",
+      border: "1px solid #ccc",
+      borderRadius: "4px",
+      background: selectedDay === day ? "#1D4E7F" : "#fff",
+      color: selectedDay === day ? "#fff" : "#333",
+      cursor: "pointer"
+    }
+  }, t(day.toUpperCase())))), /*#__PURE__*/React.createElement(Table, {
+    t: t,
+    data: data,
+    columns: columns,
+    getCellProps: cellInfo => ({}),
+    styles: {
+      minWidth: "1200px"
+    },
+    inboxStyles: {
+      overflowX: "auto"
+    }
+  }), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("button", {
+    onClick: () => {
+      setEditingRowIndex(null);
+      setShowModal(true);
+    },
+    style: {
+      background: "#1E8E3E",
+      color: "#fff",
+      border: "none",
+      padding: "10px 20px",
+      borderRadius: "4px",
+      cursor: "pointer",
+      display: "flex",
+      alignItems: "center",
+      gap: "5px",
+      marginBottom: "10px"
+    }
+  }, /*#__PURE__*/React.createElement("span", null, "+"), " ", t("WT_ADD_TRIP")))), showModal && /*#__PURE__*/React.createElement(AddTripModal, {
+    t: t,
+    closeModal: () => {
+      setShowModal(false);
+      setEditingRowIndex(null);
+    },
+    initialValues: editingRowIndex !== null ? {
+      scheduleId: data[editingRowIndex].scheduleId,
+      fixedPointCode: data[editingRowIndex].fixedPoint,
+      day: {
+        label: t(data[editingRowIndex].day.toUpperCase()),
+        value: data[editingRowIndex].day
+      },
+      frequencyNo: data[editingRowIndex].freq,
+      arrivalTimeFpl: data[editingRowIndex].arrToFpl,
+      departureTimeFpl: data[editingRowIndex].depFromFpl,
+      arrivalFixedPoint: data[editingRowIndex].arrAtFixedPoint,
+      departureFixedPoint: data[editingRowIndex].depAtFixedPoint,
+      returnFpl: data[editingRowIndex].returnToFpl,
+      volume: data[editingRowIndex].volume,
+      vehicleId: data[editingRowIndex].vehicle,
+      active: {
+        label: data[editingRowIndex].active === "Y" ? t("YES") : t("NO"),
+        value: data[editingRowIndex].active === "Y" ? "Yes" : "No"
+      }
+    } : null,
+    onSubmit: formData => {
+      var _formData$day, _formData$active;
+      const rowData = {
+        scheduleId: formData.scheduleId || `SASID-000${data.length + 1}`,
+        fixedPoint: formData.fixedPointCode || "FP01",
+        day: ((_formData$day = formData.day) === null || _formData$day === void 0 ? void 0 : _formData$day.value) || "Mon",
+        freq: formData.frequencyNo || "1",
+        arrToFpl: formData.arrivalTimeFpl || "--:--",
+        depFromFpl: formData.departureTimeFpl || "--:--",
+        arrAtFixedPoint: formData.arrivalFixedPoint || "--:--",
+        depAtFixedPoint: formData.departureFixedPoint || "--:--",
+        returnToFpl: formData.returnFpl || "--:--",
+        volume: formData.volume || "0 KL",
+        vehicle: formData.vehicleId || "NA",
+        active: ((_formData$active = formData.active) === null || _formData$active === void 0 ? void 0 : _formData$active.value) === "Yes" ? "Y" : "N"
+      };
+      if (editingRowIndex !== null) {
+        const updatedData = [...data];
+        updatedData[editingRowIndex] = rowData;
+        setData(updatedData);
+      } else {
+        setData([...data, rowData]);
+      }
+      setShowModal(false);
+      setEditingRowIndex(null);
+    }
+  }));
+};
+
+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 onlineIcon = 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, 41],
+  popupAnchor: [1, -34],
+  shadowSize: [41, 41]
+});
+const offlineIcon = new L.Icon({
+  iconUrl: "https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.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 destinationIcon = 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 SOCKET_URL = "http://localhost:3000";
+const MapController = ({
+  selectedDriver
+}) => {
+  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, {
+        animate: true,
+        duration: 1
+      });
+    }
+  }, [selectedDriver, map]);
+  return null;
+};
+const useRoute = (start, end) => {
+  const [routeData, setRouteData] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    if (!start || !end) return;
+    const fetchRoute = async () => {
+      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");
+        const data = await response.json();
+        if (data.routes && data.routes[0]) {
+          const route = data.routes[0];
+          const coordinates = route.geometry.coordinates.map(coord => [coord[1], coord[0]]);
+          setRouteData({
+            coordinates,
+            distance: route.distance,
+            duration: route.duration,
+            legs: route.legs
+          });
+        }
+      } catch (err) {
+        console.error("Error fetching route:", err);
+        setError(err.message);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchRoute();
+  }, [start === null || start === void 0 ? void 0 : start.lat, start === null || start === void 0 ? void 0 : start.lng, end === null || end === void 0 ? void 0 : end.lat, end === null || end === void 0 ? void 0 : end.lng]);
+  return {
+    routeData,
+    loading,
+    error
+  };
+};
+const RouteLayer = ({
+  start,
+  end,
+  color: _color = "#2196f3",
+  weight: _weight = 6
+}) => {
+  const {
+    routeData,
+    loading,
+    error
+  } = useRoute(start, end);
+  const [showSteps, setShowSteps] = useState(false);
+  const [selectedStep, setSelectedStep] = useState(null);
+  if (loading) {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: "absolute",
+        top: "20px",
+        left: "20px",
+        background: "white",
+        padding: "8px 16px",
+        borderRadius: "4px",
+        boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
+        zIndex: 1000
+      }
+    }, "Loading route...");
+  }
+  if (error) {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: "absolute",
+        top: "20px",
+        left: "20px",
+        background: "#ffebee",
+        color: "#c62828",
+        padding: "8px 16px",
+        borderRadius: "4px",
+        boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
+        zIndex: 1000
+      }
+    }, "Error loading route: ", error);
+  }
+  if (!routeData) return null;
+  const renderRouteSegments = () => {
+    if (!routeData.legs) return null;
+    const segments = [];
+    routeData.legs.forEach((leg, legIndex) => {
+      leg.steps.forEach((step, stepIndex) => {
+        const stepCoordinates = step.geometry.coordinates.map(coord => [coord[1], coord[0]]);
+        let segmentColor = _color;
+        if (step.maneuver.type === "turn") {
+          segmentColor = "#ff9800";
+        } else if (step.maneuver.type === "straight") {
+          segmentColor = "#4caf50";
+        } else if (step.maneuver.type === "arrive") {
+          segmentColor = "#f44336";
+        }
+        segments.push(/*#__PURE__*/React.createElement(React.Fragment, {
+          key: `${legIndex}-${stepIndex}`
+        }, /*#__PURE__*/React.createElement(Polyline, {
+          positions: stepCoordinates,
+          color: segmentColor,
+          weight: _weight + 2,
+          opacity: 0.3,
+          lineCap: "round"
+        }), /*#__PURE__*/React.createElement(Polyline, {
+          positions: stepCoordinates,
+          color: segmentColor,
+          weight: _weight,
+          opacity: 0.9,
+          lineCap: "round",
+          eventHandlers: {
+            mouseover: () => setSelectedStep(step),
+            mouseout: () => setSelectedStep(null),
+            click: () => setShowSteps(!showSteps)
+          }
+        }), stepCoordinates.map((coord, idx) => {
+          if (idx % 5 === 0 && idx < stepCoordinates.length - 1) {
+            const nextCoord = stepCoordinates[idx + 1];
+            const angle = Math.atan2(nextCoord[0] - coord[0], nextCoord[1] - coord[1]) * 180 / Math.PI;
+            return /*#__PURE__*/React.createElement(Marker, {
+              key: `dot-${legIndex}-${stepIndex}-${idx}`,
+              position: coord,
+              icon: L.divIcon({
+                className: "direction-dot",
+                html: `<div style="
+                        width: 6px;
+                        height: 6px;
+                        background: white;
+                        border: 2px solid ${segmentColor};
+                        border-radius: 50%;
+                        transform: rotate(${angle}deg);
+                      "></div>`,
+                iconSize: [10, 10],
+                iconAnchor: [5, 5]
+              })
+            });
+          }
+          return null;
+        })));
+      });
+    });
+    return segments;
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, renderRouteSegments(), (selectedStep || showSteps) && /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      bottom: "80px",
+      left: "10px",
+      right: "10px",
+      background: "white",
+      padding: "16px",
+      borderRadius: "8px",
+      boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
+      zIndex: 1000,
+      maxWidth: "calc(100% - 20px)",
+      border: "1px solid #e0e0e0",
+      maxHeight: "50vh",
+      overflowY: "auto"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      marginBottom: "8px"
+    }
+  }, /*#__PURE__*/React.createElement("h4", {
+    style: {
+      margin: 0,
+      color: "#1a237e"
+    }
+  }, "Route Information"), /*#__PURE__*/React.createElement("button", {
+    onClick: () => setShowSteps(false),
+    style: {
+      background: "none",
+      border: "none",
+      cursor: "pointer",
+      fontSize: "24px",
+      color: "#666",
+      padding: "0 8px"
+    }
+  }, "\xD7")), /*#__PURE__*/React.createElement("div", {
+    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", {
+    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", {
+    style: {
+      maxHeight: "200px",
+      overflowY: "auto"
+    }
+  }, /*#__PURE__*/React.createElement("h5", {
+    style: {
+      margin: "8px 0",
+      color: "#666"
+    }
+  }, "Turn-by-turn directions:"), routeData.legs[0].steps.map((step, idx) => /*#__PURE__*/React.createElement("div", {
+    key: idx,
+    style: {
+      padding: "8px",
+      borderBottom: "1px solid #eee",
+      fontSize: "12px",
+      cursor: "pointer",
+      background: selectedStep === step ? "#e3f2fd" : "transparent"
+    },
+    onMouseEnter: () => setSelectedStep(step),
+    onMouseLeave: () => setSelectedStep(null)
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      gap: "8px"
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      width: "20px",
+      height: "20px",
+      borderRadius: "50%",
+      background: "#1a237e",
+      color: "white",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      fontSize: "10px",
+      flexShrink: 0
+    }
+  }, idx + 1), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontWeight: "500"
+    }
+  }, step.maneuver.instruction || step.name), /*#__PURE__*/React.createElement("div", {
+    style: {
+      color: "#666"
+    }
+  }, (step.distance / 1000).toFixed(2), " km \xB7 ", Math.round(step.duration / 60), " min"))))))), routeData.distance > 1000 && routeData.coordinates && /*#__PURE__*/React.createElement(RouteMarkers, {
+    coordinates: routeData.coordinates,
+    totalDistance: routeData.distance
+  }));
+};
+const RouteMarkers = ({
+  coordinates,
+  totalDistance
+}) => {
+  const markers = [];
+  const interval = 1000;
+  for (let i = interval; i < totalDistance; i += interval) {
+    const fraction = i / totalDistance;
+    const index = Math.floor(coordinates.length * fraction);
+    if (index < coordinates.length) {
+      markers.push(/*#__PURE__*/React.createElement(Marker, {
+        key: `dist-${i}`,
+        position: coordinates[index],
+        icon: L.divIcon({
+          className: "distance-marker",
+          html: `<div style="
+              background: white;
+              border: 2px solid #2196f3;
+              border-radius: 12px;
+              padding: 2px 6px;
+              font-size: 10px;
+              font-weight: bold;
+              color: #1a237e;
+              white-space: nowrap;
+            ">${(i / 1000).toFixed(0)} km</div>`,
+          iconSize: [40, 20],
+          iconAnchor: [20, 10]
+        })
+      }));
+    }
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, markers);
+};
+const StatusBadge = ({
+  isOnline
+}) => /*#__PURE__*/React.createElement("span", {
+  style: {
+    display: "inline-block",
+    padding: "4px 8px",
+    borderRadius: "12px",
+    fontSize: "12px",
+    fontWeight: "600",
+    backgroundColor: isOnline ? "#e6f7e6" : "#ffe6e6",
+    color: isOnline ? "#2e7d32" : "#c62828",
+    border: `1px solid ${isOnline ? "#a5d6a7" : "#ef9a9a"}`
+  }
+}, /*#__PURE__*/React.createElement("span", {
+  style: {
+    display: "inline-block",
+    width: "8px",
+    height: "8px",
+    borderRadius: "50%",
+    backgroundColor: isOnline ? "#4caf50" : "#f44336",
+    marginRight: "6px"
+  }
+}), isOnline ? "ONLINE" : "OFFLINE");
+const DriverCard = ({
+  driver,
+  isSelected,
+  onClick
+}) => {
+  const calculateETA = () => {
+    if (!driver.lat || !driver.lng || !driver.deliveryLat || !driver.deliveryLng) return null;
+    const distance = calculateDistance(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)",
+      cursor: "pointer",
+      transition: "all 0.2s ease",
+      position: "relative",
+      overflow: "hidden"
+    }
+  }, /*#__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",
+      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)",
+      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: "#1a237e",
+      marginBottom: "4px",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap"
+    }
+  }, "Driver #", driver.driverId.substring(0, 8), "..."), /*#__PURE__*/React.createElement(StatusBadge, {
+    isOnline: driver.isOnline
+  }))), driver.lat && driver.lng && /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginBottom: "8px"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: "12px",
+      color: "#666",
+      marginBottom: "4px"
+    }
+  }, "Current Location"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "grid",
+      gridTemplateColumns: "1fr 1fr",
+      gap: "4px",
+      fontSize: "11px"
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: "#666"
+    }
+  }, "Lat:"), /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontFamily: "monospace",
+      overflow: "hidden",
+      textOverflow: "ellipsis"
+    }
+  }, driver.lat.toFixed(4)), /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: "#666"
+    }
+  }, "Lng:"), /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontFamily: "monospace",
+      overflow: "hidden",
+      textOverflow: "ellipsis"
+    }
+  }, driver.lng.toFixed(4)))), driver.deliveryLat && driver.deliveryLng && /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginBottom: "8px"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: "12px",
+      color: "#666",
+      marginBottom: "4px"
+    }
+  }, "Delivery Destination"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "grid",
+      gridTemplateColumns: "1fr 1fr",
+      gap: "4px",
+      fontSize: "11px"
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: "#666"
+    }
+  }, "Lat:"), /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontFamily: "monospace",
+      overflow: "hidden",
+      textOverflow: "ellipsis"
+    }
+  }, driver.deliveryLat.toFixed(4)), /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: "#666"
+    }
+  }, "Lng:"), /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontFamily: "monospace",
+      overflow: "hidden",
+      textOverflow: "ellipsis"
+    }
+  }, driver.deliveryLng.toFixed(4)))), eta !== null && /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: "8px",
+      padding: "8px",
+      background: "#f5f5f5",
+      borderRadius: "6px",
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      flexWrap: "wrap",
+      gap: "8px"
+    }
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: "11px",
+      color: "#666"
+    }
+  }, "Est. Arrival"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: "14px",
+      fontWeight: "600",
+      color: "#1a237e"
+    }
+  }, eta, " min")), driver.speed && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: "11px",
+      color: "#666"
+    }
+  }, "Speed"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: "14px",
+      fontWeight: "600",
+      color: "#4caf50"
+    }
+  }, Math.round(driver.speed * 3.6), " km/h"))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: "12px",
+      fontSize: "11px",
+      color: "#999",
+      borderTop: "1px solid #eee",
+      paddingTop: "8px",
+      display: "grid",
+      gridTemplateColumns: "1fr 1fr",
+      gap: "4px"
+    }
+  }, 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()))));
+};
+function calculateDistance(lat1, lon1, lat2, lon2) {
+  const R = 6371;
+  const dLat = (lat2 - lat1) * Math.PI / 180;
+  const dLon = (lon2 - lon1) * Math.PI / 180;
+  const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * Math.sin(dLon / 2) * Math.sin(dLon / 2);
+  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+  return R * c;
+}
+function LiveTrackingSystem() {
+  var _selectedDriver$lat, _selectedDriver$lng, _selectedDriver$lat2, _selectedDriver$lng2;
+  const [drivers, setDrivers] = useState({});
+  const [isConnected, setIsConnected] = useState(false);
+  const [selectedDriver, setSelectedDriver] = useState(null);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [filterOnline, setFilterOnline] = useState("all");
+  const [showRoutes, setShowRoutes] = useState(true);
+  const [mapCenter, setMapCenter] = useState([28.6139, 77.209]);
+  const [mapZoom, setMapZoom] = useState(12);
+  const [showSidebar, setShowSidebar] = useState(true);
+  const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth <= 768);
+      if (window.innerWidth <= 768) {
+        setShowSidebar(false);
+      } else {
+        setShowSidebar(true);
+      }
+    };
+    window.addEventListener("resize", handleResize);
+    handleResize();
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  const socket = useMemo(() => {
+    return io(SOCKET_URL, {
+      transports: ["websocket"],
+      autoConnect: false
+    });
+  }, []);
+  useEffect(() => {
+    socket.connect();
+    socket.on("connect", () => {
+      console.log("Admin connected:", socket.id);
+      setIsConnected(true);
+      socket.emit("admin-join");
+    });
+    socket.on("disconnect", () => {
+      console.log("Admin disconnected");
+      setIsConnected(false);
+    });
+    socket.on("drivers-snapshot", data => {
+      console.log("drivers-snapshot", data);
+      if (!Array.isArray(data)) return;
+      const mapped = {};
+      data.forEach(driver => {
+        if (driver && driver.driverId) {
+          mapped[driver.driverId] = {
+            ...driver,
+            lastUpdate: new Date().toISOString()
+          };
+        }
+      });
+      setDrivers(mapped);
+    });
+    socket.on("driver-location-update", driver => {
+      console.log("driver-location-update", driver);
+      if (!driver || !driver.driverId) return;
+      setDrivers(prev => {
+        const existingDriver = prev[driver.driverId] || {};
+        return {
+          ...prev,
+          [driver.driverId]: {
+            ...existingDriver,
+            ...driver,
+            lastUpdate: new Date().toISOString()
+          }
+        };
+      });
+    });
+    socket.on("driver-status", driver => {
+      console.log("driver-status", driver);
+      if (!driver || !driver.driverId) return;
+      setDrivers(prev => ({
+        ...prev,
+        [driver.driverId]: {
+          ...prev[driver.driverId],
+          ...driver,
+          lastUpdate: new Date().toISOString()
+        }
+      }));
+    });
+    return () => {
+      socket.disconnect();
+    };
+  }, [socket]);
+  useEffect(() => {
+    if (selectedDriver !== null && selectedDriver !== void 0 && selectedDriver.lat && selectedDriver !== null && selectedDriver !== void 0 && selectedDriver.lng) {
+      setMapCenter([selectedDriver.lat, selectedDriver.lng]);
+      setMapZoom(15);
+    }
+  }, [selectedDriver]);
+  const filteredDrivers = Object.values(drivers).filter(driver => {
+    const matchesSearch = driver.driverId.toLowerCase().includes(searchTerm.toLowerCase());
+    const matchesStatus = filterOnline === "all" || filterOnline === "online" && driver.isOnline || filterOnline === "offline" && !driver.isOnline;
+    return matchesSearch && matchesStatus;
+  });
+  const onlineCount = Object.values(drivers).filter(d => d.isOnline).length;
+  const offlineCount = Object.values(drivers).filter(d => !d.isOnline).length;
+  const activeDeliveries = Object.values(drivers).filter(d => d.isOnline && d.deliveryLat && d.deliveryLng).length;
+  const toggleSidebar = () => {
+    setShowSidebar(!showSidebar);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      height: "100vh",
+      width: "100%",
+      fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, sans-serif",
+      position: "relative",
+      overflow: "hidden"
+    }
+  }, isMobile && /*#__PURE__*/React.createElement("button", {
+    onClick: toggleSidebar,
+    style: {
+      position: "absolute",
+      top: "10px",
+      left: "10px",
+      zIndex: 2000,
+      background: "#1a237e",
+      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",
+      alignItems: "center",
+      gap: "8px"
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: "20px"
+    }
+  }, "\u2630"), showSidebar ? "Hide List" : "Show Drivers"), /*#__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, #1a237e, #0d47a1)",
+      color: "white"
+    }
+  }, isMobile && /*#__PURE__*/React.createElement("button", {
+    onClick: toggleSidebar,
+    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"
+    }
+  }, "\u2715"), /*#__PURE__*/React.createElement("h2", {
+    style: {
+      margin: "0 0 8px 0",
+      fontSize: isMobile ? "20px" : "24px",
+      fontWeight: "600",
+      letterSpacing: "-0.5px"
+    }
+  }, "Live Driver Tracking"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      gap: "8px",
+      fontSize: "14px",
+      opacity: 0.9
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      display: "inline-block",
+      width: "10px",
+      height: "10px",
+      borderRadius: "50%",
+      backgroundColor: isConnected ? "#4caf50" : "#f44336",
+      animation: isConnected ? "pulse 2s infinite" : "none"
+    }
+  }), /*#__PURE__*/React.createElement("span", null, isConnected ? "Connected to server" : "Disconnected"))), /*#__PURE__*/React.createElement("div", {
+    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",
+      color: "#666"
+    }
+  }, "Total"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: isMobile ? "16px" : "20px",
+      fontWeight: "bold",
+      color: "#1a237e"
+    }
+  }, Object.keys(drivers).length)), /*#__PURE__*/React.createElement("div", {
+    style: {
+      textAlign: "center"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: isMobile ? "10px" : "11px",
+      color: "#666"
+    }
+  }, "Online"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: isMobile ? "16px" : "20px",
+      fontWeight: "bold",
+      color: "#4caf50"
+    }
+  }, onlineCount)), /*#__PURE__*/React.createElement("div", {
+    style: {
+      textAlign: "center"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: isMobile ? "10px" : "11px",
+      color: "#666"
+    }
+  }, "Offline"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: isMobile ? "16px" : "20px",
+      fontWeight: "bold",
+      color: "#f44336"
+    }
+  }, offlineCount)), /*#__PURE__*/React.createElement("div", {
+    style: {
+      textAlign: "center"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: isMobile ? "10px" : "11px",
+      color: "#666"
+    }
+  }, "Active"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: isMobile ? "16px" : "20px",
+      fontWeight: "bold",
+      color: "#ff9800"
+    }
+  }, activeDeliveries))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: isMobile ? "12px" : "16px",
+      borderBottom: "1px solid #e0e0e0",
+      background: "#fafafa"
+    }
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    placeholder: "Search by driver ID...",
+    value: searchTerm,
+    onChange: e => setSearchTerm(e.target.value),
+    style: {
+      width: "100%",
+      padding: isMobile ? "10px" : "12px",
+      border: "1px solid #e0e0e0",
+      borderRadius: "8px",
+      fontSize: isMobile ? "14px" : "14px",
+      marginBottom: "12px",
+      outline: "none",
+      transition: "border-color 0.2s",
+      boxSizing: "border-box"
+    },
+    onFocus: e => e.target.style.borderColor = "#1a237e",
+    onBlur: e => e.target.style.borderColor = "#e0e0e0"
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      gap: "8px",
+      marginBottom: "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 ? "#1a237e" : "white",
+      color: filterOnline === filter ? "white" : "#333",
+      cursor: "pointer",
+      fontSize: isMobile ? "11px" : "12px",
+      fontWeight: "500",
+      textTransform: "capitalize",
+      transition: "all 0.2s"
+    }
+  }, filter))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      gap: "8px",
+      marginTop: "8px"
+    }
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "checkbox",
+    id: "showRoutes",
+    checked: showRoutes,
+    onChange: e => setShowRoutes(e.target.checked),
+    style: {
+      cursor: "pointer",
+      width: "16px",
+      height: "16px"
+    }
+  }), /*#__PURE__*/React.createElement("label", {
+    htmlFor: "showRoutes",
+    style: {
+      fontSize: isMobile ? "12px" : "13px",
+      color: "#333",
+      cursor: "pointer"
+    }
+  }, "Show delivery routes"))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      overflowY: "auto",
+      padding: isMobile ? "12px" : "16px",
+      background: "#f5f5f5"
+    }
+  }, filteredDrivers.length === 0 ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      textAlign: "center",
+      padding: isMobile ? "20px" : "40px 20px",
+      color: "#999",
+      background: "white",
+      borderRadius: "12px"
+    }
+  }, /*#__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, {
+    key: driver.driverId,
+    driver: driver,
+    isSelected: (selectedDriver === null || selectedDriver === void 0 ? void 0 : selectedDriver.driverId) === driver.driverId,
+    onClick: () => {
+      setSelectedDriver(driver);
+      if (isMobile) {
+        setShowSidebar(false);
+      }
+    }
+  }))))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      position: "relative",
+      width: isMobile ? "100%" : "calc(100% - 380px)",
+      height: "100%"
+    }
+  }, /*#__PURE__*/React.createElement(MapContainer, {
+    center: mapCenter,
+    zoom: mapZoom,
+    style: {
+      height: "100%",
+      width: "100%"
+    },
+    zoomControl: false
+  }, /*#__PURE__*/React.createElement(TileLayer, {
+    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, {
+    key: selectedDriver.driverId,
+    position: [Number(selectedDriver.lat), Number(selectedDriver.lng)],
+    icon: selectedDriver.isOnline ? onlineIcon : offlineIcon
+  }, /*#__PURE__*/React.createElement(Popup, null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      minWidth: isMobile ? "200px" : "250px",
+      padding: "8px"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontWeight: "bold",
+      fontSize: isMobile ? "14px" : "16px",
+      color: "#1a237e",
+      marginBottom: "8px",
+      borderBottom: "1px solid #eee",
+      paddingBottom: "4px"
+    }
+  }, "Driver #", selectedDriver.driverId.substring(0, 8), "... (Selected)"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginBottom: "8px"
+    }
+  }, /*#__PURE__*/React.createElement(StatusBadge, {
+    isOnline: selectedDriver.isOnline
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: isMobile ? "12px" : "13px"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginBottom: "8px"
+    }
+  }, /*#__PURE__*/React.createElement("strong", null, "\uD83D\uDCCD Current Location"), /*#__PURE__*/React.createElement("div", null, "Lat: ", (_selectedDriver$lat = selectedDriver.lat) === null || _selectedDriver$lat === void 0 ? void 0 : _selectedDriver$lat.toFixed(6)), /*#__PURE__*/React.createElement("div", null, "Lng: ", (_selectedDriver$lng = selectedDriver.lng) === null || _selectedDriver$lng === void 0 ? void 0 : _selectedDriver$lng.toFixed(6))), 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, "Lat: ", selectedDriver.deliveryLat.toFixed(6)), /*#__PURE__*/React.createElement("div", null, "Lng: ", selectedDriver.deliveryLng.toFixed(6))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "grid",
+      gridTemplateColumns: "1fr 1fr",
+      gap: "8px",
+      background: "#f5f5f5",
+      padding: "8px",
+      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", {
+    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, {
+    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, "Driver: #", selectedDriver.driverId.substring(0, 8), "...")))), showRoutes && selectedDriver && selectedDriver.lat && selectedDriver.lng && selectedDriver.deliveryLat && selectedDriver.deliveryLng && /*#__PURE__*/React.createElement(RouteLayer, {
+    start: {
+      lat: selectedDriver.lat,
+      lng: selectedDriver.lng
+    },
+    end: {
+      lat: selectedDriver.deliveryLat,
+      lng: selectedDriver.deliveryLng
+    },
+    color: "#2196f3",
+    weight: 6
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      top: isMobile ? "60px" : "20px",
+      right: "10px",
+      zIndex: 1000,
+      background: "white",
+      borderRadius: "8px",
+      boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
+      padding: "4px",
+      display: "flex",
+      flexDirection: isMobile ? "column" : "row",
+      gap: "4px"
+    }
+  }, 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]);
+        setMapZoom(15);
+      }
+    },
+    style: {
+      padding: isMobile ? "10px 12px" : "8px 16px",
+      background: "#1a237e",
+      color: "white",
+      border: "none",
+      borderRadius: "4px",
+      cursor: "pointer",
+      fontSize: isMobile ? "12px" : "14px",
+      fontWeight: "500",
+      whiteSpace: "nowrap"
+    }
+  }, "Center"), /*#__PURE__*/React.createElement("button", {
+    onClick: () => setSelectedDriver(null),
+    style: {
+      padding: isMobile ? "10px 12px" : "8px 16px",
+      background: "#f44336",
+      color: "white",
+      border: "none",
+      borderRadius: "4px",
+      cursor: "pointer",
+      fontSize: isMobile ? "12px" : "14px",
+      fontWeight: "500",
+      whiteSpace: "nowrap"
+    }
+  }, "Clear")), !selectedDriver && /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: isMobile ? "10px 12px" : "8px 16px",
+      background: "#f5f5f5",
+      color: "#666",
+      borderRadius: "4px",
+      fontSize: isMobile ? "12px" : "14px"
+    }
+  }, isMobile ? "Select driver" : "Select a driver from the list")), selectedDriver && /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      bottom: isMobile ? "10px" : "20px",
+      left: isMobile ? "10px" : "20px",
+      right: isMobile ? "10px" : "auto",
+      zIndex: 1000,
+      background: "white",
+      borderRadius: "8px",
+      boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
+      padding: isMobile ? "12px" : "16px",
+      maxWidth: isMobile ? "calc(100% - 20px)" : "300px",
+      border: "2px solid #2196f3"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      marginBottom: "8px"
+    }
+  }, /*#__PURE__*/React.createElement("h4", {
+    style: {
+      margin: 0,
+      color: "#1a237e",
+      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", {
+    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:"), " ", (_selectedDriver$lat2 = selectedDriver.lat) === null || _selectedDriver$lat2 === void 0 ? void 0 : _selectedDriver$lat2.toFixed(4), ", ", (_selectedDriver$lng2 = selectedDriver.lng) === null || _selectedDriver$lng2 === void 0 ? void 0 : _selectedDriver$lng2.toFixed(4)), 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())))));
+}
+
+const Timeline = ({
+  steps: _steps = [],
+  currentStep: _currentStep = 1
+}) => {
+  const {
+    t
+  } = useTranslation();
+  return /*#__PURE__*/React.createElement("div", {
+    className: "custom-stepper-card"
+  }, _steps.map((label, index) => {
+    const stepNumber = index + 1;
+    const isActive = stepNumber === _currentStep;
+    const isCompleted = stepNumber < _currentStep;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "stepper-row-vendor",
+      key: index
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "stepper-left"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: `step-circle 
+                ${isActive ? "active" : ""} 
+                ${isCompleted ? "completed" : ""}`
+    }, isCompleted ? /*#__PURE__*/React.createElement(TickMark, {
+      fillColor: "#fff"
+    }) : stepNumber), index !== _steps.length - 1 && /*#__PURE__*/React.createElement("div", {
+      className: `step-line ${isCompleted ? "completed-line" : ""}`
+    })), /*#__PURE__*/React.createElement("div", {
+      className: `step-label 
+              ${isActive ? "active-text" : ""} 
+              ${isCompleted ? "completed-text" : ""}`
+    }, t(label)));
+  }));
+};
+
+const AddFillingPointMetaData = ({
+  t,
+  formData: _formData = {},
+  onSelect,
+  config: _config = {},
+  visibleFields: _visibleFields = []
+}) => {
+  const sectionKey = (_config === null || _config === void 0 ? void 0 : _config.key) || "metaData";
+  const inputs = [{
+    label: "WT_FILLING_POINT_NAME",
+    name: "fillingPointName",
+    isMandatory: true
+  }, {
+    label: "WT_EMERGENCY_NAME",
+    name: "emergencyName"
+  }, {
+    label: "WT_AE_NAME",
+    name: "aeName",
+    validation: {
+      pattern: "^[a-zA-Z]+( [a-zA-Z]+)*$"
+    }
+  }, {
+    label: "WT_AE_MOBILE_NUMBER",
+    name: "aeMobile",
+    componentInFront: /*#__PURE__*/React.createElement("div", {
+      className: "employee-card-input employee-card-input--front"
+    }, "+91"),
+    validation: {
+      pattern: "[6-9]{1}[0-9]{9}",
+      type: "tel",
+      maxLength: 10
+    }
+  }, {
+    label: "WT_AE_EMAIL_ID",
+    name: "aeEmail",
+    validation: {
+      pattern: "^[a-zA-Z0-9._%+-]+@[a-z.-]+\\.(com|org|in)$"
+    }
+  }, {
+    label: "WT_JE_NAME",
+    name: "jeName",
+    validation: {
+      pattern: "^[a-zA-Z]+( [a-zA-Z]+)*$"
+    }
+  }, {
+    label: "WT_JE_MOBILE_NUMBER",
+    name: "jeMobile",
+    componentInFront: /*#__PURE__*/React.createElement("div", {
+      className: "employee-card-input employee-card-input--front"
+    }, "+91"),
+    validation: {
+      pattern: "[6-9]{1}[0-9]{9}",
+      type: "tel",
+      maxLength: 10
+    }
+  }, {
+    label: "WT_JE_EMAIL_ID",
+    name: "jeEmail",
+    validation: {
+      pattern: "^[a-zA-Z0-9._%+-]+@[a-z.-]+\\.(com|org|in)$"
+    }
+  }, {
+    label: "WT_EE_NAME",
+    name: "eeName",
+    validation: {
+      pattern: "^[a-zA-Z]+( [a-zA-Z]+)*$"
+    }
+  }, {
+    label: "WT_EE_MOBILE_NUMBER",
+    name: "eeMobile",
+    componentInFront: /*#__PURE__*/React.createElement("div", {
+      className: "employee-card-input employee-card-input--front"
+    }, "+91"),
+    validation: {
+      pattern: "[6-9]{1}[0-9]{9}",
+      type: "tel",
+      maxLength: 10
+    }
+  }, {
+    label: "WT_EE_EMAIL_ID",
+    name: "eeEmail",
+    validation: {
+      pattern: "^[a-zA-Z0-9._%+-]+@[a-z.-]+\\.(com|org|in)$"
+    }
+  }];
+  const filteredInputs = _visibleFields && _visibleFields.length > 0 ? inputs.filter(input => _visibleFields.includes(input.name)) : inputs;
+  const handleChange = (value, name) => {
+    if (!onSelect) return;
+    let newValue = value;
+    if (["aeMobile", "jeMobile", "eeMobile", "alternateNumber"].includes(name)) {
+      newValue = value.slice(0, 10).replace(/[^0-9]/g, "");
+    }
+    onSelect(sectionKey, {
+      ...(_formData === null || _formData === void 0 ? void 0 : _formData[sectionKey]),
+      [name]: newValue
+    });
+  };
+  const isMobile = window.Digit.Utils.browser.isMobile();
+  return /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "grid",
+      gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr",
+      gap: "16px"
+    }
+  }, filteredInputs.map(input => {
+    var _formData$sectionKey, _input$validation;
+    return /*#__PURE__*/React.createElement("div", {
+      key: input.name
+    }, /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, {
+      className: "card-label-smaller"
+    }, t(input.label), input.isMandatory ? " *" : ""), /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: "flex"
+      }
+    }, input.componentInFront || null, /*#__PURE__*/React.createElement(TextInput, Object.assign({
+      value: (_formData === null || _formData === void 0 ? void 0 : (_formData$sectionKey = _formData[sectionKey]) === null || _formData$sectionKey === void 0 ? void 0 : _formData$sectionKey[input.name]) || "",
+      onChange: e => handleChange(e.target.value, input.name),
+      maxLength: (_input$validation = input.validation) === null || _input$validation === void 0 ? void 0 : _input$validation.maxLength
+    }, input.validation)))));
+  })));
+};
+
+const allOptions = [{
+  name: "Correspondence",
+  code: "CORRESPONDENCE",
+  i18nKey: "COMMON_ADDRESS_TYPE_CORRESPONDENCE"
+}, {
+  name: "Permanent",
+  code: "PERMANENT",
+  i18nKey: "COMMON_ADDRESS_TYPE_PERMANENT"
+}, {
+  name: "Other",
+  code: "OTHER",
+  i18nKey: "COMMON_ADDRESS_TYPE_OTHER"
+}];
+const AddFixFillAddress = ({
+  t,
+  config,
+  formData,
+  onSelect,
+  isEdit,
+  userDetails
+}) => {
+  var _location$state, _formData$address, _formData$address2, _formData$address3, _formData$address4, _formData$address5, _formData$address6, _formData$address7, _formData$address8, _formData$address9, _formData$address0, _formData$address1, _userDetails$addresse;
+  const {
+    data: allCities
+  } = Digit.Hooks.useTenants();
+  const {
+    control
+  } = useForm();
+  const location = useLocation();
+  const usedAddressTypes = ((_location$state = location.state) === null || _location$state === void 0 ? void 0 : _location$state.usedAddressTypes) || [];
+  const user = Digit.UserService.getUser().info;
+  const [pincode, setPincode] = useState((formData === null || formData === void 0 ? void 0 : (_formData$address = formData.address) === null || _formData$address === void 0 ? void 0 : _formData$address.pincode) || "");
+  const [city, setCity] = useState((formData === null || formData === void 0 ? void 0 : (_formData$address2 = formData.address) === null || _formData$address2 === void 0 ? void 0 : _formData$address2.city) || null);
+  const [locality, setLocality] = useState((formData === null || formData === void 0 ? void 0 : (_formData$address3 = formData.address) === null || _formData$address3 === void 0 ? void 0 : _formData$address3.locality) || null);
+  const [houseNo, setHouseNo] = useState((formData === null || formData === void 0 ? void 0 : (_formData$address4 = formData.address) === null || _formData$address4 === void 0 ? void 0 : _formData$address4.houseNo) || "");
+  const [streetName, setStreetName] = useState((formData === null || formData === void 0 ? void 0 : (_formData$address5 = formData.address) === null || _formData$address5 === void 0 ? void 0 : _formData$address5.streetName) || "");
+  const [landmark, setLandmark] = useState((formData === null || formData === void 0 ? void 0 : (_formData$address6 = formData.address) === null || _formData$address6 === void 0 ? void 0 : _formData$address6.landmark) || "");
+  const [addressLine1, setAddressLine1] = useState((formData === null || formData === void 0 ? void 0 : (_formData$address7 = formData.address) === null || _formData$address7 === void 0 ? void 0 : _formData$address7.addressLine1) || "");
+  const [addressLine2, setAddressLine2] = useState((formData === null || formData === void 0 ? void 0 : (_formData$address8 = formData.address) === null || _formData$address8 === void 0 ? void 0 : _formData$address8.addressLine2) || "");
+  const [addressType, setAddressType] = useState((formData === null || formData === void 0 ? void 0 : (_formData$address9 = formData.address) === null || _formData$address9 === void 0 ? void 0 : _formData$address9.addressType) || null);
+  const [latitude, setLatitude] = useState((formData === null || formData === void 0 ? void 0 : (_formData$address0 = formData.address) === null || _formData$address0 === void 0 ? void 0 : _formData$address0.latitude) || "");
+  const [longitude, setLongitude] = useState((formData === null || formData === void 0 ? void 0 : (_formData$address1 = formData.address) === null || _formData$address1 === void 0 ? void 0 : _formData$address1.longitude) || "");
+  const [selectedAddress, setSelectedAddress] = useState("");
+  const isInitialized = useRef(false);
+  const lastSyncedAddress = useRef(null);
+  const lastBookingId = useRef(null);
+  const availableAddressTypeOptions = useMemo(() => {
+    if (usedAddressTypes.length === 3) {
+      return allOptions.filter(opt => opt.code === "OTHER");
+    }
+    return allOptions.filter(opt => !usedAddressTypes.includes(opt.code));
+  }, [usedAddressTypes]);
+  const {
+    data: fetchedLocalities
+  } = Digit.Hooks.useBoundaryLocalities(city === null || city === void 0 ? void 0 : city.code, "revenue", {
+    enabled: !!city
+  }, t);
+  const structuredLocality = (fetchedLocalities === null || fetchedLocalities === void 0 ? void 0 : fetchedLocalities.map(local => ({
+    i18nKey: local.i18nkey,
+    code: local.code,
+    label: local.label
+  }))) || [];
+  useEffect(() => {
+    if (formData !== null && formData !== void 0 && formData.bookingId && lastBookingId.current !== formData.bookingId) {
+      isInitialized.current = false;
+      lastBookingId.current = formData.bookingId;
+    }
+    if (formData !== null && formData !== void 0 && formData.address && !isInitialized.current && allCities && (fetchedLocalities || !formData.address.cityCode)) {
+      const addressData = formData.address;
+      const cityObj = allCities.find(c => c.code === addressData.cityCode || c.code === addressData.city || c.name === addressData.city) || addressData.city;
+      setPincode(addressData.pincode || "");
+      setCity(cityObj || null);
+      setHouseNo(addressData.houseNo || "");
+      setStreetName(addressData.streetName || "");
+      setLandmark(addressData.landmark || "");
+      setAddressLine1(addressData.addressLine1 || "");
+      setAddressLine2(addressData.addressLine2 || "");
+      setAddressType(allOptions.find(a => a.code === addressData.addressType) || addressData.addressType || null);
+      setLatitude(addressData.latitude || "");
+      setLongitude(addressData.longitude || "");
+      if (fetchedLocalities) {
+        const localityObj = fetchedLocalities.find(l => l.code === addressData.localityCode || l.code === addressData.locality || l.i18nkey === addressData.locality);
+        setLocality(localityObj || addressData.locality || null);
+      } else {
+        setLocality(addressData.locality || null);
+      }
+      isInitialized.current = true;
+      lastSyncedAddress.current = JSON.stringify(addressData);
+    }
+  }, [formData === null || formData === void 0 ? void 0 : formData.address, allCities, fetchedLocalities]);
+  useEffect(() => {
+    if (!navigator.geolocation) return;
+    navigator.geolocation.getCurrentPosition(pos => {
+      setLatitude(pos.coords.latitude);
+      setLongitude(pos.coords.longitude);
+    }, () => console.log("Location blocked"));
+  }, []);
+  useEffect(() => {
+    if (selectedAddress && Object.keys(selectedAddress).length) {
+      setPincode(selectedAddress.pinCode);
+      setCity(allCities === null || allCities === void 0 ? void 0 : allCities.find(c => c.name === selectedAddress.city));
+      setLocality(fetchedLocalities === null || fetchedLocalities === void 0 ? void 0 : fetchedLocalities.find(l => l.i18nkey === selectedAddress.locality));
+      setHouseNo(selectedAddress.houseNumber);
+      setStreetName(selectedAddress.streetName);
+      setLandmark(selectedAddress.landmark);
+      setAddressLine1(selectedAddress.address);
+      setAddressLine2(selectedAddress.address2);
+      setLatitude(selectedAddress.latitude);
+      setLongitude(selectedAddress.longitude);
+      setAddressType(allOptions.find(a => a.code === selectedAddress.addressType));
+    }
+  }, [selectedAddress]);
+  useEffect(() => {
+    if (!onSelect) return;
+    const currentAddress = {
+      pincode: pincode || "",
+      city: (city === null || city === void 0 ? void 0 : city.code) || city || null,
+      locality: (locality === null || locality === void 0 ? void 0 : locality.code) || locality || null,
+      houseNo: houseNo || "",
+      landmark: landmark || "",
+      addressLine1: addressLine1 || "",
+      addressLine2: addressLine2 || "",
+      streetName: streetName || "",
+      addressType: (addressType === null || addressType === void 0 ? void 0 : addressType.code) || addressType || null,
+      latitude: latitude || "",
+      longitude: longitude || ""
+    };
+    const addressString = JSON.stringify(currentAddress);
+    if (lastSyncedAddress.current !== addressString) {
+      lastSyncedAddress.current = addressString;
+      onSelect((config === null || config === void 0 ? void 0 : config.key) || "address", currentAddress);
+    }
+  }, [pincode, city, locality, houseNo, landmark, addressLine1, addressLine2, streetName, addressType, latitude, longitude]);
+  return /*#__PURE__*/React.createElement(FormStep, {
+    config: config,
+    t: t,
+    isDisabled: !houseNo || !city || !locality || !pincode || !addressLine1 || !streetName || !addressLine2
+  }, (userDetails === null || userDetails === void 0 ? void 0 : (_userDetails$addresse = userDetails.addresses) === null || _userDetails$addresse === void 0 ? void 0 : _userDetails$addresse.length) > 0 && /*#__PURE__*/React.createElement("div", {
+    style: {
+      gridColumn: "span 2"
+    }
+  }, /*#__PURE__*/React.createElement(CardLabel, null, t("COMMON_ADDRESS_TYPE")), /*#__PURE__*/React.createElement(Dropdown, {
+    selected: selectedAddress,
+    select: setSelectedAddress,
+    option: userDetails.addresses,
+    optionKey: "address",
+    t: t,
+    style: {
+      width: "100%"
+    }
+  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, t("COMMON_ADDRESS_TYPE")), /*#__PURE__*/React.createElement(Dropdown, {
+    selected: addressType,
+    select: setAddressType,
+    option: availableAddressTypeOptions,
+    optionKey: "i18nKey",
+    t: t,
+    style: {
+      width: "100%"
+    }
+  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, t("HOUSE_NO")), /*#__PURE__*/React.createElement(TextInput, {
+    value: houseNo,
+    onChange: e => setHouseNo(e.target.value)
+  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, t("STREET_NAME")), /*#__PURE__*/React.createElement(TextInput, {
+    value: streetName,
+    onChange: e => setStreetName(e.target.value)
+  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, t("ADDRESS_LINE1")), /*#__PURE__*/React.createElement(TextInput, {
+    value: addressLine1,
+    onChange: e => setAddressLine1(e.target.value)
+  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, t("ADDRESS_LINE2")), /*#__PURE__*/React.createElement(TextInput, {
+    value: addressLine2,
+    onChange: e => setAddressLine2(e.target.value)
+  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, t("LANDMARK")), /*#__PURE__*/React.createElement(TextInput, {
+    value: landmark,
+    onChange: e => setLandmark(e.target.value)
+  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, t("CITY")), /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "city",
+    render: () => /*#__PURE__*/React.createElement(Dropdown, {
+      selected: city,
+      select: setCity,
+      option: allCities,
+      optionKey: "i18nKey",
+      t: t
+    })
+  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, t("LOCALITY")), /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "locality",
+    render: () => /*#__PURE__*/React.createElement(Dropdown, {
+      selected: locality,
+      select: setLocality,
+      option: structuredLocality,
+      optionKey: "i18nKey",
+      t: t
+    })
+  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, t("LATITUDE")), /*#__PURE__*/React.createElement(TextInput, {
+    value: latitude,
+    onChange: e => setLatitude(e.target.value)
+  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, t("LONGITUDE")), /*#__PURE__*/React.createElement(TextInput, {
+    value: longitude,
+    onChange: e => setLongitude(e.target.value)
+  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, t("PINCODE")), /*#__PURE__*/React.createElement(TextInput, {
+    value: pincode,
+    onChange: e => setPincode(e.target.value),
+    maxLength: 6
+  })));
+};
+
+const AddFillingPointAddress = () => {
+  const {
+    t
+  } = useTranslation();
+  const location = useLocation();
+  const queryParams = new URLSearchParams(location.search);
+  const editId = queryParams.get("id");
+  const [formData, setFormData] = useState({});
+  const [showToast, setShowToast] = useState(null);
+  const tenantId = Digit.ULBService.getCurrentTenantId();
+  const addressConfig = {
+    key: "address"
+  };
+  const {
+    isLoading: isEditLoading,
+    data: editData
+  } = Digit.Hooks.wt.useTankerSearchAPI({
+    tenantId,
+    filters: {
+      bookingId: editId
+    }
+  }, {
+    enabled: !!editId
+  });
+  const handleSelect = (key, data) => {
+    setFormData(prev => ({
+      ...prev,
+      [key]: {
+        ...(prev[key] || {}),
+        ...data
+      }
+    }));
+  };
+  useEffect(() => {
+    if (editId && editData !== null && editData !== void 0 && editData.waterTankerBookingDetail) {
+      const data = editData.waterTankerBookingDetail.find(item => item.bookingId === editId);
+      if (data) {
+        var _data$fillingpointmet, _data$fillingpointmet2, _data$fillingpointmet3, _data$fillingpointmet4, _data$fillingpointmet5, _data$fillingpointmet6, _data$fillingpointmet7, _data$fillingpointmet8, _data$fillingpointmet9, _data$fillingpointmet0, _data$fillingpointmet1, _data$fillingpointmet10, _data$fillingpointmet11, _data$fillingpointmet12, _data$fillingpointmet13, _data$fillingpointmet14, _data$fillingpointmet15, _data$fillingpointmet16;
+        setFormData({
+          owner: {
+            fillingPointName: ((_data$fillingpointmet = data.fillingpointmetadata) === null || _data$fillingpointmet === void 0 ? void 0 : _data$fillingpointmet.fillingPointName) || ((_data$fillingpointmet2 = data.fillingpointmetadata) === null || _data$fillingpointmet2 === void 0 ? void 0 : _data$fillingpointmet2.name),
+            emergencyName: (_data$fillingpointmet3 = data.fillingpointmetadata) === null || _data$fillingpointmet3 === void 0 ? void 0 : _data$fillingpointmet3.emergencyName,
+            aeName: (_data$fillingpointmet4 = data.fillingpointmetadata) === null || _data$fillingpointmet4 === void 0 ? void 0 : _data$fillingpointmet4.aeName,
+            aeMobile: ((_data$fillingpointmet5 = data.fillingpointmetadata) === null || _data$fillingpointmet5 === void 0 ? void 0 : _data$fillingpointmet5.aeMobile) || ((_data$fillingpointmet6 = data.fillingpointmetadata) === null || _data$fillingpointmet6 === void 0 ? void 0 : _data$fillingpointmet6.mobileNumber),
+            aeEmail: ((_data$fillingpointmet7 = data.fillingpointmetadata) === null || _data$fillingpointmet7 === void 0 ? void 0 : _data$fillingpointmet7.aeEmail) || ((_data$fillingpointmet8 = data.fillingpointmetadata) === null || _data$fillingpointmet8 === void 0 ? void 0 : _data$fillingpointmet8.emailId),
+            jeName: (_data$fillingpointmet9 = data.fillingpointmetadata) === null || _data$fillingpointmet9 === void 0 ? void 0 : _data$fillingpointmet9.jeName,
+            jeMobile: ((_data$fillingpointmet0 = data.fillingpointmetadata) === null || _data$fillingpointmet0 === void 0 ? void 0 : _data$fillingpointmet0.jeMobile) || ((_data$fillingpointmet1 = data.fillingpointmetadata) === null || _data$fillingpointmet1 === void 0 ? void 0 : _data$fillingpointmet1.jeMobileNumber),
+            jeEmail: ((_data$fillingpointmet10 = data.fillingpointmetadata) === null || _data$fillingpointmet10 === void 0 ? void 0 : _data$fillingpointmet10.jeEmail) || ((_data$fillingpointmet11 = data.fillingpointmetadata) === null || _data$fillingpointmet11 === void 0 ? void 0 : _data$fillingpointmet11.jeEmailId),
+            eeName: (_data$fillingpointmet12 = data.fillingpointmetadata) === null || _data$fillingpointmet12 === void 0 ? void 0 : _data$fillingpointmet12.eeName,
+            eeMobile: ((_data$fillingpointmet13 = data.fillingpointmetadata) === null || _data$fillingpointmet13 === void 0 ? void 0 : _data$fillingpointmet13.eeMobile) || ((_data$fillingpointmet14 = data.fillingpointmetadata) === null || _data$fillingpointmet14 === void 0 ? void 0 : _data$fillingpointmet14.eeMobileNumber),
+            eeEmail: ((_data$fillingpointmet15 = data.fillingpointmetadata) === null || _data$fillingpointmet15 === void 0 ? void 0 : _data$fillingpointmet15.eeEmail) || ((_data$fillingpointmet16 = data.fillingpointmetadata) === null || _data$fillingpointmet16 === void 0 ? void 0 : _data$fillingpointmet16.eeEmailId)
+          },
+          address: {
+            ...data.address
+          },
+          bookingId: data.bookingId,
+          auditDetails: data.auditDetails
+        });
+      }
+    }
+  }, [editData, editId]);
+  const onSelect = (key, data) => {
+    setFormData(prev => ({
+      ...prev,
+      [key]: data
+    }));
+  };
+  const steps = ["WT_FILLING_POINT"];
+  const {
+    mutate: createFillingPoint
+  } = Digit.Hooks.wt.useCreateFillPoint(tenantId);
+  const {
+    mutate: updateFillingPoint
+  } = Digit.Hooks.wt.useUpdateFillPoint(tenantId);
+  const handleSubmit = e => {
+    if (e && e.preventDefault) e.preventDefault();
+    const payload = fillingPointPayload({
+      ...formData,
+      tenantId
+    });
+    const mutation = editId ? updateFillingPoint : createFillingPoint;
+    mutation(payload, {
+      onSuccess: () => {
+        setShowToast({
+          label: editId ? t("WT_FILLING_POINT_UPDATED_SUCCESS") : t("WT_FILLING_POINT_CREATED_SUCCESS")
+        });
+        setTimeout(() => setShowToast(null), 5000);
+      },
+      onError: error => {
+        var _error$response, _error$response$data, _error$response$data$, _error$response$data$2;
+        setShowToast({
+          label: (error === null || error === void 0 ? void 0 : (_error$response = error.response) === null || _error$response === void 0 ? void 0 : (_error$response$data = _error$response.data) === null || _error$response$data === void 0 ? void 0 : (_error$response$data$ = _error$response$data.Errors) === null || _error$response$data$ === void 0 ? void 0 : (_error$response$data$2 = _error$response$data$[0]) === null || _error$response$data$2 === void 0 ? void 0 : _error$response$data$2.message) || (editId ? t("WT_FILLING_POINT_UPDATED_ERROR") : t("WT_FILLING_POINT_CREATED_ERROR")),
+          isError: true
+        });
+        setTimeout(() => setShowToast(null), 5000);
+      }
+    });
+  };
+  const isMobile = window.Digit.Utils.browser.isMobile();
+  if (isEditLoading) return /*#__PURE__*/React.createElement(Loader, null);
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      gap: "24px",
+      flexDirection: isMobile ? "column" : "row"
+    }
+  }, /*#__PURE__*/React.createElement(Timeline, {
+    steps: steps,
+    currentStep: 1
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      marginLeft: isMobile ? "0px" : "24px"
+    }
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(AddFillingPointMetaData, {
+    t: t,
+    config: {
+      key: "owner"
+    },
+    onSelect: onSelect,
+    formData: formData,
+    visibleFields: ["fillingPointName", "emergencyName", "aeName", "aeMobile", "aeEmail", "jeName", "jeMobile", "jeEmail", "eeName", "eeMobile", "eeEmail"]
+  }), /*#__PURE__*/React.createElement(AddFixFillAddress, {
+    t: t,
+    config: addressConfig,
+    onSelect: handleSelect,
+    formData: formData
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      marginBottom: "24px",
+      justifyContent: isMobile ? "center" : "flex-end"
+    }
+  }, /*#__PURE__*/React.createElement(SubmitBar, {
+    label: editId ? t("ES_COMMON_UPDATE") : t("ES_COMMON_SAVE_NEXT"),
+    onSubmit: handleSubmit
+  }))), showToast && /*#__PURE__*/React.createElement(Toast, {
+    error: showToast.isError,
+    label: showToast.label,
+    onClose: () => setShowToast(null)
+  })));
+};
+
+const AddFixPointAddress = () => {
+  var _formData$owner, _formData$owner2, _formData$owner3, _formData$owner4;
+  const {
+    t
+  } = useTranslation();
+  const location = useLocation();
+  const history = useHistory();
+  const queryClient = useQueryClient();
+  const queryParams = new URLSearchParams(location.search);
+  const editId = queryParams.get("id");
+  const [formData, setFormData] = useState({});
+  const [showToast, setShowToast] = useState(null);
+  const tenantId = Digit.ULBService.getCurrentTenantId();
+  const {
+    isLoading: isEditLoading,
+    data: editData
+  } = Digit.Hooks.wt.useFixedPointSearchAPI({
+    tenantId,
+    filters: {
+      bookingId: editId
+    }
+  }, {
+    enabled: !!editId
+  });
+  useEffect(() => {
+    console.log("Edit ID:", editId);
+    console.log("Search Result:", editData);
+    if (editId && editData !== null && editData !== void 0 && editData.waterTankerBookingDetail) {
+      const data = editData.waterTankerBookingDetail.find(item => item.bookingId === editId);
+      if (data) {
+        var _data$applicantDetail, _data$applicantDetail2, _data$applicantDetail3, _data$applicantDetail4;
+        setFormData({
+          owner: {
+            name: (_data$applicantDetail = data.applicantDetail) === null || _data$applicantDetail === void 0 ? void 0 : _data$applicantDetail.name,
+            mobileNumber: (_data$applicantDetail2 = data.applicantDetail) === null || _data$applicantDetail2 === void 0 ? void 0 : _data$applicantDetail2.mobileNumber,
+            alternateNumber: (_data$applicantDetail3 = data.applicantDetail) === null || _data$applicantDetail3 === void 0 ? void 0 : _data$applicantDetail3.alternateNumber,
+            emailId: (_data$applicantDetail4 = data.applicantDetail) === null || _data$applicantDetail4 === void 0 ? void 0 : _data$applicantDetail4.emailId
+          },
+          address: {
+            ...data.address
+          },
+          bookingId: data.bookingId,
+          auditDetails: data.auditDetails
+        });
+      }
+    }
+  }, [editData, editId]);
+  const addressConfig = {
+    key: "address"
+  };
+  const handleSelect = (key, data) => {
+    setFormData(prev => ({
+      ...prev,
+      [key]: {
+        ...(prev[key] || {}),
+        ...data
+      }
+    }));
+  };
+  const {
+    mutate: createFixedPoint
+  } = Digit.Hooks.wt.useCreateFixedPoint(tenantId);
+  const {
+    mutate: updateFixedPoint
+  } = Digit.Hooks.wt.useUpdateFixedPoint(tenantId);
+  const handleSubmit = e => {
+    const payload = fixedPointPayload({
+      ...formData,
+      tenantId
+    });
+    const mutation = editId ? updateFixedPoint : createFixedPoint;
+    mutation(payload, {
+      onSuccess: () => {
+        setShowToast({
+          label: editId ? t("WT_FILLING_POINT_UPDATED_SUCCESS") : t("WT_FILLING_POINT_CREATED_SUCCESS")
+        });
+        queryClient.invalidateQueries("wtFixedPointSearchList");
+        setTimeout(() => {
+          setShowToast(null);
+          history.push("/digit-ui/employee/wt/search-filling-fix-point");
+        }, 3000);
+      },
+      onError: error => {
+        var _error$response, _error$response$data, _error$response$data$, _error$response$data$2;
+        setShowToast({
+          label: (error === null || error === void 0 ? void 0 : (_error$response = error.response) === null || _error$response === void 0 ? void 0 : (_error$response$data = _error$response.data) === null || _error$response$data === void 0 ? void 0 : (_error$response$data$ = _error$response$data.Errors) === null || _error$response$data$ === void 0 ? void 0 : (_error$response$data$2 = _error$response$data$[0]) === null || _error$response$data$2 === void 0 ? void 0 : _error$response$data$2.message) || (editId ? t("WT_FILLING_POINT_UPDATED_ERROR") : t("WT_FILLING_POINT_CREATED_ERROR")),
+          isError: true
+        });
+        setTimeout(() => setShowToast(null), 5000);
+      }
+    });
+  };
+  const isMobile = window.Digit.Utils.browser.isMobile();
+  if (isEditLoading) return /*#__PURE__*/React.createElement(Loader, null);
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: isMobile ? "column" : "row"
+    }
+  }, /*#__PURE__*/React.createElement(Timeline, {
+    steps: ["WT_FIXED_POINT"],
+    currentStep: 1
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      marginLeft: isMobile ? "0px" : "24px"
+    }
+  }, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "grid",
+      gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr",
+      columnGap: "32px",
+      rowGap: "8px"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column"
+    }
+  }, /*#__PURE__*/React.createElement(CardLabel, null, `${t("COMMON_APPLICANT_NAME")}`, " ", /*#__PURE__*/React.createElement("span", {
+    className: "astericColor"
+  }, "*")), /*#__PURE__*/React.createElement(TextInput, {
+    t: t,
+    type: "text",
+    isMandatory: true,
+    name: "name",
+    value: formData === null || formData === void 0 ? void 0 : (_formData$owner = formData.owner) === null || _formData$owner === void 0 ? void 0 : _formData$owner.name,
+    style: {
+      width: "100%"
+    },
+    onChange: e => handleSelect("owner", {
+      name: e.target.value
+    })
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column"
+    }
+  }, /*#__PURE__*/React.createElement(CardLabel, null, `${t("COMMON_MOBILE_NUMBER")}`, " ", /*#__PURE__*/React.createElement("span", {
+    className: "astericColor"
+  }, "*")), /*#__PURE__*/React.createElement(MobileNumber, {
+    value: formData === null || formData === void 0 ? void 0 : (_formData$owner2 = formData.owner) === null || _formData$owner2 === void 0 ? void 0 : _formData$owner2.mobileNumber,
+    name: "mobileNumber",
+    onChange: value => handleSelect("owner", {
+      mobileNumber: value
+    }),
+    style: {
+      width: "100%"
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column"
+    }
+  }, /*#__PURE__*/React.createElement(CardLabel, null, `${t("COMMON_ALT_MOBILE_NUMBER")}`), /*#__PURE__*/React.createElement(MobileNumber, {
+    value: formData === null || formData === void 0 ? void 0 : (_formData$owner3 = formData.owner) === null || _formData$owner3 === void 0 ? void 0 : _formData$owner3.alternateNumber,
+    name: "alternateNumber",
+    onChange: value => handleSelect("owner", {
+      alternateNumber: value
+    }),
+    style: {
+      width: "100%"
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column"
+    }
+  }, /*#__PURE__*/React.createElement(CardLabel, null, `${t("COMMON_EMAIL_ID")}`, " ", /*#__PURE__*/React.createElement("span", {
+    className: "astericColor"
+  }, "*")), /*#__PURE__*/React.createElement(TextInput, {
+    t: t,
+    type: "email",
+    isMandatory: true,
+    name: "emailId",
+    value: formData === null || formData === void 0 ? void 0 : (_formData$owner4 = formData.owner) === null || _formData$owner4 === void 0 ? void 0 : _formData$owner4.emailId,
+    style: {
+      width: "100%"
+    },
+    onChange: e => handleSelect("owner", {
+      emailId: e.target.value
+    })
+  })))), /*#__PURE__*/React.createElement(AddFixFillAddress, {
+    t: t,
+    config: addressConfig,
+    onSelect: handleSelect,
+    formData: formData
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      marginBottom: "24px",
+      justifyContent: isMobile ? "center" : "flex-end"
+    }
+  }, /*#__PURE__*/React.createElement(SubmitBar, {
+    label: editId ? t("ES_COMMON_UPDATE") : t("ES_COMMON_SAVE"),
+    onSubmit: handleSubmit
+  }))), showToast && /*#__PURE__*/React.createElement(Toast, {
+    error: showToast.isError,
+    label: showToast.label,
+    onClose: () => setShowToast(null)
+  }));
+};
+
+const SearchFillingPointAddress = () => {
+  const {
+    t
+  } = useTranslation();
+  const history = useHistory();
+  const [selectedTab, setSelectedTab] = useState("FIXED_POINT");
+  const [showAddMenu, setShowAddMenu] = useState(false);
+  const [searchValue, setSearchValue] = useState("");
+  const [mobileNumber, setMobileNumber] = useState("");
+  const [status, setStatus] = useState(null);
+  const [searchParams, setSearchParams] = useState({});
+  const tenantId = Digit.ULBService.getCurrentTenantId();
+  const {
+    isLoading: isFixedLoading,
+    data: fixedPointData,
+    refetch: refetchFixed
+  } = Digit.Hooks.wt.useFixedPointSearchAPI({
+    tenantId,
+    filters: searchParams
+  }, {
+    enabled: selectedTab === "FIXED_POINT"
+  });
+  const {
+    isLoading: isFillingLoading,
+    data: fillingPointData,
+    refetch: refetchFilling
+  } = Digit.Hooks.wt.useTankerSearchAPI({
+    tenantId,
+    filters: searchParams
+  }, {
+    enabled: selectedTab === "FILLING_POINT"
+  });
+  const isLoading = selectedTab === "FIXED_POINT" ? isFixedLoading : isFillingLoading;
+  const tableData = (selectedTab === "FIXED_POINT" ? fixedPointData === null || fixedPointData === void 0 ? void 0 : fixedPointData.waterTankerBookingDetail : fillingPointData === null || fillingPointData === void 0 ? void 0 : fillingPointData.waterTankerBookingDetail) || [];
+  const searchConfig = {
+    FIXED_POINT: {
+      label: "WT_FIXED_POINT_NAME",
+      placeholder: "WT_ENTER_FIXED_POINT_NAME"
+    },
+    FILLING_POINT: {
+      label: "WT_FILLING_POINT_NAME",
+      placeholder: "WT_ENTER_FILLING_POINT_NAME"
+    }
+  };
+  const statusOptions = [{
+    i18nKey: "WT_BOOKING_CREATED",
+    code: "BOOKING_CREATED"
+  }, {
+    i18nKey: "WT_BOOKING_APPROVED",
+    code: "APPROVED"
+  }, {
+    i18nKey: "WT_TANKER_DELIVERED",
+    code: "TANKER_DELIVERED"
+  }, {
+    i18nKey: "WT_ASSIGN_VENDOR",
+    code: "ASSIGN_VENDOR"
+  }, {
+    i18nKey: "WT_BOOKING_REJECTED",
+    code: "REJECT"
+  }];
+  const {
+    label,
+    placeholder
+  } = searchConfig[selectedTab];
+  const clearSearch = () => {
+    setSearchValue("");
+    setMobileNumber("");
+    setStatus(null);
+    setSearchParams({});
+  };
+  const onTabChange = tab => {
+    setSelectedTab(tab);
+    clearSearch();
+  };
+  const onAddClick = () => {
+    setShowAddMenu(prev => !prev);
+  };
+  const onActionSelect = option => {
+    if (option === "FILLING_POINT") {
+      history.push(`/digit-ui/employee/wt/add-filling-point-address`);
+    } else if (option === "FIXED_POINT") {
+      history.push(`/digit-ui/employee/wt/add-fix-point-address`);
+    }
+    setShowAddMenu(false);
+  };
+  const onSearch = () => {
+    setSearchParams({
+      name: searchValue,
+      mobileNumber: mobileNumber,
+      status: status === null || status === void 0 ? void 0 : status.code
+    });
+  };
+  const columns = React.useMemo(() => {
+    if (selectedTab === "FIXED_POINT") {
+      return [{
+        Header: t("WT_APPLICANT_NAME"),
+        accessor: row => {
+          var _row$applicantDetail;
+          return (row === null || row === void 0 ? void 0 : (_row$applicantDetail = row.applicantDetail) === null || _row$applicantDetail === void 0 ? void 0 : _row$applicantDetail.name) || "NA";
+        },
+        id: "applicantName",
+        Cell: ({
+          row
+        }) => {
+          var _row$original$applica;
+          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$applica = row.original.applicantDetail) === null || _row$original$applica === void 0 ? void 0 : _row$original$applica.name) || "NA"));
+        }
+      }, {
+        Header: t("WT_MOBILE_NUMBER"),
+        accessor: row => {
+          var _row$applicantDetail2;
+          return (row === null || row === void 0 ? void 0 : (_row$applicantDetail2 = row.applicantDetail) === null || _row$applicantDetail2 === void 0 ? void 0 : _row$applicantDetail2.mobileNumber) || "NA";
+        },
+        id: "mobileNumber"
+      }, {
+        Header: t("WT_LOCALITY"),
+        accessor: row => {
+          var _row$address;
+          return (row === null || row === void 0 ? void 0 : (_row$address = row.address) === null || _row$address === void 0 ? void 0 : _row$address.locality) || "NA";
+        },
+        id: "locality"
+      }];
+    } else {
+      return [{
+        Header: t("WT_FILLING_POINT_NAME"),
+        accessor: row => {
+          var _row$fillingpointmeta;
+          return (row === null || row === void 0 ? void 0 : (_row$fillingpointmeta = row.fillingpointmetadata) === null || _row$fillingpointmeta === void 0 ? void 0 : _row$fillingpointmeta.name) || "NA";
+        },
+        id: "fillingPointName",
+        Cell: ({
+          row
+        }) => {
+          var _row$original$filling;
+          return /*#__PURE__*/React.createElement("span", {
+            className: "link"
+          }, /*#__PURE__*/React.createElement(Link, {
+            to: `/digit-ui/employee/wt/add-filling-point-address?id=${row.original.bookingId}`
+          }, ((_row$original$filling = row.original.fillingpointmetadata) === null || _row$original$filling === void 0 ? void 0 : _row$original$filling.name) || "NA"));
+        }
+      }, {
+        Header: t("WT_JE_NAME"),
+        accessor: row => {
+          var _row$fillingpointmeta2;
+          return (row === null || row === void 0 ? void 0 : (_row$fillingpointmeta2 = row.fillingpointmetadata) === null || _row$fillingpointmeta2 === void 0 ? void 0 : _row$fillingpointmeta2.jeName) || "NA";
+        },
+        id: "jeName"
+      }, {
+        Header: t("WT_LOCALITY"),
+        accessor: row => {
+          var _row$address2;
+          return (row === null || row === void 0 ? void 0 : (_row$address2 = row.address) === null || _row$address2 === void 0 ? void 0 : _row$address2.locality) || "NA";
+        },
+        id: "locality"
+      }];
+    }
+  }, [selectedTab, t]);
+  const isMobile = window.Digit.Utils.browser.isMobile();
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement("div", {
+    className: "search-tabs-container",
+    style: {
+      flexDirection: isMobile ? "column" : "row",
+      gap: isMobile ? "16px" : "0"
+    }
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
+    className: selectedTab === "FIXED_POINT" ? "search-tab-head-selected" : "search-tab-head",
+    onClick: () => onTabChange("FIXED_POINT"),
+    style: {
+      width: isMobile ? "50%" : "auto"
+    }
+  }, t("WT_FIXED_POINT")), /*#__PURE__*/React.createElement("button", {
+    className: selectedTab === "FILLING_POINT" ? "search-tab-head-selected" : "search-tab-head",
+    onClick: () => onTabChange("FILLING_POINT"),
+    style: {
+      width: isMobile ? "50%" : "auto"
+    }
+  }, t("WT_FILLING_POINT"))), /*#__PURE__*/React.createElement("div", {
+    className: "action-bar-wrap-registry",
+    style: {
+      alignSelf: isMobile ? "flex-end" : "auto"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "search-add",
+    onClick: onAddClick
+  }, t("ES_VENDOR_REGISTRY_INBOX_HEADER_ADD"), /*#__PURE__*/React.createElement("div", {
+    className: "search-add-icon"
+  }, /*#__PURE__*/React.createElement(AddIcon, null))), showAddMenu && /*#__PURE__*/React.createElement(Menu, {
+    localeKeyPrefix: "ES_FSM_ACTION_CREATE",
+    options: ["FIXED_POINT", "FILLING_POINT"],
+    t: t,
+    onSelect: onActionSelect
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "finance-mainlayout"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "finance-mainlayout-col1"
+  }, /*#__PURE__*/React.createElement(Label, null, t(label)), /*#__PURE__*/React.createElement(TextInput, {
+    value: searchValue,
+    onChange: e => setSearchValue(e.target.value),
+    placeholder: t(placeholder)
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "finance-mainlayout-col1"
+  }, /*#__PURE__*/React.createElement(Label, null, t("WT_MOBILE_NUMBER")), /*#__PURE__*/React.createElement(TextInput, {
+    value: mobileNumber,
+    onChange: e => setMobileNumber(e.target.value),
+    placeholder: t("WT_ENTER_MOBILE_NUMBER")
+  })), selectedTab === "FILLING_POINT" && /*#__PURE__*/React.createElement("div", {
+    className: "finance-mainlayout-col1"
+  }, /*#__PURE__*/React.createElement(Label, null, t("PT_COMMON_TABLE_COL_STATUS_LABEL")), /*#__PURE__*/React.createElement(Dropdown, {
+    option: statusOptions,
+    optionKey: "i18nKey",
+    selected: status,
+    select: setStatus,
+    t: t
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      marginTop: "32px",
+      justifyContent: isMobile ? "center" : "flex-end",
+      flexDirection: isMobile ? "column-reverse" : "row",
+      gap: "16px"
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "clear-search",
+    onClick: clearSearch,
+    style: {
+      alignSelf: "center"
+    }
+  }, t("ES_COMMON_CLEAR_SEARCH")), /*#__PURE__*/React.createElement(SubmitBar, {
+    label: t("ES_COMMON_SEARCH"),
+    onSubmit: onSearch
+  })))), /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(Table, {
+    data: tableData,
+    columns: columns,
+    pageSize: 10,
+    showPagination: true,
+    showPageSizeOptions: true,
+    showSearch: false,
+    getCellProps: () => ({
+      style: {
+        padding: "20px 18px",
+        fontSize: "16px"
+      }
+    }),
+    t: t,
+    isLoading: isLoading,
+    isSearchRequired: false,
+    isDownloadRequired: true,
+    isFilterRequired: true,
+    isSortRequired: true
+  })));
+};
+
+const VendorAssign = ({
+  parentUrl,
+  heading
+}) => {
+  const tenantId = Digit.ULBService.getCurrentTenantId();
+  const {
+    t
+  } = useTranslation();
+  const [showToast, setShowToast] = useState(null);
+  const [formData, setFormData] = useState({});
+  const [applicantName, setApplicantName] = useState("");
+  const [mobileNumber, setMobileNumber] = useState("");
+  const [alternateNumber, setAlternateNumber] = useState("");
+  const [emailId, setEmailId] = useState("");
+  const [validFrom, setValidFrom] = useState("");
+  const [validTo, setValidTo] = useState("");
+  const [fillingPoint, setFillingPoint] = useState(null);
+  const {
+    data: fetchedOptions,
+    isLoading: isFillingLoading
+  } = Digit.Hooks.wt.useTankerSearchAPI({
+    tenantId,
+    filters: {}
+  }, {
+    select: data => {
+      var _data$waterTankerBook, _data$waterTankerBook2;
+      return data === null || data === void 0 ? void 0 : (_data$waterTankerBook = data.waterTankerBookingDetail) === null || _data$waterTankerBook === void 0 ? void 0 : (_data$waterTankerBook2 = _data$waterTankerBook.filter(fp => fp.fillingpointmetadata)) === null || _data$waterTankerBook2 === void 0 ? void 0 : _data$waterTankerBook2.map(fp => {
+        var _fp$fillingpointmetad, _fp$fillingpointmetad2, _fp$fillingpointmetad3, _fp$fillingpointmetad4, _fp$fillingpointmetad5;
+        return {
+          name: ((_fp$fillingpointmetad = fp.fillingpointmetadata) === null || _fp$fillingpointmetad === void 0 ? void 0 : _fp$fillingpointmetad.fillingPointName) || ((_fp$fillingpointmetad2 = fp.fillingpointmetadata) === null || _fp$fillingpointmetad2 === void 0 ? void 0 : _fp$fillingpointmetad2.name),
+          code: ((_fp$fillingpointmetad3 = fp.fillingpointmetadata) === null || _fp$fillingpointmetad3 === void 0 ? void 0 : _fp$fillingpointmetad3.fillingPointId) || fp.bookingId,
+          i18nKey: ((_fp$fillingpointmetad4 = fp.fillingpointmetadata) === null || _fp$fillingpointmetad4 === void 0 ? void 0 : _fp$fillingpointmetad4.fillingPointName) || ((_fp$fillingpointmetad5 = fp.fillingpointmetadata) === null || _fp$fillingpointmetad5 === void 0 ? void 0 : _fp$fillingpointmetad5.name)
+        };
+      });
+    }
+  });
+  const fillingPointOptions = (fetchedOptions === null || fetchedOptions === void 0 ? void 0 : fetchedOptions.length) > 0 ? fetchedOptions : [{
+    name: "Filling Point 1",
+    code: "FILLING_POINT_1",
+    i18nKey: "WT_FILLING_POINT_1"
+  }, {
+    name: "Filling Point 2",
+    code: "FILLING_POINT_2",
+    i18nKey: "WT_FILLING_POINT_2"
+  }, {
+    name: "Filling Point 3",
+    code: "FILLING_POINT_3",
+    i18nKey: "WT_FILLING_POINT_3"
+  }, {
+    name: "Filling Point 4",
+    code: "FILLING_POINT_4",
+    i18nKey: "WT_FILLING_POINT_4"
+  }];
+  const handleSubmit = () => {
+    if (!applicantName || !mobileNumber || !emailId || !validFrom || !validTo || !formData.address) {
+      setShowToast({
+        isError: true,
+        label: t("ES_COMMON_FILL_ALL_MANDATORY_FIELDS")
+      });
+      return;
+    }
+    const payload = {
+      vendor: {
+        tenantId,
+        name: applicantName,
+        mobileNumber,
+        alternateNumber,
+        emailId,
+        validFrom,
+        validTo,
+        fillingPoint: fillingPoint === null || fillingPoint === void 0 ? void 0 : fillingPoint.code,
+        address: formData.address
+      }
+    };
+    Digit.VendorService.createVendor(payload, tenantId).then(result => {
+      setShowToast({
+        isError: false,
+        label: t("ES_COMMON_SAVE_SUCCESS")
+      });
+    }).catch(err => {
+      var _err$response, _err$response$data, _err$response$data$Er, _err$response$data$Er2;
+      setShowToast({
+        isError: true,
+        label: (err === null || err === void 0 ? void 0 : (_err$response = err.response) === null || _err$response === void 0 ? void 0 : (_err$response$data = _err$response.data) === null || _err$response$data === void 0 ? void 0 : (_err$response$data$Er = _err$response$data.Errors) === null || _err$response$data$Er === void 0 ? void 0 : (_err$response$data$Er2 = _err$response$data$Er[0]) === null || _err$response$data$Er2 === void 0 ? void 0 : _err$response$data$Er2.message) || t("ES_COMMON_ERROR_SAVING")
+      });
+    });
+  };
+  const isMobile = window.Digit.Utils.browser.isMobile();
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: isMobile ? "column" : "row"
+    }
+  }, /*#__PURE__*/React.createElement(Timeline, {
+    steps: ["Vendor Assign"],
+    currentStep: 1
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      marginLeft: isMobile ? "0px" : "24px"
+    }
+  }, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "grid",
+      gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr",
+      columnGap: "32px",
+      rowGap: "8px"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column"
+    }
+  }, /*#__PURE__*/React.createElement(CardLabel, null, `${t("COMMON_APPLICANT_NAME")}`, " ", /*#__PURE__*/React.createElement("span", {
+    className: "astericColor"
+  }, "*")), /*#__PURE__*/React.createElement(TextInput, {
+    t: t,
+    type: "text",
+    isMandatory: true,
+    name: "applicantName",
+    value: applicantName,
+    style: {
+      width: "100%"
+    },
+    onChange: e => setApplicantName(e.target.value)
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column"
+    }
+  }, /*#__PURE__*/React.createElement(CardLabel, null, `${t("CORE_COMMON_APPLICANT_MOBILE_NUMBER")}`, " ", /*#__PURE__*/React.createElement("span", {
+    className: "astericColor"
+  }, "*")), /*#__PURE__*/React.createElement(MobileNumber, {
+    value: mobileNumber,
+    name: "mobileNumber",
+    onChange: value => setMobileNumber(value),
+    style: {
+      width: "100%"
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column"
+    }
+  }, /*#__PURE__*/React.createElement(CardLabel, null, `${t("WT_VENDOR_ALT_MOBILE_NUMBER")}`), /*#__PURE__*/React.createElement(MobileNumber, {
+    value: alternateNumber,
+    name: "alternateNumber",
+    onChange: value => setAlternateNumber(value),
+    style: {
+      width: "100%"
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column"
+    }
+  }, /*#__PURE__*/React.createElement(CardLabel, null, `${t("CORE_COMMON_APPLICANT_EMAIL_ID")}`, " ", /*#__PURE__*/React.createElement("span", {
+    className: "astericColor"
+  }, "*")), /*#__PURE__*/React.createElement(TextInput, {
+    t: t,
+    type: "email",
+    isMandatory: true,
+    name: "emailId",
+    value: emailId,
+    style: {
+      width: "100%"
+    },
+    onChange: e => setEmailId(e.target.value)
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column"
+    }
+  }, /*#__PURE__*/React.createElement(CardLabel, null, `${t("COMMON_VALID_FROM_DATE")}`, " ", /*#__PURE__*/React.createElement("span", {
+    className: "astericColor"
+  }, "*")), /*#__PURE__*/React.createElement(DatePicker, {
+    date: validFrom,
+    onChange: date => setValidFrom(date),
+    style: {
+      width: "100%"
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column"
+    }
+  }, /*#__PURE__*/React.createElement(CardLabel, null, `${t("COMMON_VALID_TO_DATE")}`, " ", /*#__PURE__*/React.createElement("span", {
+    className: "astericColor"
+  }, "*")), /*#__PURE__*/React.createElement(DatePicker, {
+    date: validTo,
+    onChange: date => setValidTo(date),
+    style: {
+      width: "100%"
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column"
+    }
+  }, /*#__PURE__*/React.createElement(CardLabel, null, `${t("COMMON_FILLING_POINT")}`, " ", /*#__PURE__*/React.createElement("span", {
+    className: "astericColor"
+  }, "*")), /*#__PURE__*/React.createElement(Dropdown, {
+    className: "form-field",
+    selected: fillingPoint,
+    disable: isFillingLoading,
+    select: setFillingPoint,
+    option: fillingPointOptions,
+    optionKey: "i18nKey",
+    optionCardStyles: {
+      overflowY: "auto",
+      maxHeight: "300px"
+    },
+    t: t,
+    name: "fillingPoint",
+    placeholder: t("WT_SELECT_FILLING_POINT") || "Select Filling Point",
+    style: {
+      width: "100%"
+    }
+  })))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      marginTop: "24px",
+      justifyContent: isMobile ? "center" : "flex-end"
+    }
+  }, /*#__PURE__*/React.createElement(SubmitBar, {
+    label: t("ES_COMMON_SAVE"),
+    onSubmit: handleSubmit
+  }))), showToast && /*#__PURE__*/React.createElement(Toast, {
+    error: showToast.isError,
+    label: showToast.label,
+    onClose: () => setShowToast(null)
+  }));
+};
+
+const EmployeeApp = ({
+  path
+}) => {
+  var _Digit, _Digit$ComponentRegis, _Digit2, _Digit2$ComponentRegi;
+  const {
+    t
+  } = useTranslation();
+  const location = useLocation();
+  sessionStorage.removeItem("revalidateddone");
+  const getDynamicBreadcrumbs = () => {
+    const pathname = location.pathname;
+    let moduleName = "WT";
+    if (pathname.includes("/mt/")) moduleName = "MT";
+    if (pathname.includes("/tp/")) moduleName = "TP";
+    let crumbs = [{
+      icon: HomeIcon,
+      path: "/digit-ui/employee"
+    }, {
+      label: t("WT_MODULE_NAME"),
+      path: `/digit-ui/employee/module/details?moduleName=${moduleName}`
+    }];
+    if (pathname.includes("/inbox")) {
+      let label = "ES_COMMON_INBOX";
+      if (pathname.includes("/tp/inbox")) label = "TP_INBOX";
+      crumbs.push({
+        label: t(label)
+      });
+    } else if (pathname.includes("/my-bookings")) {
+      let label = "WT_SEARCH_BOOKINGS";
+      if (pathname.includes("/mt/my-bookings")) label = "MT_SEARCH_BOOKINGS";
+      if (pathname.includes("/tp/my-bookings")) label = "TP_SEARCH_BOOKINGS";
+      crumbs.push({
+        label: t(label)
+      });
+    } else if (pathname.includes("/request-service")) {
+      crumbs.push({
+        label: t("WT_REQUEST_SERVICE")
+      });
+    } else if (pathname.includes("/booking-details") || pathname.includes("/bookingsearch/booking-details")) {
+      const isSearch = pathname.includes("/bookingsearch");
+      if (isSearch) {
+        crumbs.push({
+          label: t("WT_SEARCH_BOOKINGS"),
+          path: `${path}/my-bookings`
+        });
+      } else {
+        crumbs.push({
+          label: t("ES_COMMON_INBOX"),
+          path: `${path}/inbox`
+        });
+      }
+      crumbs.push({
+        label: t("WT_BOOKING_DETAILS")
+      });
+    } else if (pathname.includes("/fixed-point-schedule")) {
+      crumbs.push({
+        label: t("WT_FIXED_POINT_SCHEDULE_MANAGEMENT")
+      });
+    } else if (pathname.includes("/live-tracking")) {
+      crumbs.push({
+        label: t("WT_LIVE_TRACKING_SYSTEM")
+      });
+    } else if (pathname.includes("/add-filling-point-address")) {
+      crumbs.push({
+        label: t("WT_ADD_FILLING_POINT_ADDRESS")
+      });
+    } else if (pathname.includes("/add-fix-point-address")) {
+      crumbs.push({
+        label: t("WT_ADD_FIX_POINT_ADDRESS")
+      });
+    } else if (pathname.includes("/search-filling-fix-point")) {
+      crumbs.push({
+        label: t("WT_SEARCH_FIX_POINT")
+      });
+    } else if (pathname.includes("/vendor-assign")) {
+      crumbs.push({
+        label: t("WT_VENDOR_ASSIGN")
+      });
+    }
+    return crumbs;
+  };
+  const inboxInitialState = {
+    searchParams: {
+      uuid: {
+        code: "ASSIGNED_TO_ALL",
+        name: "ES_INBOX_ASSIGNED_TO_ALL"
+      },
+      services: ["watertanker"],
+      applicationStatus: [],
+      locality: []
+    }
+  };
+  const inboxInitialStateMt = {
+    searchParams: {
+      uuid: {
+        code: "ASSIGNED_TO_ALL",
+        name: "ES_INBOX_ASSIGNED_TO_ALL"
+      },
+      services: ["mobileToilet"],
+      applicationStatus: [],
+      locality: []
+    }
+  };
+  const inboxInitialStateTp = {
+    searchParams: {
+      uuid: {
+        code: "ASSIGNED_TO_ALL",
+        name: "ES_INBOX_ASSIGNED_TO_ALL"
+      },
+      services: ["treePruning"],
+      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", {
+    className: "ground-container employee-app-container form-container"
+  }, /*#__PURE__*/React.createElement(ModuleHeader, {
+    leftContent: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ArrowLeft, {
+      className: "icon"
     }), "Back"),
     onLeftClick: () => window.history.back(),
     breadcrumbs: getDynamicBreadcrumbs()
@@ -3139,7 +6316,7 @@ const EmployeeApp = ({
     className: "employee-form-content"
   }, /*#__PURE__*/React.createElement(PrivateRoute, {
     path: `${path}/inbox`,
-    component: () => /*#__PURE__*/React.createElement(Inbox, {
+    component: props => /*#__PURE__*/React.createElement(Inbox, Object.assign({}, props, {
       useNewInboxAPI: true,
       parentRoute: path,
       businessService: "watertanker",
@@ -3147,10 +6324,10 @@ const EmployeeApp = ({
       filterComponent: "WT_INBOX_FILTER",
       initialStates: inboxInitialState,
       isInbox: true
-    })
+    }))
   }), /*#__PURE__*/React.createElement(PrivateRoute, {
     path: `${path}/mt/inbox`,
-    component: () => /*#__PURE__*/React.createElement(Inbox, {
+    component: props => /*#__PURE__*/React.createElement(Inbox, Object.assign({}, props, {
       useNewInboxAPI: true,
       parentRoute: path,
       moduleCode: "MT",
@@ -3158,10 +6335,10 @@ const EmployeeApp = ({
       filterComponent: "WT_INBOX_FILTER",
       initialStates: inboxInitialStateMt,
       isInbox: true
-    })
+    }))
   }), /*#__PURE__*/React.createElement(PrivateRoute, {
     path: `${path}/tp/inbox`,
-    component: () => /*#__PURE__*/React.createElement(Inbox, {
+    component: props => /*#__PURE__*/React.createElement(Inbox, Object.assign({}, props, {
       useNewInboxAPI: true,
       parentRoute: path,
       moduleCode: "TP",
@@ -3169,7 +6346,7 @@ const EmployeeApp = ({
       filterComponent: "WT_INBOX_FILTER",
       initialStates: inboxInitialStateTp,
       isInbox: true
-    })
+    }))
   }), /*#__PURE__*/React.createElement(PrivateRoute, {
     path: `${path}/request-service`,
     component: WTCreate
@@ -3181,14 +6358,14 @@ const EmployeeApp = ({
     component: WTCreate
   }), /*#__PURE__*/React.createElement(PrivateRoute, {
     path: `${path}/booking-details/:id`,
-    component: () => /*#__PURE__*/React.createElement(ApplicationDetails, {
+    component: props => /*#__PURE__*/React.createElement(ApplicationDetails, Object.assign({}, props, {
       parentRoute: path
-    })
+    }))
   }), /*#__PURE__*/React.createElement(PrivateRoute, {
     path: `${path}/bookingsearch/booking-details/:id`,
-    component: () => /*#__PURE__*/React.createElement(ApplicationDetails, {
+    component: props => /*#__PURE__*/React.createElement(ApplicationDetails, Object.assign({}, props, {
       parentRoute: path
-    })
+    }))
   }), /*#__PURE__*/React.createElement(PrivateRoute, {
     path: `${path}/my-bookings`,
     component: props => /*#__PURE__*/React.createElement(SearchApp, Object.assign({}, props, {
@@ -3207,6 +6384,24 @@ const EmployeeApp = ({
       parentRoute: path,
       moduleCode: "TP"
     }))
+  }), /*#__PURE__*/React.createElement(PrivateRoute, {
+    path: `${path}/fixed-point-schedule`,
+    component: FixedPointScheduleManagement
+  }), /*#__PURE__*/React.createElement(PrivateRoute, {
+    path: `${path}/live-tracking`,
+    component: LiveTrackingSystem
+  }), /*#__PURE__*/React.createElement(PrivateRoute, {
+    path: `${path}/add-filling-point-address`,
+    component: AddFillingPointAddress
+  }), /*#__PURE__*/React.createElement(PrivateRoute, {
+    path: `${path}/add-fix-point-address`,
+    component: AddFixPointAddress
+  }), /*#__PURE__*/React.createElement(PrivateRoute, {
+    path: `${path}/search-filling-fix-point`,
+    component: SearchFillingPointAddress
+  }), /*#__PURE__*/React.createElement(PrivateRoute, {
+    path: `${path}/vendor-assignment`,
+    component: VendorAssign
   }))))));
 };
 
@@ -18329,6 +21524,7 @@ const ApplicationDetails$1 = () => {
   }, [workflowDetails.data]);
   const [showTimeline, setShowTimeline] = useState(true);
   return /*#__PURE__*/React.createElement("div", {
+    className: "employee-form-content-with-action-bar",
     style: {
       padding: (user === null || user === void 0 ? void 0 : user.type) === "CITIZEN" ? "0 15px" : ""
     }
@@ -19904,7 +23100,14 @@ const componentsToRegister = {
   TreePruningRequestDetails,
   MTAcknowledgement,
   TPAcknowledgement,
-  MTCitizenCard: MTCitizenCard
+  MTCitizenCard: MTCitizenCard,
+  FixedPointScheduleManagement,
+  LiveTrackingSystem,
+  AddFillingPointAddress,
+  AddFixPointAddress,
+  AddFillingPointMetaData,
+  WTSearchPointAddress: SearchFillingPointAddress,
+  VendorAssign
 };
 const initWTComponents = () => {
   Object.entries(componentsToRegister).forEach(([key, value]) => {