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

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"
@@ -16077,6 +16129,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 +17012,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 +17022,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 +17198,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 +17223,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 +17233,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 +17365,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 +17392,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 +17402,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 +17519,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 +17568,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 +17578,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 +17822,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 +17873,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 +17883,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 +18011,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 +18812,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 +18822,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 +19086,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 +19118,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 +19128,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 +19242,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 +19266,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 +19276,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 +19362,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 +19390,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 +19400,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 +19513,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 +19537,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 +19547,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 +19667,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 +19691,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 +19701,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 +19819,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 +19907,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 +19917,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 +20102,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 +20963,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 +22789,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 +22799,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 +22830,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 +23589,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 +23599,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 +23620,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 +24064,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 +24075,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 +24124,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 +24389,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 +24399,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 +24450,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: {