@mseva/digit-ui-module-ptr 1.1.90 → 1.1.91

package/dist/index.modern.js

@@ -1,5 +1,5 @@
-import { LabelFieldPair, CardLabel, Dropdown, CardLabelError, TextInput, Toast, MobileNumber, CardSectionHeader, ActionBar, SubmitBar, Loader as Loader$1, UploadFile, TickMark, FormStep, TextArea, RadioOrSelect, Card, CardHeader, CardText, CardSubHeader, Modal, FormComposer, CheckPoint, ConnectingCheckPoints, Menu, AppContainer, BackButton, PrivateRoute, StatusTable, Row, CheckBox, LinkButton, Banner, KeyNote, Header, MultiLink, TelePhone, DisplayPhotos, Table, PropertyHouse, CloseSvg, Label, LinkLabel, DatePicker, RadioButtons, DetailsCard, SearchAction, FilterAction, PopUp, ShippingTruck, SearchForm, SearchField, BreadCrumb, PTRIcon, EmployeeModuleCard, OTPInput, Rating, CitizenHomeCard } from '@mseva/digit-ui-react-components';
-import React, { useState, useEffect, useMemo, useRef, useCallback, Fragment as Fragment$1 } from 'react';
+import { LabelFieldPair, CardLabel, Dropdown, CardLabelError, TextInput, Toast, MobileNumber, CardSectionHeader, ActionBar, SubmitBar, Loader as Loader$1, UploadFile, TickMark, FormStep, TextArea, RadioOrSelect, Card, CardHeader, CardText, CardSubHeader, Modal, FormComposer, Menu, AppContainer, BackButton, PrivateRoute, StatusTable, Row, CheckBox, LinkButton, Banner, KeyNote, Header, MultiLink, TelePhone, DisplayPhotos, Table, PropertyHouse, CloseSvg, Label, LinkLabel, DatePicker, RadioButtons, DetailsCard, SearchAction, FilterAction, PopUp, ShippingTruck, SearchForm, SearchField, BreadCrumb, PTRIcon, EmployeeModuleCard, OTPInput, Rating, CitizenHomeCard } from '@mseva/digit-ui-react-components';
+import React, { useState, useEffect, useMemo, useRef, Fragment as Fragment$1, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useRouteMatch, useHistory, Switch, Route, Redirect, Link, useParams } from 'react-router-dom';
 import { useForm, Controller } from 'react-hook-form';
@@ -18426,101 +18426,9 @@ const PTRModal = ({
   }));
 };
 
-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$1 = React.memo(({
-  width: _width = 85,
-  height: _height = 100,
+  width: _width = 20,
+  height: _height = 20,
   style
 }) => /*#__PURE__*/React.createElement("svg", {
   style: style,
@@ -18558,7 +18466,10 @@ const TimelineDocument = React.memo(({
   }, [value, Code]);
   if (isLoading) return /*#__PURE__*/React.createElement(Loader$1, null);
   return /*#__PURE__*/React.createElement("div", {
-    className: "timeline-docs-wrapper"
+    style: {
+      display: "inline-block",
+      marginRight: "10px"
+    }
   }, documents === null || documents === void 0 ? void 0 : documents.map((document, idx) => {
     const documentLink = pdfDownloadLink$1(data === null || data === void 0 ? void 0 : data.pdfFiles, document === null || document === void 0 ? void 0 : document.fileStoreId);
     if (!documentLink) return null;
@@ -18567,143 +18478,163 @@ const TimelineDocument = React.memo(({
       target: "_blank",
       rel: "noopener noreferrer",
       href: documentLink,
-      className: "timeline-doc-link"
-    }, /*#__PURE__*/React.createElement(PDFSvg$1, {
-      className: "timeline-doc-icon"
-    }));
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "4px",
+        color: "#2563eb",
+        textDecoration: "none"
+      }
+    }, /*#__PURE__*/React.createElement(PDFSvg$1, null), /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: "14px",
+        fontWeight: "600"
+      }
+    }, (document === null || document === void 0 ? void 0 : document.fileName) || "Document"));
   }));
 });
