@mseva/digit-ui-module-rentandlease 1.0.16 → 1.0.17

package/dist/index.modern.js

@@ -1,4 +1,4 @@
-import { CheckBox, Loader as Loader$2, CloseSvg, RefreshSVG, RadioButtons, SubmitBar, PTIcon, EmployeeModuleCard, Modal, FormComposer as FormComposer$1, Header, MultiLink, Card, StatusTable, Row, Toast, ActionBar, Menu, CardLabelError, LabelFieldPair, CardLabel, TextInput, Dropdown, CardSectionHeader, MobileNumber, DatePicker, TextArea, CardSubHeader, CheckPoint, ConnectingCheckPoints, AppContainer, BackButton, PrivateRoute, KeyNote, FormStep, RadioOrSelect, ResponseComposer, Table, Label, LinkLabel, DetailsCard, SearchAction, FilterAction, PopUp, ShippingTruck, UploadFile, BreakLine, Banner, CardText, LinkButton, CardHeader, CitizenHomeCard } from '@mseva/digit-ui-react-components';
+import { CheckBox, Loader as Loader$2, CloseSvg, RefreshSVG, RadioButtons, SubmitBar, PTIcon, EmployeeModuleCard, Modal, FormComposer as FormComposer$1, Header, MultiLink, Card, StatusTable, Row, Toast, ActionBar, Menu, CardLabelError, LabelFieldPair, CardLabel, TextInput, Dropdown, CardSectionHeader, MobileNumber, DatePicker, TextArea, CardSubHeader, AppContainer, BackButton, PrivateRoute, KeyNote, FormStep, RadioOrSelect, ResponseComposer, Table, Label, LinkLabel, DetailsCard, SearchAction, FilterAction, PopUp, ShippingTruck, UploadFile, BreakLine, Banner, CardText, LinkButton, CardHeader, CitizenHomeCard } from '@mseva/digit-ui-react-components';
 import React, { useState, useEffect, useMemo, useCallback, useRef as useRef$1 } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams, useHistory, useRouteMatch, useLocation, Switch, Link, Route } from 'react-router-dom';
@@ -9052,101 +9052,9 @@ Loader.defaultProps = {
   page: false
 };
 
