@djb25/digit-ui-module-wt 1.0.36 → 1.0.38

package/dist/index.modern.js

@@ -1,4 +1,4 @@
-import { TickMark, ArrowDown, MobileNumber, CardLabelError, TextInput, Dropdown, DatePicker, SubmitBar, Card, Table, Loader, Toast, AppContainer, ModuleHeader, ArrowLeft, PrivateRoute, CitizenHomeCard, CHBIcon, PropertyHouse, HomeIcon, KeyNote, Modal, CardHeader, FormStep, CardLabel, RadioButtons, UploadFile, TextArea, CheckBox, CardSubHeader, StatusTable, Row, GenericFileIcon, LinkButton, EditIcon, Banner, EmployeeModuleCard, CloseSvg, Label, LinkLabel, ActionBar, DetailsCard, SearchAction, FilterAction, PopUp, ShippingTruck, CustomNameDropdown, MultiSelectDropdown, CollapsibleCardPage as CollapsibleCardPage$1, LabelFieldPair, AddIcon, Menu, CheckSvg, LayoutWrapper, Header, TelePhone, DisplayPhotos, CardSectionHeader, CheckPoint, ConnectingCheckPoints, MultiLink, Localities, RemoveableTag, FormComposer, PDFSvg, MultiUploadWrapper, Close as Close$g, BreakLine, InfoBannerIcon, ViewsIcon, ButtonSelector, LocationIcon, PTIcon, ApplicantDetails, AddressDetails } from '@djb25/digit-ui-react-components';
+import { TickMark, ArrowDown, MobileNumber, CardLabelError, TextInput, Dropdown, DatePicker, SubmitBar, Card, Table, Loader, Toast, AppContainer, ModuleHeader, ArrowLeft, PrivateRoute, CitizenHomeCard, CHBIcon, PropertyHouse, HomeIcon, KeyNote, Modal, CardHeader, FormStep, CardLabel, RadioButtons, UploadFile, TextArea, CheckBox, CardSubHeader, StatusTable, Row, GenericFileIcon, LinkButton, EditIcon, Banner, EmployeeModuleCard, CloseSvg, Label, LinkLabel, ActionBar, DetailsCard, SearchAction, FilterAction, PopUp, ShippingTruck, CustomNameDropdown, MultiSelectDropdown, CollapsibleCardPage as CollapsibleCardPage$1, LabelFieldPair, AddIcon, Menu, CheckSvg, LayoutWrapper, Header, TelePhone, DisplayPhotos, CardSectionHeader, CheckPoint, ConnectingCheckPoints, MultiLink, Localities, RemoveableTag, FormComposer, PDFSvg, MultiUploadWrapper, Close as Close$h, BreakLine, InfoBannerIcon, ViewsIcon, ButtonSelector, LocationIcon, PTIcon, ApplicantDetails, AddressDetails } from '@djb25/digit-ui-react-components';
 import React, { useRef, useEffect, useState, useMemo, useCallback, Fragment, useReducer } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useRouteMatch, useHistory, Switch, Route, Redirect, Link, useParams } from 'react-router-dom';
