@mseva/upyog-ui-module-chb 1.1.91-dev.1.2 → 1.1.91-dev.1.3

package/dist/index.modern.js

@@ -1,4 +1,4 @@
-import { TickMark, CardSubHeader, Modal as Modal$1, CardLabelDesc, CardLabel, CardText, Card, FormStep, Dropdown, TextArea, Loader as Loader$1, TextInput, MobileNumber, Toast, LabelFieldPair, UploadFile, Table, KeyNote, SubmitBar, CardHeader, InfoIcon, Calender, CheckPoint, ConnectingCheckPoints, AppContainer, PrivateRoute, BreadCrumb, PDFSvg as PDFSvg$2, StatusTable, Row, CardSectionHeader, CheckBox, LinkButton, Banner, ActionBar, Header, MultiLink, TelePhone, DisplayPhotos, SearchField, FilterFormField, RadioButtons, ComplaintIcon, InboxComposer, SearchForm, CardLabelError, DatePicker, BackButton, EmployeeModuleCard, CloseSvg, Localities, RemoveableTag, FormComposer, Menu, OTPInput, Rating, CitizenHomeCard } from '@mseva/digit-ui-react-components';
+import { TickMark, CardSubHeader, Modal as Modal$1, CardLabelDesc, CardLabel, CardText, Card, FormStep, Dropdown, TextArea, Loader as Loader$1, TextInput, MobileNumber, Toast, LabelFieldPair, UploadFile, Table, KeyNote, SubmitBar, CardHeader, InfoIcon, Calender, CheckPoint, ConnectingCheckPoints, AppContainer, PrivateRoute, BreadCrumb, PDFSvg as PDFSvg$2, StatusTable, Row, CardSectionHeader, CheckBox, LinkButton, Banner, ActionBar, Header, MultiLink, TelePhone, DisplayPhotos, SearchField, FilterFormField, RadioButtons, ComplaintIcon, InboxComposer, SearchForm, CardLabelError, DatePicker, EmployeeModuleCard, CloseSvg, Localities, RemoveableTag, FormComposer, Menu, OTPInput, Rating, CitizenHomeCard } from '@mseva/digit-ui-react-components';
 import React, { useState, useEffect, useRef, useMemo, useCallback, Fragment as Fragment$1, useReducer } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useRouteMatch, useHistory, Switch, Route, Redirect, Link, useParams } from 'react-router-dom';
@@ -14391,6 +14391,8 @@ var accessibility = createCommonjsModule(function (module, exports) {
 });
 unwrapExports(accessibility);
 
