@djb25/digit-ui-module-ws 1.0.86 → 1.0.87

package/dist/index.modern.js

@@ -28407,7 +28407,6 @@ const newConfig = [{
     nextStep: "disability-details",
     WATER: "disability-details",
     hideInEmployee: true,
-    hideInCitizen: true,
     texts: {
       headerCaption: "WS_COMMON_CONNECTION_DETAIL",
       header: "WS_DJB_EMPLOYEE",
@@ -32506,6 +32505,7 @@ const WSApplicationDetails = () => {
   const connectionDetails = additionalDetails;
   const useDetails = additionalDetails;
   const propertyAdditionalDetails = (PTData === null || PTData === void 0 ? void 0 : (_PTData$Properties = PTData.Properties) === null || _PTData$Properties === void 0 ? void 0 : (_PTData$Properties$ = _PTData$Properties[0]) === null || _PTData$Properties$ === void 0 ? void 0 : _PTData$Properties$.additionalDetails) || {};
+  const djbEmployee = additionalDetails;
   const bankDetails = additionalDetails;
   const propertyAddress = (PTData === null || PTData === void 0 ? void 0 : (_PTData$Properties2 = PTData.Properties) === null || _PTData$Properties2 === void 0 ? void 0 : (_PTData$Properties2$ = _PTData$Properties2[0]) === null || _PTData$Properties2$ === void 0 ? void 0 : _PTData$Properties2$.address) || additionalDetails;
   const checkifPrivacyenabled = Digit.Hooks.ws.useToCheckPrivacyEnablement({
@@ -33103,7 +33103,40 @@ const WSApplicationDetails = () => {
   }), /*#__PURE__*/React.createElement(Row, {
     label: t("WS_NUMBER_OF_DWELLING_UNITS"),
     text: `${t(checkForNA$1((useDetails === null || useDetails === void 0 ? void 0 : useDetails.NumberofDwellingUnits) || (useDetails === null || useDetails === void 0 ? void 0 : useDetails.noOfDwellingUnits)))}`
-  })), !isMutation && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CardHeader, {
+  })), /*#__PURE__*/React.createElement(CardHeader, {
+    styles: {
+      fontSize: "28px"
+    }
+  }, t("WS_DJB_EMPLOYEE")), /*#__PURE__*/React.createElement(StatusTable, {
+    style: {
+      marginTop: "10px",
+      marginBottom: "30px"
+    }
+  }, /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_DJB_EMPLOYEE"),
+    text: `${djbEmployee !== null && djbEmployee !== void 0 && djbEmployee.isDjbEmployee ? t("CORE_COMMON_YES") : t("CORE_COMMON_NO")}`
+  }), (djbEmployee === null || djbEmployee === void 0 ? void 0 : djbEmployee.isDjbEmployee) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_EMPLOYEE_ID"),
+    text: `${t(checkForNA$1(djbEmployee === null || djbEmployee === void 0 ? void 0 : djbEmployee.employeeId))}`
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_DATE_OF_RETIREMENT"),
+    text: `${t(checkForNA$1(djbEmployee === null || djbEmployee === void 0 ? void 0 : djbEmployee.dor))}`
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_EMPLOYEE_DESIGNATION"),
+    text: `${t(checkForNA$1(djbEmployee === null || djbEmployee === void 0 ? void 0 : djbEmployee.designation))}`
+  }), (djbEmployee === null || djbEmployee === void 0 ? void 0 : djbEmployee.document) && /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_UPLOAD_EMPLOYEE_ID_DOC"),
+    text: /*#__PURE__*/React.createElement("span", {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "8px",
+        cursor: "pointer",
+        color: "#f47738"
+      },
+      onClick: () => getFiles([djbEmployee === null || djbEmployee === void 0 ? void 0 : djbEmployee.document], tenantId)
+    }, /*#__PURE__*/React.createElement(GenericFileIcon, null), " ", t("CS_COMMON_VIEW"))
+  }))), !isMutation && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CardHeader, {
     styles: {
       fontSize: "28px"
     }
@@ -35222,6 +35255,7 @@ const CheckPage = _ref => {
   const connectionDetails = (value === null || value === void 0 ? void 0 : (_value$ConnectionDeta = value.ConnectionDetails) === null || _value$ConnectionDeta === void 0 ? void 0 : _value$ConnectionDeta[0]) || (value === null || value === void 0 ? void 0 : value.ConnectionDetails) || {};
   const propertyAddress = (value === null || value === void 0 ? void 0 : value.propertyLocationDetails) || {};
   const useDetails = (value === null || value === void 0 ? void 0 : (_value$waterConnectio = value.waterConnection) === null || _value$waterConnectio === void 0 ? void 0 : _value$waterConnectio.useDetails) || {};
+  const djbEmployee = (value === null || value === void 0 ? void 0 : value.djbEmployee) || {};
   const disability = (value === null || value === void 0 ? void 0 : value.disability) || (value === null || value === void 0 ? void 0 : value.additionalDetails) || {};
   const bankDetails = (value === null || value === void 0 ? void 0 : value.bankDetails) || {};
   const additionalDetails = {};
@@ -35498,7 +35532,39 @@ const CheckPage = _ref => {
   }), /*#__PURE__*/React.createElement(Row, {
     label: t("WS_NUMBER_OF_DWELLING_UNITS"),
     text: `${t(checkForNA((useDetails === null || useDetails === void 0 ? void 0 : useDetails.NumberofDwellingUnits) || (useDetails === null || useDetails === void 0 ? void 0 : useDetails.noOfDwellingUnits)))}`
-  })), /*#__PURE__*/React.createElement(CardSubHeader, null, t("WS_DIVYANGJAN")), /*#__PURE__*/React.createElement(StatusTable, {
+  })), /*#__PURE__*/React.createElement(CardSubHeader, null, t("WS_DJB_EMPLOYEE")), /*#__PURE__*/React.createElement(StatusTable, {
+    style: {
+      marginTop: "10px",
+      marginBottom: "30px"
+    }
+  }, /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_DJB_EMPLOYEE"),
+    text: `${djbEmployee !== null && djbEmployee !== void 0 && djbEmployee.isDjbEmployee ? t("CORE_COMMON_YES") : t("CORE_COMMON_NO")}`,
+    actionButton: /*#__PURE__*/React.createElement(ActionButton, {
+      onClick: onEdit
+    })
+  }), (djbEmployee === null || djbEmployee === void 0 ? void 0 : djbEmployee.isDjbEmployee) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_EMPLOYEE_ID"),
+    text: `${t(checkForNA(djbEmployee === null || djbEmployee === void 0 ? void 0 : djbEmployee.employeeId))}`
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_DATE_OF_RETIREMENT"),
+    text: `${t(checkForNA(djbEmployee === null || djbEmployee === void 0 ? void 0 : djbEmployee.dor))}`
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_EMPLOYEE_DESIGNATION"),
+    text: `${t(checkForNA(djbEmployee === null || djbEmployee === void 0 ? void 0 : djbEmployee.designation))}`
+  }), (djbEmployee === null || djbEmployee === void 0 ? void 0 : djbEmployee.document) && /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_UPLOAD_EMPLOYEE_ID_DOC"),
+    text: /*#__PURE__*/React.createElement("span", {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "8px",
+        cursor: "pointer",
+        color: "#f47738"
+      },
+      onClick: () => openFilePDF(djbEmployee === null || djbEmployee === void 0 ? void 0 : djbEmployee.document)
+    }, /*#__PURE__*/React.createElement(GenericFileIcon, null), " ", t("CS_COMMON_VIEW"))
+  }))), /*#__PURE__*/React.createElement(CardSubHeader, null, t("WS_DIVYANGJAN")), /*#__PURE__*/React.createElement(StatusTable, {
     style: {
       marginTop: "10px",
       marginBottom: "30px"
@@ -37303,9 +37369,9 @@ const WSInfoPage = () => {
       isMandatory: false,
       value: otp,
       maxLength: 6,
-      onChange: e => setOtp(e.target.value.replace(/\D/g, '').slice(0, 6)),
+      onChange: e => setOtp(e.target.value.replace(/\D/g, "").slice(0, 6)),
       onKeyDown: e => {
-        if (['-', '+', 'e', 'E', '.'].includes(e.key)) e.preventDefault();
+        if (["-", "+", "e", "E", "."].includes(e.key)) e.preventDefault();
       },
       placeholder: t("WS_ENTER_6_DIGIT_OTP") || "Enter 6-digit OTP",
       style: {
@@ -37595,6 +37661,18 @@ const WSInfoPage = () => {
       marginTop: "0",
       marginBottom: "0"
     }
+  }, t("WS_DJB_EMPLOYEE")), /*#__PURE__*/React.createElement("ul", {
+    style: {
+      listStyleType: "disc",
+      marginLeft: "20px",
+      marginBottom: "24px",
+      lineHeight: "2"
+    }
+  }, /*#__PURE__*/React.createElement("li", null, t("WS_EMPLOYEE_ID")), /*#__PURE__*/React.createElement("li", null, t("WS_DATE_OF_RETIREMENT")), /*#__PURE__*/React.createElement("li", null, t("WS_EMPLOYEE_DESIGNATION"))), /*#__PURE__*/React.createElement(CardSubHeader, {
+    style: {
+      marginTop: "0",
+      marginBottom: "0"
+    }
   }, t("WS_BANK_DETAILS")), /*#__PURE__*/React.createElement("ul", {
     style: {
       listStyleType: "disc",
@@ -47245,7 +47323,6 @@ const WSAdditonalDetails = _ref => {
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     style: {
       lineHeight: "19px",
-      maxWidth: "950px",
       minWidth: "280px"
     }
   }, (wsAdditionalDetails === null || wsAdditionalDetails === void 0 ? void 0 : (_wsAdditionalDetails$ = wsAdditionalDetails.additionalDetails) === null || _wsAdditionalDetails$ === void 0 ? void 0 : _wsAdditionalDetails$.connectionDetails) && /*#__PURE__*/React.createElement(StatusTable, null, /*#__PURE__*/React.createElement(CardSubHeader, {
@@ -50908,13 +50985,13 @@ const EditApplication$1 = () => {
 };
 
 const ConsumptionDetails = _ref => {
-  var _user$info, _mdmsBillingPeriod$Md, _mdmsBillingPeriod$Md2, _mdmsBillingPeriod$Md3, _mdmsMeterStatus$Mdms, _mdmsMeterStatus$Mdms2, _mdmsMeterStatus$Mdms3, _DJBReadingQualityCod, _DJBReadingQualityCod2, _DJBReadingQualityCod3, _details$4, _details$5;
+  var _user$info, _mdmsBillingPeriod$Md, _mdmsBillingPeriod$Md2, _mdmsBillingPeriod$Md3, _mdmsMeterStatus$Mdms, _mdmsMeterStatus$Mdms2, _mdmsMeterStatus$Mdms3, _DJBReadingQualityCod, _DJBReadingQualityCod2, _DJBReadingQualityCod3, _details$4, _details$5, _meterReadingDetailsD, _meterReadingDetailsD2, _meterReadingDetailsD3, _meterReadingDetailsD4, _meterReadingDetailsD5, _meterReadingDetailsD6, _meterReadingDetailsD7, _meterReadingDetailsD8, _meterReadingDetailsD9, _meterReadingDetailsD0, _meterReadingDetailsD1, _meterReadingDetailsD10, _meterReadingDetailsD11, _meterReadingDetailsD12, _meterReadingDetailsD13, _meterReadingDetailsD14, _meterReadingDetailsD15, _meterReadingDetailsD16, _meterReadingDetailsD17, _meterReadingDetailsD18, _meterReadingDetailsD19, _meterReadingDetailsD20, _meterReadingDetailsD21, _meterReadingDetailsD22, _meterReadingDetailsD23, _meterReadingDetailsD24, _meterReadingDetailsD25, _meterReadingDetailsD26, _meterReadingDetailsD27, _meterReadingDetailsD28, _meterReadingDetailsD29, _meterReadingDetailsD30, _meterReadingDetailsD31, _meterReadingDetailsD32, _meterReadingDetailsD33, _meterReadingDetailsD34, _meterReadingDetailsD35, _meterReadingDetailsD36, _meterReadingDetailsD37, _meterReadingDetailsD38, _meterReadingDetailsD39, _meterReadingDetailsD40, _meterReadingDetailsD41, _meterReadingDetailsD42, _meterReadingDetailsD43, _meterReadingDetailsD44, _meterReadingDetailsD45, _meterReadingDetailsD46, _meterReadingDetailsD47, _meterReadingDetailsD48, _meterReadingDetailsD49, _meterReadingDetailsD50, _meterReadingDetailsD51, _meterReadingDetailsD52, _meterReadingDetailsD53, _meterReadingDetailsD54, _meterReadingDetailsD55, _meterReadingDetailsD56, _meterReadingDetailsD57, _meterReadingDetailsD58, _meterReadingDetailsD59, _meterReadingDetailsD60, _meterReadingDetailsD61, _meterReadingDetailsD62, _meterReadingDetailsD63, _meterReadingDetailsD64, _meterReadingDetailsD65, _meterReadingDetailsD66, _meterReadingDetailsD67, _meterReadingDetailsD68, _meterReadingDetailsD69, _meterReadingDetailsD70, _meterReadingDetailsD71, _meterReadingDetailsD72, _meterReadingDetailsD73, _meterReadingDetailsD74, _meterReadingDetailsD75, _meterReadingDetailsD76, _meterReadingDetailsD77, _meterReadingDetailsD78, _meterReadingDetailsD79, _meterReadingDetailsD80, _meterReadingDetailsD81, _meterReadingDetailsD82;
   const {
     t
   } = useTranslation();
   const user = Digit.UserService.getUser();
   const tenantId = (user === null || user === void 0 ? void 0 : (_user$info = user.info) === null || _user$info === void 0 ? void 0 : _user$info.tenantId) || Digit.ULBService.getCurrentTenantId();
-  let filters = getQueryStringParams(location.search);
+  let filters = getQueryStringParams(window.location.search);
   const {
     applicationNo
   } = Digit.Hooks.useQueryParams();
@@ -50940,6 +51017,38 @@ const ConsumptionDetails = _ref => {
   const userInfo = Digit.UserService.getUser();
   const userRoles = userInfo.info.roles.map(roleData => roleData.code);
   const isUserAllowedToAddMeterReading = userRoles.filter(role => role === "WS_CEMP" || role === "SW_CEMP").length > 0;
+  const [meterReadingDetailsModal, setMeterReadingDetailsModal] = useState(false);
+  const [meterReadingDetailsData, setMeterReadingDetailsData] = useState(null);
+  const [isLoadingDetails, setIsLoadingDetails] = useState(false);
+  const handleViewMeterReadingDetails = application => {
+    setIsLoadingDetails(true);
+    setMeterReadingDetailsModal(true);
+    const tenantIdStr = (application === null || application === void 0 ? void 0 : application.tenantId) || tenantId;
+    const connectionNoStr = (application === null || application === void 0 ? void 0 : application.connectionNo) || applicationNo;
+    const billingCycleIdStr = (application === null || application === void 0 ? void 0 : application.billingCycleId) || (application === null || application === void 0 ? void 0 : application.billingPeriodId) || (application === null || application === void 0 ? void 0 : application.id);
+    fetchBillingStatement({
+      tenantId: tenantIdStr,
+      connectionNo: connectionNoStr,
+      billingCycleId: billingCycleIdStr
+    }, {
+      onSuccess: data => {
+        setMeterReadingDetailsData(data === null || data === void 0 ? void 0 : data.billingStatement);
+        setIsLoadingDetails(false);
+      },
+      onError: error => {
+        console.error(error);
+        setShowToast({
+          key: "error",
+          message: t("ERROR_FETCHING_METER_READING_DETAILS")
+        });
+        setMeterReadingDetailsModal(false);
+        setIsLoadingDetails(false);
+      }
+    });
+  };
+  const {
+    mutate: fetchBillingStatement
+  } = Digit.Hooks.ws.useWSBillingStatement(businessService);
   const {
     isLoading,
     isError,
@@ -51308,7 +51417,18 @@ const ConsumptionDetails = _ref => {
     }
   }, (meterReadings === null || meterReadings === void 0 ? void 0 : meterReadings.length) > 0 && meterReadings.map((application, index) => /*#__PURE__*/React.createElement("div", {
     key: index
-  }, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(StatusTable, null, /*#__PURE__*/React.createElement(Row, {
+  }, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      justifyContent: "flex-end",
+      marginBottom: "16px",
+      marginTop: "8px",
+      marginRight: "8px"
+    }
+  }, /*#__PURE__*/React.createElement(SubmitBar, {
+    label: t("VIEW_METER_READING_DETAILS"),
+    onSubmit: () => handleViewMeterReadingDetails(application)
+  })), /*#__PURE__*/React.createElement(StatusTable, null, /*#__PURE__*/React.createElement(Row, {
     key: t("WS_MYCONNECTIONS_CONSUMER_NO"),
     label: `${t("WS_MYCONNECTIONS_CONSUMER_NO")}`,
     text: (application === null || application === void 0 ? void 0 : application.connectionNo) || t("NA"),
@@ -51394,7 +51514,385 @@ const ConsumptionDetails = _ref => {
     onSubmit: onSubmit,
     defaultValues: defaultValues,
     formId: "modal-action"
-  })), showToast && /*#__PURE__*/React.createElement(Toast, {
+  })), meterReadingDetailsModal && /*#__PURE__*/React.createElement(Modal, {
+    headerBarMain: /*#__PURE__*/React.createElement(Heading, {
+      label: t("WS_METER_READING_DETAILS")
+    }),
+    headerBarEnd: /*#__PURE__*/React.createElement(CloseBtn, {
+      onClick: () => setMeterReadingDetailsModal(false)
+    }),
+    actionCancelLabel: t("CORE_CHANGE_TENANT_CANCEL"),
+    actionCancelOnSubmit: () => setMeterReadingDetailsModal(false),
+    hideSubmit: true,
+    formId: "meter-reading-details-modal",
+    popupStyles: {
+      width: mobileView ? "100%" : "800px"
+    }
+  }, isLoadingDetails ? /*#__PURE__*/React.createElement(Loader, null) : meterReadingDetailsData ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginBottom: "16px"
+    }
+  }, /*#__PURE__*/React.createElement(Header, null, t("WS_CONSUMER_DETAILS")), /*#__PURE__*/React.createElement(StatusTable, null, /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_CONNECTION_NO"),
+    text: ((_meterReadingDetailsD = meterReadingDetailsData.consumer) === null || _meterReadingDetailsD === void 0 ? void 0 : _meterReadingDetailsD.connectionNo) || t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_TARIFF_CATEGORY"),
+    text: ((_meterReadingDetailsD2 = meterReadingDetailsData.consumer) === null || _meterReadingDetailsD2 === void 0 ? void 0 : _meterReadingDetailsD2.tariffCategory) || t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_PROPERTY_USAGE"),
+    text: ((_meterReadingDetailsD3 = meterReadingDetailsData.consumer) === null || _meterReadingDetailsD3 === void 0 ? void 0 : _meterReadingDetailsD3.propertyUsage) || t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_PROPERTY_AREA_SQM"),
+    text: ((_meterReadingDetailsD4 = meterReadingDetailsData.consumer) === null || _meterReadingDetailsD4 === void 0 ? void 0 : _meterReadingDetailsD4.propertyAreaSqm) ?? t("NA"),
+    className: "border-none"
+  }))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginBottom: "16px"
+    }
+  }, /*#__PURE__*/React.createElement(Header, null, t("WS_BILLING_CYCLE")), /*#__PURE__*/React.createElement(StatusTable, null, /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_PERIOD_FROM"),
+    text: (_meterReadingDetailsD5 = meterReadingDetailsData.billingCycle) !== null && _meterReadingDetailsD5 !== void 0 && _meterReadingDetailsD5.periodFrom ? Digit.DateUtils.ConvertEpochToDate((_meterReadingDetailsD6 = meterReadingDetailsData.billingCycle) === null || _meterReadingDetailsD6 === void 0 ? void 0 : _meterReadingDetailsD6.periodFrom) : t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_PERIOD_TO"),
+    text: (_meterReadingDetailsD7 = meterReadingDetailsData.billingCycle) !== null && _meterReadingDetailsD7 !== void 0 && _meterReadingDetailsD7.periodTo ? Digit.DateUtils.ConvertEpochToDate((_meterReadingDetailsD8 = meterReadingDetailsData.billingCycle) === null || _meterReadingDetailsD8 === void 0 ? void 0 : _meterReadingDetailsD8.periodTo) : t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_READING_QUALITY_CODE"),
+    text: ((_meterReadingDetailsD9 = meterReadingDetailsData.billingCycle) === null || _meterReadingDetailsD9 === void 0 ? void 0 : _meterReadingDetailsD9.readingQualityCode) || t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_BILLING_BASIS"),
+    text: ((_meterReadingDetailsD0 = meterReadingDetailsData.billingCycle) === null || _meterReadingDetailsD0 === void 0 ? void 0 : _meterReadingDetailsD0.billingBasis) || t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_CORRECTION_STATUS"),
+    text: ((_meterReadingDetailsD1 = meterReadingDetailsData.billingCycle) === null || _meterReadingDetailsD1 === void 0 ? void 0 : _meterReadingDetailsD1.correctionStatus) || t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_STATUS"),
+    text: ((_meterReadingDetailsD10 = meterReadingDetailsData.billingCycle) === null || _meterReadingDetailsD10 === void 0 ? void 0 : _meterReadingDetailsD10.status) || t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_AVERAGE_CYCLE_COUNT"),
+    text: ((_meterReadingDetailsD11 = meterReadingDetailsData.billingCycle) === null || _meterReadingDetailsD11 === void 0 ? void 0 : _meterReadingDetailsD11.averageCycleCount) ?? t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_PROVISIONAL_CYCLE_COUNT"),
+    text: ((_meterReadingDetailsD12 = meterReadingDetailsData.billingCycle) === null || _meterReadingDetailsD12 === void 0 ? void 0 : _meterReadingDetailsD12.provisionalCycleCount) ?? t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_ZRO_STATUS"),
+    text: ((_meterReadingDetailsD13 = meterReadingDetailsData.billingCycle) === null || _meterReadingDetailsD13 === void 0 ? void 0 : _meterReadingDetailsD13.zroStatus) || t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_ZRO_REMARKS"),
+    text: ((_meterReadingDetailsD14 = meterReadingDetailsData.billingCycle) === null || _meterReadingDetailsD14 === void 0 ? void 0 : _meterReadingDetailsD14.zroRemarks) || t("NA"),
+    className: "border-none"
+  }))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginBottom: "16px"
+    }
+  }, /*#__PURE__*/React.createElement(Header, null, t("WS_READING_DETAILS")), /*#__PURE__*/React.createElement(StatusTable, null, /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_PREVIOUS_READING"),
+    text: ((_meterReadingDetailsD15 = meterReadingDetailsData.reading) === null || _meterReadingDetailsD15 === void 0 ? void 0 : _meterReadingDetailsD15.previousReading) ?? t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_PREVIOUS_READING_DATE"),
+    text: (_meterReadingDetailsD16 = meterReadingDetailsData.reading) !== null && _meterReadingDetailsD16 !== void 0 && _meterReadingDetailsD16.previousReadingDate ? Digit.DateUtils.ConvertEpochToDate((_meterReadingDetailsD17 = meterReadingDetailsData.reading) === null || _meterReadingDetailsD17 === void 0 ? void 0 : _meterReadingDetailsD17.previousReadingDate) : t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_CURRENT_READING"),
+    text: ((_meterReadingDetailsD18 = meterReadingDetailsData.reading) === null || _meterReadingDetailsD18 === void 0 ? void 0 : _meterReadingDetailsD18.currentReading) ?? t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_CURRENT_READING_DATE"),
+    text: (_meterReadingDetailsD19 = meterReadingDetailsData.reading) !== null && _meterReadingDetailsD19 !== void 0 && _meterReadingDetailsD19.currentReadingDate ? Digit.DateUtils.ConvertEpochToDate((_meterReadingDetailsD20 = meterReadingDetailsData.reading) === null || _meterReadingDetailsD20 === void 0 ? void 0 : _meterReadingDetailsD20.currentReadingDate) : t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_PREVIOUS_CONSUMPTION"),
+    text: ((_meterReadingDetailsD21 = meterReadingDetailsData.reading) === null || _meterReadingDetailsD21 === void 0 ? void 0 : _meterReadingDetailsD21.previousConsumption) ?? t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_ACTUAL_CONSUMPTION"),
+    text: ((_meterReadingDetailsD22 = meterReadingDetailsData.reading) === null || _meterReadingDetailsD22 === void 0 ? void 0 : _meterReadingDetailsD22.actualConsumption) ?? t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_MONTHLY_CONSUMPTION"),
+    text: ((_meterReadingDetailsD23 = meterReadingDetailsData.reading) === null || _meterReadingDetailsD23 === void 0 ? void 0 : _meterReadingDetailsD23.monthlyConsumption) ?? t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_BILLING_CONSUMPTION"),
+    text: ((_meterReadingDetailsD24 = meterReadingDetailsData.reading) === null || _meterReadingDetailsD24 === void 0 ? void 0 : _meterReadingDetailsD24.billingConsumption) ?? t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_BILLING_DAYS"),
+    text: ((_meterReadingDetailsD25 = meterReadingDetailsData.reading) === null || _meterReadingDetailsD25 === void 0 ? void 0 : _meterReadingDetailsD25.billingDays) ?? t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_AVERAGE_CONSUMPTION"),
+    text: ((_meterReadingDetailsD26 = meterReadingDetailsData.reading) === null || _meterReadingDetailsD26 === void 0 ? void 0 : _meterReadingDetailsD26.averageConsumption) ?? t("NA"),
+    className: "border-none"
+  }))), meterReadingDetailsData.onePointFiveX && (((_meterReadingDetailsD27 = meterReadingDetailsData.onePointFiveX) === null || _meterReadingDetailsD27 === void 0 ? void 0 : _meterReadingDetailsD27.evaluated) === true || ((_meterReadingDetailsD28 = meterReadingDetailsData.onePointFiveX) === null || _meterReadingDetailsD28 === void 0 ? void 0 : _meterReadingDetailsD28.required) === true || ((_meterReadingDetailsD29 = meterReadingDetailsData.onePointFiveX) === null || _meterReadingDetailsD29 === void 0 ? void 0 : _meterReadingDetailsD29.zroRequired) === true) && /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginBottom: "16px"
+    }
+  }, /*#__PURE__*/React.createElement(Header, null, t("WS_ONE_POINT_FIVE_X")), /*#__PURE__*/React.createElement(StatusTable, null, /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_EVALUATED"),
+    text: (_meterReadingDetailsD30 = meterReadingDetailsData.onePointFiveX) !== null && _meterReadingDetailsD30 !== void 0 && _meterReadingDetailsD30.evaluated ? t("CORE_COMMON_YES") : t("CORE_COMMON_NO"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_MULTIPLIER"),
+    text: ((_meterReadingDetailsD31 = meterReadingDetailsData.onePointFiveX) === null || _meterReadingDetailsD31 === void 0 ? void 0 : _meterReadingDetailsD31.multiplier) ?? t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_PREVIOUS_CONSUMPTION"),
+    text: ((_meterReadingDetailsD32 = meterReadingDetailsData.onePointFiveX) === null || _meterReadingDetailsD32 === void 0 ? void 0 : _meterReadingDetailsD32.previousConsumption) ?? t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_THRESHOLD_CONSUMPTION"),
+    text: ((_meterReadingDetailsD33 = meterReadingDetailsData.onePointFiveX) === null || _meterReadingDetailsD33 === void 0 ? void 0 : _meterReadingDetailsD33.thresholdConsumption) ?? t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_ACTUAL_CONSUMPTION"),
+    text: ((_meterReadingDetailsD34 = meterReadingDetailsData.onePointFiveX) === null || _meterReadingDetailsD34 === void 0 ? void 0 : _meterReadingDetailsD34.actualConsumption) ?? t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_MONTHLY_CONSUMPTION"),
+    text: ((_meterReadingDetailsD35 = meterReadingDetailsData.onePointFiveX) === null || _meterReadingDetailsD35 === void 0 ? void 0 : _meterReadingDetailsD35.monthlyConsumption) ?? t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_BILLING_DAYS"),
+    text: ((_meterReadingDetailsD36 = meterReadingDetailsData.onePointFiveX) === null || _meterReadingDetailsD36 === void 0 ? void 0 : _meterReadingDetailsD36.billingDays) ?? t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_EXCEEDED"),
+    text: (_meterReadingDetailsD37 = meterReadingDetailsData.onePointFiveX) !== null && _meterReadingDetailsD37 !== void 0 && _meterReadingDetailsD37.exceeded ? t("CORE_COMMON_YES") : t("CORE_COMMON_NO"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_MINIMUM_ZRO_CONSUMPTION"),
+    text: ((_meterReadingDetailsD38 = meterReadingDetailsData.onePointFiveX) === null || _meterReadingDetailsD38 === void 0 ? void 0 : _meterReadingDetailsD38.minimumZroConsumption) ?? t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_ZRO_REQUIRED"),
+    text: (_meterReadingDetailsD39 = meterReadingDetailsData.onePointFiveX) !== null && _meterReadingDetailsD39 !== void 0 && _meterReadingDetailsD39.zroRequired ? t("CORE_COMMON_YES") : t("CORE_COMMON_NO"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_REASON"),
+    text: ((_meterReadingDetailsD40 = meterReadingDetailsData.onePointFiveX) === null || _meterReadingDetailsD40 === void 0 ? void 0 : _meterReadingDetailsD40.reason) || t("NA"),
+    className: "border-none"
+  }))), meterReadingDetailsData.charges && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginBottom: "16px"
+    }
+  }, /*#__PURE__*/React.createElement(Header, null, t("WS_WATER_CHARGES")), /*#__PURE__*/React.createElement(StatusTable, null, meterReadingDetailsData.charges.water ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_WATER_CONSUMPTION"),
+    text: ((_meterReadingDetailsD41 = meterReadingDetailsData.charges.water) === null || _meterReadingDetailsD41 === void 0 ? void 0 : _meterReadingDetailsD41.consumption) != null ? `${meterReadingDetailsData.charges.water.consumption} ${((_meterReadingDetailsD42 = meterReadingDetailsData.charges.water) === null || _meterReadingDetailsD42 === void 0 ? void 0 : _meterReadingDetailsD42.unit) || ""}` : t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_WATER_CATEGORY"),
+    text: ((_meterReadingDetailsD43 = meterReadingDetailsData.charges.water) === null || _meterReadingDetailsD43 === void 0 ? void 0 : _meterReadingDetailsD43.category) || ((_meterReadingDetailsD44 = meterReadingDetailsData.charges.water) === null || _meterReadingDetailsD44 === void 0 ? void 0 : _meterReadingDetailsD44.tariffId) || t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_VOLUMETRIC_CHARGE"),
+    text: ((_meterReadingDetailsD45 = meterReadingDetailsData.charges.water) === null || _meterReadingDetailsD45 === void 0 ? void 0 : _meterReadingDetailsD45.volumetricCharge) ?? t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_SERVICE_CHARGE"),
+    text: ((_meterReadingDetailsD46 = meterReadingDetailsData.charges.water) === null || _meterReadingDetailsD46 === void 0 ? void 0 : _meterReadingDetailsD46.serviceCharge) ?? t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_TOTAL_WATER_CHARGE"),
+    text: ((_meterReadingDetailsD47 = meterReadingDetailsData.charges.water) === null || _meterReadingDetailsD47 === void 0 ? void 0 : _meterReadingDetailsD47.totalWaterCharge) ?? t("NA"),
+    className: "border-none"
+  }), (_meterReadingDetailsD48 = meterReadingDetailsData.charges.water) === null || _meterReadingDetailsD48 === void 0 ? void 0 : (_meterReadingDetailsD49 = _meterReadingDetailsD48.slabs) === null || _meterReadingDetailsD49 === void 0 ? void 0 : _meterReadingDetailsD49.map((slab, idx) => /*#__PURE__*/React.createElement(Row, {
+    key: idx,
+    label: `${t("WS_WATER_SLAB")} ${idx + 1}`,
+    text: (slab === null || slab === void 0 ? void 0 : slab.explanation) || `${slab.units} KL @ Rs. ${slab.ratePerKl} = Rs. ${slab.charge}`,
+    className: "border-none"
+  }))) : /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_TOTAL_WATER_CHARGE"),
+    text: t("NA"),
+    className: "border-none"
+  }))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginBottom: "16px"
+    }
+  }, /*#__PURE__*/React.createElement(Header, null, t("WS_SEWERAGE_CHARGES")), /*#__PURE__*/React.createElement(StatusTable, null, meterReadingDetailsData.charges.sewerage ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_REGULAR_SEWERAGE_CHARGE"),
+    text: ((_meterReadingDetailsD50 = meterReadingDetailsData.charges.sewerage) === null || _meterReadingDetailsD50 === void 0 ? void 0 : _meterReadingDetailsD50.regularCharge) ?? t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_ADDITIONAL_SEWERAGE_CHARGE"),
+    text: ((_meterReadingDetailsD51 = meterReadingDetailsData.charges.sewerage) === null || _meterReadingDetailsD51 === void 0 ? void 0 : _meterReadingDetailsD51.additionalCharge) ?? t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_TOTAL_SEWERAGE_CHARGE"),
+    text: ((_meterReadingDetailsD52 = meterReadingDetailsData.charges.sewerage) === null || _meterReadingDetailsD52 === void 0 ? void 0 : _meterReadingDetailsD52.totalCharge) ?? t("NA"),
+    className: "border-none"
+  }), ((_meterReadingDetailsD53 = meterReadingDetailsData.charges.sewerage) === null || _meterReadingDetailsD53 === void 0 ? void 0 : _meterReadingDetailsD53.additionalRuleCode) && /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_ADDITIONAL_RULE_CODE"),
+    text: meterReadingDetailsData.charges.sewerage.additionalRuleCode,
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_SEWERAGE_EXPLANATION"),
+    text: ((_meterReadingDetailsD54 = meterReadingDetailsData.charges.sewerage) === null || _meterReadingDetailsD54 === void 0 ? void 0 : _meterReadingDetailsD54.explanation) || t("NA"),
+    className: "border-none"
+  })) : /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_TOTAL_SEWERAGE_CHARGE"),
+    text: t("NA"),
+    className: "border-none"
+  }))), meterReadingDetailsData.charges.rebates && /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginBottom: "16px"
+    }
+  }, /*#__PURE__*/React.createElement(Header, null, t("WS_REBATES")), /*#__PURE__*/React.createElement(StatusTable, null, /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_TOTAL_REBATE"),
+    text: ((_meterReadingDetailsD55 = meterReadingDetailsData.charges.rebates) === null || _meterReadingDetailsD55 === void 0 ? void 0 : _meterReadingDetailsD55.totalRebate) ?? t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_REBATE_EXPLANATION"),
+    text: ((_meterReadingDetailsD56 = meterReadingDetailsData.charges.rebates) === null || _meterReadingDetailsD56 === void 0 ? void 0 : _meterReadingDetailsD56.explanation) || t("NA"),
+    className: "border-none"
+  }))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginBottom: "16px"
+    }
+  }, /*#__PURE__*/React.createElement(Header, null, t("WS_CHARGES_SUMMARY")), /*#__PURE__*/React.createElement(StatusTable, null, /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_GROSS_AMOUNT"),
+    text: ((_meterReadingDetailsD57 = meterReadingDetailsData.charges) === null || _meterReadingDetailsD57 === void 0 ? void 0 : _meterReadingDetailsD57.grossAmount) ?? t("NA"),
+    className: "border-none"
+  }), ((_meterReadingDetailsD58 = meterReadingDetailsData.charges.water) === null || _meterReadingDetailsD58 === void 0 ? void 0 : _meterReadingDetailsD58.totalWaterCharge) != null && /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_TOTAL_WATER_CHARGE"),
+    text: meterReadingDetailsData.charges.water.totalWaterCharge,
+    className: "border-none"
+  }), ((_meterReadingDetailsD59 = meterReadingDetailsData.charges.sewerage) === null || _meterReadingDetailsD59 === void 0 ? void 0 : _meterReadingDetailsD59.totalCharge) != null && /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_TOTAL_SEWERAGE_CHARGE"),
+    text: meterReadingDetailsData.charges.sewerage.totalCharge,
+    className: "border-none"
+  }), ((_meterReadingDetailsD60 = meterReadingDetailsData.charges.rebates) === null || _meterReadingDetailsD60 === void 0 ? void 0 : _meterReadingDetailsD60.totalRebate) != null && /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_TOTAL_REBATE"),
+    text: meterReadingDetailsData.charges.rebates.totalRebate,
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_NET_AMOUNT"),
+    text: ((_meterReadingDetailsD61 = meterReadingDetailsData.charges) === null || _meterReadingDetailsD61 === void 0 ? void 0 : _meterReadingDetailsD61.netAmount) ?? t("NA"),
+    className: "border-none"
+  })))), meterReadingDetailsData.adjustments && /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginBottom: "16px"
+    }
+  }, /*#__PURE__*/React.createElement(Header, null, t("WS_ADJUSTMENTS")), /*#__PURE__*/React.createElement(StatusTable, null, /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_PAID_CORRECTION_APPLIED"),
+    text: ((_meterReadingDetailsD62 = meterReadingDetailsData.adjustments) === null || _meterReadingDetailsD62 === void 0 ? void 0 : _meterReadingDetailsD62.paidCorrectionApplied) ?? t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_RESIDUAL_PAID_CREDIT_CREATED"),
+    text: ((_meterReadingDetailsD63 = meterReadingDetailsData.adjustments) === null || _meterReadingDetailsD63 === void 0 ? void 0 : _meterReadingDetailsD63.residualPaidCreditCreated) ?? t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_CARRIED_FORWARD_CREDIT_APPLIED"),
+    text: ((_meterReadingDetailsD64 = meterReadingDetailsData.adjustments) === null || _meterReadingDetailsD64 === void 0 ? void 0 : _meterReadingDetailsD64.carriedForwardCreditApplied) ?? t("NA"),
+    className: "border-none"
+  }))), meterReadingDetailsData.correction && ((_meterReadingDetailsD65 = meterReadingDetailsData.correction) === null || _meterReadingDetailsD65 === void 0 ? void 0 : _meterReadingDetailsD65.required) === true && /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginBottom: "16px"
+    }
+  }, /*#__PURE__*/React.createElement(Header, null, t("WS_CORRECTION")), /*#__PURE__*/React.createElement(StatusTable, null, /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_REQUIRED"),
+    text: (_meterReadingDetailsD66 = meterReadingDetailsData.correction) !== null && _meterReadingDetailsD66 !== void 0 && _meterReadingDetailsD66.required ? t("CORE_COMMON_YES") : t("CORE_COMMON_NO"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_STATUS"),
+    text: ((_meterReadingDetailsD67 = meterReadingDetailsData.correction) === null || _meterReadingDetailsD67 === void 0 ? void 0 : _meterReadingDetailsD67.status) || t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_REASON_CODE"),
+    text: ((_meterReadingDetailsD68 = meterReadingDetailsData.correction) === null || _meterReadingDetailsD68 === void 0 ? void 0 : _meterReadingDetailsD68.reasonCode) || t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_REASON"),
+    text: ((_meterReadingDetailsD69 = meterReadingDetailsData.correction) === null || _meterReadingDetailsD69 === void 0 ? void 0 : _meterReadingDetailsD69.reason) || t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_PREVIOUS_OK_READING"),
+    text: ((_meterReadingDetailsD70 = meterReadingDetailsData.correction) === null || _meterReadingDetailsD70 === void 0 ? void 0 : _meterReadingDetailsD70.previousOkReading) ?? t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_CURRENT_READING"),
+    text: ((_meterReadingDetailsD71 = meterReadingDetailsData.correction) === null || _meterReadingDetailsD71 === void 0 ? void 0 : _meterReadingDetailsD71.currentReading) ?? t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_CORRECTED_CONSUMPTION"),
+    text: ((_meterReadingDetailsD72 = meterReadingDetailsData.correction) === null || _meterReadingDetailsD72 === void 0 ? void 0 : _meterReadingDetailsD72.correctedConsumption) ?? t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_PREVIOUSLY_CALCULATED_AMOUNT"),
+    text: ((_meterReadingDetailsD73 = meterReadingDetailsData.correction) === null || _meterReadingDetailsD73 === void 0 ? void 0 : _meterReadingDetailsD73.previouslyCalculatedAmount) ?? t("NA"),
+    className: "border-none"
+  }))), meterReadingDetailsData.bill && /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginBottom: "16px"
+    }
+  }, /*#__PURE__*/React.createElement(Header, null, t("WS_BILL_DETAILS")), /*#__PURE__*/React.createElement(StatusTable, null, /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_BILL_GENERATED"),
+    text: (_meterReadingDetailsD74 = meterReadingDetailsData.bill) !== null && _meterReadingDetailsD74 !== void 0 && _meterReadingDetailsD74.generated ? t("CORE_COMMON_YES") : t("CORE_COMMON_NO"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_BILL_NUMBER"),
+    text: ((_meterReadingDetailsD75 = meterReadingDetailsData.bill) === null || _meterReadingDetailsD75 === void 0 ? void 0 : _meterReadingDetailsD75.number) || t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_BILL_STATUS"),
+    text: ((_meterReadingDetailsD76 = meterReadingDetailsData.bill) === null || _meterReadingDetailsD76 === void 0 ? void 0 : _meterReadingDetailsD76.status) || t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_BILL_AMOUNT"),
+    text: ((_meterReadingDetailsD77 = meterReadingDetailsData.bill) === null || _meterReadingDetailsD77 === void 0 ? void 0 : _meterReadingDetailsD77.amount) ?? t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_CALCULATED_AMOUNT"),
+    text: ((_meterReadingDetailsD78 = meterReadingDetailsData.bill) === null || _meterReadingDetailsD78 === void 0 ? void 0 : _meterReadingDetailsD78.calculatedAmount) ?? t("NA"),
+    className: "border-none"
+  }))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: "24px",
+      marginBottom: "8px",
+      padding: "16px 20px",
+      backgroundColor: "#FEF7F2",
+      border: "2px solid #F47738",
+      borderRadius: "6px",
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      boxShadow: "0 2px 6px rgba(244, 119, 56, 0.15)"
+    }
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: "18px",
+      fontWeight: "700",
+      color: "#0B0C0C"
+    }
+  }, t("WS_NET_AMOUNT")), ((_meterReadingDetailsD79 = meterReadingDetailsData.charges) === null || _meterReadingDetailsD79 === void 0 ? void 0 : _meterReadingDetailsD79.grossAmount) != null && /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: "13px",
+      color: "#505A5F",
+      marginTop: "4px"
+    }
+  }, t("WS_GROSS_AMOUNT"), ": \u20B9 ", meterReadingDetailsData.charges.grossAmount)), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: "24px",
+      fontWeight: "700",
+      color: "#F47738"
+    }
+  }, "\u20B9", " ", ((_meterReadingDetailsD80 = meterReadingDetailsData.charges) === null || _meterReadingDetailsD80 === void 0 ? void 0 : _meterReadingDetailsD80.netAmount) ?? ((_meterReadingDetailsD81 = meterReadingDetailsData.bill) === null || _meterReadingDetailsD81 === void 0 ? void 0 : _meterReadingDetailsD81.amount) ?? ((_meterReadingDetailsD82 = meterReadingDetailsData.reconciliation) === null || _meterReadingDetailsD82 === void 0 ? void 0 : _meterReadingDetailsD82.billedAmount) ?? t("NA")))) : /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: "16px"
+    }
+  }, t("CS_NO_DATA"))), showToast && /*#__PURE__*/React.createElement(Toast, {
     style: {
       zIndex: "10000"
     },
@@ -57007,7 +57505,7 @@ const CheckPage$4 = _ref2 => {
   }), /*#__PURE__*/React.createElement(Row, {
     label: t("WS_NUMBER_OF_DWELLING_UNITS"),
     text: `${t(checkForNA((useDetails === null || useDetails === void 0 ? void 0 : useDetails.NumberofDwellingUnits) || (useDetails === null || useDetails === void 0 ? void 0 : useDetails.noOfDwellingUnits)))}`
-  })), !isCitizen && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CardSubHeader, null, t("WS_DJB_EMPLOYEE")), /*#__PURE__*/React.createElement(StatusTable, {
+  })), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CardSubHeader, null, t("WS_DJB_EMPLOYEE")), /*#__PURE__*/React.createElement(StatusTable, {
     style: {
       marginTop: "10px",
       marginBottom: "30px"
@@ -57209,9 +57707,9 @@ const OLDApplication = () => {
     label: "PT_LOCATION_DETAILS"
   }, {
     label: "WS_PROPERTY_AND_WATER_CONNECTION_USE_DETAILS"
-  }, ...(isCitizen ? [] : [{
+  }, {
     label: "WS_DJB_EMPLOYEE"
-  }]), {
+  }, {
     label: "WS_BANK_DETAILS"
   }, {
     label: "WS_DOCUMENTS"