@djb25/digit-ui-module-wt 1.0.78 → 1.0.80

package/dist/index.modern.js

@@ -3540,7 +3540,125 @@ const WTDesktopInbox = _ref => {
   const _useState4 = useState(false),
     isSidebarCollapsed = _useState4[0],
     setIsSidebarCollapsed = _useState4[1];
-  const columns = React.useMemo(() => props.isSearch ? tableConfig.searchColumns(props) : tableConfig.inboxColumns(props) || [], []);
+  const _useState5 = useState(false),
+    showImageModal = _useState5[0],
+    setShowImageModal = _useState5[1];
+  const _useState6 = useState({
+      startUrl: null,
+      endUrl: null,
+      bookingNo: "",
+      isLoading: false
+    }),
+    imageModalData = _useState6[0],
+    setImageModalData = _useState6[1];
+  const tenantId = Digit.ULBService.getCurrentTenantId();
+  const fetchImageUrl = useCallback(function (fileStoreId) {
+    try {
+      let _exit = false;
+      if (!fileStoreId) return Promise.resolve(null);
+      const _temp = _catch(function () {
+        return Promise.resolve(Digit.UploadServices.Filefetch([fileStoreId], tenantId)).then(function (res) {
+          var _res$data, _res$data2, _res$data2$fileStoreI, _res$data2$fileStoreI2;
+          if (res !== null && res !== void 0 && (_res$data = res.data) !== null && _res$data !== void 0 && _res$data[fileStoreId]) {
+            const _res$data$fileStoreId = res.data[fileStoreId].split(",")[0];
+            _exit = true;
+            return _res$data$fileStoreId;
+          }
+          if (res !== null && res !== void 0 && (_res$data2 = res.data) !== null && _res$data2 !== void 0 && (_res$data2$fileStoreI = _res$data2.fileStoreIds) !== null && _res$data2$fileStoreI !== void 0 && (_res$data2$fileStoreI2 = _res$data2$fileStoreI[0]) !== null && _res$data2$fileStoreI2 !== void 0 && _res$data2$fileStoreI2.url) {
+            const _res$data$fileStoreId2 = res.data.fileStoreIds[0].url.split(",")[0];
+            _exit = true;
+            return _res$data$fileStoreId2;
+          }
+        });
+      }, function (err) {
+        console.error("Error fetching image URL:", err);
+      });
+      return Promise.resolve(_temp && _temp.then ? _temp.then(function (_result) {
+        return _exit ? _result : null;
+      }) : _exit ? _temp : null);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  }, [tenantId]);
+  const handleViewImage = useCallback(function (_ref2) {
+    let startFileStoreId = _ref2.startFileStoreId,
+      endFileStoreId = _ref2.endFileStoreId,
+      bookingNo = _ref2.bookingNo;
+    try {
+      setShowImageModal(true);
+      setImageModalData({
+        startUrl: null,
+        endUrl: null,
+        bookingNo: bookingNo || "",
+        isLoading: true
+      });
+      const _temp2 = _catch(function () {
+        return Promise.resolve(Promise.all([fetchImageUrl(startFileStoreId), fetchImageUrl(endFileStoreId)])).then(function (_ref3) {
+          let startUrl = _ref3[0],
+            endUrl = _ref3[1];
+          setImageModalData({
+            startUrl,
+            endUrl,
+            bookingNo: bookingNo || "",
+            isLoading: false
+          });
+        });
+      }, function (err) {
+        console.error("Error loading images:", err);
+        setImageModalData(prev => _extends({}, prev, {
+          isLoading: false
+        }));
+      });
+      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  }, [fetchImageUrl]);
+  const downloadImage = useCallback(function (url, filename) {
+    try {
+      if (!url) return Promise.resolve();
+      const _temp3 = _catch(function () {
+        return Promise.resolve(fetch(url)).then(function (response) {
+          return Promise.resolve(response.blob()).then(function (blob) {
+            const blobUrl = URL.createObjectURL(blob);
+            const link = document.createElement("a");
+            link.href = blobUrl;
+            link.download = filename;
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+            URL.revokeObjectURL(blobUrl);
+          });
+        });
+      }, function (err) {
+        console.error("Error downloading image:", err);
+        window.open(url, "_blank");
+      });
+      return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  }, []);
+  const handleDownloadImage = useCallback(function (_ref4) {
+    let startFileStoreId = _ref4.startFileStoreId,
+      endFileStoreId = _ref4.endFileStoreId,
+      bookingNo = _ref4.bookingNo;
+    try {
+      return Promise.resolve(Promise.all([fetchImageUrl(startFileStoreId), fetchImageUrl(endFileStoreId)])).then(function (_ref5) {
+        let startUrl = _ref5[0],
+          endUrl = _ref5[1];
+        const prefix = bookingNo || "trip";
+        if (startUrl) downloadImage(startUrl, prefix + "_start_trip.jpg");
+        if (endUrl) downloadImage(endUrl, prefix + "_end_trip.jpg");
+      });
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  }, [fetchImageUrl, downloadImage]);
+  const columns = React.useMemo(() => props.isSearch ? tableConfig.searchColumns(props) : tableConfig.inboxColumns(_extends({}, props, {
+    onViewImage: handleViewImage,
+    onDownloadImage: handleDownloadImage
+  })) || [], [handleViewImage, handleDownloadImage]);
   const inboxCsvColumns = React.useMemo(() => {
     var _columns$, _columns$2, _columns$3, _columns$4, _columns$find3;
     const csvColumns = [{
@@ -3910,7 +4028,223 @@ const WTDesktopInbox = _ref => {
       minWidth: 0,
       overflowX: "auto"
     }
-  }, result)));
+  }, result)), showImageModal && /*#__PURE__*/React.createElement(Modal, {
+    headerBarMain: /*#__PURE__*/React.createElement("h1", {
+      className: "heading-m",
+      style: {
+        margin: 0,
+        color: "#0B2559"
+      }
+    }, t("WT_DELIVERY_IMAGES"), " ", imageModalData.bookingNo ? "\u2014 " + imageModalData.bookingNo : ""),
+    headerBarEnd: /*#__PURE__*/React.createElement("div", {
+      onClick: () => {
+        setShowImageModal(false);
+        setImageModalData({
+          startUrl: null,
+          endUrl: null,
+          bookingNo: "",
+          isLoading: false
+        });
+      },
+      style: {
+        cursor: "pointer",
+        width: "32px",
+        height: "32px",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: "50%",
+        background: "rgba(0,0,0,0.08)",
+        transition: "background 0.2s ease"
+      },
+      onMouseEnter: e => e.currentTarget.style.background = "rgba(0,0,0,0.15)",
+      onMouseLeave: e => e.currentTarget.style.background = "rgba(0,0,0,0.08)"
+    }, /*#__PURE__*/React.createElement("svg", {
+      width: "18",
+      height: "18",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/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",
+      fill: "#333"
+    }))),
+    hideSubmit: true,
+    actionCancelLabel: t("CS_COMMON_CLOSE"),
+    actionCancelOnSubmit: () => {
+      setShowImageModal(false);
+      setImageModalData({
+        startUrl: null,
+        endUrl: null,
+        bookingNo: "",
+        isLoading: false
+      });
+    },
+    popmoduleClassName: "wt-delivery-image-modal"
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      minHeight: "200px",
+      padding: "16px"
+    }
+  }, imageModalData.isLoading ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      minHeight: "200px"
+    }
+  }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      gap: "32px",
+      justifyContent: "center",
+      flexWrap: "wrap"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      gap: "12px"
+    }
+  }, /*#__PURE__*/React.createElement("h3", {
+    style: {
+      margin: 0,
+      fontSize: "15px",
+      fontWeight: "700",
+      color: "#0B2559",
+      letterSpacing: "0.3px"
+    }
+  }, t("WT_START_TRIP_IMAGE")), imageModalData.startUrl ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "relative",
+      borderRadius: "10px",
+      overflow: "hidden",
+      boxShadow: "0 4px 16px rgba(0,0,0,0.12)"
+    }
+  }, /*#__PURE__*/React.createElement("img", {
+    src: imageModalData.startUrl,
+    alt: "Start Trip",
+    style: {
+      maxWidth: "360px",
+      maxHeight: "400px",
+      objectFit: "contain",
+      display: "block"
+    }
+  }), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: () => downloadImage(imageModalData.startUrl, (imageModalData.bookingNo || "trip") + "_start.jpg"),
+    style: {
+      position: "absolute",
+      bottom: "10px",
+      right: "10px",
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "4px",
+      padding: "6px 12px",
+      fontSize: "12px",
+      fontWeight: "600",
+      color: "#fff",
+      background: "rgba(0,0,0,0.6)",
+      border: "none",
+      borderRadius: "6px",
+      cursor: "pointer",
+      backdropFilter: "blur(4px)"
+    }
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z",
+    fill: "#fff"
+  })), t("CS_COMMON_DOWNLOAD"))) : /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: "200px",
+      height: "200px",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      background: "#f8fafc",
+      borderRadius: "10px",
+      border: "2px dashed #e2e8f0",
+      color: "#94a3b8",
+      fontSize: "13px"
+    }
+  }, t("CS_NO_IMAGE_AVAILABLE"))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      gap: "12px"
+    }
+  }, /*#__PURE__*/React.createElement("h3", {
+    style: {
+      margin: 0,
+      fontSize: "15px",
+      fontWeight: "700",
+      color: "#0B2559",
+      letterSpacing: "0.3px"
+    }
+  }, t("WT_END_TRIP_IMAGE")), imageModalData.endUrl ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "relative",
+      borderRadius: "10px",
+      overflow: "hidden",
+      boxShadow: "0 4px 16px rgba(0,0,0,0.12)"
+    }
+  }, /*#__PURE__*/React.createElement("img", {
+    src: imageModalData.endUrl,
+    alt: "End Trip",
+    style: {
+      maxWidth: "360px",
+      maxHeight: "400px",
+      objectFit: "contain",
+      display: "block"
+    }
+  }), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: () => downloadImage(imageModalData.endUrl, (imageModalData.bookingNo || "trip") + "_end.jpg"),
+    style: {
+      position: "absolute",
+      bottom: "10px",
+      right: "10px",
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "4px",
+      padding: "6px 12px",
+      fontSize: "12px",
+      fontWeight: "600",
+      color: "#fff",
+      background: "rgba(0,0,0,0.6)",
+      border: "none",
+      borderRadius: "6px",
+      cursor: "pointer",
+      backdropFilter: "blur(4px)"
+    }
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z",
+    fill: "#fff"
+  })), t("CS_COMMON_DOWNLOAD"))) : /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: "200px",
+      height: "200px",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      background: "#f8fafc",
+      borderRadius: "10px",
+      border: "2px dashed #e2e8f0",
+      color: "#94a3b8",
+      fontSize: "13px"
+    }
+  }, t("CS_NO_IMAGE_AVAILABLE")))))));
 };
 
 const SortBy = props => {
@@ -17729,12 +18063,26 @@ const WTApplicationDetails = () => {
   }))));
 };
 
