@djb25/digit-ui-module-wt 1.0.25 → 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}`
   }))))));
 };
@@ -2347,12 +2397,12 @@ const WTCard = () => {
   const links = [{
     count: citizenInboxCount,
     label: t("ES_COMMON_INBOX"),
-    subLabel: "citizen",
+    subLabel: t("CITIZEN"),
     link: `${APPLICATION_PATH}/employee/wt/inbox`
   }, {
     count: fixedPointInboxCount,
     label: t("ES_COMMON_INBOX"),
-    subLabel: "Fixed Point",
+    subLabel: t("FIXED_POINT"),
     link: `${APPLICATION_PATH}/employee/wt/fixed-point/inbox`
   }, {
     label: t("ES_COMMON_APPLICATION_SEARCH"),
@@ -3361,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,
@@ -3393,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(", ")
     };
   });
@@ -3435,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
@@ -3558,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",
@@ -3616,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", {
@@ -3633,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", {
@@ -3650,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", {
@@ -3667,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", {
@@ -3684,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", {
@@ -3700,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", {
@@ -3736,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", {
@@ -3760,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")))));
 };
@@ -3832,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);
@@ -3844,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);
@@ -3882,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,
@@ -4322,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,
@@ -4683,7 +4746,7 @@ const RouteLayer = ({
   }, /*#__PURE__*/React.createElement("h4", {
     style: {
       margin: 0,
-      color: "#667eea"
+      color: "#1F5FA8"
     }
   }, t("ROUTE_INFORMATION")), /*#__PURE__*/React.createElement("button", {
     onClick: () => setShowSteps(false),
@@ -4738,7 +4801,7 @@ const RouteLayer = ({
       width: "20px",
       height: "20px",
       borderRadius: "50%",
-      background: "#667eea",
+      background: "#1F5FA8",
       color: "white",
       display: "flex",
       alignItems: "center",
@@ -4776,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],
@@ -4896,7 +4959,7 @@ const DriverCard = ({
       padding: "16px",
       borderRadius: "12px",
       background: isSelected ? "#f0f4ff" : "white",
-      border: `2px solid ${isSelected ? "#667eea" : "#f0f0f0"}`,
+      border: `2px solid ${isSelected ? "#1F5FA8" : "#f0f0f0"}`,
       cursor: "pointer",
       position: "relative",
       transition: "all 0.2s ease"
@@ -5187,7 +5250,7 @@ function LiveTrackingSystem() {
       padding: "16px 24px",
       borderRadius: "12px",
       boxShadow: "0 2px 8px rgba(0,0,0,0.05)",
-      border: "2px solid #667eea44"
+      border: "2px solid #1F5FA844"
     }
   }, /*#__PURE__*/React.createElement("div", {
     style: {
@@ -5293,7 +5356,7 @@ function LiveTrackingSystem() {
       top: "80px",
       left: "20px",
       zIndex: 2000,
-      background: "#667eea",
+      background: "#1F5FA8",
       color: "white",
       border: "none",
       borderRadius: "8px",
@@ -5356,7 +5419,7 @@ function LiveTrackingSystem() {
     style: {
       background: "none",
       border: "none",
-      color: "#667eea",
+      color: "#1F5FA8",
       fontSize: "12px",
       fontWeight: "700",
       cursor: "pointer"
@@ -5471,7 +5534,7 @@ function LiveTrackingSystem() {
     style: {
       padding: "4px 12px",
       borderRadius: "4px",
-      background: filterOnline === filter ? "#667eea" : "transparent",
+      background: filterOnline === filter ? "#1F5FA8" : "transparent",
       color: filterOnline === filter ? "white" : "#666",
       border: filterOnline === filter ? "none" : "1px solid #e0e0e0",
       cursor: "pointer",
@@ -5572,7 +5635,7 @@ function LiveTrackingSystem() {
     style: {
       fontWeight: "bold",
       fontSize: isMobile ? "14px" : "16px",
-      color: "#667eea",
+      color: "#1F5FA8",
       marginBottom: "8px",
       borderBottom: "1px solid #eee",
       paddingBottom: "4px"
@@ -5656,7 +5719,7 @@ function LiveTrackingSystem() {
     },
     style: {
       padding: isMobile ? "10px 12px" : "8px 16px",
-      background: "#667eea",
+      background: "#1F5FA8",
       color: "white",
       border: "none",
       borderRadius: "4px",
@@ -5710,7 +5773,7 @@ function LiveTrackingSystem() {
   }, /*#__PURE__*/React.createElement("h4", {
     style: {
       margin: 0,
-      color: "#667eea",
+      color: "#1F5FA8",
       fontSize: isMobile ? "14px" : "16px"
     }
   }, t("WT_SELECTED_DRIVER")), /*#__PURE__*/React.createElement(StatusBadge, {
@@ -5873,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
@@ -5896,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 = [{
@@ -5920,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);
@@ -5938,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);
@@ -5951,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(() => {
-    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);
+    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$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;
@@ -5980,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));
@@ -6030,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 || ""
     };
@@ -6038,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: {
@@ -6063,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 = () => {
@@ -6362,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: () => {
@@ -6382,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
@@ -6411,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"
@@ -6484,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,
@@ -7501,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"
@@ -7575,7 +7758,7 @@ const VendorAssign = ({
     formData: {
       serviceType: selectedServiceType
     }
-  })), /*#__PURE__*/React.createElement("div", {
+  }))), /*#__PURE__*/React.createElement("div", {
     style: {
       display: "flex",
       marginTop: "24px",
@@ -17442,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;
@@ -19750,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: {
@@ -19775,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 {
@@ -20329,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");
   };
@@ -21009,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
@@ -21055,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;
@@ -21070,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) => {
@@ -21101,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"
@@ -21133,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",
@@ -21148,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,
@@ -21159,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: {
@@ -21178,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: {
@@ -21194,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",
@@ -21207,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,
@@ -21218,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"
     },
@@ -21235,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: {
@@ -21251,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"
     },
@@ -21365,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")
@@ -21810,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();
@@ -21854,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,
@@ -21870,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);
@@ -21954,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 {
@@ -21993,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 {
@@ -22047,7 +22216,6 @@ function ApplicationDetailsContent({
     });
   };
   const handleViewClick = data => {
-    setSelectedData(data);
     setShowPopup(true);
   };
   return /*#__PURE__*/React.createElement(Card, {
@@ -22062,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", {
@@ -22156,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"
         }
@@ -22257,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, {
@@ -22300,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, {