-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 = ({
+function NewApplicationTimeline({
   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$1, null);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "timeline-hoc-container"
+}) {
+  const normalizeTimeline = workflowDetails => {
+    const details = (workflowDetails === null || workflowDetails === void 0 ? void 0 : workflowDetails.data) || workflowDetails;
+    const rawTimeline = details === null || details === void 0 ? void 0 : details.timeline;
+    if (!rawTimeline || !Array.isArray(rawTimeline)) return [];
+    return rawTimeline === null || rawTimeline === void 0 ? void 0 : rawTimeline.map(item => {
+      var _item$auditDetails, _item$auditDetails2, _dateObj, _dateObj2;
+      let dateObj = null;
+      const dateStr = (item === null || item === void 0 ? void 0 : (_item$auditDetails = item.auditDetails) === null || _item$auditDetails === void 0 ? void 0 : _item$auditDetails.lastModified) || (item === null || item === void 0 ? void 0 : (_item$auditDetails2 = item.auditDetails) === null || _item$auditDetails2 === void 0 ? void 0 : _item$auditDetails2.created);
+      if (dateStr) {
+        if (typeof dateStr === "string" && dateStr !== null && dateStr !== void 0 && dateStr.includes("/")) {
+          const [day, month, year] = dateStr === null || dateStr === void 0 ? void 0 : dateStr.split("/");
+          dateObj = new Date(year, month - 1, day);
+        } else {
+          dateObj = new Date(dateStr);
+        }
+      }
+      const createdDate = dateObj ? (_dateObj = dateObj) === null || _dateObj === void 0 ? void 0 : _dateObj.toLocaleDateString("en-GB", {
+        day: "2-digit",
+        month: "long",
+        year: "numeric"
+      }) : "N/A";
+      const createdTime = dateObj ? (_dateObj2 = dateObj) === null || _dateObj2 === void 0 ? void 0 : _dateObj2.toLocaleTimeString([], {
+        hour: "2-digit",
+        minute: "2-digit",
+        hour12: true
+      }) : "";
+      return {
+        ...item,
+        auditDetails: {
+          ...(item === null || item === void 0 ? void 0 : item.auditDetails),
+          created: createdDate,
+          timing: createdTime
+        },
+        status: item === null || item === void 0 ? void 0 : item.state,
+        performedAction: item === null || item === void 0 ? void 0 : item.performedAction,
+        assignes: item !== null && item !== void 0 && item.assignes ? item === null || item === void 0 ? void 0 : item.assignes : item !== null && item !== void 0 && item.assigner ? [item === null || item === void 0 ? void 0 : item.assigner] : [],
+        wfComment: (item === null || item === void 0 ? void 0 : item.wfComment) || (item !== null && item !== void 0 && item.comment ? [item === null || item === void 0 ? void 0 : item.comment] : []),
+        wfDocuments: (item === null || item === void 0 ? void 0 : item.wfDocuments) || []
+      };
+    });
+  };
+  const data = useMemo(() => normalizeTimeline(workflowDetails), [workflowDetails]);
+  const sortedData = data || [];
+  console.log("sortedData", sortedData);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "custom-timeline-container"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "timeline-header-wrapper"
-  }, /*#__PURE__*/React.createElement(CardSubHeader, {
-    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
-    })
+    className: "custom-timeline-header"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "custom-tracking-status-header"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "custom-tracking-line"
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "custom-tracking-status-text"
+  }, "TRACKING STATUS"), /*#__PURE__*/React.createElement("div", {
+    className: "custom-tracking-line"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "custom-title-bar-row"
+  }, /*#__PURE__*/React.createElement("h2", {
+    className: "custom-timeline-title"
+  }, "Application History"), /*#__PURE__*/React.createElement("div", {
+    className: "custom-blue-bar"
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "custom-timeline-entries"
+  }, sortedData === null || sortedData === void 0 ? void 0 : sortedData.map((item, index) => {
+    var _item$auditDetails3, _item$auditDetails4, _item$assignes, _item$assignes2, _item$assignes2$, _item$assignes3, _item$assignes3$, _item$assignes4, _item$assignes4$, _item$wfComment, _item$wfComment2, _item$wfComment3, _item$wfDocuments, _item$wfDocuments2;
+    return /*#__PURE__*/React.createElement("div", {
+      key: index,
+      className: "custom-timeline-entry"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "custom-vertical-line"
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "custom-date-badge"
+    }, item === null || item === void 0 ? void 0 : (_item$auditDetails3 = item.auditDetails) === null || _item$auditDetails3 === void 0 ? void 0 : _item$auditDetails3.created, " ", item === null || item === void 0 ? void 0 : (_item$auditDetails4 = item.auditDetails) === null || _item$auditDetails4 === void 0 ? void 0 : _item$auditDetails4.timing), /*#__PURE__*/React.createElement("div", {
+      className: "custom-entry-content"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "custom-icon-container"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "custom-circular-icon"
+    }, /*#__PURE__*/React.createElement("svg", {
+      className: "custom-mail-icon",
+      viewBox: "0 0 24 24"
+    }, /*#__PURE__*/React.createElement("rect", {
+      x: "3",
+      y: "5",
+      width: "18",
+      height: "14",
+      rx: "2"
+    }), /*#__PURE__*/React.createElement("path", {
+      d: "M3 7l9 6 9-6"
+    })))), /*#__PURE__*/React.createElement("div", {
+      className: "custom-content-card"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "custom-card-top"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "custom-card-left"
+    }, /*#__PURE__*/React.createElement("h3", {
+      className: "custom-action-title"
+    }, "Action taken by"), (item === null || item === void 0 ? void 0 : item.assignes) && (item === null || item === void 0 ? void 0 : (_item$assignes = item.assignes) === null || _item$assignes === void 0 ? void 0 : _item$assignes.length) > 0 && /*#__PURE__*/React.createElement("div", {
+      className: "custom-officer-info"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "custom-officer-name"
+    }, (item === null || item === void 0 ? void 0 : (_item$assignes2 = item.assignes) === null || _item$assignes2 === void 0 ? void 0 : (_item$assignes2$ = _item$assignes2[0]) === null || _item$assignes2$ === void 0 ? void 0 : _item$assignes2$.name) || t("CS_COMMON_NA")), (item === null || item === void 0 ? void 0 : (_item$assignes3 = item.assignes) === null || _item$assignes3 === void 0 ? void 0 : (_item$assignes3$ = _item$assignes3[0]) === null || _item$assignes3$ === void 0 ? void 0 : _item$assignes3$.emailId) && /*#__PURE__*/React.createElement("div", {
+      className: "custom-officer-email"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "custom-email-label"
+    }, "Email:"), " ", item === null || item === void 0 ? void 0 : (_item$assignes4 = item.assignes) === null || _item$assignes4 === void 0 ? void 0 : (_item$assignes4$ = _item$assignes4[0]) === null || _item$assignes4$ === void 0 ? void 0 : _item$assignes4$.emailId))), /*#__PURE__*/React.createElement("div", {
+      className: "custom-card-right"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "custom-actions-label"
+    }, "Action"), /*#__PURE__*/React.createElement("div", {
+      className: "custom-status-text"
+    }, t((item === null || item === void 0 ? void 0 : item.performedAction) || "CS_COMMON_NA")))), (item === null || item === void 0 ? void 0 : item.wfComment) && (item === null || item === void 0 ? void 0 : (_item$wfComment = item.wfComment) === null || _item$wfComment === void 0 ? void 0 : _item$wfComment.length) > 0 && (item === null || item === void 0 ? void 0 : (_item$wfComment2 = item.wfComment) === null || _item$wfComment2 === void 0 ? void 0 : _item$wfComment2.some(c => c === null || c === void 0 ? void 0 : c.trim())) && /*#__PURE__*/React.createElement("div", {
+      className: "custom-comments-section"
+    }, /*#__PURE__*/React.createElement("h4", {
+      className: "custom-comments-title"
+    }, "Officer Comments"), /*#__PURE__*/React.createElement("div", {
+      className: "custom-comment-text"
+    }, item === null || item === void 0 ? void 0 : (_item$wfComment3 = item.wfComment) === null || _item$wfComment3 === void 0 ? void 0 : _item$wfComment3.map((comment, idx) => /*#__PURE__*/React.createElement("p", {
+      key: idx
+    }, comment)))), (item === null || item === void 0 ? void 0 : item.wfDocuments) && (item === null || item === void 0 ? void 0 : (_item$wfDocuments = item.wfDocuments) === null || _item$wfDocuments === void 0 ? void 0 : _item$wfDocuments.length) > 0 && /*#__PURE__*/React.createElement("div", {
+      className: "custom-comments-section",
+      style: {
+        borderTop: "none",
+        paddingTop: "0"
+      }
+    }, /*#__PURE__*/React.createElement("h4", {
+      className: "custom-comments-title"
+    }, "Document Attached:"), /*#__PURE__*/React.createElement("div", {
+      className: "custom-comment-text"
+    }, item === null || item === void 0 ? void 0 : (_item$wfDocuments2 = item.wfDocuments) === null || _item$wfDocuments2 === void 0 ? void 0 : _item$wfDocuments2.map((doc, index) => /*#__PURE__*/React.createElement(TimelineDocument, {
+      key: `${doc === null || doc === void 0 ? void 0 : doc.documentType}-${index}`,
+      value: item === null || item === void 0 ? void 0 : item.wfDocuments,
+      Code: doc === null || doc === void 0 ? void 0 : doc.documentType,
+      index: index
+    })))))));
   }))));
