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

package/dist/index.modern.js

@@ -1,5 +1,5 @@
-import { TickMark, ArrowDown, MobileNumber, CardLabelError, TextInput, Dropdown, DatePicker, SubmitBar, Card, Table, Loader, Toast, AppContainer, ModuleHeader, ArrowLeft, PrivateRoute, HomeIcon, KeyNote, Modal, CardHeader, FormStep, CardLabel, RadioButtons, UploadFile, TextArea, CheckBox, CardSubHeader, StatusTable, Row, GenericFileIcon, LinkButton, EditIcon, Banner, CHBIcon, EmployeeModuleCard, CloseSvg, Label, LinkLabel, ActionBar, DetailsCard, SearchAction, FilterAction, PopUp, ShippingTruck, CustomNameDropdown, MultiSelectDropdown, LabelFieldPair, AddIcon, Menu, 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 { TickMark, ArrowDown, MobileNumber, CardLabelError, TextInput, Dropdown, DatePicker, SubmitBar, Card, Table, Loader, Toast, AppContainer, ModuleHeader, ArrowLeft, PrivateRoute, HomeIcon, KeyNote, Modal, CardHeader, FormStep, CardLabel, RadioButtons, UploadFile, TextArea, CheckBox, CardSubHeader, StatusTable, Row, GenericFileIcon, LinkButton, EditIcon, Banner, CHBIcon, EmployeeModuleCard, CloseSvg, Label, LinkLabel, ActionBar, DetailsCard, SearchAction, FilterAction, PopUp, ShippingTruck, CustomNameDropdown, MultiSelectDropdown, CollapsibleCardPage as CollapsibleCardPage$1, LabelFieldPair, AddIcon, Menu, 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, { useRef, useEffect, useState, useMemo, useCallback, Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useRouteMatch, useHistory, Switch, Route, Redirect, Link, useParams } from 'react-router-dom';
 import { useQueryClient } from 'react-query';
@@ -355,6 +355,20 @@ const WTCreate = () => {
   const WTAcknowledgement = (_Digit2 = Digit) === null || _Digit2 === void 0 ? void 0 : (_Digit2$ComponentRegi = _Digit2.ComponentRegistryService) === null || _Digit2$ComponentRegi === void 0 ? void 0 : _Digit2$ComponentRegi.getComponent("WTAcknowledgement");
   const MTAcknowledgement = (_Digit3 = Digit) === null || _Digit3 === void 0 ? void 0 : (_Digit3$ComponentRegi = _Digit3.ComponentRegistryService) === null || _Digit3$ComponentRegi === void 0 ? void 0 : _Digit3$ComponentRegi.getComponent("MTAcknowledgement");
   const TPAcknowledgement = (_Digit4 = Digit) === null || _Digit4 === void 0 ? void 0 : (_Digit4$ComponentRegi = _Digit4.ComponentRegistryService) === null || _Digit4$ComponentRegi === void 0 ? void 0 : _Digit4$ComponentRegi.getComponent("TPAcknowledgement");
+  const formStepRoutes = ["applicant-details", "address-details", "request-details", "toiletRequest-details", "treePruningRequest-details"];
+  const isFormStep = formStepRoutes.some(route => pathname.includes(route));
+  const sectionRefs = useRef({});
+  useEffect(() => {
+    if (isFormStep) {
+      const currentRoute = pathname.split("/").pop();
+      if (sectionRefs.current[currentRoute]) {
+        sectionRefs.current[currentRoute].scrollIntoView({
+          behavior: "smooth",
+          block: "start"
+        });
+      }
+    }
+  }, [pathname, isFormStep]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "employee-form-section-wrapper"
   }, !pathname.includes("/info") && /*#__PURE__*/React.createElement(VerticalTimeline, {
@@ -362,32 +376,7 @@ const WTCreate = () => {
     showFinalStep: true
   }), /*#__PURE__*/React.createElement("div", {
     className: "employee-form-section"
-  }, /*#__PURE__*/React.createElement(Switch, null, config.map((routeObj, index) => {
-    var _userDetails$user;
-    const {
-      component,
-      texts,
-      inputs,
-      key,
-      additionaFields
-    } = routeObj;
-    const Component = typeof component === "string" ? Digit.ComponentRegistryService.getComponent(component) : component;
-    return /*#__PURE__*/React.createElement(Route, {
-      path: `${match.path}/${routeObj.route}`,
-      key: index
-    }, /*#__PURE__*/React.createElement(Component, {
-      config: {
-        texts,
-        inputs,
-        key,
-        additionaFields
-      },
-      onSelect: handleSelect,
-      t: t,
-      formData: params,
-      userDetails: userDetails === null || userDetails === void 0 ? void 0 : (_userDetails$user = userDetails.user) === null || _userDetails$user === void 0 ? void 0 : _userDetails$user[0]
-    }));
-  }), /*#__PURE__*/React.createElement(Route, {
+  }, /*#__PURE__*/React.createElement(Switch, null, /*#__PURE__*/React.createElement(Route, {
     path: `${match.path}/check`
   }, /*#__PURE__*/React.createElement(CheckPage, {
     onSubmit: wt_create,
@@ -407,7 +396,68 @@ const WTCreate = () => {
   }, /*#__PURE__*/React.createElement(TPAcknowledgement, {
     data: params,
     onSuccess: onSuccess
-  })), /*#__PURE__*/React.createElement(Route, null, /*#__PURE__*/React.createElement(Redirect, {
+  })), config.map((routeObj, index) => {
+    if (!formStepRoutes.includes(routeObj.route)) {
+      var _userDetails$user;
+      const {
+        component,
+        texts,
+        inputs,
+        key,
+        additionaFields
+      } = routeObj;
+      const Component = typeof component === "string" ? Digit.ComponentRegistryService.getComponent(component) : component;
+      return /*#__PURE__*/React.createElement(Route, {
+        path: `${match.path}/${routeObj.route}`,
+        key: index
+      }, /*#__PURE__*/React.createElement(Component, {
+        config: {
+          texts,
+          inputs,
+          key,
+          additionaFields
+        },
+        onSelect: handleSelect,
+        t: t,
+        formData: params,
+        userDetails: userDetails === null || userDetails === void 0 ? void 0 : (_userDetails$user = userDetails.user) === null || _userDetails$user === void 0 ? void 0 : _userDetails$user[0]
+      }));
+    }
+    return null;
+  }), /*#__PURE__*/React.createElement(Route, {
+    path: formStepRoutes.map(route => `${match.path}/${route}`)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "single-page-form-container"
+  }, config.filter(routeObj => formStepRoutes.includes(routeObj.route)).map((routeObj, index) => {
+    var _params$serviceType5, _params$serviceType5$, _userDetails$user2;
+    const {
+      component,
+      texts,
+      inputs,
+      key,
+      additionaFields
+    } = routeObj;
+    const Component = typeof component === "string" ? Digit.ComponentRegistryService.getComponent(component) : component;
+    const code = params === null || params === void 0 ? void 0 : (_params$serviceType5 = params.serviceType) === null || _params$serviceType5 === void 0 ? void 0 : (_params$serviceType5$ = _params$serviceType5.serviceType) === null || _params$serviceType5$ === void 0 ? void 0 : _params$serviceType5$.code;
+    if (routeObj.route === "request-details" && code !== "WT") return null;
+    if (routeObj.route === "toiletRequest-details" && code !== "MobileToilet") return null;
+    if (routeObj.route === "treePruningRequest-details" && code !== "TREE_PRUNING") return null;
+    return /*#__PURE__*/React.createElement("div", {
+      key: index,
+      ref: el => sectionRefs.current[routeObj.route] = el,
+      className: "form-section-unit"
+    }, /*#__PURE__*/React.createElement(Component, {
+      config: {
+        ...routeObj,
+        isCollapsible: true,
+        defaultOpen: true
+      },
+      onSelect: handleSelect,
+      t: t,
+      formData: params,
+      userDetails: userDetails === null || userDetails === void 0 ? void 0 : (_userDetails$user2 = userDetails.user) === null || _userDetails$user2 === void 0 ? void 0 : _userDetails$user2[0]
+    }));
+  }))), /*#__PURE__*/React.createElement(Route, null, /*#__PURE__*/React.createElement(Redirect, {
     to: `${match.path}/${config.indexRoute}`
   }))))));
 };
@@ -2299,14 +2349,12 @@ const WTCard = () => {
   const {
     t
   } = useTranslation();
-  const [total, setTotal] = useState("-");
+  const tenantId = Digit.ULBService.getCurrentTenantId();
   const {
-    data,
-    isLoading,
-    isFetching,
-    isSuccess
+    data: citizenInboxData,
+    isLoading: isCitizenInboxLoading
   } = Digit.Hooks.useNewInboxGeneral({
-    tenantId: Digit.ULBService.getCurrentTenantId(),
+    tenantId,
     ModuleCode: "WT",
     filters: {
       limit: 10,
@@ -2323,13 +2371,39 @@ const WTCard = () => {
       enabled: Digit.Utils.wtAccess()
     }
   });
-  useEffect(() => {
-    if (!isFetching && isSuccess) setTotal(data);
-  }, [isFetching]);
+  const {
+    data: fixedPointInboxData,
+    isLoading: isFixedPointInboxLoading
+  } = Digit.Hooks.useNewInboxGeneral({
+    tenantId,
+    ModuleCode: "WT",
+    filters: {
+      limit: 10,
+      offset: 0,
+      services: ["watertanker-fixedpoint"]
+    },
+    config: {
+      select: data => {
+        return {
+          totalCount: data === null || data === void 0 ? void 0 : data.totalCount,
+          nearingSlaCount: data === null || data === void 0 ? void 0 : data.nearingSlaCount
+        } || "-";
+      },
+      enabled: Digit.Utils.wtAccess()
+    }
+  });
+  const citizenInboxCount = isCitizenInboxLoading ? "-" : (citizenInboxData === null || citizenInboxData === void 0 ? void 0 : citizenInboxData.totalCount) ?? 0;
+  const fixedPointInboxCount = isFixedPointInboxLoading ? "-" : (fixedPointInboxData === null || fixedPointInboxData === void 0 ? void 0 : fixedPointInboxData.totalCount) ?? 0;
   const links = [{
-    count: isLoading ? "-" : total === null || total === void 0 ? void 0 : total.totalCount,
+    count: citizenInboxCount,
     label: t("ES_COMMON_INBOX"),
+    subLabel: t("CITIZEN"),
     link: `${APPLICATION_PATH}/employee/wt/inbox`
+  }, {
+    count: fixedPointInboxCount,
+    label: t("ES_COMMON_INBOX"),
+    subLabel: t("FIXED_POINT"),
+    link: `${APPLICATION_PATH}/employee/wt/fixed-point/inbox`
   }, {
     label: t("ES_COMMON_APPLICATION_SEARCH"),
     link: `${APPLICATION_PATH}/employee/wt/my-bookings`
@@ -2354,7 +2428,7 @@ const WTCard = () => {
     Icon: /*#__PURE__*/React.createElement(CHBIcon, null),
     moduleName: t("WT_MODULE_NAME"),
     kpis: [{
-      count: total === null || total === void 0 ? void 0 : total.totalCount,
+      count: citizenInboxCount,
       label: t("ES_TITLE_INBOX"),
       link: `${APPLICATION_PATH}/employee/wt/inbox`
     }],
@@ -3064,6 +3138,7 @@ const Inbox = ({
   useNewInboxAPI,
   parentRoute,
   moduleCode,
+  detailRoute,
   initialStates: _initialStates = {},
   filterComponent,
   isInbox,
@@ -3290,6 +3365,7 @@ const Inbox = ({
         }
       }, /*#__PURE__*/React.createElement(WTDesktopInbox, {
         moduleCode: moduleCode,
+        detailRoute: detailRoute,
         data: data,
         tableConfig: TableConfig(t)[moduleCode],
         isLoading: hookLoading,
@@ -3335,13 +3411,24 @@ const AddTripModal = ({
     departureFixedPoint: initialValues.departureFixedPoint || currentTime,
     returnFpl: initialValues.returnFpl || currentTime,
     frequencyNo: initialValues.frequencyNo,
-    vehicleId: initialValues.vehicleId
+    vehicleId: initialValues.vehicleId,
+    fixedPointCode: initialValues.fixedPointCode,
+    day: initialValues.day || [],
+    volume: initialValues.volume || "",
+    active: initialValues.active || null,
+    remarks: initialValues.remarks || ""
   } : {
+    fixedPointCode: "",
+    day: [],
     arrivalTimeFpl: currentTime,
     departureTimeFpl: currentTime,
     arrivalFixedPoint: currentTime,
     departureFixedPoint: currentTime,
-    returnFpl: currentTime
+    returnFpl: currentTime,
+    volume: "",
+    active: null,
+    remarks: "",
+    frequencyNo: 1
   };
   const {
     register,
@@ -3367,13 +3454,13 @@ const AddTripModal = ({
   });
   const fixedPoints = (fixedPointsData === null || fixedPointsData === void 0 ? void 0 : fixedPointsData.waterTankerBookingDetail) || [];
   const fixedPointOptions = fixedPoints.map(fp => {
-    var _fp$applicantDetail, _fp$applicantDetail2, _fp$address, _fp$applicantDetail3, _fp$applicantDetail4, _fp$address2, _fp$address3, _fp$address4, _fp$address5, _fp$address6;
+    var _fp$applicantDetail, _fp$applicantDetail2, _fp$address, _fp$applicantDetail3, _fp$applicantDetail4, _fp$address2, _fp$applicantDetail5, _fp$address3, _fp$address4, _fp$address5, _fp$address6;
     return {
       name: (fp === null || fp === void 0 ? void 0 : (_fp$applicantDetail = fp.applicantDetail) === null || _fp$applicantDetail === void 0 ? void 0 : _fp$applicantDetail.name) || "NA",
       mobileNumber: (fp === null || fp === void 0 ? void 0 : (_fp$applicantDetail2 = fp.applicantDetail) === null || _fp$applicantDetail2 === void 0 ? void 0 : _fp$applicantDetail2.mobileNumber) || "NA",
       locality: (fp === null || fp === void 0 ? void 0 : (_fp$address = fp.address) === null || _fp$address === void 0 ? void 0 : _fp$address.locality) || "NA",
       displayLabel: `${(fp === null || fp === void 0 ? void 0 : (_fp$applicantDetail3 = fp.applicantDetail) === null || _fp$applicantDetail3 === void 0 ? void 0 : _fp$applicantDetail3.name) || "NA"} | ${(fp === null || fp === void 0 ? void 0 : (_fp$applicantDetail4 = fp.applicantDetail) === null || _fp$applicantDetail4 === void 0 ? void 0 : _fp$applicantDetail4.mobileNumber) || "NA"} | ${(fp === null || fp === void 0 ? void 0 : (_fp$address2 = fp.address) === null || _fp$address2 === void 0 ? void 0 : _fp$address2.locality) || "NA"}`,
-      value: fp.bookingId,
+      value: fp.fixedPointCode || (fp === null || fp === void 0 ? void 0 : (_fp$applicantDetail5 = fp.applicantDetail) === null || _fp$applicantDetail5 === void 0 ? void 0 : _fp$applicantDetail5.fixedPointId) || fp.bookingId,
       fullAddress: [(fp === null || fp === void 0 ? void 0 : (_fp$address3 = fp.address) === null || _fp$address3 === void 0 ? void 0 : _fp$address3.houseNo) && `${t("WT_HOUSE_NO")} = ${fp.address.houseNo}`, (fp === null || fp === void 0 ? void 0 : (_fp$address4 = fp.address) === null || _fp$address4 === void 0 ? void 0 : _fp$address4.streetName) && `${t("WT_STREET_NAME")} = ${fp.address.streetName}`, (fp === null || fp === void 0 ? void 0 : (_fp$address5 = fp.address) === null || _fp$address5 === void 0 ? void 0 : _fp$address5.landmark) && `${t("WT_LANDMARK")} = ${fp.address.landmark}`, (fp === null || fp === void 0 ? void 0 : (_fp$address6 = fp.address) === null || _fp$address6 === void 0 ? void 0 : _fp$address6.locality) && `${t("WT_LOCALITY")} = ${fp.address.locality}`].filter(Boolean).join(", ")
     };
   });
@@ -3409,9 +3496,8 @@ const AddTripModal = ({
     value: "No"
   }];
   const formData = watch();
-  const isFormDisabled = !(formData !== null && formData !== void 0 && formData.fixedPointCode) || !(formData !== null && formData !== void 0 && formData.day) || (formData === null || formData === void 0 ? void 0 : (_formData$day = formData.day) === null || _formData$day === void 0 ? void 0 : _formData$day.length) === 0 || !(formData !== null && formData !== void 0 && formData.arrivalTimeFpl) || !(formData !== null && formData !== void 0 && formData.departureTimeFpl) || !(formData !== null && formData !== void 0 && formData.arrivalFixedPoint) || !(formData !== null && formData !== void 0 && formData.departureFixedPoint) || !(formData !== null && formData !== void 0 && formData.returnFpl) || !(formData !== null && formData !== void 0 && formData.volume) || !(formData !== null && formData !== void 0 && formData.active);
+  const isFormValid = (formData === null || formData === void 0 ? void 0 : formData.fixedPointCode) && (formData === null || formData === void 0 ? void 0 : formData.day) && Array.isArray(formData === null || formData === void 0 ? void 0 : formData.day) && (formData === null || formData === void 0 ? void 0 : (_formData$day = formData.day) === null || _formData$day === void 0 ? void 0 : _formData$day.length) > 0 && (formData === null || formData === void 0 ? void 0 : formData.arrivalTimeFpl) && (formData === null || formData === void 0 ? void 0 : formData.departureTimeFpl) && (formData === null || formData === void 0 ? void 0 : formData.arrivalFixedPoint) && (formData === null || formData === void 0 ? void 0 : formData.departureFixedPoint) && (formData === null || formData === void 0 ? void 0 : formData.returnFpl) && (formData === null || formData === void 0 ? void 0 : formData.volume) !== "" && (formData === null || formData === void 0 ? void 0 : formData.volume) !== undefined && (formData === null || formData === void 0 ? void 0 : formData.volume) !== null && (formData === null || formData === void 0 ? void 0 : formData.active);
   const onFormSubmit = data => {
-    if (isFormDisabled) return;
     onSubmit({
       ...initialValues,
       ...data
@@ -3532,6 +3618,7 @@ const AddTripModal = ({
   }, t("WT_FIXED_POINT_CODE")), isFixedPointLoading ? /*#__PURE__*/React.createElement(Loader, null) : /*#__PURE__*/React.createElement(Controller, {
     control: control,
     name: "fixedPointCode",
+    defaultValue: defaultValues.fixedPointCode,
     render: props => /*#__PURE__*/React.createElement(CustomNameDropdown, {
       option: fixedPointOptions,
       optionKey: "displayLabel",
@@ -3590,7 +3677,7 @@ const AddTripModal = ({
     render: props => /*#__PURE__*/React.createElement(TextInput, {
       type: "time",
       value: props.value,
-      onChange: props.onChange,
+      onChange: e => props.onChange(e.target.value),
       onBlur: props.onBlur
     })
   })), /*#__PURE__*/React.createElement("div", {
@@ -3607,7 +3694,7 @@ const AddTripModal = ({
     render: props => /*#__PURE__*/React.createElement(TextInput, {
       type: "time",
       value: props.value,
-      onChange: props.onChange,
+      onChange: e => props.onChange(e.target.value),
       onBlur: props.onBlur
     })
   })), /*#__PURE__*/React.createElement("div", {
@@ -3624,7 +3711,7 @@ const AddTripModal = ({
     render: props => /*#__PURE__*/React.createElement(TextInput, {
       type: "time",
       value: props.value,
-      onChange: props.onChange,
+      onChange: e => props.onChange(e.target.value),
       onBlur: props.onBlur
     })
   })), /*#__PURE__*/React.createElement("div", {
@@ -3641,7 +3728,7 @@ const AddTripModal = ({
     render: props => /*#__PURE__*/React.createElement(TextInput, {
       type: "time",
       value: props.value,
-      onChange: props.onChange,
+      onChange: e => props.onChange(e.target.value),
       onBlur: props.onBlur
     })
   })), /*#__PURE__*/React.createElement("div", {
@@ -3658,7 +3745,7 @@ const AddTripModal = ({
     render: props => /*#__PURE__*/React.createElement(TextInput, {
       type: "time",
       value: props.value,
-      onChange: props.onChange,
+      onChange: e => props.onChange(e.target.value),
       onBlur: props.onBlur
     })
   })), /*#__PURE__*/React.createElement("div", {
@@ -3674,7 +3761,7 @@ const AddTripModal = ({
     defaultValue: defaultValues.volume,
     render: props => /*#__PURE__*/React.createElement(TextInput, {
       value: props.value,
-      onChange: props.onChange,
+      onChange: e => props.onChange(e.target.value),
       onBlur: props.onBlur
     })
   })), /*#__PURE__*/React.createElement("div", {
@@ -3710,7 +3797,7 @@ const AddTripModal = ({
     defaultValue: defaultValues.remarks,
     render: props => /*#__PURE__*/React.createElement(TextInput, {
       value: props.value,
-      onChange: props.onChange,
+      onChange: e => props.onChange(e.target.value),
       onBlur: props.onBlur
     })
   })))), /*#__PURE__*/React.createElement("div", {
@@ -3734,16 +3821,16 @@ const AddTripModal = ({
     }
   }, t("CS_COMMON_CANCEL")), /*#__PURE__*/React.createElement("button", {
     className: "button-save",
-    disabled: isFormDisabled,
+    disabled: !isFormValid,
     onClick: handleSubmit(onFormSubmit),
     style: {
       padding: "8px 20px",
-      background: isFormDisabled ? "#ccc" : "#1D4E7F",
+      background: !isFormValid ? "#ccc" : "#1D4E7F",
       color: "#fff",
       border: "none",
       borderRadius: "4px",
-      cursor: isFormDisabled ? "not-allowed" : "pointer",
-      opacity: isFormDisabled ? 0.7 : 1
+      cursor: !isFormValid ? "not-allowed" : "pointer",
+      opacity: !isFormValid ? 0.7 : 1
     }
   }, initialValues ? t("WT_UPDATE") : t("CS_COMMON_SAVE")))));
 };
@@ -3806,10 +3893,10 @@ const FixedPointScheduleManagement = ({
     const fromScheduleApi = (allSchedulesData === null || allSchedulesData === void 0 ? void 0 : allSchedulesData.fixedPointTimeTableDetails) || [];
     const combinedData = [...fromFpApi, ...fromScheduleApi];
     const points = combinedData.map(fp => {
-      var _fp$applicantDetail;
+      var _fp$applicantDetail, _fp$applicantDetail2, _fp$applicantDetail3;
       return {
-        label: fp.fixedPointCode || fp.name || ((_fp$applicantDetail = fp.applicantDetail) === null || _fp$applicantDetail === void 0 ? void 0 : _fp$applicantDetail.name) || fp.bookingId,
-        value: fp.fixedPointCode || fp.bookingId
+        label: fp.fixedPointCode || ((_fp$applicantDetail = fp.applicantDetail) === null || _fp$applicantDetail === void 0 ? void 0 : _fp$applicantDetail.fixedPointId) || fp.name || ((_fp$applicantDetail2 = fp.applicantDetail) === null || _fp$applicantDetail2 === void 0 ? void 0 : _fp$applicantDetail2.name) || fp.bookingId,
+        value: fp.fixedPointCode || ((_fp$applicantDetail3 = fp.applicantDetail) === null || _fp$applicantDetail3 === void 0 ? void 0 : _fp$applicantDetail3.fixedPointId) || fp.bookingId
       };
     }).filter(p => p.label && p.value);
     const uniquePoints = points.filter((v, i, a) => a.findIndex(t => t.value === v.value) === i);
@@ -3818,6 +3905,8 @@ const FixedPointScheduleManagement = ({
       value: "all"
     }, ...uniquePoints];
   }, [fixedPointData, allSchedulesData, t]);
+  console.log(fixedPoints, "fixedPoints");
+  console.log(fixedPointData, "fixedPointData");
   const {
     mutate: createSchedule
   } = Digit.Hooks.wt.useCreateFixedPointSchedule(tenantId);
@@ -3856,7 +3945,7 @@ const FixedPointScheduleManagement = ({
   const mapScheduleRows = React.useCallback((rows = []) => rows.map(item => ({
     scheduleId: item.systemAssignedScheduleId,
     fixedPointName: item.fixedPointName,
-    fixedPoint: item.fixedPointId,
+    fixedPoint: item.fixedPointCode || item.fixedPointId,
     day: item.day,
     freq: item.tripNo,
     arrToFpl: item.arrivalTimeToFpl,
@@ -4296,13 +4385,13 @@ const FixedPointScheduleManagement = ({
           var _d$toUpperCase;
           return (d === null || d === void 0 ? void 0 : (_d$toUpperCase = d.toUpperCase) === null || _d$toUpperCase === void 0 ? void 0 : _d$toUpperCase.call(d)) || d;
         }),
-        trip_no: Number(formData.frequencyNo),
+        trip_no: Number(formData.frequencyNo) || Number(formData.tripNo) || 1,
         arrival_time_to_fpl: formData.arrivalTimeFpl,
         departure_time_from_fpl: formData.departureTimeFpl,
         arrival_time_delivery_point: formData.arrivalFixedPoint,
         departure_time_delivery_point: formData.departureFixedPoint,
         time_of_arriving_back_fpl_after_delivery: formData.returnFpl,
-        volume_water_tobe_delivery: formData.volume,
+        volume_water_tobe_delivery: formData.volume || "0",
         active: ((_formData$active = formData.active) === null || _formData$active === void 0 ? void 0 : _formData$active.value) === "Yes" || formData.active === "Yes",
         is_enable: ((_formData$active2 = formData.active) === null || _formData$active2 === void 0 ? void 0 : _formData$active2.value) === "Yes" || formData.active === "Yes",
         remarks: formData.remarks,
@@ -4444,7 +4533,7 @@ const destinationIcon = new L.Icon({
 const Address = ({
   lat,
   lng,
-  fallback: _fallback = "Resolving area..."
+  fallback: _fallback = "Resolving area"
 }) => {
   const [address, setAddress] = useState(_fallback);
   useEffect(() => {
@@ -4462,17 +4551,32 @@ const Address = ({
 };
 const SOCKET_URL = "https://dev-djb.nitcon.in";
 const MapController = ({
-  selectedDriver
+  selectedDriver,
+  mapZoom,
+  mapCenter
 }) => {
   const map = useMap();
   useEffect(() => {
     if (selectedDriver !== null && selectedDriver !== void 0 && selectedDriver.lat && selectedDriver !== null && selectedDriver !== void 0 && selectedDriver.lng) {
-      map.setView([selectedDriver.lat, selectedDriver.lng], 15, {
+      map.setView([selectedDriver.lat, selectedDriver.lng], mapZoom || 15, {
         animate: true,
         duration: 1
       });
     }
   }, [selectedDriver, map]);
+  useEffect(() => {
+    if (Array.isArray(mapCenter) && mapCenter.length === 2) {
+      map.setView(mapCenter, mapZoom || 15, {
+        animate: true,
+        duration: 1
+      });
+    }
+  }, [mapCenter, map]);
+  useEffect(() => {
+    if (mapZoom) {
+      map.setZoom(mapZoom);
+    }
+  }, [mapZoom, map]);
   return null;
 };
 const useRoute = (start, end) => {
@@ -4485,7 +4589,7 @@ const useRoute = (start, end) => {
       setLoading(true);
       try {
         const response = await fetch(`https://router.project-osrm.org/route/v1/driving/${start.lng},${start.lat};${end.lng},${end.lat}?overview=full&geometries=geojson&steps=true`);
-        if (!response.ok) throw new Error("Failed to fetch route");
+        if (!response.ok) throw new Error(t("FAILED_TO_FETCH_ROUTE"));
         const data = await response.json();
         if (data.routes && data.routes[0]) {
           const route = data.routes[0];
@@ -4498,7 +4602,7 @@ const useRoute = (start, end) => {
           });
         }
       } catch (err) {
-        console.error("Error fetching route:", err);
+        console.error(t("Error fetching route:"), err);
         setError(err.message);
       } finally {
         setLoading(false);
@@ -4537,7 +4641,7 @@ const RouteLayer = ({
         boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
         zIndex: 1000
       }
-    }, "Loading route...");
+    }, t("LOADING_ROUTE"));
   }
   if (error) {
     return /*#__PURE__*/React.createElement("div", {
@@ -4552,7 +4656,7 @@ const RouteLayer = ({
         boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
         zIndex: 1000
       }
-    }, "Error loading route: ", error);
+    }, t("ERROR_LOADING_ROUTE"), error);
   }
   if (!routeData) return null;
   const renderRouteSegments = () => {
@@ -4642,9 +4746,9 @@ const RouteLayer = ({
   }, /*#__PURE__*/React.createElement("h4", {
     style: {
       margin: 0,
-      color: "#667eea"
+      color: "#1F5FA8"
     }
-  }, "Route Information"), /*#__PURE__*/React.createElement("button", {
+  }, t("ROUTE_INFORMATION")), /*#__PURE__*/React.createElement("button", {
     onClick: () => setShowSteps(false),
     style: {
       background: "none",
@@ -4658,14 +4762,14 @@ const RouteLayer = ({
     style: {
       marginBottom: "12px"
     }
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, "Total Distance:"), " ", (routeData.distance / 1000).toFixed(2), " km"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, "Est. Time:"), " ", Math.round(routeData.duration / 60), " minutes")), selectedStep && /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, t("TOTAL_DISTANCE"), ":"), " ", (routeData.distance / 1000).toFixed(2), " km"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, t("ESTIMATED_TIME"), ":"), " ", Math.round(routeData.duration / 60), " minutes")), selectedStep && /*#__PURE__*/React.createElement("div", {
     style: {
       padding: "8px",
       background: "#f5f5f5",
       borderRadius: "4px",
       marginBottom: "8px"
     }
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, "Current Step:"), " ", selectedStep.maneuver.type), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, "Instruction:"), " ", selectedStep.maneuver.instruction || selectedStep.name), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, "Distance:"), " ", (selectedStep.distance / 1000).toFixed(2), " km"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, "Duration:"), " ", Math.round(selectedStep.duration / 60), " min")), showSteps && routeData.legs && /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, t("CURRENT_STEP"), ":"), " ", selectedStep.maneuver.type), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, t("INSTRUCTION"), ":"), " ", selectedStep.maneuver.instruction || selectedStep.name), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, t("DISTANCE"), ":"), " ", (selectedStep.distance / 1000).toFixed(2), " km"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, t("DURATION"), ":"), " ", Math.round(selectedStep.duration / 60), " min")), showSteps && routeData.legs && /*#__PURE__*/React.createElement("div", {
     style: {
       maxHeight: "200px",
       overflowY: "auto"
@@ -4675,7 +4779,7 @@ const RouteLayer = ({
       margin: "8px 0",
       color: "#666"
     }
-  }, "Turn-by-turn directions:"), routeData.legs[0].steps.map((step, idx) => /*#__PURE__*/React.createElement("div", {
+  }, t("TURN_BY_TURN_DIRECTIONS"), ":"), routeData.legs[0].steps.map((step, idx) => /*#__PURE__*/React.createElement("div", {
     key: idx,
     style: {
       padding: "8px",
@@ -4697,7 +4801,7 @@ const RouteLayer = ({
       width: "20px",
       height: "20px",
       borderRadius: "50%",
-      background: "#667eea",
+      background: "#1F5FA8",
       color: "white",
       display: "flex",
       alignItems: "center",
@@ -4735,12 +4839,12 @@ const RouteMarkers = ({
           className: "distance-marker",
           html: `<div style="
               background: white;
-              border: 2px solid #667eea;
+              border: 2px solid #1F5FA8;
               border-radius: 12px;
               padding: 2px 6px;
               font-size: 10px;
               font-weight: bold;
-              color: #667eea;
+              color: #1F5FA8;
               white-space: nowrap;
             ">${(i / 1000).toFixed(0)} km</div>`,
           iconSize: [40, 20],
@@ -4780,6 +4884,9 @@ const DriverCard = ({
   onClick,
   vendorList
 }) => {
+  const {
+    t
+  } = useTranslation();
   const [currentAddress, setCurrentAddress] = useState("Resolving area...");
   const [deliveryAddress, setDeliveryAddress] = useState("Resolving area...");
   const lastResolvedPos = useRef({
@@ -4822,190 +4929,128 @@ const DriverCard = ({
     };
     resolveDest();
   }, [driver.deliveryLat, driver.deliveryLng]);
-  const vehicleNumber = useMemo(() => {
-    if (!vendorList || !vendorList.length) return null;
+  const driverDetails = useMemo(() => {
+    if (!vendorList || !vendorList.length) return {
+      name: "Unknown",
+      vehicle: "N/A"
+    };
     for (const vendor of vendorList) {
-      if (!vendor.drivers || !vendor.drivers.length) continue;
-      const driverMatch = vendor.drivers.find(d => {
-        var _d$owner, _d$owner2, _d$owner3, _d$owner4;
-        return ((_d$owner = d.owner) === null || _d$owner === void 0 ? void 0 : _d$owner.mobileNumber) === driver.driverId || ((_d$owner2 = d.owner) === null || _d$owner2 === void 0 ? void 0 : _d$owner2.uuid) === driver.driverId || d.id === driver.driverId || String((_d$owner3 = d.owner) === null || _d$owner3 === void 0 ? void 0 : _d$owner3.mobileNumber) === String(driver.driverId) || String((_d$owner4 = d.owner) === null || _d$owner4 === void 0 ? void 0 : _d$owner4.uuid) === String(driver.driverId);
+      var _vendor$drivers;
+      const match = (_vendor$drivers = vendor.drivers) === null || _vendor$drivers === void 0 ? void 0 : _vendor$drivers.find(d => {
+        var _d$owner, _d$owner2;
+        return d.id === driver.driverId || ((_d$owner = d.owner) === null || _d$owner === void 0 ? void 0 : _d$owner.mobileNumber) === driver.driverId || ((_d$owner2 = d.owner) === null || _d$owner2 === void 0 ? void 0 : _d$owner2.uuid) === driver.driverId;
       });
-      if (driverMatch && vendor.vehicles && vendor.vehicles.length > 0) {
-        var _vendor$vehicles$, _vendor$vehicles$2;
-        return ((_vendor$vehicles$ = vendor.vehicles[0]) === null || _vendor$vehicles$ === void 0 ? void 0 : _vendor$vehicles$.registrationNumber) || ((_vendor$vehicles$2 = vendor.vehicles[0]) === null || _vendor$vehicles$2 === void 0 ? void 0 : _vendor$vehicles$2.vehicleNo) || null;
+      if (match) {
+        var _match$owner, _vendor$vehicles, _vendor$vehicles$;
+        return {
+          name: ((_match$owner = match.owner) === null || _match$owner === void 0 ? void 0 : _match$owner.name) || "Unknown",
+          vehicle: ((_vendor$vehicles = vendor.vehicles) === null || _vendor$vehicles === void 0 ? void 0 : (_vendor$vehicles$ = _vendor$vehicles[0]) === null || _vendor$vehicles$ === void 0 ? void 0 : _vendor$vehicles$.registrationNumber) || "N/A"
+        };
       }
     }
-    return null;
+    return {
+      name: "Unknown",
+      vehicle: "N/A"
+    };
   }, [vendorList, driver.driverId]);
-  const calculateETA = () => {
-    if (!driver.lat || !driver.lng || !driver.deliveryLat || !driver.deliveryLng) return null;
-    const distance = calculateDistance$1(driver.lat, driver.lng, driver.deliveryLat, driver.deliveryLng);
-    const minutes = Math.round(distance / 30 * 60);
-    return minutes;
-  };
-  const eta = calculateETA();
   return /*#__PURE__*/React.createElement("div", {
     onClick: onClick,
     style: {
       padding: "16px",
-      marginBottom: "12px",
       borderRadius: "12px",
-      background: isSelected ? "#e3f2fd" : "#ffffff",
-      border: `2px solid ${isSelected ? "#2196f3" : "#e0e0e0"}`,
-      boxShadow: isSelected ? "0 4px 12px rgba(33, 150, 243, 0.2)" : "0 2px 8px rgba(0, 0, 0, 0.05)",
+      background: isSelected ? "#f0f4ff" : "white",
+      border: `2px solid ${isSelected ? "#1F5FA8" : "#f0f0f0"}`,
       cursor: "pointer",
-      transition: "all 0.2s ease",
       position: "relative",
-      overflow: "hidden"
+      transition: "all 0.2s ease"
     }
   }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      position: "absolute",
-      top: 0,
-      left: 0,
-      right: 0,
-      height: "4px",
-      background: driver.isOnline ? "linear-gradient(90deg, #4caf50, #81c784)" : "linear-gradient(90deg, #f44336, #e57373)"
-    }
-  }), /*#__PURE__*/React.createElement("div", {
     style: {
       display: "flex",
-      alignItems: "center",
+      gap: "12px",
       marginBottom: "12px"
     }
   }, /*#__PURE__*/React.createElement("div", {
     style: {
       width: "40px",
       height: "40px",
-      borderRadius: "50%",
-      background: driver.isOnline ? "linear-gradient(135deg, #4caf50, #81c784)" : "linear-gradient(135deg, #9e9e9e, #bdbdbd)",
+      borderRadius: "8px",
+      background: "#f0f2f5",
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
-      color: "white",
-      fontWeight: "bold",
-      fontSize: "16px",
-      marginRight: "12px",
-      flexShrink: 0
-    }
-  }, driver.driverId.charAt(0).toUpperCase()), /*#__PURE__*/React.createElement("div", {
-    style: {
-      flex: 1,
-      minWidth: 0
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      fontWeight: "600",
-      fontSize: "16px",
-      color: "#667eea",
-      marginBottom: "4px",
-      overflow: "hidden",
-      textOverflow: "ellipsis",
-      whiteSpace: "nowrap"
+      fontSize: "20px"
     }
-  }, "Driver #", driver.driverId.substring(0, 8), "..."), /*#__PURE__*/React.createElement(StatusBadge, {
-    isOnline: driver.isOnline
-  }))), driver.lat && driver.lng && /*#__PURE__*/React.createElement("div", {
+  }, "\uD83D\uDC64"), /*#__PURE__*/React.createElement("div", {
     style: {
-      marginBottom: "8px"
+      flex: 1
     }
   }, /*#__PURE__*/React.createElement("div", {
     style: {
-      fontSize: "12px",
-      color: "#666",
-      marginBottom: "4px"
-    }
-  }, "Current Location"), /*#__PURE__*/React.createElement("div", {
-    style: {
-      fontSize: "13px",
-      fontWeight: "500",
-      color: "#333",
       display: "flex",
-      alignItems: "center",
-      gap: "4px"
+      justifyContent: "space-between",
+      alignItems: "flex-start"
     }
-  }, /*#__PURE__*/React.createElement("span", {
-    title: `${driver.lat.toFixed(6)}, ${driver.lng.toFixed(6)}`
-  }, currentAddress))), driver.deliveryLat && driver.deliveryLng && /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
     style: {
-      marginBottom: "8px"
+      fontWeight: "700",
+      fontSize: "14px",
+      color: "#0d47a1"
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, "DRV-", driver.driverId.substring(0, 4).toUpperCase()), /*#__PURE__*/React.createElement("div", {
     style: {
-      fontSize: "12px",
-      color: "#666",
-      marginBottom: "4px"
+      fontSize: "11px",
+      color: "#666"
     }
-  }, "Delivery Destination"), /*#__PURE__*/React.createElement("div", {
+  }, driverDetails.name, " \u2022 ", driverDetails.vehicle)), /*#__PURE__*/React.createElement("div", {
     style: {
-      fontSize: "13px",
-      fontWeight: "500",
-      color: "#333",
-      display: "flex",
-      alignItems: "center",
-      gap: "4px"
+      fontSize: "10px",
+      fontWeight: "700",
+      padding: "2px 8px",
+      borderRadius: "4px",
+      background: driver.isOnline ? "#e8f5e9" : "#ffebee",
+      color: driver.isOnline ? "#2e7d32" : "#c62828"
     }
-  }, /*#__PURE__*/React.createElement("span", {
-    title: `${driver.deliveryLat.toFixed(6)}, ${driver.deliveryLng.toFixed(6)}`
-  }, deliveryAddress))), eta !== null && /*#__PURE__*/React.createElement("div", {
+  }, driver.isOnline ? "ONLINE" : "OFFLINE")))), /*#__PURE__*/React.createElement("div", {
     style: {
-      marginTop: "8px",
-      padding: "8px",
-      background: "#f5f5f5",
-      borderRadius: "6px",
-      display: "flex",
-      justifyContent: "space-between",
-      alignItems: "center",
-      flexWrap: "wrap",
-      gap: "8px"
+      display: "grid",
+      gridTemplateColumns: "1fr 1fr",
+      gap: "12px"
     }
   }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
     style: {
-      fontSize: "11px",
-      color: "#666"
-    }
-  }, "Est. Arrival"), /*#__PURE__*/React.createElement("div", {
-    style: {
-      fontSize: "14px",
+      fontSize: "10px",
       fontWeight: "600",
-      color: "#667eea"
+      color: "#aaa",
+      marginBottom: "2px"
     }
-  }, eta, " min")), driver.speed && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+  }, t("CURRENT_LOCATION")), /*#__PURE__*/React.createElement("div", {
     style: {
       fontSize: "11px",
-      color: "#666"
+      fontWeight: "700",
+      color: "#333",
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis"
     }
-  }, "Speed"), /*#__PURE__*/React.createElement("div", {
+  }, currentAddress))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
     style: {
-      fontSize: "14px",
+      fontSize: "10px",
       fontWeight: "600",
-      color: "#4caf50"
+      color: "#aaa",
+      marginBottom: "2px"
     }
-  }, Math.round(driver.speed * 3.6), " km/h"))), /*#__PURE__*/React.createElement("div", {
+  }, t("DESTINATION")), /*#__PURE__*/React.createElement("div", {
     style: {
-      marginTop: "12px",
       fontSize: "11px",
-      color: "#999",
-      borderTop: "1px solid #eee",
-      paddingTop: "8px",
-      display: "grid",
-      gridTemplateColumns: "1fr 1fr",
-      gap: "4px"
-    }
-  }, vehicleNumber && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-    style: {
-      color: "#555"
-    }
-  }, "Vehicle"), /*#__PURE__*/React.createElement("span", {
-    style: {
-      fontWeight: "600",
-      color: "#667eea"
+      fontWeight: "700",
+      color: "#333",
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis"
     }
-  }, vehicleNumber)), driver.accuracy && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, "Accuracy"), /*#__PURE__*/React.createElement("span", null, Math.round(driver.accuracy), "m")), driver.heading && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, "Heading"), /*#__PURE__*/React.createElement("span", null, Math.round(driver.heading), "\xB0")), driver.lastSeen && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, "Last seen"), /*#__PURE__*/React.createElement("span", null, new Date(driver.lastSeen).toLocaleTimeString()))));
+  }, deliveryAddress))));
 };
-function calculateDistance$1(lat1, lon1, lat2, lon2) {
-  return calculateDistance(lat1, lon1, lat2, lon2);
-}
 function LiveTrackingSystem() {
   const {
     t
@@ -5059,11 +5104,11 @@ function LiveTrackingSystem() {
       console.log("=== VENDOR DEBUG ===");
       console.log("Vendor[0] vehicles:", (_vendorOptions$ = vendorOptions[0]) === null || _vendorOptions$ === void 0 ? void 0 : _vendorOptions$.vehicles);
       console.log("Vendor[0] drivers:", (_vendorOptions$2 = vendorOptions[0]) === null || _vendorOptions$2 === void 0 ? void 0 : (_vendorOptions$2$driv = _vendorOptions$2.drivers) === null || _vendorOptions$2$driv === void 0 ? void 0 : _vendorOptions$2$driv.map(d => {
-        var _d$owner5, _d$owner6;
+        var _d$owner3, _d$owner4;
         return {
           id: d.id,
-          mobile: (_d$owner5 = d.owner) === null || _d$owner5 === void 0 ? void 0 : _d$owner5.mobileNumber,
-          uuid: (_d$owner6 = d.owner) === null || _d$owner6 === void 0 ? void 0 : _d$owner6.uuid
+          mobile: (_d$owner3 = d.owner) === null || _d$owner3 === void 0 ? void 0 : _d$owner3.mobileNumber,
+          uuid: (_d$owner4 = d.owner) === null || _d$owner4 === void 0 ? void 0 : _d$owner4.uuid
         };
       }));
       console.log("Socket driverId example:", Object.keys(drivers)[0]);
@@ -5161,18 +5206,18 @@ function LiveTrackingSystem() {
     const matchesFillingPoint = !selectedFillingPoint || (() => {
       if (!vendorOptions || !vendorOptions.length) return false;
       return vendorOptions.some(vendor => {
-        var _vendor$fillingPoint2, _vendor$drivers;
+        var _vendor$fillingPoint2, _vendor$drivers2;
         if ((vendor === null || vendor === void 0 ? void 0 : (_vendor$fillingPoint2 = vendor.fillingPoint) === null || _vendor$fillingPoint2 === void 0 ? void 0 : _vendor$fillingPoint2.id) !== (selectedFillingPoint === null || selectedFillingPoint === void 0 ? void 0 : selectedFillingPoint.id)) return false;
-        return (_vendor$drivers = vendor.drivers) === null || _vendor$drivers === void 0 ? void 0 : _vendor$drivers.some(d => {
-          var _d$owner7, _d$owner8, _d$owner9, _d$owner0;
-          return ((_d$owner7 = d.owner) === null || _d$owner7 === void 0 ? void 0 : _d$owner7.mobileNumber) === driver.driverId || ((_d$owner8 = d.owner) === null || _d$owner8 === void 0 ? void 0 : _d$owner8.uuid) === driver.driverId || d.id === driver.driverId || String((_d$owner9 = d.owner) === null || _d$owner9 === void 0 ? void 0 : _d$owner9.mobileNumber) === String(driver.driverId) || String((_d$owner0 = d.owner) === null || _d$owner0 === void 0 ? void 0 : _d$owner0.uuid) === String(driver.driverId);
+        return (_vendor$drivers2 = vendor.drivers) === null || _vendor$drivers2 === void 0 ? void 0 : _vendor$drivers2.some(d => {
+          var _d$owner5, _d$owner6, _d$owner7, _d$owner8;
+          return ((_d$owner5 = d.owner) === null || _d$owner5 === void 0 ? void 0 : _d$owner5.mobileNumber) === driver.driverId || ((_d$owner6 = d.owner) === null || _d$owner6 === void 0 ? void 0 : _d$owner6.uuid) === driver.driverId || d.id === driver.driverId || String((_d$owner7 = d.owner) === null || _d$owner7 === void 0 ? void 0 : _d$owner7.mobileNumber) === String(driver.driverId) || String((_d$owner8 = d.owner) === null || _d$owner8 === void 0 ? void 0 : _d$owner8.uuid) === String(driver.driverId);
         });
       });
     })();
     const matchesVendor = !selectedVendor || (_selectedVendor$drive => {
       const vendorDriverIds = ((_selectedVendor$drive = selectedVendor.drivers) === null || _selectedVendor$drive === void 0 ? void 0 : _selectedVendor$drive.map(d => {
-        var _d$owner1, _d$owner10, _d$owner11, _d$owner12;
-        return [(_d$owner1 = d.owner) === null || _d$owner1 === void 0 ? void 0 : _d$owner1.mobileNumber, (_d$owner10 = d.owner) === null || _d$owner10 === void 0 ? void 0 : _d$owner10.uuid, d.id, String((_d$owner11 = d.owner) === null || _d$owner11 === void 0 ? void 0 : _d$owner11.mobileNumber), String((_d$owner12 = d.owner) === null || _d$owner12 === void 0 ? void 0 : _d$owner12.uuid)];
+        var _d$owner9, _d$owner0, _d$owner1, _d$owner10;
+        return [(_d$owner9 = d.owner) === null || _d$owner9 === void 0 ? void 0 : _d$owner9.mobileNumber, (_d$owner0 = d.owner) === null || _d$owner0 === void 0 ? void 0 : _d$owner0.uuid, d.id, String((_d$owner1 = d.owner) === null || _d$owner1 === void 0 ? void 0 : _d$owner1.mobileNumber), String((_d$owner10 = d.owner) === null || _d$owner10 === void 0 ? void 0 : _d$owner10.uuid)];
       }).flat().filter(Boolean)) || [];
       return vendorDriverIds.some(id => driver.driverId === id);
     })();
@@ -5187,188 +5232,218 @@ function LiveTrackingSystem() {
   return /*#__PURE__*/React.createElement("div", {
     style: {
       display: "flex",
+      flexDirection: "column",
       height: "100vh",
       width: "100%",
       fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, sans-serif",
-      position: "relative",
-      overflow: "hidden"
+      background: "#f0f2f5",
+      padding: "16px",
+      boxSizing: "border-box"
     }
-  }, isMobile && /*#__PURE__*/React.createElement("button", {
-    onClick: toggleSidebar,
+  }, /*#__PURE__*/React.createElement("div", {
     style: {
-      position: "absolute",
-      top: "10px",
-      left: "10px",
-      zIndex: 2000,
-      background: "#667eea",
-      color: "white",
-      border: "none",
-      borderRadius: "8px",
-      padding: "10px 16px",
-      fontSize: "14px",
-      fontWeight: "500",
-      cursor: "pointer",
-      boxShadow: "0 2px 8px rgba(0,0,0,0.2)",
       display: "flex",
+      justifyContent: "space-between",
       alignItems: "center",
-      gap: "8px"
-    }
-  }, /*#__PURE__*/React.createElement("span", {
-    style: {
-      fontSize: "20px"
+      marginBottom: "16px",
+      background: "white",
+      padding: "16px 24px",
+      borderRadius: "12px",
+      boxShadow: "0 2px 8px rgba(0,0,0,0.05)",
+      border: "2px solid #1F5FA844"
     }
-  }, "\u2630"), showSidebar ? "Hide List" : "Show Drivers"), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     style: {
-      width: isMobile ? showSidebar ? "100%" : "0" : "380px",
-      height: "100%",
-      borderRight: isMobile ? "none" : "1px solid #e0e0e0",
       display: "flex",
-      flexDirection: "column",
-      background: "#ffffff",
-      boxShadow: isMobile ? showSidebar ? "0 0 20px rgba(0,0,0,0.2)" : "none" : "2px 0 8px rgba(0, 0, 0, 0.05)",
-      position: isMobile ? "absolute" : "relative",
-      top: 0,
-      left: 0,
-      zIndex: 1500,
-      transition: "all 0.3s ease-in-out",
-      overflow: showSidebar ? "visible" : "hidden",
-      ...(isMobile && !showSidebar && {
-        width: "0",
-        opacity: 0,
-        pointerEvents: "none"
-      })
-    }
-  }, showSidebar && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    style: {
-      padding: isMobile ? "16px" : "24px",
-      background: "linear-gradient(135deg, #667eea, #0d47a1)",
-      color: "white"
+      flexDirection: "column"
     }
-  }, isMobile && /*#__PURE__*/React.createElement("button", {
-    onClick: toggleSidebar,
+  }, /*#__PURE__*/React.createElement("div", {
     style: {
-      position: "absolute",
-      top: "10px",
-      right: "10px",
-      background: "rgba(255,255,255,0.2)",
-      border: "none",
-      color: "white",
-      fontSize: "20px",
-      cursor: "pointer",
-      width: "30px",
-      height: "30px",
-      borderRadius: "4px",
       display: "flex",
       alignItems: "center",
-      justifyContent: "center"
+      gap: "12px"
     }
-  }, "\u2715"), /*#__PURE__*/React.createElement("h2", {
+  }, /*#__PURE__*/React.createElement("h1", {
     style: {
-      margin: "0 0 8px 0",
-      fontSize: isMobile ? "20px" : "24px",
-      fontWeight: "600",
-      letterSpacing: "-0.5px"
+      margin: 0,
+      fontSize: "24px",
+      fontWeight: "700",
+      color: "#0d47a1"
     }
-  }, "Live Driver Tracking"), /*#__PURE__*/React.createElement("div", {
+  }, t("WT_LIVE_DRIVER_TRACKING")), /*#__PURE__*/React.createElement("div", {
     style: {
       display: "flex",
       alignItems: "center",
-      gap: "8px",
-      fontSize: "14px",
-      opacity: 0.9
+      gap: "6px",
+      background: "#e8f5e9",
+      color: "#2e7d32",
+      padding: "4px 12px",
+      borderRadius: "20px",
+      fontSize: "12px",
+      fontWeight: "700",
+      border: "1px solid #c8e6c9"
     }
   }, /*#__PURE__*/React.createElement("span", {
     style: {
-      display: "inline-block",
-      width: "10px",
-      height: "10px",
+      width: "8px",
+      height: "8px",
       borderRadius: "50%",
       backgroundColor: isConnected ? "#4caf50" : "#f44336",
-      animation: isConnected ? "pulse 2s infinite" : "none"
-    }
-  }), /*#__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"
+      boxShadow: isConnected ? "0 0 8px #4caf50" : "none"
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }), isConnected ? "CONNECTED" : "DISCONNECTED")), /*#__PURE__*/React.createElement("p", {
     style: {
-      textAlign: "center"
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      fontSize: isMobile ? "10px" : "11px",
+      margin: "4px 0 0 0",
+      fontSize: "14px",
       color: "#666"
     }
-  }, "Total"), /*#__PURE__*/React.createElement("div", {
+  }, t("REAL_TIME_TELEMETRY_AND_FLEET_COORDINATION"))), /*#__PURE__*/React.createElement("div", {
     style: {
-      fontSize: isMobile ? "16px" : "20px",
-      fontWeight: "bold",
-      color: "#667eea"
+      display: "flex",
+      gap: "12px"
     }
-  }, Object.keys(drivers).length)), /*#__PURE__*/React.createElement("div", {
+  }, [{
+    label: t("TOTAL_FLEET"),
+    value: Object.keys(drivers).length,
+    color: "#0d47a1"
+  }, {
+    label: t("ONLINE"),
+    value: onlineCount,
+    color: "#2e7d32"
+  }, {
+    label: t("OFFLINE"),
+    value: offlineCount,
+    color: "#c62828"
+  }, {
+    label: t("ACTIVE"),
+    value: activeDeliveries,
+    color: "#0d47a1"
+  }].map((stat, idx) => /*#__PURE__*/React.createElement("div", {
+    key: idx,
     style: {
-      textAlign: "center"
+      background: "#f8f9fa",
+      padding: "8px 16px",
+      borderRadius: "8px",
+      minWidth: "100px",
+      display: "flex",
+      flexDirection: "column",
+      border: "1px solid #e0e0e0"
     }
   }, /*#__PURE__*/React.createElement("div", {
     style: {
-      fontSize: isMobile ? "10px" : "11px",
-      color: "#666"
+      fontSize: "10px",
+      fontWeight: "600",
+      color: "#888",
+      marginBottom: "4px"
     }
-  }, "Online"), /*#__PURE__*/React.createElement("div", {
+  }, stat.label), /*#__PURE__*/React.createElement("div", {
     style: {
-      fontSize: isMobile ? "16px" : "20px",
-      fontWeight: "bold",
-      color: "#4caf50"
+      fontSize: "20px",
+      fontWeight: "700",
+      color: stat.color
     }
-  }, onlineCount)), /*#__PURE__*/React.createElement("div", {
+  }, stat.value))))), /*#__PURE__*/React.createElement("div", {
     style: {
-      textAlign: "center"
+      display: "flex",
+      flex: 1,
+      gap: "16px",
+      overflow: "hidden"
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, isMobile && /*#__PURE__*/React.createElement("button", {
+    onClick: toggleSidebar,
     style: {
-      fontSize: isMobile ? "10px" : "11px",
-      color: "#666"
+      position: "absolute",
+      top: "80px",
+      left: "20px",
+      zIndex: 2000,
+      background: "#1F5FA8",
+      color: "white",
+      border: "none",
+      borderRadius: "8px",
+      padding: "8px 12px",
+      fontSize: "12px",
+      cursor: "pointer",
+      boxShadow: "0 2px 8px rgba(0,0,0,0.2)"
     }
-  }, "Offline"), /*#__PURE__*/React.createElement("div", {
+  }, showSidebar ? "Close" : "Menu"), /*#__PURE__*/React.createElement("div", {
     style: {
-      fontSize: isMobile ? "16px" : "20px",
-      fontWeight: "bold",
-      color: "#f44336"
+      width: isMobile ? showSidebar ? "100%" : "0" : "360px",
+      height: "100%",
+      display: "flex",
+      flexDirection: "column",
+      background: "transparent",
+      position: isMobile ? "absolute" : "relative",
+      top: 0,
+      left: 0,
+      zIndex: 1500,
+      transition: "all 0.3s ease-in-out",
+      ...(isMobile && !showSidebar && {
+        width: "0",
+        opacity: 0,
+        pointerEvents: "none"
+      })
     }
-  }, offlineCount)), /*#__PURE__*/React.createElement("div", {
+  }, showSidebar && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     style: {
-      textAlign: "center"
+      padding: "20px",
+      background: "white",
+      borderRadius: "12px",
+      display: "flex",
+      flexDirection: "column",
+      height: "100%",
+      boxShadow: "0 2px 8px rgba(0,0,0,0.05)",
+      border: "1px solid #e0e0e0"
     }
   }, /*#__PURE__*/React.createElement("div", {
     style: {
-      fontSize: isMobile ? "10px" : "11px",
-      color: "#666"
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      marginBottom: "16px"
     }
-  }, "Active"), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("h3", {
     style: {
-      fontSize: isMobile ? "16px" : "20px",
-      fontWeight: "bold",
-      color: "#ff9800"
+      margin: 0,
+      fontSize: "14px",
+      fontWeight: "700",
+      color: "#888",
+      letterSpacing: "1px"
     }
-  }, activeDeliveries))), /*#__PURE__*/React.createElement("div", {
+  }, t("WT_FILTER_FLEET")), /*#__PURE__*/React.createElement("button", {
+    onClick: () => {
+      setSelectedFillingPoint(null);
+      setSelectedVendor(null);
+      setSearchTerm("");
+      setFilterOnline("all");
+    },
     style: {
-      padding: isMobile ? "12px" : "16px",
-      borderBottom: "1px solid #e0e0e0",
-      background: "#fafafa"
+      background: "none",
+      border: "none",
+      color: "#1F5FA8",
+      fontSize: "12px",
+      fontWeight: "700",
+      cursor: "pointer"
+    }
+  }, t("WT_RESET_ALL"))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "16px",
+      marginBottom: "20px"
     }
   }, /*#__PURE__*/React.createElement("div", {
     style: {
       display: "flex",
       flexDirection: "column",
-      gap: "8px",
-      marginBottom: "12px"
+      gap: "6px"
     }
-  }, /*#__PURE__*/React.createElement(Dropdown, {
+  }, /*#__PURE__*/React.createElement("label", {
+    style: {
+      fontSize: "12px",
+      fontWeight: "700",
+      color: "#888"
+    }
+  }, t("WT_SELECT_FILLING_POINT")), /*#__PURE__*/React.createElement(Dropdown, {
     t: t,
     option: fillingPointOptions,
     optionKey: "fillingPointName",
@@ -5377,10 +5452,21 @@ function LiveTrackingSystem() {
     placeholder: t("WT_SELECT_FILLING_POINT"),
     style: {
       width: "100%",
-      margin: 0,
-      padding: 0
+      margin: 0
     }
-  }), /*#__PURE__*/React.createElement(Dropdown, {
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "6px"
+    }
+  }, /*#__PURE__*/React.createElement("label", {
+    style: {
+      fontSize: "12px",
+      fontWeight: "700",
+      color: "#888"
+    }
+  }, t("WT_SELECT_VENDOR")), /*#__PURE__*/React.createElement(Dropdown, {
     t: t,
     option: filteredVendorOptions,
     optionKey: "name",
@@ -5389,55 +5475,78 @@ function LiveTrackingSystem() {
     placeholder: t("WT_SELECT_VENDOR"),
     style: {
       width: "100%",
-      margin: 0,
-      padding: 0
+      margin: 0
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "6px"
+    }
+  }, /*#__PURE__*/React.createElement("label", {
+    style: {
+      fontSize: "10px",
+      fontWeight: "700",
+      color: "#888"
+    }
+  }, t("WT_SEARCH_DRIVER_BY_ID")), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "relative"
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      position: "absolute",
+      left: "12px",
+      top: "50%",
+      transform: "translateY(-50%)",
+      color: "#888"
     }
-  })), /*#__PURE__*/React.createElement("input", {
+  }, "\uD83D\uDD0D"), /*#__PURE__*/React.createElement("input", {
     type: "text",
-    placeholder: "Search by driver ID...",
+    placeholder: t("WT_SEARCH_DRIVER_BY_ID"),
     value: searchTerm,
     onChange: e => setSearchTerm(e.target.value),
     style: {
       width: "100%",
-      padding: isMobile ? "10px" : "12px",
+      padding: "10px 10px 10px 36px",
       border: "1px solid #e0e0e0",
       borderRadius: "8px",
-      fontSize: isMobile ? "14px" : "14px",
-      marginBottom: "12px",
+      fontSize: "12px",
       outline: "none",
-      transition: "border-color 0.2s",
+      background: "#f8f9fa",
       boxSizing: "border-box"
-    },
-    onFocus: e => e.target.style.borderColor = "#667eea",
-    onBlur: e => e.target.style.borderColor = "#e0e0e0"
-  }), /*#__PURE__*/React.createElement("div", {
+    }
+  })))), /*#__PURE__*/React.createElement("div", {
     style: {
       display: "flex",
-      gap: "8px",
-      marginBottom: "8px"
+      justifyContent: "space-between",
+      alignItems: "center",
+      marginBottom: "12px"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      gap: "8px"
     }
   }, ["all", "online", "offline"].map(filter => /*#__PURE__*/React.createElement("button", {
     key: filter,
     onClick: () => setFilterOnline(filter),
     style: {
-      flex: 1,
-      padding: isMobile ? "6px" : "8px",
-      border: "1px solid #e0e0e0",
-      borderRadius: "6px",
-      background: filterOnline === filter ? "#667eea" : "white",
-      color: filterOnline === filter ? "white" : "#333",
+      padding: "4px 12px",
+      borderRadius: "4px",
+      background: filterOnline === filter ? "#1F5FA8" : "transparent",
+      color: filterOnline === filter ? "white" : "#666",
+      border: filterOnline === filter ? "none" : "1px solid #e0e0e0",
       cursor: "pointer",
-      fontSize: isMobile ? "11px" : "12px",
-      fontWeight: "500",
-      textTransform: "capitalize",
-      transition: "all 0.2s"
+      fontSize: "12px",
+      fontWeight: "600",
+      textTransform: "capitalize"
     }
   }, filter))), /*#__PURE__*/React.createElement("div", {
     style: {
       display: "flex",
       alignItems: "center",
-      gap: "8px",
-      marginTop: "8px"
+      gap: "6px"
     }
   }, /*#__PURE__*/React.createElement("input", {
     type: "checkbox",
@@ -5445,59 +5554,49 @@ function LiveTrackingSystem() {
     checked: showRoutes,
     onChange: e => setShowRoutes(e.target.checked),
     style: {
-      cursor: "pointer",
-      width: "16px",
-      height: "16px"
+      cursor: "pointer"
     }
   }), /*#__PURE__*/React.createElement("label", {
     htmlFor: "showRoutes",
     style: {
-      fontSize: isMobile ? "12px" : "13px",
-      color: "#333",
+      fontSize: "12px",
+      color: "#666",
       cursor: "pointer"
     }
-  }, "Show delivery routes"))), /*#__PURE__*/React.createElement("div", {
+  }, "Routes"))), /*#__PURE__*/React.createElement("div", {
     style: {
       flex: 1,
       overflowY: "auto",
-      padding: isMobile ? "12px" : "16px",
-      background: "#f5f5f5"
-    }
-  }, 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"
+      padding: "4px",
+      marginTop: "8px",
+      display: "flex",
+      flexDirection: "column",
+      gap: "12px"
     }
-  }, "\uD83D\uDE97"), /*#__PURE__*/React.createElement("p", {
+  }, filteredDrivers.length === 0 ? /*#__PURE__*/React.createElement("div", {
     style: {
-      fontSize: isMobile ? "14px" : "16px",
-      margin: 0
+      textAlign: "center",
+      padding: "40px 20px",
+      color: "#999"
     }
-  }, Object.keys(drivers).length === 0 ? "No drivers available" : "No drivers match your filters")) : filteredDrivers.map(driver => /*#__PURE__*/React.createElement(DriverCard, {
+  }, /*#__PURE__*/React.createElement("p", null, t("WT_NO_DRIVERS_FOUND"))) : filteredDrivers.map(driver => /*#__PURE__*/React.createElement(DriverCard, {
     key: driver.driverId,
     driver: driver,
     isSelected: (selectedDriver === null || selectedDriver === void 0 ? void 0 : selectedDriver.driverId) === driver.driverId,
     vendorList: vendorOptions,
     onClick: () => {
       setSelectedDriver(driver);
-      if (isMobile) {
-        setShowSidebar(false);
-      }
+      if (isMobile) setShowSidebar(false);
     }
-  }))))), /*#__PURE__*/React.createElement("div", {
+  })))))), /*#__PURE__*/React.createElement("div", {
     style: {
       flex: 1,
       position: "relative",
-      width: isMobile ? "100%" : "calc(100% - 380px)",
-      height: "100%"
+      background: "white",
+      borderRadius: "12px",
+      overflow: "hidden",
+      boxShadow: "0 2px 8px rgba(0,0,0,0.05)",
+      border: "1px solid #e0e0e0"
     }
   }, /*#__PURE__*/React.createElement(MapContainer, {
     center: mapCenter,
@@ -5511,8 +5610,19 @@ function LiveTrackingSystem() {
     url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
     attribution: "\xA9 <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a>"
   }), /*#__PURE__*/React.createElement(MapController, {
-    selectedDriver: selectedDriver
-  }), selectedDriver && selectedDriver.lat != null && selectedDriver.lng != null && /*#__PURE__*/React.createElement(Marker, {
+    selectedDriver: selectedDriver,
+    mapZoom: mapZoom,
+    mapCenter: mapCenter
+  }), filteredDrivers.filter(d => d.driverId !== (selectedDriver === null || selectedDriver === void 0 ? void 0 : selectedDriver.driverId)).map(driver => /*#__PURE__*/React.createElement(Marker, {
+    key: driver.driverId,
+    position: [Number(driver.lat), Number(driver.lng)],
+    icon: driver.isOnline ? onlineIcon : offlineIcon,
+    eventHandlers: {
+      click: () => {
+        setSelectedDriver(driver);
+      }
+    }
+  })), selectedDriver && selectedDriver.lat != null && selectedDriver.lng != null && /*#__PURE__*/React.createElement(Marker, {
     key: selectedDriver.driverId,
     position: [Number(selectedDriver.lat), Number(selectedDriver.lng)],
     icon: selectedDriver.isOnline ? onlineIcon : offlineIcon
@@ -5525,7 +5635,7 @@ function LiveTrackingSystem() {
     style: {
       fontWeight: "bold",
       fontSize: isMobile ? "14px" : "16px",
-      color: "#667eea",
+      color: "#1F5FA8",
       marginBottom: "8px",
       borderBottom: "1px solid #eee",
       paddingBottom: "4px"
@@ -5544,14 +5654,14 @@ function LiveTrackingSystem() {
     style: {
       marginBottom: "8px"
     }
-  }, /*#__PURE__*/React.createElement("strong", null, "\uD83D\uDCCD Current Location"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Address, {
+  }, /*#__PURE__*/React.createElement("strong", null, "Current Location"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Address, {
     lat: selectedDriver.lat,
     lng: selectedDriver.lng
   }))), selectedDriver.deliveryLat && selectedDriver.deliveryLng && /*#__PURE__*/React.createElement("div", {
     style: {
       marginBottom: "8px"
     }
-  }, /*#__PURE__*/React.createElement("strong", null, "\uD83C\uDFAF Delivery Destination"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Address, {
+  }, /*#__PURE__*/React.createElement("strong", null, t("DELIVERY_DESTINATION")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Address, {
     lat: selectedDriver.deliveryLat,
     lng: selectedDriver.deliveryLng
   }))), /*#__PURE__*/React.createElement("div", {
@@ -5564,26 +5674,17 @@ function LiveTrackingSystem() {
       borderRadius: "4px",
       marginTop: "8px"
     }
-  }, selectedDriver.speed && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, "Speed:"), /*#__PURE__*/React.createElement("span", null, (selectedDriver.speed * 3.6).toFixed(1), " km/h")), selectedDriver.heading && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, "Heading:"), /*#__PURE__*/React.createElement("span", null, Math.round(selectedDriver.heading), "\xB0")), selectedDriver.accuracy && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, "Accuracy:"), /*#__PURE__*/React.createElement("span", null, Math.round(selectedDriver.accuracy), "m"))), selectedDriver.lastUpdate && /*#__PURE__*/React.createElement("div", {
+  }, selectedDriver.speed && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, t("WT_SPEED"), ":"), /*#__PURE__*/React.createElement("span", null, (selectedDriver.speed * 3.6).toFixed(1), " ", t("WT_KM_PER_HOUR"))), selectedDriver.heading && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, t("WT_HEADING"), ":"), /*#__PURE__*/React.createElement("span", null, Math.round(selectedDriver.heading), "\xB0")), selectedDriver.accuracy && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, t("WT_ACCURACY"), ":"), /*#__PURE__*/React.createElement("span", null, Math.round(selectedDriver.accuracy), "m"))), selectedDriver.lastUpdate && /*#__PURE__*/React.createElement("div", {
     style: {
       marginTop: "8px",
       color: "#666",
       fontSize: "10px"
     }
-  }, "Last update: ", new Date(selectedDriver.lastUpdate).toLocaleString()))))), selectedDriver && selectedDriver.deliveryLat != null && selectedDriver.deliveryLng != null && /*#__PURE__*/React.createElement(Marker, {
+  }, t("WT_LAST_UPDATE"), ": ", new Date(selectedDriver.lastUpdate).toLocaleString()))))), selectedDriver && selectedDriver.deliveryLat != null && selectedDriver.deliveryLng != null && /*#__PURE__*/React.createElement(Marker, {
     key: `dest-${selectedDriver.driverId}`,
     position: [Number(selectedDriver.deliveryLat), Number(selectedDriver.deliveryLng)],
     icon: destinationIcon
-  }, /*#__PURE__*/React.createElement(Popup, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, "Delivery Destination"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Address, {
-    lat: selectedDriver.deliveryLat,
-    lng: selectedDriver.deliveryLng
-  })), /*#__PURE__*/React.createElement("div", {
-    style: {
-      fontSize: "11px",
-      color: "#666",
-      marginTop: "4px"
-    }
-  }, "Driver: #", selectedDriver.driverId.substring(0, 8), "...")))), showRoutes && selectedDriver && selectedDriver.lat && selectedDriver.lng && selectedDriver.deliveryLat && selectedDriver.deliveryLng && /*#__PURE__*/React.createElement(RouteLayer, {
+  }), showRoutes && selectedDriver && selectedDriver.lat && selectedDriver.lng && selectedDriver.deliveryLat && selectedDriver.deliveryLng && /*#__PURE__*/React.createElement(RouteLayer, {
     start: {
       lat: selectedDriver.lat,
       lng: selectedDriver.lng
@@ -5611,13 +5712,14 @@ function LiveTrackingSystem() {
   }, selectedDriver && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
     onClick: () => {
       if (selectedDriver !== null && selectedDriver !== void 0 && selectedDriver.lat && selectedDriver !== null && selectedDriver !== void 0 && selectedDriver.lng) {
-        setMapCenter([selectedDriver.lat, selectedDriver.lng]);
+        const center = [Number(selectedDriver.lat), Number(selectedDriver.lng)];
+        setMapCenter(center);
         setMapZoom(15);
       }
     },
     style: {
       padding: isMobile ? "10px 12px" : "8px 16px",
-      background: "#667eea",
+      background: "#1F5FA8",
       color: "white",
       border: "none",
       borderRadius: "4px",
@@ -5626,7 +5728,7 @@ function LiveTrackingSystem() {
       fontWeight: "500",
       whiteSpace: "nowrap"
     }
-  }, "Center"), /*#__PURE__*/React.createElement("button", {
+  }, t("WT_CENTER")), /*#__PURE__*/React.createElement("button", {
     onClick: () => setSelectedDriver(null),
     style: {
       padding: isMobile ? "10px 12px" : "8px 16px",
@@ -5639,7 +5741,7 @@ function LiveTrackingSystem() {
       fontWeight: "500",
       whiteSpace: "nowrap"
     }
-  }, "Clear")), !selectedDriver && /*#__PURE__*/React.createElement("div", {
+  }, t("WT_CLEAR"))), !selectedDriver && /*#__PURE__*/React.createElement("div", {
     style: {
       padding: isMobile ? "10px 12px" : "8px 16px",
       background: "#f5f5f5",
@@ -5671,26 +5773,64 @@ function LiveTrackingSystem() {
   }, /*#__PURE__*/React.createElement("h4", {
     style: {
       margin: 0,
-      color: "#667eea",
+      color: "#1F5FA8",
       fontSize: isMobile ? "14px" : "16px"
     }
-  }, "Selected Driver"), /*#__PURE__*/React.createElement("span", {
-    style: {
-      background: selectedDriver.isOnline ? "#4caf50" : "#f44336",
-      color: "white",
-      padding: "2px 8px",
-      borderRadius: "12px",
-      fontSize: isMobile ? "10px" : "11px",
-      fontWeight: "bold"
-    }
-  }, selectedDriver.isOnline ? "ONLINE" : "OFFLINE")), /*#__PURE__*/React.createElement("div", {
+  }, t("WT_SELECTED_DRIVER")), /*#__PURE__*/React.createElement(StatusBadge, {
+    isOnline: selectedDriver.isOnline
+  })), /*#__PURE__*/React.createElement("div", {
     style: {
       fontSize: isMobile ? "12px" : "13px"
     }
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, "ID:"), " ", selectedDriver.driverId.substring(0, 12), "..."), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, "Location:"), " ", /*#__PURE__*/React.createElement(Address, {
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, t("WT_ID"), ":"), " ", selectedDriver.driverId.substring(0, 6).toUpperCase(), "..."), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, t("WT_LOCATION"), ":"), " ", /*#__PURE__*/React.createElement(Address, {
     lat: selectedDriver.lat,
     lng: selectedDriver.lng
-  })), selectedDriver.speed && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, "Speed:"), " ", Math.round(selectedDriver.speed * 3.6), " km/h"), selectedDriver.lastSeen && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, "Last seen:"), " ", new Date(selectedDriver.lastSeen).toLocaleTimeString())))));
+  })), selectedDriver.speed && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, t("WT_SPEED"), ":"), " ", Math.round(selectedDriver.speed * 3.6), " ", t("km/h")), selectedDriver.lastSeen && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, t("WT_LAST_SEEN"), ":"), " ", new Date(selectedDriver.lastSeen).toLocaleTimeString()))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      top: "20px",
+      left: "20px",
+      zIndex: 1000,
+      display: "flex",
+      flexDirection: "column",
+      gap: "8px"
+    }
+  }, /*#__PURE__*/React.createElement("button", {
+    onClick: () => setMapZoom(prev => prev + 1),
+    style: {
+      width: "32px",
+      height: "32px",
+      background: "white",
+      border: "1px solid #e0e0e0",
+      borderRadius: "4px",
+      fontSize: "18px",
+      fontWeight: "700",
+      cursor: "pointer",
+      boxShadow: "0 2px 4px rgba(0,0,0,0.1)"
+    }
+  }, "+"), /*#__PURE__*/React.createElement("button", {
+    onClick: () => setMapZoom(prev => prev - 1),
+    style: {
+      width: "32px",
+      height: "32px",
+      background: "white",
+      border: "1px solid #e0e0e0",
+      borderRadius: "4px",
+      fontSize: "18px",
+      fontWeight: "700",
+      cursor: "pointer",
+      boxShadow: "0 2px 4px rgba(0,0,0,0.1)"
+    }
+  }, "\u2212")), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      top: "20px",
+      right: "20px",
+      zIndex: 1000,
+      display: "flex",
+      gap: "12px"
+    }
+  }))));
 }
 
 const AddFillingPointMetaData = ({
@@ -5796,15 +5936,12 @@ const AddFillingPointMetaData = ({
       [name]: newValue
     });
   };
-  const isMobile = window.Digit.Utils.browser.isMobile();
-  return /*#__PURE__*/React.createElement(Card, {
+  return /*#__PURE__*/React.createElement(CollapsibleCardPage$1, {
+    title: t("WT_FILLING_POINT_APPLICANT_DETAILS"),
+    defaultOpen: true
+  }, /*#__PURE__*/React.createElement("div", {
     className: "formcomposer-section-grid"
-  }, /*#__PURE__*/React.createElement(CardSubHeader, {
-    style: {
-      gridColumn: "span 2",
-      marginBottom: isMobile ? "0px" : "10px"
-    }
-  }, t("WT_FILLING_POINT_APPLICANT_DETAILS")), filteredInputs.map(input => {
+  }, filteredInputs.map(input => {
     var _formData$sectionKey, _input$validation;
     return /*#__PURE__*/React.createElement("div", {
       key: input.name
@@ -5819,7 +5956,7 @@ const AddFillingPointMetaData = ({
       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 = [{
@@ -5843,14 +5980,12 @@ const AddFixFillAddress = ({
   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;
+  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, _formData$address10, _formData$address11, _userDetails$addresse;
   const {
     data: allCities
   } = Digit.Hooks.useTenants();
-  const {
-    control
-  } = useForm();
   const location = useLocation();
+  const tenantId = Digit.ULBService.getCurrentTenantId();
   const usedAddressTypes = ((_location$state = location.state) === null || _location$state === void 0 ? void 0 : _location$state.usedAddressTypes) || [];
   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);
@@ -5861,8 +5996,10 @@ const AddFixFillAddress = ({
   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 [zone, setZone] = useState((formData === null || formData === void 0 ? void 0 : (_formData$address0 = formData.address) === null || _formData$address0 === void 0 ? void 0 : _formData$address0.zone) || "");
+  const [block, setBlock] = useState((formData === null || formData === void 0 ? void 0 : (_formData$address1 = formData.address) === null || _formData$address1 === void 0 ? void 0 : _formData$address1.block) || "");
+  const [latitude, setLatitude] = useState((formData === null || formData === void 0 ? void 0 : (_formData$address10 = formData.address) === null || _formData$address10 === void 0 ? void 0 : _formData$address10.latitude) || "");
+  const [longitude, setLongitude] = useState((formData === null || formData === void 0 ? void 0 : (_formData$address11 = formData.address) === null || _formData$address11 === void 0 ? void 0 : _formData$address11.longitude) || "");
   const [selectedAddress, setSelectedAddress] = useState("");
   const isInitialized = useRef(!isEdit);
   const lastSyncedAddress = useRef(null);
@@ -5874,18 +6011,81 @@ const AddFixFillAddress = ({
     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
-  }))) || [];
+    data: egovLocationData
+  } = Digit.Hooks.useCommonMDMS(tenantId, "egov-location", ["TenantBoundary"]);
+  useEffect(() => {
+    if (!city && allCities && allCities.length > 0) {
+      const defaultCity = allCities.find(c => c.code === tenantId) || allCities[0];
+      setCity(defaultCity);
+    }
+  }, [allCities, city, tenantId]);
+  const boundaryData = useMemo(() => {
+    var _egovLocationData$ego;
+    const tenantBoundary = (egovLocationData === null || egovLocationData === void 0 ? void 0 : (_egovLocationData$ego = egovLocationData["egov-location"]) === null || _egovLocationData$ego === void 0 ? void 0 : _egovLocationData$ego.TenantBoundary) || [];
+    const revenueData = tenantBoundary.find(item => {
+      var _item$hierarchyType;
+      return (item === null || item === void 0 ? void 0 : (_item$hierarchyType = item.hierarchyType) === null || _item$hierarchyType === void 0 ? void 0 : _item$hierarchyType.code) === "REVENUE";
+    });
+    return (revenueData === null || revenueData === void 0 ? void 0 : revenueData.boundary) || [];
+  }, [egovLocationData]);
+  const structuredLocality = useMemo(() => {
+    let localities = [];
+    const boundaries = Array.isArray(boundaryData) ? boundaryData : boundaryData ? [boundaryData] : [];
+    const extractLocalities = (node, zone = null, ward = null) => {
+      if (!node) return;
+      let currentZone = zone;
+      let currentWard = ward;
+      if (node.label === "Zone" || node.label === "ZONE") {
+        currentZone = node.localname || node.code || node.name;
+      }
+      if (node.label === "Ward" || node.label === "WARD" || node.label === "Block" || node.label === "BLOCK") {
+        currentWard = node.code || node.localname || node.name;
+      }
+      if (node.label === "Locality" || node.label === "LOCALITY") {
+        localities.push({
+          ...node,
+          name: node.localname || node.name || node.code,
+          i18nkey: node.i18nkey || `${tenantId.replace(".", "_")}_REVENUE_${node.code}`.toUpperCase(),
+          zone: currentZone,
+          ward: currentWard
+        });
+      }
+      if (node.children && node.children.length > 0) {
+        node.children.forEach(child => extractLocalities(child, currentZone, currentWard));
+      }
+    };
+    boundaries.forEach(rootNode => extractLocalities(rootNode));
+    return localities;
+  }, [boundaryData, tenantId]);
+  const fetchedPincodes = useMemo(() => {
+    const pinSet = new Set();
+    structuredLocality.forEach(loc => {
+      if (loc.pincode) {
+        const pins = Array.isArray(loc.pincode) ? loc.pincode : [loc.pincode];
+        pins.forEach(p => pinSet.add(p.toString()));
+      }
+    });
+    if (pinSet.size === 0 && city !== null && city !== void 0 && city.pincode) {
+      const pins = Array.isArray(city.pincode) ? city.pincode : [city.pincode];
+      pins.forEach(p => pinSet.add(p.toString()));
+    }
+    return Array.from(pinSet).sort().map(pin => ({
+      code: pin,
+      name: pin,
+      i18nKey: pin
+    }));
+  }, [structuredLocality, city]);
+  const filteredLocalities = useMemo(() => {
+    if (!pincode) return structuredLocality;
+    return structuredLocality.filter(loc => {
+      if (!loc.pincode) return false;
+      const pins = Array.isArray(loc.pincode) ? loc.pincode : [loc.pincode];
+      return pins.some(p => p.toString() === pincode);
+    });
+  }, [structuredLocality, pincode]);
   useEffect(() => {
-    var _formData$address10;
-    const currentId = (formData === null || formData === void 0 ? void 0 : formData.id) || (formData === null || formData === void 0 ? void 0 : formData.bookingId) || (formData === null || formData === void 0 ? void 0 : (_formData$address10 = formData.address) === null || _formData$address10 === void 0 ? void 0 : _formData$address10.id);
+    var _formData$address12;
+    const currentId = (formData === null || formData === void 0 ? void 0 : formData.id) || (formData === null || formData === void 0 ? void 0 : formData.bookingId) || (formData === null || formData === void 0 ? void 0 : (_formData$address12 = formData.address) === null || _formData$address12 === void 0 ? void 0 : _formData$address12.id);
     if (currentId && lastBookingId.current !== currentId) {
       isInitialized.current = false;
       lastBookingId.current = currentId;
@@ -5903,39 +6103,41 @@ const AddFixFillAddress = ({
       setAddressLine1(addressData.addressLine1 || "");
       setAddressLine2(addressData.addressLine2 || "");
       setAddressType(allOptions.find(a => a.code === addressData.addressType) || addressData.addressType || null);
+      setZone(addressData.zone || "");
+      setBlock(addressData.block || "");
       setLatitude(addressData.latitude || "");
       setLongitude(addressData.longitude || "");
-      if (fetchedLocalities || !addressData.cityCode) {
-        if (fetchedLocalities) {
-          const localityObj = fetchedLocalities.find(l => l.code === addressData.localityCode || l.code === addressData.locality || l.i18nkey === addressData.locality);
+      if (boundaryData || !addressData.cityCode) {
+        if (boundaryData) {
+          const localityObj = boundaryData.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);
-      } else {
-        console.log("AddFixFillAddress: Waiting for localities to load for city:", cityObj === null || cityObj === void 0 ? void 0 : cityObj.code);
       }
     }
-  }, [formData === null || formData === void 0 ? void 0 : formData.address, city, allCities, fetchedLocalities]);
+  }, [formData === null || formData === void 0 ? void 0 : formData.address, city, allCities, boundaryData]);
   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));
+      setLocality(boundaryData === null || boundaryData === void 0 ? void 0 : boundaryData.find(l => l.i18nkey === selectedAddress.locality));
       setHouseNo(selectedAddress.houseNumber);
       setStreetName(selectedAddress.streetName);
       setLandmark(selectedAddress.landmark);
       setAddressLine1(selectedAddress.address);
       setAddressLine2(selectedAddress.address2);
+      setZone(selectedAddress.zone);
+      setBlock(selectedAddress.block);
       setLatitude(selectedAddress.latitude);
       setLongitude(selectedAddress.longitude);
       setAddressType(allOptions.find(a => a.code === selectedAddress.addressType));
@@ -5953,6 +6155,8 @@ const AddFixFillAddress = ({
       addressLine2: addressLine2 || "",
       streetName: streetName || "",
       addressType: (addressType === null || addressType === void 0 ? void 0 : addressType.code) || addressType || null,
+      zone: zone || "",
+      block: block || "",
       latitude: latitude || "",
       longitude: longitude || ""
     };
@@ -5961,23 +6165,16 @@ const AddFixFillAddress = ({
       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]);
-  const isMobile = window.Digit.Utils.browser.isMobile();
-  return /*#__PURE__*/React.createElement(Card, {
+  }, [pincode, city, locality, houseNo, landmark, addressLine1, addressLine2, streetName, addressType, zone, block, latitude, longitude]);
+  return /*#__PURE__*/React.createElement(CollapsibleCardPage$1, {
+    title: t("WT_ADDRESS_DETAILS"),
+    defaultOpen: true
+  }, /*#__PURE__*/React.createElement("div", {
     className: "formcomposer-section-grid"
-  }, /*#__PURE__*/React.createElement(CardSubHeader, {
-    style: {
-      gridColumn: "span 2",
-      marginBottom: isMobile ? "0px" : "10px"
-    }
-  }, t("WT_ADDRESS_DETAILS")), (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, {
+  }, (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", null, /*#__PURE__*/React.createElement(CardLabel, null, t("COMMON_ADDRESS_TYPE")), /*#__PURE__*/React.createElement(Dropdown, {
     selected: selectedAddress,
     select: setSelectedAddress,
-    option: userDetails.addresses,
+    option: userDetails.addresses || [],
     optionKey: "address",
     t: t,
     style: {
@@ -5986,76 +6183,146 @@ const AddFixFillAddress = ({
   })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, t("COMMON_ADDRESS_TYPE")), /*#__PURE__*/React.createElement(Dropdown, {
     selected: addressType,
     select: setAddressType,
-    option: availableAddressTypeOptions,
+    option: availableAddressTypeOptions || [],
+    optionKey: "i18nKey",
+    t: t,
+    style: {
+      width: "100%"
+    }
+  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, t("CITY"), " ", /*#__PURE__*/React.createElement("span", {
+    className: "astericColor"
+  }, "*")), /*#__PURE__*/React.createElement(Dropdown, {
+    selected: city,
+    select: setCity,
+    option: allCities || [],
+    optionKey: "i18nKey",
+    t: t,
+    disable: true
+  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, t("PINCODE"), " ", /*#__PURE__*/React.createElement("span", {
+    className: "astericColor"
+  }, "*")), /*#__PURE__*/React.createElement(Dropdown, {
+    selected: (fetchedPincodes === null || fetchedPincodes === void 0 ? void 0 : fetchedPincodes.find(p => p.code === pincode)) || (pincode ? {
+      code: pincode,
+      name: pincode,
+      i18nKey: pincode
+    } : null),
+    select: val => {
+      const newPin = val === null || val === void 0 ? void 0 : val.code;
+      if (newPin !== pincode) {
+        setLocality(null);
+        setZone("");
+        setBlock("");
+        setLatitude("");
+        setLongitude("");
+        setAddressLine1("");
+        setAddressLine2("");
+      }
+      setPincode(newPin);
+    },
+    option: fetchedPincodes || [],
     optionKey: "i18nKey",
     t: t,
     style: {
       width: "100%"
     }
+  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, t("LOCALITY"), " ", /*#__PURE__*/React.createElement("span", {
+    className: "astericColor"
+  }, "*")), /*#__PURE__*/React.createElement(Dropdown, {
+    selected: locality,
+    select: val => {
+      setLocality(val);
+      if (val !== null && val !== void 0 && val.latitude) setLatitude(val.latitude);
+      if (val !== null && val !== void 0 && val.longitude) setLongitude(val.longitude);
+      if (val !== null && val !== void 0 && val.localname) setAddressLine1(val.localname);
+      if (val !== null && val !== void 0 && val.name) setAddressLine2(val.name);
+      if (val !== null && val !== void 0 && val.zone) setZone(val.zone);
+      if (val !== null && val !== void 0 && val.ward) setBlock(val.ward);
+      if (val !== null && val !== void 0 && val.pincode) {
+        const p = Array.isArray(val.pincode) ? val.pincode[0] : val.pincode;
+        if (p) setPincode(p.toString());
+      }
+    },
+    option: filteredLocalities,
+    optionKey: "i18nkey",
+    t: t,
+    style: {
+      width: "100%"
+    }
   })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, t("HOUSE_NO"), /*#__PURE__*/React.createElement("span", {
-    className: "check-page-link-button"
+    className: "astericColor"
   }, "*")), /*#__PURE__*/React.createElement(TextInput, {
     value: houseNo,
-    onChange: e => setHouseNo(e.target.value)
+    onChange: e => setHouseNo(e.target.value),
+    style: {
+      width: "100%"
+    }
   })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, t("STREET_NAME"), " ", /*#__PURE__*/React.createElement("span", {
-    className: "check-page-link-button"
+    className: "astericColor"
   }, "*")), /*#__PURE__*/React.createElement(TextInput, {
     value: streetName,
-    onChange: e => setStreetName(e.target.value)
+    onChange: e => setStreetName(e.target.value),
+    style: {
+      width: "100%"
+    }
   })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, t("ADDRESS_LINE1"), " ", /*#__PURE__*/React.createElement("span", {
-    className: "check-page-link-button"
+    className: "astericColor"
   }, "*")), /*#__PURE__*/React.createElement(TextInput, {
     value: addressLine1,
-    onChange: e => setAddressLine1(e.target.value)
+    onChange: e => setAddressLine1(e.target.value),
+    style: {
+      width: "100%"
+    }
   })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, t("ADDRESS_LINE2"), " ", /*#__PURE__*/React.createElement("span", {
-    className: "check-page-link-button"
+    className: "astericColor"
   }, "*")), /*#__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("span", {
-    className: "check-page-link-button"
-  }, "*")), /*#__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("span", {
-    className: "check-page-link-button"
-  }, "*")), /*#__PURE__*/React.createElement(Controller, {
-    control: control,
-    name: "locality",
-    render: () => /*#__PURE__*/React.createElement(Dropdown, {
-      selected: locality,
-      select: setLocality,
-      option: structuredLocality,
-      optionKey: "i18nKey",
-      t: t
-    })
+    onChange: e => setAddressLine2(e.target.value),
+    style: {
+      width: "100%"
+    }
+  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, t("BLOCK"), " ", /*#__PURE__*/React.createElement("span", {
+    className: "astericColor"
+  }, "*")), /*#__PURE__*/React.createElement(TextInput, {
+    value: block,
+    onChange: e => setBlock(e.target.value),
+    style: {
+      width: "100%"
+    }
+  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, t("ZONE"), " ", /*#__PURE__*/React.createElement("span", {
+    className: "astericColor"
+  }, "*")), /*#__PURE__*/React.createElement(TextInput, {
+    value: zone,
+    onChange: e => setZone(e.target.value),
+    style: {
+      width: "100%"
+    }
   })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, t("LATITUDE"), " ", /*#__PURE__*/React.createElement("span", {
-    className: "check-page-link-button"
+    className: "astericColor"
   }, "*")), /*#__PURE__*/React.createElement(TextInput, {
     value: latitude,
-    onChange: e => setLatitude(e.target.value)
+    onChange: e => setLatitude(e.target.value),
+    style: {
+      width: "100%"
+    }
   })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, t("LONGITUDE"), " ", /*#__PURE__*/React.createElement("span", {
-    className: "check-page-link-button"
+    className: "astericColor"
   }, "*")), /*#__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("span", {
-    className: "check-page-link-button"
-  }, "*")), /*#__PURE__*/React.createElement(TextInput, {
-    value: pincode,
-    onChange: e => setPincode(e.target.value),
-    maxLength: 6
-  })));
+    onChange: e => setLongitude(e.target.value),
+    style: {
+      width: "100%"
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      gridColumn: "span 2"
+    }
+  }, /*#__PURE__*/React.createElement(CardLabel, null, t("LANDMARK")), /*#__PURE__*/React.createElement(TextInput, {
+    value: landmark,
+    onChange: e => setLandmark(e.target.value),
+    style: {
+      width: "100%"
+    }
+  }))));
 };
 
 const AddFillingPointAddress = () => {
@@ -6226,7 +6493,7 @@ const AddFixPointAddress = () => {
   const searchFilters = React.useMemo(() => ({
     tenantId,
     filters: {
-      bookingId: editId
+      id: editId
     }
   }), [tenantId, editId]);
   const searchConfig = React.useMemo(() => ({
@@ -6239,7 +6506,10 @@ const AddFixPointAddress = () => {
   const [isDataFetched, setIsDataFetched] = useState(false);
   useEffect(() => {
     if (editId && editData !== null && editData !== void 0 && editData.waterTankerBookingDetail && !isDataFetched) {
-      const data = editData.waterTankerBookingDetail.find(item => item.bookingId === editId);
+      const data = editData.waterTankerBookingDetail.find(item => {
+        var _item$applicantDetail;
+        return ((_item$applicantDetail = item.applicantDetail) === null || _item$applicantDetail === void 0 ? void 0 : _item$applicantDetail.applicantId) === editId;
+      });
       if (data) {
         var _data$applicantDetail, _data$applicantDetail2, _data$applicantDetail3, _data$applicantDetail4, _data$applicantDetail5, _data$address, _data$address2;
         setFormData({
@@ -6282,12 +6552,10 @@ const AddFixPointAddress = () => {
     mutate: updateFixedPoint
   } = Digit.Hooks.wt.useUpdateFixedPoint(tenantId);
   const handleSubmit = e => {
-    console.log("Submitting Form Data:", formData);
     const payload = fixedPointPayload({
       ...formData,
       tenantId
     });
-    console.log("Generated Payload:", payload);
     const mutation = editId ? updateFixedPoint : createFixedPoint;
     mutation(payload, {
       onSuccess: () => {
@@ -6302,7 +6570,6 @@ const AddFixPointAddress = () => {
       },
       onError: error => {
         var _error$response, _error$response$data, _error$response$data$, _error$response$data$2;
-        console.error("Mutation Error:", error);
         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
@@ -6331,14 +6598,12 @@ const AddFixPointAddress = () => {
       flexDirection: "column",
       gap: "16px"
     }
-  }, /*#__PURE__*/React.createElement(Card, {
+  }, /*#__PURE__*/React.createElement(CollapsibleCardPage$1, {
+    title: t("WT_FIXING_POINT_APPLICANT_DETAILS"),
+    defaultOpen: true
+  }, /*#__PURE__*/React.createElement("div", {
     className: "formcomposer-section-grid"
-  }, /*#__PURE__*/React.createElement(CardSubHeader, {
-    style: {
-      gridColumn: "span 2",
-      marginBottom: isMobile ? "0px" : "10px"
-    }
-  }, t("WT_FIXING_POINT_APPLICANT_DETAILS")), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     style: {
       display: "flex",
       flexDirection: "column"
@@ -6404,7 +6669,7 @@ const AddFixPointAddress = () => {
     style: {
       width: "100%"
     }
-  }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(AddFixFillAddress, {
+  })))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(AddFixFillAddress, {
     t: t,
     config: addressConfig,
     onSelect: handleSelect,
@@ -6635,7 +6900,6 @@ const LocalityModal = ({
 };
 
 const SearchFillingPointAddress = () => {
-  var _fixedPointData$water, _fillingPointData$fil;
   const {
     t
   } = useTranslation();
@@ -6652,7 +6916,7 @@ const SearchFillingPointAddress = () => {
   const [showLocalityModal, setShowLocalityModal] = useState(false);
   const [selectedLocalityRow, setSelectedLocalityRow] = useState(null);
   const [modalMode, setModalMode] = useState("ADD");
-  const [pageSize, setPageSize] = useState(10);
+  const [pageSize, setPageSize] = useState(50);
   const [pageOffset, setPageOffset] = useState(0);
   const tenantId = Digit.ULBService.getCurrentTenantId();
   const closeToast = () => {
@@ -6868,12 +7132,12 @@ const SearchFillingPointAddress = () => {
         Cell: ({
           row
         }) => {
-          var _row$original$applica2;
+          var _row$original$applica2, _row$original$applica3;
           return /*#__PURE__*/React.createElement("span", {
             className: "link"
           }, /*#__PURE__*/React.createElement(Link, {
-            to: `/digit-ui/employee/wt/add-fix-point-address?id=${row.original.bookingId}`
-          }, ((_row$original$applica2 = row.original.applicantDetail) === null || _row$original$applica2 === void 0 ? void 0 : _row$original$applica2.name) || "NA"));
+            to: `/digit-ui/employee/wt/add-fix-point-address?id=${(_row$original$applica2 = row.original.applicantDetail) === null || _row$original$applica2 === void 0 ? void 0 : _row$original$applica2.applicantId}`
+          }, ((_row$original$applica3 = row.original.applicantDetail) === null || _row$original$applica3 === void 0 ? void 0 : _row$original$applica3.name) || "NA"));
         }
       }, {
         Header: t("WT_MOBILE_NUMBER"),
@@ -7028,8 +7292,7 @@ const SearchFillingPointAddress = () => {
   const handlePageSizeChange = e => {
     setPageSize(Number(e.target.value));
   };
-  const fixedLength = (fixedPointData === null || fixedPointData === void 0 ? void 0 : (_fixedPointData$water = fixedPointData.waterTankerBookingDetail) === null || _fixedPointData$water === void 0 ? void 0 : _fixedPointData$water.length) || 0;
-  const fillingLength = (fillingPointData === null || fillingPointData === void 0 ? void 0 : (_fillingPointData$fil = fillingPointData.fillingPoints) === null || _fillingPointData$fil === void 0 ? void 0 : _fillingPointData$fil.length) || 0;
+  const totalCount = Number(selectedTab === "FIXED_POINT" ? (fixedPointData === null || fixedPointData === void 0 ? void 0 : fixedPointData.Count) ?? (fixedPointData === null || fixedPointData === void 0 ? void 0 : fixedPointData.count) ?? (fixedPointData === null || fixedPointData === void 0 ? void 0 : fixedPointData.totalCount) ?? 0 : (fillingPointData === null || fillingPointData === void 0 ? void 0 : fillingPointData.Count) ?? (fillingPointData === null || fillingPointData === void 0 ? void 0 : fillingPointData.count) ?? (fillingPointData === null || fillingPointData === void 0 ? void 0 : fillingPointData.totalCount) ?? 0);
   const applyFixedPointMappedFilter = React.useCallback((rows = []) => {
     if (selectedTab !== "FIXED_POINT" || !(appliedFixedPointStatus !== null && appliedFixedPointStatus !== void 0 && appliedFixedPointStatus.code)) return rows;
     return rows.filter(item => {
@@ -7223,7 +7486,8 @@ const SearchFillingPointAddress = () => {
     onNextPage: fetchNextPage,
     onPrevPage: fetchPrevPage,
     pageSizeLimit: pageSize,
-    totalRecords: fixedLength + fillingLength,
+    totalRecords: totalCount,
+    isPaginationRequired: true,
     showPagination: true,
     showPageSizeOptions: true,
     isSearchRequired: false,
@@ -7299,7 +7563,7 @@ const SelectServiceType = ({
     return /*#__PURE__*/React.createElement(Loader, null);
   }
   if ((userType === null || userType === void 0 ? void 0 : userType.toLowerCase()) === "employee") {
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, config.label), /*#__PURE__*/React.createElement(Dropdown, {
+    return /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, config.label), /*#__PURE__*/React.createElement(Dropdown, {
       className: "payment-form-text-input-correction",
       isMandatory: config.isMandatory,
       selected: serviceTypes,
@@ -7422,14 +7686,12 @@ const VendorAssign = ({
     style: {
       flex: 1
     }
-  }, /*#__PURE__*/React.createElement(Card, {
+  }, /*#__PURE__*/React.createElement(CollapsibleCardPage$1, {
+    title: t("WT_VENDOR_ASSIGN"),
+    defaultOpen: true
+  }, /*#__PURE__*/React.createElement("div", {
     className: "formcomposer-section-grid"
-  }, /*#__PURE__*/React.createElement(CardSubHeader, {
-    style: {
-      marginBottom: "10px",
-      gridColumn: "span 2"
-    }
-  }, t("WT_VENDOR_ASSIGN")), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     style: {
       display: "flex",
       flexDirection: "column"
@@ -7496,7 +7758,7 @@ const VendorAssign = ({
     formData: {
       serviceType: selectedServiceType
     }
-  })), /*#__PURE__*/React.createElement("div", {
+  }))), /*#__PURE__*/React.createElement("div", {
     style: {
       display: "flex",
       marginTop: "24px",
@@ -7521,6 +7783,7 @@ const EmployeeApp = ({
     t
   } = useTranslation();
   const location = useLocation();
+  const fixedPointInboxLabel = t("WT_FIXED_POINT") !== "WT_FIXED_POINT" ? `${t("WT_FIXED_POINT")} ${t("ES_COMMON_INBOX")}` : "Fixed Point Inbox";
   sessionStorage.removeItem("revalidateddone");
   const getDynamicBreadcrumbs = () => {
     const pathname = location.pathname;
@@ -7534,7 +7797,11 @@ const EmployeeApp = ({
       label: t("WT_MODULE_NAME"),
       path: `/digit-ui/employee/module/details?moduleName=${moduleName}`
     }];
-    if (pathname.includes("/inbox")) {
+    if (pathname.includes("/fixed-point/inbox")) {
+      crumbs.push({
+        label: fixedPointInboxLabel
+      });
+    } else if (pathname.includes("/inbox")) {
       let label = "ES_COMMON_INBOX";
       if (pathname.includes("/tp/inbox")) label = "TP_INBOX";
       crumbs.push({
@@ -7551,6 +7818,14 @@ const EmployeeApp = ({
       crumbs.push({
         label: t("WT_REQUEST_SERVICE")
       });
+    } else if (pathname.includes("/fixed-point/booking-details")) {
+      crumbs.push({
+        label: fixedPointInboxLabel,
+        path: `${path}/fixed-point/inbox`
+      });
+      crumbs.push({
+        label: t("WT_BOOKING_DETAILS")
+      });
     } else if (pathname.includes("/booking-details") || pathname.includes("/bookingsearch/booking-details")) {
       const isSearch = pathname.includes("/bookingsearch");
       if (isSearch) {
@@ -7627,6 +7902,17 @@ const EmployeeApp = ({
       locality: []
     }
   };
+  const inboxInitialStateFixedPoint = {
+    searchParams: {
+      uuid: {
+        code: "ASSIGNED_TO_ALL",
+        name: "ES_INBOX_ASSIGNED_TO_ALL"
+      },
+      services: ["watertanker-fixedpoint"],
+      applicationStatus: [],
+      locality: []
+    }
+  };
   const ApplicationDetails = (_Digit = Digit) === null || _Digit === void 0 ? void 0 : (_Digit$ComponentRegis = _Digit.ComponentRegistryService) === null || _Digit$ComponentRegis === void 0 ? void 0 : _Digit$ComponentRegis.getComponent("ApplicationDetails");
   const WTCreate = (_Digit2 = Digit) === null || _Digit2 === void 0 ? void 0 : (_Digit2$ComponentRegi = _Digit2.ComponentRegistryService) === null || _Digit2$ComponentRegi === void 0 ? void 0 : _Digit2$ComponentRegi.getComponent("WTCreate");
   return /*#__PURE__*/React.createElement(Switch, null, /*#__PURE__*/React.createElement(AppContainer, null, /*#__PURE__*/React.createElement("div", {
@@ -7652,6 +7938,18 @@ const EmployeeApp = ({
       initialStates: inboxInitialState,
       isInbox: true
     }))
+  }), /*#__PURE__*/React.createElement(PrivateRoute, {
+    path: `${path}/fixed-point/inbox`,
+    component: props => /*#__PURE__*/React.createElement(Inbox, Object.assign({}, props, {
+      useNewInboxAPI: true,
+      parentRoute: path,
+      businessService: "watertanker-fixedpoint",
+      detailRoute: `${path}/fixed-point/booking-details`,
+      moduleCode: "WT",
+      filterComponent: "WT_INBOX_FILTER",
+      initialStates: inboxInitialStateFixedPoint,
+      isInbox: true
+    }))
   }), /*#__PURE__*/React.createElement(PrivateRoute, {
     path: `${path}/mt/inbox`,
     component: props => /*#__PURE__*/React.createElement(Inbox, Object.assign({}, props, {
@@ -7683,6 +7981,11 @@ const EmployeeApp = ({
   }), /*#__PURE__*/React.createElement(PrivateRoute, {
     path: `${path}/tp/request-service`,
     component: WTCreate
+  }), /*#__PURE__*/React.createElement(PrivateRoute, {
+    path: `${path}/fixed-point/booking-details/:id`,
+    component: props => /*#__PURE__*/React.createElement(ApplicationDetails, Object.assign({}, props, {
+      parentRoute: path
+    }))
   }), /*#__PURE__*/React.createElement(PrivateRoute, {
     path: `${path}/booking-details/:id`,
     component: props => /*#__PURE__*/React.createElement(ApplicationDetails, Object.assign({}, props, {
@@ -14725,7 +15028,7 @@ const TableConfig = t => ({
         return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
           className: "link"
         }, /*#__PURE__*/React.createElement(Link, {
-          to: `${props.parentRoute}/booking-details/` + `${row === null || row === void 0 ? void 0 : (_row$original = row.original) === null || _row$original === void 0 ? void 0 : (_row$original$searchD = _row$original.searchData) === null || _row$original$searchD === void 0 ? void 0 : _row$original$searchD["bookingNo"]}`
+          to: `${props.detailRoute || `${props.parentRoute}/booking-details`}/${row === null || row === void 0 ? void 0 : (_row$original = row.original) === null || _row$original === void 0 ? void 0 : (_row$original$searchD = _row$original.searchData) === null || _row$original$searchD === void 0 ? void 0 : _row$original$searchD["bookingNo"]}`
         }, (_row$original2 = row.original) === null || _row$original2 === void 0 ? void 0 : (_row$original2$search = _row$original2.searchData) === null || _row$original2$search === void 0 ? void 0 : _row$original2$search["bookingNo"])));
       },
       mobileCell: original => {
@@ -17322,8 +17625,8 @@ var _DataView = DataView;
 var Promise$1 = _getNative(_root, 'Promise');
 var _Promise = Promise$1;
 
-var Set = _getNative(_root, 'Set');
-var _Set = Set;
+var Set$1 = _getNative(_root, 'Set');
+var _Set = Set$1;
 
 var WeakMap = _getNative(_root, 'WeakMap');
 var _WeakMap = WeakMap;
@@ -19630,7 +19933,7 @@ const NOCDocuments = ({
     }
   }, [nocDocs, commonDocMaping]);
   useEffect(() => {
-    if (bpaApplicationStatus === 'NOC_VERIFICATION_INPROGRESS' && (actions === null || actions === void 0 ? void 0 : actions.length) > 0) setCheckEnablingDocs(true);else setCheckEnablingDocs(false);
+    if (bpaApplicationStatus === "NOC_VERIFICATION_INPROGRESS" && (actions === null || actions === void 0 ? void 0 : actions.length) > 0) setCheckEnablingDocs(true);else setCheckEnablingDocs(false);
   }, [applicationData, bpaActionsDetails]);
   return /*#__PURE__*/React.createElement("div", {
     style: {
@@ -19655,9 +19958,9 @@ const NOCDocuments = ({
           label: isEmployee ? `${t(noc === null || noc === void 0 ? void 0 : noc.title)}` : t(noc === null || noc === void 0 ? void 0 : noc.title),
           text: noc !== null && noc !== void 0 && noc.value ? t(noc === null || noc === void 0 ? void 0 : noc.value) : t("CS_NA"),
           textStyle: (noc === null || noc === void 0 ? void 0 : noc.value) == "APPROVED" || (noc === null || noc === void 0 ? void 0 : noc.value) == "AUTO_APPROVED" ? {
-            color: "#00703C"
+            color: "#2E9E8F"
           } : {
-            color: "#D4351C"
+            color: "#D83A2F"
           }
         });
       } else {
@@ -20209,7 +20512,7 @@ const ScruntinyDetails = ({
   const getTextValues = data => {
     if (data !== null && data !== void 0 && data.value && data !== null && data !== void 0 && data.isTransLate) return /*#__PURE__*/React.createElement("span", {
       style: {
-        color: "#00703C"
+        color: "#2E9E8F"
       }
     }, t(data === null || data === void 0 ? void 0 : data.value));else if (data !== null && data !== void 0 && data.value && data !== null && data !== void 0 && data.isTransLate) return t(data === null || data === void 0 ? void 0 : data.value);else if (data !== null && data !== void 0 && data.value) return data === null || data === void 0 ? void 0 : data.value;else t("NA");
   };
@@ -20889,7 +21192,7 @@ const WSFeeEstimation = ({
             var _result$Calculation2, _result$Calculation2$, _result$Calculation2$2;
             result === null || result === void 0 ? void 0 : (_result$Calculation2 = result.Calculation) === null || _result$Calculation2 === void 0 ? void 0 : (_result$Calculation2$ = _result$Calculation2[0]) === null || _result$Calculation2$ === void 0 ? void 0 : (_result$Calculation2$2 = _result$Calculation2$.taxHeadEstimates) === null || _result$Calculation2$2 === void 0 ? void 0 : _result$Calculation2$2.forEach(data => data.amount = data.estimateAmount);
           }
-          result.Calculation[0].billSlabData = _.groupBy(result === null || result === void 0 ? void 0 : (_result$Calculation3 = result.Calculation) === null || _result$Calculation3 === void 0 ? void 0 : (_result$Calculation3$ = _result$Calculation3[0]) === null || _result$Calculation3$ === void 0 ? void 0 : _result$Calculation3$.taxHeadEstimates, 'category');
+          result.Calculation[0].billSlabData = _.groupBy(result === null || result === void 0 ? void 0 : (_result$Calculation3 = result.Calculation) === null || _result$Calculation3 === void 0 ? void 0 : (_result$Calculation3$ = _result$Calculation3[0]) === null || _result$Calculation3$ === void 0 ? void 0 : _result$Calculation3$.taxHeadEstimates, "category");
           const values = [{
             title: "WS_APPLICATION_FEE_HEADER",
             value: (_result$Calculation4 = result.Calculation) === null || _result$Calculation4 === void 0 ? void 0 : (_result$Calculation4$ = _result$Calculation4[0]) === null || _result$Calculation4$ === void 0 ? void 0 : _result$Calculation4$.fee
@@ -20935,7 +21238,7 @@ const WSFeeEstimation = ({
       if (targetValueSign == 1) {
         values[value] = e.target.value;
       } else {
-        values[value] = '';
+        values[value] = "";
       }
     } else if (isDropDownValue) {
       values[`${value}_data`] = e;
@@ -20950,7 +21253,7 @@ const WSFeeEstimation = ({
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
     style: {
       lineHeight: "19px",
-      maxWidth: "950px",
+      maxWidth: "100%",
       minWidth: "280px"
     }
   }, values && /*#__PURE__*/React.createElement(StatusTable, null, /*#__PURE__*/React.createElement("div", null, values === null || values === void 0 ? void 0 : values.map((value, index) => {
@@ -20981,15 +21284,16 @@ const WSFeeEstimation = ({
     label: `${t(`CS_INBOX_STATUS_FILTER`)}`,
     text: isPaid ? t("WS_COMMON_PAID_LABEL") : t("WS_COMMON_NOT_PAID"),
     textStyle: !isPaid ? {
-      color: "#D4351C"
+      color: "#D83A2F"
     } : {
-      color: "#00703C"
+      color: "#2E9E8F"
     }
   }))), wsAdditionalDetails !== null && wsAdditionalDetails !== void 0 && (_wsAdditionalDetails$18 = wsAdditionalDetails.additionalDetails) !== null && _wsAdditionalDetails$18 !== void 0 && _wsAdditionalDetails$18.isAdhocRebate ? /*#__PURE__*/React.createElement("div", {
     onClick: e => {
       showPopUp(true);
     }
   }, /*#__PURE__*/React.createElement("span", {
+    className: "add-details-link hover-button",
     style: {
       cursor: "pointer",
       color: "#a82227"
@@ -21013,14 +21317,16 @@ const WSFeeEstimation = ({
     actionSaveOnSubmit: e => addAdhocRebatePenality(),
     hideSubmit: false,
     popupStyles: {
-      overflowY: "auto"
+      overflowY: "auto",
+      background: "#f0f3f7"
     }
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Card, {
+  }, /*#__PURE__*/React.createElement("div", {
     style: {
-      padding: "10px 10px 1px 10px",
-      margin: "0px 0px 15px 0px"
+      display: "flex",
+      flexDirection: "column",
+      gap: "16px"
     }
-  }, /*#__PURE__*/React.createElement(CardSectionHeader, {
+  }, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(CardSectionHeader, {
     style: {
       fontSize: "16px",
       fontWeight: "700",
@@ -21028,7 +21334,7 @@ const WSFeeEstimation = ({
       padding: "0px",
       margin: "0px 0px 10px 0px"
     }
-  }, t("PT_AD_PENALTY")), /*#__PURE__*/React.createElement(CardLabel, null, t("PT_TX_HEADS")), /*#__PURE__*/React.createElement("div", {
+  }, t("PT_AD_PENALTY")), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t("PT_TX_HEADS")), /*#__PURE__*/React.createElement("div", {
     className: "field"
   }, /*#__PURE__*/React.createElement(Dropdown, {
     isMandatory: true,
@@ -21039,9 +21345,7 @@ const WSFeeEstimation = ({
     isPropertyAssess: true,
     name: "adhocPenaltyReason_data",
     t: t
-  })), (fields === null || fields === void 0 ? void 0 : (_fields$adhocPenaltyR = fields.adhocPenaltyReason_data) === null || _fields$adhocPenaltyR === void 0 ? void 0 : _fields$adhocPenaltyR.title) === "PT_OTHERS" && /*#__PURE__*/React.createElement("div", {
-    className: "field"
-  }, /*#__PURE__*/React.createElement(CardLabel, null, t("PT_REASON")), /*#__PURE__*/React.createElement("div", {
+  }))), (fields === null || fields === void 0 ? void 0 : (_fields$adhocPenaltyR = fields.adhocPenaltyReason_data) === null || _fields$adhocPenaltyR === void 0 ? void 0 : _fields$adhocPenaltyR.title) === "PT_OTHERS" && /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t("PT_REASON")), /*#__PURE__*/React.createElement("div", {
     className: "field"
   }, /*#__PURE__*/React.createElement(TextInput, Object.assign({
     style: {
@@ -21058,7 +21362,7 @@ const WSFeeEstimation = ({
     pattern: "^[a-zA-Z ]*$",
     type: "text",
     title: t("TL_NAME_ERROR_MESSAGE")
-  })))), /*#__PURE__*/React.createElement(CardLabel, null, t("PT_HEAD_AMT")), /*#__PURE__*/React.createElement("div", {
+  })))), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t("PT_HEAD_AMT")), /*#__PURE__*/React.createElement("div", {
     className: "field"
   }, /*#__PURE__*/React.createElement(TextInput, Object.assign({
     style: {
@@ -21074,12 +21378,7 @@ const WSFeeEstimation = ({
     isRequired: true,
     pattern: "^[1-9]+[0-9]*$",
     title: t("ERR_DEFAULT_INPUT_FIELD_MSG")
-  })))), /*#__PURE__*/React.createElement(Card, {
-    style: {
-      padding: "10px 10px 1px 10px",
-      margin: "0px 0px 15px 0px"
-    }
-  }, /*#__PURE__*/React.createElement(CardSectionHeader, {
+  }))))), /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(CardSectionHeader, {
     style: {
       fontSize: "16px",
       fontWeight: "700",
@@ -21087,7 +21386,7 @@ const WSFeeEstimation = ({
       padding: "0px",
       margin: "0px 0px 10px 0px"
     }
-  }, t("PT_AD_REBATE")), /*#__PURE__*/React.createElement(CardLabel, null, t("PT_TX_HEADS")), /*#__PURE__*/React.createElement("div", {
+  }, t("PT_AD_REBATE")), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t("PT_TX_HEADS")), /*#__PURE__*/React.createElement("div", {
     className: "field"
   }, /*#__PURE__*/React.createElement(Dropdown, {
     isMandatory: true,
@@ -21098,9 +21397,7 @@ const WSFeeEstimation = ({
     name: "adhocRebateReason_data",
     isPropertyAssess: true,
     t: t
-  })), (fields === null || fields === void 0 ? void 0 : (_fields$adhocRebateRe = fields.adhocRebateReason_data) === null || _fields$adhocRebateRe === void 0 ? void 0 : _fields$adhocRebateRe.title) === "PT_OTHERS" && /*#__PURE__*/React.createElement("div", {
-    className: "field"
-  }, /*#__PURE__*/React.createElement(CardLabel, null, t("PT_REASON")), /*#__PURE__*/React.createElement(TextInput, Object.assign({
+  }))), (fields === null || fields === void 0 ? void 0 : (_fields$adhocRebateRe = fields.adhocRebateReason_data) === null || _fields$adhocRebateRe === void 0 ? void 0 : _fields$adhocRebateRe.title) === "PT_OTHERS" && /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t("PT_REASON")), /*#__PURE__*/React.createElement(TextInput, Object.assign({
     style: {
       background: "#FAFAFA"
     },
@@ -21115,7 +21412,7 @@ const WSFeeEstimation = ({
     pattern: "^[a-zA-Z ]*$",
     type: "text",
     title: t("TL_NAME_ERROR_MESSAGE")
-  }))), /*#__PURE__*/React.createElement(CardLabel, null, t("PT_HEAD_AMT")), /*#__PURE__*/React.createElement("div", {
+  }))), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t("PT_HEAD_AMT")), /*#__PURE__*/React.createElement("div", {
     className: "field"
   }, /*#__PURE__*/React.createElement(TextInput, Object.assign({
     style: {
@@ -21131,7 +21428,7 @@ const WSFeeEstimation = ({
     isRequired: true,
     pattern: "^[1-9]+[0-9]*$",
     title: t("ERR_DEFAULT_INPUT_FIELD_MSG")
-  }))))), " "), showToast && /*#__PURE__*/React.createElement(Toast, {
+  }))))))), showToast && /*#__PURE__*/React.createElement(Toast, {
     style: {
       zIndex: "10000"
     },
@@ -21245,10 +21542,7 @@ const ViewBreakup = ({
       marginTop: "12px"
     }
   }, /*#__PURE__*/React.createElement("span", {
-    style: {
-      cursor: "pointer",
-      color: "#a82227"
-    }
+    className: "add-details-link hover-button"
   }, t("WS_PAYMENT_VIEW_BREAKUP"))) : null, popup && /*#__PURE__*/React.createElement(Modal, {
     headerBarMain: /*#__PURE__*/React.createElement(Heading, {
       label: t("WS_CALCULATION_BREAKUP")
@@ -21690,15 +21984,11 @@ function ApplicationDetailsContent({
   oldValue,
   isInfoLabel = false
 }) {
-  var _applicationDetails$a2, _workflowDetails$data3, _workflowDetails$data4, _workflowDetails$data5, _workflowDetails$data6, _workflowDetails$data7, _workflowDetails$data8, _workflowDetails$data9, _workflowDetails$data0, _workflowDetails$data1, _workflowDetails$data10, _workflowDetails$data11, _workflowDetails$data19, _workflowDetails$data20;
+  var _applicationDetails$a, _workflowDetails$data3, _workflowDetails$data4, _workflowDetails$data5, _workflowDetails$data6, _workflowDetails$data7, _workflowDetails$data8, _workflowDetails$data9, _workflowDetails$data0, _workflowDetails$data1, _workflowDetails$data10, _workflowDetails$data11, _workflowDetails$data19, _workflowDetails$data20;
   const {
     t
   } = useTranslation();
-  const history = useHistory();
-  const location = useLocation();
   const [showPopup, setShowPopup] = useState(false);
-  const [selectedData, setSelectedData] = useState(null);
-  const searchParams = new URLSearchParams(location.search);
   let {
     id: applicationNo
   } = useParams();
@@ -21734,7 +22024,7 @@ function ApplicationDetailsContent({
     loaded: false,
     canLoad: false
   });
-  if ((applicationData === null || applicationData === void 0 ? void 0 : applicationData.status) == "ACTIVE" && !billData.loading && !billData.loaded && !billData.canLoad) {
+  if ((applicationData === null || applicationData === void 0 ? void 0 : applicationData.status) === "ACTIVE" && !billData.loading && !billData.loaded && !billData.canLoad) {
     updateCanFetchBillData({
       loading: false,
       loaded: false,
@@ -21750,7 +22040,7 @@ function ApplicationDetailsContent({
     setBillData((applicationData === null || applicationData === void 0 ? void 0 : applicationData.tenantId) || tenantId, applicationData === null || applicationData === void 0 ? void 0 : applicationData.propertyId, updatefetchBillData, updateCanFetchBillData);
   }
   const convertEpochToDateDMY = dateEpoch => {
-    if (dateEpoch == null || dateEpoch == undefined || dateEpoch == "") {
+    if (dateEpoch == null || dateEpoch === undefined || dateEpoch === "") {
       return "NA";
     }
     const dateFromApi = new Date(dateEpoch);
@@ -21834,7 +22124,6 @@ function ApplicationDetailsContent({
   const checkLocation = window.location.href.includes("employee/tl") || window.location.href.includes("employee/obps") || window.location.href.includes("employee/noc");
   const isNocLocation = window.location.href.includes("employee/noc");
   const isBPALocation = window.location.href.includes("employee/obps");
-  const isWS = window.location.href.includes("employee/ws");
   const getRowStyles = () => {
     if (window.location.href.includes("employee/obps") || window.location.href.includes("employee/noc")) {
       return {
@@ -21873,13 +22162,13 @@ function ApplicationDetailsContent({
     if (window.location.href.includes("employee/obps") || window.location.href.includes("employee/noc") || window.location.href.includes("employee/ws")) {
       return {
         lineHeight: "19px",
-        maxWidth: "950px",
+        maxWidth: "100%",
         minWidth: "280px"
       };
     } else if (checkLocation) {
       return {
         lineHeight: "19px",
-        maxWidth: "600px",
+        maxWidth: "100%",
         minWidth: "280px"
       };
     } else {
@@ -21927,7 +22216,6 @@ function ApplicationDetailsContent({
     });
   };
   const handleViewClick = data => {
-    setSelectedData(data);
     setShowPopup(true);
   };
   return /*#__PURE__*/React.createElement(Card, {
@@ -21942,8 +22230,8 @@ function ApplicationDetailsContent({
     infoClickLable: "WS_CLICK_ON_LABEL",
     infoClickInfoLabel: getClickInfoDetails(),
     infoClickInfoLabel1: getClickInfoDetails1()
-  }) : null, applicationDetails === null || applicationDetails === void 0 ? void 0 : (_applicationDetails$a2 = applicationDetails.applicationDetails) === null || _applicationDetails$a2 === void 0 ? void 0 : _applicationDetails$a2.map((detail, index) => {
-    var _detail$title, _detail$values, _detail$additionalDet, _applicationDetails$a3, _applicationDetails$a4, _applicationDetails$a5, _detail$additionalDet2, _applicationDetails$a6, _applicationDetails$a7, _detail$additionalDet3, _detail$additionalDet4, _detail$additionalDet5, _detail$additionalDet6, _detail$additionalDet7, _detail$additionalDet8, _detail$additionalDet9, _detail$additionalDet0, _detail$additionalDet1, _workflowDetails$data, _workflowDetails$data2, _detail$additionalDet10, _detail$additionalDet11, _detail$additionalDet12, _detail$additionalDet13, _detail$additionalDet14, _detail$additionalDet15, _detail$additionalDet16, _detail$additionalDet17, _detail$additionalDet18, _detail$additionalDet19, _detail$additionalDet20, _detail$additionalDet21, _detail$additionalDet22, _detail$additionalDet23, _detail$additionalDet24, _detail$additionalDet25, _detail$additionalDet26, _detail$additionalDet27, _detail$additionalDet28, _detail$additionalDet29;
+  }) : null, applicationDetails === null || applicationDetails === void 0 ? void 0 : (_applicationDetails$a = applicationDetails.applicationDetails) === null || _applicationDetails$a === void 0 ? void 0 : _applicationDetails$a.map((detail, index) => {
+    var _detail$title, _detail$values, _detail$additionalDet, _applicationDetails$a2, _applicationDetails$a3, _applicationDetails$a4, _detail$additionalDet2, _applicationDetails$a5, _applicationDetails$a6, _detail$additionalDet3, _detail$additionalDet4, _detail$additionalDet5, _detail$additionalDet6, _detail$additionalDet7, _detail$additionalDet8, _detail$additionalDet9, _detail$additionalDet0, _detail$additionalDet1, _workflowDetails$data, _workflowDetails$data2, _detail$additionalDet10, _detail$additionalDet11, _detail$additionalDet12, _detail$additionalDet13, _detail$additionalDet14, _detail$additionalDet15, _detail$additionalDet16, _detail$additionalDet17, _detail$additionalDet18, _detail$additionalDet19, _detail$additionalDet20, _detail$additionalDet21, _detail$additionalDet22, _detail$additionalDet23, _detail$additionalDet24, _detail$additionalDet25, _detail$additionalDet26, _detail$additionalDet27, _detail$additionalDet28, _detail$additionalDet29;
     return /*#__PURE__*/React.createElement(React.Fragment, {
       key: index
     }, /*#__PURE__*/React.createElement("div", {
@@ -22036,7 +22324,7 @@ function ApplicationDetailsContent({
         }
       }, /*#__PURE__*/React.createElement("button", null, " ", /*#__PURE__*/React.createElement(EditIcon, null), " ")), /*#__PURE__*/React.createElement("div", {
         key: index,
-        onClick: () => handleViewClick(element.data),
+        onClick: () => handleViewClick(),
         style: {
           cursor: "pointer"
         }
@@ -22137,8 +22425,8 @@ function ApplicationDetailsContent({
     })))), (detail === null || detail === void 0 ? void 0 : detail.belowComponent) && /*#__PURE__*/React.createElement(detail.belowComponent, null), (detail === null || detail === void 0 ? void 0 : (_detail$additionalDet = detail.additionalDetails) === null || _detail$additionalDet === void 0 ? void 0 : _detail$additionalDet.inspectionReport) && /*#__PURE__*/React.createElement(ScruntinyDetails, {
       scrutinyDetails: detail === null || detail === void 0 ? void 0 : detail.additionalDetails,
       paymentsList: paymentsList
-    }), (applicationDetails === null || applicationDetails === void 0 ? void 0 : (_applicationDetails$a3 = applicationDetails.applicationData) === null || _applicationDetails$a3 === void 0 ? void 0 : (_applicationDetails$a4 = _applicationDetails$a3.additionalDetails) === null || _applicationDetails$a4 === void 0 ? void 0 : (_applicationDetails$a5 = _applicationDetails$a4.fieldinspection_pending) === null || _applicationDetails$a5 === void 0 ? void 0 : _applicationDetails$a5.length) > 0 && (detail === null || detail === void 0 ? void 0 : (_detail$additionalDet2 = detail.additionalDetails) === null || _detail$additionalDet2 === void 0 ? void 0 : _detail$additionalDet2.fiReport) && /*#__PURE__*/React.createElement(InspectionReport, {
-      fiReport: applicationDetails === null || applicationDetails === void 0 ? void 0 : (_applicationDetails$a6 = applicationDetails.applicationData) === null || _applicationDetails$a6 === void 0 ? void 0 : (_applicationDetails$a7 = _applicationDetails$a6.additionalDetails) === null || _applicationDetails$a7 === void 0 ? void 0 : _applicationDetails$a7.fieldinspection_pending
+    }), (applicationDetails === null || applicationDetails === void 0 ? void 0 : (_applicationDetails$a2 = applicationDetails.applicationData) === null || _applicationDetails$a2 === void 0 ? void 0 : (_applicationDetails$a3 = _applicationDetails$a2.additionalDetails) === null || _applicationDetails$a3 === void 0 ? void 0 : (_applicationDetails$a4 = _applicationDetails$a3.fieldinspection_pending) === null || _applicationDetails$a4 === void 0 ? void 0 : _applicationDetails$a4.length) > 0 && (detail === null || detail === void 0 ? void 0 : (_detail$additionalDet2 = detail.additionalDetails) === null || _detail$additionalDet2 === void 0 ? void 0 : _detail$additionalDet2.fiReport) && /*#__PURE__*/React.createElement(InspectionReport, {
+      fiReport: applicationDetails === null || applicationDetails === void 0 ? void 0 : (_applicationDetails$a5 = applicationDetails.applicationData) === null || _applicationDetails$a5 === void 0 ? void 0 : (_applicationDetails$a6 = _applicationDetails$a5.additionalDetails) === null || _applicationDetails$a6 === void 0 ? void 0 : _applicationDetails$a6.fieldinspection_pending
     }), (detail === null || detail === void 0 ? void 0 : (_detail$additionalDet3 = detail.additionalDetails) === null || _detail$additionalDet3 === void 0 ? void 0 : _detail$additionalDet3.floors) && /*#__PURE__*/React.createElement(PropertyFloors, {
       floors: detail === null || detail === void 0 ? void 0 : (_detail$additionalDet4 = detail.additionalDetails) === null || _detail$additionalDet4 === void 0 ? void 0 : _detail$additionalDet4.floors
     }), (detail === null || detail === void 0 ? void 0 : (_detail$additionalDet5 = detail.additionalDetails) === null || _detail$additionalDet5 === void 0 ? void 0 : _detail$additionalDet5.owners) && /*#__PURE__*/React.createElement(PropertyOwners, {
@@ -22180,21 +22468,11 @@ function ApplicationDetailsContent({
     }), (detail === null || detail === void 0 ? void 0 : detail.isWaterConnectionDetails) && /*#__PURE__*/React.createElement(WSAdditonalDetails, {
       wsAdditionalDetails: detail,
       oldValue: oldValue
-    }), (detail === null || detail === void 0 ? void 0 : (_detail$additionalDet23 = detail.additionalDetails) === null || _detail$additionalDet23 === void 0 ? void 0 : _detail$additionalDet23.redirectUrl) && /*#__PURE__*/React.createElement("div", {
-      style: {
-        fontSize: "16px",
-        lineHeight: "24px",
-        fontWeight: "400",
-        padding: "10px 0px"
-      }
-    }, /*#__PURE__*/React.createElement(Link, {
+    }), (detail === null || detail === void 0 ? void 0 : (_detail$additionalDet23 = detail.additionalDetails) === null || _detail$additionalDet23 === void 0 ? void 0 : _detail$additionalDet23.redirectUrl) && /*#__PURE__*/React.createElement(Link, {
       to: detail === null || detail === void 0 ? void 0 : (_detail$additionalDet24 = detail.additionalDetails) === null || _detail$additionalDet24 === void 0 ? void 0 : (_detail$additionalDet25 = _detail$additionalDet24.redirectUrl) === null || _detail$additionalDet25 === void 0 ? void 0 : _detail$additionalDet25.url
     }, /*#__PURE__*/React.createElement("span", {
-      className: "link",
-      style: {
-        color: "#a82227"
-      }
-    }, detail === null || detail === void 0 ? void 0 : (_detail$additionalDet26 = detail.additionalDetails) === null || _detail$additionalDet26 === void 0 ? void 0 : (_detail$additionalDet27 = _detail$additionalDet26.redirectUrl) === null || _detail$additionalDet27 === void 0 ? void 0 : _detail$additionalDet27.title))), (detail === null || detail === void 0 ? void 0 : (_detail$additionalDet28 = detail.additionalDetails) === null || _detail$additionalDet28 === void 0 ? void 0 : _detail$additionalDet28.estimationDetails) && /*#__PURE__*/React.createElement(WSFeeEstimation, {
+      className: "add-details-link hover-button"
+    }, detail === null || detail === void 0 ? void 0 : (_detail$additionalDet26 = detail.additionalDetails) === null || _detail$additionalDet26 === void 0 ? void 0 : (_detail$additionalDet27 = _detail$additionalDet26.redirectUrl) === null || _detail$additionalDet27 === void 0 ? void 0 : _detail$additionalDet27.title)), (detail === null || detail === void 0 ? void 0 : (_detail$additionalDet28 = detail.additionalDetails) === null || _detail$additionalDet28 === void 0 ? void 0 : _detail$additionalDet28.estimationDetails) && /*#__PURE__*/React.createElement(WSFeeEstimation, {
       wsAdditionalDetails: detail,
       workflowDetails: workflowDetails
     }), (detail === null || detail === void 0 ? void 0 : (_detail$additionalDet29 = detail.additionalDetails) === null || _detail$additionalDet29 === void 0 ? void 0 : _detail$additionalDet29.estimationDetails) && /*#__PURE__*/React.createElement(ViewBreakup, {