-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,
@@ -9184,7 +9092,10 @@ const TimelineDocument = React.memo(({
   }, [value, Code]);
   if (isLoading) return /*#__PURE__*/React.createElement(Loader$2, 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;
@@ -9193,143 +9104,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$2, 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 RALApplicationDetails = () => {
   var _applicationData$Owne, _propertyDetails$fees, _propertyDetails$fees2, _propertyDetails$fees3, _propertyDetails$fees4, _applicationData$Docu;
@@ -9526,7 +9457,7 @@ const RALApplicationDetails = () => {
     label: t("SECURITY_DEPOSIT"),
     text: (propertyDetails === null || propertyDetails === void 0 ? void 0 : propertyDetails.securityDeposit) || t("CS_NA")
   }), /*#__PURE__*/React.createElement(Row, {
-    label: t("PENALTY_TYPE"),
+    label: t("RAL_FEE_CYCLE"),
     text: (propertyDetails === null || propertyDetails === void 0 ? void 0 : (_propertyDetails$fees = propertyDetails.feesPeriodCycle) === null || _propertyDetails$fees === void 0 ? void 0 : (_propertyDetails$fees2 = _propertyDetails$fees[0]) === null || _propertyDetails$fees2 === void 0 ? void 0 : _propertyDetails$fees2.toUpperCase()) + (propertyDetails === null || propertyDetails === void 0 ? void 0 : (_propertyDetails$fees3 = propertyDetails.feesPeriodCycle) === null || _propertyDetails$fees3 === void 0 ? void 0 : (_propertyDetails$fees4 = _propertyDetails$fees3.slice(1)) === null || _propertyDetails$fees4 === void 0 ? void 0 : _propertyDetails$fees4.toLowerCase()) || t("CS_NA")
   }), /*#__PURE__*/React.createElement(Row, {
     label: t("PROPERTY_SIZE"),
@@ -9556,7 +9487,7 @@ const RALApplicationDetails = () => {
       marginTop: "10px",
       fontSize: "15px"
     }
-  }, t(doc === null || doc === void 0 ? void 0 : doc.documentType)))) : /*#__PURE__*/React.createElement("h5", null, t("CS_NO_DOCUMENTS_UPLOADED"))))), /*#__PURE__*/React.createElement(ApplicationTimeline, {
+  }, t(doc === null || doc === void 0 ? void 0 : doc.documentType)))) : /*#__PURE__*/React.createElement("h5", null, t("CS_NO_DOCUMENTS_UPLOADED"))))), /*#__PURE__*/React.createElement(NewApplicationTimeline, {
     workflowDetails: workflowDetails,
     t: t
   })), (loader || (workflowDetails === null || workflowDetails === void 0 ? void 0 : workflowDetails.isLoading)) && /*#__PURE__*/React.createElement(Loader, {
@@ -11012,15 +10943,24 @@ const SearchApplication = ({
   onSearch,
   type,
   onClose,
-  searchFields,
   searchParams,
   isInboxPage,
   defaultSearchParams
 }) => {
-  var _searchFields$filter;
   const {
     t
   } = useTranslation();
+  const searchFields = [{
+    label: t("APPLICATION_NUMBER"),
+    name: "applicationNumber"
+  }, {
+    label: t("UC_MOBILE_NO_LABEL"),
+    name: "mobileNumber",
+    maxlength: 10,
+    pattern: "[6-9][0-9]{9}",
+    title: t("ES_SEARCH_APPLICATION_MOBILE_INVALID"),
+    componentInFront: "+91"
+  }];
   const {
     register,
     handleSubmit,
@@ -11093,13 +11033,35 @@ const SearchApplication = ({
       width: "100%",
       display: "grid"
     }
-  }, searchFields === null || searchFields === void 0 ? void 0 : (_searchFields$filter = searchFields.filter(e => true)) === null || _searchFields$filter === void 0 ? void 0 : _searchFields$filter.map((input, index) => /*#__PURE__*/React.createElement("div", {
+  }, searchFields === null || searchFields === void 0 ? void 0 : searchFields.map((input, index) => /*#__PURE__*/React.createElement("div", {
     key: input.name,
     className: "input-fields"
   }, /*#__PURE__*/React.createElement("span", {
     key: index,
     className: "complaint-input"
-  }, " ", /*#__PURE__*/React.createElement(Label, null, input.label), input.type !== "date" ? /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(Label, null, input.label), input.name === "mobileNumber" ? /*#__PURE__*/React.createElement("div", {
+    className: "field-container"
+  }, /*#__PURE__*/React.createElement(MobileNumber, {
+    name: "mobileNumber",
+    inputRef: register({
+      minLength: {
+        value: 10,
+        message: t("CORE_COMMON_MOBILE_ERROR")
+      },
+      maxLength: {
+        value: 10,
+        message: t("CORE_COMMON_MOBILE_ERROR")
+      },
+      pattern: {
+        value: /[6789][0-9]{9}/,
+        message: t("CORE_COMMON_MOBILE_ERROR")
+      }
+    }),
+    type: "number",
+    componentInFront: /*#__PURE__*/React.createElement("div", {
+      className: "employee-card-input employee-card-input--front"
+    }, "+91")
+  })) : input.type !== "date" ? /*#__PURE__*/React.createElement("div", {
     className: "field-container"
   }, input !== null && input !== void 0 && input.componentInFront ? /*#__PURE__*/React.createElement("span", {
     className: "citizen-card-input citizen-card-input--front",
@@ -11118,7 +11080,7 @@ const SearchApplication = ({
     name: input.name,
     control: control,
     defaultValue: null
-  }), " "))), type === "desktop" && !mobileView && /*#__PURE__*/React.createElement("div", {
+  })))), type === "desktop" && !mobileView && /*#__PURE__*/React.createElement("div", {
     style: {
       gridColumn: "2/3",
       textAlign: "right",
@@ -11315,7 +11277,6 @@ const DesktopInbox = ({
     defaultSearchParams: props.defaultSearchParams,
     onSearch: props.onSearch,
     type: "desktop",
-    searchFields: props.searchFields,
     isInboxPage: !(props !== null && props !== void 0 && props.isSearch),
     searchParams: props.searchParams
   }), /*#__PURE__*/React.createElement("div", {
@@ -11425,8 +11386,7 @@ const ApplicationCard = ({
     onClose: handlePopupClose,
     onSearch: onSearch,
     isFstpOperator: isFstpOperator,
-    searchParams: searchFilterParams,
-    searchFields: searchFields
+    searchParams: searchFilterParams
   }))));
 };
 
@@ -11627,7 +11587,6 @@ const MobileInbox = ({
     onSearch: onSearch,
     onSort: onSort,
     searchParams: searchParams,
-    searchFields: searchFields,
     linkPrefix: linkPrefix,
     sortParams: sortParams,
     serviceRequestIdKey: serviceRequestIdKey,
@@ -11797,17 +11756,6 @@ const Inbox = ({
   }, []);
   const handlePageSizeChange = e => setPageSize(Number(e.target.value));
   const totalCount = data === null || data === void 0 ? void 0 : (_data$ = data[0]) === null || _data$ === void 0 ? void 0 : _data$.totalCount;
-  const getSearchFields = () => [{
-    label: t("APPLICATION_NUMBER"),
-    name: "applicationNumber"
-  }, {
-    label: t("UC_MOBILE_NO_LABEL"),
-    name: "mobileNumber",
-    maxlength: 10,
-    pattern: "[6-9][0-9]{9}",
-    title: t("ES_SEARCH_APPLICATION_MOBILE_INVALID"),
-    componentInFront: "+91"
-  }];
   if ((rest === null || rest === void 0 ? void 0 : (_rest$data = rest.data) === null || _rest$data === void 0 ? void 0 : _rest$data.length) !== null) {
     if (isMobile) {
       return /*#__PURE__*/React.createElement(MobileInbox, {
@@ -11815,7 +11763,6 @@ const Inbox = ({
         defaultSearchParams: _initialStates.searchParams,
         isLoading: hookLoading,
         isSearch: !isInbox,
-        searchFields: getSearchFields(),
         onFilterChange: handleFilterChange,
         onSearch: handleFilterChange,
         onSort: handleSort,
@@ -11837,7 +11784,6 @@ const Inbox = ({
         defaultSearchParams: _initialStates.searchParams,
         isSearch: !isInbox,
         onFilterChange: handleFilterChange,
-        searchFields: getSearchFields(),
         onSearch: handleFilterChange,
         onSort: handleSort,
         onNextPage: fetchNextPage,
@@ -11896,6 +11842,31 @@ const ModalConfig = ({
   if (action.isTerminateState) {
     checkAssigneeVisible = false;
   }
+  if ((action === null || action === void 0 ? void 0 : action.action) === "RENEWAL") {
+    return {
+      label: {
+        submit: t("RAL_RENEWAL_SUBMIT"),
+        cancel: t("WF_EMPLOYEE_NEWTL_CANCEL")
+      },
+      form: [{
+        body: [{
+          label: `${t("RAL_TRADE_LICENSE_NUMBER")} *`,
+          isMandatory: false,
+          type: "text",
+          validation: {
+            message: t("CORE_COMMON_REQUIRED_ERRMSG"),
+            pattern: {
+              value: /^[A-Z0-9\/-]{6,20}$/,
+              message: t("RAL_INVALID_TRADE_LICENSE_NUMBER")
+            }
+          },
+          populators: {
+            name: "tradeLicenseNumber"
+          }
+        }]
+      }]
+    };
+  }
   return {
     label: {
       heading: "",
@@ -11974,7 +11945,8 @@ const RALModal = ({
   showToast,
   closeToast,
   setShowToast,
-  getEmployees
+  getEmployees,
+  handleRenewal
 }) => {
   const [config, setConfig] = useState({});
   const [defaultValues, setDefaultValues] = useState({});
@@ -12071,6 +12043,21 @@ const RALModal = ({
     })();
   }, [file]);
   function submit(data) {
+    if ((action === null || action === void 0 ? void 0 : action.action) === "RENEWAL") {
+      if (!(data !== null && data !== void 0 && data.tradeLicenseNumber)) {
+        setShowToast({
+          key: true,
+          label: t("Trade License Number is required")
+        });
+        return;
+      }
+      handleRenewal({
+        ...applicationData,
+        ...data
+      });
+      closeModal();
+      return;
+    }
     let checkAssigneeMandatory = (action === null || action === void 0 ? void 0 : action.action) === "SENDBACKTOOVERIFIER" || (action === null || action === void 0 ? void 0 : action.action) === "VERIFY" || (action === null || action === void 0 ? void 0 : action.action) === "FORWARD" || (action === null || action === void 0 ? void 0 : action.action) === "FORWARDFORFIELDINSPECTION" || (action === null || action === void 0 ? void 0 : action.action) === "PENDING_FOR_FIELDINSPECTION" || (action === null || action === void 0 ? void 0 : action.action) === "FORWARD_FOR_APPROVAL" || (action === null || action === void 0 ? void 0 : action.action) === "FORWARDFORAPPROVAL" || (action === null || action === void 0 ? void 0 : action.action) === "PENDING_FOR_DOCUMENT_VERIFY" || (action === null || action === void 0 ? void 0 : action.action) === "REQUEST_FOR_DISCONNECTION" || (action === null || action === void 0 ? void 0 : action.action) === "DISCONNECTION_FIELD_INSPECTION" || (action === null || action === void 0 ? void 0 : action.action) === "FORWARD_FOR_FIELDINSPECTION" || (action === null || action === void 0 ? void 0 : action.action) === "FORWARD_FOT_SETLEMENT";
     if (action !== null && action !== void 0 && action.isTerminateState) checkAssigneeMandatory = false;
     if (checkAssigneeMandatory && !(selectedApprover !== null && selectedApprover !== void 0 && selectedApprover.uuid)) {
@@ -12150,7 +12137,7 @@ const RALModal = ({
 };
 
 const RALApplicationDetails$1 = () => {
-  var _user$info, _user$info$roles, _workflowDetails$data, _workflowDetails$data2, _workflowDetails$data3, _workflowDetails$data4, _workflowDetails$data5, _applicationData$Owne, _propertyDetails$fees, _propertyDetails$fees2, _propertyDetails$fees3, _propertyDetails$fees4, _applicationData$Docu, _actions$, _workflowDetails$data6, _workflowDetails$data7, _workflowDetails$data8;
+  var _user$info, _user$info$roles, _workflowDetails$data, _workflowDetails$data2, _workflowDetails$data3, _workflowDetails$data4, _workflowDetails$data5, _actions, _applicationData$Owne, _propertyDetails$fees, _propertyDetails$fees2, _propertyDetails$fees3, _propertyDetails$fees4, _applicationData$Docu2, _actions2, _workflowDetails$data6;
   const {
     t
   } = useTranslation();
@@ -12161,6 +12148,7 @@ const RALApplicationDetails$1 = () => {
   const [loader, setLoader] = useState(false);
   const state = tenantId === null || tenantId === void 0 ? void 0 : tenantId.split(".")[0];
   const [applicationData, setApplicationData] = useState();
+  console.log("applicationData", applicationData);
   const [showToast, setShowToast] = useState(null);
   const [displayMenu, setDisplayMenu] = useState(false);
   const [selectedAction, setSelectedAction] = useState(null);
@@ -12201,49 +12189,6 @@ const RALApplicationDetails$1 = () => {
     role: "EMPLOYEE"
   });
   const propertyDetails = applicationData !== null && applicationData !== void 0 && applicationData.additionalDetails ? applicationData.additionalDetails : {};
-  const showNextActions = nextActions => {
-    var _nextAction;
-    let nextAction = (nextActions === null || nextActions === void 0 ? void 0 : nextActions.length) > 0 && nextActions[0];
-    const next = nextActions === null || nextActions === void 0 ? void 0 : nextActions.map(action => action === null || action === void 0 ? void 0 : action.action);
-    if (next !== null && next !== void 0 && next.includes("PAY") || next !== null && next !== void 0 && next.includes("EDIT")) {
-      let currentIndex = next.indexOf("EDIT") || next.indexOf("PAY");
-      currentIndex = currentIndex != -1 ? currentIndex : next.indexOf("PAY");
-      nextAction = nextActions[currentIndex];
-    }
-    switch ((_nextAction = nextAction) === null || _nextAction === void 0 ? void 0 : _nextAction.action) {
-      case "PAY":
-        return  /*#__PURE__*/React.createElement("div", {
-          style: {
-            marginTop: "1em",
-            bottom: "0px",
-            width: "100%",
-            marginBottom: "1.2em"
-          }
-        }, /*#__PURE__*/React.createElement(Link, {
-          to: {
-            pathname: `/digit-ui/employee/payment/collect/rl-services/${acknowledgementIds}/${tenantId}?tenantId=${tenantId}`,
-            state: {
-              tenantId: tenantId,
-              applicationNumber: acknowledgementIds
-            }
-          }
-        }, /*#__PURE__*/React.createElement(SubmitBar, {
-          label: t("CS_APPLICATION_DETAILS_MAKE_PAYMENT")
-        }))) ;
-      case "SUBMIT_FEEDBACK":
-        return /*#__PURE__*/React.createElement("div", {
-          style: {
-            marginTop: "24px"
-          }
-        }, /*#__PURE__*/React.createElement(Link, {
-          to: `/digit-ui/citizen/fsm/rate/${acknowledgementIds}`
-        }, /*#__PURE__*/React.createElement(SubmitBar, {
-          label: t("CS_APPLICATION_DETAILS_RATE")
-        })));
-      default:
-        return null;
-    }
-  };
   let user = Digit.UserService.getUser();
   const menuRef = useRef$1();
   const userRoles = user === null || user === void 0 ? void 0 : (_user$info = user.info) === null || _user$info === void 0 ? void 0 : (_user$info$roles = _user$info.roles) === null || _user$info$roles === void 0 ? void 0 : _user$info$roles.map(e => e.code);
@@ -12258,6 +12203,11 @@ const RALApplicationDetails$1 = () => {
       return (_e$roles2 = e.roles) === null || _e$roles2 === void 0 ? void 0 : _e$roles2.includes(role);
     })) || !e.roles;
   }));
+  if ((_actions = actions) !== null && _actions !== void 0 && _actions.some(action => action.action === "REQUEST_FOR_DISCONNECTION") && (applicationData === null || applicationData === void 0 ? void 0 : applicationData.endDate) > Date.now()) {
+    actions = [...(actions || []), {
+      action: "RENEWAL"
+    }];
+  }
   const closeToast = () => {
     setShowToast(null);
   };
@@ -12277,11 +12227,14 @@ const RALApplicationDetails$1 = () => {
       return (item === null || item === void 0 ? void 0 : item.uuid) == (filterNexState === null || filterNexState === void 0 ? void 0 : (_filterNexState$ = filterNexState[0]) === null || _filterNexState$ === void 0 ? void 0 : _filterNexState$.nextState);
     });
     setEmployees((filterRoles === null || filterRoles === void 0 ? void 0 : (_filterRoles$ = filterRoles[0]) === null || _filterRoles$ === void 0 ? void 0 : _filterRoles$.actions) || []);
-    if ((action === null || action === void 0 ? void 0 : action.action) == "APPLY" || (action === null || action === void 0 ? void 0 : action.action) == "REJECT") {
+    if ((action === null || action === void 0 ? void 0 : action.action) == "APPLY" || (action === null || action === void 0 ? void 0 : action.action) == "REJECT" || (action === null || action === void 0 ? void 0 : action.action) == "CASH_REFUND") {
       submitAction(payload);
     } else if ((action === null || action === void 0 ? void 0 : action.action) == "PAY") {
       const appNo = acknowledgementIds;
       history.push(`/digit-ui/employee/payment/collect/rl-services/${appNo}/${tenantId}`);
+    } else if ((action === null || action === void 0 ? void 0 : action.action) === "RENEWAL") {
+      setShowModal(true);
+      setSelectedAction(action);
     } else {
       setShowModal(true);
       setSelectedAction(action);
@@ -12361,6 +12314,82 @@ const RALApplicationDetails$1 = () => {
       return () => clearTimeout(timer);
     }
   }, [showToast]);
+  const handleRenewal = async data => {
+    var _data$OwnerInfo;
+    setLoader(true);
+    const oldStart = new Date(data === null || data === void 0 ? void 0 : data.startDate);
+    const oldEnd = new Date(data === null || data === void 0 ? void 0 : data.endDate);
+    const duration = oldEnd - oldStart;
+    const newStart = new Date(oldEnd);
+    const newEnd = new Date(newStart.getTime() + duration);
+    const sanitizedOwners = data === null || data === void 0 ? void 0 : (_data$OwnerInfo = data.OwnerInfo) === null || _data$OwnerInfo === void 0 ? void 0 : _data$OwnerInfo.map(({
+      ownerId,
+      ...rest
+    }) => rest);
+    const payload = {
+      AllotmentDetails: {
+        tenantId: data === null || data === void 0 ? void 0 : data.tenantId,
+        propertyId: data === null || data === void 0 ? void 0 : data.propertyId,
+        previousApplicationNumber: data === null || data === void 0 ? void 0 : data.applicationNumber,
+        OwnerInfo: sanitizedOwners,
+        tradeLicenseNumber: data === null || data === void 0 ? void 0 : data.tradeLicenseNumber,
+        additionalDetails: data === null || data === void 0 ? void 0 : data.additionalDetails,
+        startDate: newStart.getTime(),
+        endDate: newEnd.getTime(),
+        workflow: {
+          action: "INITIATE"
+        },
+        Document: null
+      }
+    };
+    try {
+      const response = await Digit.RentAndLeaseService.create(payload);
+      updateApplication(response === null || response === void 0 ? void 0 : response.AllotmentDetails);
+    } catch (error) {
+      setLoader(false);
+      setShowToast({
+        key: true,
+        label: "Error creating renewal application"
+      });
+    }
+  };
+  const updateApplication = async response => {
+    var _applicationData$Docu;
+    const sanitizedDocuments = applicationData === null || applicationData === void 0 ? void 0 : (_applicationData$Docu = applicationData.Document) === null || _applicationData$Docu === void 0 ? void 0 : _applicationData$Docu.map(({
+      docId,
+      id,
+      ...rest
+    }) => rest);
+    const payload = {
+      AllotmentDetails: {
+        ...response,
+        Document: sanitizedDocuments,
+        workflow: {
+          action: "SAVEASDRAFT"
+        }
+      }
+    };
+    try {
+      await Digit.RentAndLeaseService.update(payload);
+      if (acknowledgementIds) {
+        const filters = {
+          applicationNumbers: acknowledgementIds
+        };
+        fetchApplications(filters);
+      }
+      setLoader(false);
+      setShowToast({
+        key: false,
+        label: "Renewal application submitted successfully"
+      });
+    } catch (error) {
+      setLoader(false);
+      setShowToast({
+        key: true,
+        label: "Error updating renewal application"
+      });
+    }
+  };
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
     className: "cardHeaderWithOptions",
     style: {
@@ -12430,7 +12459,7 @@ const RALApplicationDetails$1 = () => {
     label: t("SECURITY_DEPOSIT"),
     text: (propertyDetails === null || propertyDetails === void 0 ? void 0 : propertyDetails.securityDeposit) || t("CS_NA")
   }), /*#__PURE__*/React.createElement(Row, {
-    label: t("PENALTY_TYPE"),
+    label: t("RAL_FEE_CYCLE"),
     text: (propertyDetails === null || propertyDetails === void 0 ? void 0 : (_propertyDetails$fees = propertyDetails.feesPeriodCycle) === null || _propertyDetails$fees === void 0 ? void 0 : (_propertyDetails$fees2 = _propertyDetails$fees[0]) === null || _propertyDetails$fees2 === void 0 ? void 0 : _propertyDetails$fees2.toUpperCase()) + (propertyDetails === null || propertyDetails === void 0 ? void 0 : (_propertyDetails$fees3 = propertyDetails.feesPeriodCycle) === null || _propertyDetails$fees3 === void 0 ? void 0 : (_propertyDetails$fees4 = _propertyDetails$fees3.slice(1)) === null || _propertyDetails$fees4 === void 0 ? void 0 : _propertyDetails$fees4.toLowerCase()) || t("CS_NA")
   }), /*#__PURE__*/React.createElement(Row, {
     label: t("PROPERTY_SIZE"),
@@ -12449,7 +12478,7 @@ const RALApplicationDetails$1 = () => {
       flexDirection: "row",
       gap: "30px"
     }
-  }, (applicationData === null || applicationData === void 0 ? void 0 : (_applicationData$Docu = applicationData.Document) === null || _applicationData$Docu === void 0 ? void 0 : _applicationData$Docu.length) > 0 ? applicationData.Document.map((doc, index) => /*#__PURE__*/React.createElement("div", {
+  }, (applicationData === null || applicationData === void 0 ? void 0 : (_applicationData$Docu2 = applicationData.Document) === null || _applicationData$Docu2 === void 0 ? void 0 : _applicationData$Docu2.length) > 0 ? applicationData.Document.map((doc, index) => /*#__PURE__*/React.createElement("div", {
     key: index
   }, /*#__PURE__*/React.createElement(RALDocuments, {
     value: applicationData.Document,
@@ -12460,10 +12489,10 @@ const RALApplicationDetails$1 = () => {
       marginTop: "10px",
       fontSize: "15px"
     }
-  }, t(doc === null || doc === void 0 ? void 0 : doc.documentType)))) : /*#__PURE__*/React.createElement("h5", null, t("CS_NO_DOCUMENTS_UPLOADED"))))), /*#__PURE__*/React.createElement(ApplicationTimeline, {
+  }, t(doc === null || doc === void 0 ? void 0 : doc.documentType)))) : /*#__PURE__*/React.createElement("h5", null, t("CS_NO_DOCUMENTS_UPLOADED"))))), /*#__PURE__*/React.createElement(NewApplicationTimeline, {
     workflowDetails: workflowDetails,
     t: t
-  }), (applicationData === null || applicationData === void 0 ? void 0 : applicationData.status) != "INITIATED" && (actions === null || actions === void 0 ? void 0 : actions.length) > 0 && ((_actions$ = actions[0]) === null || _actions$ === void 0 ? void 0 : _actions$.action) != "PAY" && /*#__PURE__*/React.createElement(ActionBar, null, displayMenu ? /*#__PURE__*/React.createElement(Menu, {
+  }), (applicationData === null || applicationData === void 0 ? void 0 : applicationData.status) != "INITIATED" && ((_actions2 = actions) === null || _actions2 === void 0 ? void 0 : _actions2.length) > 0 && /*#__PURE__*/React.createElement(ActionBar, null, displayMenu ? /*#__PURE__*/React.createElement(Menu, {
     localeKeyPrefix: `WF_EMPLOYEE_${"PTR"}`,
     options: actions,
     optionKey: "action",
@@ -12492,8 +12521,10 @@ const RALApplicationDetails$1 = () => {
     showToast: showToast,
     closeToast: closeToast,
     getEmployees: getEmployees,
-    setShowToast: setShowToast
-  }) : null, (workflowDetails === null || workflowDetails === void 0 ? void 0 : workflowDetails.data) && showNextActions(workflowDetails === null || workflowDetails === void 0 ? void 0 : (_workflowDetails$data7 = workflowDetails.data) === null || _workflowDetails$data7 === void 0 ? void 0 : (_workflowDetails$data8 = _workflowDetails$data7.actionState) === null || _workflowDetails$data8 === void 0 ? void 0 : _workflowDetails$data8.nextActions)), showToast && /*#__PURE__*/React.createElement(Toast, {
+    setShowToast: setShowToast,
+    applicationData: applicationData,
+    handleRenewal: handleRenewal
+  }) : null), showToast && /*#__PURE__*/React.createElement(Toast, {
     error: showToast.key,
     label: t(showToast.label),
     isDleteBtn: true,
@@ -14394,60 +14425,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;
@@ -14457,22 +14487,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: {
@@ -14496,7 +14529,8 @@ const StepWrapper = ({
     className: "stepper-body",
     style: {
       width: "100%",
-      marginBottom: "20px"
+      marginBottom: "20px",
+      background: "transparent"
     }
   }, children));
 };
@@ -15041,7 +15075,6 @@ const RentAndLeasePropertyDetails = ({
       baseRent: "",
       securityDeposit: "",
       refundApplicableOnDiscontinuation: null,
-      penaltyType: "",
       startDate: "",
       endDate: "",
       incrementApplicable: "",
@@ -15072,7 +15105,7 @@ const RentAndLeasePropertyDetails = ({
   };
   const handlePropertySelect = property => {
     if (!property) return;
-    const fieldsToPrefill = ["propertyId", "propertyName", "baseRent", "securityDeposit", "penaltyType", "refundApplicableOnDiscontinuation"];
+    const fieldsToPrefill = ["propertyId", "propertyName", "baseRent", "securityDeposit", "refundApplicableOnDiscontinuation"];
     setValue("selectedProperty", property);
     fieldsToPrefill === null || fieldsToPrefill === void 0 ? void 0 : fieldsToPrefill.forEach(field => {
       setValue(field, (property === null || property === void 0 ? void 0 : property[field]) ?? null, {
@@ -15378,31 +15411,7 @@ const RentAndLeasePropertyDetails = ({
     })
   }))), errors.baseRent && /*#__PURE__*/React.createElement(CardLabelError, {
     style: errorStyle
-  }, getErrorMessage("baseRent")), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, {
-    className: "card-label-smaller"
-  }, t("PENALTY_TYPE"), " ", /*#__PURE__*/React.createElement("span", {
-    style: mandatoryStyle
-  }, "*")), /*#__PURE__*/React.createElement("div", {
-    className: "form-field"
-  }, /*#__PURE__*/React.createElement(Controller, {
-    control: control,
-    name: "penaltyType",
-    rules: {
-      required: t("PTR_FIELD_REQUIRED")
-    },
-    render: ({
-      value,
-      onChange
-    }) => /*#__PURE__*/React.createElement(TextInput, {
-      type: "text",
-      value: value || "",
-      onChange: e => onChange(e.target.value),
-      t: t,
-      disabled: true
-    })
-  }))), errors.penaltyType && /*#__PURE__*/React.createElement(CardLabelError, {
-    style: errorStyle
-  }, getErrorMessage("penaltyType")), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t("RAL_SECURITY_AMOUNT"), " ", /*#__PURE__*/React.createElement("span", {
+  }, getErrorMessage("baseRent")), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t("RAL_SECURITY_AMOUNT"), " ", /*#__PURE__*/React.createElement("span", {
     style: mandatoryStyle
   }, "*")), /*#__PURE__*/React.createElement("div", {
     className: "form-field"
@@ -16659,8 +16668,7 @@ function RentAndLeaseSummary({
     baseRent: t("RENT_AMOUNT "),
     securityDeposit: t("SECURITY_DEPOSIT"),
     tax_applicable: t("GST_APPLICABLE"),
-    refundApplicableOnDiscontinuation: t("REFUND_APPLICABLE"),
-    penaltyType: t("PENALTY_TYPE")
+    refundApplicableOnDiscontinuation: t("REFUND_APPLICABLE")
   };
   return /*#__PURE__*/React.createElement("div", {
     className: "application-summary"