@djb25/digit-ui-module-ws 1.0.25 → 1.0.26

package/dist/index.modern.js

@@ -15706,6 +15706,9 @@ function SelectDocument$1({
       if (file) {
         if (file.size >= 5242880) {
           setError(t("CS_MAXIMUM_UPLOAD_SIZE_EXCEEDED"));
+        } else if ((doc === null || doc === void 0 ? void 0 : doc.code) === "OWNER.APPLICANTPHOTO" && !file.type.match(/image\/(jpeg|png)/i) && !file.name.match(/\.(jpg|jpeg|png)$/i)) {
+          setError(t("WS_ONLY_JPG_PNG_ALLOWED") || "Only JPG and PNG files are allowed for Applicant Photo");
+          setFile(null);
         } else {
           try {
             var _response$data, _response$data$files;
@@ -15787,7 +15790,7 @@ function SelectDocument$1({
     },
     buttonType: "button",
     error: !uploadedFile,
-    accept: "image/*, .pdf, .png, .jpeg, .jpg",
+    accept: (doc === null || doc === void 0 ? void 0 : doc.code) === "OWNER.APPLICANTPHOTO" ? "image/jpeg, image/png, .jpg, .jpeg, .png" : "image/*, .pdf, .png, .jpeg, .jpg",
     uploadedFiles: uploadedFile && file && isCameraFile ? [[(file === null || file === void 0 ? void 0 : file.name) || "applicant_photo.jpg", {
       fileStoreId: uploadedFile
     }]] : undefined,
@@ -35344,6 +35347,115 @@ const NewApplication = () => {
   }));
 };
 
+const CheckIcon = () => /*#__PURE__*/React.createElement("svg", {
+  width: "14",
+  height: "14",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: "3",
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+}, /*#__PURE__*/React.createElement("polyline", {
+  points: "20 6 9 17 4 12"
+}));
+const ClockIcon = () => /*#__PURE__*/React.createElement("svg", {
+  width: "14",
+  height: "14",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: "2",
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+}, /*#__PURE__*/React.createElement("circle", {
+  cx: "12",
+  cy: "12",
+  r: "10"
+}), /*#__PURE__*/React.createElement("polyline", {
+  className: "clock-hands2",
+  points: "12 6 12 12 16 14"
+}));
+const WorkflowTimeline = ({
+  workflowDetails,
+  hideTimeline,
+  setHideTimeline
+}) => {
+  var _workflowDetails$data;
+  const {
+    t
+  } = useTranslation();
+  const timeline = workflowDetails === null || workflowDetails === void 0 ? void 0 : (_workflowDetails$data = workflowDetails.data) === null || _workflowDetails$data === void 0 ? void 0 : _workflowDetails$data.processInstances;
+  if (!timeline || timeline.length === 0) {
+    return null;
+  }
+  const getStatusClass = index => {
+    if (index === 0) return "current2";
+    return "completed2";
+  };
+  const convertEpochToDateTime = epoch => {
+    if (!epoch) return "N/A";
+    const date = new Date(epoch);
+    const day = String(date.getDate()).padStart(2, "0");
+    const month = String(date.getMonth() + 1).padStart(2, "0");
+    const year = date.getFullYear().toString().slice(-2);
+    const hours = String(date.getHours()).padStart(2, "0");
+    const minutes = String(date.getMinutes()).padStart(2, "0");
+    return `${day}/${month}/${year} ${hours}:${minutes}`;
+  };
+  return /*#__PURE__*/React.createElement(Card, {
+    className: "workflow-timeline-card2 digit-form-composer",
+    style: {
+      background: "#fff",
+      padding: "16px",
+      height: hideTimeline ? "100%" : ""
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `timeline-header-wrapper ${hideTimeline ? "collapsed" : ""}`
+  }, /*#__PURE__*/React.createElement(CardSubHeader, {
+    style: {
+      marginBottom: "0",
+      fontSize: "16px",
+      fontWeight: "700",
+      color: "#374151"
+    },
+    className: hideTimeline ? "hidden-content" : ""
+  }, t("WORKFLOW_TIMELINE"))), /*#__PURE__*/React.createElement("div", {
+    className: hideTimeline ? "hidden-content" : "timeline-container2"
+  }, timeline.map((checkpoint, index) => {
+    var _checkpoint$auditDeta, _checkpoint$auditDeta2, _checkpoint$state, _checkpoint$state2, _checkpoint$state3, _checkpoint$assigner, _checkpoint$assigner2;
+    const statusClass = getStatusClass(index);
+    const showLine = index !== timeline.length - 1 && timeline.length > 1;
+    const epochTime = (checkpoint === null || checkpoint === void 0 ? void 0 : (_checkpoint$auditDeta = checkpoint.auditDetails) === null || _checkpoint$auditDeta === void 0 ? void 0 : _checkpoint$auditDeta.lastModifiedTime) || (checkpoint === null || checkpoint === void 0 ? void 0 : (_checkpoint$auditDeta2 = checkpoint.auditDetails) === null || _checkpoint$auditDeta2 === void 0 ? void 0 : _checkpoint$auditDeta2.createdTime);
+    return /*#__PURE__*/React.createElement("div", {
+      key: index,
+      className: `timeline-item2 ${statusClass}`
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "timeline-marker2"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "timeline-circle2"
+    }, statusClass === "completed2" ? /*#__PURE__*/React.createElement(CheckIcon, null) : /*#__PURE__*/React.createElement(ClockIcon, null)), showLine && /*#__PURE__*/React.createElement("div", {
+      className: "timeline-line2"
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "timeline-content2"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "timeline-header2"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "timeline-title2"
+    }, t(`WF_${checkpoint === null || checkpoint === void 0 ? void 0 : (_checkpoint$state = checkpoint.state) === null || _checkpoint$state === void 0 ? void 0 : _checkpoint$state.state}`)), /*#__PURE__*/React.createElement("span", {
+      className: "timeline-date2"
+    }, convertEpochToDateTime(epochTime))), /*#__PURE__*/React.createElement("div", {
+      className: "timeline-body2"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: `timeline-status-tag2 status-${statusClass}`
+    }, t((checkpoint === null || checkpoint === void 0 ? void 0 : (_checkpoint$state2 = checkpoint.state) === null || _checkpoint$state2 === void 0 ? void 0 : _checkpoint$state2.applicationStatus) || (checkpoint === null || checkpoint === void 0 ? void 0 : (_checkpoint$state3 = checkpoint.state) === null || _checkpoint$state3 === void 0 ? void 0 : _checkpoint$state3.state))), (checkpoint === null || checkpoint === void 0 ? void 0 : checkpoint.comment) && /*#__PURE__*/React.createElement("div", {
+      className: "timeline-comment2"
+    }, checkpoint.comment)), (checkpoint === null || checkpoint === void 0 ? void 0 : (_checkpoint$assigner = checkpoint.assigner) === null || _checkpoint$assigner === void 0 ? void 0 : _checkpoint$assigner.name) && /*#__PURE__*/React.createElement("div", {
+      className: "timeline-footer2"
+    }, /*#__PURE__*/React.createElement("span", null, t("ES_COMMON_ASSIGNED_TO"), ": ", /*#__PURE__*/React.createElement("strong", null, checkpoint === null || checkpoint === void 0 ? void 0 : (_checkpoint$assigner2 = checkpoint.assigner) === null || _checkpoint$assigner2 === void 0 ? void 0 : _checkpoint$assigner2.name)))));
+  })));
+};
+
 const configPTApproverApplication = ({
   t,
   action,
@@ -39283,10 +39395,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));
@@ -39304,12 +39417,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
@@ -39317,7 +39588,7 @@ function PropertyDocuments({
       style: checkLocation ? {
         marginTop: "32px",
         marginBottom: "18px",
-        color: "#0B0C0C, 100%",
+        color: "#0B0C0C",
         fontSize: "24px",
         lineHeight: "30px"
       } : {
@@ -39326,17 +39597,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",
@@ -39383,10 +39658,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"
@@ -40141,12 +40416,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,
@@ -40175,50 +40449,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 : ""
-    });
   }))))));
 };
 
