npm - @mseva/digit-ui-module-challangeneration - Versions diffs - 1.0.29 → 1.0.30 - Mend

@mseva/digit-ui-module-challangeneration 1.0.29 → 1.0.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/index.modern.js CHANGED Viewed

@@ -7315,11 +7315,7 @@ const OwnerForm1 = _props => {
     style: isMobile ? {} : {
       marginTop: "-50px"
     }
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      marginBottom: "16px"
-    }
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabelError, {
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabelError, {
     style: errorStyle
   }, localFormState.touched.mobileNumber ? errors === null || errors === void 0 ? void 0 : (_errors$mobileNumber = errors.mobileNumber) === null || _errors$mobileNumber === void 0 ? void 0 : _errors$mobileNumber.message : ""), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, {
     className: "card-label-smaller"
@@ -7454,12 +7450,7 @@ const OwnerForm1 = _props => {
       t: t
     })
   })))), /*#__PURE__*/React.createElement("hr", {
-    style: {
-      width: "100%",
-      border: "1px solid #D6D5D4",
-      marginTop: "50px",
-      marginBottom: "40px"
-    }
+    className: "challan-hr-linebreak"
   }));
 };
@@ -7930,11 +7921,7 @@ const OwnerForm1$2 = _props => {
     style: isMobile ? {} : {
       marginTop: "-50px"
     }
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      marginBottom: "16px"
-    }
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardSectionHeader, null, t("SERVICEDETAILS")), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, {
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardSectionHeader, null, t("SERVICEDETAILS")), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, {
     className: "card-label-smaller"
   }, `${t("UC_CITY_LABEL")} * `), /*#__PURE__*/React.createElement(Controller, {
     name: "city",
@@ -9920,18 +9907,12 @@ const MyChallanResult = ({
     history.push(`/digit-ui/citizen/payment/collect/Challan_Generation/${id}/${tenantId}?tenantId=${tenantId}`);
   };
   return /*#__PURE__*/React.createElement("div", {
-    style: {
-      marginTop: "16px"
-    }
-  }, /*#__PURE__*/React.createElement("div", null, header && /*#__PURE__*/React.createElement(Header, {
-    style: {
-      marginLeft: "8px"
-    }
-  }, t(header), " (", getChallanData === null || getChallanData === void 0 ? void 0 : (_getChallanData$chall = getChallanData.challans) === null || _getChallanData$chall === void 0 ? void 0 : _getChallanData$chall.length, ")"), getChallanData === null || getChallanData === void 0 ? void 0 : (_getChallanData$chall2 = getChallanData.challans) === null || _getChallanData$chall2 === void 0 ? void 0 : _getChallanData$chall2.map((bill, index) => {
+    className: "mychallan-custom"
+  }, /*#__PURE__*/React.createElement("div", null, header && /*#__PURE__*/React.createElement(Header, null, t(header), " (", getChallanData === null || getChallanData === void 0 ? void 0 : (_getChallanData$chall = getChallanData.challans) === null || _getChallanData$chall === void 0 ? void 0 : _getChallanData$chall.length, ")"), getChallanData === null || getChallanData === void 0 ? void 0 : (_getChallanData$chall2 = getChallanData.challans) === null || _getChallanData$chall2 === void 0 ? void 0 : _getChallanData$chall2.map((bill, index) => {
     var _bill$amount, _bill$amount$, _bill$citizen;
     const checkAmount = Math.max((bill === null || bill === void 0 ? void 0 : (_bill$amount = bill.amount) === null || _bill$amount === void 0 ? void 0 : (_bill$amount$ = _bill$amount[0]) === null || _bill$amount$ === void 0 ? void 0 : _bill$amount$.amount) || 0, (bill === null || bill === void 0 ? void 0 : bill.challanAmount) || 0);
-    const total = checkAmount ?? 0;
-    const waiver = (bill === null || bill === void 0 ? void 0 : bill.feeWaiver) ?? 0;
+    const total = checkAmount || 0;
+    const waiver = (bill === null || bill === void 0 ? void 0 : bill.feeWaiver) || 0;
     const finalAmount = total - waiver;
     return /*#__PURE__*/React.createElement(Card, {
       key: index
@@ -9958,15 +9939,9 @@ const MyChallanResult = ({
       onSubmit: () => handleMakePayment(bill === null || bill === void 0 ? void 0 : bill.challanNo)
     })));
   }), (getChallanData === null || getChallanData === void 0 ? void 0 : (_getChallanData$chall3 = getChallanData.challans) === null || _getChallanData$chall3 === void 0 ? void 0 : _getChallanData$chall3.length) === 0 && !loader && /*#__PURE__*/React.createElement("p", {
-    style: {
-      marginLeft: "16px",
-      marginTop: "16px"
-    }
+    className: "challan-load-message"
   }, t("CHB_NO_APPLICATION_FOUND_MSG")), (getChallanData === null || getChallanData === void 0 ? void 0 : (_getChallanData$chall4 = getChallanData.challans) === null || _getChallanData$chall4 === void 0 ? void 0 : _getChallanData$chall4.length) !== 0 && (getChallanData === null || getChallanData === void 0 ? void 0 : getChallanData.totalCount) > t1 && /*#__PURE__*/React.createElement("div", {
-    style: {
-      marginLeft: "16px",
-      marginTop: "16px"
-    }
+    className: "challan-load-message"
   }, /*#__PURE__*/React.createElement("span", {
     className: "link",
     style: {
@@ -10032,6 +10007,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";
@@ -10041,7 +10017,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(", ") : "";
@@ -10153,7 +10130,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 {
@@ -10228,6 +10207,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"
@@ -10295,13 +10277,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"
@@ -10323,9 +10305,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"
@@ -10333,9 +10319,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"
@@ -10399,10 +10385,7 @@ function ChallanDocument({
   }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "document-grid"
   }, (data === null || data === void 0 ? void 0 : data.pdfFiles) && /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: "flex",
-      flexWrap: "wrap"
-    }
+    className: "challan-doc-modal"
   }, documents === null || documents === void 0 ? void 0 : documents.map((document, index) => {
     let documentLink = pdfDownloadLink(data.pdfFiles, document === null || document === void 0 ? void 0 : document.fileStoreId);
     return /*#__PURE__*/React.createElement("a", {
@@ -10596,25 +10579,19 @@ const ChallanApplicationDetails = () => {
       }
     });
   }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-    className: "cardHeaderWithOptions",
-    style: {
-      marginRight: "auto",
-      maxWidth: "960px"
-    }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "challan-application-details"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "cardHeaderWithOptions"
   }, /*#__PURE__*/React.createElement(Header, {
-    styles: {
-      fontSize: "32px"
-    }
+    className: "challan-custom-header-font"
   }, t("CHALLAN_DETAILS")), dowloadOptions && dowloadOptions.length > 0 && /*#__PURE__*/React.createElement(MultiLink, {
     className: "multilinkWrapper",
     onHeadClick: () => setShowOptions(!showOptions),
     displayOptions: showOptions,
     options: dowloadOptions
   })), /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(CardSubHeader, {
-    style: {
-      fontSize: "24px"
-    }
+    className: "challan-custom-subheader-font"
   }, t("CHALLAN_OFFENDER_DETAILS")), /*#__PURE__*/React.createElement(StatusTable, null, /*#__PURE__*/React.createElement(Row, {
     className: "border-none",
     label: t("CORE_COMMON_NAME"),
@@ -10628,9 +10605,7 @@ const ChallanApplicationDetails = () => {
     label: t("NDC_ADDRESS"),
     text: (getChallanData === null || getChallanData === void 0 ? void 0 : (_getChallanData$addre = getChallanData.address) === null || _getChallanData$addre === void 0 ? void 0 : _getChallanData$addre.addressLine1) || t("CS_NA")
   })), /*#__PURE__*/React.createElement(CardSubHeader, {
-    style: {
-      fontSize: "24px"
-    }
+    className: "challan-custom-subheader-font"
   }, t("CHALLAN_DETAILS")), /*#__PURE__*/React.createElement(StatusTable, null, /*#__PURE__*/React.createElement(Row, {
     className: "border-none",
     label: t("CHALLAN_NUMBER"),
@@ -10656,28 +10631,16 @@ const ChallanApplicationDetails = () => {
     label: t("FEE_WAIVER_AMOUNT"),
     text: getChallanData === null || getChallanData === void 0 ? void 0 : getChallanData.feeWaiver
   })), /*#__PURE__*/React.createElement(CardSubHeader, {
-    style: {
-      fontSize: "24px",
-      marginTop: "30px"
-    }
+    className: "challan-custom-subheader-font"
   }, t("CS_COMMON_DOCUMENTS")), /*#__PURE__*/React.createElement(StatusTable, null, /*#__PURE__*/React.createElement(Card, {
-    style: {
-      display: "flex",
-      flexDirection: "row",
-      gap: "30px"
-    }
+    className: "challan-custom-card"
   }, (getChallanData === null || getChallanData === void 0 ? void 0 : (_getChallanData$docum = getChallanData.documents) === null || _getChallanData$docum === void 0 ? void 0 : _getChallanData$docum.length) > 0 ? getChallanData === null || getChallanData === void 0 ? void 0 : (_getChallanData$docum2 = getChallanData.documents) === null || _getChallanData$docum2 === void 0 ? void 0 : _getChallanData$docum2.map((doc, index) => /*#__PURE__*/React.createElement(React.Fragment, {
     key: index
   }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ChallanDocument, {
     value: getChallanData === null || getChallanData === void 0 ? void 0 : getChallanData.documents,
     Code: doc === null || doc === void 0 ? void 0 : doc.documentType,
     index: index
-  }), /*#__PURE__*/React.createElement(CardSectionHeader, {
-    style: {
-      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(NewApplicationTimeline, {
+  }), /*#__PURE__*/React.createElement(CardSectionHeader, null, 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, {
@@ -11048,14 +11011,8 @@ const ChallanSearchResults = ({
     };
   });
   return /*#__PURE__*/React.createElement("div", {
-    style: {
-      marginTop: "16px"
-    }
-  }, /*#__PURE__*/React.createElement("div", null, header && /*#__PURE__*/React.createElement(Header, {
-    style: {
-      marginLeft: "8px"
-    }
-  }, t(header), " (", searchResults === null || searchResults === void 0 ? void 0 : searchResults.length, ")"), /*#__PURE__*/React.createElement(ResponseComposer, {
+    className: "mychallan-custom"
+  }, /*#__PURE__*/React.createElement("div", null, header && /*#__PURE__*/React.createElement(Header, null, t(header), " (", searchResults === null || searchResults === void 0 ? void 0 : searchResults.length, ")"), /*#__PURE__*/React.createElement(ResponseComposer, {
     data: searchResults,
     template: template,
     actionButtonLabel: actionButtonLabel,
@@ -12641,24 +12598,11 @@ const InboxLinks = ({
   }, /*#__PURE__*/React.createElement("span", {
     className: "logo"
   }, /*#__PURE__*/React.createElement(PTIcon, null)), " ", /*#__PURE__*/React.createElement("span", {
-    style: {
-      fontSize: "18px",
-      paddingLeft: "0"
-    },
     className: "text"
   }, t("ACTION_TEST_CHALLANGENERATION")));
   return /*#__PURE__*/React.createElement(Card, {
-    style: {
-      paddingRight: 0,
-      marginTop: 0
-    },
     className: "employeeCard filter inboxLinks"
   }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center"
-    },
     className: "complaint-links-container"
   }, GetLogo(), /*#__PURE__*/React.createElement("div", {
     className: "body"
@@ -12906,8 +12850,8 @@ const DesktopInbox = ({
       row
     }) => {
       var _row$original5, _row$original6;
-      const total = ((_row$original5 = row.original) === null || _row$original5 === void 0 ? void 0 : _row$original5.totalAmount) ?? 0;
-      const waiver = ((_row$original6 = row.original) === null || _row$original6 === void 0 ? void 0 : _row$original6.feeWaiver) ?? 0;
+      const total = ((_row$original5 = row.original) === null || _row$original5 === void 0 ? void 0 : _row$original5.totalAmount) || 0;
+      const waiver = ((_row$original6 = row.original) === null || _row$original6 === void 0 ? void 0 : _row$original6.feeWaiver) || 0;
       const finalAmount = total - waiver;
       return GetCell(finalAmount);
     },
@@ -12950,15 +12894,11 @@ const DesktopInbox = ({
       t: t,
       data: data,
       columns: inboxColumns(),
+      className: "challan-desktop-applicationtable",
       getCellProps: cellInfo => {
         return {
           style: {
-            minWidth: cellInfo.column.Header === t("ES_INBOX_APPLICATION_NO") ? "240px" : "",
-            padding: "20px 18px",
-            fontSize: "16px",
-            wordBreak: "break-word",
-            overflowWrap: "break-word",
-            width: "250px"
+            minWidth: cellInfo.column.Header === t("ES_INBOX_APPLICATION_NO") ? "240px" : ""
           }
         };
       },
@@ -13240,8 +13180,8 @@ const MobileInbox = ({
       row
     }) => {
       var _row$original3, _row$original4;
-      const total = ((_row$original3 = row.original) === null || _row$original3 === void 0 ? void 0 : _row$original3.totalAmount) ?? 0;
-      const waiver = ((_row$original4 = row.original) === null || _row$original4 === void 0 ? void 0 : _row$original4.feeWaiver) ?? 0;
+      const total = ((_row$original3 = row.original) === null || _row$original3 === void 0 ? void 0 : _row$original3.totalAmount) || 0;
+      const waiver = ((_row$original4 = row.original) === null || _row$original4 === void 0 ? void 0 : _row$original4.feeWaiver) || 0;
       const finalAmount = total - waiver;
       return GetCell(finalAmount);
     },
@@ -13519,7 +13459,7 @@ const ModalConfig = ({
           }
         }, " ", finalAmount), " "))
       }, {
-        label: t("TL_APPROVAL_CHECKLIST_BUTTON_UP_FILE"),
+        label: `${t("TL_APPROVAL_CHECKLIST_BUTTON_UP_FILE")} *`,
         populators: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(UploadFile, {
           id: "workflow-doc",
           onUpload: selectFile,
@@ -13705,7 +13645,6 @@ const ChallanApplicationDetails$1 = () => {
       setChallanData(responseData === null || responseData === void 0 ? void 0 : (_responseData$challan = responseData.challans) === null || _responseData$challan === void 0 ? void 0 : _responseData$challan[0]);
       setLoader(false);
     } catch (error) {
-      console.log("error", error);
       setLoader(false);
     }
   };
@@ -13774,7 +13713,6 @@ const ChallanApplicationDetails$1 = () => {
         }
       });
       const location = await getLocationName(applicationDetails === null || applicationDetails === void 0 ? void 0 : (_applicationDetails$c = applicationDetails.challans) === null || _applicationDetails$c === void 0 ? void 0 : (_applicationDetails$c2 = _applicationDetails$c[0]) === null || _applicationDetails$c2 === void 0 ? void 0 : (_applicationDetails$c3 = _applicationDetails$c2.additionalDetail) === null || _applicationDetails$c3 === void 0 ? void 0 : _applicationDetails$c3.latitude, applicationDetails === null || applicationDetails === void 0 ? void 0 : (_applicationDetails$c4 = applicationDetails.challans) === null || _applicationDetails$c4 === void 0 ? void 0 : (_applicationDetails$c5 = _applicationDetails$c4[0]) === null || _applicationDetails$c5 === void 0 ? void 0 : (_applicationDetails$c6 = _applicationDetails$c5.additionalDetail) === null || _applicationDetails$c6 === void 0 ? void 0 : _applicationDetails$c6.longitude);
-      console.log("location", location);
       const challan = {
         ...applicationDetails,
         ...challanEmpData
@@ -13857,7 +13795,6 @@ const ChallanApplicationDetails$1 = () => {
     });
   }
   function onActionSelect(action) {
-    console.log("action", action);
     if (action.action == "PAY") {
       const code = getChallanData === null || getChallanData === void 0 ? void 0 : getChallanData.challanNo;
       history.push(`/digit-ui/employee/payment/collect/Challan_Generation/${code}/${tenantId}?tenantId=${tenantId}`);
@@ -13870,7 +13807,6 @@ const ChallanApplicationDetails$1 = () => {
   }
   const payLater = async () => {
     setLoader(true);
-    console.log("pay later", getChallanData);
     const payload = {
       Challan: {
         ...getChallanData,
@@ -13894,67 +13830,63 @@ const ChallanApplicationDetails$1 = () => {
     }
   };
   const submitAction = async modalData => {
-    console.log("modalData", modalData);
+    var _getChallanData$amoun, _getChallanData$amoun2;
     if (!(modalData !== null && modalData !== void 0 && modalData.amount)) {
       setErrorOne(`Please Enter Amount`);
       setShowErrorToastt(true);
+      return;
+    }
+    if (!(modalData !== null && modalData !== void 0 && modalData.wfDocuments) || (modalData === null || modalData === void 0 ? void 0 : modalData.wfDocuments.length) === 0) {
+      setErrorOne(`Please upload required document`);
+      setShowErrorToastt(true);
+      return;
+    }
+    const finalAmount = Math.max((getChallanData === null || getChallanData === void 0 ? void 0 : (_getChallanData$amoun = getChallanData.amount) === null || _getChallanData$amoun === void 0 ? void 0 : (_getChallanData$amoun2 = _getChallanData$amoun[0]) === null || _getChallanData$amoun2 === void 0 ? void 0 : _getChallanData$amoun2.amount) || 0, (getChallanData === null || getChallanData === void 0 ? void 0 : getChallanData.challanAmount) || 0);
+    if ((modalData === null || modalData === void 0 ? void 0 : modalData.amount) > finalAmount) {
+      setErrorOne(`Amount must be less than or equal to ${finalAmount}`);
+      setShowErrorToastt(true);
+      setError(`Amount must be less than or equal to ${finalAmount}`);
     } else {
-      var _getChallanData$amoun, _getChallanData$amoun2;
-      const finalAmount = Math.max((getChallanData === null || getChallanData === void 0 ? void 0 : (_getChallanData$amoun = getChallanData.amount) === null || _getChallanData$amoun === void 0 ? void 0 : (_getChallanData$amoun2 = _getChallanData$amoun[0]) === null || _getChallanData$amoun2 === void 0 ? void 0 : _getChallanData$amoun2.amount) || 0, (getChallanData === null || getChallanData === void 0 ? void 0 : getChallanData.challanAmount) || 0);
-      if ((modalData === null || modalData === void 0 ? void 0 : modalData.amount) > finalAmount) {
-        setErrorOne(`Amount must be less than or equal to ${finalAmount}`);
-        setShowErrorToastt(true);
-        setError(`Amount must be less than or equal to ${finalAmount}`);
-      } else {
-        console.log("nothing");
-        setLoader(true);
-        const payload = {
-          Challan: {
-            ...getChallanData,
-            workflow: {
-              action: "SETTLED",
-              documents: modalData === null || modalData === void 0 ? void 0 : modalData.wfDocuments
-            },
-            feeWaiver: modalData === null || modalData === void 0 ? void 0 : modalData.amount
-          }
-        };
-        console.log("payload", payload);
-        try {
-          const response = await Digit.ChallanGenerationService.update(payload);
-          setLoader(false);
-          setShowModal(false);
-          setLable("Challan is Settled");
-          setError(false);
-          setShowToast(true);
-          setTimeout(() => {
-            history.push("/digit-ui/employee/challangeneration/inbox");
-            window.location.reload();
-          }, 2000);
-        } catch (error) {
-          setLoader(false);
+      setLoader(true);
+      const payload = {
+        Challan: {
+          ...getChallanData,
+          workflow: {
+            action: "SETTLED",
+            documents: modalData === null || modalData === void 0 ? void 0 : modalData.wfDocuments
+          },
+          feeWaiver: modalData === null || modalData === void 0 ? void 0 : modalData.amount
         }
+      };
+      try {
+        const response = await Digit.ChallanGenerationService.update(payload);
+        setLoader(false);
+        setShowModal(false);
+        setLable("Challan is Settled");
+        setError(false);
+        setShowToast(true);
+        setTimeout(() => {
+          history.push("/digit-ui/employee/challangeneration/inbox");
+          window.location.reload();
+        }, 2000);
+      } catch (error) {
+        setLoader(false);
       }
     }
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-    className: "cardHeaderWithOptions",
-    style: {
-      marginRight: "auto",
-      maxWidth: "960px"
-    }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "challan-application-details"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "cardHeaderWithOptions"
   }, /*#__PURE__*/React.createElement(Header, {
-    styles: {
-      fontSize: "32px"
-    }
+    className: "challan-custom-header-font"
   }, t("CHALLAN_DETAILS")), dowloadOptions && dowloadOptions.length > 0 && /*#__PURE__*/React.createElement(MultiLink, {
     className: "multilinkWrapper",
     onHeadClick: () => setShowOptions(!showOptions),
     displayOptions: showOptions,
     options: dowloadOptions
   })), /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(CardSubHeader, {
-    style: {
-      fontSize: "24px"
-    }
+    className: "challan-custom-subheader-font"
   }, t("CHALLAN_OFFENDER_DETAILS")), /*#__PURE__*/React.createElement(StatusTable, null, /*#__PURE__*/React.createElement(Row, {
     className: "border-none",
     label: t("CORE_COMMON_NAME"),
@@ -13968,9 +13900,7 @@ const ChallanApplicationDetails$1 = () => {
     label: t("NDC_ADDRESS"),
     text: (getChallanData === null || getChallanData === void 0 ? void 0 : (_getChallanData$addre = getChallanData.address) === null || _getChallanData$addre === void 0 ? void 0 : _getChallanData$addre.addressLine1) || t("CS_NA")
   })), /*#__PURE__*/React.createElement(CardSubHeader, {
-    style: {
-      fontSize: "24px"
-    }
+    className: "challan-custom-subheader-font"
   }, t("CHALLAN_DETAILS")), /*#__PURE__*/React.createElement(StatusTable, null, /*#__PURE__*/React.createElement(Row, {
     className: "border-none",
     label: t("CHALLAN_NUMBER"),
@@ -13996,28 +13926,16 @@ const ChallanApplicationDetails$1 = () => {
     label: t("FEE_WAIVER_AMOUNT"),
     text: getChallanData === null || getChallanData === void 0 ? void 0 : getChallanData.feeWaiver
   })), /*#__PURE__*/React.createElement(CardSubHeader, {
-    style: {
-      fontSize: "24px",
-      marginTop: "30px"
-    }
+    className: "challan-custom-header"
   }, t("CS_COMMON_DOCUMENTS")), /*#__PURE__*/React.createElement(StatusTable, null, /*#__PURE__*/React.createElement(Card, {
-    style: {
-      display: "flex",
-      flexDirection: "row",
-      gap: "30px"
-    }
+    className: "challan-custom-card"
   }, (getChallanData === null || getChallanData === void 0 ? void 0 : (_getChallanData$docum = getChallanData.documents) === null || _getChallanData$docum === void 0 ? void 0 : _getChallanData$docum.length) > 0 ? getChallanData === null || getChallanData === void 0 ? void 0 : (_getChallanData$docum2 = getChallanData.documents) === null || _getChallanData$docum2 === void 0 ? void 0 : _getChallanData$docum2.map((doc, index) => /*#__PURE__*/React.createElement(React.Fragment, {
     key: index
   }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ChallanDocument, {
     value: getChallanData === null || getChallanData === void 0 ? void 0 : getChallanData.documents,
     Code: doc === null || doc === void 0 ? void 0 : doc.documentType,
     index: index
-  }), /*#__PURE__*/React.createElement(CardSectionHeader, {
-    style: {
-      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(NewApplicationTimeline, {
+  }), /*#__PURE__*/React.createElement(CardSectionHeader, null, 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
   }), actions && actions.length > 0 && !actions.some(a => a.action === "SUBMIT") && /*#__PURE__*/React.createElement(ActionBar, null, displayMenu && (workflowDetails !== null && workflowDetails !== void 0 && (_workflowDetails$data1 = workflowDetails.data) !== null && _workflowDetails$data1 !== void 0 && (_workflowDetails$data10 = _workflowDetails$data1.actionState) !== null && _workflowDetails$data10 !== void 0 && _workflowDetails$data10.nextActions || workflowDetails !== null && workflowDetails !== void 0 && (_workflowDetails$data11 = workflowDetails.data) !== null && _workflowDetails$data11 !== void 0 && _workflowDetails$data11.nextActions) ? /*#__PURE__*/React.createElement(Menu, {
@@ -14124,10 +14042,7 @@ const EmployeeApp = ({
     }
   }, /*#__PURE__*/React.createElement(Link, {
     to: "/digit-ui/employee",
-    style: {
-      cursor: "pointer",
-      color: "#666"
-    }
+    className: "challan-link-href"
   }, t("ES_COMMON_HOME")), " ", "/ ", /*#__PURE__*/React.createElement("span", null, t("CHALLAN_MODULE"))), /*#__PURE__*/React.createElement(PrivateRoute, {
     exact: true,
     path: `${path}/`,
@@ -14262,12 +14177,7 @@ const FormComposer = forwardRef((props, ref) => {
         }, fieldSelector(field.type, field.populators))) : /*#__PURE__*/React.createElement("div", {
           className: "field"
         }, fieldSelector(field.type, field.populators)), props.errors[field.populators.name] && ((_field$populators = field.populators) !== null && _field$populators !== void 0 && _field$populators.validate ? errors[field.populators.validate] : true) && /*#__PURE__*/React.createElement(CardLabelError, {
-          style: {
-            width: "70%",
-            marginLeft: "30%",
-            fontSize: "12px",
-            marginTop: "-21px"
-          }
+          className: "card-label-error-challan"
         }, field.populators.error));
       }), array.length - 1 === index ? null : /*#__PURE__*/React.createElement(BreakLine, null));
     });
@@ -14633,11 +14543,7 @@ const MCollectAcknowledgement = () => {
   }), /*#__PURE__*/React.createElement("path", {
     d: "M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z"
   })), t("UC_PRINT_CHALLAN_LABEL")) , /*#__PURE__*/React.createElement(ActionBar, {
-    style: {
-      display: "flex",
-      justifyContent: "flex-end",
-      alignItems: "baseline"
-    }
+    className: "challan-emp-acknowledgement"
   }, /*#__PURE__*/React.createElement(Link, {
     to: `/digit-ui/employee`,
     style: {
@@ -14667,11 +14573,7 @@ const MCollectAcknowledgement = () => {
   }), /*#__PURE__*/React.createElement("path", {
     d: "M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z"
   })), t("UC_PRINT_CHALLAN_LABEL")) , /*#__PURE__*/React.createElement(ActionBar, {
-    style: {
-      display: "flex",
-      justifyContent: "flex-end",
-      alignItems: "baseline"
-    }
+    className: "challan-emp-acknowledgement"
   }, /*#__PURE__*/React.createElement(Link, {
     to: `/digit-ui/employee`,
     style: {
@@ -14842,52 +14744,8 @@ const SearchReceipt = () => {
       return GetCell(row === null || row === void 0 ? void 0 : (_row$paymentDetails5 = row.paymentDetails) === null || _row$paymentDetails5 === void 0 ? void 0 : (_row$paymentDetails5$ = _row$paymentDetails5[0]) === null || _row$paymentDetails5$ === void 0 ? void 0 : (_row$paymentDetails5$2 = _row$paymentDetails5$.bill) === null || _row$paymentDetails5$2 === void 0 ? void 0 : _row$paymentDetails5$2.totalAmount);
     }
   }], []);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("style", null, `
-          .formWrapperNDC {
-            // padding: 20px;
-            // background: #fff;
-            // border-radius: 10px;
-            max-width: 1200px;
-            // margin: auto;
-            // box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-          }
-          .ndcFormCard {
-            display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            gap: 20px;
-          }
-          .surveydetailsform-wrapper {
-            display: flex;
-            flex-direction: column;
-            width: 100%;
-          }
-          .surveydetailsform-wrapper p {
-            color: red;
-            font-size: 14px;
-          }
-         .citizen-card-input{
-            margin-bottom: 0 !important;
-         }
-          @media (max-width: 1024px) {
-            .ndcFormCard {
-              grid-template-columns: repeat(2, 1fr);
-            }
-          }
-          @media (max-width: 768px) {
-            .ndcFormCard {
-              grid-template-columns: 1fr;
-            }
-          }
-        `), /*#__PURE__*/React.createElement("div", {
-    className: "employee-application-details",
-    style: {
-      marginBottom: "15px"
-    }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "employee-application-details"
   }, /*#__PURE__*/React.createElement(Header, null, "Search Receipts")), /*#__PURE__*/React.createElement("div", {
     className: "card"
   }, /*#__PURE__*/React.createElement(FormProvider, methods, /*#__PURE__*/React.createElement("form", {
@@ -14905,15 +14763,11 @@ const SearchReceipt = () => {
       }
     })
   }), errors.receiptNumbers && /*#__PURE__*/React.createElement("p", {
-    style: {
-      color: "red"
-    }
+    className: "requiredField"
   }, errors.receiptNumbers.message)), /*#__PURE__*/React.createElement("div", {
     className: "surveydetailsform-wrapper"
   }, /*#__PURE__*/React.createElement("label", null, "Service Type ", /*#__PURE__*/React.createElement("span", {
-    style: {
-      color: "red"
-    }
+    className: "requiredField"
   }, "*")), /*#__PURE__*/React.createElement(Controller, {
     control: control,
     rules: {
@@ -14931,9 +14785,7 @@ const SearchReceipt = () => {
       selected: props.value
     })
   }), errors.businessServices && /*#__PURE__*/React.createElement("p", {
-    style: {
-      color: "red"
-    }
+    className: "requiredField"
   }, errors.businessServices.message)), /*#__PURE__*/React.createElement("div", {
     className: "surveydetailsform-wrapper"
   }, /*#__PURE__*/React.createElement("label", null, "Consumer code"), /*#__PURE__*/React.createElement(TextInput, {
@@ -14945,9 +14797,7 @@ const SearchReceipt = () => {
       }
     })
   }), errors.consumerCodes && /*#__PURE__*/React.createElement("p", {
-    style: {
-      color: "red"
-    }
+    className: "requiredField"
   }, errors.consumerCodes.message)), /*#__PURE__*/React.createElement("div", {
     className: "surveydetailsform-wrapper"
   }, /*#__PURE__*/React.createElement("label", null, "Mobile No"), /*#__PURE__*/React.createElement("div", {
@@ -14975,9 +14825,7 @@ const SearchReceipt = () => {
       }
     })
   }), errors.mobileNumber && /*#__PURE__*/React.createElement("p", {
-    style: {
-      color: "red"
-    }
+    className: "requiredField"
   }, errors.mobileNumber.message)))), /*#__PURE__*/React.createElement(SubmitBar, {
     label: "Search",
     submit: "submit"
@@ -15138,52 +14986,8 @@ const SearchChallan$2 = props => {
       }, formattedStatus);
     }
   }], []);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("style", null, `
-          .formWrapperNDC {
-            // padding: 20px;
-            // background: #fff;
-            // border-radius: 10px;
-            max-width: 1200px;
-            // margin: auto;
-            // box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-          }
-          .ndcFormCard {
-            display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            gap: 20px;
-          }
-          .surveydetailsform-wrapper {
-            display: flex;
-            flex-direction: column;
-            width: 100%;
-          }
-          .surveydetailsform-wrapper p {
-            color: red;
-            font-size: 14px;
-          }
-          .citizen-card-input{
-            margin-bottom: 0 !important;
-         }
-          @media (max-width: 1024px) {
-            .ndcFormCard {
-              grid-template-columns: repeat(2, 1fr);
-            }
-          }
-          @media (max-width: 768px) {
-            .ndcFormCard {
-              grid-template-columns: 1fr;
-            }
-          }
-        `), /*#__PURE__*/React.createElement("div", {
-    className: "employee-application-details",
-    style: {
-      marginBottom: "15px"
-    }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "employee-application-details"
   }, /*#__PURE__*/React.createElement(Header, null, "Search Challan")), /*#__PURE__*/React.createElement("div", {
     className: "card"
   }, /*#__PURE__*/React.createElement(FormProvider, methods, /*#__PURE__*/React.createElement("form", {
@@ -15201,9 +15005,7 @@ const SearchChallan$2 = props => {
       }
     })
   }), errors.challanNo && /*#__PURE__*/React.createElement("p", {
-    style: {
-      color: "red"
-    }
+    className: "requiredField"
   }, errors.challanNo.message)), /*#__PURE__*/React.createElement("div", {
     className: "surveydetailsform-wrapper"
   }, /*#__PURE__*/React.createElement("label", null, "Service Type"), /*#__PURE__*/React.createElement(Controller, {
@@ -15220,9 +15022,7 @@ const SearchChallan$2 = props => {
       selected: props.value
     })
   }), errors.businessService && /*#__PURE__*/React.createElement("p", {
-    style: {
-      color: "red"
-    }
+    className: "requiredField"
   }, errors.businessService.message)), /*#__PURE__*/React.createElement("div", {
     className: "surveydetailsform-wrapper"
   }, /*#__PURE__*/React.createElement("label", null, "Mobile No"), /*#__PURE__*/React.createElement("div", {
@@ -15250,19 +15050,12 @@ const SearchChallan$2 = props => {
       }
     })
   }), errors.mobileNumber && /*#__PURE__*/React.createElement("p", {
-    style: {
-      color: "red"
-    }
+    className: "requiredField"
   }, errors.mobileNumber.message)))), /*#__PURE__*/React.createElement(SubmitBar, {
     label: "Search",
     submit: "submit"
   }))), (tableData === null || tableData === void 0 ? void 0 : tableData.length) > 0 && /*#__PURE__*/React.createElement("div", {
-    style: {
-      backgroundColor: "white",
-      marginRight: "200px",
-      marginLeft: "2.5%",
-      width: "100%"
-    }
+    className: "challan-search-table"
   }, /*#__PURE__*/React.createElement(Table, {
     t: t,
     data: tableData,
@@ -15563,22 +15356,13 @@ function PTRSelectDocument({
   }, [isHidden]);
   console.log("doc===", doc);
   return /*#__PURE__*/React.createElement("div", {
-    style: {
-      marginBottom: "24px"
-    }
+    className: "challan-documents"
   }, /*#__PURE__*/React.createElement(LabelFieldPair, {
-    style: {
-      display: "inline"
-    }
+    className: "challan-label-field"
   }, /*#__PURE__*/React.createElement(CardLabel, {
-    style: {
-      marginBottom: "8px",
-      width: "auto"
-    }
+    className: "challan-card-label"
   }, t(doc === null || doc === void 0 ? void 0 : doc.code), " ", /*#__PURE__*/React.createElement("span", {
-    style: {
-      color: "red"
-    }
+    className: "requiredField"
   }, " ", (doc === null || doc === void 0 ? void 0 : doc.required) && " *")), /*#__PURE__*/React.createElement("div", {
     className: "field",
     style: {
@@ -15601,26 +15385,13 @@ function PTRSelectDocument({
     buttonType: "button",
     error: !uploadedFile
   }), console.log("documents", documents), (doc === null || doc === void 0 ? void 0 : doc.code) == "CHALLAN.EVIDENCE_IMAGE" && /*#__PURE__*/React.createElement("span", {
-    style: {
-      color: "green",
-      fontSize: "14px"
-    }
+    className: "challan-note-green"
   }, /*#__PURE__*/React.createElement("span", {
-    style: {
-      color: "red",
-      paddingRight: "3px"
-    }
+    className: "challan-note-red"
   }, "Note:"), "Please upload a picture **clicked with location enabled**."), (doc === null || doc === void 0 ? void 0 : doc.code) == "CHALLAN.EVIDENCE_IMAGE" && (documents === null || documents === void 0 ? void 0 : (_documents$filter = documents.filter(item => item.documentType == "CHALLAN.EVIDENCE_IMAGE")) === null || _documents$filter === void 0 ? void 0 : _documents$filter.map((item, index) => /*#__PURE__*/React.createElement("div", {
-    key: index,
-    style: {
-      marginTop: "10px"
-    }
+    key: index
   }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      marginTop: "5px",
-      fontSize: "14px",
-      color: "#333"
-    }
+    className: "challan-lat-long"
   }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("b", null, "Latitude:"), " ", item.latitude), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("b", null, "Longitude:"), " ", item.longitude))))))), getLoading && /*#__PURE__*/React.createElement(Loader, {
     page: true
   }));
@@ -15637,6 +15408,7 @@ const ChallanStepperForm = () => {
   const [error, setError] = useState(null);
   const [documentsData, setDocumentsData] = useState({});
   const isCitizen = window.location.href.includes("citizen");
+  const [getViolationData, setViolationData] = useState([]);
   const handleDocumentsSelect = (key, data) => {
     setDocumentsData(data);
   };
@@ -15671,6 +15443,12 @@ const ChallanStepperForm = () => {
   } = Digit.Hooks.useCustomMDMS(tenantId, "Challan", [{
     name: "Documents"
   }]);
+  const {
+    data: OffenceActData,
+    isLoading: OffenceActLoading
+  } = Digit.Hooks.useCustomMDMS(tenantId, "Challan", [{
+    name: "Acts"
+  }]);
   const {
     control,
     handleSubmit,
@@ -15686,9 +15464,17 @@ const ChallanStepperForm = () => {
       shouldUnregister: false
     }
   });
+  const getActs = (offenceType, offenceActData) => {
+    var _offenceType$acts, _offenceType$acts$map, _offenceType$acts$map2;
+    return (offenceType === null || offenceType === void 0 ? void 0 : (_offenceType$acts = offenceType.acts) === null || _offenceType$acts === void 0 ? void 0 : (_offenceType$acts$map = _offenceType$acts.map(code => {
+      var _offenceActData$Chall, _offenceActData$Chall2, _offenceActData$Chall3;
+      return offenceActData === null || offenceActData === void 0 ? void 0 : (_offenceActData$Chall = offenceActData.Challan) === null || _offenceActData$Chall === void 0 ? void 0 : (_offenceActData$Chall2 = _offenceActData$Chall.Acts) === null || _offenceActData$Chall2 === void 0 ? void 0 : (_offenceActData$Chall3 = _offenceActData$Chall2.find(a => (a === null || a === void 0 ? void 0 : a.code) === code)) === null || _offenceActData$Chall3 === void 0 ? void 0 : _offenceActData$Chall3.name;
+    })) === null || _offenceType$acts$map === void 0 ? void 0 : (_offenceType$acts$map2 = _offenceType$acts$map.filter(Boolean)) === null || _offenceType$acts$map2 === void 0 ? void 0 : _offenceType$acts$map2.join(", ")) || "";
+  };
   const onSubmit = async data => {
     var _docData$Challan, _docData$Challan$Docu, _data$offenceType, _data$offenceCategory, _data$offenceSubCateg, _documentsData$docume2, _documentsData$docume3, _documentsData$docume4, _documentsData$docume5;
     let missingDocs = [];
+    const actString = getActs(data === null || data === void 0 ? void 0 : data.offenceType, OffenceActData);
     docData === null || docData === void 0 ? void 0 : (_docData$Challan = docData.Challan) === null || _docData$Challan === void 0 ? void 0 : (_docData$Challan$Docu = _docData$Challan.Documents) === null || _docData$Challan$Docu === void 0 ? void 0 : _docData$Challan$Docu.forEach(doc => {
       if (doc.required) {
         var _documentsData$docume;
@@ -15722,7 +15508,8 @@ const ChallanStepperForm = () => {
       }],
       additionalDetail: {
         latitude: documentsData === null || documentsData === void 0 ? void 0 : (_documentsData$docume2 = documentsData.documents) === null || _documentsData$docume2 === void 0 ? void 0 : (_documentsData$docume3 = _documentsData$docume2[1]) === null || _documentsData$docume3 === void 0 ? void 0 : _documentsData$docume3.latitude,
-        longitude: documentsData === null || documentsData === void 0 ? void 0 : (_documentsData$docume4 = documentsData.documents) === null || _documentsData$docume4 === void 0 ? void 0 : (_documentsData$docume5 = _documentsData$docume4[1]) === null || _documentsData$docume5 === void 0 ? void 0 : _documentsData$docume5.longitude
+        longitude: documentsData === null || documentsData === void 0 ? void 0 : (_documentsData$docume4 = documentsData.documents) === null || _documentsData$docume4 === void 0 ? void 0 : (_documentsData$docume5 = _documentsData$docume4[1]) === null || _documentsData$docume5 === void 0 ? void 0 : _documentsData$docume5.longitude,
+        offenceActs: actString
       },
       documents: documentsData === null || documentsData === void 0 ? void 0 : documentsData.documents,
       workflow: {
@@ -15765,48 +15552,25 @@ const ChallanStepperForm = () => {
     const filterRates = OffenceRates === null || OffenceRates === void 0 ? void 0 : (_OffenceRates$Challan = OffenceRates.Challan) === null || _OffenceRates$Challan === void 0 ? void 0 : (_OffenceRates$Challan2 = _OffenceRates$Challan.Rates) === null || _OffenceRates$Challan2 === void 0 ? void 0 : _OffenceRates$Challan2.filter(item => (item === null || item === void 0 ? void 0 : item.offenceTypeId) == (val === null || val === void 0 ? void 0 : val.id));
     setValue("amount", filterRates === null || filterRates === void 0 ? void 0 : (_filterRates$ = filterRates[0]) === null || _filterRates$ === void 0 ? void 0 : _filterRates$.amount);
   };
+  const handleViolation = e => {
+    var _OffenceTypeData$Chal, _OffenceTypeData$Chal2;
+    const filterData = OffenceTypeData === null || OffenceTypeData === void 0 ? void 0 : (_OffenceTypeData$Chal = OffenceTypeData.Challan) === null || _OffenceTypeData$Chal === void 0 ? void 0 : (_OffenceTypeData$Chal2 = _OffenceTypeData$Chal.OffenceType) === null || _OffenceTypeData$Chal2 === void 0 ? void 0 : _OffenceTypeData$Chal2.filter(item => item.subCategoryId == (e === null || e === void 0 ? void 0 : e.id));
+    setViolationData(filterData);
+  };
   return /*#__PURE__*/React.createElement("div", {
-    className: "card",
-    style: {
-      display: "flex",
-      flexDirection: "column",
-      justifyContent: "center",
-      alignItems: "center",
-      minHeight: "100vh",
-      background: "#f9f9f9"
-    }
+    className: "card custom-challan-card"
   }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      width: "100%",
-      maxWidth: "600px",
-      background: "#fff",
-      padding: "30px",
-      borderRadius: "12px",
-      boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)"
-    }
+    className: "challan-stepper-parent-component"
   }, /*#__PURE__*/React.createElement(CardHeader, {
-    styles: {
-      fontSize: "28px",
-      fontWeight: "400",
-      color: "#1C1D1F"
-    },
     divider: true
   }, t("CREATE_CHALLAN")), /*#__PURE__*/React.createElement("form", {
     onSubmit: handleSubmit(onSubmit)
-  }, /*#__PURE__*/React.createElement(CardLabel, {
-    style: {
-      fontWeight: "bold",
-      paddingBottom: "30px",
-      fontSize: "25px"
-    }
-  }, t("CHALLAN_OFFENDER_DETAILS")), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(CardLabel, null, t("CHALLAN_OFFENDER_DETAILS")), /*#__PURE__*/React.createElement("div", {
     style: {
       width: "100%"
     }
   }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, `${t("NOC_APPLICANT_MOBILE_NO_LABEL")}`, " ", /*#__PURE__*/React.createElement("span", {
-    style: {
-      color: "red"
-    }
+    className: "requiredField"
   }, "*")), /*#__PURE__*/React.createElement(Controller, {
     control: control,
     name: "mobileNumber",
@@ -15832,17 +15596,9 @@ const ChallanStepperForm = () => {
       t: t
     })
   }), (errors === null || errors === void 0 ? void 0 : errors.mobileNumber) && /*#__PURE__*/React.createElement("p", {
-    style: {
-      color: "red"
-    }
-  }, errors.mobileNumber.message)), /*#__PURE__*/React.createElement("div", {
-    style: {
-      marginBottom: "20px"
-    }
-  }, /*#__PURE__*/React.createElement(CardLabel, null, `${t("BPA_BASIC_DETAILS_APPLICATION_NAME_LABEL")}`, " ", /*#__PURE__*/React.createElement("span", {
-    style: {
-      color: "red"
-    }
+    className: "requiredField"
+  }, errors.mobileNumber.message)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, `${t("BPA_BASIC_DETAILS_APPLICATION_NAME_LABEL")}`, " ", /*#__PURE__*/React.createElement("span", {
+    className: "requiredField"
   }, "*")), /*#__PURE__*/React.createElement(Controller, {
     control: control,
     name: "name",
@@ -15856,9 +15612,6 @@ const ChallanStepperForm = () => {
     render: props => {
       var _errors$name;
       return /*#__PURE__*/React.createElement(TextInput, {
-        style: {
-          marginBottom: 0
-        },
         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 => {
@@ -15871,17 +15624,9 @@ const ChallanStepperForm = () => {
       });
     }
   }), (errors === null || errors === void 0 ? void 0 : errors.name) && /*#__PURE__*/React.createElement("p", {
-    style: {
-      color: "red"
-    }
-  }, errors.name.message)), /*#__PURE__*/React.createElement("div", {
-    style: {
-      marginBottom: "20px"
-    }
-  }, /*#__PURE__*/React.createElement(CardLabel, null, `${t("PT_COMMON_COL_ADDRESS")}`, " ", /*#__PURE__*/React.createElement("span", {
-    style: {
-      color: "red"
-    }
+    className: "requiredField"
+  }, errors.name.message)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CardLabel, null, `${t("PT_COMMON_COL_ADDRESS")}`, " ", /*#__PURE__*/React.createElement("span", {
+    className: "requiredField"
   }, "*")), /*#__PURE__*/React.createElement(Controller, {
     control: control,
     name: "address",
@@ -15893,9 +15638,6 @@ const ChallanStepperForm = () => {
       }
     },
     render: props => /*#__PURE__*/React.createElement(TextArea, {
-      style: {
-        marginBottom: 0
-      },
       name: "address",
       value: props.value,
       onChange: e => {
@@ -15907,17 +15649,9 @@ const ChallanStepperForm = () => {
       t: t
     })
   }), (errors === null || errors === void 0 ? void 0 : errors.address) && /*#__PURE__*/React.createElement("p", {
-    style: {
-      color: "red"
-    }
-  }, errors.address.message)), /*#__PURE__*/React.createElement(LabelFieldPair, {
-    style: {
-      marginTop: "20px"
-    }
-  }, /*#__PURE__*/React.createElement(CardLabel, null, t("CHALLAN_OFFENCE_CATEGORY"), " ", /*#__PURE__*/React.createElement("span", {
-    style: {
-      color: "red"
-    }
+    className: "requiredField"
+  }, errors.address.message)), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t("CHALLAN_OFFENCE_CATEGORY"), " ", /*#__PURE__*/React.createElement("span", {
+    className: "requiredField"
   }, "*")), /*#__PURE__*/React.createElement(Controller, {
     control: control,
     name: "offenceCategory",
@@ -15928,10 +15662,6 @@ const ChallanStepperForm = () => {
     render: props => {
       var _categoryData$Challan;
       return /*#__PURE__*/React.createElement(Dropdown, {
-        style: {
-          marginBottom: 0,
-          width: "100%"
-        },
         className: "form-field",
         select: props.onChange,
         selected: props.value,
@@ -15941,17 +15671,9 @@ const ChallanStepperForm = () => {
       });
     }
   }), errors.offenceCategory && /*#__PURE__*/React.createElement("p", {
-    style: {
-      color: "red"
-    }
-  }, errors.offenceCategory.message)), /*#__PURE__*/React.createElement(LabelFieldPair, {
-    style: {
-      marginTop: "20px"
-    }
-  }, /*#__PURE__*/React.createElement(CardLabel, null, t("CHALLAN_OFFENCE_SUB_CATEGORY"), " ", /*#__PURE__*/React.createElement("span", {
-    style: {
-      color: "red"
-    }
+    className: "requiredField"
+  }, errors.offenceCategory.message)), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t("CHALLAN_OFFENCE_SUB_CATEGORY"), " ", /*#__PURE__*/React.createElement("span", {
+    className: "requiredField"
   }, "*")), /*#__PURE__*/React.createElement(Controller, {
     control: control,
     name: "offenceSubCategory",
@@ -15962,12 +15684,9 @@ const ChallanStepperForm = () => {
     render: props => {
       var _subCategoryData$Chal;
       return /*#__PURE__*/React.createElement(Dropdown, {
-        style: {
-          marginBottom: 0,
-          width: "100%"
-        },
         className: "form-field",
         select: e => {
+          handleViolation(e);
           props.onChange(e);
         },
         selected: props.value,
@@ -15977,17 +15696,9 @@ const ChallanStepperForm = () => {
       });
     }
   }), errors.offenceSubCategory && /*#__PURE__*/React.createElement("p", {
-    style: {
-      color: "red"
-    }
-  }, errors.offenceSubCategory.message)), /*#__PURE__*/React.createElement(LabelFieldPair, {
-    style: {
-      marginTop: "20px"
-    }
-  }, /*#__PURE__*/React.createElement(CardLabel, null, t("CHALLAN_TYPE_OFFENCE"), " ", /*#__PURE__*/React.createElement("span", {
-    style: {
-      color: "red"
-    }
+    className: "requiredField"
+  }, errors.offenceSubCategory.message)), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t("CHALLAN_TYPE_OFFENCE"), " ", /*#__PURE__*/React.createElement("span", {
+    className: "requiredField"
   }, "*")), /*#__PURE__*/React.createElement(Controller, {
     control: control,
     name: "offenceType",
@@ -15995,43 +15706,26 @@ const ChallanStepperForm = () => {
     rules: {
       required: t("CHALLAN_TYPE_OFFENCE_REQUIRED")
     },
-    render: props => {
-      var _OffenceTypeData$Chal;
-      return /*#__PURE__*/React.createElement(Dropdown, {
-        style: {
-          marginBottom: 0,
-          width: "100%"
-        },
-        className: "form-field",
-        select: e => {
-          props.onChange(e);
-          handleRates(e);
-        },
-        selected: props.value,
-        option: OffenceTypeData === null || OffenceTypeData === void 0 ? void 0 : (_OffenceTypeData$Chal = OffenceTypeData.Challan) === null || _OffenceTypeData$Chal === void 0 ? void 0 : _OffenceTypeData$Chal.OffenceType,
-        optionKey: "name",
-        t: t
-      });
-    }
+    render: props => /*#__PURE__*/React.createElement(Dropdown, {
+      className: "form-field",
+      select: e => {
+        props.onChange(e);
+        handleRates(e);
+      },
+      selected: props.value,
+      option: getViolationData,
+      optionKey: "name",
+      t: t
+    })
   }), errors.offenceType && /*#__PURE__*/React.createElement("p", {
-    style: {
-      color: "red"
-    }
-  }, errors.offenceType.message)), /*#__PURE__*/React.createElement(LabelFieldPair, {
-    style: {
-      marginTop: "20px"
-    }
-  }, /*#__PURE__*/React.createElement(CardLabel, null, `${t("DEFAULT_CHALLAN_AMOUNT")}`), /*#__PURE__*/React.createElement(Controller, {
+    className: "requiredField"
+  }, errors.offenceType.message)), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, `${t("DEFAULT_CHALLAN_AMOUNT")}`), /*#__PURE__*/React.createElement(Controller, {
     control: control,
     name: "amount",
     render: props => {
       var _errors$name2;
       return /*#__PURE__*/React.createElement(TextInput, {
         type: "number",
-        style: {
-          marginBottom: 0,
-          width: "100%"
-        },
         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,
         disable: true,
@@ -16044,21 +15738,9 @@ const ChallanStepperForm = () => {
         t: t
       });
     }
-  }))), /*#__PURE__*/React.createElement(CardLabel, {
-    style: {
-      fontWeight: "bold",
-      paddingTop: "30px",
-      fontSize: "25px"
-    }
-  }, t("CHALLAN_DOCUMENTS"), " ", /*#__PURE__*/React.createElement("span", {
-    style: {
-      color: "red"
-    }
-  }, "*")), /*#__PURE__*/React.createElement("div", {
-    style: {
-      marginTop: "20px"
-    }
-  }, /*#__PURE__*/React.createElement(ChallanDocuments, {
+  }))), /*#__PURE__*/React.createElement(CardLabel, null, t("CHALLAN_DOCUMENTS"), " ", /*#__PURE__*/React.createElement("span", {
+    className: "requiredField"
+  }, "*")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ChallanDocuments, {
     t: t,
     config: {
       key: "documents"
@@ -16084,7 +15766,7 @@ const ChallanStepperForm = () => {
       setShowToast(null);
     },
     isDleteBtn: "true"
-  }), (OffenceRatesLoading || loader || categoryLoading || subCategoryLoading || OffenceTypeLoading) && /*#__PURE__*/React.createElement(Loader, {
+  }), (OffenceRatesLoading || loader || categoryLoading || subCategoryLoading || OffenceTypeLoading || OffenceActLoading) && /*#__PURE__*/React.createElement(Loader, {
     page: true
   }));
 };
@@ -16128,13 +15810,9 @@ const OffenderDetails = ({
       width: "50%"
     }
   }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      marginBottom: "20px"
-    }
+    className: "challan-bottom-style"
   }, /*#__PURE__*/React.createElement(CardLabel, null, `${t("NOC_APPLICANT_MOBILE_NO_LABEL")}`, " ", /*#__PURE__*/React.createElement("span", {
-    style: {
-      color: "red"
-    }
+    className: "requiredField"
   }, "*")), /*#__PURE__*/React.createElement(Controller, {
     control: control,
     name: "mobileNumber",
@@ -16146,26 +15824,17 @@ const OffenderDetails = ({
       }
     },
     render: props => /*#__PURE__*/React.createElement(MobileNumber, {
-      style: {
-        marginBottom: 0
-      },
       value: props.value,
       onChange: props.onChange,
       onBlur: props.onBlur,
       t: t
     })
   }), (errors === null || errors === void 0 ? void 0 : errors.mobileNumber) && /*#__PURE__*/React.createElement("p", {
-    style: {
-      color: "red"
-    }
+    className: "requiredField"
   }, errors.mobileNumber.message)), /*#__PURE__*/React.createElement("div", {
-    style: {
-      marginBottom: "20px"
-    }
+    className: "challan-bottom-style"
   }, /*#__PURE__*/React.createElement(CardLabel, null, `${t("BPA_BASIC_DETAILS_APPLICATION_NAME_LABEL")}`, " ", /*#__PURE__*/React.createElement("span", {
-    style: {
-      color: "red"
-    }
+    className: "requiredField"
   }, "*")), /*#__PURE__*/React.createElement(Controller, {
     control: control,
     name: "name",
@@ -16179,9 +15848,6 @@ const OffenderDetails = ({
     render: props => {
       var _errors$name;
       return /*#__PURE__*/React.createElement(TextInput, {
-        style: {
-          marginBottom: 0
-        },
         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 => {
@@ -16194,17 +15860,11 @@ const OffenderDetails = ({
       });
     }
   }), (errors === null || errors === void 0 ? void 0 : errors.name) && /*#__PURE__*/React.createElement("p", {
-    style: {
-      color: "red"
-    }
+    className: "requiredField"
   }, errors.name.message)), /*#__PURE__*/React.createElement("div", {
-    style: {
-      marginBottom: "20px"
-    }
+    className: "challan-bottom-style"
   }, /*#__PURE__*/React.createElement(CardLabel, null, `${t("PT_COMMON_COL_ADDRESS")}`, " ", /*#__PURE__*/React.createElement("span", {
-    style: {
-      color: "red"
-    }
+    className: "requiredField"
   }, "*")), /*#__PURE__*/React.createElement(Controller, {
     control: control,
     name: "address",
@@ -16216,9 +15876,6 @@ const OffenderDetails = ({
       }
     },
     render: props => /*#__PURE__*/React.createElement(TextArea, {
-      style: {
-        marginBottom: 0
-      },
       name: "address",
       value: props.value,
       onChange: e => {
@@ -16230,9 +15887,7 @@ const OffenderDetails = ({
       t: t
     })
   }), (errors === null || errors === void 0 ? void 0 : errors.address) && /*#__PURE__*/React.createElement("p", {
-    style: {
-      color: "red"
-    }
+    className: "requiredField"
   }, errors.address.message))), /*#__PURE__*/React.createElement(ActionBar, null, /*#__PURE__*/React.createElement(SubmitBar, {
     className: "submit-bar-back",
     label: "Back",
@@ -16333,9 +15988,7 @@ const OffenceDetails = ({
   }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, {
     className: "card-label-smaller"
   }, t("CHB_PURPOSE_DESCRIPTION"), " ", /*#__PURE__*/React.createElement("span", {
-    style: {
-      color: "red"
-    }
+    className: "requiredField"
   }, "*")), /*#__PURE__*/React.createElement(Controller, {
     control: control,
     name: "offenceType",
@@ -16343,9 +15996,6 @@ const OffenceDetails = ({
     render: props => {
       var _OffenceTypeData$Chal;
       return /*#__PURE__*/React.createElement(Dropdown, {
-        style: {
-          marginBottom: 0
-        },
         className: "form-field",
         select: props.onChange,
         selected: props.value,
@@ -16355,17 +16005,9 @@ const OffenceDetails = ({
       });
     }
   }), errors.offenceType && /*#__PURE__*/React.createElement("p", {
-    style: {
-      color: "red"
-    }
-  }, errors.offenceType.message)), /*#__PURE__*/React.createElement(LabelFieldPair, {
-    style: {
-      marginTop: "20px"
-    }
-  }, /*#__PURE__*/React.createElement(CardLabel, null, t("CHALLAN_OFFENCE_CATEGORY"), " ", /*#__PURE__*/React.createElement("span", {
-    style: {
-      color: "red"
-    }
+    className: "requiredField"
+  }, errors.offenceType.message)), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t("CHALLAN_OFFENCE_CATEGORY"), " ", /*#__PURE__*/React.createElement("span", {
+    className: "requiredField"
   }, "*")), /*#__PURE__*/React.createElement(Controller, {
     control: control,
     name: "offenceCategory",
@@ -16373,9 +16015,6 @@ const OffenceDetails = ({
     render: props => {
       var _categoryData$Challan;
       return /*#__PURE__*/React.createElement(Dropdown, {
-        style: {
-          marginBottom: 0
-        },
         className: "form-field",
         select: props.onChange,
         selected: props.value,
@@ -16385,17 +16024,9 @@ const OffenceDetails = ({
       });
     }
   }), errors.offenceCategory && /*#__PURE__*/React.createElement("p", {
-    style: {
-      color: "red"
-    }
-  }, errors.offenceCategory.message)), /*#__PURE__*/React.createElement(LabelFieldPair, {
-    style: {
-      marginTop: "20px"
-    }
-  }, /*#__PURE__*/React.createElement(CardLabel, null, t("CHALLAN_OFFENCE_SUB_CATEGORY"), " ", /*#__PURE__*/React.createElement("span", {
-    style: {
-      color: "red"
-    }
+    className: "requiredField"
+  }, errors.offenceCategory.message)), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t("CHALLAN_OFFENCE_SUB_CATEGORY"), " ", /*#__PURE__*/React.createElement("span", {
+    className: "requiredField"
   }, "*")), /*#__PURE__*/React.createElement(Controller, {
     control: control,
     name: "offenceSubCategory",
@@ -16403,9 +16034,6 @@ const OffenceDetails = ({
     render: props => {
       var _subCategoryData$Chal;
       return /*#__PURE__*/React.createElement(Dropdown, {
-        style: {
-          marginBottom: 0
-        },
         className: "form-field",
         select: props.onChange,
         selected: props.value,
@@ -16415,27 +16043,17 @@ const OffenceDetails = ({
       });
     }
   }), errors.offenceSubCategory && /*#__PURE__*/React.createElement("p", {
-    style: {
-      color: "red"
-    }
+    className: "requiredField"
   }, errors.offenceSubCategory.message)), /*#__PURE__*/React.createElement(LabelFieldPair, {
-    style: {
-      width: "50%",
-      marginTop: "20px"
-    }
+    className: "challan-amount-field"
   }, /*#__PURE__*/React.createElement(CardLabel, null, `${t("CHALLAN_AMOUNT")}`, " ", /*#__PURE__*/React.createElement("span", {
-    style: {
-      color: "red"
-    }
+    className: "requiredField"
   }, "*")), /*#__PURE__*/React.createElement(Controller, {
     control: control,
     name: "challanAmount",
     render: props => {
       var _errors$name;
       return /*#__PURE__*/React.createElement(TextInput, {
-        style: {
-          marginBottom: 0
-        },
         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 => {
@@ -16448,9 +16066,7 @@ const OffenceDetails = ({
       });
     }
   }), (errors === null || errors === void 0 ? void 0 : errors.challanAmount) && /*#__PURE__*/React.createElement("p", {
-    style: {
-      color: "red"
-    }
+    className: "requiredField"
   }, errors.challanAmount.message))), /*#__PURE__*/React.createElement(ActionBar, null, /*#__PURE__*/React.createElement(SubmitBar, {
     className: "submit-bar-back",
     label: "Back",
@@ -16526,7 +16142,7 @@ const ChallanStepFormThree = ({
   function goNext(finalData) {
     var _docData$CHB;
     console.log("Current Data", finalData);
-    console.log("data?????....=====", docData === null || docData === void 0 ? void 0 : (_docData$CHB = docData.CHB) === null || _docData$CHB === void 0 ? void 0 : _docData$CHB.Documents);
+    console.log("data||||?....=====", docData === null || docData === void 0 ? void 0 : (_docData$CHB = docData.CHB) === null || _docData$CHB === void 0 ? void 0 : _docData$CHB.Documents);
     const missingFields = validation(finalData);
     if (missingFields.length > 0) {
       setError(`${t("CHB_MESSAGE_" + missingFields[0].replace(".", "_").toUpperCase())}`);
@@ -16672,21 +16288,11 @@ function ChallanSummary({
     t: t,
     data: slotlistRows,
     columns: columns,
-    getCellProps: cellInfo => ({
-      style: {
-        minWidth: "150px",
-        padding: "10px",
-        fontSize: "16px",
-        paddingLeft: "20px"
-      }
-    }),
+    className: "challan-application-table",
     isPaginationRequired: false,
     totalRecords: slotlistRows.length
   }), /*#__PURE__*/React.createElement(CardSubHeader, {
-    style: {
-      fontSize: "24px",
-      marginTop: "30px"
-    }
+    className: "challan-custom-header"
   }, t("CS_COMMON_DOCUMENTS")), /*#__PURE__*/React.createElement(StatusTable, null, /*#__PURE__*/React.createElement(Card, null, docs === null || docs === void 0 ? void 0 : docs.map((doc, index) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ChallanDocument, {
     value: docs,
     Code: doc === null || doc === void 0 ? void 0 : doc.documentType,
@@ -16988,12 +16594,7 @@ const ChallanResponseCitizen = props => {
   }), /*#__PURE__*/React.createElement("path", {
     d: "M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z"
   })), t("Challan_Notice"))), /*#__PURE__*/React.createElement(ActionBar, {
-    style: {
-      display: "flex",
-      justifyContent: "flex-end",
-      alignItems: "baseline",
-      gap: " 20px"
-    }
+    className: "challan-response-action-bar"
   }, /*#__PURE__*/React.createElement(SubmitBar, {
     label: t("CORE_COMMON_GO_TO_HOME"),
     onSubmit: onSubmit