@djb25/digit-ui-module-wt 1.0.59 → 1.0.61

package/dist/index.modern.js

@@ -2876,6 +2876,28 @@ const InboxLinks = ({
 const fieldComponents = {
   mobileNumber: MobileNumber
 };
+const FIXED_POINT_ADVANCED_FIELDS = ["vendorName", "vehicleName", "driverName", "fillingPointId"];
+const normalizeValue = value => {
+  if (value === undefined || value === null) return "";
+  return String(value);
+};
+const getVendorLabel = vendor => (vendor === null || vendor === void 0 ? void 0 : vendor.name) || (vendor === null || vendor === void 0 ? void 0 : vendor.vendor_id) || "";
+const getVehicleLabel = vehicle => (vehicle === null || vehicle === void 0 ? void 0 : vehicle.registrationNumber) || (vehicle === null || vehicle === void 0 ? void 0 : vehicle.name) || (vehicle === null || vehicle === void 0 ? void 0 : vehicle.type) || "";
+const getDriverLabel = driver => {
+  var _driver$owner;
+  return (driver === null || driver === void 0 ? void 0 : driver.name) || (driver === null || driver === void 0 ? void 0 : (_driver$owner = driver.owner) === null || _driver$owner === void 0 ? void 0 : _driver$owner.name) || (driver === null || driver === void 0 ? void 0 : driver.licenseNumber) || "";
+};
+const getFillingPointLabel = fillingPoint => (fillingPoint === null || fillingPoint === void 0 ? void 0 : fillingPoint.fillingPointName) || (fillingPoint === null || fillingPoint === void 0 ? void 0 : fillingPoint.name) || "";
+const getFillingPointValue = fillingPoint => typeof fillingPoint === "object" ? (fillingPoint === null || fillingPoint === void 0 ? void 0 : fillingPoint.id) || (fillingPoint === null || fillingPoint === void 0 ? void 0 : fillingPoint.fillingPointId) || (fillingPoint === null || fillingPoint === void 0 ? void 0 : fillingPoint.bookingId) || "" : normalizeValue(fillingPoint);
+const findSelectedOption = (options = [], value, getLabel, extraKeys = []) => {
+  if (!value) return null;
+  const selectedValues = typeof value === "object" ? [getLabel(value), ...extraKeys.map(key => value === null || value === void 0 ? void 0 : value[key])] : [value];
+  const normalizedSelectedValues = selectedValues.map(normalizeValue).filter(Boolean);
+  return options.find(option => {
+    const optionValues = [getLabel(option), ...extraKeys.map(key => option === null || option === void 0 ? void 0 : option[key])].map(normalizeValue).filter(Boolean);
+    return optionValues.some(optionValue => normalizedSelectedValues.includes(optionValue));
+  }) || (typeof value === "object" ? value : null);
+};
 const SearchApplication = ({
   onSearch,
   type,
@@ -2886,7 +2908,7 @@ const SearchApplication = ({
   defaultSearchParams,
   clearSearch: _clearSearch
 }) => {
-  var _searchParams$service, _searchFields$filter;
+  var _searchFields$filter;
   const {
     t
   } = useTranslation();
@@ -2916,16 +2938,34 @@ const SearchApplication = ({
     if (searchFields !== null && searchFields !== void 0 && searchFields.find(e => e.name === "locality") && !(form !== null && form !== void 0 && (_form$locality = form.locality) !== null && _form$locality !== void 0 && _form$locality.code)) isEmpty = true;
     return isEmpty;
   };
-  const mobileView = innerWidth <= 640;
+  const mobileView = window.innerWidth <= 640;
   const onSubmitInput = data => {
+    const updatedData = {
+      ...data
+    };
     if (!data.mobileNumber) {
-      delete data.mobileNumber;
-    }
-    data.delete = [];
+      delete updatedData.mobileNumber;
+    }
+    if (isFixedPoint) {
+      const vendorName = typeof updatedData.vendorName === "object" ? getVendorLabel(updatedData.vendorName) : normalizeValue(updatedData.vendorName);
+      const vehicleName = typeof updatedData.vehicleName === "object" ? getVehicleLabel(updatedData.vehicleName) : normalizeValue(updatedData.vehicleName);
+      const driverName = typeof updatedData.driverName === "object" ? getDriverLabel(updatedData.driverName) : normalizeValue(updatedData.driverName);
+      const fillingPointId = typeof updatedData.fillingPointId === "object" ? getFillingPointValue(updatedData.fillingPointId) : normalizeValue(updatedData.fillingPointId);
+      if (vendorName) updatedData.vendorName = vendorName;else delete updatedData.vendorName;
+      if (vehicleName) updatedData.vehicleName = vehicleName;else delete updatedData.vehicleName;
+      if (driverName) updatedData.driverName = driverName;else delete updatedData.driverName;
+      if (fillingPointId) updatedData.fillingPointId = fillingPointId;else delete updatedData.fillingPointId;
+    }
+    updatedData.delete = [];
     searchFields.forEach(field => {
-      if (!data[field.name]) data.delete.push(field.name);
+      if (!updatedData[field.name]) updatedData.delete.push(field.name);
     });
-    onSearch(data);
+    if (isFixedPoint) {
+      FIXED_POINT_ADVANCED_FIELDS.forEach(fieldName => {
+        if (!updatedData[fieldName]) updatedData.delete.push(fieldName);
+      });
+    }
+    onSearch(updatedData);
     if (type === "mobile") {
       onClose();
     }
@@ -2935,6 +2975,11 @@ const SearchApplication = ({
       ...acc,
       [field === null || field === void 0 ? void 0 : field.name]: ""
     }), {});
+    if (isFixedPoint) {
+      FIXED_POINT_ADVANCED_FIELDS.forEach(fieldName => {
+        resetValues[fieldName] = "";
+      });
+    }
     reset(resetValues);
     if (isInboxPage) {
       const _newParams = {
@@ -2944,6 +2989,11 @@ const SearchApplication = ({
       searchFields.forEach(e => {
         _newParams.delete.push(e === null || e === void 0 ? void 0 : e.name);
       });
+      if (isFixedPoint) {
+        FIXED_POINT_ADVANCED_FIELDS.forEach(fieldName => {
+          _newParams.delete.push(fieldName);
+        });
+      }
       onSearch({
         ..._newParams
       });
@@ -2963,7 +3013,7 @@ 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 isFixedPoint = window.location.href.includes("fixed-point");
   const {
     data: fillingPointsData
   } = Digit.Hooks.wt.useFillPointSearch({
@@ -2975,6 +3025,57 @@ const SearchApplication = ({
     enabled: !!isFixedPoint
   });
   const fillingPoints = (fillingPointsData === null || fillingPointsData === void 0 ? void 0 : fillingPointsData.fillingPoints) || [];
+  const fillingPointOptions = useMemo(() => fillingPoints.map(fillingPoint => ({
+    ...fillingPoint,
+    name: getFillingPointLabel(fillingPoint) || "NA"
+  })), [fillingPoints]);
+  const selectedFillingPoint = useMemo(() => findSelectedOption(fillingPointOptions, form === null || form === void 0 ? void 0 : form.fillingPointId, getFillingPointLabel, ["id", "fillingPointId", "bookingId", "name"]), [fillingPointOptions, form === null || form === void 0 ? void 0 : form.fillingPointId]);
+  const selectedFillingPointId = getFillingPointValue(selectedFillingPoint || (form === null || form === void 0 ? void 0 : form.fillingPointId));
+  const {
+    data: vendorData
+  } = Digit.Hooks.fsm.useVendorSearch({
+    tenantId: Digit.ULBService.getCurrentTenantId(),
+    filters: {
+      limit: 1000,
+      ...(selectedFillingPointId ? {
+        fillingPointId: selectedFillingPointId
+      } : {})
+    },
+    config: {
+      enabled: !!isFixedPoint
+    }
+  });
+  const vendorOptions = useMemo(() => ((vendorData === null || vendorData === void 0 ? void 0 : vendorData.vendor) || []).map(vendor => ({
+    ...vendor,
+    name: getVendorLabel(vendor) || "NA"
+  })), [vendorData]);
+  const selectedVendor = useMemo(() => findSelectedOption(vendorOptions, form === null || form === void 0 ? void 0 : form.vendorName, getVendorLabel, ["id", "vendor_id", "name"]), [vendorOptions, form === null || form === void 0 ? void 0 : form.vendorName]);
+  const allVehicleOptions = useMemo(() => vendorOptions.flatMap(vendor => ((vendor === null || vendor === void 0 ? void 0 : vendor.vehicles) || []).map(vehicle => ({
+    ...vehicle,
+    name: getVehicleLabel(vehicle) || "NA",
+    vendorId: vendor === null || vendor === void 0 ? void 0 : vendor.id
+  }))), [vendorOptions]);
+  const allDriverOptions = useMemo(() => vendorOptions.flatMap(vendor => ((vendor === null || vendor === void 0 ? void 0 : vendor.drivers) || []).map(driver => ({
+    ...driver,
+    name: getDriverLabel(driver) || "NA",
+    vendorId: vendor === null || vendor === void 0 ? void 0 : vendor.id
+  }))), [vendorOptions]);
+  const vehicleOptions = useMemo(() => {
+    if (!selectedVendor) return allVehicleOptions;
+    return ((selectedVendor === null || selectedVendor === void 0 ? void 0 : selectedVendor.vehicles) || []).map(vehicle => ({
+      ...vehicle,
+      name: getVehicleLabel(vehicle) || "NA",
+      vendorId: selectedVendor === null || selectedVendor === void 0 ? void 0 : selectedVendor.id
+    }));
+  }, [allVehicleOptions, selectedVendor]);
+  const driverOptions = useMemo(() => {
+    if (!selectedVendor) return allDriverOptions;
+    return ((selectedVendor === null || selectedVendor === void 0 ? void 0 : selectedVendor.drivers) || []).map(driver => ({
+      ...driver,
+      name: getDriverLabel(driver) || "NA",
+      vendorId: selectedVendor === null || selectedVendor === void 0 ? void 0 : selectedVendor.id
+    }));
+  }, [allDriverOptions, selectedVendor]);
   return /*#__PURE__*/React.createElement("form", {
     id: "search-form",
     onSubmit: handleSubmit(onSubmitInput),
@@ -2983,7 +3084,138 @@ const SearchApplication = ({
     className: "complaint-header"
   }, /*#__PURE__*/React.createElement("h2", null, t("ES_COMMON_SEARCH_BY")), /*#__PURE__*/React.createElement("span", {
     onClick: onClose
-  }, /*#__PURE__*/React.createElement(CloseSvg, null))), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(CloseSvg, null))), isFixedPoint ? /*#__PURE__*/React.createElement(CollapsibleCardPage, {
+    title: t("WT_SEARCH_FILTERS_LABEL") || "Search Filters",
+    defaultOpen: true,
+    tabs: [t("WT_SMART_SEARCH"), t("WT_ADVANCED_SEARCH")],
+    defaultTab: t("WT_SMART_SEARCH")
+  }, activeTab => /*#__PURE__*/React.createElement("div", {
+    className: "formcomposer-section-grid"
+  }, activeTab === t("WT_SMART_SEARCH") && /*#__PURE__*/React.createElement(Fragment, null, searchFields === null || searchFields === void 0 ? void 0 : searchFields.map(input => {
+    if (input.name !== "bookingNo" && input.name !== "mobileNumber") return null;
+    return /*#__PURE__*/React.createElement("div", {
+      key: input.name,
+      className: "input-fields"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "mobile-input"
+    }, /*#__PURE__*/React.createElement(Label, null, t(input.label) + ` ${input.isMendatory ? "*" : ""}`), !input.type ? /*#__PURE__*/React.createElement(Controller, {
+      render: props => /*#__PURE__*/React.createElement(TextInput, {
+        onChange: props.onChange,
+        value: props.value
+      }),
+      name: input.name,
+      control: control,
+      defaultValue: ""
+    }) : /*#__PURE__*/React.createElement(Controller, {
+      render: props => {
+        const Comp = fieldComponents === null || fieldComponents === void 0 ? void 0 : fieldComponents[input.type];
+        return /*#__PURE__*/React.createElement(Comp, {
+          formValue: form,
+          setValue: setValue,
+          onChange: props.onChange,
+          value: props.value
+        });
+      },
+      name: input.name,
+      control: control,
+      defaultValue: ""
+    })));
+  })), activeTab === t("WT_ADVANCED_SEARCH") && /*#__PURE__*/React.createElement(Fragment, null, searchFields === null || searchFields === void 0 ? void 0 : searchFields.map(input => /*#__PURE__*/React.createElement("div", {
+    key: input.name,
+    className: "input-fields"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "mobile-input"
+  }, /*#__PURE__*/React.createElement(Label, null, t(input.label) + ` ${input.isMendatory ? "*" : ""}`), !input.type ? /*#__PURE__*/React.createElement(Controller, {
+    render: props => /*#__PURE__*/React.createElement(TextInput, {
+      onChange: props.onChange,
+      value: props.value
+    }),
+    name: input.name,
+    control: control,
+    defaultValue: ""
+  }) : /*#__PURE__*/React.createElement(Controller, {
+    render: props => {
+      const Comp = fieldComponents === null || fieldComponents === void 0 ? void 0 : fieldComponents[input.type];
+      return /*#__PURE__*/React.createElement(Comp, {
+        formValue: form,
+        setValue: setValue,
+        onChange: props.onChange,
+        value: props.value
+      });
+    },
+    name: input.name,
+    control: control,
+    defaultValue: ""
+  })))), /*#__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: findSelectedOption(fillingPointOptions, props.value, getFillingPointLabel, ["id", "fillingPointId", "bookingId", "name"]),
+      select: value => {
+        props.onChange(value);
+        setValue("vendorName", "");
+        setValue("vehicleName", "");
+        setValue("driverName", "");
+      },
+      onBlur: props.onBlur,
+      option: fillingPointOptions,
+      optionKey: "name",
+      t: t
+    })
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "input-fields"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "mobile-input"
+  }, /*#__PURE__*/React.createElement(Label, null, t("WT_VENDOR_NAME")), /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "vendorName",
+    render: props => /*#__PURE__*/React.createElement(Dropdown, {
+      selected: findSelectedOption(vendorOptions, props.value, getVendorLabel, ["id", "vendor_id", "name"]),
+      select: value => {
+        props.onChange(value);
+        setValue("vehicleName", "");
+        setValue("driverName", "");
+      },
+      onBlur: props.onBlur,
+      option: vendorOptions,
+      optionKey: "name",
+      t: t
+    })
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "input-fields"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "mobile-input"
+  }, /*#__PURE__*/React.createElement(Label, null, t("WT_VEHICLE_NO")), /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "vehicleName",
+    render: props => /*#__PURE__*/React.createElement(Dropdown, {
+      selected: findSelectedOption(vehicleOptions, props.value, getVehicleLabel, ["id", "registrationNumber", "name"]),
+      select: props.onChange,
+      onBlur: props.onBlur,
+      option: vehicleOptions,
+      optionKey: "name",
+      t: t
+    })
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "input-fields"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "mobile-input"
+  }, /*#__PURE__*/React.createElement(Label, null, t("WT_DRIVER_NAME")), /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "driverName",
+    render: props => /*#__PURE__*/React.createElement(Dropdown, {
+      selected: findSelectedOption(driverOptions, props.value, getDriverLabel, ["id", "ownerId", "licenseNumber", "name"]),
+      select: props.onChange,
+      onBlur: props.onBlur,
+      option: driverOptions,
+      optionKey: "name",
+      t: t
+    })
+  })))))) : /*#__PURE__*/React.createElement("div", {
     className: "formcomposer-section-grid"
   }, searchFields === null || searchFields === void 0 ? void 0 : (_searchFields$filter = searchFields.filter(e => true)) === null || _searchFields$filter === void 0 ? void 0 : _searchFields$filter.map((input, index) => {
     var _formState$dirtyField, _formState$errors, _formState$errors$inp, _formState$errors2, _formState$errors2$in;
@@ -3025,22 +3257,7 @@ 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);
-  }), 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", {
+  })), /*#__PURE__*/React.createElement("div", {
     className: "formcomposer-section-button"
   }, isInboxPage ? /*#__PURE__*/React.createElement("div", {
     className: "generic-button clear-search"
@@ -3050,6 +3267,7 @@ const SearchApplication = ({
     className: "generic-button",
     disabled: !!Object.keys(formState.errors).length || formValueEmpty(),
     label: t("ES_COMMON_SEARCH"),
+    onClick: handleSubmit(onSubmitInput),
     submit: true,
     form: "search-form"
   })), (type === "mobile" || mobileView) && /*#__PURE__*/React.createElement(ActionBar, {
@@ -3065,6 +3283,7 @@ const SearchApplication = ({
     style: {
       flex: 1
     },
+    onClick: handleSubmit(onSubmitInput),
     submit: true
   }))));
 };