+var _shallowEqual = getCjsExportFromNamespace(index_esm);
+
 var Calendar_1 = createCommonjsModule(function (module, exports) {
 
   function _typeof(obj) {
@@ -15045,7 +15047,7 @@ var Calendar_1 = createCommonjsModule(function (module, exports) {
             monthNames: this.getMonthNames()
           });
         }
-        if (!(0, index_esm.shallowEqualObjects)(prevProps.scroll, this.props.scroll)) {
+        if (!(0, _shallowEqual.shallowEqualObjects)(prevProps.scroll, this.props.scroll)) {
           this.setState({
             scrollArea: this.calcScrollArea(this.props)
           });
@@ -17673,6 +17675,7 @@ const getTimelineAcknowledgementData = (workflowDetails, tenantInfo, pdfFiles =
     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 pattern = /\[#\?.*?\*\*\]/;
   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";
@@ -17682,7 +17685,8 @@ const getTimelineAcknowledgementData = (workflowDetails, tenantInfo, pdfFiles =
     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 rawComment = (item === null || item === void 0 ? void 0 : (_item$wfComment = item.wfComment) === null || _item$wfComment === void 0 ? void 0 : _item$wfComment[0]) || "-";
+    const comment = typeof rawComment === "string" ? rawComment.split(pattern)[0] : rawComment;
     const documents = (item === null || item === void 0 ? void 0 : item.wfDocuments) || [];
     const sla = (item === null || item === void 0 ? void 0 : item.sla) || "N/A";
     const assignedTo = Array.isArray(item === null || item === void 0 ? void 0 : item.assignes) ? item.assignes.map(a => a === null || a === void 0 ? void 0 : a.name).filter(Boolean).join(", ") : "";
@@ -18754,46 +18758,11 @@ const CHBAcknowledgement = ({
 const Loader = ({
   page: _page = false
 }) => {
-  const baseStyle = {
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center"
-  };
-  const pageStyle = {
-    ...baseStyle,
-    position: "fixed",
-    top: 0,
-    left: 0,
-    width: "100vw",
-    height: "100vh",
-    background: "rgba(255,255,255,0.6)",
-    backdropFilter: "blur(4px)",
-    zIndex: 9999
-  };
-  const moduleStyle = {
-    ...baseStyle,
-    minHeight: "100px",
-    width: "100%",
-    position: "relative"
-  };
-  const spinnerStyle = {
-    width: "64px",
-    height: "64px",
-    border: "8px solid #1976d2",
-    borderTop: "8px solid transparent",
-    borderRadius: "50%",
-    animation: "spin 1.2s linear infinite"
-  };
   return /*#__PURE__*/React.createElement("div", {
-    style: _page ? pageStyle : moduleStyle
+    className: `chb-loader-container ${_page ? "chb-page-loader-overlay" : "chb-module-loader-container"}`
   }, /*#__PURE__*/React.createElement("div", {
-    style: spinnerStyle
-  }), /*#__PURE__*/React.createElement("style", null, `
-          @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-          }
-        `));
+    className: "chb-spinner"
+  }));
 };
 Loader.propTypes = {
   page: propTypes.bool
@@ -18839,7 +18808,7 @@ const ReasonModal = ({
   } = useForm();
   const onSubmit = data => {
     console.log("data===", data);
-    cancelModal();
+    cancelModal(data);
   };
   return /*#__PURE__*/React.createElement("form", {
     onSubmit: handleSubmit(onSubmit)
@@ -18862,14 +18831,9 @@ const ReasonModal = ({
       padding: " 0 30px"
     }
   }, /*#__PURE__*/React.createElement(CardLabel, null, `${t("CHB_DISCOUNT_REASON")}`, " ", /*#__PURE__*/React.createElement("span", {
-    style: {
-      color: "red"
-    }
+    className: "mandatory-asterisk"
   }, "*")), /*#__PURE__*/React.createElement("div", {
-    className: "form-field",
-    style: {
-      width: "100%"
-    }
+    className: "form-field w-fullwidth"
   }, /*#__PURE__*/React.createElement(Controller, {
     control: control,
     name: "reason",
@@ -18895,11 +18859,7 @@ const ReasonModal = ({
       });
     }
   }), (errors === null || errors === void 0 ? void 0 : errors.reason) && /*#__PURE__*/React.createElement("p", {
-    style: {
-      color: "red",
-      marginTop: "4px",
-      marginBottom: "0"
-    }
+    className: "chb-error-text"
   }, errors.reason.message))), /*#__PURE__*/React.createElement(ActionBar, {
     style: {
       position: "relative"
@@ -18947,14 +18907,15 @@ const ChbApplication = ({
   const handleCancel = async () => {
     setShowModal(true);
   };
-  const submitCancel = async () => {
+  const submitCancel = async data => {
     setLoader(true);
     setShowModal(false);
     const finalPayload = {
       hallsBookingApplication: {
         ...application,
         workflow: {
-          action: "CANCEL"
+          action: "CANCEL",
+          comment: data === null || data === void 0 ? void 0 : data.reason
         }
       }
     };
@@ -42045,7 +42006,9 @@ function NewApplicationTimeline({
   workflowDetails,
   t,
   tenantId = Digit.ULBService.getCurrentTenantId(),
-  timeObj
+  timeObj,
+  empUserName = null,
+  handleSetEmpDesignation = () => {}
 }) {
   var _workflowDetails$data, _workflowDetails$data2, _workflowDetails$data3, _workflowDetails$data4, _employeeData$data, _employeeData$data$Em;
   const {
@@ -42120,6 +42083,9 @@ function NewApplicationTimeline({
     const translationKey = `COMMON_MASTERS_DESIGNATION_${assignment === null || assignment === void 0 ? void 0 : assignment.designation}`;
     deptMap[emp === null || emp === void 0 ? void 0 : emp.code] = translationKey;
   });
+  if (employeeData && empUserName) {
+    handleSetEmpDesignation(t(deptMap[empUserName]));
+  }
   if (isLoading) return /*#__PURE__*/React.createElement(Loader$1, null);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "custom-timeline-container"
@@ -42187,13 +42153,13 @@ function NewApplicationTimeline({
       className: "custom-officer-info"
     }, /*#__PURE__*/React.createElement("div", {
       className: "custom-officer-name"
-    }, (item === null || item === void 0 ? void 0 : (_item$assigner2 = item.assigner) === null || _item$assigner2 === void 0 ? void 0 : _item$assigner2.name) || t("CS_COMMON_NA")), (item === null || item === void 0 ? void 0 : (_item$assigner3 = item.assigner) === null || _item$assigner3 === void 0 ? void 0 : _item$assigner3.emailId) && /*#__PURE__*/React.createElement("div", {
+    }, (item === null || item === void 0 ? void 0 : (_item$assigner2 = item.assigner) === null || _item$assigner2 === void 0 ? void 0 : _item$assigner2.name) || t("CS_COMMON_NA"), deptMap[item === null || item === void 0 ? void 0 : (_item$assigner3 = item.assigner) === null || _item$assigner3 === void 0 ? void 0 : _item$assigner3.userName] && /*#__PURE__*/React.createElement("span", {
+      className: "custom-officer-name"
+    }, "- ", t(deptMap[item === null || item === void 0 ? void 0 : (_item$assigner4 = item.assigner) === null || _item$assigner4 === void 0 ? void 0 : _item$assigner4.userName]))), (item === null || item === void 0 ? void 0 : (_item$assigner5 = item.assigner) === null || _item$assigner5 === void 0 ? void 0 : _item$assigner5.emailId) && /*#__PURE__*/React.createElement("div", {
       className: "custom-officer-email"
     }, /*#__PURE__*/React.createElement("span", {
       className: "custom-email-label"
-    }, t("Email")), " ", item === null || item === void 0 ? void 0 : (_item$assigner4 = item.assigner) === null || _item$assigner4 === void 0 ? void 0 : _item$assigner4.emailId), deptMap[item === null || item === void 0 ? void 0 : (_item$assigner5 = item.assigner) === null || _item$assigner5 === void 0 ? void 0 : _item$assigner5.userName] && /*#__PURE__*/React.createElement("div", {
-      className: "custom-officer-name"
-    }, t(deptMap[item === null || item === void 0 ? void 0 : (_item$assigner6 = item.assigner) === null || _item$assigner6 === void 0 ? void 0 : _item$assigner6.userName])))), /*#__PURE__*/React.createElement("div", {
+    }, t("Email")), " ", item === null || item === void 0 ? void 0 : (_item$assigner6 = item.assigner) === null || _item$assigner6 === void 0 ? void 0 : _item$assigner6.emailId))), /*#__PURE__*/React.createElement("div", {
       className: "custom-card-column custom-card-column-mid"
     }, (item === null || item === void 0 ? void 0 : item.sla) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h3", {
       className: "custom-action-title"
@@ -42215,9 +42181,13 @@ function NewApplicationTimeline({
       className: "custom-comments-title"
     }, t("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$assignes = item.assignes) === null || _item$assignes === void 0 ? void 0 : _item$assignes.length) > 0 && /*#__PURE__*/React.createElement("div", {
+    }, item === null || item === void 0 ? void 0 : (_item$wfComment3 = item.wfComment) === null || _item$wfComment3 === void 0 ? void 0 : _item$wfComment3.map((comment, idx) => {
+      const pattern = /\[#\?.*?\*\*\]/;
+      const truncatedComment = typeof comment === "string" ? comment === null || comment === void 0 ? void 0 : comment.split(pattern)[0] : comment;
+      return /*#__PURE__*/React.createElement("p", {
+        key: idx
+      }, truncatedComment);
+    }))), (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-assigned-to-footer"
     }, /*#__PURE__*/React.createElement("h3", {
       className: "custom-comments-title"
@@ -42225,9 +42195,9 @@ function NewApplicationTimeline({
       className: "custom-officer-info"
     }, /*#__PURE__*/React.createElement("div", {
       className: "custom-officer-name"
-    }, (_item$assignes$ = item.assignes[0]) === null || _item$assignes$ === void 0 ? void 0 : _item$assignes$.name), deptMap[(_item$assignes$2 = item.assignes[0]) === null || _item$assignes$2 === void 0 ? void 0 : _item$assignes$2.userName] && /*#__PURE__*/React.createElement("div", {
+    }, (_item$assignes$ = item.assignes[0]) === null || _item$assignes$ === void 0 ? void 0 : _item$assignes$.name, deptMap[(_item$assignes$2 = item.assignes[0]) === null || _item$assignes$2 === void 0 ? void 0 : _item$assignes$2.userName] && /*#__PURE__*/React.createElement("span", {
       className: "custom-officer-email"
-    }, t(deptMap[(_item$assignes$3 = item.assignes[0]) === null || _item$assignes$3 === void 0 ? void 0 : _item$assignes$3.userName]))))), (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", {
+    }, "- ", t(deptMap[(_item$assignes$3 = item.assignes[0]) === null || _item$assignes$3 === void 0 ? void 0 : _item$assignes$3.userName])))))), (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-no-border"
     }, /*#__PURE__*/React.createElement("h4", {
       className: "custom-comments-title"
@@ -42573,12 +42543,7 @@ const CHBApplicationDetails = () => {
     data: slotlistRows,
     columns: columns,
     getCellProps: cellInfo => ({
-      style: {
-        minWidth: "150px",
-        padding: "10px",
-        fontSize: "16px",
-        paddingLeft: "20px"
-      }
+      className: "chb-table-cell-details"
     }),
     isPaginationRequired: false,
     totalRecords: slotlistRows.length
@@ -42587,12 +42552,7 @@ const CHBApplicationDetails = () => {
   }, /*#__PURE__*/React.createElement("div", {
     className: "document-section-header"
   }, t("CS_COMMON_DOCUMENTS")), ((_docs = docs) === null || _docs === void 0 ? void 0 : _docs.length) > 0 ? /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: "flex",
-      flexWrap: "wrap",
-      gap: "16px",
-      marginTop: "16px"
-    }
+    className: "chb-documents-flex"
   }, (_docs2 = docs) === null || _docs2 === void 0 ? void 0 : _docs2.map((doc, index) => /*#__PURE__*/React.createElement(React.Fragment, {
     key: index
   }, /*#__PURE__*/React.createElement(CHBDocument, {
@@ -42786,18 +42746,30 @@ const useInboxTableConfig = ({
   }, value);
   const tableColumnConfig = useMemo(() => {
     return [{
+      Header: t("CHB_APPLICANT_NAME"),
+      Cell: ({
+        row
+      }) => {
+        var _row$original;
+        console.log("row", row);
+        return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+          className: "link"
+        }, row === null || row === void 0 ? void 0 : (_row$original = row.original) === null || _row$original === void 0 ? void 0 : _row$original.owner));
+      },
+      disableSortBy: true
+    }, {
       Header: t("NOC_HOME_SEARCH_RESULTS_APP_NO_LABEL"),
       accessor: "uuid",
       disableSortBy: true,
       Cell: ({
         row
       }) => {
-        var _row$original, _row$original2;
+        var _row$original2, _row$original3;
         return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Link, {
-          to: `${parentRoute}/applicationsearch/application-details/${(_row$original = row.original) === null || _row$original === void 0 ? void 0 : _row$original.applicationId}`
+          to: `${parentRoute}/applicationsearch/application-details/${(_row$original2 = row.original) === null || _row$original2 === void 0 ? void 0 : _row$original2.applicationId}`
         }, /*#__PURE__*/React.createElement("span", {
           className: "link"
-        }, (_row$original2 = row.original) === null || _row$original2 === void 0 ? void 0 : _row$original2.applicationId)));
+        }, (_row$original3 = row.original) === null || _row$original3 === void 0 ? void 0 : _row$original3.applicationId)));
       }
     }, {
       Header: t("TL_COMMON_TABLE_COL_APP_DATE"),
@@ -42805,8 +42777,8 @@ const useInboxTableConfig = ({
       Cell: ({
         row
       }) => {
-        var _row$original3, _row$original4;
-        return (_row$original3 = row.original) !== null && _row$original3 !== void 0 && _row$original3.date ? GetCell(format(new Date((_row$original4 = row.original) === null || _row$original4 === void 0 ? void 0 : _row$original4.date), "dd/MM/yyyy")) : "";
+        var _row$original4, _row$original5;
+        return (_row$original4 = row.original) !== null && _row$original4 !== void 0 && _row$original4.date ? GetCell(format(new Date((_row$original5 = row.original) === null || _row$original5 === void 0 ? void 0 : _row$original5.date), "dd/MM/yyyy")) : "";
       }
     }, {
       Header: t("PT_COMMON_TABLE_COL_STATUS_LABEL"),
@@ -42814,8 +42786,8 @@ const useInboxTableConfig = ({
       Cell: ({
         row
       }) => {
-        var _row$original5;
-        return t((_row$original5 = row.original) === null || _row$original5 === void 0 ? void 0 : _row$original5.status);
+        var _row$original6;
+        return t((_row$original6 = row.original) === null || _row$original6 === void 0 ? void 0 : _row$original6.status);
       }
     }];
   });
@@ -43055,6 +43027,7 @@ const Inbox = ({
   const [totalCount, setTotalCount] = useState(0);
   useEffect(() => {
     if (data) {
+      console.log("yes data", data);
       setStatuses((data === null || data === void 0 ? void 0 : data.statuses) || []);
       setTable((data === null || data === void 0 ? void 0 : data.table) || []);
       setTotalCount((data === null || data === void 0 ? void 0 : data.totalCount) || 0);
@@ -43382,35 +43355,16 @@ const CHBSearchApplication = ({
         onSubmit: toggleMenu,
         disabled: (application === null || application === void 0 ? void 0 : application.bookingStatus) === "CANCELLED" || (application === null || application === void 0 ? void 0 : application.bookingStatus) === "EXPIRED"
       }), isMenuOpen && /*#__PURE__*/React.createElement("div", {
-        style: {
-          position: 'absolute',
-          backgroundColor: 'white',
-          border: '1px solid #ccc',
-          borderRadius: '4px',
-          padding: '8px',
-          zIndex: 1000
-        }
+        className: "chb-dropdown-menu"
       }, (application === null || application === void 0 ? void 0 : application.bookingStatus) === "BOOKED" && /*#__PURE__*/React.createElement("div", {
         onClick: handleCancel,
-        style: {
-          display: 'block',
-          padding: '8px',
-          textDecoration: 'none',
-          color: 'black',
-          cursor: 'pointer'
-        }
+        className: "chb-menu-item"
       }, t("CHB_CANCEL")), (application === null || application === void 0 ? void 0 : application.bookingStatus) !== "BOOKED" && /*#__PURE__*/React.createElement("div", {
         onClick: () => {
           var _row$original6;
           return handleNavigate(`/digit-ui/employee/payment/collect/chb-services/${row === null || row === void 0 ? void 0 : (_row$original6 = row.original) === null || _row$original6 === void 0 ? void 0 : _row$original6.bookingNo}`);
         },
-        style: {
-          display: 'block',
-          padding: '8px',
-          textDecoration: 'none',
-          color: 'black',
-          cursor: 'pointer'
-        }
+        className: "chb-menu-item"
       }, t("CHB_COLLECT_PAYMENT")))));
     }
   }], []);
@@ -43447,9 +43401,7 @@ const CHBSearchApplication = ({
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Header, null, t("CHB_SEARCH_BOOKINGS")), /*#__PURE__*/React.createElement(Card, {
     className: "card-search-heading"
   }, /*#__PURE__*/React.createElement("span", {
-    style: {
-      color: "#505A5F"
-    }
+    className: "cell-text"
   }, t("Provide at least one parameter to search for an application"))), /*#__PURE__*/React.createElement(SearchForm, {
     onSubmit: onSubmit,
     handleSubmit: handleSubmit
@@ -43505,7 +43457,7 @@ const CHBSearchApplication = ({
       date: props.value,
       disabled: false,
       onChange: props.onChange,
-      max: new Date().toISOString().split('T')[0]
+      max: new Date().toISOString().split("T")[0]
     }),
     name: "fromDate",
     control: control
@@ -43523,9 +43475,7 @@ const CHBSearchApplication = ({
     label: t("ES_COMMON_SEARCH"),
     submit: true
   }), /*#__PURE__*/React.createElement("p", {
-    style: {
-      marginTop: "10px"
-    },
+    className: "link-button-margin",
     onClick: () => {
       reset({
         bookingNo: "",
@@ -43543,14 +43493,10 @@ const CHBSearchApplication = ({
       previousPage();
     }
   }, t(`ES_COMMON_CLEAR_ALL`)))), !isLoading && data !== null && data !== void 0 && data.display ? /*#__PURE__*/React.createElement(Card, {
-    style: {
-      marginTop: 20
-    }
+    className: "chb-margin-top-20"
   }, t(data.display).split("\\n").map((text, index) => /*#__PURE__*/React.createElement("p", {
     key: index,
-    style: {
-      textAlign: "center"
-    }
+    className: "text-align-center"
   }, text))) : !isLoading && data !== "" ? /*#__PURE__*/React.createElement(Table, {
     t: t,
     data: data,
@@ -43559,10 +43505,9 @@ const CHBSearchApplication = ({
     getCellProps: cellInfo => {
       return {
         style: {
-          minWidth: cellInfo.column.Header === t("CHB_INBOX_APPLICATION_NO") ? "240px" : "",
-          padding: "20px 18px",
-          fontSize: "16px"
-        }
+          minWidth: cellInfo.column.Header === t("CHB_INBOX_APPLICATION_NO") ? "240px" : ""
+        },
+        className: "ads-default-cell"
       };
     },
     onPageSizeChange: onPageSizeChange,
@@ -43667,6 +43612,31 @@ const SearchApp = ({
   }));
 };
 
+const CHBBreadCrumbs$1 = ({
+  location,
+  t
+}) => {
+  const crumbs = [{
+    path: "/digit-ui/employee",
+    content: t("ES_COMMON_HOME"),
+    show: true
+  }, {
+    path: "/digit-ui/employee/chb/inbox",
+    content: t("CS_COMMON_INBOX"),
+    show: location.pathname.includes("/chb/inbox") ? true : false
+  }, {
+    path: "/digit-ui/employee/chb/bookHall",
+    content: "Book Hall",
+    show: location.pathname.includes("/chb/bookHall") ? true : false
+  }, {
+    path: "/digit-ui/employee/chb/applicationsearch/application-details",
+    content: "Application Overview",
+    show: location.pathname.includes("/chb/applicationsearch/application-details") ? true : false
+  }];
+  return /*#__PURE__*/React.createElement(BreadCrumb, {
+    crumbs: crumbs
+  });
+};
 const EmployeeApp = ({
   path,
   url,
@@ -43697,20 +43667,15 @@ const EmployeeApp = ({
   const CHBResponseCitizen = Digit.ComponentRegistryService.getComponent("CHBResponseCitizen");
   const isRes = window.location.href.includes("chb/response");
   const isNewRegistration = window.location.href.includes("searchhall") || window.location.href.includes("modify-application") || window.location.href.includes("chb/application-details");
-  return /*#__PURE__*/React.createElement(Switch, null, /*#__PURE__*/React.createElement(AppContainer, null, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "ground-container"
   }, !isRes ? /*#__PURE__*/React.createElement("div", {
-    style: isNewRegistration ? {
-      marginLeft: "12px",
-      display: "flex",
-      alignItems: "center"
-    } : {
-      marginLeft: "-4px",
-      display: "flex",
-      alignItems: "center"
+    style: {
+      marginLeft: "10px"
     }
-  }, /*#__PURE__*/React.createElement(BackButton, {
-    location: location
+  }, /*#__PURE__*/React.createElement(CHBBreadCrumbs$1, {
+    location: location,
+    t: t
   })) : null, /*#__PURE__*/React.createElement(PrivateRoute, {
     exact: true,
     path: `${path}/`,
@@ -43760,7 +43725,7 @@ const EmployeeApp = ({
     component: props => /*#__PURE__*/React.createElement(SearchApp, Object.assign({}, props, {
       parentRoute: path
     }))
-  })))));
+  })));
 };
 
 const CHBIcon = ({
@@ -44465,7 +44430,7 @@ const CHBApplicationDetails$1 = () => {
   let user = Digit.UserService.getUser();
   const menuRef = useRef();
   const isCemp = user === null || user === void 0 ? void 0 : (_user$info = user.info) === null || _user$info === void 0 ? void 0 : _user$info.roles.filter(role => role.code === "CEMP");
-  console.log('isCemp', isCemp);
+  console.log("isCemp", isCemp);
   const userRoles = user === null || user === void 0 ? void 0 : (_user$info2 = user.info) === null || _user$info2 === void 0 ? void 0 : (_user$info2$roles = _user$info2.roles) === null || _user$info2$roles === void 0 ? void 0 : _user$info2$roles.map(e => e.code);
   let actions = (workflowDetails === null || workflowDetails === void 0 ? void 0 : (_workflowDetails$data6 = workflowDetails.data) === null || _workflowDetails$data6 === void 0 ? void 0 : (_workflowDetails$data7 = _workflowDetails$data6.actionState) === null || _workflowDetails$data7 === void 0 ? void 0 : (_workflowDetails$data8 = _workflowDetails$data7.nextActions) === null || _workflowDetails$data8 === void 0 ? void 0 : _workflowDetails$data8.filter(e => {
     return (userRoles === null || userRoles === void 0 ? void 0 : userRoles.some(role => {
@@ -44636,7 +44601,7 @@ const CHBApplicationDetails$1 = () => {
     payments,
     ...params
   }) {
-    console.log('payments', payments);
+    console.log("payments", payments);
     try {
       var _data$hallsBookingApp2, _data$hallsBookingApp3;
       setLoading(true);
@@ -44652,7 +44617,7 @@ const CHBApplicationDetails$1 = () => {
           };
         })
       };
-      console.log('application', application);
+      console.log("application", application);
       let fileStoreId = data === null || data === void 0 ? void 0 : (_data$hallsBookingApp2 = data.hallsBookingApplication) === null || _data$hallsBookingApp2 === void 0 ? void 0 : (_data$hallsBookingApp3 = _data$hallsBookingApp2[0]) === null || _data$hallsBookingApp3 === void 0 ? void 0 : _data$hallsBookingApp3.paymentReceiptFilestoreId;
       if (!fileStoreId) {
         const response = await Digit.PaymentService.generatePdf(tenantId, {
@@ -44702,7 +44667,7 @@ const CHBApplicationDetails$1 = () => {
         })
       };
       let fileStoreId = data === null || data === void 0 ? void 0 : (_data$hallsBookingApp4 = data.hallsBookingApplication) === null || _data$hallsBookingApp4 === void 0 ? void 0 : (_data$hallsBookingApp5 = _data$hallsBookingApp4[0]) === null || _data$hallsBookingApp5 === void 0 ? void 0 : _data$hallsBookingApp5.permissionLetterFilestoreId;
-      console.log('fileStoreId bef create', fileStoreId);
+      console.log("fileStoreId bef create", fileStoreId);
       if (!fileStoreId) {
         const response = await Digit.PaymentService.generatePdf(tenantId, {
           Payments: [{
@@ -46132,14 +46097,9 @@ const CHBCitizenSecond = ({
   }, /*#__PURE__*/React.createElement("div", {
     className: "label-field-pair"
   }, /*#__PURE__*/React.createElement(CardLabel, null, t("SELECT_HALL_NAME"), " ", /*#__PURE__*/React.createElement("span", {
-    style: {
-      color: "red"
-    }
+    className: "mandatory-asterisk"
   }, "*")), /*#__PURE__*/React.createElement("div", {
-    className: "form-field",
-    style: {
-      width: "100%"
-    }
+    className: "form-field w-fullwidth"
   }, /*#__PURE__*/React.createElement(Controller, {
     control: control,
     name: "siteId",
@@ -46149,10 +46109,7 @@ const CHBCitizenSecond = ({
     render: props => {
       var _CHBLocations$CHB;
       return /*#__PURE__*/React.createElement(Dropdown, {
-        style: {
-          marginBottom: 0
-        },
-        className: "form-field",
+        className: "form-field chb-form-field-margin",
         select: e => {
           props.onChange(e);
           fiterHalls(e);
@@ -46168,25 +46125,13 @@ const CHBCitizenSecond = ({
       });
     }
   }), errors.siteId && /*#__PURE__*/React.createElement("p", {
-    style: {
-      color: "red",
-      marginTop: "4px",
-      marginBottom: "0"
-    }
+    className: "chb-error-text"
   }, errors.siteId.message))), /*#__PURE__*/React.createElement("div", {
-    className: "label-field-pair",
-    style: {
-      marginTop: "20px"
-    }
+    className: "label-field-pair chb-margin-top-20"
   }, /*#__PURE__*/React.createElement(CardLabel, null, t("SELECT_DATE"), " ", /*#__PURE__*/React.createElement("span", {
-    style: {
-      color: "red"
-    }
+    className: "mandatory-asterisk"
   }, "*")), /*#__PURE__*/React.createElement("div", {
-    className: "form-field",
-    style: {
-      width: "100%"
-    }
+    className: "form-field w-fullwidth"
   }, /*#__PURE__*/React.createElement(Controller, {
     control: control,
     name: "startDate",
@@ -46194,13 +46139,10 @@ const CHBCitizenSecond = ({
       required: t("START_DATE_REQ")
     },
     render: props => /*#__PURE__*/React.createElement(TextInput, {
-      style: {
-        marginBottom: 0
-      },
       type: "date",
-      className: "form-field",
+      className: "form-field chb-form-field-margin",
       value: props.value,
-      min: new Date(Date.now() + 24 * 60 * 60 * 1000).toISOString().split("T")[0],
+      min: new Date().toISOString().split("T")[0],
       onChange: e => {
         props.onChange(e.target.value);
         setValue("endDate", "");
@@ -46210,25 +46152,13 @@ const CHBCitizenSecond = ({
       }
     })
   }), errors.startDate && /*#__PURE__*/React.createElement("p", {
-    style: {
-      color: "red",
-      marginTop: "4px",
-      marginBottom: "0"
-    }
+    className: "chb-error-text"
   }, errors.startDate.message))), /*#__PURE__*/React.createElement("div", {
-    className: "label-field-pair",
-    style: {
-      marginTop: "20px"
-    }
+    className: "label-field-pair chb-margin-top-20"
   }, /*#__PURE__*/React.createElement(CardLabel, null, t("SELECT_END_DATE"), " ", /*#__PURE__*/React.createElement("span", {
-    style: {
-      color: "red"
-    }
+    className: "mandatory-asterisk"
   }, "*")), /*#__PURE__*/React.createElement("div", {
-    className: "form-field",
-    style: {
-      width: "100%"
-    }
+    className: "form-field w-fullwidth"
   }, /*#__PURE__*/React.createElement(Controller, {
     control: control,
     name: "endDate",
@@ -46238,19 +46168,19 @@ const CHBCitizenSecond = ({
         if (!value || !startDate) return true;
         const start = new Date(startDate);
         const end = new Date(value);
-        const daysDiff = Math.ceil((end - start) / (1000 * 60 * 60 * 24));
-        if (daysDiff > 5) {
+        const diffDays = Math.floor((end - start) / (1000 * 60 * 60 * 24));
+        if (diffDays < 0) {
+          return t("END_DATE_BEFORE_START");
+        }
+        if (diffDays > 5) {
           return t("END_DATE_MAX_5_DAYS");
         }
         return true;
       }
     },
     render: props => /*#__PURE__*/React.createElement(TextInput, {
-      style: {
-        marginBottom: 0
-      },
       type: "date",
-      className: "form-field",
+      className: "form-field chb-form-field-margin",
       value: props.value,
       min: startDate || new Date().toISOString().split("T")[0],
       onChange: e => {
@@ -46263,25 +46193,13 @@ const CHBCitizenSecond = ({
       disabled: !startDate
     })
   }), errors.endDate && /*#__PURE__*/React.createElement("p", {
-    style: {
-      color: "red",
-      marginTop: "4px",
-      marginBottom: "0"
-    }
+    className: "chb-error-text"
   }, errors.endDate.message))), /*#__PURE__*/React.createElement("div", {
-    className: "label-field-pair",
-    style: {
-      marginTop: "20px"
-    }
+    className: "label-field-pair chb-margin-top-20"
   }, /*#__PURE__*/React.createElement(CardLabel, null, t("HALL_CODE"), " ", /*#__PURE__*/React.createElement("span", {
-    style: {
-      color: "red"
-    }
+    className: "mandatory-asterisk"
   }, "*")), /*#__PURE__*/React.createElement("div", {
-    className: "form-field",
-    style: {
-      width: "100%"
-    }
+    className: "form-field w-fullwidth"
   }, /*#__PURE__*/React.createElement(Controller, {
     control: control,
     name: "hallCode",
@@ -46289,10 +46207,7 @@ const CHBCitizenSecond = ({
       required: t("HALL_CODE_REQ")
     },
     render: props => /*#__PURE__*/React.createElement(Dropdown, {
-      style: {
-        marginBottom: 0
-      },
-      className: "form-field",
+      className: "form-field chb-form-field-margin",
       select: e => {
         props.onChange(e);
         slotsSearch(e);
@@ -46303,26 +46218,13 @@ const CHBCitizenSecond = ({
       disable: errors.endDate || errors.startDate
     })
   }), errors.hallCode && /*#__PURE__*/React.createElement("p", {
-    style: {
-      color: "red",
-      marginTop: "4px",
-      marginBottom: "0"
-    }
+    className: "chb-error-text"
   }, errors.hallCode.message))), (getSlots === null || getSlots === void 0 ? void 0 : getSlots.length) > 0 && /*#__PURE__*/React.createElement("div", {
-    className: "label-field-pair",
-    style: {
-      marginTop: "20px",
-      marginBottom: "20px"
-    }
+    className: "label-field-pair chb-margin-top-20 chb-margin-bottom-20"
   }, /*#__PURE__*/React.createElement(CardLabel, null, t("AVAILABLE_SLOTS"), " ", /*#__PURE__*/React.createElement("span", {
-    style: {
-      color: "red"
-    }
+    className: "mandatory-asterisk"
   }, "*")), /*#__PURE__*/React.createElement("div", {
-    className: "form-field",
-    style: {
-      width: "100%"
-    }
+    className: "form-field w-fullwidth"
   }, /*#__PURE__*/React.createElement(Controller, {
     control: control,
     name: "slots",
@@ -46335,12 +46237,7 @@ const CHBCitizenSecond = ({
       }
     },
     render: field => /*#__PURE__*/React.createElement("div", {
-      style: {
-        display: "grid",
-        gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))",
-        gap: "16px",
-        width: "100%"
-      }
+      className: "chb-slot-grid"
     }, getSlots === null || getSlots === void 0 ? void 0 : getSlots.map((slot, idx) => {
       var _field$value, _slot$slotStaus;
       const slotKey = `${slot.hallCode}-${slot.bookingDate}-${slot.fromTime || ""}-${slot.toTime || ""}`;
@@ -46348,16 +46245,7 @@ const CHBCitizenSecond = ({
       const isAvailable = ((_slot$slotStaus = slot.slotStaus) === null || _slot$slotStaus === void 0 ? void 0 : _slot$slotStaus.toLowerCase()) === "available";
       return /*#__PURE__*/React.createElement("label", {
         key: slotKey,
-        style: {
-          border: "1px solid #ccc",
-          borderRadius: "8px",
-          padding: "12px",
-          backgroundColor: isAvailable ? "#e6ffed" : "#ffe6e6",
-          cursor: isAvailable ? "pointer" : "not-allowed",
-          opacity: isAvailable ? 1 : 0.6,
-          flexDirection: "column",
-          gap: "6px"
-        }
+        className: `chb-slot-card ${!isAvailable ? "chb-slot-card--unavailable" : ""}`
       }, /*#__PURE__*/React.createElement("input", {
         type: "checkbox",
         checked: isChecked,
@@ -46384,40 +46272,23 @@ const CHBCitizenSecond = ({
           }
         }
       }), /*#__PURE__*/React.createElement("span", {
-        style: {
-          marginLeft: "10px"
-        }
+        className: "chb-slot-text"
       }, slot.bookingDate, " (", slot.hallCode, ") \u2013", " ", /*#__PURE__*/React.createElement("span", {
-        style: {
-          color: slot.slotStaus === "AVAILABLE" ? "green" : "red",
-          fontWeight: "bold"
-        }
+        className: `chb-slot-status ${slot.slotStaus !== "AVAILABLE" ? "chb-slot-status--unavailable" : ""}`
       }, slot.slotStaus ? slot.slotStaus.charAt(0).toUpperCase() + slot.slotStaus.slice(1).toLowerCase() : "")));
     }))
   }), errors.slots && /*#__PURE__*/React.createElement("p", {
-    style: {
-      color: "red",
-      marginTop: "4px",
-      marginBottom: "0"
-    }
+    className: "chb-error-text"
   }, errors.slots.message))), /*#__PURE__*/React.createElement("div", {
     style: {
       display: showInfo ? "block" : "none"
     }
   }, /*#__PURE__*/React.createElement("div", {
-    className: "label-field-pair",
-    style: {
-      marginTop: "20px"
-    }
+    className: "label-field-pair chb-margin-top-20"
   }, /*#__PURE__*/React.createElement(CardLabel, null, t("CHB_PURPOSE"), " ", /*#__PURE__*/React.createElement("span", {
-    style: {
-      color: "red"
-    }
+    className: "mandatory-asterisk"
   }, "*")), /*#__PURE__*/React.createElement("div", {
-    className: "form-field",
-    style: {
-      width: "100%"
-    }
+    className: "form-field w-fullwidth"
   }, /*#__PURE__*/React.createElement(Controller, {
     control: control,
     name: "purpose",
@@ -46428,10 +46299,7 @@ const CHBCitizenSecond = ({
     render: props => {
       var _CHBPurpose$CHB;
       return /*#__PURE__*/React.createElement(Dropdown, {
-        style: {
-          marginBottom: 0
-        },
-        className: "form-field",
+        className: "form-field chb-form-field-margin",
         select: props.onChange,
         selected: props.value,
         option: CHBPurpose === null || CHBPurpose === void 0 ? void 0 : (_CHBPurpose$CHB = CHBPurpose.CHB) === null || _CHBPurpose$CHB === void 0 ? void 0 : _CHBPurpose$CHB.Purpose,
@@ -46439,25 +46307,13 @@ const CHBCitizenSecond = ({
       });
     }
   }), errors.purpose && /*#__PURE__*/React.createElement("p", {
-    style: {
-      color: "red",
-      marginTop: "4px",
-      marginBottom: "0"
-    }
+    className: "chb-error-text"
   }, errors.purpose.message))), /*#__PURE__*/React.createElement("div", {
-    className: "label-field-pair",
-    style: {
-      marginTop: "20px"
-    }
+    className: "label-field-pair chb-margin-top-20"
   }, /*#__PURE__*/React.createElement(CardLabel, null, t("CHB_SPECIAL_CATEGORY"), " ", /*#__PURE__*/React.createElement("span", {
-    style: {
-      color: "red"
-    }
+    className: "mandatory-asterisk"
   }, "*")), /*#__PURE__*/React.createElement("div", {
-    className: "form-field",
-    style: {
-      width: "100%"
-    }
+    className: "form-field w-fullwidth"
   }, /*#__PURE__*/React.createElement(Controller, {
     control: control,
     name: "specialCategory",
@@ -46468,10 +46324,7 @@ const CHBCitizenSecond = ({
     render: props => {
       var _SpecialCategory$CHB;
       return /*#__PURE__*/React.createElement(Dropdown, {
-        style: {
-          marginBottom: 0
-        },
-        className: "form-field",
+        className: "form-field chb-form-field-margin",
         select: props.onChange,
         selected: props.value,
         option: SpecialCategory === null || SpecialCategory === void 0 ? void 0 : (_SpecialCategory$CHB = SpecialCategory.CHB) === null || _SpecialCategory$CHB === void 0 ? void 0 : _SpecialCategory$CHB.SpecialCategory,
@@ -46479,25 +46332,13 @@ const CHBCitizenSecond = ({
       });
     }
   }), errors.specialCategory && /*#__PURE__*/React.createElement("p", {
-    style: {
-      color: "red",
-      marginTop: "4px",
-      marginBottom: "0"
-    }
+    className: "chb-error-text"
   }, errors.specialCategory.message))), /*#__PURE__*/React.createElement("div", {
-    className: "label-field-pair",
-    style: {
-      marginTop: "20px"
-    }
+    className: "label-field-pair chb-margin-top-20"
   }, /*#__PURE__*/React.createElement(CardLabel, null, t("CHB_PURPOSE_DESCRIPTION"), " ", /*#__PURE__*/React.createElement("span", {
-    style: {
-      color: "red"
-    }
+    className: "mandatory-asterisk"
   }, "*")), /*#__PURE__*/React.createElement("div", {
-    className: "form-field",
-    style: {
-      width: "100%"
-    }
+    className: "form-field w-fullwidth"
   }, /*#__PURE__*/React.createElement(Controller, {
     control: control,
     name: "purposeDescription",
@@ -46510,10 +46351,7 @@ const CHBCitizenSecond = ({
       }
     },
     render: props => /*#__PURE__*/React.createElement(TextArea, {
-      style: {
-        marginBottom: 0,
-        marginTop: 0
-      },
+      className: "chb-form-field-margin",
       type: "textarea",
       value: props.value,
       onChange: e => {
@@ -46524,16 +46362,9 @@ const CHBCitizenSecond = ({
       }
     })
   }), errors.purposeDescription && /*#__PURE__*/React.createElement("p", {
-    style: {
-      color: "red",
-      marginTop: "4px",
-      marginBottom: "0"
-    }
+    className: "chb-error-text"
   }, errors.purposeDescription.message))), !isCitizen && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "label-field-pair",
-    style: {
-      marginTop: "20px"
-    }
+    className: "label-field-pair chb-margin-top-20"
   }, /*#__PURE__*/React.createElement(CardLabel, null, `${t("CHB_DISCOUNT_AMOUNT")}`), /*#__PURE__*/React.createElement(Controller, {
     control: control,
     name: "discountAmount",
@@ -46541,10 +46372,7 @@ const CHBCitizenSecond = ({
       var _errors$name;
       return /*#__PURE__*/React.createElement(TextInput, {
         type: "number",
-        style: {
-          marginBottom: 0,
-          width: "100%"
-        },
+        className: "chb-form-field-margin w-fullwidth",
         value: props.value,
         error: errors === null || errors === void 0 ? void 0 : (_errors$name = errors.name) === null || _errors$name === void 0 ? void 0 : _errors$name.message,
         onChange: e => {
@@ -46557,10 +46385,7 @@ const CHBCitizenSecond = ({
       });
     }
   })), /*#__PURE__*/React.createElement("div", {
-    className: "label-field-pair",
-    style: {
-      marginTop: "20px"
-    }
+    className: "label-field-pair chb-margin-top-20"
   }, /*#__PURE__*/React.createElement(CardLabel, null, t("CHB_DISCOUNT_REASON")), /*#__PURE__*/React.createElement(Controller, {
     control: control,
     name: "reason",
@@ -46568,10 +46393,7 @@ const CHBCitizenSecond = ({
       var _errors$name2;
       return /*#__PURE__*/React.createElement(TextInput, {
         type: "text",
-        style: {
-          marginBottom: 0,
-          width: "100%"
-        },
+        className: "chb-form-field-margin w-fullwidth",
         value: props.value,
         error: errors === null || errors === void 0 ? void 0 : (_errors$name2 = errors.name) === null || _errors$name2 === void 0 ? void 0 : _errors$name2.message,
         onChange: e => {
@@ -47767,8 +47589,6 @@ var reactLifecyclesCompat_es = {
   polyfill: polyfill
 };
 
-var _reactLifecyclesCompat = getCjsExportFromNamespace(reactLifecyclesCompat_es);
-
 var Modal_1 = createCommonjsModule(function (module, exports) {
 
   Object.defineProperty(exports, "__esModule", {
@@ -48057,7 +47877,7 @@ var Modal_1 = createCommonjsModule(function (module, exports) {
       padding: "20px"
     }
   };
-  (0, _reactLifecyclesCompat.polyfill)(Modal);
+  (0, reactLifecyclesCompat_es.polyfill)(Modal);
   if (process.env.NODE_ENV !== "production") {
     Modal.setCreateHTMLElement = function (fn) {
       return createHTMLElement = fn;
@@ -48438,11 +48258,7 @@ const CitizenConsent = ({
       content: modalStyles.modalContent
     }
   }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-    style: {
-      wordWrap: "break-word",
-      textAlign: "justify",
-      fontFamily: "Roboto, serif"
-    }
+    className: "break-words text-justify font-roboto"
   }, /*#__PURE__*/React.createElement("div", {
     dangerouslySetInnerHTML: {
       __html: selfdeclarationform
@@ -49097,10 +48913,7 @@ function CHBSummary({
   const renderLabel = (label, value) => /*#__PURE__*/React.createElement("div", {
     className: "bpa-summary-label-field-pair"
   }, /*#__PURE__*/React.createElement(CardLabel, {
-    className: "bpa-summary-bold-label",
-    style: {
-      width: "auto"
-    }
+    className: "bpa-summary-bold-label swach-search-container"
   }, label), /*#__PURE__*/React.createElement("div", null, value || "NA"));
   const slotlistRows = (formData === null || formData === void 0 ? void 0 : (_formData$venueDetail5 = formData.venueDetails) === null || _formData$venueDetail5 === void 0 ? void 0 : (_formData$venueDetail6 = _formData$venueDetail5[0]) === null || _formData$venueDetail6 === void 0 ? void 0 : (_formData$venueDetail7 = _formData$venueDetail6.bookingSlotDetails) === null || _formData$venueDetail7 === void 0 ? void 0 : _formData$venueDetail7.map(slot => {
     var _formData$venueDetail8, _formData$venueDetail9, _formData$venueDetail0, _formData$venueDetail1;
@@ -49129,25 +48942,14 @@ function CHBSummary({
     data: slotlistRows,
     columns: columns,
     getCellProps: cellInfo => ({
-      style: {
-        minWidth: "100px",
-        padding: "8px",
-        fontSize: "clamp(0.9rem, 2vw, 1.1rem)",
-        paddingLeft: "10px",
-        wordBreak: "break-word"
-      }
+      className: "chb-table-cell-summary"
     }),
     isPaginationRequired: false,
     totalRecords: slotlistRows.length
   }), /*#__PURE__*/React.createElement(CardSubHeader, {
     className: "bpa-summary-heading"
   }, t("CS_COMMON_DOCUMENTS")), /*#__PURE__*/React.createElement(StatusTable, null, /*#__PURE__*/React.createElement("div", {
-    className: "bpa-summary-section",
-    style: {
-      display: "flex",
-      flexWrap: "wrap",
-      gap: "16px"
-    }
+    className: "bpa-summary-section chb-documents-container"
   }, (docs === null || docs === void 0 ? void 0 : docs.length) > 0 ? docs === null || docs === void 0 ? void 0 : docs.map((doc, index) => /*#__PURE__*/React.createElement("div", {
     key: index
   }, /*#__PURE__*/React.createElement(CHBDocument, {
@@ -49614,20 +49416,12 @@ const CHBResponseCitizen = props => {
     applicationNumber: ndcCode,
     info: (nocData === null || nocData === void 0 ? void 0 : nocData.applicationStatus) == "REJECTED" ? "" : t(`CHB_APPROVAL_NUMBER`),
     successful: (nocData === null || nocData === void 0 ? void 0 : nocData.applicationStatus) == "REJECTED" ? false : true,
-    style: {
-      padding: "10px"
-    },
+    className: "stepper",
     headerStyles: {
-      fontSize: "clamp(20px, 4vw, 32px)",
-      wordBreak: "break-word"
+      className: "chb-banner-header"
     }
   }), /*#__PURE__*/React.createElement(ActionBar, {
-    style: {
-      display: "flex",
-      justifyContent: "flex-end",
-      alignItems: "baseline",
-      gap: " 20px"
-    }
+    className: "chb-action-bar-response"
   }, /*#__PURE__*/React.createElement(SubmitBar, {
     label: t("CORE_COMMON_GO_TO_HOME"),
     onSubmit: onSubmit