@@ -746,7 +746,8 @@ const WTSearchApplication = ({
   data,
   count,
   setShowToast,
-  moduleCode
+  moduleCode,
+  isFixedPoint
 }) => {
   const isMobile = window.Digit.Utils.browser.isMobile();
   const user = Digit.UserService.getUser().info;
@@ -775,6 +776,17 @@ const WTSearchApplication = ({
     defaultValues
   });
   const fromDateValue = watch("fromDate");
+  const {
+    data: fillingPointsData
+  } = Digit.Hooks.wt.useFillPointSearch({
+    tenantId: Digit.ULBService.getCurrentTenantId(),
+    filters: {
+      limit: 1000
+    }
+  }, {
+    enabled: !!isFixedPoint
+  });
+  const fillingPoints = (fillingPointsData === null || fillingPointsData === void 0 ? void 0 : fillingPointsData.fillingPoints) || [];
   const GetCell = value => /*#__PURE__*/React.createElement("span", {
     className: "cell-text"
   }, value);
@@ -992,6 +1004,19 @@ const WTSearchApplication = ({
       }),
       name: "toDate",
       control: control
+    })), isFixedPoint && /*#__PURE__*/React.createElement("div", {
+      className: "search-field-wrapper"
+    }, /*#__PURE__*/React.createElement("label", null, t("WT_FILLING_POINT")), /*#__PURE__*/React.createElement(Controller, {
+      control: control,
+      name: "fillingPointId",
+      render: props => /*#__PURE__*/React.createElement(Dropdown, {
+        selected: fillingPoints.find(fp => (fp.id || fp.fillingPointId || fp.bookingId) === props.value),
+        select: val => props.onChange((val === null || val === void 0 ? void 0 : val.id) || (val === null || val === void 0 ? void 0 : val.fillingPointId) || (val === null || val === void 0 ? void 0 : val.bookingId)),
+        onBlur: props.onBlur,
+        option: fillingPoints,
+        optionKey: "fillingPointName",
+        t: t
+      })
     }))), /*#__PURE__*/React.createElement("div", {
       className: "wt-search-actions",
       style: {
@@ -2626,7 +2651,7 @@ const SearchApplication = ({
   defaultSearchParams,
   clearSearch: _clearSearch
 }) => {
-  var _searchFields$filter;
+  var _searchParams$service, _searchFields$filter;
   const {
     t
   } = useTranslation();
@@ -2703,6 +2728,18 @@ const SearchApplication = ({
       onClick: clearSearch
     }, t("ES_COMMON_CLEAR_SEARCH"));
   };
+  const isFixedPoint = searchParams === null || searchParams === void 0 ? void 0 : (_searchParams$service = searchParams.services) === null || _searchParams$service === void 0 ? void 0 : _searchParams$service.includes("watertanker-fixedpoint");
+  const {
+    data: fillingPointsData
+  } = Digit.Hooks.wt.useFillPointSearch({
+    tenantId: Digit.ULBService.getCurrentTenantId(),
+    filters: {
+      limit: 1000
+    }
+  }, {
+    enabled: !!isFixedPoint
+  });
+  const fillingPoints = (fillingPointsData === null || fillingPointsData === void 0 ? void 0 : fillingPointsData.fillingPoints) || [];
   return /*#__PURE__*/React.createElement("form", {
     id: "search-form",
     onSubmit: handleSubmit(onSubmitInput),
@@ -2753,7 +2790,22 @@ const SearchApplication = ({
       },
       className: "inbox-search-form-error"
     }, formState === null || formState === void 0 ? void 0 : (_formState$errors2 = formState.errors) === null || _formState$errors2 === void 0 ? void 0 : (_formState$errors2$in = _formState$errors2[input.name]) === null || _formState$errors2$in === void 0 ? void 0 : _formState$errors2$in.message) : null);
-  })), /*#__PURE__*/React.createElement("div", {
+  }), isFixedPoint && /*#__PURE__*/React.createElement("div", {
+    className: "input-fields"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "mobile-input"
+  }, /*#__PURE__*/React.createElement(Label, null, t("WT_FILLING_POINT")), /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "fillingPointId",
+    render: props => /*#__PURE__*/React.createElement(Dropdown, {
+      selected: fillingPoints.find(fp => (fp.id || fp.fillingPointId || fp.bookingId) === props.value),
+      select: val => props.onChange((val === null || val === void 0 ? void 0 : val.id) || (val === null || val === void 0 ? void 0 : val.fillingPointId) || (val === null || val === void 0 ? void 0 : val.bookingId)),
+      onBlur: props.onBlur,
+      option: fillingPoints,
+      optionKey: "fillingPointName",
+      t: t
+    })
+  })))), /*#__PURE__*/React.createElement("div", {
     className: "formcomposer-section-button"
   }, isInboxPage ? /*#__PURE__*/React.createElement("div", {
     className: "generic-button clear-search"
@@ -6079,7 +6131,7 @@ 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, _formData$address10, _formData$address11, _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, _formData$address12, _userDetails$addresse;
   const {
     data: allCities
   } = Digit.Hooks.useTenants();
@@ -6094,12 +6146,14 @@ const AddFixFillAddress = ({
   const [landmark, setLandmark] = useState((formData === null || formData === void 0 ? void 0 : (_formData$address6 = formData.address) === null || _formData$address6 === void 0 ? void 0 : _formData$address6.landmark) || "");
   const [addressLine1, setAddressLine1] = useState((formData === null || formData === void 0 ? void 0 : (_formData$address7 = formData.address) === null || _formData$address7 === void 0 ? void 0 : _formData$address7.addressLine1) || "");
   const [addressLine2, setAddressLine2] = useState((formData === null || formData === void 0 ? void 0 : (_formData$address8 = formData.address) === null || _formData$address8 === void 0 ? void 0 : _formData$address8.addressLine2) || "");
-  const [addressType, setAddressType] = useState((formData === null || formData === void 0 ? void 0 : (_formData$address9 = formData.address) === null || _formData$address9 === void 0 ? void 0 : _formData$address9.addressType) || null);
+  const [addressType, setAddressType] = useState(formData !== null && formData !== void 0 && (_formData$address9 = formData.address) !== null && _formData$address9 !== void 0 && _formData$address9.addressType ? allOptions.find(a => a.code === formData.address.addressType) || formData.address.addressType : allOptions.find(a => a.code === "PERMANENT"));
   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 [assembly, setAssembly] = useState((formData === null || formData === void 0 ? void 0 : (_formData$address10 = formData.address) === null || _formData$address10 === void 0 ? void 0 : _formData$address10.assembly) || "");
+  const [latitude, setLatitude] = useState((formData === null || formData === void 0 ? void 0 : (_formData$address11 = formData.address) === null || _formData$address11 === void 0 ? void 0 : _formData$address11.latitude) || "");
+  const [longitude, setLongitude] = useState((formData === null || formData === void 0 ? void 0 : (_formData$address12 = formData.address) === null || _formData$address12 === void 0 ? void 0 : _formData$address12.longitude) || "");
   const [selectedAddress, setSelectedAddress] = useState("");
+  const [showPincodeSuggestions, setShowPincodeSuggestions] = useState(false);
   const isInitialized = useRef(!isEdit);
   const lastSyncedAddress = useRef(null);
   const lastBookingId = useRef(null);
@@ -6131,27 +6185,32 @@ const AddFixFillAddress = ({
   const structuredLocality = useMemo(() => {
     let localities = [];
     const boundaries = Array.isArray(boundaryData) ? boundaryData : boundaryData ? [boundaryData] : [];
-    const extractLocalities = (node, zone = null, ward = null) => {
+    const extractLocalities = (node, zone = null, ward = null, assembly = null) => {
       if (!node) return;
       let currentZone = zone;
       let currentWard = ward;
+      let currentAssembly = assembly;
       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 === "Assembly Constituency" || node.label === "ASSEMBLY_CONSTITUENCY") {
+        currentAssembly = 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
+          ward: currentWard,
+          assembly: currentAssembly
         });
       }
       if (node.children && node.children.length > 0) {
-        node.children.forEach(child => extractLocalities(child, currentZone, currentWard));
+        node.children.forEach(child => extractLocalities(child, currentZone, currentWard, currentAssembly));
       }
     };
     boundaries.forEach(rootNode => extractLocalities(rootNode));
@@ -6187,15 +6246,17 @@ const AddFixFillAddress = ({
   }, [structuredLocality, city]);
   const filteredLocalities = useMemo(() => {
     if (!pincode) return structuredLocality;
+    const isPincodeInList = fetchedPincodes.some(p => p.code === pincode);
+    if (!isPincodeInList) 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]);
+  }, [structuredLocality, pincode, fetchedPincodes]);
   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);
+    var _formData$address13;
+    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$address13 = formData.address) === null || _formData$address13 === void 0 ? void 0 : _formData$address13.id);
     if (currentId && lastBookingId.current !== currentId) {
       isInitialized.current = false;
       lastBookingId.current = currentId;
@@ -6213,26 +6274,25 @@ const AddFixFillAddress = ({
       setLandmark(addressData.landmark || "");
       setAddressLine1(addressData.addressLine1 || "");
       setAddressLine2(addressData.addressLine2 || "");
-      setAddressType(allOptions.find(a => a.code === addressData.addressType) || addressData.addressType || null);
+      setAddressType(allOptions.find(a => a.code === addressData.addressType) || addressData.addressType || allOptions.find(a => a.code === "PERMANENT"));
       setZone(addressData.zone || "");
       setBlock(addressData.block || "");
+      setAssembly(addressData.assembly || "");
       setLatitude(addressData.latitude || "");
       setLongitude(addressData.longitude || "");
-      if (boundaryData || !addressData.cityCode) {
-        if (Array.isArray(boundaryData)) {
-          const localityObj = boundaryData.find(l => l.code === addressData.localityCode || l.code === addressData.locality || l.i18nkey === addressData.locality);
-          setLocality(localityObj || addressData.locality || null);
-        } else if (boundaryData && typeof boundaryData === "object") {
-          const match = boundaryData.code === addressData.localityCode || boundaryData.code === addressData.locality || boundaryData.i18nkey === addressData.locality;
-          setLocality(match ? boundaryData : addressData.locality || null);
-        } else {
-          setLocality(addressData.locality || null);
+      if ((structuredLocality === null || structuredLocality === void 0 ? void 0 : structuredLocality.length) > 0 || !addressData.cityCode) {
+        const localityObj = structuredLocality.find(l => l.code === addressData.localityCode || l.code === addressData.locality || l.i18nkey === addressData.locality);
+        setLocality(localityObj || addressData.locality || null);
+        if (localityObj) {
+          if (!addressData.zone && localityObj.zone) setZone(localityObj.zone);
+          if (!addressData.block && localityObj.ward) setBlock(localityObj.ward);
+          if (!addressData.assembly && localityObj.assembly) setAssembly(localityObj.assembly);
         }
         isInitialized.current = true;
         lastSyncedAddress.current = JSON.stringify(addressData);
       }
     }
-  }, [formData === null || formData === void 0 ? void 0 : formData.address, city, allCities, boundaryData]);
+  }, [formData === null || formData === void 0 ? void 0 : formData.address, city, allCities, structuredLocality]);
   useEffect(() => {
     if (!navigator.geolocation) return;
     navigator.geolocation.getCurrentPosition(pos => {
@@ -6252,11 +6312,12 @@ const AddFixFillAddress = ({
       setAddressLine2(selectedAddress.address2);
       setZone(selectedAddress.zone);
       setBlock(selectedAddress.block);
+      setAssembly(selectedAddress.assembly);
       setLatitude(selectedAddress.latitude);
       setLongitude(selectedAddress.longitude);
       setAddressType(allOptions.find(a => a.code === selectedAddress.addressType));
     }
-  }, [selectedAddress]);
+  }, [selectedAddress, structuredLocality]);
   useEffect(() => {
     if (!onSelect || !isInitialized.current) return;
     const currentAddress = {
@@ -6271,6 +6332,7 @@ const AddFixFillAddress = ({
       addressType: (addressType === null || addressType === void 0 ? void 0 : addressType.code) || addressType || null,
       zone: zone || "",
       block: block || "",
+      assembly: assembly || "",
       latitude: latitude || "",
       longitude: longitude || ""
     };
@@ -6279,7 +6341,7 @@ 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, zone, block, latitude, longitude]);
+  }, [pincode, city, locality, houseNo, landmark, addressLine1, addressLine2, streetName, addressType, zone, block, assembly, latitude, longitude]);
   return /*#__PURE__*/React.createElement(CollapsibleCardPage$1, {
     title: t("WT_ADDRESS_DETAILS"),
     defaultOpen: true
@@ -6312,16 +6374,16 @@ const AddFixFillAddress = ({
     optionKey: "i18nKey",
     t: t,
     disable: true
-  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, t("PINCODE"), " ", /*#__PURE__*/React.createElement("span", {
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "relative"
+    }
+  }, /*#__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;
+  }, "*")), /*#__PURE__*/React.createElement(TextInput, {
+    value: pincode,
+    onChange: e => {
+      const newPin = e.target.value.replace(/\D/g, "").slice(0, 6);
       if (newPin !== pincode) {
         setLocality(null);
         setZone("");
@@ -6332,14 +6394,40 @@ const AddFixFillAddress = ({
         setAddressLine2("");
       }
       setPincode(newPin);
+      setShowPincodeSuggestions(true);
+    },
+    onFocus: () => setShowPincodeSuggestions(true),
+    onBlur: () => {
+      setTimeout(() => setShowPincodeSuggestions(false), 200);
     },
-    option: fetchedPincodes || [],
-    optionKey: "i18nKey",
-    t: t,
     style: {
       width: "100%"
+    },
+    maxlength: 6
+  }), showPincodeSuggestions && (fetchedPincodes === null || fetchedPincodes === void 0 ? void 0 : fetchedPincodes.length) > 0 && /*#__PURE__*/React.createElement("div", {
+    className: "options-card",
+    style: {
+      position: "absolute",
+      zIndex: 100,
+      width: "100%",
+      maxHeight: "200px",
+      overflowY: "auto",
+      backgroundColor: "white",
+      boxShadow: "0 2px 5px rgba(0,0,0,0.1)"
+    }
+  }, fetchedPincodes.filter(p => !pincode || p.code.toLowerCase().includes(pincode.toLowerCase())).map((p, index) => /*#__PURE__*/React.createElement("div", {
+    key: index,
+    className: "cp profile-dropdown--item",
+    style: {
+      padding: "10px",
+      borderBottom: "1px solid #eee",
+      cursor: "pointer"
+    },
+    onClick: () => {
+      setPincode(p.code);
+      setShowPincodeSuggestions(false);
     }
-  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, t("LOCALITY"), " ", /*#__PURE__*/React.createElement("span", {
+  }, p.code)))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, t("LOCALITY"), " ", /*#__PURE__*/React.createElement("span", {
     className: "astericColor"
   }, "*")), /*#__PURE__*/React.createElement(Dropdown, {
     selected: locality,
@@ -6351,13 +6439,7 @@ const AddFixFillAddress = ({
       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) {
-          const sanitizedPin = p.toString().split(".")[0];
-          setPincode(sanitizedPin);
-        }
-      }
+      if (val !== null && val !== void 0 && val.assembly) setAssembly(val.assembly);
     },
     option: filteredLocalities,
     optionKey: "i18nkey",
@@ -6413,6 +6495,14 @@ const AddFixFillAddress = ({
     style: {
       width: "100%"
     }
+  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, t("ASSEMBLY_CONSTITUENCY"), " ", /*#__PURE__*/React.createElement("span", {
+    className: "astericColor"
+  }, "*")), /*#__PURE__*/React.createElement(TextInput, {
+    value: assembly,
+    onChange: e => setAssembly(e.target.value),
+    style: {
+      width: "100%"
+    }
   })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, t("LATITUDE"), " ", /*#__PURE__*/React.createElement("span", {
     className: "astericColor"
   }, "*")), /*#__PURE__*/React.createElement(TextInput, {
@@ -6449,6 +6539,7 @@ const AddFillingPointAddress = () => {
   } = useTranslation();
   const location = useLocation();
   const history = useHistory();
+  const queryClient = useQueryClient();
   const queryParams = new URLSearchParams(location.search);
   const editId = queryParams.get("id");
   const [formData, setFormData] = useState({});
@@ -6528,6 +6619,7 @@ const AddFillingPointAddress = () => {
         setShowToast({
           label: editId ? t("WT_FILLING_POINT_UPDATED_SUCCESS") : t("WT_FILLING_POINT_CREATED_SUCCESS")
         });
+        queryClient.invalidateQueries("wtFillPointSearchList");
         setTimeout(() => {
           setShowToast(null);
           history.push(`/digit-ui/employee/wt/search-filling-fix-point`);
@@ -16077,6 +16169,186 @@ const Filter = ({
   })))));
 };
 
+const Close$1 = () => /*#__PURE__*/React.createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24",
+  fill: "#FFFFFF"
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M0 0h24v24H0V0z",
+  fill: "none"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
+}));
+const CloseBtn$1 = props => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "icon-bg-secondary",
+    onClick: props.onClick
+  }, /*#__PURE__*/React.createElement(Close$1, null));
+};
+const WTEditApplicationModal = ({
+  t,
+  applicationData,
+  closeModal
+}) => {
+  const [formData, setFormData] = useState({});
+  useEffect(() => {
+    if (applicationData) {
+      var _applicationData$appl, _applicationData$appl2, _applicationData$appl3, _applicationData$appl4, _applicationData$addr, _applicationData$addr2, _applicationData$addr3, _applicationData$addr4, _applicationData$addr5, _applicationData$addr6;
+      setFormData({
+        name: (applicationData === null || applicationData === void 0 ? void 0 : (_applicationData$appl = applicationData.applicantDetail) === null || _applicationData$appl === void 0 ? void 0 : _applicationData$appl.name) || "",
+        mobileNumber: (applicationData === null || applicationData === void 0 ? void 0 : (_applicationData$appl2 = applicationData.applicantDetail) === null || _applicationData$appl2 === void 0 ? void 0 : _applicationData$appl2.mobileNumber) || "",
+        emailId: (applicationData === null || applicationData === void 0 ? void 0 : (_applicationData$appl3 = applicationData.applicantDetail) === null || _applicationData$appl3 === void 0 ? void 0 : _applicationData$appl3.emailId) || "",
+        alternateNumber: (applicationData === null || applicationData === void 0 ? void 0 : (_applicationData$appl4 = applicationData.applicantDetail) === null || _applicationData$appl4 === void 0 ? void 0 : _applicationData$appl4.alternateNumber) || "",
+        houseNo: (applicationData === null || applicationData === void 0 ? void 0 : (_applicationData$addr = applicationData.address) === null || _applicationData$addr === void 0 ? void 0 : _applicationData$addr.houseNo) || "",
+        streetName: (applicationData === null || applicationData === void 0 ? void 0 : (_applicationData$addr2 = applicationData.address) === null || _applicationData$addr2 === void 0 ? void 0 : _applicationData$addr2.streetName) || "",
+        addressLine1: (applicationData === null || applicationData === void 0 ? void 0 : (_applicationData$addr3 = applicationData.address) === null || _applicationData$addr3 === void 0 ? void 0 : _applicationData$addr3.addressLine1) || "",
+        addressLine2: (applicationData === null || applicationData === void 0 ? void 0 : (_applicationData$addr4 = applicationData.address) === null || _applicationData$addr4 === void 0 ? void 0 : _applicationData$addr4.addressLine2) || "",
+        landmark: (applicationData === null || applicationData === void 0 ? void 0 : (_applicationData$addr5 = applicationData.address) === null || _applicationData$addr5 === void 0 ? void 0 : _applicationData$addr5.landmark) || "",
+        pincode: (applicationData === null || applicationData === void 0 ? void 0 : (_applicationData$addr6 = applicationData.address) === null || _applicationData$addr6 === void 0 ? void 0 : _applicationData$addr6.pincode) || "",
+        tankerType: (applicationData === null || applicationData === void 0 ? void 0 : applicationData.tankerType) || "",
+        waterType: (applicationData === null || applicationData === void 0 ? void 0 : applicationData.waterType) || "",
+        tankerQuantity: (applicationData === null || applicationData === void 0 ? void 0 : applicationData.tankerQuantity) || "",
+        waterQuantity: (applicationData === null || applicationData === void 0 ? void 0 : applicationData.waterQuantity) || "",
+        description: (applicationData === null || applicationData === void 0 ? void 0 : applicationData.description) || "",
+        deliveryDate: (applicationData === null || applicationData === void 0 ? void 0 : applicationData.deliveryDate) || "",
+        deliveryTime: (applicationData === null || applicationData === void 0 ? void 0 : applicationData.deliveryTime) || ""
+      });
+    }
+  }, [applicationData]);
+  const handleChange = (e, key) => {
+    setFormData({
+      ...formData,
+      [key]: e.target.value
+    });
+  };
+  const handleUpdate = () => {
+    console.log("Updated Data:", formData);
+    closeModal();
+  };
+  const fieldGroups = [{
+    title: "WT_APPLICANT_DETAILS",
+    fields: [{
+      label: "WT_APPLICANT_NAME",
+      key: "name"
+    }, {
+      label: "WT_MOBILE_NUMBER",
+      key: "mobileNumber"
+    }, {
+      label: "WT_ALT_MOBILE_NUMBER",
+      key: "alternateNumber"
+    }, {
+      label: "WT_EMAIL_ID",
+      key: "emailId"
+    }]
+  }, {
+    title: "WT_ADDRESS_DETAILS",
+    fields: [{
+      label: "WT_HOUSE_NO",
+      key: "houseNo"
+    }, {
+      label: "WT_STREET_NAME",
+      key: "streetName"
+    }, {
+      label: "WT_ADDRESS_LINE1",
+      key: "addressLine1"
+    }, {
+      label: "WT_ADDRESS_LINE2",
+      key: "addressLine2"
+    }, {
+      label: "WT_LANDMARK",
+      key: "landmark"
+    }, {
+      label: "WT_PINCODE",
+      key: "pincode"
+    }]
+  }, {
+    title: "WT_REQUEST_DETAILS",
+    fields: [{
+      label: "WT_TANKER_TYPE",
+      key: "tankerType"
+    }, {
+      label: "WT_WATER_TYPE",
+      key: "waterType"
+    }, {
+      label: "WT_TANKER_QUANTITY",
+      key: "tankerQuantity"
+    }, {
+      label: "WT_WATER_QUANTITY",
+      key: "waterQuantity"
+    }, {
+      label: "WT_DELIVERY_DATE",
+      key: "deliveryDate",
+      type: "date"
+    }, {
+      label: "WT_DELIVERY_TIME",
+      key: "deliveryTime",
+      type: "time"
+    }, {
+      label: "WT_DESCRIPTION",
+      key: "description",
+      fullWidth: true
+    }]
+  }];
+  return /*#__PURE__*/React.createElement(Modal, {
+    headerBarMain: /*#__PURE__*/React.createElement("h1", {
+      className: "heading-m"
+    }, t("WT_EDIT_APPLICATION_DETAILS")),
+    headerBarEnd: /*#__PURE__*/React.createElement(CloseBtn$1, {
+      onClick: closeModal
+    }),
+    actionCancelLabel: t("CS_COMMON_CANCEL"),
+    actionCancelOnSubmit: closeModal,
+    actionSaveLabel: t("CS_COMMON_UPDATE"),
+    actionSaveOnSubmit: handleUpdate
+  }, /*#__PURE__*/React.createElement(Card, {
+    style: {
+      maxHeight: "70vh",
+      overflowY: "auto",
+      padding: "20px"
+    }
+  }, fieldGroups.map((group, index) => /*#__PURE__*/React.createElement("div", {
+    key: index,
+    style: {
+      marginBottom: "24px"
+    }
+  }, /*#__PURE__*/React.createElement("h2", {
+    style: {
+      fontSize: "18px",
+      fontWeight: "bold",
+      marginBottom: "16px",
+      color: "#0B0C10",
+      borderBottom: "1px solid #e0e0e0",
+      paddingBottom: "8px"
+    }
+  }, t(group.title)), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexWrap: "wrap",
+      gap: "16px"
+    }
+  }, group.fields.map(field => /*#__PURE__*/React.createElement("div", {
+    key: field.key,
+    style: {
+      flex: field.fullWidth ? "1 1 100%" : "1 1 200px",
+      maxWidth: "100%"
+    }
+  }, /*#__PURE__*/React.createElement(CardLabel, {
+    style: {
+      fontWeight: "600",
+      marginBottom: "4px",
+      fontSize: "14px"
+    }
+  }, t(field.label)), /*#__PURE__*/React.createElement(TextInput, {
+    type: field.type || "text",
+    value: formData[field.key],
+    onChange: e => handleChange(e, field.key),
+    style: {
+      width: "100%",
+      maxWidth: "100%"
+    }
+  }))))))));
+};
+
 const configPTApproverApplication = ({
   t,
   action,
@@ -16780,7 +17052,7 @@ const Heading$1 = props => {
     className: "heading-m"
   }, props.label);
 };
-const Close$1 = () => /*#__PURE__*/React.createElement("svg", {
+const Close$2 = () => /*#__PURE__*/React.createElement("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24",
   fill: "#FFFFFF"
@@ -16790,11 +17062,11 @@ const Close$1 = () => /*#__PURE__*/React.createElement("svg", {
 }), /*#__PURE__*/React.createElement("path", {
   d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
 }));
-const CloseBtn$1 = props => {
+const CloseBtn$2 = props => {
   return /*#__PURE__*/React.createElement("div", {
     className: "icon-bg-secondary",
     onClick: props.onClick
-  }, /*#__PURE__*/React.createElement(Close$1, null));
+  }, /*#__PURE__*/React.createElement(Close$2, null));
 };
 const ActionModal = ({
   t,
@@ -16966,7 +17238,7 @@ const ActionModal = ({
     headerBarMain: /*#__PURE__*/React.createElement(Heading$1, {
       label: t(config.label.heading)
     }),
-    headerBarEnd: /*#__PURE__*/React.createElement(CloseBtn$1, {
+    headerBarEnd: /*#__PURE__*/React.createElement(CloseBtn$2, {
       onClick: closeModal
     }),
     actionCancelLabel: t(config.label.cancel),
@@ -16991,7 +17263,7 @@ const Heading$2 = props => {
     className: "heading-m"
   }, props.label);
 };
-const Close$2 = () => /*#__PURE__*/React.createElement("svg", {
+const Close$3 = () => /*#__PURE__*/React.createElement("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24",
   fill: "#FFFFFF"
@@ -17001,11 +17273,11 @@ const Close$2 = () => /*#__PURE__*/React.createElement("svg", {
 }), /*#__PURE__*/React.createElement("path", {
   d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
 }));
-const CloseBtn$2 = props => {
+const CloseBtn$3 = props => {
   return /*#__PURE__*/React.createElement("div", {
     className: "icon-bg-secondary",
     onClick: props.onClick
-  }, /*#__PURE__*/React.createElement(Close$2, null));
+  }, /*#__PURE__*/React.createElement(Close$3, null));
 };
 const ActionModal$1 = ({
   t,
@@ -17133,7 +17405,7 @@ const ActionModal$1 = ({
     headerBarMain: /*#__PURE__*/React.createElement(Heading$2, {
       label: t(config.label.heading)
     }),
-    headerBarEnd: /*#__PURE__*/React.createElement(CloseBtn$2, {
+    headerBarEnd: /*#__PURE__*/React.createElement(CloseBtn$3, {
       onClick: closeModal
     }),
     actionCancelLabel: t(config.label.cancel),
@@ -17160,7 +17432,7 @@ const Heading$3 = props => {
     className: "heading-m BPAheading-m"
   }, props.label);
 };
-const Close$3 = () => /*#__PURE__*/React.createElement("svg", {
+const Close$4 = () => /*#__PURE__*/React.createElement("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24",
   fill: "#FFFFFF"
@@ -17170,11 +17442,11 @@ const Close$3 = () => /*#__PURE__*/React.createElement("svg", {
 }), /*#__PURE__*/React.createElement("path", {
   d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
 }));
-const CloseBtn$3 = props => {
+const CloseBtn$4 = props => {
   return /*#__PURE__*/React.createElement("div", {
     className: "icon-bg-secondary",
     onClick: props.onClick
-  }, /*#__PURE__*/React.createElement(Close$3, null));
+  }, /*#__PURE__*/React.createElement(Close$4, null));
 };
 const ActionModal$2 = ({
   t,
@@ -17287,7 +17559,7 @@ const ActionModal$2 = ({
     headerBarMain: /*#__PURE__*/React.createElement(Heading$3, {
       label: t(config.label.heading)
     }),
-    headerBarEnd: /*#__PURE__*/React.createElement(CloseBtn$3, {
+    headerBarEnd: /*#__PURE__*/React.createElement(CloseBtn$4, {
       onClick: closeModal
     }),
     actionCancelLabel: t(config.label.cancel),
@@ -17336,7 +17608,7 @@ const Heading$4 = props => {
     className: "heading-m BPAheading-m"
   }, props.label);
 };
-const Close$4 = () => /*#__PURE__*/React.createElement("svg", {
+const Close$5 = () => /*#__PURE__*/React.createElement("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24",
   fill: "#FFFFFF"
@@ -17346,11 +17618,11 @@ const Close$4 = () => /*#__PURE__*/React.createElement("svg", {
 }), /*#__PURE__*/React.createElement("path", {
   d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
 }));
-const CloseBtn$4 = props => {
+const CloseBtn$5 = props => {
   return /*#__PURE__*/React.createElement("div", {
     className: "icon-bg-secondary",
     onClick: props.onClick
-  }, /*#__PURE__*/React.createElement(Close$4, null));
+  }, /*#__PURE__*/React.createElement(Close$5, null));
 };
 const ActionModal$3 = ({
   t,
@@ -17590,7 +17862,7 @@ const ActionModal$3 = ({
     headerBarMain: /*#__PURE__*/React.createElement(Heading$4, {
       label: t(config.label.heading)
     }),
-    headerBarEnd: /*#__PURE__*/React.createElement(CloseBtn$4, {
+    headerBarEnd: /*#__PURE__*/React.createElement(CloseBtn$5, {
       onClick: closeModal
     }),
     actionCancelLabel: t(config.label.cancel),
@@ -17641,7 +17913,7 @@ const Heading$5 = props => {
     className: "heading-m BPAheading-m"
   }, props.label);
 };
-const Close$5 = () => /*#__PURE__*/React.createElement("svg", {
+const Close$6 = () => /*#__PURE__*/React.createElement("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24",
   fill: "#FFFFFF"
@@ -17651,11 +17923,11 @@ const Close$5 = () => /*#__PURE__*/React.createElement("svg", {
 }), /*#__PURE__*/React.createElement("path", {
   d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
 }));
-const CloseBtn$5 = props => {
+const CloseBtn$6 = props => {
   return /*#__PURE__*/React.createElement("div", {
     className: "icon-bg-secondary",
     onClick: props.onClick
-  }, /*#__PURE__*/React.createElement(Close$5, null));
+  }, /*#__PURE__*/React.createElement(Close$6, null));
 };
 const ActionModal$4 = ({
   t,
@@ -17779,7 +18051,7 @@ const ActionModal$4 = ({
     headerBarMain: /*#__PURE__*/React.createElement(Heading$5, {
       label: t(config.label.heading)
     }),
-    headerBarEnd: /*#__PURE__*/React.createElement(CloseBtn$5, {
+    headerBarEnd: /*#__PURE__*/React.createElement(CloseBtn$6, {
       onClick: closeModal
     }),
     actionCancelLabel: t(config.label.cancel),
@@ -18580,7 +18852,7 @@ const Heading$6 = props => {
     className: "heading-m"
   }, props.label);
 };
-const Close$6 = () => /*#__PURE__*/React.createElement("svg", {
+const Close$7 = () => /*#__PURE__*/React.createElement("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24",
   fill: "#FFFFFF"
@@ -18590,11 +18862,11 @@ const Close$6 = () => /*#__PURE__*/React.createElement("svg", {
 }), /*#__PURE__*/React.createElement("path", {
   d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
 }));
-const CloseBtn$6 = props => {
+const CloseBtn$7 = props => {
   return /*#__PURE__*/React.createElement("div", {
     className: "icon-bg-secondary",
     onClick: props.onClick
-  }, /*#__PURE__*/React.createElement(Close$6, null));
+  }, /*#__PURE__*/React.createElement(Close$7, null));
 };
 const convertDateToEpochNew = (dateString, dayStartOrEnd = "dayend") => {
   try {
@@ -18854,7 +19126,7 @@ const ActionModal$5 = ({
     headerBarMain: /*#__PURE__*/React.createElement(Heading$6, {
       label: t(config.label.heading)
     }),
-    headerBarEnd: /*#__PURE__*/React.createElement(CloseBtn$6, {
+    headerBarEnd: /*#__PURE__*/React.createElement(CloseBtn$7, {
       onClick: closeModal
     }),
     actionCancelLabel: t(config.label.cancel),
@@ -18886,7 +19158,7 @@ const Heading$7 = props => {
     className: "heading-m"
   }, props.label);
 };
-const Close$7 = () => /*#__PURE__*/React.createElement("svg", {
+const Close$8 = () => /*#__PURE__*/React.createElement("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24",
   fill: "#FFFFFF"
@@ -18896,11 +19168,11 @@ const Close$7 = () => /*#__PURE__*/React.createElement("svg", {
 }), /*#__PURE__*/React.createElement("path", {
   d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
 }));
-const CloseBtn$7 = props => {
+const CloseBtn$8 = props => {
   return /*#__PURE__*/React.createElement("div", {
     className: "icon-bg-secondary",
     onClick: props.onClick
-  }, /*#__PURE__*/React.createElement(Close$7, null));
+  }, /*#__PURE__*/React.createElement(Close$8, null));
 };
 const ActionModal$6 = ({
   t,
@@ -19010,7 +19282,7 @@ const ActionModal$6 = ({
     headerBarMain: /*#__PURE__*/React.createElement(Heading$7, {
       label: t(config.label.heading)
     }),
-    headerBarEnd: /*#__PURE__*/React.createElement(CloseBtn$7, {
+    headerBarEnd: /*#__PURE__*/React.createElement(CloseBtn$8, {
       onClick: closeModal
     }),
     actionCancelLabel: t(config.label.cancel),
@@ -19034,7 +19306,7 @@ const Heading$8 = props => {
     className: "heading-m"
   }, props.label);
 };
-const Close$8 = () => /*#__PURE__*/React.createElement("svg", {
+const Close$9 = () => /*#__PURE__*/React.createElement("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24",
   fill: "#FFFFFF"
@@ -19044,11 +19316,11 @@ const Close$8 = () => /*#__PURE__*/React.createElement("svg", {
 }), /*#__PURE__*/React.createElement("path", {
   d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
 }));
-const CloseBtn$8 = props => {
+const CloseBtn$9 = props => {
   return /*#__PURE__*/React.createElement("div", {
     className: "icon-bg-secondary",
     onClick: props.onClick
-  }, /*#__PURE__*/React.createElement(Close$8, null));
+  }, /*#__PURE__*/React.createElement(Close$9, null));
 };
 const ActionModal$7 = ({
   t,
@@ -19130,7 +19402,7 @@ const ActionModal$7 = ({
     headerBarMain: /*#__PURE__*/React.createElement(Heading$8, {
       label: t(config.label.heading)
     }),
-    headerBarEnd: /*#__PURE__*/React.createElement(CloseBtn$8, {
+    headerBarEnd: /*#__PURE__*/React.createElement(CloseBtn$9, {
       onClick: closeModal
     }),
     actionCancelLabel: t(config.label.cancel),
@@ -19158,7 +19430,7 @@ const Heading$9 = props => {
     className: "heading-m"
   }, props.label);
 };
-const Close$9 = () => /*#__PURE__*/React.createElement("svg", {
+const Close$a = () => /*#__PURE__*/React.createElement("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24",
   fill: "#FFFFFF"
@@ -19168,11 +19440,11 @@ const Close$9 = () => /*#__PURE__*/React.createElement("svg", {
 }), /*#__PURE__*/React.createElement("path", {
   d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
 }));
-const CloseBtn$9 = props => {
+const CloseBtn$a = props => {
   return /*#__PURE__*/React.createElement("div", {
     className: "icon-bg-secondary",
     onClick: props.onClick
-  }, /*#__PURE__*/React.createElement(Close$9, null));
+  }, /*#__PURE__*/React.createElement(Close$a, null));
 };
 const ActionModal$8 = ({
   t,
@@ -19281,7 +19553,7 @@ const ActionModal$8 = ({
     headerBarMain: /*#__PURE__*/React.createElement(Heading$9, {
       label: t(config.label.heading)
     }),
-    headerBarEnd: /*#__PURE__*/React.createElement(CloseBtn$9, {
+    headerBarEnd: /*#__PURE__*/React.createElement(CloseBtn$a, {
       onClick: closeModal
     }),
     actionCancelLabel: t(config.label.cancel),
@@ -19305,7 +19577,7 @@ const Heading$a = props => {
     className: "heading-m"
   }, props.label);
 };
-const Close$a = () => /*#__PURE__*/React.createElement("svg", {
+const Close$b = () => /*#__PURE__*/React.createElement("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24",
   fill: "#FFFFFF"
@@ -19315,11 +19587,11 @@ const Close$a = () => /*#__PURE__*/React.createElement("svg", {
 }), /*#__PURE__*/React.createElement("path", {
   d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
 }));
-const CloseBtn$a = props => {
+const CloseBtn$b = props => {
   return /*#__PURE__*/React.createElement("div", {
     className: "icon-bg-secondary",
     onClick: props.onClick
-  }, /*#__PURE__*/React.createElement(Close$a, null));
+  }, /*#__PURE__*/React.createElement(Close$b, null));
 };
 const ActionModal$9 = ({
   t,
@@ -19435,7 +19707,7 @@ const ActionModal$9 = ({
     headerBarMain: /*#__PURE__*/React.createElement(Heading$a, {
       label: t(config.label.heading)
     }),
-    headerBarEnd: /*#__PURE__*/React.createElement(CloseBtn$a, {
+    headerBarEnd: /*#__PURE__*/React.createElement(CloseBtn$b, {
       onClick: closeModal
     }),
     actionCancelLabel: t(config.label.cancel),
@@ -19459,7 +19731,7 @@ const Heading$b = props => {
     className: "heading-m"
   }, props.label);
 };
-const Close$b = () => /*#__PURE__*/React.createElement("svg", {
+const Close$c = () => /*#__PURE__*/React.createElement("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24",
   fill: "#FFFFFF"
@@ -19469,11 +19741,11 @@ const Close$b = () => /*#__PURE__*/React.createElement("svg", {
 }), /*#__PURE__*/React.createElement("path", {
   d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
 }));
-const CloseBtn$b = props => {
+const CloseBtn$c = props => {
   return /*#__PURE__*/React.createElement("div", {
     className: "icon-bg-secondary",
     onClick: props.onClick
-  }, /*#__PURE__*/React.createElement(Close$b, null));
+  }, /*#__PURE__*/React.createElement(Close$c, null));
 };
 const ActionModal$a = ({
   t,
@@ -19587,7 +19859,7 @@ const ActionModal$a = ({
     headerBarMain: /*#__PURE__*/React.createElement(Heading$b, {
       label: t(config.label.heading)
     }),
-    headerBarEnd: /*#__PURE__*/React.createElement(CloseBtn$b, {
+    headerBarEnd: /*#__PURE__*/React.createElement(CloseBtn$c, {
       onClick: closeModal
     }),
     actionCancelLabel: t(config.label.cancel),
@@ -19675,7 +19947,7 @@ const Heading$c = props => {
     className: "heading-m"
   }, props.label);
 };
-const Close$c = () => /*#__PURE__*/React.createElement("svg", {
+const Close$d = () => /*#__PURE__*/React.createElement("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24",
   fill: "#FFFFFF"
@@ -19685,11 +19957,11 @@ const Close$c = () => /*#__PURE__*/React.createElement("svg", {
 }), /*#__PURE__*/React.createElement("path", {
   d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
 }));
-const CloseBtn$c = props => {
+const CloseBtn$d = props => {
   return /*#__PURE__*/React.createElement("div", {
     className: "icon-bg-secondary",
     onClick: props.onClick
-  }, /*#__PURE__*/React.createElement(Close$c, null));
+  }, /*#__PURE__*/React.createElement(Close$d, null));
 };
 const ActionModal$b = ({
   t,
@@ -19870,7 +20142,7 @@ const ActionModal$b = ({
     headerBarMain: /*#__PURE__*/React.createElement(Heading$c, {
       label: t(config.label.heading)
     }),
-    headerBarEnd: /*#__PURE__*/React.createElement(CloseBtn$c, {
+    headerBarEnd: /*#__PURE__*/React.createElement(CloseBtn$d, {
       onClick: closeModal
     }),
     actionCancelLabel: t(config.label.cancel),
@@ -20731,7 +21003,7 @@ const PermissionCheck = ({
     } : {},
     placeholder: t("BPA_ENTER_PERMIT_CONDITIONS_LABEL")
   }), /*#__PURE__*/React.createElement(LinkButton, {
-    label: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Close$g, {
+    label: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Close$h, {
       style: {
         float: "right",
         position: "relative",
@@ -22557,7 +22829,7 @@ const ArrearSummary = ({
   }, t("CS_HIDE_CARD"))));
 };
 
-const Close$d = () => /*#__PURE__*/React.createElement("svg", {
+const Close$e = () => /*#__PURE__*/React.createElement("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24",
   fill: "#FFFFFF"
@@ -22567,11 +22839,11 @@ const Close$d = () => /*#__PURE__*/React.createElement("svg", {
 }), /*#__PURE__*/React.createElement("path", {
   d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
 }));
-const CloseBtn$d = props => {
+const CloseBtn$e = props => {
   return /*#__PURE__*/React.createElement("div", {
     className: "icon-bg-secondary",
     onClick: props.onClick
-  }, /*#__PURE__*/React.createElement(Close$d, null));
+  }, /*#__PURE__*/React.createElement(Close$e, null));
 };
 const RenewPopup = ({
   t,
@@ -22598,7 +22870,7 @@ const RenewPopup = ({
     headerBarMain: /*#__PURE__*/React.createElement(Heading, {
       label: "SV_WANT_TO_EDIT"
     }),
-    headerBarEnd: /*#__PURE__*/React.createElement(CloseBtn$d, {
+    headerBarEnd: /*#__PURE__*/React.createElement(CloseBtn$e, {
       onClick: closeModal
     }),
     actionCancelLabel: t("CS_COMMON_BACK"),
@@ -23357,7 +23629,7 @@ function ApplicationDetailsActionBar({
   }, t(`${forcedActionPrefix || `WF_EMPLOYEE_${businessService === null || businessService === void 0 ? void 0 : businessService.toUpperCase()}`}_${actions === null || actions === void 0 ? void 0 : (_actions$4 = actions[0]) === null || _actions$4 === void 0 ? void 0 : _actions$4.action}`))));
 }
 
-const Close$e = () => /*#__PURE__*/React.createElement("svg", {
+const Close$f = () => /*#__PURE__*/React.createElement("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24",
   fill: "#FFFFFF"
@@ -23367,11 +23639,11 @@ const Close$e = () => /*#__PURE__*/React.createElement("svg", {
 }), /*#__PURE__*/React.createElement("path", {
   d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
 }));
-const CloseBtn$e = props => {
+const CloseBtn$f = props => {
   return /*#__PURE__*/React.createElement("div", {
     className: "icon-bg-secondary",
     onClick: props.onClick
-  }, /*#__PURE__*/React.createElement(Close$e, null));
+  }, /*#__PURE__*/React.createElement(Close$f, null));
 };
 function ApplicationDetailsWarningPopup({
   action,
@@ -23388,7 +23660,7 @@ function ApplicationDetailsWarningPopup({
     headerBarMain: /*#__PURE__*/React.createElement("h1", {
       className: "heading-m"
     }, t("PT_DUES_ARE_PENDING")),
-    headerBarEnd: /*#__PURE__*/React.createElement(CloseBtn$e, {
+    headerBarEnd: /*#__PURE__*/React.createElement(CloseBtn$f, {
       onClick: () => {
         closeWarningPopup();
       }
@@ -23832,7 +24104,7 @@ const WorkflowTimeline = ({
 };
 
 const ApplicationDetails$1 = () => {
-  var _applicationDetails$a, _applicationDetails$a2, _applicationDetails$a3, _appDetailsToShow$app;
+  var _applicationDetails$a, _applicationDetails$a2, _applicationDetails$a3, _appDetailsToShow$app, _appDetailsToShow$app2;
   const {
     t
   } = useTranslation();
@@ -23843,6 +24115,7 @@ const ApplicationDetails$1 = () => {
   } = useParams();
   const [showToast, setShowToast] = useState(null);
   const [appDetailsToShow, setAppDetailsToShow] = useState({});
+  const [showEditModal, setShowEditModal] = useState(false);
   const [BusinessService, setBusinessService] = useState("watertanker");
   const isWaterTanker = bookingNo === null || bookingNo === void 0 ? void 0 : bookingNo.startsWith("WT");
   const isTreePruning = bookingNo === null || bookingNo === void 0 ? void 0 : bookingNo.startsWith("TP");
@@ -23891,29 +24164,78 @@ const ApplicationDetails$1 = () => {
       height: "100%"
     }
   }, /*#__PURE__*/React.createElement("div", {
+    className: "employee-application-details",
     style: {
+      marginBottom: "20px",
       display: "flex",
-      flexDirection: "row",
-      gap: "20px",
+      justifyContent: "space-between",
+      alignItems: "center",
+      flexWrap: "wrap",
+      gap: "16px"
+    }
+  }, /*#__PURE__*/React.createElement(Header, {
+    styles: {
+      margin: "0px",
+      fontSize: "32px"
+    }
+  }, t("BOOKING_DETAILS")), /*#__PURE__*/React.createElement("div", {
+    onClick: () => setShowEditModal(true),
+    style: {
+      display: "flex",
+      alignItems: "center",
+      cursor: "pointer",
+      color: "#f47738",
+      gap: "8px",
+      padding: "8px 16px",
+      backgroundColor: "#fff",
+      borderRadius: "4px",
+      border: "1px solid #f47738",
+      transition: "all 0.2s ease"
+    }
+  }, /*#__PURE__*/React.createElement(EditIcon, {
+    style: {
+      fill: "#f47738",
+      width: "20px",
+      height: "20px"
+    }
+  }), /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontWeight: "600",
+      fontSize: "16px"
+    }
+  }, t("WT_EDIT_FIELDS")))), showEditModal && /*#__PURE__*/React.createElement(WTEditApplicationModal, {
+    t: t,
+    applicationData: appDetailsToShow === null || appDetailsToShow === void 0 ? void 0 : (_appDetailsToShow$app = appDetailsToShow.applicationData) === null || _appDetailsToShow$app === void 0 ? void 0 : _appDetailsToShow$app.applicationData,
+    closeModal: () => setShowEditModal(false)
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexWrap: "wrap",
+      gap: "24px",
       height: "100%"
     }
   }, /*#__PURE__*/React.createElement("div", {
-    className: `workflow-timeline-wrapper ${hideTimeline ? "hide-workflow" : ""}`
+    className: `workflow-timeline-wrapper ${hideTimeline ? "hide-workflow" : ""}`,
+    style: {
+      flex: "1 1 300px",
+      maxWidth: hideTimeline ? "0px" : "400px",
+      transition: "max-width 0.3s"
+    }
   }, /*#__PURE__*/React.createElement(WorkflowTimeline, {
     hideTimeline: hideTimeline,
     setHideTimeline: setHideTimeline,
     workflowDetails: workflowDetails
   })), /*#__PURE__*/React.createElement("div", {
-    className: !hideTimeline ? "hidden-card " : "",
     style: {
-      flex: "1",
-      overflowY: "scroll"
+      flex: "2 1 500px",
+      minWidth: "300px",
+      overflowY: "auto"
     }
   }, /*#__PURE__*/React.createElement(ApplicationDetails, {
     applicationDetails: appDetailsToShow === null || appDetailsToShow === void 0 ? void 0 : appDetailsToShow.applicationData,
     isLoading: isLoading,
     isDataLoading: isLoading,
-    applicationData: appDetailsToShow === null || appDetailsToShow === void 0 ? void 0 : (_appDetailsToShow$app = appDetailsToShow.applicationData) === null || _appDetailsToShow$app === void 0 ? void 0 : _appDetailsToShow$app.applicationData,
+    applicationData: appDetailsToShow === null || appDetailsToShow === void 0 ? void 0 : (_appDetailsToShow$app2 = appDetailsToShow.applicationData) === null || _appDetailsToShow$app2 === void 0 ? void 0 : _appDetailsToShow$app2.applicationData,
     mutate: mutate,
     workflowDetails: workflowDetails,
     businessService: businessService,
@@ -24107,7 +24429,7 @@ const TPCard = () => {
   return /*#__PURE__*/React.createElement(EmployeeModuleCard, propsForModuleCard);
 };
 
-const Close$f = () => /*#__PURE__*/React.createElement("svg", {
+const Close$g = () => /*#__PURE__*/React.createElement("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24",
   fill: "#FFFFFF"
@@ -24117,12 +24439,12 @@ const Close$f = () => /*#__PURE__*/React.createElement("svg", {
 }), /*#__PURE__*/React.createElement("path", {
   d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
 }));
-const CloseBtn$f = ({
+const CloseBtn$g = ({
   onClick
 }) => /*#__PURE__*/React.createElement("div", {
   className: "icon-bg-secondary",
   onClick: onClick
-}, /*#__PURE__*/React.createElement(Close$f, null));
+}, /*#__PURE__*/React.createElement(Close$g, null));
 const Heading$d = props => {
   return /*#__PURE__*/React.createElement("h1", {
     className: "heading-m"
@@ -24168,7 +24490,7 @@ const ServiceTypes = ({
     headerBarMain: /*#__PURE__*/React.createElement(Heading$d, {
       t: t
     }),
-    headerBarEnd: /*#__PURE__*/React.createElement(CloseBtn$f, {
+    headerBarEnd: /*#__PURE__*/React.createElement(CloseBtn$g, {
       onClick: () => window.history.back()
     }),
     popupStyles: {