@@ -3100,7 +3319,7 @@ const WTDesktopInbox = ({
   const [clearSearchCalled, setClearSearchCalled] = useState(false);
   const columns = React.useMemo(() => props.isSearch ? tableConfig.searchColumns(props) : tableConfig.inboxColumns(props) || [], []);
   const inboxCsvColumns = React.useMemo(() => {
-    var _columns$, _columns$2, _columns$3, _columns$4, _columns$find2;
+    var _columns$, _columns$2, _columns$3, _columns$4, _columns$find3;
     const csvColumns = [{
       Header: (columns === null || columns === void 0 ? void 0 : (_columns$ = columns[0]) === null || _columns$ === void 0 ? void 0 : _columns$.Header) || t("WT_BOOKING_NO"),
       exportAccessor: row => {
@@ -3129,20 +3348,67 @@ const WTDesktopInbox = ({
         return t(`${prefix}_REVENUE_${row.searchData.localityCode}`);
       }
     }];
-    if (columns !== null && columns !== void 0 && columns.some(column => (column === null || column === void 0 ? void 0 : column.id) === "createdTime")) {
+    if (columns !== null && columns !== void 0 && columns.some(column => (column === null || column === void 0 ? void 0 : column.id) === "fillingPoint")) {
       var _columns$find;
       csvColumns.push({
-        Header: (columns === null || columns === void 0 ? void 0 : (_columns$find = columns.find(column => (column === null || column === void 0 ? void 0 : column.id) === "createdTime")) === null || _columns$find === void 0 ? void 0 : _columns$find.Header) || t("CREATED_AT"),
+        Header: (columns === null || columns === void 0 ? void 0 : (_columns$find = columns.find(column => (column === null || column === void 0 ? void 0 : column.id) === "fillingPoint")) === null || _columns$find === void 0 ? void 0 : _columns$find.Header) || t("Filling Point"),
+        exportAccessor: row => {
+          var _row$searchData7, _row$searchData7$fill, _row$searchData8;
+          return (row === null || row === void 0 ? void 0 : (_row$searchData7 = row.searchData) === null || _row$searchData7 === void 0 ? void 0 : (_row$searchData7$fill = _row$searchData7.fillingPointMetadata) === null || _row$searchData7$fill === void 0 ? void 0 : _row$searchData7$fill.name) || (row === null || row === void 0 ? void 0 : (_row$searchData8 = row.searchData) === null || _row$searchData8 === void 0 ? void 0 : _row$searchData8.fillingPointName) || "-";
+        }
+      });
+    }
+    if (columns !== null && columns !== void 0 && columns.some(column => (column === null || column === void 0 ? void 0 : column.id) === "createdTime")) {
+      var _columns$find2;
+      csvColumns.push({
+        Header: (columns === null || columns === void 0 ? void 0 : (_columns$find2 = columns.find(column => (column === null || column === void 0 ? void 0 : column.id) === "createdTime")) === null || _columns$find2 === void 0 ? void 0 : _columns$find2.Header) || t("CREATED_AT"),
         exportAccessor: row => getCreatedAtValue(row)
       });
     }
     csvColumns.push({
-      Header: (columns === null || columns === void 0 ? void 0 : (_columns$find2 = columns.find(column => (column === null || column === void 0 ? void 0 : column.id) === "applicationStatus")) === null || _columns$find2 === void 0 ? void 0 : _columns$find2.Header) || t("WT_STATUS"),
+      Header: (columns === null || columns === void 0 ? void 0 : (_columns$find3 = columns.find(column => (column === null || column === void 0 ? void 0 : column.id) === "applicationStatus")) === null || _columns$find3 === void 0 ? void 0 : _columns$find3.Header) || t("WT_STATUS"),
       exportAccessor: row => {
         var _row$workflowData2, _row$workflowData2$st;
         return row !== null && row !== void 0 && (_row$workflowData2 = row.workflowData) !== null && _row$workflowData2 !== void 0 && (_row$workflowData2$st = _row$workflowData2.state) !== null && _row$workflowData2$st !== void 0 && _row$workflowData2$st.applicationStatus ? t(row.workflowData.state.applicationStatus) : "";
       }
     });
+    if (columns !== null && columns !== void 0 && columns.some(column => (column === null || column === void 0 ? void 0 : column.id) === "vendorName")) {
+      var _columns$find4;
+      csvColumns.push({
+        Header: (columns === null || columns === void 0 ? void 0 : (_columns$find4 = columns.find(column => (column === null || column === void 0 ? void 0 : column.id) === "vendorName")) === null || _columns$find4 === void 0 ? void 0 : _columns$find4.Header) || t("WT_VENDOR_NAME"),
+        exportAccessor: row => {
+          var _row$searchData9, _row$searchData9$vend, _row$searchData0;
+          return (row === null || row === void 0 ? void 0 : (_row$searchData9 = row.searchData) === null || _row$searchData9 === void 0 ? void 0 : (_row$searchData9$vend = _row$searchData9.vendor) === null || _row$searchData9$vend === void 0 ? void 0 : _row$searchData9$vend.name) || (row === null || row === void 0 ? void 0 : (_row$searchData0 = row.searchData) === null || _row$searchData0 === void 0 ? void 0 : _row$searchData0.vendorName) || "-";
+        }
+      });
+    }
+    if (columns !== null && columns !== void 0 && columns.some(column => (column === null || column === void 0 ? void 0 : column.id) === "vehicleNumber")) {
+      var _columns$find5;
+      csvColumns.push({
+        Header: (columns === null || columns === void 0 ? void 0 : (_columns$find5 = columns.find(column => (column === null || column === void 0 ? void 0 : column.id) === "vehicleNumber")) === null || _columns$find5 === void 0 ? void 0 : _columns$find5.Header) || t("WT_VEHICLE_NO"),
+        exportAccessor: row => {
+          var _searchData$vendor, _searchData$vendor$ve;
+          const searchData = row === null || row === void 0 ? void 0 : row.searchData;
+          const mappedVehicle = (searchData === null || searchData === void 0 ? void 0 : searchData.vehicle) || (searchData === null || searchData === void 0 ? void 0 : (_searchData$vendor = searchData.vendor) === null || _searchData$vendor === void 0 ? void 0 : (_searchData$vendor$ve = _searchData$vendor.vehicles) === null || _searchData$vendor$ve === void 0 ? void 0 : _searchData$vendor$ve.find(vehicle => (vehicle === null || vehicle === void 0 ? void 0 : vehicle.id) === (searchData === null || searchData === void 0 ? void 0 : searchData.vehicleId)));
+          return (mappedVehicle === null || mappedVehicle === void 0 ? void 0 : mappedVehicle.registrationNumber) || (mappedVehicle === null || mappedVehicle === void 0 ? void 0 : mappedVehicle.name) || (mappedVehicle === null || mappedVehicle === void 0 ? void 0 : mappedVehicle.type) || (searchData === null || searchData === void 0 ? void 0 : searchData.vehicleName) || (searchData === null || searchData === void 0 ? void 0 : searchData.vehicleRegistrationNo) || "-";
+        }
+      });
+    }
+    if (columns !== null && columns !== void 0 && columns.some(column => (column === null || column === void 0 ? void 0 : column.id) === "driverName")) {
+      var _columns$find6;
+      csvColumns.push({
+        Header: (columns === null || columns === void 0 ? void 0 : (_columns$find6 = columns.find(column => (column === null || column === void 0 ? void 0 : column.id) === "driverName")) === null || _columns$find6 === void 0 ? void 0 : _columns$find6.Header) || t("WT_DRIVER_NAME"),
+        exportAccessor: row => {
+          var _searchData$vendor2, _searchData$vendor2$d, _mappedDriver$owner;
+          const searchData = row === null || row === void 0 ? void 0 : row.searchData;
+          const mappedDriver = (searchData === null || searchData === void 0 ? void 0 : searchData.driver) || (searchData === null || searchData === void 0 ? void 0 : (_searchData$vendor2 = searchData.vendor) === null || _searchData$vendor2 === void 0 ? void 0 : (_searchData$vendor2$d = _searchData$vendor2.drivers) === null || _searchData$vendor2$d === void 0 ? void 0 : _searchData$vendor2$d.find(driver => {
+            var _driver$owner;
+            return (driver === null || driver === void 0 ? void 0 : driver.id) === (searchData === null || searchData === void 0 ? void 0 : searchData.driverId) || (driver === null || driver === void 0 ? void 0 : driver.ownerId) === (searchData === null || searchData === void 0 ? void 0 : searchData.driverId) || (driver === null || driver === void 0 ? void 0 : (_driver$owner = driver.owner) === null || _driver$owner === void 0 ? void 0 : _driver$owner.uuid) === (searchData === null || searchData === void 0 ? void 0 : searchData.driverId);
+          }));
+          return (mappedDriver === null || mappedDriver === void 0 ? void 0 : mappedDriver.name) || (mappedDriver === null || mappedDriver === void 0 ? void 0 : (_mappedDriver$owner = mappedDriver.owner) === null || _mappedDriver$owner === void 0 ? void 0 : _mappedDriver$owner.name) || (searchData === null || searchData === void 0 ? void 0 : searchData.driverName) || "-";
+        }
+      });
+    }
     return csvColumns;
   }, [columns, getCreatedAtValue, t]);
   let result;
@@ -3759,6 +4025,18 @@ const Inbox = ({
     if (searchParams !== null && searchParams !== void 0 && searchParams.bookingNo) {
       moduleSearchCriteria.bookingNo = searchParams.bookingNo;
     }
+    if (searchParams !== null && searchParams !== void 0 && searchParams.vendorName) {
+      moduleSearchCriteria.vendorName = searchParams.vendorName;
+    }
+    if (searchParams !== null && searchParams !== void 0 && searchParams.vehicleName) {
+      moduleSearchCriteria.vehicleName = searchParams.vehicleName;
+    }
+    if (searchParams !== null && searchParams !== void 0 && searchParams.driverName) {
+      moduleSearchCriteria.driverName = searchParams.driverName;
+    }
+    if (searchParams !== null && searchParams !== void 0 && searchParams.fillingPointId) {
+      moduleSearchCriteria.fillingPointId = searchParams.fillingPointId;
+    }
     if (Array.isArray(searchParams === null || searchParams === void 0 ? void 0 : searchParams.locality) && searchParams.locality.length > 0) {
       moduleSearchCriteria.locality = searchParams.locality.map(item => String((item === null || item === void 0 ? void 0 : item.code) || "").split("_").pop()).filter(Boolean);
     }
@@ -9912,7 +10190,7 @@ const EmployeeApp = ({
   }), /*#__PURE__*/React.createElement(PrivateRoute, {
     path: `${path}/booking-details/:id`,
     component: props => /*#__PURE__*/React.createElement(LayoutWrapper, {
-      layoutClass: "normal"
+      layoutClass: "action"
     }, /*#__PURE__*/React.createElement(ApplicationDetails, Object.assign({}, props, {
       parentRoute: path
     })))
@@ -16964,6 +17242,23 @@ const getLocalityTranslation = (localityCode, tenantId, t) => {
   const prefix = tenant.replace(".", "_").toUpperCase();
   return t(`${prefix}_REVENUE_${localityCode}`);
 };
+const getVendorNameFromSearchData = searchData => {
+  var _searchData$vendor;
+  return (searchData === null || searchData === void 0 ? void 0 : (_searchData$vendor = searchData.vendor) === null || _searchData$vendor === void 0 ? void 0 : _searchData$vendor.name) || (searchData === null || searchData === void 0 ? void 0 : searchData.vendorName) || "-";
+};
+const getVehicleNameFromSearchData = searchData => {
+  var _searchData$vendor2, _searchData$vendor2$v;
+  const mappedVehicle = (searchData === null || searchData === void 0 ? void 0 : searchData.vehicle) || (searchData === null || searchData === void 0 ? void 0 : (_searchData$vendor2 = searchData.vendor) === null || _searchData$vendor2 === void 0 ? void 0 : (_searchData$vendor2$v = _searchData$vendor2.vehicles) === null || _searchData$vendor2$v === void 0 ? void 0 : _searchData$vendor2$v.find(vehicle => (vehicle === null || vehicle === void 0 ? void 0 : vehicle.id) === (searchData === null || searchData === void 0 ? void 0 : searchData.vehicleId)));
+  return (mappedVehicle === null || mappedVehicle === void 0 ? void 0 : mappedVehicle.registrationNumber) || (mappedVehicle === null || mappedVehicle === void 0 ? void 0 : mappedVehicle.name) || (mappedVehicle === null || mappedVehicle === void 0 ? void 0 : mappedVehicle.type) || (searchData === null || searchData === void 0 ? void 0 : searchData.vehicleName) || (searchData === null || searchData === void 0 ? void 0 : searchData.vehicleRegistrationNo) || "-";
+};
+const getDriverNameFromSearchData = searchData => {
+  var _searchData$vendor3, _searchData$vendor3$d, _mappedDriver$owner;
+  const mappedDriver = (searchData === null || searchData === void 0 ? void 0 : searchData.driver) || (searchData === null || searchData === void 0 ? void 0 : (_searchData$vendor3 = searchData.vendor) === null || _searchData$vendor3 === void 0 ? void 0 : (_searchData$vendor3$d = _searchData$vendor3.drivers) === null || _searchData$vendor3$d === void 0 ? void 0 : _searchData$vendor3$d.find(driver => {
+    var _driver$owner;
+    return (driver === null || driver === void 0 ? void 0 : driver.id) === (searchData === null || searchData === void 0 ? void 0 : searchData.driverId) || (driver === null || driver === void 0 ? void 0 : driver.ownerId) === (searchData === null || searchData === void 0 ? void 0 : searchData.driverId) || (driver === null || driver === void 0 ? void 0 : (_driver$owner = driver.owner) === null || _driver$owner === void 0 ? void 0 : _driver$owner.uuid) === (searchData === null || searchData === void 0 ? void 0 : searchData.driverId);
+  }));
+  return (mappedDriver === null || mappedDriver === void 0 ? void 0 : mappedDriver.name) || (mappedDriver === null || mappedDriver === void 0 ? void 0 : (_mappedDriver$owner = mappedDriver.owner) === null || _mappedDriver$owner === void 0 ? void 0 : _mappedDriver$owner.name) || (searchData === null || searchData === void 0 ? void 0 : searchData.driverName) || "-";
+};
 const TableConfig = t => ({
   WT: {
     inboxColumns: props => [{
@@ -17079,7 +17374,40 @@ const TableConfig = t => ({
         var _original$workflowDat, _original$workflowDat2;
         return GetMobCell(t(`ES_WT_COMMON_STATUS_${original === null || original === void 0 ? void 0 : (_original$workflowDat = original.workflowData) === null || _original$workflowDat === void 0 ? void 0 : (_original$workflowDat2 = _original$workflowDat.state) === null || _original$workflowDat2 === void 0 ? void 0 : _original$workflowDat2["applicationStatus"]}`));
       }
-    }],
+    }, ...(window.location.href.includes("fixed-point") ? [{
+      Header: t("WT_VENDOR_NAME"),
+      id: "vendorName",
+      accessor: row => getVendorNameFromSearchData(row === null || row === void 0 ? void 0 : row.searchData),
+      Cell: ({
+        row
+      }) => {
+        var _row$original9;
+        return GetCell(getVendorNameFromSearchData(row === null || row === void 0 ? void 0 : (_row$original9 = row.original) === null || _row$original9 === void 0 ? void 0 : _row$original9.searchData));
+      },
+      mobileCell: original => GetMobCell(getVendorNameFromSearchData(original === null || original === void 0 ? void 0 : original.searchData))
+    }, {
+      Header: t("WT_VEHICLE_NO"),
+      id: "vehicleNumber",
+      accessor: row => getVehicleNameFromSearchData(row === null || row === void 0 ? void 0 : row.searchData),
+      Cell: ({
+        row
+      }) => {
+        var _row$original0;
+        return GetCell(getVehicleNameFromSearchData(row === null || row === void 0 ? void 0 : (_row$original0 = row.original) === null || _row$original0 === void 0 ? void 0 : _row$original0.searchData));
+      },
+      mobileCell: original => GetMobCell(getVehicleNameFromSearchData(original === null || original === void 0 ? void 0 : original.searchData))
+    }, {
+      Header: t("WT_DRIVER_NAME"),
+      id: "driverName",
+      accessor: row => getDriverNameFromSearchData(row === null || row === void 0 ? void 0 : row.searchData),
+      Cell: ({
+        row
+      }) => {
+        var _row$original1;
+        return GetCell(getDriverNameFromSearchData(row === null || row === void 0 ? void 0 : (_row$original1 = row.original) === null || _row$original1 === void 0 ? void 0 : _row$original1.searchData));
+      },
+      mobileCell: original => GetMobCell(getDriverNameFromSearchData(original === null || original === void 0 ? void 0 : original.searchData))
+    }] : [])],
     serviceRequestIdKey: original => {
       var _original$t, _original$t$props;
       return original === null || original === void 0 ? void 0 : (_original$t = original[t("WT_INBOX_UNIQUE_BOOKING_NO")]) === null || _original$t === void 0 ? void 0 : (_original$t$props = _original$t.props) === null || _original$t$props === void 0 ? void 0 : _original$t$props.children;
@@ -17096,12 +17424,12 @@ const TableConfig = t => ({
       Cell: ({
         row
       }) => {
-        var _row$original9, _row$original9$search, _row$original0, _row$original0$search;
+        var _row$original10, _row$original10$searc, _row$original11, _row$original11$searc;
         return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
           className: "link"
         }, /*#__PURE__*/React.createElement(Link, {
-          to: `${props.parentRoute}/booking-details/` + `${row === null || row === void 0 ? void 0 : (_row$original9 = row.original) === null || _row$original9 === void 0 ? void 0 : (_row$original9$search = _row$original9.searchData) === null || _row$original9$search === void 0 ? void 0 : _row$original9$search["bookingNo"]}`
-        }, (_row$original0 = row.original) === null || _row$original0 === void 0 ? void 0 : (_row$original0$search = _row$original0.searchData) === null || _row$original0$search === void 0 ? void 0 : _row$original0$search["bookingNo"])));
+          to: `${props.parentRoute}/booking-details/` + `${row === null || row === void 0 ? void 0 : (_row$original10 = row.original) === null || _row$original10 === void 0 ? void 0 : (_row$original10$searc = _row$original10.searchData) === null || _row$original10$searc === void 0 ? void 0 : _row$original10$searc["bookingNo"]}`
+        }, (_row$original11 = row.original) === null || _row$original11 === void 0 ? void 0 : (_row$original11$searc = _row$original11.searchData) === null || _row$original11$searc === void 0 ? void 0 : _row$original11$searc["bookingNo"])));
       },
       mobileCell: original => {
         var _original$searchData1;
@@ -17147,8 +17475,8 @@ const TableConfig = t => ({
       Cell: ({
         row
       }) => {
-        var _row$original1, _row$original1$search, _row$original10, _row$original10$searc;
-        return GetCell(getLocalityTranslation((_row$original1 = row.original) === null || _row$original1 === void 0 ? void 0 : (_row$original1$search = _row$original1.searchData) === null || _row$original1$search === void 0 ? void 0 : _row$original1$search["localityCode"], (_row$original10 = row.original) === null || _row$original10 === void 0 ? void 0 : (_row$original10$searc = _row$original10.searchData) === null || _row$original10$searc === void 0 ? void 0 : _row$original10$searc.tenantId, t));
+        var _row$original12, _row$original12$searc, _row$original13, _row$original13$searc;
+        return GetCell(getLocalityTranslation((_row$original12 = row.original) === null || _row$original12 === void 0 ? void 0 : (_row$original12$searc = _row$original12.searchData) === null || _row$original12$searc === void 0 ? void 0 : _row$original12$searc["localityCode"], (_row$original13 = row.original) === null || _row$original13 === void 0 ? void 0 : (_row$original13$searc = _row$original13.searchData) === null || _row$original13$searc === void 0 ? void 0 : _row$original13$searc.tenantId, t));
       },
       mobileCell: original => {
         var _original$searchData14, _original$searchData15;
@@ -17164,8 +17492,8 @@ const TableConfig = t => ({
       Cell: ({
         row
       }) => {
-        var _row$original12, _row$original12$workf, _row$original12$workf2;
-        return GetCell(t(`${row === null || row === void 0 ? void 0 : (_row$original12 = row.original) === null || _row$original12 === void 0 ? void 0 : (_row$original12$workf = _row$original12.workflowData) === null || _row$original12$workf === void 0 ? void 0 : (_row$original12$workf2 = _row$original12$workf.state) === null || _row$original12$workf2 === void 0 ? void 0 : _row$original12$workf2["applicationStatus"]}`));
+        var _row$original15, _row$original15$workf, _row$original15$workf2;
+        return GetCell(t(`${row === null || row === void 0 ? void 0 : (_row$original15 = row.original) === null || _row$original15 === void 0 ? void 0 : (_row$original15$workf = _row$original15.workflowData) === null || _row$original15$workf === void 0 ? void 0 : (_row$original15$workf2 = _row$original15$workf.state) === null || _row$original15$workf2 === void 0 ? void 0 : _row$original15$workf2["applicationStatus"]}`));
       },
       mobileCell: original => {
         var _original$workflowDat3, _original$workflowDat4;
@@ -17188,12 +17516,12 @@ const TableConfig = t => ({
       Cell: ({
         row
       }) => {
-        var _row$original13, _row$original13$searc, _row$original14, _row$original14$searc;
+        var _row$original16, _row$original16$searc, _row$original17, _row$original17$searc;
         return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
           className: "link"
         }, /*#__PURE__*/React.createElement(Link, {
-          to: `${props.parentRoute}/booking-details/` + `${row === null || row === void 0 ? void 0 : (_row$original13 = row.original) === null || _row$original13 === void 0 ? void 0 : (_row$original13$searc = _row$original13.searchData) === null || _row$original13$searc === void 0 ? void 0 : _row$original13$searc["bookingNo"]}`
-        }, (_row$original14 = row.original) === null || _row$original14 === void 0 ? void 0 : (_row$original14$searc = _row$original14.searchData) === null || _row$original14$searc === void 0 ? void 0 : _row$original14$searc["bookingNo"])));
+          to: `${props.parentRoute}/booking-details/` + `${row === null || row === void 0 ? void 0 : (_row$original16 = row.original) === null || _row$original16 === void 0 ? void 0 : (_row$original16$searc = _row$original16.searchData) === null || _row$original16$searc === void 0 ? void 0 : _row$original16$searc["bookingNo"]}`
+        }, (_row$original17 = row.original) === null || _row$original17 === void 0 ? void 0 : (_row$original17$searc = _row$original17.searchData) === null || _row$original17$searc === void 0 ? void 0 : _row$original17$searc["bookingNo"])));
       },
       mobileCell: original => {
         var _original$searchData16;
@@ -17239,8 +17567,8 @@ const TableConfig = t => ({
       Cell: ({
         row
       }) => {
-        var _row$original15, _row$original15$searc, _row$original16, _row$original16$searc;
-        return GetCell(getLocalityTranslation((_row$original15 = row.original) === null || _row$original15 === void 0 ? void 0 : (_row$original15$searc = _row$original15.searchData) === null || _row$original15$searc === void 0 ? void 0 : _row$original15$searc["localityCode"], (_row$original16 = row.original) === null || _row$original16 === void 0 ? void 0 : (_row$original16$searc = _row$original16.searchData) === null || _row$original16$searc === void 0 ? void 0 : _row$original16$searc.tenantId, t));
+        var _row$original18, _row$original18$searc, _row$original19, _row$original19$searc;
+        return GetCell(getLocalityTranslation((_row$original18 = row.original) === null || _row$original18 === void 0 ? void 0 : (_row$original18$searc = _row$original18.searchData) === null || _row$original18$searc === void 0 ? void 0 : _row$original18$searc["localityCode"], (_row$original19 = row.original) === null || _row$original19 === void 0 ? void 0 : (_row$original19$searc = _row$original19.searchData) === null || _row$original19$searc === void 0 ? void 0 : _row$original19$searc.tenantId, t));
       },
       mobileCell: original => {
         var _original$searchData21, _original$searchData22;
@@ -17256,8 +17584,8 @@ const TableConfig = t => ({
       Cell: ({
         row
       }) => {
-        var _row$original18, _row$original18$workf, _row$original18$workf2;
-        return GetCell(t(`${row === null || row === void 0 ? void 0 : (_row$original18 = row.original) === null || _row$original18 === void 0 ? void 0 : (_row$original18$workf = _row$original18.workflowData) === null || _row$original18$workf === void 0 ? void 0 : (_row$original18$workf2 = _row$original18$workf.state) === null || _row$original18$workf2 === void 0 ? void 0 : _row$original18$workf2["applicationStatus"]}`));
+        var _row$original21, _row$original21$workf, _row$original21$workf2;
+        return GetCell(t(`${row === null || row === void 0 ? void 0 : (_row$original21 = row.original) === null || _row$original21 === void 0 ? void 0 : (_row$original21$workf = _row$original21.workflowData) === null || _row$original21$workf === void 0 ? void 0 : (_row$original21$workf2 = _row$original21$workf.state) === null || _row$original21$workf2 === void 0 ? void 0 : _row$original21$workf2["applicationStatus"]}`));
       },
       mobileCell: original => {
         var _original$workflowDat5, _original$workflowDat6;
@@ -17380,6 +17708,7 @@ const Filter = ({
       status: null,
       applicationStatus: null,
       fromDate: "",
+      toDate: "",
       fillingPointId: null,
       fillingPoint: null
     };
@@ -17464,11 +17793,56 @@ const Filter = ({
     style: {
       marginTop: "16px"
     }
-  }, /*#__PURE__*/React.createElement("label", null, t("DATE")), /*#__PURE__*/React.createElement(DatePicker, {
-    date: _searchParams === null || _searchParams === void 0 ? void 0 : _searchParams.fromDate,
-    onChange: date => localParamChange({
-      fromDate: date
-    }),
+  }, /*#__PURE__*/React.createElement("label", null, t("FROM_DATE")), /*#__PURE__*/React.createElement(DatePicker, {
+    date: typeof (_searchParams === null || _searchParams === void 0 ? void 0 : _searchParams.fromDate) === "number" ? (() => {
+      const d = new Date(_searchParams.fromDate);
+      const y = d.getFullYear();
+      const m = String(d.getMonth() + 1).padStart(2, "0");
+      const day = String(d.getDate()).padStart(2, "0");
+      return `${y}-${m}-${day}`;
+    })() : _searchParams === null || _searchParams === void 0 ? void 0 : _searchParams.fromDate,
+    onChange: date => {
+      if (date) {
+        const dateParts = date.split("-");
+        const fromDateObj = new Date(dateParts[0], dateParts[1] - 1, dateParts[2]);
+        fromDateObj.setHours(0, 0, 0, 0);
+        localParamChange({
+          fromDate: fromDateObj.getTime()
+        });
+      } else {
+        localParamChange({
+          fromDate: ""
+        });
+      }
+    },
+    max: new Date().toISOString().split("T")[0]
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "search-field-wrapper",
+    style: {
+      marginTop: "16px"
+    }
+  }, /*#__PURE__*/React.createElement("label", null, t("TO_DATE")), /*#__PURE__*/React.createElement(DatePicker, {
+    date: typeof (_searchParams === null || _searchParams === void 0 ? void 0 : _searchParams.toDate) === "number" ? (() => {
+      const d = new Date(_searchParams.toDate);
+      const y = d.getFullYear();
+      const m = String(d.getMonth() + 1).padStart(2, "0");
+      const day = String(d.getDate()).padStart(2, "0");
+      return `${y}-${m}-${day}`;
+    })() : _searchParams === null || _searchParams === void 0 ? void 0 : _searchParams.toDate,
+    onChange: date => {
+      if (date) {
+        const dateParts = date.split("-");
+        const toDateObj = new Date(dateParts[0], dateParts[1] - 1, dateParts[2]);
+        toDateObj.setHours(23, 59, 59, 999);
+        localParamChange({
+          toDate: toDateObj.getTime()
+        });
+      } else {
+        localParamChange({
+          toDate: ""
+        });
+      }
+    },
     max: new Date().toISOString().split("T")[0]
   })), /*#__PURE__*/React.createElement("div", {
     className: "tag-container hide-x-scrollbar"
@@ -22984,10 +23358,11 @@ function PropertyDocuments({
   const [filesArray, setFilesArray] = useState(() => []);
   const tenantId = Digit.ULBService.getCurrentTenantId();
   const [pdfFiles, setPdfFiles] = useState({});
+  const [modalFile, setModalFile] = useState(null);
   useEffect(() => {
     var _acc;
     let acc = [];
-    documents === null || documents === void 0 ? void 0 : documents.forEach((element, index, array) => {
+    documents === null || documents === void 0 ? void 0 : documents.forEach(element => {
       acc = [...acc, ...(element.values ? element.values : [])];
     });
     setFilesArray((_acc = acc) === null || _acc === void 0 ? void 0 : _acc.map(value => value === null || value === void 0 ? void 0 : value.fileStoreId));
@@ -23005,12 +23380,170 @@ function PropertyDocuments({
     }
   }, [filesArray]);
   const checkLocation = window.location.href.includes("employee/tl") || window.location.href.includes("/obps") || window.location.href.includes("employee/ws");
+  const isWSLocation = window.location.href.includes("employee/ws");
   const isStakeholderApplication = window.location.href.includes("stakeholder");
+  const getDocSubType = documentType => {
+    if (!documentType) return "";
+    const parts = documentType.split(".");
+    const last = parts[parts.length - 1] || "";
+    return last.replace(/_/g, " ").replace(/\b\w/g, c => c.toUpperCase());
+  };
+  const renderModal = () => {
+    if (!modalFile) return null;
+    const isPdf = modalFile.toLowerCase().includes(".pdf") || modalFile.toLowerCase().includes("pdf");
+    return /*#__PURE__*/React.createElement(Modal, {
+      headerBarMain: /*#__PURE__*/React.createElement("h1", {
+        className: "heading-m"
+      }, "Document Preview"),
+      headerBarEnd: /*#__PURE__*/React.createElement("div", {
+        onClick: () => setModalFile(null),
+        style: {
+          cursor: "pointer",
+          padding: "5px",
+          marginTop: "-5px"
+        }
+      }, /*#__PURE__*/React.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        fill: "#000000",
+        width: "24px",
+        height: "24px"
+      }, /*#__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"
+      }))),
+      hideSubmit: true,
+      popupStyles: {
+        maxWidth: "80vw",
+        width: "100%"
+      },
+      popupModuleMianStyles: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        padding: "0",
+        overflowY: "hidden"
+      }
+    }, isPdf ? /*#__PURE__*/React.createElement("iframe", {
+      src: modalFile,
+      title: "Document Preview",
+      style: {
+        width: "100%",
+        height: "80vh",
+        border: "none",
+        display: "block"
+      }
+    }) : /*#__PURE__*/React.createElement("img", {
+      src: modalFile,
+      alt: "Document Preview",
+      style: {
+        maxWidth: "100%",
+        maxHeight: "80vh",
+        objectFit: "contain",
+        display: "block"
+      }
+    }));
+  };
+  const renderDocumentRow = (value, index) => {
+    var _pdfFiles$value$fileS;
+    const fileUrl = (_pdfFiles$value$fileS = pdfFiles[value.fileStoreId]) === null || _pdfFiles$value$fileS === void 0 ? void 0 : _pdfFiles$value$fileS.split(",")[0];
+    const docSubType = getDocSubType(value === null || value === void 0 ? void 0 : value.documentType);
+    const docUid = (value === null || value === void 0 ? void 0 : value.documentUid) || "";
+    const isPhoto = value === null || value === void 0 ? void 0 : value.isPhoto;
+    let typeLabel = "";
+    let numLabel = "";
+    let uploadLabel = "";
+    if (value.title === "WS_IDENTITY_PROOF") {
+      typeLabel = "Identity Proof*";
+      numLabel = "Identity Proof Document Number";
+      uploadLabel = "Upload Identity Proof Document*";
+    } else if (value.title === "WS_OWNERSHIP_PROOF") {
+      typeLabel = "Ownership Proof*";
+      numLabel = "Ownership Proof Document Number";
+      uploadLabel = "Upload Ownership Proof*";
+    } else if (value.title === "WS_OTHER_DOCUMENTS") {
+      typeLabel = "Other Documents*";
+      numLabel = "Other Document Number";
+      uploadLabel = "Upload Other Documents*";
+    } else if (value.title === "WS_APPLICANT_PHOTO") {
+      uploadLabel = "Upload Applicant Photo*";
+    } else {
+      typeLabel = ((value === null || value === void 0 ? void 0 : value.categoryLabel) || "Document") + "*";
+      numLabel = "Document Number";
+      uploadLabel = "Upload Document*";
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      key: index,
+      style: {
+        marginBottom: "24px"
+      }
+    }, /*#__PURE__*/React.createElement(StatusTable, null, !isPhoto && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Row, {
+      label: typeLabel,
+      text: docSubType || t("NA")
+    }), /*#__PURE__*/React.createElement(Row, {
+      label: numLabel,
+      text: docUid || t("NA")
+    })), /*#__PURE__*/React.createElement(Row, {
+      label: uploadLabel,
+      text: /*#__PURE__*/React.createElement("div", {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: "16px"
+        }
+      }, isPhoto ? fileUrl ? /*#__PURE__*/React.createElement("div", {
+        style: {
+          position: "relative"
+        }
+      }, /*#__PURE__*/React.createElement("img", {
+        src: fileUrl,
+        alt: "Applicant Photo",
+        style: {
+          width: "100px",
+          height: "100px",
+          objectFit: "cover",
+          borderRadius: "4px",
+          border: "1px solid #ccc"
+        }
+      })) : /*#__PURE__*/React.createElement("div", {
+        style: {
+          fontSize: "14px",
+          color: "#505A5F"
+        }
+      }, t("NA")) : /*#__PURE__*/React.createElement("div", {
+        onClick: () => {
+          if (fileUrl) setModalFile(fileUrl);
+        },
+        disabled: !fileUrl,
+        style: {
+          cursor: "pointer"
+        }
+      }, /*#__PURE__*/React.createElement(ViewsIcon, null)), !isPhoto && /*#__PURE__*/React.createElement("label", {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: "8px",
+          fontSize: "14px",
+          color: "#0B0C0C",
+          margin: 0
+        }
+      }, /*#__PURE__*/React.createElement("input", {
+        type: "checkbox",
+        style: {
+          width: "18px",
+          height: "18px",
+          accentColor: "#F47738"
+        }
+      }), "Check Verified"))
+    })));
+  };
   return /*#__PURE__*/React.createElement("div", {
     style: {
       marginTop: "19px"
     }
-  }, !isStakeholderApplication && (documents === null || documents === void 0 ? void 0 : documents.map((document, index) => {
+  }, renderModal(), !isStakeholderApplication && (documents === null || documents === void 0 ? void 0 : documents.map((document, index) => {
     var _document$values;
     return /*#__PURE__*/React.createElement(React.Fragment, {
       key: index
@@ -23018,7 +23551,7 @@ function PropertyDocuments({
       style: checkLocation ? {
         marginTop: "32px",
         marginBottom: "18px",
-        color: "#0B0C0C, 100%",
+        color: "#0B0C0C",
         fontSize: "24px",
         lineHeight: "30px"
       } : {
@@ -23027,17 +23560,21 @@ function PropertyDocuments({
         color: "#505A5F",
         fontSize: "24px"
       }
-    }, t(document === null || document === void 0 ? void 0 : document.title)) : null, /*#__PURE__*/React.createElement("div", {
+    }, t(document === null || document === void 0 ? void 0 : document.title)) : null, isWSLocation ? /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginTop: "8px"
+      }
+    }, document !== null && document !== void 0 && document.values && (document === null || document === void 0 ? void 0 : document.values.length) > 0 ? document.values.map((value, idx) => renderDocumentRow(value, idx)) : !window.location.href.includes("citizen") && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", null, t("BPA_NO_DOCUMENTS_UPLOADED_LABEL")))) : /*#__PURE__*/React.createElement("div", {
       style: {
         display: "flex",
         flexWrap: "wrap",
         justifyContent: "flex-start"
       }
     }, document !== null && document !== void 0 && document.values && (document === null || document === void 0 ? void 0 : document.values.length) > 0 ? document === null || document === void 0 ? void 0 : (_document$values = document.values) === null || _document$values === void 0 ? void 0 : _document$values.map((value, index) => {
-      var _pdfFiles$value$fileS, _value$documentType;
+      var _pdfFiles$value$fileS2, _value$documentType;
       return /*#__PURE__*/React.createElement("a", {
         target: "_",
-        href: (_pdfFiles$value$fileS = pdfFiles[value.fileStoreId]) === null || _pdfFiles$value$fileS === void 0 ? void 0 : _pdfFiles$value$fileS.split(",")[0],
+        href: (_pdfFiles$value$fileS2 = pdfFiles[value.fileStoreId]) === null || _pdfFiles$value$fileS2 === void 0 ? void 0 : _pdfFiles$value$fileS2.split(",")[0],
         style: {
           minWidth: "80px",
           marginRight: "10px",
@@ -23084,10 +23621,10 @@ function PropertyDocuments({
         fontSize: "24px"
       }
     }, t(document === null || document === void 0 ? void 0 : document.title)) : null, /*#__PURE__*/React.createElement("div", null, document !== null && document !== void 0 && document.values && (document === null || document === void 0 ? void 0 : document.values.length) > 0 ? document === null || document === void 0 ? void 0 : (_document$values2 = document.values) === null || _document$values2 === void 0 ? void 0 : _document$values2.map((value, index) => {
-      var _pdfFiles$value$fileS2;
+      var _pdfFiles$value$fileS3;
       return /*#__PURE__*/React.createElement("a", {
         target: "_",
-        href: (_pdfFiles$value$fileS2 = pdfFiles[value.fileStoreId]) === null || _pdfFiles$value$fileS2 === void 0 ? void 0 : _pdfFiles$value$fileS2.split(",")[0],
+        href: (_pdfFiles$value$fileS3 = pdfFiles[value.fileStoreId]) === null || _pdfFiles$value$fileS3 === void 0 ? void 0 : _pdfFiles$value$fileS3.split(",")[0],
         style: {
           minWidth: svgStyles !== null && svgStyles !== void 0 && svgStyles.minWidth ? svgStyles === null || svgStyles === void 0 ? void 0 : svgStyles.minWidth : "160px",
           marginRight: "20px"
@@ -23850,12 +24387,11 @@ const WSAdditonalDetails = ({
   wsAdditionalDetails,
   oldValue
 }) => {
-  var _wsAdditionalDetails$, _wsAdditionalDetails$2, _wsAdditionalDetails$3, _wsAdditionalDetails$4;
+  var _wsAdditionalDetails$;
   const {
     t
   } = useTranslation();
   let filters = getQueryStringParams(location.search);
-  const isModify = filters === null || filters === void 0 ? void 0 : filters.mode;
   var {
     connectionDetails,
     plumberDetails,
@@ -23884,50 +24420,6 @@ const WSAdditonalDetails = ({
       label: `${t(`${value.title}`)}`,
       text: value !== null && value !== void 0 && value.oldValue ? value === null || value === void 0 ? void 0 : value.oldValue : value !== null && value !== void 0 && value.value ? value === null || value === void 0 ? void 0 : value.value : ""
     }));
-  })))), (wsAdditionalDetails === null || wsAdditionalDetails === void 0 ? void 0 : (_wsAdditionalDetails$2 = wsAdditionalDetails.additionalDetails) === null || _wsAdditionalDetails$2 === void 0 ? void 0 : _wsAdditionalDetails$2.plumberDetails) && isModify != "MODIFY" && /*#__PURE__*/React.createElement(StatusTable, null, /*#__PURE__*/React.createElement(CardSubHeader, {
-    style: cardSubHeaderStyles()
-  }, t("WS_COMMON_PLUMBER_DETAILS")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-    className: "plumber-details-new-value-wrapper"
-  }, plumberDetails === null || plumberDetails === void 0 ? void 0 : plumberDetails.map((value, index) => {
-    return /*#__PURE__*/React.createElement(Row, {
-      className: "border-none",
-      key: `${value.title}`,
-      label: `${t(`${value.title}`)}`,
-      text: value !== null && value !== void 0 && value.oldValue ? value === null || value === void 0 ? void 0 : value.oldValue : value !== null && value !== void 0 && value.value ? value === null || value === void 0 ? void 0 : value.value : "",
-      privacy: value.privacy
-    });
-  })))), (wsAdditionalDetails === null || wsAdditionalDetails === void 0 ? void 0 : (_wsAdditionalDetails$3 = wsAdditionalDetails.additionalDetails) === null || _wsAdditionalDetails$3 === void 0 ? void 0 : _wsAdditionalDetails$3.roadCuttingDetails) && isModify != "MODIFY" && /*#__PURE__*/React.createElement(StatusTable, null, /*#__PURE__*/React.createElement(CardSubHeader, {
-    style: cardSubHeaderStyles()
-  }, t("WS_ROAD_CUTTING_DETAILS")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-    className: "plumber-details-new-value-wrapper"
-  }, roadCuttingDetails === null || roadCuttingDetails === void 0 ? void 0 : roadCuttingDetails.map((value, index) => {
-    var _value$values;
-    return /*#__PURE__*/React.createElement("div", {
-      key: index,
-      style: (roadCuttingDetails === null || roadCuttingDetails === void 0 ? void 0 : roadCuttingDetails.length) > 1 ? {
-        border: "1px solid #D6D5D4",
-        background: "#FAFAFA",
-        borderRadius: "4px",
-        padding: "10px 10px 0px 10px",
-        margin: "5px 0px"
-      } : {}
-    }, value === null || value === void 0 ? void 0 : (_value$values = value.values) === null || _value$values === void 0 ? void 0 : _value$values.map(roadValue => /*#__PURE__*/React.createElement(Row, {
-      className: "border-none",
-      key: `${roadValue.title}`,
-      label: `${t(`${roadValue.title}`)}`,
-      text: roadValue !== null && roadValue !== void 0 && roadValue.oldValue ? roadValue === null || roadValue === void 0 ? void 0 : roadValue.oldValue : roadValue !== null && roadValue !== void 0 && roadValue.value ? roadValue === null || roadValue === void 0 ? void 0 : roadValue.value : ""
-    })));
-  })))), (wsAdditionalDetails === null || wsAdditionalDetails === void 0 ? void 0 : (_wsAdditionalDetails$4 = wsAdditionalDetails.additionalDetails) === null || _wsAdditionalDetails$4 === void 0 ? void 0 : _wsAdditionalDetails$4.activationDetails) && /*#__PURE__*/React.createElement(StatusTable, null, /*#__PURE__*/React.createElement(CardSubHeader, {
-    style: cardSubHeaderStyles()
-  }, t("WS_ACTIVATION_DETAILS")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-    className: "plumber-details-new-value-wrapper"
-  }, activationDetails === null || activationDetails === void 0 ? void 0 : activationDetails.map((value, index) => {
-    return /*#__PURE__*/React.createElement(Row, {
-      className: "border-none",
-      key: `${value.title}`,
-      label: `${t(`${value.title}`)}`,
-      text: value !== null && value !== void 0 && value.oldValue ? value === null || value === void 0 ? void 0 : value.oldValue : value !== null && value !== void 0 && value.value ? value === null || value === void 0 ? void 0 : value.value : ""
-    });
   }))))));
 };