+const isDeliveredStatus = row => {
+  var _row$searchData, _row$workflowData, _row$workflowData$sta;
+  const bookingStatus = (row === null || row === void 0 ? void 0 : (_row$searchData = row.searchData) === null || _row$searchData === void 0 ? void 0 : _row$searchData.bookingStatus) || (row === null || row === void 0 ? void 0 : (_row$workflowData = row.workflowData) === null || _row$workflowData === void 0 ? void 0 : (_row$workflowData$sta = _row$workflowData.state) === null || _row$workflowData$sta === void 0 ? void 0 : _row$workflowData$sta.applicationStatus) || "";
+  return ["TANKER_DELIVERED", "DELIVERED"].includes(bookingStatus.toUpperCase());
+};
+const getTripReportFileIds = row => {
+  var _row$searchData2, _row$searchData2$driv;
+  const tripReport = row === null || row === void 0 ? void 0 : (_row$searchData2 = row.searchData) === null || _row$searchData2 === void 0 ? void 0 : (_row$searchData2$driv = _row$searchData2.driverTripReport) === null || _row$searchData2$driv === void 0 ? void 0 : _row$searchData2$driv[0];
+  return {
+    startFileStoreId: (tripReport === null || tripReport === void 0 ? void 0 : tripReport.startFileStoreId) || null,
+    endFileStoreId: (tripReport === null || tripReport === void 0 ? void 0 : tripReport.endFileStoreId) || null,
+    hasImages: !!(tripReport !== null && tripReport !== void 0 && tripReport.startFileStoreId || tripReport !== null && tripReport !== void 0 && tripReport.endFileStoreId)
+  };
+};
 const GetCell = value => /*#__PURE__*/React.createElement("span", {
   className: "cell-text"
 }, value);
 const getCreatedTime = row => {
-  var _row$searchData, _row$searchData$audit, _row$workflowData, _row$workflowData$aud;
-  return (row === null || row === void 0 ? void 0 : (_row$searchData = row.searchData) === null || _row$searchData === void 0 ? void 0 : (_row$searchData$audit = _row$searchData.auditDetails) === null || _row$searchData$audit === void 0 ? void 0 : _row$searchData$audit.createdTime) || (row === null || row === void 0 ? void 0 : (_row$workflowData = row.workflowData) === null || _row$workflowData === void 0 ? void 0 : (_row$workflowData$aud = _row$workflowData.auditDetails) === null || _row$workflowData$aud === void 0 ? void 0 : _row$workflowData$aud.createdTime);
+  var _row$searchData3, _row$searchData3$audi, _row$workflowData2, _row$workflowData2$au;
+  return (row === null || row === void 0 ? void 0 : (_row$searchData3 = row.searchData) === null || _row$searchData3 === void 0 ? void 0 : (_row$searchData3$audi = _row$searchData3.auditDetails) === null || _row$searchData3$audi === void 0 ? void 0 : _row$searchData3$audi.createdTime) || (row === null || row === void 0 ? void 0 : (_row$workflowData2 = row.workflowData) === null || _row$workflowData2 === void 0 ? void 0 : (_row$workflowData2$au = _row$workflowData2.auditDetails) === null || _row$workflowData2$au === void 0 ? void 0 : _row$workflowData2$au.createdTime);
 };
 const getFormattedCreatedAt = row => {
   const createdTime = getCreatedTime(row);
@@ -17742,8 +18090,8 @@ const getFormattedCreatedAt = row => {
   return Digit.DateUtils.ConvertEpochToDate(createdTime) + " " + Digit.DateUtils.ConvertEpochToTimeInHours(createdTime);
 };
 const getDeliveryDateTime = row => {
-  var _row$searchData2;
-  const driverTripReport = row === null || row === void 0 ? void 0 : (_row$searchData2 = row.searchData) === null || _row$searchData2 === void 0 ? void 0 : _row$searchData2.driverTripReport;
+  var _row$searchData4;
+  const driverTripReport = row === null || row === void 0 ? void 0 : (_row$searchData4 = row.searchData) === null || _row$searchData4 === void 0 ? void 0 : _row$searchData4.driverTripReport;
   if (Array.isArray(driverTripReport) && driverTripReport.length > 0) {
     var _driverTripReport$, _driverTripReport$$au;
     const lastModifiedTime = (_driverTripReport$ = driverTripReport[0]) === null || _driverTripReport$ === void 0 ? void 0 : (_driverTripReport$$au = _driverTripReport$.auditDetails) === null || _driverTripReport$$au === void 0 ? void 0 : _driverTripReport$$au.lastModifiedTime;
@@ -17785,8 +18133,8 @@ const TableConfig = t => ({
       Header: t("WT_BOOKING_NO"),
       id: "bookingNo",
       accessor: row => {
-        var _row$searchData3;
-        return (row === null || row === void 0 ? void 0 : (_row$searchData3 = row.searchData) === null || _row$searchData3 === void 0 ? void 0 : _row$searchData3["bookingNo"]) || "";
+        var _row$searchData5;
+        return (row === null || row === void 0 ? void 0 : (_row$searchData5 = row.searchData) === null || _row$searchData5 === void 0 ? void 0 : _row$searchData5["bookingNo"]) || "";
       },
       Cell: _ref => {
         var _row$original, _row$original$searchD, _row$original2, _row$original2$search;
@@ -17805,8 +18153,8 @@ const TableConfig = t => ({
       Header: window.location.href.includes("fixed-point") ? t("WT_FIXED_POINT_NAME") : t("WT_APPLICANT_NAME"),
       id: "applicantName",
       accessor: row => {
-        var _row$searchData4, _row$searchData4$appl;
-        return (row === null || row === void 0 ? void 0 : (_row$searchData4 = row.searchData) === null || _row$searchData4 === void 0 ? void 0 : (_row$searchData4$appl = _row$searchData4.applicantDetail) === null || _row$searchData4$appl === void 0 ? void 0 : _row$searchData4$appl["name"]) || "";
+        var _row$searchData6, _row$searchData6$appl;
+        return (row === null || row === void 0 ? void 0 : (_row$searchData6 = row.searchData) === null || _row$searchData6 === void 0 ? void 0 : (_row$searchData6$appl = _row$searchData6.applicantDetail) === null || _row$searchData6$appl === void 0 ? void 0 : _row$searchData6$appl["name"]) || "";
       },
       Cell: row => {
         var _row$cell, _row$cell$row, _row$cell$row$origina, _row$cell$row$origina2, _row$cell$row$origina3;
@@ -17820,8 +18168,8 @@ const TableConfig = t => ({
       Header: t("WT_MOBILE_NUMBER"),
       id: "mobileNumber",
       accessor: row => {
-        var _row$searchData5, _row$searchData5$appl;
-        return (row === null || row === void 0 ? void 0 : (_row$searchData5 = row.searchData) === null || _row$searchData5 === void 0 ? void 0 : (_row$searchData5$appl = _row$searchData5.applicantDetail) === null || _row$searchData5$appl === void 0 ? void 0 : _row$searchData5$appl["mobileNumber"]) || "";
+        var _row$searchData7, _row$searchData7$appl;
+        return (row === null || row === void 0 ? void 0 : (_row$searchData7 = row.searchData) === null || _row$searchData7 === void 0 ? void 0 : (_row$searchData7$appl = _row$searchData7.applicantDetail) === null || _row$searchData7$appl === void 0 ? void 0 : _row$searchData7$appl["mobileNumber"]) || "";
       },
       Cell: row => {
         var _row$cell2, _row$cell2$row, _row$cell2$row$origin, _row$cell2$row$origin2, _row$cell2$row$origin3;
@@ -17835,8 +18183,8 @@ const TableConfig = t => ({
       Header: t("LOCALITY"),
       id: "localityCode",
       accessor: row => {
-        var _row$searchData6;
-        return (row === null || row === void 0 ? void 0 : (_row$searchData6 = row.searchData) === null || _row$searchData6 === void 0 ? void 0 : _row$searchData6["localityCode"]) || "";
+        var _row$searchData8;
+        return (row === null || row === void 0 ? void 0 : (_row$searchData8 = row.searchData) === null || _row$searchData8 === void 0 ? void 0 : _row$searchData8["localityCode"]) || "";
       },
       Cell: _ref2 => {
         var _row$original3, _row$original3$search, _row$original4, _row$original4$search;
@@ -17851,8 +18199,8 @@ const TableConfig = t => ({
       Header: t("Filling Point"),
       id: "fillingPoint",
       accessor: 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) || "-";
+        var _row$searchData9, _row$searchData9$fill, _row$searchData0;
+        return (row === null || row === void 0 ? void 0 : (_row$searchData9 = row.searchData) === null || _row$searchData9 === void 0 ? void 0 : (_row$searchData9$fill = _row$searchData9.fillingPointMetadata) === null || _row$searchData9$fill === void 0 ? void 0 : _row$searchData9$fill.name) || (row === null || row === void 0 ? void 0 : (_row$searchData0 = row.searchData) === null || _row$searchData0 === void 0 ? void 0 : _row$searchData0.fillingPointName) || "-";
       },
       Cell: _ref3 => {
         var _row$original5, _row$original5$search, _row$original5$search2, _row$original6, _row$original6$search;
@@ -17877,8 +18225,8 @@ const TableConfig = t => ({
       Header: t("WT_STATUS"),
       id: "applicationStatus",
       accessor: row => {
-        var _row$workflowData2, _row$workflowData2$st;
-        return (row === null || row === void 0 ? void 0 : (_row$workflowData2 = row.workflowData) === null || _row$workflowData2 === void 0 ? void 0 : (_row$workflowData2$st = _row$workflowData2.state) === null || _row$workflowData2$st === void 0 ? void 0 : _row$workflowData2$st["applicationStatus"]) || "";
+        var _row$workflowData3, _row$workflowData3$st;
+        return (row === null || row === void 0 ? void 0 : (_row$workflowData3 = row.workflowData) === null || _row$workflowData3 === void 0 ? void 0 : (_row$workflowData3$st = _row$workflowData3.state) === null || _row$workflowData3$st === void 0 ? void 0 : _row$workflowData3$st["applicationStatus"]) || "";
       },
       Cell: _ref5 => {
         var _row$original8, _row$original8$workfl, _row$original8$workfl2;
@@ -17928,6 +18276,128 @@ const TableConfig = t => ({
         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))
+    }, {
+      Header: t("WT_DELIVERY_IMAGES"),
+      id: "deliveryImages",
+      disableSortBy: true,
+      accessor: () => "",
+      Cell: _ref0 => {
+        let row = _ref0.row;
+        const original = row === null || row === void 0 ? void 0 : row.original;
+        const delivered = isDeliveredStatus(original);
+        const _getTripReportFileIds = getTripReportFileIds(original),
+          startFileStoreId = _getTripReportFileIds.startFileStoreId,
+          endFileStoreId = _getTripReportFileIds.endFileStoreId,
+          hasImages = _getTripReportFileIds.hasImages;
+        if (!delivered || !hasImages) {
+          return /*#__PURE__*/React.createElement("span", {
+            className: "cell-text",
+            style: {
+              color: "#94a3b8"
+            }
+          }, t("CS_NA"));
+        }
+        return /*#__PURE__*/React.createElement("div", {
+          style: {
+            display: "flex",
+            gap: "8px",
+            alignItems: "center",
+            flexWrap: "wrap"
+          }
+        }, /*#__PURE__*/React.createElement("button", {
+          type: "button",
+          title: t("WT_VIEW_IMAGES"),
+          onClick: () => {
+            var _props$onViewImage, _original$searchData1;
+            return (_props$onViewImage = props.onViewImage) === null || _props$onViewImage === void 0 ? void 0 : _props$onViewImage.call(props, {
+              startFileStoreId,
+              endFileStoreId,
+              bookingNo: original === null || original === void 0 ? void 0 : (_original$searchData1 = original.searchData) === null || _original$searchData1 === void 0 ? void 0 : _original$searchData1.bookingNo
+            });
+          },
+          style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: "4px",
+            padding: "4px 10px",
+            fontSize: "12px",
+            fontWeight: "600",
+            color: "#0B2559",
+            background: "#EFF6FF",
+            border: "1px solid #BFDBFE",
+            borderRadius: "6px",
+            cursor: "pointer",
+            transition: "all 0.15s ease",
+            whiteSpace: "nowrap"
+          },
+          onMouseEnter: e => {
+            e.currentTarget.style.background = "#DBEAFE";
+            e.currentTarget.style.borderColor = "#93C5FD";
+          },
+          onMouseLeave: e => {
+            e.currentTarget.style.background = "#EFF6FF";
+            e.currentTarget.style.borderColor = "#BFDBFE";
+          }
+        }, /*#__PURE__*/React.createElement("svg", {
+          width: "14",
+          height: "14",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg"
+        }, /*#__PURE__*/React.createElement("path", {
+          d: "M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z",
+          fill: "currentColor"
+        })), t("ES_COMMON_VIEW")), /*#__PURE__*/React.createElement("button", {
+          type: "button",
+          title: t("WT_DOWNLOAD_IMAGES"),
+          onClick: () => {
+            var _props$onDownloadImag, _original$searchData10;
+            return (_props$onDownloadImag = props.onDownloadImage) === null || _props$onDownloadImag === void 0 ? void 0 : _props$onDownloadImag.call(props, {
+              startFileStoreId,
+              endFileStoreId,
+              bookingNo: original === null || original === void 0 ? void 0 : (_original$searchData10 = original.searchData) === null || _original$searchData10 === void 0 ? void 0 : _original$searchData10.bookingNo
+            });
+          },
+          style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: "4px",
+            padding: "4px 10px",
+            fontSize: "12px",
+            fontWeight: "600",
+            color: "#065F46",
+            background: "#ECFDF5",
+            border: "1px solid #A7F3D0",
+            borderRadius: "6px",
+            cursor: "pointer",
+            transition: "all 0.15s ease",
+            whiteSpace: "nowrap"
+          },
+          onMouseEnter: e => {
+            e.currentTarget.style.background = "#D1FAE5";
+            e.currentTarget.style.borderColor = "#6EE7B7";
+          },
+          onMouseLeave: e => {
+            e.currentTarget.style.background = "#ECFDF5";
+            e.currentTarget.style.borderColor = "#A7F3D0";
+          }
+        }, /*#__PURE__*/React.createElement("svg", {
+          width: "14",
+          height: "14",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg"
+        }, /*#__PURE__*/React.createElement("path", {
+          d: "M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z",
+          fill: "currentColor"
+        })), t("CS_COMMON_DOWNLOAD")));
+      },
+      mobileCell: original => {
+        const delivered = isDeliveredStatus(original);
+        const _getTripReportFileIds2 = getTripReportFileIds(original),
+          hasImages = _getTripReportFileIds2.hasImages;
+        return GetMobCell(delivered && hasImages ? "📷" : "-");
+      }
     }] : [])],
     serviceRequestIdKey: original => {
       var _original$t, _original$t$props;
@@ -17939,12 +18409,12 @@ const TableConfig = t => ({
       Header: t("MT_BOOKING_NO"),
       id: "bookingNo",
       accessor: row => {
-        var _row$searchData9;
-        return (row === null || row === void 0 ? void 0 : (_row$searchData9 = row.searchData) === null || _row$searchData9 === void 0 ? void 0 : _row$searchData9["bookingNo"]) || "";
+        var _row$searchData1;
+        return (row === null || row === void 0 ? void 0 : (_row$searchData1 = row.searchData) === null || _row$searchData1 === void 0 ? void 0 : _row$searchData1["bookingNo"]) || "";
       },
-      Cell: _ref0 => {
+      Cell: _ref1 => {
         var _row$original10, _row$original10$searc, _row$original11, _row$original11$searc;
-        let row = _ref0.row;
+        let row = _ref1.row;
         return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
           className: "link"
         }, /*#__PURE__*/React.createElement(Link, {
@@ -17952,65 +18422,65 @@ const TableConfig = t => ({
         }, (_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;
-        return GetMobCell(original === null || original === void 0 ? void 0 : (_original$searchData1 = original.searchData) === null || _original$searchData1 === void 0 ? void 0 : _original$searchData1["bookingNo"]);
+        var _original$searchData11;
+        return GetMobCell(original === null || original === void 0 ? void 0 : (_original$searchData11 = original.searchData) === null || _original$searchData11 === void 0 ? void 0 : _original$searchData11["bookingNo"]);
       }
     }, {
       Header: t("MT_APPLICANT_NAME"),
       id: "applicantName",
       accessor: row => {
-        var _row$searchData0, _row$searchData0$appl;
-        return (row === null || row === void 0 ? void 0 : (_row$searchData0 = row.searchData) === null || _row$searchData0 === void 0 ? void 0 : (_row$searchData0$appl = _row$searchData0.applicantDetail) === null || _row$searchData0$appl === void 0 ? void 0 : _row$searchData0$appl["name"]) || "";
+        var _row$searchData10, _row$searchData10$app;
+        return (row === null || row === void 0 ? void 0 : (_row$searchData10 = row.searchData) === null || _row$searchData10 === void 0 ? void 0 : (_row$searchData10$app = _row$searchData10.applicantDetail) === null || _row$searchData10$app === void 0 ? void 0 : _row$searchData10$app["name"]) || "";
       },
       Cell: row => {
         var _row$cell3, _row$cell3$row, _row$cell3$row$origin, _row$cell3$row$origin2, _row$cell3$row$origin3;
         return GetCell("" + (row === null || row === void 0 ? void 0 : (_row$cell3 = row.cell) === null || _row$cell3 === void 0 ? void 0 : (_row$cell3$row = _row$cell3.row) === null || _row$cell3$row === void 0 ? void 0 : (_row$cell3$row$origin = _row$cell3$row.original) === null || _row$cell3$row$origin === void 0 ? void 0 : (_row$cell3$row$origin2 = _row$cell3$row$origin.searchData) === null || _row$cell3$row$origin2 === void 0 ? void 0 : (_row$cell3$row$origin3 = _row$cell3$row$origin2.applicantDetail) === null || _row$cell3$row$origin3 === void 0 ? void 0 : _row$cell3$row$origin3["name"]));
       },
       mobileCell: original => {
-        var _original$searchData10, _original$searchData11;
-        return GetMobCell(original === null || original === void 0 ? void 0 : (_original$searchData10 = original.searchData) === null || _original$searchData10 === void 0 ? void 0 : (_original$searchData11 = _original$searchData10.applicantDetail) === null || _original$searchData11 === void 0 ? void 0 : _original$searchData11["name"]);
+        var _original$searchData12, _original$searchData13;
+        return GetMobCell(original === null || original === void 0 ? void 0 : (_original$searchData12 = original.searchData) === null || _original$searchData12 === void 0 ? void 0 : (_original$searchData13 = _original$searchData12.applicantDetail) === null || _original$searchData13 === void 0 ? void 0 : _original$searchData13["name"]);
       }
     }, {
       Header: t("MT_MOBILE_NUMBER"),
       id: "mobileNumber",
       accessor: row => {
-        var _row$searchData1, _row$searchData1$appl;
-        return (row === null || row === void 0 ? void 0 : (_row$searchData1 = row.searchData) === null || _row$searchData1 === void 0 ? void 0 : (_row$searchData1$appl = _row$searchData1.applicantDetail) === null || _row$searchData1$appl === void 0 ? void 0 : _row$searchData1$appl["mobileNumber"]) || "";
+        var _row$searchData11, _row$searchData11$app;
+        return (row === null || row === void 0 ? void 0 : (_row$searchData11 = row.searchData) === null || _row$searchData11 === void 0 ? void 0 : (_row$searchData11$app = _row$searchData11.applicantDetail) === null || _row$searchData11$app === void 0 ? void 0 : _row$searchData11$app["mobileNumber"]) || "";
       },
       Cell: row => {
         var _row$cell4, _row$cell4$row, _row$cell4$row$origin, _row$cell4$row$origin2, _row$cell4$row$origin3;
         return GetCell("" + (row === null || row === void 0 ? void 0 : (_row$cell4 = row.cell) === null || _row$cell4 === void 0 ? void 0 : (_row$cell4$row = _row$cell4.row) === null || _row$cell4$row === void 0 ? void 0 : (_row$cell4$row$origin = _row$cell4$row.original) === null || _row$cell4$row$origin === void 0 ? void 0 : (_row$cell4$row$origin2 = _row$cell4$row$origin.searchData) === null || _row$cell4$row$origin2 === void 0 ? void 0 : (_row$cell4$row$origin3 = _row$cell4$row$origin2.applicantDetail) === null || _row$cell4$row$origin3 === void 0 ? void 0 : _row$cell4$row$origin3["mobileNumber"]));
       },
       mobileCell: original => {
-        var _original$searchData12, _original$searchData13;
-        return GetMobCell(original === null || original === void 0 ? void 0 : (_original$searchData12 = original.searchData) === null || _original$searchData12 === void 0 ? void 0 : (_original$searchData13 = _original$searchData12.applicantDetail) === null || _original$searchData13 === void 0 ? void 0 : _original$searchData13["mobileNumber"]);
+        var _original$searchData14, _original$searchData15;
+        return GetMobCell(original === null || original === void 0 ? void 0 : (_original$searchData14 = original.searchData) === null || _original$searchData14 === void 0 ? void 0 : (_original$searchData15 = _original$searchData14.applicantDetail) === null || _original$searchData15 === void 0 ? void 0 : _original$searchData15["mobileNumber"]);
       }
     }, {
       Header: t("LOCALITY"),
       id: "localityCode",
       accessor: row => {
-        var _row$searchData10;
-        return (row === null || row === void 0 ? void 0 : (_row$searchData10 = row.searchData) === null || _row$searchData10 === void 0 ? void 0 : _row$searchData10["localityCode"]) || "";
+        var _row$searchData12;
+        return (row === null || row === void 0 ? void 0 : (_row$searchData12 = row.searchData) === null || _row$searchData12 === void 0 ? void 0 : _row$searchData12["localityCode"]) || "";
       },
-      Cell: _ref1 => {
+      Cell: _ref10 => {
         var _row$original12, _row$original12$searc, _row$original13, _row$original13$searc;
-        let row = _ref1.row;
+        let row = _ref10.row;
         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;
-        return GetMobCell(getLocalityTranslation(original === null || original === void 0 ? void 0 : (_original$searchData14 = original.searchData) === null || _original$searchData14 === void 0 ? void 0 : _original$searchData14["localityCode"], original === null || original === void 0 ? void 0 : (_original$searchData15 = original.searchData) === null || _original$searchData15 === void 0 ? void 0 : _original$searchData15.tenantId, t));
+        var _original$searchData16, _original$searchData17;
+        return GetMobCell(getLocalityTranslation(original === null || original === void 0 ? void 0 : (_original$searchData16 = original.searchData) === null || _original$searchData16 === void 0 ? void 0 : _original$searchData16["localityCode"], original === null || original === void 0 ? void 0 : (_original$searchData17 = original.searchData) === null || _original$searchData17 === void 0 ? void 0 : _original$searchData17.tenantId, t));
       }
     }, {
       Header: t("MT_STATUS"),
       id: "applicationStatus",
       accessor: row => {
-        var _row$workflowData3, _row$workflowData3$st;
-        return (row === null || row === void 0 ? void 0 : (_row$workflowData3 = row.workflowData) === null || _row$workflowData3 === void 0 ? void 0 : (_row$workflowData3$st = _row$workflowData3.state) === null || _row$workflowData3$st === void 0 ? void 0 : _row$workflowData3$st["applicationStatus"]) || "";
+        var _row$workflowData4, _row$workflowData4$st;
+        return (row === null || row === void 0 ? void 0 : (_row$workflowData4 = row.workflowData) === null || _row$workflowData4 === void 0 ? void 0 : (_row$workflowData4$st = _row$workflowData4.state) === null || _row$workflowData4$st === void 0 ? void 0 : _row$workflowData4$st["applicationStatus"]) || "";
       },
-      Cell: _ref10 => {
+      Cell: _ref11 => {
         var _row$original15, _row$original15$workf, _row$original15$workf2;
-        let row = _ref10.row;
+        let row = _ref11.row;
         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 => {
@@ -18028,12 +18498,12 @@ const TableConfig = t => ({
       Header: t("MT_BOOKING_NO"),
       id: "bookingNo",
       accessor: row => {
-        var _row$searchData11;
-        return (row === null || row === void 0 ? void 0 : (_row$searchData11 = row.searchData) === null || _row$searchData11 === void 0 ? void 0 : _row$searchData11["bookingNo"]) || "";
+        var _row$searchData13;
+        return (row === null || row === void 0 ? void 0 : (_row$searchData13 = row.searchData) === null || _row$searchData13 === void 0 ? void 0 : _row$searchData13["bookingNo"]) || "";
       },
-      Cell: _ref11 => {
+      Cell: _ref12 => {
         var _row$original16, _row$original16$searc, _row$original17, _row$original17$searc;
-        let row = _ref11.row;
+        let row = _ref12.row;
         return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
           className: "link"
         }, /*#__PURE__*/React.createElement(Link, {
@@ -18041,65 +18511,65 @@ const TableConfig = t => ({
         }, (_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;
-        return GetMobCell(original === null || original === void 0 ? void 0 : (_original$searchData16 = original.searchData) === null || _original$searchData16 === void 0 ? void 0 : _original$searchData16["bookingNo"]);
+        var _original$searchData18;
+        return GetMobCell(original === null || original === void 0 ? void 0 : (_original$searchData18 = original.searchData) === null || _original$searchData18 === void 0 ? void 0 : _original$searchData18["bookingNo"]);
       }
     }, {
       Header: t("MT_APPLICANT_NAME"),
       id: "applicantName",
       accessor: row => {
-        var _row$searchData12, _row$searchData12$app;
-        return (row === null || row === void 0 ? void 0 : (_row$searchData12 = row.searchData) === null || _row$searchData12 === void 0 ? void 0 : (_row$searchData12$app = _row$searchData12.applicantDetail) === null || _row$searchData12$app === void 0 ? void 0 : _row$searchData12$app["name"]) || "";
+        var _row$searchData14, _row$searchData14$app;
+        return (row === null || row === void 0 ? void 0 : (_row$searchData14 = row.searchData) === null || _row$searchData14 === void 0 ? void 0 : (_row$searchData14$app = _row$searchData14.applicantDetail) === null || _row$searchData14$app === void 0 ? void 0 : _row$searchData14$app["name"]) || "";
       },
       Cell: row => {
         var _row$cell5, _row$cell5$row, _row$cell5$row$origin, _row$cell5$row$origin2, _row$cell5$row$origin3;
         return GetCell("" + (row === null || row === void 0 ? void 0 : (_row$cell5 = row.cell) === null || _row$cell5 === void 0 ? void 0 : (_row$cell5$row = _row$cell5.row) === null || _row$cell5$row === void 0 ? void 0 : (_row$cell5$row$origin = _row$cell5$row.original) === null || _row$cell5$row$origin === void 0 ? void 0 : (_row$cell5$row$origin2 = _row$cell5$row$origin.searchData) === null || _row$cell5$row$origin2 === void 0 ? void 0 : (_row$cell5$row$origin3 = _row$cell5$row$origin2.applicantDetail) === null || _row$cell5$row$origin3 === void 0 ? void 0 : _row$cell5$row$origin3["name"]));
       },
       mobileCell: original => {
-        var _original$searchData17, _original$searchData18;
-        return GetMobCell(original === null || original === void 0 ? void 0 : (_original$searchData17 = original.searchData) === null || _original$searchData17 === void 0 ? void 0 : (_original$searchData18 = _original$searchData17.applicantDetail) === null || _original$searchData18 === void 0 ? void 0 : _original$searchData18["name"]);
+        var _original$searchData19, _original$searchData20;
+        return GetMobCell(original === null || original === void 0 ? void 0 : (_original$searchData19 = original.searchData) === null || _original$searchData19 === void 0 ? void 0 : (_original$searchData20 = _original$searchData19.applicantDetail) === null || _original$searchData20 === void 0 ? void 0 : _original$searchData20["name"]);
       }
     }, {
       Header: t("MT_MOBILE_NUMBER"),
       id: "mobileNumber",
       accessor: row => {
-        var _row$searchData13, _row$searchData13$app;
-        return (row === null || row === void 0 ? void 0 : (_row$searchData13 = row.searchData) === null || _row$searchData13 === void 0 ? void 0 : (_row$searchData13$app = _row$searchData13.applicantDetail) === null || _row$searchData13$app === void 0 ? void 0 : _row$searchData13$app["mobileNumber"]) || "";
+        var _row$searchData15, _row$searchData15$app;
+        return (row === null || row === void 0 ? void 0 : (_row$searchData15 = row.searchData) === null || _row$searchData15 === void 0 ? void 0 : (_row$searchData15$app = _row$searchData15.applicantDetail) === null || _row$searchData15$app === void 0 ? void 0 : _row$searchData15$app["mobileNumber"]) || "";
       },
       Cell: row => {
         var _row$cell6, _row$cell6$row, _row$cell6$row$origin, _row$cell6$row$origin2, _row$cell6$row$origin3;
         return GetCell("" + (row === null || row === void 0 ? void 0 : (_row$cell6 = row.cell) === null || _row$cell6 === void 0 ? void 0 : (_row$cell6$row = _row$cell6.row) === null || _row$cell6$row === void 0 ? void 0 : (_row$cell6$row$origin = _row$cell6$row.original) === null || _row$cell6$row$origin === void 0 ? void 0 : (_row$cell6$row$origin2 = _row$cell6$row$origin.searchData) === null || _row$cell6$row$origin2 === void 0 ? void 0 : (_row$cell6$row$origin3 = _row$cell6$row$origin2.applicantDetail) === null || _row$cell6$row$origin3 === void 0 ? void 0 : _row$cell6$row$origin3["mobileNumber"]));
       },
       mobileCell: original => {
-        var _original$searchData19, _original$searchData20;
-        return GetMobCell(original === null || original === void 0 ? void 0 : (_original$searchData19 = original.searchData) === null || _original$searchData19 === void 0 ? void 0 : (_original$searchData20 = _original$searchData19.applicantDetail) === null || _original$searchData20 === void 0 ? void 0 : _original$searchData20["mobileNumber"]);
+        var _original$searchData21, _original$searchData22;
+        return GetMobCell(original === null || original === void 0 ? void 0 : (_original$searchData21 = original.searchData) === null || _original$searchData21 === void 0 ? void 0 : (_original$searchData22 = _original$searchData21.applicantDetail) === null || _original$searchData22 === void 0 ? void 0 : _original$searchData22["mobileNumber"]);
       }
     }, {
       Header: t("LOCALITY"),
       id: "localityCode",
       accessor: row => {
-        var _row$searchData14;
-        return (row === null || row === void 0 ? void 0 : (_row$searchData14 = row.searchData) === null || _row$searchData14 === void 0 ? void 0 : _row$searchData14["localityCode"]) || "";
+        var _row$searchData16;
+        return (row === null || row === void 0 ? void 0 : (_row$searchData16 = row.searchData) === null || _row$searchData16 === void 0 ? void 0 : _row$searchData16["localityCode"]) || "";
       },
-      Cell: _ref12 => {
+      Cell: _ref13 => {
         var _row$original18, _row$original18$searc, _row$original19, _row$original19$searc;
-        let row = _ref12.row;
+        let row = _ref13.row;
         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;
-        return GetMobCell(getLocalityTranslation(original === null || original === void 0 ? void 0 : (_original$searchData21 = original.searchData) === null || _original$searchData21 === void 0 ? void 0 : _original$searchData21["localityCode"], original === null || original === void 0 ? void 0 : (_original$searchData22 = original.searchData) === null || _original$searchData22 === void 0 ? void 0 : _original$searchData22.tenantId, t));
+        var _original$searchData23, _original$searchData24;
+        return GetMobCell(getLocalityTranslation(original === null || original === void 0 ? void 0 : (_original$searchData23 = original.searchData) === null || _original$searchData23 === void 0 ? void 0 : _original$searchData23["localityCode"], original === null || original === void 0 ? void 0 : (_original$searchData24 = original.searchData) === null || _original$searchData24 === void 0 ? void 0 : _original$searchData24.tenantId, t));
       }
     }, {
       Header: t("MT_STATUS"),
       id: "applicationStatus",
       accessor: row => {
-        var _row$workflowData4, _row$workflowData4$st;
-        return (row === null || row === void 0 ? void 0 : (_row$workflowData4 = row.workflowData) === null || _row$workflowData4 === void 0 ? void 0 : (_row$workflowData4$st = _row$workflowData4.state) === null || _row$workflowData4$st === void 0 ? void 0 : _row$workflowData4$st["applicationStatus"]) || "";
+        var _row$workflowData5, _row$workflowData5$st;
+        return (row === null || row === void 0 ? void 0 : (_row$workflowData5 = row.workflowData) === null || _row$workflowData5 === void 0 ? void 0 : (_row$workflowData5$st = _row$workflowData5.state) === null || _row$workflowData5$st === void 0 ? void 0 : _row$workflowData5$st["applicationStatus"]) || "";
       },
-      Cell: _ref13 => {
+      Cell: _ref14 => {
         var _row$original21, _row$original21$workf, _row$original21$workf2;
-        let row = _ref13.row;
+        let row = _ref14.row;
         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 => {
@@ -25756,8 +26226,10 @@ const InfoDetails = _ref2 => {
 };
 
 const ViewBreakup = _ref => {
-  var _wsAdditionalDetails$, _breakUpData$billSlab, _breakUpData$billSlab2, _breakUpData$billSlab3, _breakUpData$billSlab4, _breakUpData$billSlab5, _breakUpData$billSlab6;
-  let wsAdditionalDetails = _ref.wsAdditionalDetails;
+  var _breakUpData$calculat, _breakUpData$calculat2, _breakUpData$calculat3, _wsAdditionalDetails$8, _breakUpData$billSlab4, _breakUpData$billSlab5, _breakUpData$billSlab6, _breakUpData$billSlab7, _breakUpData$billSlab8, _breakUpData$billSlab9;
+  let wsAdditionalDetails = _ref.wsAdditionalDetails,
+    print = _ref.print,
+    download = _ref.download;
   const _useTranslation = useTranslation(),
     t = _useTranslation.t;
   const _useState = useState(false),
@@ -25766,6 +26238,44 @@ const ViewBreakup = _ref => {
   const _useState2 = useState({}),
     breakUpData = _useState2[0],
     setBreakUpData = _useState2[1];
+  const breakupRef = useRef(null);
+  const formatNumber = function (value, maximumFractionDigits) {
+    if (maximumFractionDigits === void 0) {
+      maximumFractionDigits = 2;
+    }
+    return Number(value || 0).toLocaleString("en-IN", {
+      maximumFractionDigits
+    });
+  };
+  const formatCurrency = value => /*#__PURE__*/React.createElement("span", null, "\u20B9", formatNumber(value));
+  const DetailRows = _ref2 => {
+    let rows = _ref2.rows;
+    return rows.map(_ref3 => {
+      let label = _ref3.label,
+        value = _ref3.value,
+        _ref3$currency = _ref3.currency,
+        currency = _ref3$currency === void 0 ? false : _ref3$currency,
+        _ref3$unit = _ref3.unit,
+        unit = _ref3$unit === void 0 ? "" : _ref3$unit,
+        _ref3$isText = _ref3.isText,
+        isText = _ref3$isText === void 0 ? false : _ref3$isText;
+      return /*#__PURE__*/React.createElement(Row, {
+        className: "border-none",
+        rowContainerStyle: {
+          margin: "0px"
+        },
+        labelStyle: {
+          width: "50%"
+        },
+        key: label,
+        label: label,
+        text: currency ? formatCurrency(value) : isText ? value || "-" : "" + formatNumber(value) + unit,
+        textStyle: {
+          textAlign: "right"
+        }
+      });
+    });
+  };
   const Heading = props => {
     return /*#__PURE__*/React.createElement("h1", {
       className: "heading-m"
@@ -25788,21 +26298,244 @@ const ViewBreakup = _ref => {
     }, /*#__PURE__*/React.createElement(Close, null));
   };
   const onPopupOpen = () => {
-    var _sessionBillFormData$;
-    let breakupData = wsAdditionalDetails.additionalDetails.data || {};
+    var _wsAdditionalDetails$, _sessionBillFormData$;
+    let breakupData = (wsAdditionalDetails === null || wsAdditionalDetails === void 0 ? void 0 : (_wsAdditionalDetails$ = wsAdditionalDetails.additionalDetails) === null || _wsAdditionalDetails$ === void 0 ? void 0 : _wsAdditionalDetails$.data) || {};
     const sessionBillData = sessionStorage.getItem("Digit.ADHOC_BILL_ADD_REBATE_DATA");
     const sessionBillFormData = sessionBillData ? JSON.parse(sessionBillData) : {};
     if (sessionBillFormData !== null && sessionBillFormData !== void 0 && (_sessionBillFormData$ = sessionBillFormData.value) !== null && _sessionBillFormData$ !== void 0 && _sessionBillFormData$.totalAmount) breakupData = sessionBillFormData === null || sessionBillFormData === void 0 ? void 0 : sessionBillFormData.value;
     setBreakUpData(breakupData);
     showPopUp(true);
   };
+  const getBreakupReportDetails = () => {
+    var _wsAdditionalDetails$2, _wsAdditionalDetails$3, _wsAdditionalDetails$4, _wsAdditionalDetails$5, _wsAdditionalDetails$6, _wsAdditionalDetails$7, _breakUpData$billSlab, _breakUpData$billSlab2, _breakUpData$billSlab3;
+    const amountRows = function (rows) {
+      if (rows === void 0) {
+        rows = [];
+      }
+      return rows.map(row => ({
+        title: t(row === null || row === void 0 ? void 0 : row.taxHeadCode),
+        value: "\u20B9" + formatNumber(row === null || row === void 0 ? void 0 : row.amount)
+      }));
+    };
+    const connectionHolder = wsAdditionalDetails === null || wsAdditionalDetails === void 0 ? void 0 : (_wsAdditionalDetails$2 = wsAdditionalDetails.additionalDetails) === null || _wsAdditionalDetails$2 === void 0 ? void 0 : (_wsAdditionalDetails$3 = _wsAdditionalDetails$2.appDetails) === null || _wsAdditionalDetails$3 === void 0 ? void 0 : (_wsAdditionalDetails$4 = _wsAdditionalDetails$3.connectionHolders) === null || _wsAdditionalDetails$4 === void 0 ? void 0 : _wsAdditionalDetails$4[0];
+    const applicantName = [connectionHolder === null || connectionHolder === void 0 ? void 0 : connectionHolder.name, connectionHolder === null || connectionHolder === void 0 ? void 0 : connectionHolder.middleName, connectionHolder === null || connectionHolder === void 0 ? void 0 : connectionHolder.lastName].filter(Boolean).join(" ") || "-";
+    const mobileNumber = (connectionHolder === null || connectionHolder === void 0 ? void 0 : connectionHolder.mobileNumber) || "-";
+    const appNumber = (wsAdditionalDetails === null || wsAdditionalDetails === void 0 ? void 0 : (_wsAdditionalDetails$5 = wsAdditionalDetails.additionalDetails) === null || _wsAdditionalDetails$5 === void 0 ? void 0 : (_wsAdditionalDetails$6 = _wsAdditionalDetails$5.data) === null || _wsAdditionalDetails$6 === void 0 ? void 0 : _wsAdditionalDetails$6.applicationNo) || (wsAdditionalDetails === null || wsAdditionalDetails === void 0 ? void 0 : (_wsAdditionalDetails$7 = wsAdditionalDetails.additionalDetails) === null || _wsAdditionalDetails$7 === void 0 ? void 0 : _wsAdditionalDetails$7.applicationNumber) || "-";
+    return [{
+      title: "Applicant Details",
+      values: [{
+        title: "Application Number",
+        value: appNumber
+      }, {
+        title: "Applicant Name",
+        value: applicantName
+      }, {
+        title: "Mobile Number",
+        value: mobileNumber
+      }]
+    }, {
+      title: t("WS_APPLICATION_FEE_HEADER"),
+      values: amountRows([...((breakUpData === null || breakUpData === void 0 ? void 0 : (_breakUpData$billSlab = breakUpData.billSlabData) === null || _breakUpData$billSlab === void 0 ? void 0 : _breakUpData$billSlab.FEE) || []), ...((breakUpData === null || breakUpData === void 0 ? void 0 : (_breakUpData$billSlab2 = breakUpData.billSlabData) === null || _breakUpData$billSlab2 === void 0 ? void 0 : _breakUpData$billSlab2.CHARGES) || [])])
+    }, {
+      title: "Property details",
+      values: propertyRows.map(_ref4 => {
+        let label = _ref4.label,
+          value = _ref4.value,
+          currency = _ref4.currency,
+          unit = _ref4.unit,
+          isText = _ref4.isText;
+        return {
+          title: label,
+          value: currency ? "\u20B9" + formatNumber(value) : isText ? value || "-" : "" + formatNumber(value) + unit
+        };
+      })
+    }, {
+      title: "Taxes",
+      values: amountRows(breakUpData === null || breakUpData === void 0 ? void 0 : (_breakUpData$billSlab3 = breakUpData.billSlabData) === null || _breakUpData$billSlab3 === void 0 ? void 0 : _breakUpData$billSlab3.TAX)
+    }, {
+      title: "Water demand details",
+      values: waterDemandRows.map(_ref5 => {
+        let label = _ref5.label,
+          value = _ref5.value,
+          currency = _ref5.currency,
+          unit = _ref5.unit,
+          isText = _ref5.isText;
+        return {
+          title: label,
+          value: currency ? "\u20B9" + formatNumber(value) : isText ? value || "-" : "" + formatNumber(value) + unit
+        };
+      })
+    }, {
+      title: "Infrastructure charge details",
+      values: infrastructureChargeRows.map(_ref6 => {
+        let label = _ref6.label,
+          value = _ref6.value,
+          currency = _ref6.currency,
+          unit = _ref6.unit,
+          isText = _ref6.isText;
+        return {
+          title: label,
+          value: currency ? "\u20B9" + formatNumber(value) : isText ? value || "-" : "" + formatNumber(value) + unit
+        };
+      })
+    }, {
+      title: "Total",
+      values: [{
+        title: t("PDF_STATIC_LABEL_CONSOLIDATED_TLAPP_TOTAL_AMOUNT"),
+        value: "\u20B9" + formatNumber(breakUpData === null || breakUpData === void 0 ? void 0 : breakUpData.totalAmount)
+      }]
+    }].filter(section => section.values.length > 0);
+  };
+  const generateBreakupReport = mode => {
+    var _Digit$Utils, _Digit$Utils$pdf;
+    const generateReport = (_Digit$Utils = Digit.Utils) === null || _Digit$Utils === void 0 ? void 0 : (_Digit$Utils$pdf = _Digit$Utils.pdf) === null || _Digit$Utils$pdf === void 0 ? void 0 : _Digit$Utils$pdf.generateCalculationBreakupReport;
+    if (typeof generateReport === "function") {
+      return generateReport({
+        tenantId: Digit.ULBService.getCurrentTenantId(),
+        heading: t("WS_CALCULATION_BREAKUP"),
+        details: getBreakupReportDetails(),
+        t,
+        mode
+      });
+    }
+    return mode === "download" ? Digit.Download.PDF(breakupRef, t("WS_CALCULATION_BREAKUP")) : null;
+  };
+  const handleDownload = () => generateBreakupReport("download");
+  const handlePrint = () => {
+    var _Digit$Utils2, _Digit$Utils2$pdf, _breakupRef$current, _window$mSewaApp, _window$mSewaApp$isMs;
+    if ((_Digit$Utils2 = Digit.Utils) !== null && _Digit$Utils2 !== void 0 && (_Digit$Utils2$pdf = _Digit$Utils2.pdf) !== null && _Digit$Utils2$pdf !== void 0 && _Digit$Utils2$pdf.generateCalculationBreakupReport) {
+      return generateBreakupReport("print");
+    }
+    const content = (_breakupRef$current = breakupRef.current) === null || _breakupRef$current === void 0 ? void 0 : _breakupRef$current.innerHTML;
+    if (!content) return;
+    if ((_window$mSewaApp = window.mSewaApp) !== null && _window$mSewaApp !== void 0 && (_window$mSewaApp$isMs = _window$mSewaApp.isMsewaApp) !== null && _window$mSewaApp$isMs !== void 0 && _window$mSewaApp$isMs.call(_window$mSewaApp)) {
+      window.mSewaApp.downloadBase64File(window.btoa(unescape(encodeURIComponent(content))), t("WS_CALCULATION_BREAKUP"));
+      return;
+    }
+    const printWindow = window.open("", "");
+    if (!printWindow) return;
+    printWindow.document.write("<html><body>" + content + "</body></html>");
+    printWindow.document.close();
+    printWindow.focus();
+    printWindow.print();
+  };
+  const propertyDetail = breakUpData === null || breakUpData === void 0 ? void 0 : (_breakUpData$calculat = breakUpData.calculationDetail) === null || _breakUpData$calculat === void 0 ? void 0 : _breakUpData$calculat.propertyDetail;
+  const waterDemandDetail = breakUpData === null || breakUpData === void 0 ? void 0 : (_breakUpData$calculat2 = breakUpData.calculationDetail) === null || _breakUpData$calculat2 === void 0 ? void 0 : _breakUpData$calculat2.waterDemandDetail;
+  const infrastructureChargeDetail = breakUpData === null || breakUpData === void 0 ? void 0 : (_breakUpData$calculat3 = breakUpData.calculationDetail) === null || _breakUpData$calculat3 === void 0 ? void 0 : _breakUpData$calculat3.infrastructureChargeDetail;
+  const propertyRows = propertyDetail ? [{
+    label: "Property ID",
+    value: propertyDetail.propertyId,
+    isText: true
+  }, {
+    label: "Property type",
+    value: propertyDetail.propertyType,
+    isText: true
+  }, {
+    label: "Plot area",
+    value: propertyDetail.landArea,
+    unit: " (sq. meter.)"
+  }, {
+    label: "Built-up area",
+    value: propertyDetail.superBuiltUpArea,
+    unit: " (sq. meter.)"
+  }, {
+    label: "farArea",
+    value: propertyDetail.farArea,
+    isText: true
+  }, {
+    label: "coveredArea",
+    value: propertyDetail.coveredArea,
+    isText: true
+  }, {
+    label: "numberOfDwellingUnits",
+    value: propertyDetail.numberOfDwellingUnits,
+    isText: true
+  }, {
+    label: "numberOfBeds",
+    value: propertyDetail.numberOfBeds,
+    isText: true
+  }, {
+    label: "numberOfRooms",
+    value: propertyDetail.numberOfRooms,
+    isText: true
+  }, {
+    label: "numberOfStudents",
+    value: propertyDetail.numberOfStudents,
+    isText: true
+  }, {
+    label: "numberOfStaff",
+    value: propertyDetail.numberOfStaff,
+    isText: true
+  }, {
+    label: "Usage category",
+    value: propertyDetail.usageCategory,
+    isText: true
+  }] : [];
+  const waterDemandRows = waterDemandDetail ? [{
+    label: "Calculated occupancy",
+    value: waterDemandDetail.calculatedOccupancy,
+    unit: " person"
+  }, {
+    label: "Applied LPCD",
+    value: waterDemandDetail.chosenLpcd,
+    unit: " LPD"
+  }, {
+    label: "Base demand",
+    value: waterDemandDetail.baseDemand,
+    unit: " LPD"
+  }, {
+    label: "Contingency/Floating Occupancy",
+    value: waterDemandDetail.contingencyPercentage,
+    unit: "%"
+  }, {
+    label: "Total water demand",
+    value: waterDemandDetail.totalWaterDemandLPD,
+    unit: " LPD"
+  }] : [];
+  const infrastructureChargeRows = infrastructureChargeDetail ? [{
+    label: "Colony category",
+    value: infrastructureChargeDetail.colonyCategory,
+    isText: true
+  }, {
+    label: "Plot area",
+    value: infrastructureChargeDetail.plotArea,
+    unit: " (sq. meter.)"
+  }, {
+    label: "Water rate",
+    value: infrastructureChargeDetail.waterRatePerLPD,
+    currency: true
+  }, {
+    label: "Sewer rate",
+    value: infrastructureChargeDetail.sewerRatePerLPD,
+    currency: true
+  }, {
+    label: "Water Infra Charges",
+    value: infrastructureChargeDetail.waterComponentIFC,
+    currency: true
+  }, {
+    label: "Sewer Infra Charges",
+    value: infrastructureChargeDetail.sewerComponentIFC,
+    currency: true
+  }, {
+    label: "Rebate",
+    value: infrastructureChargeDetail.rebatePercentage,
+    unit: "%"
+  }, {
+    label: "Rebate amount",
+    value: infrastructureChargeDetail.rebateAmount,
+    currency: true
+  }, {
+    label: "Net IFC",
+    value: infrastructureChargeDetail.netIFC,
+    currency: true
+  }] : [];
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
     style: {
       lineHeight: "19px",
       maxWidth: "950px",
       minWidth: "280px"
     }
-  }, wsAdditionalDetails !== null && wsAdditionalDetails !== void 0 && (_wsAdditionalDetails$ = wsAdditionalDetails.additionalDetails) !== null && _wsAdditionalDetails$ !== void 0 && _wsAdditionalDetails$.isViewBreakup ? /*#__PURE__*/React.createElement("div", {
+  }, wsAdditionalDetails !== null && wsAdditionalDetails !== void 0 && (_wsAdditionalDetails$8 = wsAdditionalDetails.additionalDetails) !== null && _wsAdditionalDetails$8 !== void 0 && _wsAdditionalDetails$8.isViewBreakup ? /*#__PURE__*/React.createElement("div", {
     onClick: e => onPopupOpen(),
     style: {
       marginTop: "12px"
@@ -25813,6 +26546,9 @@ const ViewBreakup = _ref => {
     headerBarMain: /*#__PURE__*/React.createElement(Heading, {
       label: t("WS_CALCULATION_BREAKUP")
     }),
+    width: "950px",
+    print: print || handlePrint,
+    download: download || handleDownload,
     headerBarEnd: /*#__PURE__*/React.createElement(CloseBtn, {
       onClick: () => {
         showPopUp(false);
@@ -25828,16 +26564,13 @@ const ViewBreakup = _ref => {
     popupModuleMianStyles: {
       paddingTop: "0px"
     }
-  }, /*#__PURE__*/React.createElement(StatusTable, {
-    style: {
-      padding: "10px",
-      paddingTop: "0px"
-    }
-  }, /*#__PURE__*/React.createElement(CardSectionHeader, {
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: breakupRef
+  }, /*#__PURE__*/React.createElement(StatusTable, null, /*#__PURE__*/React.createElement(CardSectionHeader, {
     style: {
       margin: "10px 0px"
     }
-  }, t("WS_APPLICATION_FEE_HEADER")), breakUpData === null || breakUpData === void 0 ? void 0 : (_breakUpData$billSlab = breakUpData.billSlabData) === null || _breakUpData$billSlab === void 0 ? void 0 : (_breakUpData$billSlab2 = _breakUpData$billSlab.FEE) === null || _breakUpData$billSlab2 === void 0 ? void 0 : _breakUpData$billSlab2.map(data => /*#__PURE__*/React.createElement(Row, {
+  }, t("WS_APPLICATION_FEE_HEADER")), breakUpData === null || breakUpData === void 0 ? void 0 : (_breakUpData$billSlab4 = breakUpData.billSlabData) === null || _breakUpData$billSlab4 === void 0 ? void 0 : (_breakUpData$billSlab5 = _breakUpData$billSlab4.FEE) === null || _breakUpData$billSlab5 === void 0 ? void 0 : _breakUpData$billSlab5.map(data => /*#__PURE__*/React.createElement(Row, {
     className: "border-none",
     rowContainerStyle: {
       margin: "0px"
@@ -25851,11 +26584,7 @@ const ViewBreakup = _ref => {
     textStyle: {
       textAlign: "right"
     }
-  })), /*#__PURE__*/React.createElement(CardSectionHeader, {
-    style: {
-      margin: "10px 0px"
-    }
-  }, t("WS_SERVICE_FEE_HEADER")), breakUpData === null || breakUpData === void 0 ? void 0 : (_breakUpData$billSlab3 = breakUpData.billSlabData) === null || _breakUpData$billSlab3 === void 0 ? void 0 : (_breakUpData$billSlab4 = _breakUpData$billSlab3.CHARGES) === null || _breakUpData$billSlab4 === void 0 ? void 0 : _breakUpData$billSlab4.map(data => /*#__PURE__*/React.createElement(Row, {
+  })), breakUpData === null || breakUpData === void 0 ? void 0 : (_breakUpData$billSlab6 = breakUpData.billSlabData) === null || _breakUpData$billSlab6 === void 0 ? void 0 : (_breakUpData$billSlab7 = _breakUpData$billSlab6.CHARGES) === null || _breakUpData$billSlab7 === void 0 ? void 0 : _breakUpData$billSlab7.map(data => /*#__PURE__*/React.createElement(Row, {
     className: "border-none",
     rowContainerStyle: {
       margin: "0px"
@@ -25869,7 +26598,7 @@ const ViewBreakup = _ref => {
     textStyle: {
       textAlign: "right"
     }
-  })), breakUpData === null || breakUpData === void 0 ? void 0 : (_breakUpData$billSlab5 = breakUpData.billSlabData) === null || _breakUpData$billSlab5 === void 0 ? void 0 : (_breakUpData$billSlab6 = _breakUpData$billSlab5.TAX) === null || _breakUpData$billSlab6 === void 0 ? void 0 : _breakUpData$billSlab6.map(data => /*#__PURE__*/React.createElement(Row, {
+  })), breakUpData === null || breakUpData === void 0 ? void 0 : (_breakUpData$billSlab8 = breakUpData.billSlabData) === null || _breakUpData$billSlab8 === void 0 ? void 0 : (_breakUpData$billSlab9 = _breakUpData$billSlab8.TAX) === null || _breakUpData$billSlab9 === void 0 ? void 0 : _breakUpData$billSlab9.map(data => /*#__PURE__*/React.createElement(Row, {
     className: "border-none",
     rowContainerStyle: {
       margin: "0px"
@@ -25883,6 +26612,24 @@ const ViewBreakup = _ref => {
     textStyle: {
       textAlign: "right"
     }
+  })), propertyRows.length > 0 && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(CardSectionHeader, {
+    style: {
+      margin: "10px 0px"
+    }
+  }, "Property details"), /*#__PURE__*/React.createElement(DetailRows, {
+    rows: propertyRows
+  })), waterDemandRows.length > 0 && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(CardSectionHeader, {
+    style: {
+      margin: "10px 0px"
+    }
+  }, "Water demand details"), /*#__PURE__*/React.createElement(DetailRows, {
+    rows: waterDemandRows
+  })), infrastructureChargeRows.length > 0 && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(CardSectionHeader, {
+    style: {
+      margin: "10px 0px"
+    }
+  }, "Infrastructure charge details"), /*#__PURE__*/React.createElement(DetailRows, {
+    rows: infrastructureChargeRows
   })), /*#__PURE__*/React.createElement("hr", {
     style: {
       color: "#cccccc",
@@ -25905,7 +26652,7 @@ const ViewBreakup = _ref => {
       fontWeight: "700",
       fontSize: "24px"
     }
-  })))));
+  }))))));
 };
 
 const styles = {