@@ -42234,6 +42464,7 @@ const ApplicationDetails$1 = () => {
   const applicationNumber = filters === null || filters === void 0 ? void 0 : filters.applicationNumber;
   const serviceType = filters === null || filters === void 0 ? void 0 : filters.service;
   const menuRef = useRef();
+  const [hideTimeline, setHideTimeline] = React.useState(typeof window !== "undefined" ? window.innerWidth < 768 : false);
   sessionStorage.removeItem("Digit.PT_CREATE_EMP_WS_NEW_FORM");
   sessionStorage.removeItem("IsDetailsExists");
   const [sessionFormData, setSessionFormData, clearSessionFormData] = Digit.Hooks.useSessionStorage("ADHOC_ADD_REBATE_DATA", {});
@@ -42619,7 +42850,28 @@ const ApplicationDetails$1 = () => {
     return a.order - b.order;
   });
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "employee-main-application-details"
+    className: "employee-main-application-details",
+    style: {
+      display: "flex",
+      gap: "20px"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `workflow-timeline-wrapper no-scrollbar ${hideTimeline ? "hide-workflow" : ""}`,
+    style: {
+      flex: "1 1 300px",
+      maxWidth: hideTimeline ? "fit-content" : "400px",
+      transition: "max-width 0.3s"
+    }
+  }, /*#__PURE__*/React.createElement(WorkflowTimeline, {
+    workflowDetails: workflowDetails,
+    hideTimeline: hideTimeline,
+    setHideTimeline: setHideTimeline
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: "2 1 500px",
+      minWidth: "300px",
+      overflowY: "auto"
+    }
   }, /*#__PURE__*/React.createElement(ApplicationDetails, {
     applicationDetails: applicationDetails,
     isLoading: isLoading || isBillingServiceLoading || isCommonmastersLoading || isServicesMasterLoading,
@@ -42636,7 +42888,8 @@ const ApplicationDetails$1 = () => {
     timelineStatusPrefix: `WF_${applicationDetails === null || applicationDetails === void 0 ? void 0 : (_applicationDetails$p18 = applicationDetails.processInstancesDetails) === null || _applicationDetails$p18 === void 0 ? void 0 : (_applicationDetails$p19 = _applicationDetails$p18[0]) === null || _applicationDetails$p19 === void 0 ? void 0 : (_applicationDetails$p20 = _applicationDetails$p19.businessService) === null || _applicationDetails$p20 === void 0 ? void 0 : _applicationDetails$p20.toUpperCase()}_`,
     oldValue: res,
     isInfoLabel: checkforPrivacyenablement(),
-    clearDataDetails: clearDataDetails
+    clearDataDetails: clearDataDetails,
+    showTimeLine: false
   }), showWaringToast && /*#__PURE__*/React.createElement(Toast, {
     style: {
       zIndex: "10000"
@@ -42646,7 +42899,7 @@ const ApplicationDetails$1 = () => {
     label: t(showWaringToast === null || showWaringToast === void 0 ? void 0 : showWaringToast.message),
     onClose: () => setShowWaringToast(null),
     isDleteBtn: true
-  })));
+  }))));
 };
 
 const GetConnectionDetails = () => {
@@ -46464,7 +46717,7 @@ const OLDApplication = () => {
       if (config) {
         var _config$body;
         const allCreateSections = (config === null || config === void 0 ? void 0 : (_config$body = config.body) === null || _config$body === void 0 ? void 0 : _config$body.filter(section => section === null || section === void 0 ? void 0 : section.isCreateConnection)) || [];
-        const desiredComponentOrder = ["CPTPropertySearchNSummary", "WSConnectionDetails", "WSConnectionHolderDetails", "CPTPropertyLocationDetails", "PropertyWaterConnection", "WSDjbEmployee", "WSActivationPlumberDetails", "WSRoadCuttingDetails", "WSDocumentsEmployee", "WSBankDetails", "WSDeclaration"];
+        const desiredComponentOrder = ["CPTPropertySearchNSummary", "WSConnectionDetails", "WSConnectionHolderDetails", "CPTPropertyLocationDetails", "PropertyWaterConnection", "WSDjbEmployee", "WSActivationPlumberDetails", "WSRoadCuttingDetails", "WSBankDetails", "WSDocumentsEmployee", "WSDeclaration"];
         const reorderedBody = [];
         desiredComponentOrder.forEach(compName => {
           const section = allCreateSections.find(s => {