@mseva/digit-ui-module-engagement 1.1.30 → 1.1.32

package/dist/index.modern.js

@@ -1,4 +1,4 @@
-import { SurveyIconSolid, PMBIconSolid, EventsIconSolid, DocumentIconSolid, EmployeeModuleCard, LabelFieldPair as LabelFieldPair$1, CardLabel as CardLabel$1, Dropdown, RemoveableTag, TextInput as TextInput$1, TextArea as TextArea$1, CardLabelError as CardLabelError$2, UploadFile, Loader, Header, FormComposer as FormComposer$1, Card as Card$1, CardText as CardText$1, ActionBar as ActionBar$1, SubmitBar as SubmitBar$1, Banner, Table, CloseSvg, Label, LinkLabel, EventCalendar, DocumentIcon, CheckBox, RefreshIcon, DateRange, DetailsCard, SearchAction, FilterAction, PopUp, PMBIcon, RadioButtons, ArrowDown, DatePicker, Modal, CardSubHeader as CardSubHeader$1, PDFSvg, MultiUploadWrapper, CardHeader, CardSectionHeader as CardSectionHeader$1, StatusTable, Row, LinkButton as LinkButton$1, Close as Close$f, BreakLine as BreakLine$1, TelePhone, DisplayPhotos, Toast as Toast$1, CheckPoint, ConnectingCheckPoints, Menu, ButtonSelector, GenericFileIcon, PrivateRoute, LocationSearch, OnGroundEventCard, WhatsNewCard, CardCaption, SearchIconSvg, ViewsIcon, ExternalLinkIcon, DownloadImgIcon, AppContainer, PrevIcon, SearchField, BackButton, MapMarker, Clock, FilterFormField, EditIcon, InboxComposer, InfoIcon, DustbinIcon, MultiLink, BreadCrumb } from '@mseva/digit-ui-react-components';
+import { SurveyIconSolid, PMBIconSolid, EventsIconSolid, DocumentIconSolid, EmployeeModuleCard, LabelFieldPair as LabelFieldPair$1, CardLabel as CardLabel$1, Dropdown, RemoveableTag, TextInput as TextInput$1, TextArea as TextArea$1, CardLabelError as CardLabelError$2, UploadFile, Loader, Header, FormComposer as FormComposer$1, Card as Card$1, CardText as CardText$1, ActionBar as ActionBar$1, SubmitBar as SubmitBar$1, Banner, Table, CloseSvg, Label, LinkLabel, EventCalendar, DocumentIcon, CheckBox, RefreshIcon, DateRange, DetailsCard, SearchAction, FilterAction, PopUp, PMBIcon, RadioButtons, ArrowDown, DatePicker, Modal, CardSubHeader as CardSubHeader$1, PDFSvg as PDFSvg$1, MultiUploadWrapper, CardHeader, CardSectionHeader as CardSectionHeader$1, StatusTable, Row, LinkButton as LinkButton$1, Close as Close$g, BreakLine as BreakLine$1, TelePhone, DisplayPhotos, Toast as Toast$1, CheckPoint, ConnectingCheckPoints, Menu, ButtonSelector, GenericFileIcon, PrivateRoute, LocationSearch, OnGroundEventCard, WhatsNewCard, CardCaption, SearchIconSvg, ViewsIcon, ExternalLinkIcon, DownloadImgIcon, AppContainer, PrevIcon, SearchField, BackButton, MapMarker, Clock, FilterFormField, EditIcon, InboxComposer, InfoIcon, DustbinIcon, MultiLink, BreadCrumb } from '@mseva/digit-ui-react-components';
 import React, { useEffect, useMemo, Fragment as Fragment$1, useState, useCallback, useRef, useReducer, forwardRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useHistory, useParams, Link, Switch, Redirect as Redirect$1, Route, useRouteMatch } from 'react-router-dom';
