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

package/dist/index.modern.js

@@ -9203,7 +9203,7 @@ const App = _ref => {
   }, {
     path: "/digit-ui/citizen/ws/my-connections",
     label: t("WS_MYCONNECTIONS_HEADER"),
-    show: location.pathname.includes("/my-connections") || location.pathname.includes("/connection/details") || location.pathname.includes("/modify-connection")
+    show: location.pathname.includes("/my-connections") || location.pathname.includes("/connection/details") || location.pathname.includes("/modify-connection") || location.pathname.includes("/consumption/details")
   }, {
     path: "/digit-ui/citizen/ws/my-bills",
     label: t("CS_WS_MY_BILLS"),
@@ -9221,9 +9221,13 @@ const App = _ref => {
     label: t("WS_APPLICATION_DETAILS_HEADER"),
     show: location.pathname.includes("/connection/application") || location.pathname.includes("/edit-application")
   }, {
-    path: location.pathname,
+    path: location.pathname.includes("/consumption/details") ? `/digit-ui/citizen/ws/connection/details/${new URLSearchParams(location.search).get("applicationNo") || ""}` : location.pathname,
     label: t("WS_COMMON_CONNECTION_DETAIL"),
-    show: location.pathname.includes("/connection/details") || location.pathname.includes("/modify-connection")
+    show: location.pathname.includes("/connection/details") || location.pathname.includes("/modify-connection") || location.pathname.includes("/consumption/details")
+  }, {
+    path: location.pathname,
+    label: t("WS_VIEW_CONSUMPTION_DETAIL"),
+    show: location.pathname.includes("/consumption/details")
   }, {
     path: location.pathname,
     label: t("WS_EDIT_CONNECTION") || "Edit Connection",
@@ -9319,7 +9323,9 @@ const App = _ref => {
     component: WSCitizenConnectionDetails
   }), /*#__PURE__*/React.createElement(PrivateRoute, {
     path: `${path}/consumption/details`,
-    component: WSCitizenConsumptionDetails
+    component: () => /*#__PURE__*/React.createElement(LayoutWrapper, {
+      layoutClass: "action"
+    }, /*#__PURE__*/React.createElement(WSCitizenConsumptionDetails, null))
   }), /*#__PURE__*/React.createElement(PrivateRoute, {
     path: `${path}/edit-application/:tenantId`,
     component: WSCitizenEditApplication
@@ -28407,7 +28413,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 +32511,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 +33109,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"
     }
@@ -34397,30 +34436,85 @@ const ConnectionDetails$5 = () => {
   })));
 };
 