-};
+}
 
 const PTRWFApplicationTimeline = props => {
   var _props$application2, _props$application3, _props$application4, _workflowDetails$data, _workflowDetails$data2, _workflowDetails$data3, _user$info, _user$info$roles, _workflowDetails$data6, _workflowDetails$data7, _workflowDetails$data8, _workflowDetails$data9, _workflowDetails$data0, _props$application0, _props$application1, _actions$, _props$application10, _props$application11, _props$application13, _workflowDetails$data1, _workflowDetails$data10, _workflowDetails$data11;
@@ -18896,7 +18827,7 @@ const PTRWFApplicationTimeline = props => {
       fetchWorkflowService();
     }
   }, [tenantId]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(ApplicationTimeline, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(NewApplicationTimeline, {
     workflowDetails: workflowDetails,
     t: t
   }), (((_props$application0 = props.application) === null || _props$application0 === void 0 ? void 0 : _props$application0.status) != "CITIZENACTIONREQUIRED" || ((_props$application1 = props.application) === null || _props$application1 === void 0 ? void 0 : _props$application1.status) != "INITIATED") && actions && ((_actions$ = actions[0]) === null || _actions$ === void 0 ? void 0 : _actions$.action) != "PAY" && !isCitizen && /*#__PURE__*/React.createElement(ActionBar, null, displayMenu ? /*#__PURE__*/React.createElement(Menu, {
@@ -19460,7 +19391,19 @@ const PTRMyApplications = () => {
       color: "#333"
     }
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Header, null, `${t("CS_TITLE_MY_APPLICATIONS")} ${applicationsList ? `(${applicationsList.length})` : ""}`), /*#__PURE__*/React.createElement("div", null, loadingPage ? /*#__PURE__*/React.createElement(Loader$1, null) : (applicationsList === null || applicationsList === void 0 ? void 0 : applicationsList.length) > 0 && currentItems.map((application, index) => /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Header, null, `${t("CS_TITLE_MY_APPLICATIONS")} ${applicationsList ? `(${applicationsList.length})` : ""}`), /*#__PURE__*/React.createElement("p", {
+    style: {
+      marginLeft: "16px",
+      marginTop: "16px"
+    }
+  }, t("PTR_TEXT_NOT_ABLE_TO_FIND_THE_APPLICATION"), " ", /*#__PURE__*/React.createElement("span", {
+    className: "link",
+    style: {
+      display: "block"
+    }
+  }, /*#__PURE__*/React.createElement(Link, {
+    to: "/digit-ui/citizen/ptr/petservice/new-application/info"
+  }, t("PTR_COMMON_CLICK_HERE_TO_REGISTER_NEW_PET")))), /*#__PURE__*/React.createElement("div", null, loadingPage ? /*#__PURE__*/React.createElement(Loader$1, null) : (applicationsList === null || applicationsList === void 0 ? void 0 : applicationsList.length) > 0 && currentItems.map((application, index) => /*#__PURE__*/React.createElement("div", {
     key: index
   }, /*#__PURE__*/React.createElement(PetApplication, {
     application: application,
@@ -19501,19 +19444,7 @@ const PTRMyApplications = () => {
         setLoadingPage(false);
       }, 500);
     }
-  }, "\u2192")), /*#__PURE__*/React.createElement("p", {
-    style: {
-      marginLeft: "16px",
-      marginTop: "16px"
-    }
-  }, t("PTR_TEXT_NOT_ABLE_TO_FIND_THE_APPLICATION"), " ", /*#__PURE__*/React.createElement("span", {
-    className: "link",
-    style: {
-      display: "block"
-    }
-  }, /*#__PURE__*/React.createElement(Link, {
-    to: "/digit-ui/citizen/ptr/petservice/new-application/info"
-  }, t("PTR_COMMON_CLICK_HERE_TO_REGISTER_NEW_PET")))));
+  }, "\u2192")));
 };
 
 const PDFSvg$2 = ({
@@ -25252,60 +25183,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;
@@ -25315,22 +25245,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: {
@@ -25354,7 +25287,8 @@ const StepWrapper = ({
     className: "stepper-body",
     style: {
       width: "100%",
-      marginBottom: "20px"
+      marginBottom: "20px",
+      background: "transparent"
     }
   }, children));
 };
@@ -25561,9 +25495,7 @@ const NewPTRStepperForm = () => {
     });
     return () => unlisten();
   }, [history, dispatch]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "pageCard"
-  }, /*#__PURE__*/React.createElement(CardHeader, {
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardHeader, {
     styles: {
       fontSize: "28px",
       fontWeight: "400",