@@ -6884,7 +6884,7 @@ const ActionModal$3 = ({
   workflowDetails,
   blockReason
 }) => {
-  var _workflowDetails$data, _workflowDetails$data2, _workflowDetails$data3, _workflowDetails$data4, _workflowDetails$data5, _applicationData, _applicationData$land, _applicationData$land2, _applicationData2, _applicationData2$lan, _applicationData2$lan2;
+  var _workflowDetails$data, _workflowDetails$data2, _workflowDetails$data3, _workflowDetails$data4, _workflowDetails$data5, _applicationData, _applicationData$land, _applicationData$land2, _applicationData2, _applicationData2$lan, _applicationData2$lan2, _applicationData3, _applicationData3$add, _applicationData4, _applicationData4$add, _applicationData5, _applicationData5$add, _applicationData6;
   console.log("applicationData_BPAACTIONMODAL", applicationData);
   const uniqueRoles = [...new Set(workflowDetails === null || workflowDetails === void 0 ? void 0 : (_workflowDetails$data = workflowDetails.data) === null || _workflowDetails$data === void 0 ? void 0 : (_workflowDetails$data2 = _workflowDetails$data.initialActionState) === null || _workflowDetails$data2 === void 0 ? void 0 : (_workflowDetails$data3 = _workflowDetails$data2.nextActions) === null || _workflowDetails$data3 === void 0 ? void 0 : (_workflowDetails$data4 = _workflowDetails$data3.find(ele => (ele === null || ele === void 0 ? void 0 : ele.action) === (action === null || action === void 0 ? void 0 : action.action))) === null || _workflowDetails$data4 === void 0 ? void 0 : (_workflowDetails$data5 = _workflowDetails$data4.actions) === null || _workflowDetails$data5 === void 0 ? void 0 : _workflowDetails$data5.flatMap(e => e.roles || []))];
   console.log("workflowDetails_BPAACTIONMODAL", workflowDetails, uniqueRoles, action);
@@ -6896,6 +6896,10 @@ const ActionModal$3 = ({
     roles: uniqueRoles === null || uniqueRoles === void 0 ? void 0 : uniqueRoles.map(role => ({
       code: role
     })),
+    zones: (_applicationData3 = applicationData) === null || _applicationData3 === void 0 ? void 0 : (_applicationData3$add = _applicationData3.additionalDetails) === null || _applicationData3$add === void 0 ? void 0 : _applicationData3$add.zonenumber,
+    categories: (_applicationData4 = applicationData) === null || _applicationData4 === void 0 ? void 0 : (_applicationData4$add = _applicationData4.additionalDetails) === null || _applicationData4$add === void 0 ? void 0 : _applicationData4$add.categories,
+    subcategories: (_applicationData5 = applicationData) === null || _applicationData5 === void 0 ? void 0 : (_applicationData5$add = _applicationData5.additionalDetails) === null || _applicationData5$add === void 0 ? void 0 : _applicationData5$add.subcategories,
+    assignedtenattids: (_applicationData6 = applicationData) === null || _applicationData6 === void 0 ? void 0 : _applicationData6.tenantId,
     isActive: true
   }, {
     enabled: !(action !== null && action !== void 0 && action.isTerminateState)
@@ -7024,12 +7028,12 @@ const ActionModal$3 = ({
     return result;
   };
   async function submit(data) {
-    var _applicationData3, _applicationData4, _data$comments, _data$comments2, _workflowDetails$data6, _workflowDetails$data7, _workflowDetails$data8, _workflowDetails$data9, _workflowDetails$data0, _workflowDetails$data1, _workflowDetails$data10, _workflowDetails$data11, _workflowDetails$data12, _workflowDetails$data13, _workflowDetails$data14, _workflowDetails$data15, _workflowDetails$data16, _workflowDetails$data17, _workflowDetails$data18, _workflowDetails$data19, _applicationData5, _applicationData5$add, _workflowDetails$data20, _workflowDetails$data21, _workflowDetails$data22, _workflowDetails$data23, _workflowDetails$data24, _workflowDetails$data25, _workflowDetails$data26, _workflowDetails$data27, _applicationData6, _applicationData6$add, _applicationData6$add2, _applicationData7, _applicationData7$add, _applicationData7$add2, _applicationData8, _applicationData8$add, _applicationData8$add2, _applicationData9, _applicationData9$add, _applicationData9$add2;
+    var _applicationData7, _applicationData8, _data$comments, _data$comments2, _workflowDetails$data6, _workflowDetails$data7, _workflowDetails$data8, _workflowDetails$data9, _workflowDetails$data0, _workflowDetails$data1, _workflowDetails$data10, _workflowDetails$data11, _workflowDetails$data12, _workflowDetails$data13, _workflowDetails$data14, _workflowDetails$data15, _workflowDetails$data16, _workflowDetails$data17, _workflowDetails$data18, _workflowDetails$data19, _applicationData9, _applicationData9$add, _workflowDetails$data20, _workflowDetails$data21, _workflowDetails$data22, _workflowDetails$data23, _workflowDetails$data24, _workflowDetails$data25, _workflowDetails$data26, _workflowDetails$data27, _applicationData0, _applicationData0$add, _applicationData0$add2, _applicationData1, _applicationData1$add, _applicationData1$add2, _applicationData10, _applicationData10$ad, _applicationData10$ad2, _applicationData11, _applicationData11$ad, _applicationData11$ad2;
     applicationData = {
       ...applicationData,
-      documents: (_applicationData3 = applicationData) === null || _applicationData3 === void 0 ? void 0 : _applicationData3.documents,
+      documents: (_applicationData7 = applicationData) === null || _applicationData7 === void 0 ? void 0 : _applicationData7.documents,
       additionalDetails: {
-        ...((_applicationData4 = applicationData) === null || _applicationData4 === void 0 ? void 0 : _applicationData4.additionalDetails),
+        ...((_applicationData8 = applicationData) === null || _applicationData8 === void 0 ? void 0 : _applicationData8.additionalDetails),
         fieldinspection_pending: getfeildInspection(applicationData),
         pendingapproval: getPendingApprovals(),
         blockingReason: selectedBlockReason === null || selectedBlockReason === void 0 ? void 0 : selectedBlockReason.name
@@ -7047,7 +7051,7 @@ const ActionModal$3 = ({
         }] : null
       },
       action: action === null || action === void 0 ? void 0 : action.action,
-      riskType: (_applicationData5 = applicationData) === null || _applicationData5 === void 0 ? void 0 : (_applicationData5$add = _applicationData5.additionalDetails) === null || _applicationData5$add === void 0 ? void 0 : _applicationData5$add.riskType,
+      riskType: (_applicationData9 = applicationData) === null || _applicationData9 === void 0 ? void 0 : (_applicationData9$add = _applicationData9.additionalDetails) === null || _applicationData9$add === void 0 ? void 0 : _applicationData9$add.riskType,
       comment: data === null || data === void 0 ? void 0 : data.comments,
       assignee: (workflowDetails === null || workflowDetails === void 0 ? void 0 : (_workflowDetails$data20 = workflowDetails.data) === null || _workflowDetails$data20 === void 0 ? void 0 : (_workflowDetails$data21 = _workflowDetails$data20.processInstances) === null || _workflowDetails$data21 === void 0 ? void 0 : (_workflowDetails$data22 = _workflowDetails$data21[0]) === null || _workflowDetails$data22 === void 0 ? void 0 : (_workflowDetails$data23 = _workflowDetails$data22.state) === null || _workflowDetails$data23 === void 0 ? void 0 : _workflowDetails$data23.applicationStatus) === "FIELDINSPECTION_INPROGRESS" ? [workflowDetails === null || workflowDetails === void 0 ? void 0 : (_workflowDetails$data24 = workflowDetails.data) === null || _workflowDetails$data24 === void 0 ? void 0 : (_workflowDetails$data25 = _workflowDetails$data24.processInstances) === null || _workflowDetails$data25 === void 0 ? void 0 : (_workflowDetails$data26 = _workflowDetails$data25[0]) === null || _workflowDetails$data26 === void 0 ? void 0 : (_workflowDetails$data27 = _workflowDetails$data26.assigner) === null || _workflowDetails$data27 === void 0 ? void 0 : _workflowDetails$data27.uuid] : !(selectedApprover !== null && selectedApprover !== void 0 && selectedApprover.uuid) ? null : [selectedApprover === null || selectedApprover === void 0 ? void 0 : selectedApprover.uuid],
       wfDocuments: uploadedFile ? [{
@@ -7056,7 +7060,7 @@ const ActionModal$3 = ({
         fileStoreId: uploadedFile
       }] : null
     };
-    if (parseInt(sessionStorage.getItem("lessAdjusment")) > parseInt(sessionStorage.getItem("development")) + parseInt(sessionStorage.getItem("otherCharges")) + parseInt((_applicationData6 = applicationData) === null || _applicationData6 === void 0 ? void 0 : (_applicationData6$add = _applicationData6.additionalDetails) === null || _applicationData6$add === void 0 ? void 0 : (_applicationData6$add2 = _applicationData6$add.selfCertificationCharges) === null || _applicationData6$add2 === void 0 ? void 0 : _applicationData6$add2.BPA_MALBA_CHARGES) + parseInt((_applicationData7 = applicationData) === null || _applicationData7 === void 0 ? void 0 : (_applicationData7$add = _applicationData7.additionalDetails) === null || _applicationData7$add === void 0 ? void 0 : (_applicationData7$add2 = _applicationData7$add.selfCertificationCharges) === null || _applicationData7$add2 === void 0 ? void 0 : _applicationData7$add2.BPA_LABOUR_CESS) + parseInt((_applicationData8 = applicationData) === null || _applicationData8 === void 0 ? void 0 : (_applicationData8$add = _applicationData8.additionalDetails) === null || _applicationData8$add === void 0 ? void 0 : (_applicationData8$add2 = _applicationData8$add.selfCertificationCharges) === null || _applicationData8$add2 === void 0 ? void 0 : _applicationData8$add2.BPA_WATER_CHARGES) + parseInt((_applicationData9 = applicationData) === null || _applicationData9 === void 0 ? void 0 : (_applicationData9$add = _applicationData9.additionalDetails) === null || _applicationData9$add === void 0 ? void 0 : (_applicationData9$add2 = _applicationData9$add.selfCertificationCharges) === null || _applicationData9$add2 === void 0 ? void 0 : _applicationData9$add2.BPA_GAUSHALA_CHARGES_CESS)) {
+    if (parseInt(sessionStorage.getItem("lessAdjusment")) > parseInt(sessionStorage.getItem("development")) + parseInt(sessionStorage.getItem("otherCharges")) + parseInt((_applicationData0 = applicationData) === null || _applicationData0 === void 0 ? void 0 : (_applicationData0$add = _applicationData0.additionalDetails) === null || _applicationData0$add === void 0 ? void 0 : (_applicationData0$add2 = _applicationData0$add.selfCertificationCharges) === null || _applicationData0$add2 === void 0 ? void 0 : _applicationData0$add2.BPA_MALBA_CHARGES) + parseInt((_applicationData1 = applicationData) === null || _applicationData1 === void 0 ? void 0 : (_applicationData1$add = _applicationData1.additionalDetails) === null || _applicationData1$add === void 0 ? void 0 : (_applicationData1$add2 = _applicationData1$add.selfCertificationCharges) === null || _applicationData1$add2 === void 0 ? void 0 : _applicationData1$add2.BPA_LABOUR_CESS) + parseInt((_applicationData10 = applicationData) === null || _applicationData10 === void 0 ? void 0 : (_applicationData10$ad = _applicationData10.additionalDetails) === null || _applicationData10$ad === void 0 ? void 0 : (_applicationData10$ad2 = _applicationData10$ad.selfCertificationCharges) === null || _applicationData10$ad2 === void 0 ? void 0 : _applicationData10$ad2.BPA_WATER_CHARGES) + parseInt((_applicationData11 = applicationData) === null || _applicationData11 === void 0 ? void 0 : (_applicationData11$ad = _applicationData11.additionalDetails) === null || _applicationData11$ad === void 0 ? void 0 : (_applicationData11$ad2 = _applicationData11$ad.selfCertificationCharges) === null || _applicationData11$ad2 === void 0 ? void 0 : _applicationData11$ad2.BPA_GAUSHALA_CHARGES_CESS)) {
       closeModal();
       alert(t("Enterd Less Adjustment amount is invalid"));
     } else {
@@ -15382,7 +15386,7 @@ function DocumentsPreview({
           display: "flex",
           justifyContent: "flex-start"
         }
-      }, /*#__PURE__*/React.createElement(PDFSvg, null)), /*#__PURE__*/React.createElement("p", {
+      }, /*#__PURE__*/React.createElement(PDFSvg$1, null)), /*#__PURE__*/React.createElement("p", {
         style: {
           marginTop: "8px",
           fontWeight: "bold",
@@ -15423,7 +15427,7 @@ function DocumentsPreview({
         display: "flex",
         justifyContent: "flex-start"
       }
-    }, /*#__PURE__*/React.createElement(PDFSvg, null)), /*#__PURE__*/React.createElement("p", {
+    }, /*#__PURE__*/React.createElement(PDFSvg$1, null)), /*#__PURE__*/React.createElement("p", {
       style: {
         marginTop: "8px",
         fontWeight: "bold",
@@ -15488,7 +15492,7 @@ function DocumentsPreview({
         lineHeight: "15px",
         marginBottom: "10px"
       }
-    }, `${t(value === null || value === void 0 ? void 0 : value.docInfo)}`) : null, /*#__PURE__*/React.createElement(PDFSvg, null), /*#__PURE__*/React.createElement("p", {
+    }, `${t(value === null || value === void 0 ? void 0 : value.docInfo)}`) : null, /*#__PURE__*/React.createElement(PDFSvg$1, null), /*#__PURE__*/React.createElement("p", {
       style: {
         marginTop: "8px",
         fontSize: "16px",
@@ -16177,7 +16181,7 @@ const PermissionCheck = ({
     } : {},
     placeholder: t("BPA_ENTER_PERMIT_CONDITIONS_LABEL")
   }), /*#__PURE__*/React.createElement(LinkButton$1, {
-    label: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Close$f, {
+    label: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Close$g, {
       style: {
         float: "right",
         position: "relative",
@@ -16190,7 +16194,6 @@ const PermissionCheck = ({
     onClick: e => handleRemove(index)
   }))), /*#__PURE__*/React.createElement(LinkButton$1, {
     style: {
-      color: "#a82227",
       maxWidth: isMobile ? "fit-content" : "10%",
       marginRight: "3%"
     },
@@ -18174,6 +18177,285 @@ const PaymentHistory = ({
   }, "Total Payments: ", payments.length))));
 };
 
+const getTimelineAcknowledgementData = (workflowDetails, tenantInfo, pdfFiles = {}, t) => {
+  var _workflowDetails$data, _workflowDetails$data2, _processInstances$, _processInstances$2, _processInstances$3, _timeline$, _timeline$2, _timeline$3, _timeline$4;
+  console.log('pdfFiles', pdfFiles);
+  const timeline = (workflowDetails === null || workflowDetails === void 0 ? void 0 : (_workflowDetails$data = workflowDetails.data) === null || _workflowDetails$data === void 0 ? void 0 : _workflowDetails$data.timeline) || (workflowDetails === null || workflowDetails === void 0 ? void 0 : workflowDetails.timeline) || [];
+  const processInstances = (workflowDetails === null || workflowDetails === void 0 ? void 0 : (_workflowDetails$data2 = workflowDetails.data) === null || _workflowDetails$data2 === void 0 ? void 0 : _workflowDetails$data2.processInstances) || (workflowDetails === null || workflowDetails === void 0 ? void 0 : workflowDetails.processInstances) || [];
+  const businessId = (processInstances === null || processInstances === void 0 ? void 0 : (_processInstances$ = processInstances[0]) === null || _processInstances$ === void 0 ? void 0 : _processInstances$.businessId) || "N/A";
+  const businessService = (processInstances === null || processInstances === void 0 ? void 0 : (_processInstances$2 = processInstances[0]) === null || _processInstances$2 === void 0 ? void 0 : _processInstances$2.businessService) || "N/A";
+  const moduleName = (processInstances === null || processInstances === void 0 ? void 0 : (_processInstances$3 = processInstances[0]) === null || _processInstances$3 === void 0 ? void 0 : _processInstances$3.moduleName) || "N/A";
+  const pdfDownloadLink = (documents, fileStoreId) => {
+    var _downloadLink$split;
+    const downloadLink = (documents === null || documents === void 0 ? void 0 : documents[fileStoreId]) || "";
+    const formats = (downloadLink === null || downloadLink === void 0 ? void 0 : (_downloadLink$split = downloadLink.split(",")) === null || _downloadLink$split === void 0 ? void 0 : _downloadLink$split.filter(Boolean)) || [];
+    return (formats === null || formats === void 0 ? void 0 : formats.find(link => !(link !== null && link !== void 0 && link.includes("large")) && !(link !== null && link !== void 0 && link.includes("medium")) && !(link !== null && link !== void 0 && link.includes("small")))) || (formats === null || formats === void 0 ? void 0 : formats[0]) || "";
+  };
+  const timelineRows = timeline.map((item, index) => {
+    var _item$auditDetails, _item$auditDetails2, _item$assigner, _item$assigner2, _item$assigner3, _item$wfComment;
+    const createdDate = (item === null || item === void 0 ? void 0 : (_item$auditDetails = item.auditDetails) === null || _item$auditDetails === void 0 ? void 0 : _item$auditDetails.created) || "N/A";
+    const timing = (item === null || item === void 0 ? void 0 : (_item$auditDetails2 = item.auditDetails) === null || _item$auditDetails2 === void 0 ? void 0 : _item$auditDetails2.timing) || "N/A";
+    const assignerName = (item === null || item === void 0 ? void 0 : (_item$assigner = item.assigner) === null || _item$assigner === void 0 ? void 0 : _item$assigner.name) || "N/A";
+    const assignerType = (item === null || item === void 0 ? void 0 : (_item$assigner2 = item.assigner) === null || _item$assigner2 === void 0 ? void 0 : _item$assigner2.type) || "N/A";
+    const mobileNumber = (item === null || item === void 0 ? void 0 : (_item$assigner3 = item.assigner) === null || _item$assigner3 === void 0 ? void 0 : _item$assigner3.mobileNumber) || "N/A";
+    const action = (item === null || item === void 0 ? void 0 : item.performedAction) || "N/A";
+    const status = (item === null || item === void 0 ? void 0 : item.status) || (item === null || item === void 0 ? void 0 : item.state) || "N/A";
+    const comment = (item === null || item === void 0 ? void 0 : (_item$wfComment = item.wfComment) === null || _item$wfComment === void 0 ? void 0 : _item$wfComment[0]) || "-";
+    const documents = (item === null || item === void 0 ? void 0 : item.wfDocuments) || [];
+    return {
+      sNo: index + 1,
+      action: t ? t(action) : action,
+      status: t ? t(status) : status,
+      assignerName,
+      assignerType,
+      mobileNumber,
+      designation: assignerType,
+      date: createdDate,
+      time: timing,
+      dateTime: `${createdDate} ${timing !== "N/A" ? timing : ""}`.trim(),
+      comment,
+      documents: documents.map(doc => ({
+        name: (doc === null || doc === void 0 ? void 0 : doc.fileName) || (doc === null || doc === void 0 ? void 0 : doc.documentType) || "Document",
+        type: (doc === null || doc === void 0 ? void 0 : doc.documentType) || "Document",
+        fileStoreId: doc === null || doc === void 0 ? void 0 : doc.fileStoreId,
+        link: pdfDownloadLink(pdfFiles, doc === null || doc === void 0 ? void 0 : doc.fileStoreId)
+      })),
+      hasDocuments: documents.length > 0
+    };
+  });
+  return {
+    t,
+    tenantId: (tenantInfo === null || tenantInfo === void 0 ? void 0 : tenantInfo.code) || "",
+    tenantName: (tenantInfo === null || tenantInfo === void 0 ? void 0 : tenantInfo.name) || (tenantInfo === null || tenantInfo === void 0 ? void 0 : tenantInfo.i18nKey) || "Government Department",
+    name: t ? t("TIMELINE_PDF_TITLE") : "Application Timeline",
+    heading: t ? t("TIMELINE_PDF_HEADING") : "File Movement Report",
+    businessId,
+    businessService: t ? t(`CS_COMMON_${businessService === null || businessService === void 0 ? void 0 : businessService.toUpperCase()}`) : businessService,
+    moduleName,
+    currentStatus: t ? t((timeline === null || timeline === void 0 ? void 0 : (_timeline$ = timeline[0]) === null || _timeline$ === void 0 ? void 0 : _timeline$.status) || (timeline === null || timeline === void 0 ? void 0 : (_timeline$2 = timeline[0]) === null || _timeline$2 === void 0 ? void 0 : _timeline$2.state) || "N/A") : (timeline === null || timeline === void 0 ? void 0 : (_timeline$3 = timeline[0]) === null || _timeline$3 === void 0 ? void 0 : _timeline$3.status) || (timeline === null || timeline === void 0 ? void 0 : (_timeline$4 = timeline[0]) === null || _timeline$4 === void 0 ? void 0 : _timeline$4.state) || "N/A",
+    generatedDate: new Date().toLocaleDateString("en-IN", {
+      day: "2-digit",
+      month: "long",
+      year: "numeric"
+    }),
+    generatedDateTime: new Date().toLocaleString("en-IN", {
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+      hour12: true
+    }),
+    timelineRows,
+    totalSteps: timelineRows.length
+  };
+};
+
+const parseDate = dateStr => {
+  if (!dateStr || dateStr === "N/A") return null;
+  if (typeof dateStr === "string" && dateStr !== null && dateStr !== void 0 && dateStr.includes("/")) {
+    const [day, month, year] = dateStr === null || dateStr === void 0 ? void 0 : dateStr.split("/");
+    return new Date(year, month - 1, day);
+  }
+  return new Date(dateStr);
+};
+const calculateDays = (start, end) => {
+  if (!start || !end) return "N/A";
+  const startDate = parseDate(start);
+  const endDate = parseDate(end);
+  if (!startDate || !endDate || isNaN(startDate === null || startDate === void 0 ? void 0 : startDate.getTime()) || isNaN(endDate === null || endDate === void 0 ? void 0 : endDate.getTime())) {
+    return "N/A";
+  }
+  const diffDays = Math.floor((endDate - startDate) / 86400000);
+  return diffDays < 0 ? "N/A" : diffDays === 0 ? "0 Days" : `${diffDays} Days`;
+};
+const PDFSvg = React.memo(({
+  width: _width = 85,
+  height: _height = 100,
+  style
+}) => /*#__PURE__*/React.createElement("svg", {
+  style: style,
+  xmlns: "http://www.w3.org/2000/svg",
+  width: _width,
+  height: _height,
+  viewBox: "0 0 20 20",
+  fill: "gray"
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M20 2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8.5 7.5c0 .83-.67 1.5-1.5 1.5H9v2H7.5V7H10c.83 0 1.5.67 1.5 1.5v1zm5 2c0 .83-.67 1.5-1.5 1.5h-2.5V7H15c.83 0 1.5.67 1.5 1.5v3zm4-3H19v1h1.5V11H19v2h-1.5V7h3v1.5zM9 9.5h1v-1H9v1zM4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm10 5.5h1v-3h-1v3z"
+})));
+const pdfDownloadLink = (documents, fileStoreId) => {
+  var _downloadLink$split;
+  const downloadLink = (documents === null || documents === void 0 ? void 0 : documents[fileStoreId]) || "";
+  const formats = (downloadLink === null || downloadLink === void 0 ? void 0 : (_downloadLink$split = downloadLink.split(",")) === null || _downloadLink$split === void 0 ? void 0 : _downloadLink$split.filter(Boolean)) || [];
+  return (formats === null || formats === void 0 ? void 0 : formats.find(link => !(link !== null && link !== void 0 && link.includes("large")) && !(link !== null && link !== void 0 && link.includes("medium")) && !(link !== null && link !== void 0 && link.includes("small")))) || (formats === null || formats === void 0 ? void 0 : formats[0]) || "";
+};
+const TimelineDocument = React.memo(({
+  value,
+  Code,
+  index
+}) => {
+  const {
+    isLoading,
+    data
+  } = Digit.Hooks.ads.useADSDocumentSearch({
+    value
+  }, {
+    value
+  }, Code, index);
+  const documents = useMemo(() => {
+    var _value$documents;
+    const docs = value !== null && value !== void 0 && value.documents ? value === null || value === void 0 ? void 0 : (_value$documents = value.documents) === null || _value$documents === void 0 ? void 0 : _value$documents.documents : value;
+    return (docs === null || docs === void 0 ? void 0 : docs.filter(doc => (doc === null || doc === void 0 ? void 0 : doc.documentType) === Code)) || [];
+  }, [value, Code]);
+  if (isLoading) return /*#__PURE__*/React.createElement(Loader, null);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "timeline-docs-wrapper"
+  }, documents === null || documents === void 0 ? void 0 : documents.map((document, idx) => {
+    const documentLink = pdfDownloadLink(data === null || data === void 0 ? void 0 : data.pdfFiles, document === null || document === void 0 ? void 0 : document.fileStoreId);
+    if (!documentLink) return null;
+    return /*#__PURE__*/React.createElement("a", {
+      key: idx,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      href: documentLink,
+      className: "timeline-doc-link"
+    }, /*#__PURE__*/React.createElement(PDFSvg, {
+      className: "timeline-doc-icon"
+    }));
+  }));
+});
+const normalizeTimeline = workflowDetails => {
+  var _workflowDetails$data;
+  const rawTimeline = workflowDetails === null || workflowDetails === void 0 ? void 0 : (_workflowDetails$data = workflowDetails.data) === null || _workflowDetails$data === void 0 ? void 0 : _workflowDetails$data.timeline;
+  if (!rawTimeline || !Array.isArray(rawTimeline)) return [];
+  return rawTimeline === null || rawTimeline === void 0 ? void 0 : rawTimeline.map((item, index) => {
+    var _item$auditDetails, _item$auditDetails2, _item$assigner, _item$wfComment;
+    const createdDate = (item === null || item === void 0 ? void 0 : (_item$auditDetails = item.auditDetails) === null || _item$auditDetails === void 0 ? void 0 : _item$auditDetails.created) || "N/A";
+    const lastModified = (item === null || item === void 0 ? void 0 : (_item$auditDetails2 = item.auditDetails) === null || _item$auditDetails2 === void 0 ? void 0 : _item$auditDetails2.lastModified) || "N/A";
+    return {
+      id: index,
+      state: item === null || item === void 0 ? void 0 : item.state,
+      assignerName: (item === null || item === void 0 ? void 0 : (_item$assigner = item.assigner) === null || _item$assigner === void 0 ? void 0 : _item$assigner.name) || "N/A",
+      performedAction: item === null || item === void 0 ? void 0 : item.performedAction,
+      comment: (item === null || item === void 0 ? void 0 : (_item$wfComment = item.wfComment) === null || _item$wfComment === void 0 ? void 0 : _item$wfComment[0]) || "",
+      documents: (item === null || item === void 0 ? void 0 : item.wfDocuments) || [],
+      createdDate,
+      lastModified,
+      noOfDays: calculateDays(createdDate, lastModified)
+    };
+  });
+};
+const HEADER_FIELDS = [{
+  label: "CM_TIMELINE_NAME",
+  key: "assignerName"
+}, {
+  label: "CM_TIMELINE_ACTION_TAKEN",
+  key: "performedAction"
+}, {
+  label: "CM_TIMELINE_ACTION_TAKEN_ON",
+  key: "lastModified"
+}, {
+  label: "CM_TIMELINE_DATE_RECEIVED",
+  key: "createdDate"
+}, {
+  label: "CM_TIMELINE_NO_OF_DAYS",
+  key: "noOfDays"
+}];
+const TimelineCaption = React.memo(({
+  checkpoint,
+  t,
+  onDownloadPDF
+}) => {
+  var _checkpoint$documents, _checkpoint$documents2;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "timeline-card"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "timeline-header"
+  }, HEADER_FIELDS === null || HEADER_FIELDS === void 0 ? void 0 : HEADER_FIELDS.map(({
+    label,
+    key
+  }) => /*#__PURE__*/React.createElement("div", {
+    key: key,
+    className: "timeline-header-item"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "timeline-label"
+  }, t(label), ":"), /*#__PURE__*/React.createElement("span", {
+    className: "timeline-value"
+  }, t(checkpoint === null || checkpoint === void 0 ? void 0 : checkpoint[key]) || "N/A")))), /*#__PURE__*/React.createElement("div", {
+    className: "timeline-note"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "timeline-label"
+  }, t("CM_TIMELINE_NOTE"), ":"), /*#__PURE__*/React.createElement("div", {
+    className: "note-box"
+  }, (checkpoint === null || checkpoint === void 0 ? void 0 : checkpoint.comment) || t("CM_TIMELINE_NO_COMMENTS"))), (checkpoint === null || checkpoint === void 0 ? void 0 : (_checkpoint$documents = checkpoint.documents) === null || _checkpoint$documents === void 0 ? void 0 : _checkpoint$documents.length) > 0 && /*#__PURE__*/React.createElement("div", {
+    className: "timeline-docs"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "timeline-label"
+  }, t("CM_TIMELINE_DOCUMENT_ATTACHED"), ":"), checkpoint === null || checkpoint === void 0 ? void 0 : (_checkpoint$documents2 = checkpoint.documents) === null || _checkpoint$documents2 === void 0 ? void 0 : _checkpoint$documents2.map((doc, index) => /*#__PURE__*/React.createElement(TimelineDocument, {
+    key: `${doc === null || doc === void 0 ? void 0 : doc.documentType}-${index}`,
+    value: checkpoint === null || checkpoint === void 0 ? void 0 : checkpoint.documents,
+    Code: doc === null || doc === void 0 ? void 0 : doc.documentType,
+    index: index
+  }))));
+});
+const ApplicationTimeline = ({
+  workflowDetails,
+  t
+}) => {
+  var _workflowDetails$data2, _workflowDetails$data3, _workflowDetails$data4, _workflowDetails$data5, _workflowDetails$data6, _workflowDetails$data7, _workflowDetails$data8, _timeline$;
+  const details = (workflowDetails === null || workflowDetails === void 0 ? void 0 : workflowDetails.data) || workflowDetails;
+  const timeline = useMemo(() => normalizeTimeline({
+    data: details
+  }), [details]);
+  const currentState = workflowDetails === null || workflowDetails === void 0 ? void 0 : (_workflowDetails$data2 = workflowDetails.data) === null || _workflowDetails$data2 === void 0 ? void 0 : (_workflowDetails$data3 = _workflowDetails$data2.timeline) === null || _workflowDetails$data3 === void 0 ? void 0 : (_workflowDetails$data4 = _workflowDetails$data3[0]) === null || _workflowDetails$data4 === void 0 ? void 0 : _workflowDetails$data4.state;
+  const {
+    isLoading,
+    data
+  } = Digit.Hooks.ads.useADSDocumentSearch({
+    value: (workflowDetails === null || workflowDetails === void 0 ? void 0 : (_workflowDetails$data5 = workflowDetails.data) === null || _workflowDetails$data5 === void 0 ? void 0 : (_workflowDetails$data6 = _workflowDetails$data5.timeline) === null || _workflowDetails$data6 === void 0 ? void 0 : _workflowDetails$data6.flatMap(item => item === null || item === void 0 ? void 0 : item.wfDocuments)) || []
+  }, {
+    value: (workflowDetails === null || workflowDetails === void 0 ? void 0 : (_workflowDetails$data7 = workflowDetails.data) === null || _workflowDetails$data7 === void 0 ? void 0 : (_workflowDetails$data8 = _workflowDetails$data7.timeline) === null || _workflowDetails$data8 === void 0 ? void 0 : _workflowDetails$data8.flatMap(item => item === null || item === void 0 ? void 0 : item.wfDocuments)) || []
+  }, null, 0);
+  console.log('data of doc hook', data);
+  const handleDownloadPDF = useCallback(() => {
+    if (!isLoading) {
+      const tenantInfo = Digit.SessionStorage.get("CITIZEN.COMMON.HOME.CITY") || {};
+      const acknowledgementData = getTimelineAcknowledgementData(workflowDetails, tenantInfo, (data === null || data === void 0 ? void 0 : data.pdfFiles) || {}, t);
+      Digit.Utils.pdf.generateTimelinePDF(acknowledgementData);
+    }
+  }, [workflowDetails, data, t]);
+  if (!(timeline !== null && timeline !== void 0 && timeline.length)) return null;
+  if (isLoading) return /*#__PURE__*/React.createElement(Loader, null);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "timeline-hoc-container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "timeline-header-wrapper"
+  }, /*#__PURE__*/React.createElement(CardSubHeader$1, {
+    className: "timeline-subheader"
+  }, t("CS_APPLICATION_DETAILS_APPLICATION_TIMELINE")), /*#__PURE__*/React.createElement("span", {
+    onClick: handleDownloadPDF,
+    className: "download-button"
+  }, t("CS_COMMON_DOWNLOAD"))), (timeline === null || timeline === void 0 ? void 0 : timeline.length) === 1 ? /*#__PURE__*/React.createElement(CheckPoint, {
+    isCompleted: true,
+    label: t(timeline === null || timeline === void 0 ? void 0 : (_timeline$ = timeline[0]) === null || _timeline$ === void 0 ? void 0 : _timeline$.state),
+    customChild: /*#__PURE__*/React.createElement(TimelineCaption, {
+      checkpoint: timeline === null || timeline === void 0 ? void 0 : timeline[0],
+      t: t,
+      onDownloadPDF: handleDownloadPDF
+    })
+  }) : /*#__PURE__*/React.createElement(ConnectingCheckPoints, null, timeline === null || timeline === void 0 ? void 0 : timeline.map(checkpoint => /*#__PURE__*/React.createElement(CheckPoint, {
+    key: checkpoint === null || checkpoint === void 0 ? void 0 : checkpoint.id,
+    keyValue: checkpoint === null || checkpoint === void 0 ? void 0 : checkpoint.id,
+    isCompleted: (checkpoint === null || checkpoint === void 0 ? void 0 : checkpoint.state) === currentState,
+    label: t(checkpoint === null || checkpoint === void 0 ? void 0 : checkpoint.state),
+    customChild: /*#__PURE__*/React.createElement(TimelineCaption, {
+      checkpoint: checkpoint,
+      t: t,
+      onDownloadPDF: handleDownloadPDF
+    })
+  }))));
+};
+
 function ApplicationDetailsContent({
   applicationDetails,
   demandData,
@@ -18218,14 +18500,13 @@ function ApplicationDetailsContent({
     }) => value ? /*#__PURE__*/React.createElement(LinkButton$1, {
       style: {
         float: "right",
-        display: "inline",
-        background: "#fff"
+        display: "inline"
       },
       label: t("View"),
       onClick: () => routeTo(value)
     }) : t("CS_NA")
   }];
-  console.log("TIMELINE", applicationDetails);
+  console.log("TIMELINE", applicationDetails, moduleCode);
   useEffect(() => {
     const fetchPaymentHistory = async () => {
       if (window.location.href.includes("employee/ws") && applicationData !== null && applicationData !== void 0 && applicationData.connectionNo) {
@@ -18826,7 +19107,7 @@ function ApplicationDetailsContent({
     payments: payments
   }), moduleCode !== "WS" && moduleCode !== "SW" && moduleCode !== "OBPS" && moduleCode !== "BPAStakeholder" && moduleCode !== "BPAREG" && /*#__PURE__*/React.createElement(ApplicationHistory, {
     applicationData: applicationDetails === null || applicationDetails === void 0 ? void 0 : applicationDetails.applicationData
-  }), showTimeLine && (workflowDetails === null || workflowDetails === void 0 ? void 0 : (_workflowDetails$data3 = workflowDetails.data) === null || _workflowDetails$data3 === void 0 ? void 0 : (_workflowDetails$data4 = _workflowDetails$data3.timeline) === null || _workflowDetails$data4 === void 0 ? void 0 : _workflowDetails$data4.length) > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BreakLine$1, null), ((workflowDetails === null || workflowDetails === void 0 ? void 0 : workflowDetails.isLoading) || isDataLoading) && /*#__PURE__*/React.createElement(Loader, null), !(workflowDetails !== null && workflowDetails !== void 0 && workflowDetails.isLoading) && !isDataLoading && /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement("div", {
+  }), showTimeLine && (workflowDetails === null || workflowDetails === void 0 ? void 0 : (_workflowDetails$data3 = workflowDetails.data) === null || _workflowDetails$data3 === void 0 ? void 0 : (_workflowDetails$data4 = _workflowDetails$data3.timeline) === null || _workflowDetails$data4 === void 0 ? void 0 : _workflowDetails$data4.length) > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BreakLine$1, null), ((workflowDetails === null || workflowDetails === void 0 ? void 0 : workflowDetails.isLoading) || isDataLoading) && /*#__PURE__*/React.createElement(Loader, null), !(workflowDetails !== null && workflowDetails !== void 0 && workflowDetails.isLoading) && !isDataLoading && moduleCode !== "BPAREG" && /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement("div", {
     id: "timeline"
   }, /*#__PURE__*/React.createElement(CardSectionHeader$1, {
     style: {
@@ -18856,7 +19137,10 @@ function ApplicationDetailsContent({
   }))), (workflowDetails === null || workflowDetails === void 0 ? void 0 : (_workflowDetails$data19 = workflowDetails.data) === null || _workflowDetails$data19 === void 0 ? void 0 : (_workflowDetails$data20 = _workflowDetails$data19.timeline) === null || _workflowDetails$data20 === void 0 ? void 0 : _workflowDetails$data20.length) > 2 && /*#__PURE__*/React.createElement(LinkButton$1, {
     label: showAllTimeline ? t("COLLAPSE") : t("VIEW_TIMELINE"),
     onClick: toggleTimeline
-  })))), window.location.href.includes("/pt/") ? /*#__PURE__*/React.createElement(ActionBar$1, {
+  }))), !(workflowDetails !== null && workflowDetails !== void 0 && workflowDetails.isLoading) && !isDataLoading && moduleCode === "BPAREG" && /*#__PURE__*/React.createElement(ApplicationTimeline, {
+    workflowDetails: workflowDetails,
+    t: t
+  })), window.location.href.includes("/pt/") ? /*#__PURE__*/React.createElement(ActionBar$1, {
     className: "clear-search-container",
     style: {
       display: "block"
@@ -20815,6 +21099,7 @@ const Acknowledgement = props => {
 
 const ActiveAndOpenSurveys = props => {
   var _userUlbs, _userUlbs2, _userUlbs3;
+  const tableWrapperRef = useRef(null);
   const {
     userType
   } = props;
@@ -20868,6 +21153,15 @@ const ActiveAndOpenSurveys = props => {
   const GetCell = value => /*#__PURE__*/React.createElement("span", {
     className: "cell-text styled-cell"
   }, value);
+  useEffect(() => {
+    var _tableWrapperRef$curr;
+    const el = (_tableWrapperRef$curr = tableWrapperRef.current) === null || _tableWrapperRef$curr === void 0 ? void 0 : _tableWrapperRef$curr.querySelector(".table");
+    if (el) {
+      el.style.overflowX = "auto";
+      el.style.overflowY = "hidden";
+      el.style.WebkitOverflowScrolling = "touch";
+    }
+  }, []);
   const columns = useMemo(() => {
     return [{
       Header: t("Survey Name"),
@@ -20886,15 +21180,6 @@ const ActiveAndOpenSurveys = props => {
         var _row$original, _row$original2;
         return (_row$original = row.original) !== null && _row$original !== void 0 && _row$original.startDate ? GetCell(format(new Date((_row$original2 = row.original) === null || _row$original2 === void 0 ? void 0 : _row$original2.startDate), "dd/MM/yyyy")) : "";
       }
-    }, {
-      Header: t("EVENTS_END_DATE_LABEL"),
-      accessor: "endDate",
-      Cell: ({
-        row
-      }) => {
-        var _row$original3, _row$original4;
-        return (_row$original3 = row.original) !== null && _row$original3 !== void 0 && _row$original3.endDate ? GetCell(format(new Date((_row$original4 = row.original) === null || _row$original4 === void 0 ? void 0 : _row$original4.endDate), "dd/MM/yyyy")) : "";
-      }
     }, {
       Header: t("Fill Survey"),
       accessor: "fillSurvey",
@@ -20952,6 +21237,7 @@ const ActiveAndOpenSurveys = props => {
       }
     });
   };
+  let isMobile = Digit.Utils.browser.isMobile();
   return /*#__PURE__*/React.createElement("div", null, tenantId === "pb.punjab" && window.location.href.includes("/employee") ? /*#__PURE__*/React.createElement(Card$1, {
     style: {
       marginTop: "16px",
@@ -21006,7 +21292,32 @@ const ActiveAndOpenSurveys = props => {
     label: "Search",
     submit: "submit",
     onSubmit: fetchActiveAndOpenSurveys
-  })))) : null, /*#__PURE__*/React.createElement(Table, {
+  })))) : null, /*#__PURE__*/React.createElement("div", null, isMobile ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "12px"
+    }
+  }, (data === null || data === void 0 ? void 0 : data.length) > 0 ? data === null || data === void 0 ? void 0 : data.map((survey, index) => /*#__PURE__*/React.createElement(Card$1, {
+    key: index,
+    style: {
+      padding: "12px",
+      borderRadius: "8px",
+      boxShadow: "0px 2px 6px rgba(0,0,0,0.1)"
+    }
+  }, /*#__PURE__*/React.createElement("h3", {
+    style: {
+      fontSize: "16px",
+      marginBottom: "8px"
+    }
+  }, survey === null || survey === void 0 ? void 0 : survey.surveyTitle), /*#__PURE__*/React.createElement("p", {
+    style: {
+      margin: "4px 0"
+    }
+  }, /*#__PURE__*/React.createElement("b", null, "Start:"), " ", survey !== null && survey !== void 0 && survey.startDate ? format(new Date(survey === null || survey === void 0 ? void 0 : survey.startDate), "dd/MM/yyyy") : "NA"), /*#__PURE__*/React.createElement(SubmitBar$1, {
+    label: t("Start Survey"),
+    onSubmit: () => handleStartSurvey(survey)
+  }))) : /*#__PURE__*/React.createElement(Card$1, null, t("No Questions found"))) : /*#__PURE__*/React.createElement(Table, {
     t: t,
     data: data,
     totalRecords: count,
@@ -21020,12 +21331,8 @@ const ActiveAndOpenSurveys = props => {
         }
       };
     },
-    noResultsMessage: "No Questions found",
-    inboxStyles: {
-      overflowX: "scroll",
-      overflowY: "hidden"
-    }
-  }), loading && /*#__PURE__*/React.createElement(Loader, null));
+    noResultsMessage: "No Questions found"
+  })), loading && /*#__PURE__*/React.createElement(Loader, null));
 };
 
 const Heading$d = props => {
@@ -27013,60 +27320,59 @@ const StepWrapper = ({
   const {
     t
   } = useTranslation();
-  const stepStyle = isActive => ({
+  const stepStyle = (isActive, isLast) => ({
     display: "flex",
     alignItems: "center",
     justifyContent: "flex-end",
-    flex: 1,
-    color: isActive ? "#3f51b5" : "#ccc",
-    padding: "10px 10px",
-    width: "260px"
+    flex: "0 0 auto",
+    color: isActive ? "#0D43A7" : "#9CA3AF",
+    padding: "14px 12px",
+    width: "260px",
+    marginBottom: isLast ? "6px" : "18px"
   });
   const circleStyle = stepNumber => {
-    let backgroundColor;
-    if (stepNumber <= _currentStep) {
-      backgroundColor = "#0D43A7";
-    } else {
-      backgroundColor = "#FFFFFF";
-    }
+    const completed = stepNumber <= _currentStep;
     return {
-      width: "60px",
-      height: "60px",
+      width: "56px",
+      height: "56px",
       borderRadius: "50%",
-      backgroundColor,
-      color: stepNumber <= _currentStep ? "white" : "black",
+      background: completed ? "linear-gradient(135deg,#2563eb,#7c3aed)" : "#ffffff",
+      color: completed ? "#ffffff" : "#0f172a",
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
-      marginBottom: "10px",
-      fontWeight: "normal",
+      marginBottom: "8px",
+      fontWeight: 600,
       fontSize: "18px",
-      border: stepNumber > _currentStep ? "1px solid black" : "",
+      border: completed ? "none" : "1px solid rgba(15,23,42,0.08)",
+      boxShadow: completed ? "0 6px 18px rgba(37,99,235,0.18)" : "0 2px 6px rgba(2,6,23,0.04)",
       position: "relative"
     };
   };
   const labelStyle = {
-    fontSize: "18px",
-    color: "#1E1E1E",
-    fontWeight: "500",
-    fontFamily: "Noto Sans,sans-serif",
-    marginRight: "6px"
+    fontSize: "16px",
+    color: "#0f172a",
+    fontWeight: 600,
+    fontFamily: "Noto Sans, sans-serif",
+    marginRight: "8px",
+    textAlign: "right"
   };
   const stepNumberStyle = {
-    fontSize: "18px",
-    color: "#263238",
-    fontWeight: "400",
-    fontFamily: "Noto Sans,sans-serif",
-    margin: "0px 6px 0px 0px"
+    fontSize: "14px",
+    color: "#6b7280",
+    fontWeight: 500,
+    fontFamily: "Noto Sans, sans-serif",
+    margin: "0 6px 0 0"
   };
   const lineStyle = {
     position: "absolute",
-    width: "2px",
-    height: "50px",
-    backgroundColor: "grey",
+    width: "3px",
+    height: "56px",
+    backgroundColor: "rgba(15,23,42,0.06)",
     left: "50%",
     top: "100%",
-    transform: "translateX(-50%)"
+    transform: "translateX(-50%)",
+    borderRadius: "2px"
   };
   const isMobile = window.Digit.Utils.browser.isMobile();
   const totalSteps = _stepsList.length;
@@ -27076,22 +27382,25 @@ const StepWrapper = ({
       width: "100%",
       display: "flex",
       flexDirection: "row",
-      alignItems: "top",
-      justifyContent: "flex-start"
+      alignItems: "flex-start",
+      justifyContent: "flex-start",
+      gap: "24px"
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: "stepper-navigation-bar",
     style: {
       display: "flex",
       flexDirection: "column",
-      justifyContent: "space-between",
-      height: "50%",
+      alignItems: "center",
+      padding: "18px",
+      minWidth: "120px",
+      maxWidth: "320px",
       marginBottom: "20px"
     }
   }, [...Array(totalSteps)].map((_, index) => /*#__PURE__*/React.createElement("div", {
     className: "step-content",
     key: index,
-    style: stepStyle(index + 1 <= _currentStep)
+    style: stepStyle(index + 1 <= _currentStep, index === totalSteps - 1)
   }, /*#__PURE__*/React.createElement("div", {
     className: "step-sub-content",
     style: {
@@ -27115,7 +27424,8 @@ const StepWrapper = ({
     className: "stepper-body",
     style: {
       width: "100%",
-      marginBottom: "20px"
+      marginBottom: "20px",
+      background: "transparent"
     }
   }, children));
 };
@@ -30842,13 +31152,15 @@ const LabelFieldPair = props => {
 };
 
 const LinkButton = props => {
+  const hasSubmitBarClass = props.className && props.className.includes('submit-bar');
+  const appliedStyle = hasSubmitBarClass ? props.style : {
+    ...LinkButton.defaultProps.style,
+    ...props.style
+  };
   return /*#__PURE__*/React.createElement("button", {
-    className: `card-link cp ${props.className}`,
+    className: `card-link cp ${props.className || ''}`,
     onClick: props.onClick,
-    style: {
-      ...props.style,
-      ...LinkButton.defaultProps.style
-    }
+    style: appliedStyle
   }, props.label);
 };
 LinkButton.propTypes = {
@@ -30857,17 +31169,7 @@ LinkButton.propTypes = {
   style: propTypes.object
 };
 LinkButton.defaultProps = {
-  style: {
-    color: "#FFFFFF",
-    backgroundColor: "#2947A3",
-    border: "none",
-    borderRadius: "8px",
-    cursor: "pointer",
-    padding: "8px 16px",
-    display: "inline-block",
-    height: "35px",
-    fontSize: "18px"
-  }
+  style: {}
 };
 
 const MobileNumber = props => {
@@ -30882,27 +31184,23 @@ const MobileNumber = props => {
   };
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "field-container"
-  }, !props.hideSpan ? /*#__PURE__*/React.createElement("span", {
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `text-input ${user_type === "EMPLOYEE" ? "" : "text-mobile-input-width"} ${props.className}`,
     style: {
-      maxWidth: "50px",
-      marginTop: "unset",
-      ...props.labelStyle
-    },
-    className: "citizen-card-input citizen-card-input--front"
-  }, "+91") : null, /*#__PURE__*/React.createElement("div", {
-    className: `text-input ${user_type === "employee" ? "" : "text-mobile-input-width"} ${props.className}`
-  }, /*#__PURE__*/React.createElement("input", {
+      position: "relative"
+    }
+  }, !props.hideSpan && /*#__PURE__*/React.createElement("span", {
+    className: "mobile-number-prefix"
+  }, "+91"), /*#__PURE__*/React.createElement("input", {
     type: "text",
     name: props.name,
     id: props.id,
-    className: `${user_type ? "employee-card-input" : "citizen-card-input"} ${props.disable && "disabled"} focus-visible ${props.errorStyle && "employee-card-input-error"}`,
+    className: `${user_type ? "employee-card-input" : "citizen-card-input"} ${props.disable && "disabled"} focus-visible ${props.errorStyle && "employee-card-input-error"} ${!props.hideSpan ? "mobile-number-input-with-prefix" : ""}`,
     placeholder: props.placeholder,
     onChange: onChange,
     ref: props.inputRef,
     value: props.value,
-    style: {
-      ...props.style
-    },
+    style: props.style,
     minLength: props.minlength,
     maxLength: props.maxlength,
     max: props.max,
@@ -31206,24 +31504,6 @@ const FormComposer = props => {
     }
   };
   console.log(props);
-  const buttonStyle = {
-    next: {
-      backgroundColor: "#3f51b5",
-      color: "white",
-      border: "none",
-      padding: "10px 20px",
-      cursor: "pointer",
-      marginLeft: "10px"
-    },
-    back: {
-      backgroundColor: "transparent",
-      color: "#3f51b5",
-      border: "1px solid #3f51b5",
-      padding: "10px 10px",
-      margin: "10px",
-      cursor: "pointer"
-    }
-  };
   const handleBackClick = () => {
     props.onBackClick && props.onBackClick(formData);
   };
@@ -31259,9 +31539,8 @@ const FormComposer = props => {
     disabled: isDisabled,
     className: "submitButtonNew"
   }), !props.submitInForm && props.label && /*#__PURE__*/React.createElement(ActionBar, null, props.currentStep > 1 && /*#__PURE__*/React.createElement("button", {
-    style: buttonStyle.back,
     onClick: handleBackClick,
-    className: "submit-bar"
+    className: "submit-bar submit-bar-back"
   }, t("COMMON_BACK")), /*#__PURE__*/React.createElement(SubmitBar, {
     label: t(props.label),
     submit: "submit",
@@ -32242,6 +32521,213 @@ const FillSurveyNew = () => {
   return /*#__PURE__*/React.createElement(CitizenSurveyFormNew, null);
 };
 
+const Close$f = () => /*#__PURE__*/React.createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24",
+  fill: "#FFFFFF"
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M0 0h24v24H0V0z",
+  fill: "none"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
+}));
+const CloseBtn$f = props => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "icon-bg-secondary",
+    onClick: props.onClick
+  }, /*#__PURE__*/React.createElement(Close$f, null));
+};
+const SurveyModal = ({
+  isOpen,
+  onClose
+}) => {
+  const history = useHistory();
+  const {
+    t
+  } = useTranslation();
+  const userInfo = Digit.UserService.getUser().info;
+  const [loading, setLoading] = useState(false);
+  const [data, setData] = useState([]);
+  const tenantId = localStorage.getItem("CITIZEN.CITY");
+  console.log(tenantId, "TENANTTTTTT");
+  useEffect(() => {
+    const cachedData = sessionStorage.getItem("survey_modal_data");
+    if (cachedData) {
+      try {
+        const parsedData = JSON.parse(cachedData);
+        setData(parsedData);
+      } catch (e) {
+        console.error("Failed to parse cached survey data", e);
+      }
+    }
+  }, []);
+  useEffect(() => {
+    if (isOpen && tenantId && data.length === 0) {
+      fetchActiveAndOpenSurveys();
+    }
+  }, [isOpen, tenantId, data.length]);
+  function fetchActiveAndOpenSurveys() {
+    setLoading(true);
+    const payload = {
+      tenantId: tenantId,
+      active: true,
+      openSurveyFlag: true
+    };
+    Digit.Surveys.searchSurvey(payload).then(response => {
+      let tableData = response.Surveys.filter(item => item.active);
+      tableData = tableData.sort((a, b) => b.auditDetails.lastModifiedTime - a.auditDetails.lastModifiedTime);
+      setData(tableData);
+      sessionStorage.setItem("survey_modal_data", JSON.stringify(tableData));
+      setLoading(false);
+    }).catch(error => {
+      setLoading(false);
+      console.error("Failed to fetch surveys", error);
+    });
+  }
+  const handleStartSurvey = surveyDetails => {
+    history.push({
+      pathname: "/digit-ui/citizen/engagement/surveys/fill-survey",
+      state: {
+        surveyDetails: surveyDetails,
+        userInfo: userInfo,
+        userType: "citizen"
+      }
+    });
+    onClose();
+  };
+  if (!isOpen) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(Modal, {
+    headerBarMain: /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "8px"
+      }
+    }, /*#__PURE__*/React.createElement("span", null, t("Active Surveys")), (data === null || data === void 0 ? void 0 : data.length) > 0 && /*#__PURE__*/React.createElement("span", {
+      style: {
+        background: "#2563eb",
+        color: "#fff",
+        borderRadius: "12px",
+        padding: "2px 8px",
+        fontSize: "12px",
+        fontWeight: "600"
+      }
+    }, data.length)),
+    headerBarEnd: /*#__PURE__*/React.createElement(CloseBtn$f, {
+      onClick: onClose
+    }),
+    hideSubmit: true,
+    popupStyles: {
+      width: "95%",
+      maxWidth: "600px",
+      height: "auto",
+      maxHeight: "90vh",
+      borderRadius: "16px",
+      boxShadow: "0 20px 60px rgba(0, 0, 0, 0.15)",
+      padding: "15px"
+    },
+    popupModuleMianStyles: {
+      maxHeight: "calc(90vh - 120px)",
+      overflowY: "auto",
+      padding: "24px",
+      backgroundColor: "#f9fafb"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "survey-modal-wrapper"
+  }, loading ? /*#__PURE__*/React.createElement("div", {
+    className: "survey-modal-loader"
+  }, /*#__PURE__*/React.createElement(Loader, null)) : data && data.length > 0 ? /*#__PURE__*/React.createElement("div", {
+    className: "new-card-cards-grid"
+  }, data === null || data === void 0 ? void 0 : data.map((survey, index) => /*#__PURE__*/React.createElement("div", {
+    key: index,
+    className: "new-card-option"
+  }, /*#__PURE__*/React.createElement("h3", {
+    style: {
+      margin: "0 0 16px 0",
+      fontSize: "16px",
+      fontWeight: "600",
+      color: "#1a202c"
+    }
+  }, survey === null || survey === void 0 ? void 0 : survey.surveyTitle), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "12px",
+      marginBottom: "16px"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: "12px"
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: "#6b7280",
+      fontWeight: "600"
+    }
+  }, "Start Date:"), /*#__PURE__*/React.createElement("p", {
+    style: {
+      margin: "4px 0 0 0",
+      color: "#1f2937",
+      fontSize: "14px"
+    }
+  }, survey !== null && survey !== void 0 && survey.startDate ? format(new Date(survey === null || survey === void 0 ? void 0 : survey.startDate), "dd/MM/yyyy") : "NA")), (survey === null || survey === void 0 ? void 0 : survey.endDate) && /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: "12px"
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: "#6b7280",
+      fontWeight: "600"
+    }
+  }, "End Date:"), /*#__PURE__*/React.createElement("p", {
+    style: {
+      margin: "4px 0 0 0",
+      color: "#1f2937",
+      fontSize: "14px"
+    }
+  }, format(new Date(survey === null || survey === void 0 ? void 0 : survey.endDate), "dd/MM/yyyy"))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: "12px"
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: "#6b7280",
+      fontWeight: "600"
+    }
+  }, "Description:"), /*#__PURE__*/React.createElement("p", {
+    style: {
+      margin: "4px 0 0 0",
+      color: "#1f2937",
+      fontSize: "14px",
+      lineHeight: "1.4"
+    }
+  }, (survey === null || survey === void 0 ? void 0 : survey.surveyDescription) || "No description available"))), /*#__PURE__*/React.createElement(SubmitBar$1, {
+    label: t("Start Survey"),
+    onSubmit: () => handleStartSurvey(survey)
+  })))) : /*#__PURE__*/React.createElement("div", {
+    className: "survey-modal-empty-state",
+    style: {
+      textAlign: "center",
+      padding: "40px 20px"
+    }
+  }, /*#__PURE__*/React.createElement("p", {
+    style: {
+      margin: "0 0 8px 0",
+      fontSize: "16px",
+      fontWeight: "500",
+      color: "#374151"
+    }
+  }, t("No active surveys available at this time")), /*#__PURE__*/React.createElement("p", {
+    style: {
+      margin: "0",
+      fontSize: "12px",
+      color: "#6b7280"
+    }
+  }, "Please check back later for new surveys"))));
+};
+
 const SurveyReducers = getRootReducer;
 const EventsBreadCrumb = ({
   location
@@ -32552,7 +33038,8 @@ const componentsToRegister = {
   SurveySummary,
   FillSurveyNew,
   FillSurveyEmp: FillSurvey,
-  FillQuestions
+  FillQuestions,
+  SurveyModal
 };
 const initEngagementComponents = () => {
   Object.entries(componentsToRegister).forEach(([key, value]) => {