-const consumptionDetails = _ref => {
-  var _Digit$SessionStorage, _user$info;
+const ConsumptionDetails = _ref => {
+  var _Digit$SessionStorage, _user$info, _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, _meterReadingDetailsD83, _meterReadingDetailsD84, _meterReadingDetailsD85, _meterReadingDetailsD86, _meterReadingDetailsD87, _meterReadingDetailsD88, _meterReadingDetailsD89, _meterReadingDetailsD90, _meterReadingDetailsD91, _meterReadingDetailsD92, _meterReadingDetailsD93, _meterReadingDetailsD94, _meterReadingDetailsD95, _meterReadingDetailsD96, _meterReadingDetailsD97, _meterReadingDetailsD98, _meterReadingDetailsD99, _meterReadingDetailsD100, _meterReadingDetailsD101, _meterReadingDetailsD102, _meterReadingDetailsD103, _meterReadingDetailsD104, _meterReadingDetailsD105;
   const {
     t
   } = useTranslation();
   const user = Digit.UserService.getUser();
   const tenantId = ((_Digit$SessionStorage = Digit.SessionStorage.get("CITIZEN.COMMON.HOME.CITY")) === null || _Digit$SessionStorage === void 0 ? void 0 : _Digit$SessionStorage.code) || (user === null || user === void 0 ? void 0 : (_user$info = user.info) === null || _user$info === void 0 ? void 0 : _user$info.permanentCity) || Digit.ULBService.getCurrentTenantId();
   const {
-    applicationNo
+    applicationNo,
+    service
   } = Digit.Hooks.useQueryParams();
+  const businessService = service === "SEWERAGE" || service === "SW" ? "SW" : "WS";
+  const mobileView = Digit.Utils.browser.isMobile() ? true : false;
   let filter1 = {
     tenantId: tenantId,
     connectionNos: applicationNo
   };
   const {
     isLoading,
-    isError,
-    error,
     data
   } = Digit.Hooks.ws.useWSConsumptionSearch({
     filters: filter1
   }, {
     filters: filter1
   });
+  const {
+    mutate: fetchBillingStatement
+  } = Digit.Hooks.ws.useWSBillingStatement(businessService);
+  const [meterReadingDetailsModal, setMeterReadingDetailsModal] = useState(false);
+  const [meterReadingDetailsData, setMeterReadingDetailsData] = useState(null);
+  const [isLoadingDetails, setIsLoadingDetails] = useState(false);
+  const [showToast, setShowToast] = useState(null);
+  const Heading = props => {
+    return /*#__PURE__*/React.createElement("h1", {
+      className: "heading-m"
+    }, props.label);
+  };
+  const Close = () => /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "#FFFFFF"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M0 0h24v24H0V0z",
+    fill: "none"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
+  }));
+  const CloseBtn = props => {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "icon-bg-secondary",
+      onClick: props.onClick
+    }, /*#__PURE__*/React.createElement(Close, null));
+  };
+  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) || "447c57bd-2e12-4c41-92e9-8a8bf7d3a368";
+    fetchBillingStatement({
+      tenantId: tenantIdStr,
+      connectionNo: connectionNoStr,
+      billingCycleId: billingCycleIdStr
+    }, {
+      onSuccess: data => {
+        setMeterReadingDetailsData(data === null || data === void 0 ? void 0 : data.billingStatement);
+        setIsLoadingDetails(false);
+      },
+      onError: err => {
+        console.error(err);
+        setShowToast({
+          key: "error",
+          message: t("ERROR_FETCHING_METER_READING_DETAILS")
+        });
+        setMeterReadingDetailsModal(false);
+        setIsLoadingDetails(false);
+      }
+    });
+  };
   const consumption = (currentReading, lastReading) => {
     if (currentReading && lastReading) {
       return Number(currentReading - lastReading);
@@ -34432,68 +34526,591 @@ const consumptionDetails = _ref => {
   let {
     meterReadings
   } = data || {};
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Header, null, `${t("WS_VIEW_CONSUMPTION")}`), /*#__PURE__*/React.createElement("div", null, (meterReadings === null || meterReadings === void 0 ? void 0 : meterReadings.length) > 0 && meterReadings.map((application, index) => /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "employee-form-section-wrapper",
+    style: {
+      display: "flex",
+      gap: "16px",
+      width: "100%"
+    }
+  }, /*#__PURE__*/React.createElement(VerticalTimeline, {
+    config: [{
+      timeLine: [{
+        actions: "WS_VIEW_CONSUMPTION",
+        currentStep: 1
+      }]
+    }],
+    showFinalStep: false
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      display: "flex",
+      flexDirection: "column",
+      gap: "16px"
+    }
+  }, (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, {
-    className: "border-none",
-    label: t("WS_MYCONNECTIONS_CONSUMER_NO"),
+  }, /*#__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, {
+    style: {
+      backgroundColor: "#0A4275",
+      color: "#FFFFFF"
+    },
+    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"),
-    textStyle: {}
+    className: "border-none"
   }), /*#__PURE__*/React.createElement(Row, {
-    className: "border-none",
-    label: t("WS_VIEW_BILL_BILLING_PERIOD_LABEL"),
+    key: t("WS_VIEW_BILL_BILLING_PERIOD_LABEL"),
+    label: `${t("WS_VIEW_BILL_BILLING_PERIOD_LABEL")}`,
     text: (application === null || application === void 0 ? void 0 : application.billingPeriod) || t("NA"),
-    textStyle: {
-      wordBreak: "break-word"
-    }
+    className: "border-none"
   }), /*#__PURE__*/React.createElement(Row, {
-    className: "border-none",
-    label: t("WS_CONSUMPTION_DETAILS_METER_STATUS_LABEL"),
+    key: t("WS_CONSUMPTION_DETAILS_METER_STATUS_LABEL"),
+    label: `${t("WS_CONSUMPTION_DETAILS_METER_STATUS_LABEL")}`,
     text: (application === null || application === void 0 ? void 0 : application.meterStatus) || t("NA"),
-    textStyle: {
-      whiteSpace: "pre"
-    }
+    className: "border-none"
   }), /*#__PURE__*/React.createElement(Row, {
-    className: "border-none",
-    label: t("WS_CONSUMPTION_DETAILS_LAST_READING_LABEL"),
+    key: t("WS_READING_QUALITY_CODE"),
+    label: `${t("WS_READING_QUALITY_CODE")}`,
+    text: (application === null || application === void 0 ? void 0 : application.readingQualityCode) || t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    key: t("WS_CONSUMPTION_DETAILS_LAST_READING_LABEL"),
+    label: `${t("WS_CONSUMPTION_DETAILS_LAST_READING_LABEL")}`,
     text: (application === null || application === void 0 ? void 0 : application.lastReading) || t("NA"),
-    textStyle: {
-      whiteSpace: "pre"
-    }
+    className: "border-none"
   }), /*#__PURE__*/React.createElement(Row, {
-    className: "border-none",
-    label: t("WS_CONSUMPTION_DETAILS_LAST_READING_DATE_LABEL"),
-    text: Digit.DateUtils.ConvertEpochToDate(application === null || application === void 0 ? void 0 : application.lastReadingDate) || t("NA"),
-    textStyle: {
-      whiteSpace: "pre"
-    }
+    key: t("WS_CONSUMPTION_DETAILS_LAST_READING_DATE_LABEL"),
+    label: `${t("WS_CONSUMPTION_DETAILS_LAST_READING_DATE_LABEL")}`,
+    text: application !== null && application !== void 0 && application.lastReadingDate ? Digit.DateUtils.ConvertEpochToDate(application === null || application === void 0 ? void 0 : application.lastReadingDate) : t("NA"),
+    className: "border-none"
   }), /*#__PURE__*/React.createElement(Row, {
-    className: "border-none",
-    label: t("WS_CONSUMPTION_DETAILS_CURRENT_READING_LABEL"),
+    key: t("WS_SERV_DETAIL_CUR_METER_READ"),
+    label: `${t("WS_SERV_DETAIL_CUR_METER_READ")}`,
     text: (application === null || application === void 0 ? void 0 : application.currentReading) || t("NA"),
-    textStyle: {
-      whiteSpace: "pre"
-    }
+    className: "border-none"
   }), /*#__PURE__*/React.createElement(Row, {
-    className: "border-none",
-    label: t("WS_CONSUMPTION_DETAILS_CURRENT_READING_DATE_LABEL"),
-    text: Digit.DateUtils.ConvertEpochToDate(application === null || application === void 0 ? void 0 : application.currentReadingDate) || t("NA"),
-    textStyle: {
-      whiteSpace: "pre"
-    }
+    key: t("WS_CONSUMPTION_DETAILS_CURRENT_READING_DATE_LABEL"),
+    label: `${t("WS_CONSUMPTION_DETAILS_CURRENT_READING_DATE_LABEL")}`,
+    text: application !== null && application !== void 0 && application.currentReadingDate ? Digit.DateUtils.ConvertEpochToDate(application === null || application === void 0 ? void 0 : application.currentReadingDate) : t("NA"),
+    className: "border-none"
   }), /*#__PURE__*/React.createElement(Row, {
-    className: "border-none",
-    label: t("WS_CONSUMPTION_DETAILS_CONSUMPTION_LABEL"),
+    key: t("WS_CONSUMPTION_DETAILS_CONSUMPTION_LABEL"),
+    label: `${t("WS_CONSUMPTION_DETAILS_CONSUMPTION_LABEL")}`,
     text: consumption(application === null || application === void 0 ? void 0 : application.currentReading, application === null || application === void 0 ? void 0 : application.lastReading),
-    textStyle: {
-      whiteSpace: "pre"
-    }
+    className: "border-none"
   }))))), !(meterReadings !== null && meterReadings !== void 0 && meterReadings.length) > 0 && /*#__PURE__*/React.createElement("p", {
     style: {
       marginLeft: "16px",
       marginTop: "16px"
     }
-  }, t("WS_NO_CONSUMPTION_FOUND"))));
+  }, t("WS_NO_CONSUMPTION_FOUND")))), 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", {
+    style: {
+      maxHeight: "60vh",
+      overflowY: "auto",
+      padding: "16px"
+    }
+  }, /*#__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"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_DEVIATION_FACTOR"),
+    text: ((_meterReadingDetailsD27 = meterReadingDetailsData.reading) === null || _meterReadingDetailsD27 === void 0 ? void 0 : _meterReadingDetailsD27.deviationFactor) ?? t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_UNIT"),
+    text: ((_meterReadingDetailsD28 = meterReadingDetailsData.reading) === null || _meterReadingDetailsD28 === void 0 ? void 0 : _meterReadingDetailsD28.unit) || t("NA"),
+    className: "border-none"
+  }))), meterReadingDetailsData.billingDecision && /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginBottom: "16px"
+    }
+  }, /*#__PURE__*/React.createElement(Header, null, t("WS_BILLING_DECISION")), /*#__PURE__*/React.createElement(StatusTable, null, /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_BASIS"),
+    text: ((_meterReadingDetailsD29 = meterReadingDetailsData.billingDecision) === null || _meterReadingDetailsD29 === void 0 ? void 0 : _meterReadingDetailsD29.basis) || t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_REASON_CODE"),
+    text: ((_meterReadingDetailsD30 = meterReadingDetailsData.billingDecision) === null || _meterReadingDetailsD30 === void 0 ? void 0 : _meterReadingDetailsD30.reasonCode) || t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_REASON"),
+    text: ((_meterReadingDetailsD31 = meterReadingDetailsData.billingDecision) === null || _meterReadingDetailsD31 === void 0 ? void 0 : _meterReadingDetailsD31.reason) || t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_ACTUAL_READING_AVAILABLE"),
+    text: (_meterReadingDetailsD32 = meterReadingDetailsData.billingDecision) !== null && _meterReadingDetailsD32 !== void 0 && _meterReadingDetailsD32.actualReadingAvailable ? t("CORE_COMMON_YES") : t("CORE_COMMON_NO"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_HISTORICAL_AVERAGE"),
+    text: ((_meterReadingDetailsD33 = meterReadingDetailsData.billingDecision) === null || _meterReadingDetailsD33 === void 0 ? void 0 : _meterReadingDetailsD33.historicalAverage) ?? t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_MINIMUM_BILLING_CONSUMPTION"),
+    text: ((_meterReadingDetailsD34 = meterReadingDetailsData.billingDecision) === null || _meterReadingDetailsD34 === void 0 ? void 0 : _meterReadingDetailsD34.minimumBillingConsumption) ?? t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_AVERAGE_CYCLE_COUNT"),
+    text: ((_meterReadingDetailsD35 = meterReadingDetailsData.billingDecision) === null || _meterReadingDetailsD35 === void 0 ? void 0 : _meterReadingDetailsD35.averageCycleCount) ?? t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_PROVISIONAL_CYCLE_COUNT"),
+    text: ((_meterReadingDetailsD36 = meterReadingDetailsData.billingDecision) === null || _meterReadingDetailsD36 === void 0 ? void 0 : _meterReadingDetailsD36.provisionalCycleCount) ?? t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_BILLING_RULE_CODE"),
+    text: ((_meterReadingDetailsD37 = meterReadingDetailsData.billingDecision) === null || _meterReadingDetailsD37 === void 0 ? void 0 : _meterReadingDetailsD37.billingRuleCode) || t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_CONFIGURED_AVERAGE_MAXIMUM_CYCLES"),
+    text: ((_meterReadingDetailsD38 = meterReadingDetailsData.billingDecision) === null || _meterReadingDetailsD38 === void 0 ? void 0 : _meterReadingDetailsD38.configuredAverageMaximumCycles) ?? t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_CONFIGURED_PROVISIONAL_MAXIMUM_CYCLES"),
+    text: ((_meterReadingDetailsD39 = meterReadingDetailsData.billingDecision) === null || _meterReadingDetailsD39 === void 0 ? void 0 : _meterReadingDetailsD39.configuredProvisionalMaximumCycles) ?? t("NA"),
+    className: "border-none"
+  }))), meterReadingDetailsData.onePointFiveX && (((_meterReadingDetailsD40 = meterReadingDetailsData.onePointFiveX) === null || _meterReadingDetailsD40 === void 0 ? void 0 : _meterReadingDetailsD40.evaluated) === true || ((_meterReadingDetailsD41 = meterReadingDetailsData.onePointFiveX) === null || _meterReadingDetailsD41 === void 0 ? void 0 : _meterReadingDetailsD41.required) === true || ((_meterReadingDetailsD42 = meterReadingDetailsData.onePointFiveX) === null || _meterReadingDetailsD42 === void 0 ? void 0 : _meterReadingDetailsD42.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: (_meterReadingDetailsD43 = meterReadingDetailsData.onePointFiveX) !== null && _meterReadingDetailsD43 !== void 0 && _meterReadingDetailsD43.evaluated ? t("CORE_COMMON_YES") : t("CORE_COMMON_NO"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_MULTIPLIER"),
+    text: ((_meterReadingDetailsD44 = meterReadingDetailsData.onePointFiveX) === null || _meterReadingDetailsD44 === void 0 ? void 0 : _meterReadingDetailsD44.multiplier) ?? t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_PREVIOUS_CONSUMPTION"),
+    text: ((_meterReadingDetailsD45 = meterReadingDetailsData.onePointFiveX) === null || _meterReadingDetailsD45 === void 0 ? void 0 : _meterReadingDetailsD45.previousConsumption) ?? t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_THRESHOLD_CONSUMPTION"),
+    text: ((_meterReadingDetailsD46 = meterReadingDetailsData.onePointFiveX) === null || _meterReadingDetailsD46 === void 0 ? void 0 : _meterReadingDetailsD46.thresholdConsumption) ?? t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_ACTUAL_CONSUMPTION"),
+    text: ((_meterReadingDetailsD47 = meterReadingDetailsData.onePointFiveX) === null || _meterReadingDetailsD47 === void 0 ? void 0 : _meterReadingDetailsD47.actualConsumption) ?? t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_MONTHLY_CONSUMPTION"),
+    text: ((_meterReadingDetailsD48 = meterReadingDetailsData.onePointFiveX) === null || _meterReadingDetailsD48 === void 0 ? void 0 : _meterReadingDetailsD48.monthlyConsumption) ?? t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_BILLING_DAYS"),
+    text: ((_meterReadingDetailsD49 = meterReadingDetailsData.onePointFiveX) === null || _meterReadingDetailsD49 === void 0 ? void 0 : _meterReadingDetailsD49.billingDays) ?? t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_EXCEEDED"),
+    text: (_meterReadingDetailsD50 = meterReadingDetailsData.onePointFiveX) !== null && _meterReadingDetailsD50 !== void 0 && _meterReadingDetailsD50.exceeded ? t("CORE_COMMON_YES") : t("CORE_COMMON_NO"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_MINIMUM_ZRO_CONSUMPTION"),
+    text: ((_meterReadingDetailsD51 = meterReadingDetailsData.onePointFiveX) === null || _meterReadingDetailsD51 === void 0 ? void 0 : _meterReadingDetailsD51.minimumZroConsumption) ?? t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_ZRO_REQUIRED"),
+    text: (_meterReadingDetailsD52 = meterReadingDetailsData.onePointFiveX) !== null && _meterReadingDetailsD52 !== void 0 && _meterReadingDetailsD52.zroRequired ? t("CORE_COMMON_YES") : t("CORE_COMMON_NO"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_REASON"),
+    text: ((_meterReadingDetailsD53 = meterReadingDetailsData.onePointFiveX) === null || _meterReadingDetailsD53 === void 0 ? void 0 : _meterReadingDetailsD53.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: ((_meterReadingDetailsD54 = meterReadingDetailsData.charges.water) === null || _meterReadingDetailsD54 === void 0 ? void 0 : _meterReadingDetailsD54.consumption) != null ? `${meterReadingDetailsData.charges.water.consumption} ${((_meterReadingDetailsD55 = meterReadingDetailsData.charges.water) === null || _meterReadingDetailsD55 === void 0 ? void 0 : _meterReadingDetailsD55.unit) || ""}` : t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_WATER_CATEGORY"),
+    text: ((_meterReadingDetailsD56 = meterReadingDetailsData.charges.water) === null || _meterReadingDetailsD56 === void 0 ? void 0 : _meterReadingDetailsD56.category) || ((_meterReadingDetailsD57 = meterReadingDetailsData.charges.water) === null || _meterReadingDetailsD57 === void 0 ? void 0 : _meterReadingDetailsD57.tariffId) || t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_VOLUMETRIC_CHARGE"),
+    text: ((_meterReadingDetailsD58 = meterReadingDetailsData.charges.water) === null || _meterReadingDetailsD58 === void 0 ? void 0 : _meterReadingDetailsD58.volumetricCharge) ?? t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_SERVICE_CHARGE"),
+    text: ((_meterReadingDetailsD59 = meterReadingDetailsData.charges.water) === null || _meterReadingDetailsD59 === void 0 ? void 0 : _meterReadingDetailsD59.serviceCharge) ?? t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_TOTAL_WATER_CHARGE"),
+    text: ((_meterReadingDetailsD60 = meterReadingDetailsData.charges.water) === null || _meterReadingDetailsD60 === void 0 ? void 0 : _meterReadingDetailsD60.totalWaterCharge) ?? t("NA"),
+    className: "border-none"
+  }), (_meterReadingDetailsD61 = meterReadingDetailsData.charges.water) === null || _meterReadingDetailsD61 === void 0 ? void 0 : (_meterReadingDetailsD62 = _meterReadingDetailsD61.slabs) === null || _meterReadingDetailsD62 === void 0 ? void 0 : _meterReadingDetailsD62.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: ((_meterReadingDetailsD63 = meterReadingDetailsData.charges.sewerage) === null || _meterReadingDetailsD63 === void 0 ? void 0 : _meterReadingDetailsD63.regularCharge) ?? t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_ADDITIONAL_SEWERAGE_CHARGE"),
+    text: ((_meterReadingDetailsD64 = meterReadingDetailsData.charges.sewerage) === null || _meterReadingDetailsD64 === void 0 ? void 0 : _meterReadingDetailsD64.additionalCharge) ?? t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_TOTAL_SEWERAGE_CHARGE"),
+    text: ((_meterReadingDetailsD65 = meterReadingDetailsData.charges.sewerage) === null || _meterReadingDetailsD65 === void 0 ? void 0 : _meterReadingDetailsD65.totalCharge) ?? t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_REGULAR_RULE_CODE"),
+    text: ((_meterReadingDetailsD66 = meterReadingDetailsData.charges.sewerage) === null || _meterReadingDetailsD66 === void 0 ? void 0 : _meterReadingDetailsD66.regularRuleCode) || t("NA"),
+    className: "border-none"
+  }), ((_meterReadingDetailsD67 = meterReadingDetailsData.charges.sewerage) === null || _meterReadingDetailsD67 === void 0 ? void 0 : _meterReadingDetailsD67.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: ((_meterReadingDetailsD68 = meterReadingDetailsData.charges.sewerage) === null || _meterReadingDetailsD68 === void 0 ? void 0 : _meterReadingDetailsD68.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: ((_meterReadingDetailsD69 = meterReadingDetailsData.charges.rebates) === null || _meterReadingDetailsD69 === void 0 ? void 0 : _meterReadingDetailsD69.totalRebate) ?? t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_REBATE_EXPLANATION"),
+    text: ((_meterReadingDetailsD70 = meterReadingDetailsData.charges.rebates) === null || _meterReadingDetailsD70 === void 0 ? void 0 : _meterReadingDetailsD70.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: ((_meterReadingDetailsD71 = meterReadingDetailsData.charges) === null || _meterReadingDetailsD71 === void 0 ? void 0 : _meterReadingDetailsD71.grossAmount) ?? t("NA"),
+    className: "border-none"
+  }), ((_meterReadingDetailsD72 = meterReadingDetailsData.charges.water) === null || _meterReadingDetailsD72 === void 0 ? void 0 : _meterReadingDetailsD72.totalWaterCharge) != null && /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_TOTAL_WATER_CHARGE"),
+    text: meterReadingDetailsData.charges.water.totalWaterCharge,
+    className: "border-none"
+  }), ((_meterReadingDetailsD73 = meterReadingDetailsData.charges.sewerage) === null || _meterReadingDetailsD73 === void 0 ? void 0 : _meterReadingDetailsD73.totalCharge) != null && /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_TOTAL_SEWERAGE_CHARGE"),
+    text: meterReadingDetailsData.charges.sewerage.totalCharge,
+    className: "border-none"
+  }), ((_meterReadingDetailsD74 = meterReadingDetailsData.charges.rebates) === null || _meterReadingDetailsD74 === void 0 ? void 0 : _meterReadingDetailsD74.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: ((_meterReadingDetailsD75 = meterReadingDetailsData.charges) === null || _meterReadingDetailsD75 === void 0 ? void 0 : _meterReadingDetailsD75.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: ((_meterReadingDetailsD76 = meterReadingDetailsData.adjustments) === null || _meterReadingDetailsD76 === void 0 ? void 0 : _meterReadingDetailsD76.paidCorrectionApplied) ?? t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_RESIDUAL_PAID_CREDIT_CREATED"),
+    text: ((_meterReadingDetailsD77 = meterReadingDetailsData.adjustments) === null || _meterReadingDetailsD77 === void 0 ? void 0 : _meterReadingDetailsD77.residualPaidCreditCreated) ?? t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_CARRIED_FORWARD_CREDIT_APPLIED"),
+    text: ((_meterReadingDetailsD78 = meterReadingDetailsData.adjustments) === null || _meterReadingDetailsD78 === void 0 ? void 0 : _meterReadingDetailsD78.carriedForwardCreditApplied) ?? t("NA"),
+    className: "border-none"
+  }))), meterReadingDetailsData.correction && ((_meterReadingDetailsD79 = meterReadingDetailsData.correction) === null || _meterReadingDetailsD79 === void 0 ? void 0 : _meterReadingDetailsD79.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: (_meterReadingDetailsD80 = meterReadingDetailsData.correction) !== null && _meterReadingDetailsD80 !== void 0 && _meterReadingDetailsD80.required ? t("CORE_COMMON_YES") : t("CORE_COMMON_NO"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_STATUS"),
+    text: ((_meterReadingDetailsD81 = meterReadingDetailsData.correction) === null || _meterReadingDetailsD81 === void 0 ? void 0 : _meterReadingDetailsD81.status) || t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_REASON_CODE"),
+    text: ((_meterReadingDetailsD82 = meterReadingDetailsData.correction) === null || _meterReadingDetailsD82 === void 0 ? void 0 : _meterReadingDetailsD82.reasonCode) || t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_REASON"),
+    text: ((_meterReadingDetailsD83 = meterReadingDetailsData.correction) === null || _meterReadingDetailsD83 === void 0 ? void 0 : _meterReadingDetailsD83.reason) || t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_PREVIOUS_OK_READING"),
+    text: ((_meterReadingDetailsD84 = meterReadingDetailsData.correction) === null || _meterReadingDetailsD84 === void 0 ? void 0 : _meterReadingDetailsD84.previousOkReading) ?? t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_CURRENT_READING"),
+    text: ((_meterReadingDetailsD85 = meterReadingDetailsData.correction) === null || _meterReadingDetailsD85 === void 0 ? void 0 : _meterReadingDetailsD85.currentReading) ?? t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_CORRECTED_CONSUMPTION"),
+    text: ((_meterReadingDetailsD86 = meterReadingDetailsData.correction) === null || _meterReadingDetailsD86 === void 0 ? void 0 : _meterReadingDetailsD86.correctedConsumption) ?? t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_PREVIOUSLY_CALCULATED_AMOUNT"),
+    text: ((_meterReadingDetailsD87 = meterReadingDetailsData.correction) === null || _meterReadingDetailsD87 === void 0 ? void 0 : _meterReadingDetailsD87.previouslyCalculatedAmount) ?? t("NA"),
+    className: "border-none"
+  }))), meterReadingDetailsData.reconciliation && /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginBottom: "16px"
+    }
+  }, /*#__PURE__*/React.createElement(Header, null, t("WS_RECONCILIATION")), /*#__PURE__*/React.createElement(StatusTable, null, /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_CALCULATED_AMOUNT"),
+    text: ((_meterReadingDetailsD88 = meterReadingDetailsData.reconciliation) === null || _meterReadingDetailsD88 === void 0 ? void 0 : _meterReadingDetailsD88.calculatedAmount) ?? t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_BILLED_AMOUNT"),
+    text: ((_meterReadingDetailsD89 = meterReadingDetailsData.reconciliation) === null || _meterReadingDetailsD89 === void 0 ? void 0 : _meterReadingDetailsD89.billedAmount) ?? t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_DIFFERENCE"),
+    text: ((_meterReadingDetailsD90 = meterReadingDetailsData.reconciliation) === null || _meterReadingDetailsD90 === void 0 ? void 0 : _meterReadingDetailsD90.difference) ?? t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_STATUS"),
+    text: ((_meterReadingDetailsD91 = meterReadingDetailsData.reconciliation) === null || _meterReadingDetailsD91 === void 0 ? void 0 : _meterReadingDetailsD91.status) || t("NA"),
+    className: "border-none"
+  }))), meterReadingDetailsData.demand && /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginBottom: "16px"
+    }
+  }, /*#__PURE__*/React.createElement(Header, null, t("WS_DEMAND")), /*#__PURE__*/React.createElement(StatusTable, null, /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_CREATED"),
+    text: (_meterReadingDetailsD92 = meterReadingDetailsData.demand) !== null && _meterReadingDetailsD92 !== void 0 && _meterReadingDetailsD92.created ? t("CORE_COMMON_YES") : t("CORE_COMMON_NO"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_STATUS"),
+    text: ((_meterReadingDetailsD93 = meterReadingDetailsData.demand) === null || _meterReadingDetailsD93 === void 0 ? void 0 : _meterReadingDetailsD93.status) || t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_AMOUNT"),
+    text: ((_meterReadingDetailsD94 = meterReadingDetailsData.demand) === null || _meterReadingDetailsD94 === void 0 ? void 0 : _meterReadingDetailsD94.amount) ?? 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: (_meterReadingDetailsD95 = meterReadingDetailsData.bill) !== null && _meterReadingDetailsD95 !== void 0 && _meterReadingDetailsD95.generated ? t("CORE_COMMON_YES") : t("CORE_COMMON_NO"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_BILL_NUMBER"),
+    text: ((_meterReadingDetailsD96 = meterReadingDetailsData.bill) === null || _meterReadingDetailsD96 === void 0 ? void 0 : _meterReadingDetailsD96.number) || t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_BILL_STATUS"),
+    text: ((_meterReadingDetailsD97 = meterReadingDetailsData.bill) === null || _meterReadingDetailsD97 === void 0 ? void 0 : _meterReadingDetailsD97.status) || t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_BILL_AMOUNT"),
+    text: ((_meterReadingDetailsD98 = meterReadingDetailsData.bill) === null || _meterReadingDetailsD98 === void 0 ? void 0 : _meterReadingDetailsD98.amount) ?? t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_CALCULATED_AMOUNT"),
+    text: ((_meterReadingDetailsD99 = meterReadingDetailsData.bill) === null || _meterReadingDetailsD99 === void 0 ? void 0 : _meterReadingDetailsD99.calculatedAmount) ?? t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_DIFFERENCE"),
+    text: ((_meterReadingDetailsD100 = meterReadingDetailsData.bill) === null || _meterReadingDetailsD100 === void 0 ? void 0 : _meterReadingDetailsD100.difference) ?? t("NA"),
+    className: "border-none"
+  }), /*#__PURE__*/React.createElement(Row, {
+    label: t("WS_RECONCILIATION_STATUS"),
+    text: ((_meterReadingDetailsD101 = meterReadingDetailsData.bill) === null || _meterReadingDetailsD101 === void 0 ? void 0 : _meterReadingDetailsD101.reconciliationStatus) || 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")), ((_meterReadingDetailsD102 = meterReadingDetailsData.charges) === null || _meterReadingDetailsD102 === void 0 ? void 0 : _meterReadingDetailsD102.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", " ", ((_meterReadingDetailsD103 = meterReadingDetailsData.charges) === null || _meterReadingDetailsD103 === void 0 ? void 0 : _meterReadingDetailsD103.netAmount) ?? ((_meterReadingDetailsD104 = meterReadingDetailsData.bill) === null || _meterReadingDetailsD104 === void 0 ? void 0 : _meterReadingDetailsD104.amount) ?? ((_meterReadingDetailsD105 = meterReadingDetailsData.reconciliation) === null || _meterReadingDetailsD105 === void 0 ? void 0 : _meterReadingDetailsD105.billedAmount) ?? t("NA")))) : /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: "16px"
+    }
+  }, t("CS_NO_DATA"))), showToast && /*#__PURE__*/React.createElement(Toast, {
+    style: {
+      zIndex: "10000"
+    },
+    error: (showToast === null || showToast === void 0 ? void 0 : showToast.key) === "error" ? true : false,
+    label: t(showToast === null || showToast === void 0 ? void 0 : showToast.message),
+    onClose: () => setShowToast(null)
+  }));
 };
 
 const WSPayments = _ref => {
@@ -35222,6 +35839,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 +36116,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 +37953,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 +38245,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 +47907,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, {
@@ -50907,14 +51568,14 @@ 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;
+const ConsumptionDetails$1 = _ref => {
+  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 +51601,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 +52001,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 +52098,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 +58089,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 +58291,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"
@@ -57941,7 +59023,7 @@ const componentsToRegister = {
   WSAdditionalDetails: WSAdditionalDetails,
   WSMyConnections: MyConnections,
   WSCitizenConnectionDetails: ConnectionDetails$5,
-  WSCitizenConsumptionDetails: consumptionDetails,
+  WSCitizenConsumptionDetails: ConsumptionDetails,
   WSMyPayments: WSMyPayments,
   WSCitizenEditApplication: EditApplication,
   WSReSubmitDisconnectionApplication: ReSubmitDisconnectionApplication,
@@ -57962,7 +59044,7 @@ const componentsToRegister = {
   WSSearch: Search,
   WSSearchWater: SearchWater,
   WSEditApplication: EditApplication$1,
-  WSConsumptionDetails: ConsumptionDetails,
+  WSConsumptionDetails: ConsumptionDetails$1,
   WSModifyApplication: ModifyApplication,
   WSEditModifyApplication: EditModifyApplication,
   WSMutationApplication: MutationApplication,