@djb25/digit-ui-module-ws 1.0.50 → 1.0.52

package/dist/index.modern.js

@@ -1,7 +1,7 @@
 import React, { useState, useMemo, useEffect, useRef, Fragment as Fragment$1, useReducer, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link, useHistory, useLocation, Switch, Route, useRouteMatch, Redirect, useParams } from 'react-router-dom';
-import { Loader, Card, KeyNote, SubmitBar, InfoBannerIcon, SearchForm, SearchField, Dropdown, TextInput, Table, Banner, CardText, ActionBar, HomeIcon, AppContainer, ModuleHeader, ArrowLeft, PrivateRoute, LayoutWrapper, PrintBtnCommon, MultiLink, LinkButton, Toast, TickMark, FormStep, CardLabel, RadioOrSelect, CardHeader, CitizenInfoLabel, CardSubHeader, LabelFieldPair, DatePicker, CollapsibleCardPage, RadioButtons, UploadFile, ViewsIcon, Modal, DeleteIcon, CardLabelError, WrapUnMaskComponent, MobileNumber, CheckBox, StatusTable, Row, Header, CardSectionHeader, InfoIcon, TextArea, FilterFormField, RemoveableTag, MultiSelectDropdown, InboxComposer, DropIcon, WSICon, EmployeeModuleCard, SearchAction, PopUp, DetailsCard, CloseSvg, Localities, DownloadBtnCommon, CollectionIcon, ResponseComposer, TelePhone, DisplayPhotos, PDFSvg, GenericFileIcon, EditIcon, Label, CardSectionSubText, DownloadIcon, CardLabelDesc, VerticalTimeline, FormComposer, MultiUploadWrapper, Close as Close$e, BreakLine, AddIcon, CheckPoint, ConnectingCheckPoints, Menu, ButtonSelector, CitizenHomeCard } from '@djb25/digit-ui-react-components';
+import { Loader, Card, KeyNote, SubmitBar, InfoBannerIcon, SearchForm, SearchField, Dropdown, TextInput, Table, Banner, CardText, ActionBar, HomeIcon, AppContainer, ModuleHeader, ArrowLeft, PrivateRoute, VerticalTimeline, CollapsibleCardPage, LabelFieldPair, CardLabel, CardLabelError, LayoutWrapper, PrintBtnCommon, MultiLink, LinkButton, Toast, TickMark, FormStep, RadioOrSelect, CardHeader, CitizenInfoLabel, CardSubHeader, DatePicker, RadioButtons, UploadFile, ViewsIcon, Modal, DeleteIcon, WrapUnMaskComponent, MobileNumber, CheckBox, StatusTable, Row, Header, CardSectionHeader, InfoIcon, TextArea, FilterFormField, RemoveableTag, MultiSelectDropdown, InboxComposer, DropIcon, WSICon, EmployeeModuleCard, SearchAction, PopUp, DetailsCard, CloseSvg, Localities, DownloadBtnCommon, CollectionIcon, ResponseComposer, TelePhone, DisplayPhotos, PDFSvg, GenericFileIcon, EditIcon, Label, CardSectionSubText, DownloadIcon, CardLabelDesc, FormComposer, MultiUploadWrapper, Close as Close$e, BreakLine, AddIcon, CheckPoint, ConnectingCheckPoints, Menu, ButtonSelector, CitizenHomeCard } from '@djb25/digit-ui-react-components';
 import { useForm, Controller, useWatch, useFormContext } from 'react-hook-form';
 import { read, utils as utils$1 } from 'xlsx';
 import { useQueryClient } from 'react-query';
@@ -1853,6 +1853,29 @@ const checkForNA = function (value) {
   }
   return value && value != null && value !== undefined && value !== "" && value !== "Image" ? value : " NA";
 };
+const WSCalculationPayload = (data, tenantId) => {
+  var _useDetails$colonyNam, _useDetails$categoryT, _useDetails$propertyC, _useDetails$propertyT, _useDetails$propertyC2, _useDetails$WaterConn, _useDetails$noOfFloor;
+  const useDetails = (data === null || data === void 0 ? void 0 : data.useDetails) || data || {};
+  const payload = {
+    connectionType: (data === null || data === void 0 ? void 0 : data.connectionType) || "METERED",
+    colonyCategory: (useDetails === null || useDetails === void 0 ? void 0 : (_useDetails$colonyNam = useDetails.colonyName) === null || _useDetails$colonyNam === void 0 ? void 0 : _useDetails$colonyNam.code) || (useDetails === null || useDetails === void 0 ? void 0 : useDetails.colonyCategory) || "",
+    categoryType: (useDetails === null || useDetails === void 0 ? void 0 : (_useDetails$categoryT = useDetails.categoryType) === null || _useDetails$categoryT === void 0 ? void 0 : _useDetails$categoryT.code) || "",
+    propertyCategory: (useDetails === null || useDetails === void 0 ? void 0 : (_useDetails$propertyC = useDetails.propertyCategory) === null || _useDetails$propertyC === void 0 ? void 0 : _useDetails$propertyC.code) || "",
+    propertyType: (useDetails === null || useDetails === void 0 ? void 0 : (_useDetails$propertyT = useDetails.propertyType) === null || _useDetails$propertyT === void 0 ? void 0 : _useDetails$propertyT.code) || "",
+    usageCategory: (useDetails === null || useDetails === void 0 ? void 0 : (_useDetails$propertyC2 = useDetails.propertyCategory) === null || _useDetails$propertyC2 === void 0 ? void 0 : _useDetails$propertyC2.code) || "",
+    waterConnectionUsageType: (useDetails === null || useDetails === void 0 ? void 0 : (_useDetails$WaterConn = useDetails.WaterConnectionUsageType) === null || _useDetails$WaterConn === void 0 ? void 0 : _useDetails$WaterConn.code) || "",
+    landArea: useDetails !== null && useDetails !== void 0 && useDetails.plotArea ? Number(useDetails.plotArea) : 0,
+    builtUpArea: useDetails !== null && useDetails !== void 0 && useDetails.builtUpArea ? Number(useDetails.builtUpArea) : 0,
+    farArea: useDetails !== null && useDetails !== void 0 && useDetails.farArea ? Number(useDetails.farArea) : 0,
+    numberOfFloors: useDetails !== null && useDetails !== void 0 && (_useDetails$noOfFloor = useDetails.noOfFloors) !== null && _useDetails$noOfFloor !== void 0 && _useDetails$noOfFloor.code ? Number(useDetails.noOfFloors.code) : 0,
+    numberOfStudents: useDetails !== null && useDetails !== void 0 && useDetails.numberOfStudents ? Number(useDetails.numberOfStudents) : 0,
+    numberOfBeds: useDetails !== null && useDetails !== void 0 && useDetails.numberOfBeds ? Number(useDetails.numberOfBeds) : 0
+  };
+  if (useDetails !== null && useDetails !== void 0 && useDetails.NumberofRooms) payload.numberOfRooms = Number(useDetails.NumberofRooms);
+  if (useDetails !== null && useDetails !== void 0 && useDetails.NumberofDwellingUnits) payload.numberOfDwellingUnits = Number(useDetails.NumberofDwellingUnits);
+  if (useDetails !== null && useDetails !== void 0 && useDetails.ServantQuartersRoom) payload.servantQuartersRoom = Number(useDetails.ServantQuartersRoom);
+  return payload;
+};
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -9592,6 +9615,770 @@ const WSDisconnectionResponse$1 = props => {
   }))));
 };
 
+const _excluded = ["config", "onSelect", "formData", "formState", "setError", "clearErrors"];
+const colonyNameOptions = [{
+  code: "A",
+  name: "A"
+}, {
+  code: "B",
+  name: "B"
+}, {
+  code: "C",
+  name: "C"
+}, {
+  code: "D",
+  name: "D"
+}, {
+  code: "E",
+  name: "E"
+}, {
+  code: "F",
+  name: "F"
+}, {
+  code: "G",
+  name: "G"
+}, {
+  code: "H",
+  name: "H"
+}];
+const NUMBER_PATTERN = /^\d+$/;
+const DECIMAL_PATTERN = /^\d+(\.\d{1,2})?$/;
+const WSCalculation = _ref => {
+  var _formData$cpt2, _errors$useDetails, _errors$useDetails2, _errors$useDetails3, _errors$useDetails4, _errors$useDetails5, _errors$useDetails6, _errors$useDetails7, _errors$useDetails8, _errors$useDetails9, _errors$useDetails0, _errors$useDetails1, _errors$useDetails10, _errors$useDetails11;
+  let config = _ref.config,
+    onSelect = _ref.onSelect,
+    formData = _ref.formData,
+    setError = _ref.setError,
+    clearErrors = _ref.clearErrors,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const _useForm = useForm({
+      defaultValues: (formData === null || formData === void 0 ? void 0 : formData[config === null || config === void 0 ? void 0 : config.key]) || {
+        useDetails: {
+          propertyCategory: null,
+          propertyType: null,
+          WaterConnectionUsageType: null,
+          plotArea: "",
+          builtUpArea: "",
+          farArea: "",
+          NumberofDwellingUnits: "",
+          NumberofRooms: "",
+          numberOfBeds: "",
+          numberOfStudents: "",
+          ServantQuartersRoom: "",
+          colonyName: ""
+        }
+      }
+    }),
+    control = _useForm.control,
+    register = _useForm.register,
+    errors = _useForm.formState.errors,
+    watch = _useForm.watch,
+    setValue = _useForm.setValue,
+    reset = _useForm.reset;
+  const tenantId = Digit.ULBService.getCurrentTenantId();
+  const _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  const _Digit$Hooks$ws$useWS = Digit.Hooks.ws.useWSCalculater({
+      tenantId
+    }),
+    calculateCharges = _Digit$Hooks$ws$useWS.mutate;
+  const _Digit$Hooks$pt$usePr = Digit.Hooks.pt.usePropertyMDMS(tenantId, "PropertyTax", ["PropertyCategory", "PropertyType", "PropertyNewUsageType"]),
+    ptServicesMastersData = _Digit$Hooks$pt$usePr.data;
+  const _Digit$Hooks$ws$useMD = Digit.Hooks.ws.useMDMS(tenantId, "ws-services-masters", ["WsCategoryType"]),
+    wsServicesMastersData = _Digit$Hooks$ws$useMD.data;
+  const _useState = useState([]),
+    categoryTypeList = _useState[0],
+    setCategoryTypeList = _useState[1];
+  const _useState2 = useState(null),
+    calculationData = _useState2[0],
+    setCalculationData = _useState2[1];
+  useEffect(() => {
+    var _wsServicesMastersDat;
+    const categories = (wsServicesMastersData === null || wsServicesMastersData === void 0 ? void 0 : (_wsServicesMastersDat = wsServicesMastersData["ws-services-masters"]) === null || _wsServicesMastersDat === void 0 ? void 0 : _wsServicesMastersDat.WsCategoryType) || [];
+    categories.forEach(data => data.i18nKey = data.i18nKey || "WS_CATEGORY_" + data.code);
+    setCategoryTypeList(categories);
+  }, [wsServicesMastersData]);
+  useEffect(() => {
+    if (props.register) {
+      props.register({
+        name: "cpt"
+      });
+    }
+  }, [props.register]);
+  const formValue = watch();
+  const watchCategoryType = watch("useDetails.categoryType");
+  const watchPropertyType = watch("useDetails.propertyType");
+  const watchPropertyCategory = watch("useDetails.propertyCategory");
+  const watchWaterConnectionUsageType = watch("useDetails.WaterConnectionUsageType");
+  const isHospitalProperty = (watchPropertyType === null || watchPropertyType === void 0 ? void 0 : watchPropertyType.code) === "HOSPITAL_NURSING_HOME" || (watchPropertyType === null || watchPropertyType === void 0 ? void 0 : watchPropertyType.code) === "HospitalNursingHome";
+  const isHotelRestaurantProperty = (watchPropertyType === null || watchPropertyType === void 0 ? void 0 : watchPropertyType.code) === "HOTEL_OR_RESTAURANT" || (watchPropertyType === null || watchPropertyType === void 0 ? void 0 : watchPropertyType.code) === "HotelOrRestaurant";
+  const isSchoolCollegeProperty = (watchPropertyType === null || watchPropertyType === void 0 ? void 0 : watchPropertyType.code) === "School" || (watchPropertyType === null || watchPropertyType === void 0 ? void 0 : watchPropertyType.code) === "College";
+  const isDwellingUnit = (watchPropertyCategory === null || watchPropertyCategory === void 0 ? void 0 : watchPropertyCategory.code) === "RESIDENTIAL" || (watchPropertyCategory === null || watchPropertyCategory === void 0 ? void 0 : watchPropertyCategory.code) === "RESIDENTIAL";
+  const isServentHouse = (watchPropertyType === null || watchPropertyType === void 0 ? void 0 : watchPropertyType.code) === "Apartment" || (watchPropertyType === null || watchPropertyType === void 0 ? void 0 : watchPropertyType.code) === "FlatOrApartment" || (watchPropertyType === null || watchPropertyType === void 0 ? void 0 : watchPropertyType.code) === "IndividualHouse";
+  const categoryOptions = useMemo(() => {
+    var _ptServicesMastersDat, _ptServicesMastersDat2;
+    let options = (ptServicesMastersData === null || ptServicesMastersData === void 0 ? void 0 : (_ptServicesMastersDat = ptServicesMastersData.PropertyTax) === null || _ptServicesMastersDat === void 0 ? void 0 : (_ptServicesMastersDat2 = _ptServicesMastersDat.PropertyCategory) === null || _ptServicesMastersDat2 === void 0 ? void 0 : _ptServicesMastersDat2.filter(item => item.active)) || [];
+    if (watchCategoryType !== null && watchCategoryType !== void 0 && watchCategoryType.code) {
+      options = options.filter(item => item.type === watchCategoryType.code);
+    }
+    return options.map(item => ({
+      code: item.code,
+      name: item.name
+    }));
+  }, [ptServicesMastersData, watchCategoryType]);
+  useEffect(() => {
+    if (watchCategoryType && watchPropertyCategory) {
+      const isCategoryValid = categoryOptions.some(opt => opt.code === watchPropertyCategory.code);
+      if (!isCategoryValid) {
+        setValue("useDetails.propertyCategory", null);
+      }
+    }
+  }, [watchCategoryType, categoryOptions, setValue, watchPropertyCategory]);
+  const propertyTypeOptions = useMemo(() => {
+    var _ptServicesMastersDat3, _ptServicesMastersDat4;
+    let options = (ptServicesMastersData === null || ptServicesMastersData === void 0 ? void 0 : (_ptServicesMastersDat3 = ptServicesMastersData.PropertyTax) === null || _ptServicesMastersDat3 === void 0 ? void 0 : (_ptServicesMastersDat4 = _ptServicesMastersDat3.PropertyType) === null || _ptServicesMastersDat4 === void 0 ? void 0 : _ptServicesMastersDat4.filter(item => item.active)) || [];
+    if (watchPropertyCategory !== null && watchPropertyCategory !== void 0 && watchPropertyCategory.code) {
+      var _watchPropertyCategor;
+      if ((watchPropertyCategory === null || watchPropertyCategory === void 0 ? void 0 : (_watchPropertyCategor = watchPropertyCategory.code) === null || _watchPropertyCategor === void 0 ? void 0 : _watchPropertyCategor.toUpperCase()) !== "MIXED") {
+        options = options.filter(item => {
+          var _item$type, _watchPropertyCategor2;
+          return ((_item$type = item.type) === null || _item$type === void 0 ? void 0 : _item$type.toUpperCase()) === ((_watchPropertyCategor2 = watchPropertyCategory.code) === null || _watchPropertyCategor2 === void 0 ? void 0 : _watchPropertyCategor2.toUpperCase());
+        });
+      }
+    }
+    return options.map(item => ({
+      code: item.code,
+      name: item.name
+    }));
+  }, [ptServicesMastersData, watchPropertyCategory]);
+  useEffect(() => {
+    if (watchPropertyCategory && watchPropertyType) {
+      const isTypeValid = propertyTypeOptions.some(opt => opt.code === watchPropertyType.code);
+      if (!isTypeValid) {
+        setValue("useDetails.propertyType", null);
+      }
+    }
+  }, [watchPropertyCategory, propertyTypeOptions, setValue, watchPropertyType]);
+  const usageTypeOptions = useMemo(() => {
+    var _ptServicesMastersDat5, _ptServicesMastersDat6;
+    let options = (ptServicesMastersData === null || ptServicesMastersData === void 0 ? void 0 : (_ptServicesMastersDat5 = ptServicesMastersData.PropertyTax) === null || _ptServicesMastersDat5 === void 0 ? void 0 : (_ptServicesMastersDat6 = _ptServicesMastersDat5.PropertyNewUsageType) === null || _ptServicesMastersDat6 === void 0 ? void 0 : _ptServicesMastersDat6.filter(item => item.active)) || [];
+    if (watchPropertyCategory !== null && watchPropertyCategory !== void 0 && watchPropertyCategory.code) {
+      var _watchPropertyCategor3;
+      if ((watchPropertyCategory === null || watchPropertyCategory === void 0 ? void 0 : (_watchPropertyCategor3 = watchPropertyCategory.code) === null || _watchPropertyCategor3 === void 0 ? void 0 : _watchPropertyCategor3.toUpperCase()) !== "MIXED") {
+        options = options.filter(item => {
+          var _item$type2, _watchPropertyCategor4;
+          return ((_item$type2 = item.type) === null || _item$type2 === void 0 ? void 0 : _item$type2.toUpperCase()) === ((_watchPropertyCategor4 = watchPropertyCategory.code) === null || _watchPropertyCategor4 === void 0 ? void 0 : _watchPropertyCategor4.toUpperCase());
+        });
+      }
+    }
+    return options.map(item => ({
+      code: item.code,
+      name: item.name
+    }));
+  }, [ptServicesMastersData, watchPropertyCategory]);
+  useEffect(() => {
+    if (watchPropertyType && watchWaterConnectionUsageType) {
+      const isUsageTypeValid = usageTypeOptions.some(opt => opt.code === watchWaterConnectionUsageType.code);
+      if (!isUsageTypeValid) {
+        setValue("useDetails.WaterConnectionUsageType", null);
+      }
+    }
+  }, [watchPropertyType, usageTypeOptions, setValue, watchWaterConnectionUsageType]);
+  const lastSentValue = React.useRef(null);
+  useEffect(() => {
+    if (!lodash.isEqual(lastSentValue.current, formValue)) {
+      lastSentValue.current = lodash.cloneDeep(formValue);
+      onSelect === null || onSelect === void 0 ? void 0 : onSelect(config === null || config === void 0 ? void 0 : config.key, formValue);
+    }
+  }, [formValue, config === null || config === void 0 ? void 0 : config.key, onSelect]);
+  useEffect(() => {
+    var _formData$cpt;
+    if (formData !== null && formData !== void 0 && (_formData$cpt = formData.cpt) !== null && _formData$cpt !== void 0 && _formData$cpt.details) {
+      var _details$usageCategor, _details$landArea, _details$superBuiltUp;
+      const details = formData.cpt.details;
+      const additionalDetails = (details === null || details === void 0 ? void 0 : details.additionalDetails) || {};
+      const catType = additionalDetails.categoryType || ((_details$usageCategor = details.usageCategory) !== null && _details$usageCategor !== void 0 && _details$usageCategor.includes("RESIDENTIAL") ? "DOMESTIC" : "NON_DOMESTIC");
+      setValue("useDetails.categoryType", (categoryTypeList === null || categoryTypeList === void 0 ? void 0 : categoryTypeList.find(o => o.code === catType)) || null);
+      setValue("useDetails.propertyCategory", (categoryOptions === null || categoryOptions === void 0 ? void 0 : categoryOptions.find(o => o.code === (additionalDetails.propertyCategory || details.usageCategory))) || null);
+      setValue("useDetails.propertyType", (propertyTypeOptions === null || propertyTypeOptions === void 0 ? void 0 : propertyTypeOptions.find(o => o.code === (additionalDetails.propertyType || details.propertyType))) || null);
+      setValue("useDetails.WaterConnectionUsageType", (usageTypeOptions === null || usageTypeOptions === void 0 ? void 0 : usageTypeOptions.find(o => o.code === additionalDetails.waterConnectionUsageType)) || null);
+      setValue("useDetails.plotArea", additionalDetails.plotArea || (details === null || details === void 0 ? void 0 : (_details$landArea = details.landArea) === null || _details$landArea === void 0 ? void 0 : _details$landArea.toString()) || "");
+      setValue("useDetails.builtUpArea", additionalDetails.builtUpArea || (details === null || details === void 0 ? void 0 : (_details$superBuiltUp = details.superBuiltUpArea) === null || _details$superBuiltUp === void 0 ? void 0 : _details$superBuiltUp.toString()) || "");
+      setValue("useDetails.NumberofDwellingUnits", additionalDetails.numberOfDwellingUnits || additionalDetails.noOfDwellingUnits || (details === null || details === void 0 ? void 0 : details.noOfDwellingUnits) || "");
+      setValue("useDetails.NumberofRooms", additionalDetails.numberOfRooms || additionalDetails.noOfRooms || (details === null || details === void 0 ? void 0 : details.noOfRooms) || "");
+      setValue("useDetails.colonyName", additionalDetails.colonyName || "");
+    } else if ((formData === null || formData === void 0 ? void 0 : formData.cpt) === null) {
+      setValue("useDetails.categoryType", null);
+      setValue("useDetails.propertyCategory", null);
+      setValue("useDetails.propertyType", null);
+      setValue("useDetails.WaterConnectionUsageType", null);
+      setValue("useDetails.plotArea", "");
+      setValue("useDetails.builtUpArea", "");
+      setValue("useDetails.farArea", "");
+      setValue("useDetails.NumberofDwellingUnits", "");
+      setValue("useDetails.NumberofRooms", "");
+      setValue("useDetails.numberOfBeds", "");
+      setValue("useDetails.numberOfStudents", "");
+      setValue("useDetails.ServantQuartersRoom", "");
+      setValue("useDetails.colonyName", "");
+    }
+  }, [formData === null || formData === void 0 ? void 0 : (_formData$cpt2 = formData.cpt) === null || _formData$cpt2 === void 0 ? void 0 : _formData$cpt2.details, formData === null || formData === void 0 ? void 0 : formData.cpt, categoryOptions, propertyTypeOptions, usageTypeOptions, categoryTypeList, setValue]);
+  const lastErrorState = React.useRef(null);
+  useEffect(() => {
+    const hasErrors = Object.keys(errors).length > 0;
+    if (lastErrorState.current !== hasErrors) {
+      lastErrorState.current = hasErrors;
+      if (hasErrors) {
+        if (setError) setError(config === null || config === void 0 ? void 0 : config.key, {
+          type: "custom",
+          message: "Validation failed"
+        });
+      } else {
+        if (clearErrors) clearErrors(config === null || config === void 0 ? void 0 : config.key);
+      }
+    }
+  }, [errors, config === null || config === void 0 ? void 0 : config.key, setError, clearErrors]);
+  const errorStyle = {
+    width: "70%",
+    marginLeft: "30%",
+    fontSize: "12px",
+    marginTop: "-21px"
+  };
+  const isMobile = window.Digit.Utils.browser.isMobile();
+  const handleSubmit = () => {
+    const payload = WSCalculationPayload(formValue);
+    calculateCharges(payload, {
+      onSuccess: data => {
+        setCalculationData(data);
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect(config === null || config === void 0 ? void 0 : config.key, _extends({}, formValue, {
+          payload,
+          calculationResponse: data
+        }));
+      },
+      onError: error => {
+        var _error$response, _error$response$data, _error$response$data$, _error$response$data$2;
+        if (setError) setError(config === null || config === void 0 ? void 0 : config.key, {
+          type: "custom",
+          message: (error === null || error === void 0 ? void 0 : (_error$response = error.response) === null || _error$response === void 0 ? void 0 : (_error$response$data = _error$response.data) === null || _error$response$data === void 0 ? void 0 : (_error$response$data$ = _error$response$data.Errors) === null || _error$response$data$ === void 0 ? void 0 : (_error$response$data$2 = _error$response$data$[0]) === null || _error$response$data$2 === void 0 ? void 0 : _error$response$data$2.message) || t("WS_CALCULATION_FAILED")
+        });
+      }
+    });
+  };
+  const RenderCalculationDetails = _ref2 => {
+    var _data$Calculation, _calc$calculationDeta, _calc$calculationDeta2, _calc$calculationDeta3, _waterDemandDetail$co, _waterDemandDetail$co2, _waterDemandDetail$co3, _waterDemandDetail$co4, _waterDemandDetail$co5, _waterDemandDetail$co6, _waterDemandDetail$co7, _waterDemandDetail$co8, _waterDemandDetail$co9, _waterDemandDetail$co0, _waterDemandDetail$co1, _waterDemandDetail$co10, _waterDemandDetail$co11, _waterDemandDetail$co12, _waterDemandDetail$co13, _waterDemandDetail$co14, _waterDemandDetail$co15, _waterDemandDetail$co16, _infraDetail$waterCom, _infraDetail$sewerCom, _infraDetail$grossIFC, _infraDetail$rebateAm, _infraDetail$netIFC;
+    let data = _ref2.data;
+    if (!data) return null;
+    const calc = (_data$Calculation = data.Calculation) === null || _data$Calculation === void 0 ? void 0 : _data$Calculation[0];
+    if (!calc) return null;
+    const propertyDetail = ((_calc$calculationDeta = calc.calculationDetail) === null || _calc$calculationDeta === void 0 ? void 0 : _calc$calculationDeta.propertyDetail) || {};
+    const waterDemandDetail = ((_calc$calculationDeta2 = calc.calculationDetail) === null || _calc$calculationDeta2 === void 0 ? void 0 : _calc$calculationDeta2.waterDemandDetail) || {};
+    const infraDetail = ((_calc$calculationDeta3 = calc.calculationDetail) === null || _calc$calculationDeta3 === void 0 ? void 0 : _calc$calculationDeta3.infrastructureChargeDetail) || {};
+    const taxHeadEstimates = calc.taxHeadEstimates || [];
+    const totalAmount = calc.totalAmount;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-details-wrapper"
+    }, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-detail-card"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-detail-card-header"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "ws-calc-detail-card-badge"
+    }, "1"), /*#__PURE__*/React.createElement("h3", {
+      className: "ws-calc-detail-card-title"
+    }, t("WS_PROPERTY_DETAILS"))), /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-property-box"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-grid-4"
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-label"
+    }, t("WS_PROPERTY_TYPE")), /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-value"
+    }, propertyDetail.propertyType || "-")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-label"
+    }, t("WS_PROPERTY_CATEGORY")), /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-value"
+    }, propertyDetail.usageCategory || "-")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-label"
+    }, t("WS_WATER_CONNECTION_USAGE_TYPE")), /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-value"
+    }, propertyDetail.waterConnectionUsageType || "-")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-label"
+    }, t("WS_COLONY_CATEGORY")), /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-pill"
+    }, propertyDetail.colonyCategory || "-"))), /*#__PURE__*/React.createElement("hr", {
+      className: "ws-calc-hr"
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-grid-4"
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-label"
+    }, t("WS_LAND_AREA")), /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-value"
+    }, propertyDetail.landArea || 0, " sq. m.")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-label"
+    }, t("WS_FAR_AREA")), /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-value"
+    }, propertyDetail.farArea || 0, " sq. m.")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-label"
+    }, t("WS_BUILT_UP_AREA")), /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-value"
+    }, ((_waterDemandDetail$co = waterDemandDetail.contextVariables) === null || _waterDemandDetail$co === void 0 ? void 0 : _waterDemandDetail$co.built_up_area) || 0, " sq. m.")), (propertyDetail.coveredArea > 0 || ((_waterDemandDetail$co2 = waterDemandDetail.contextVariables) === null || _waterDemandDetail$co2 === void 0 ? void 0 : _waterDemandDetail$co2.covered_area) > 0) && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-label"
+    }, t("WS_COVERED_AREA")), /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-value"
+    }, propertyDetail.coveredArea || ((_waterDemandDetail$co3 = waterDemandDetail.contextVariables) === null || _waterDemandDetail$co3 === void 0 ? void 0 : _waterDemandDetail$co3.covered_area), " sq. m.")), (propertyDetail.numberOfDwellingUnits > 0 || ((_waterDemandDetail$co4 = waterDemandDetail.contextVariables) === null || _waterDemandDetail$co4 === void 0 ? void 0 : _waterDemandDetail$co4.dwelling_units) > 0 || ((_waterDemandDetail$co5 = waterDemandDetail.contextVariables) === null || _waterDemandDetail$co5 === void 0 ? void 0 : _waterDemandDetail$co5.total_du) > 0) && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-label"
+    }, t("WS_NUMBER_OF_DWELLING_UNITS")), /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-value"
+    }, propertyDetail.numberOfDwellingUnits || ((_waterDemandDetail$co6 = waterDemandDetail.contextVariables) === null || _waterDemandDetail$co6 === void 0 ? void 0 : _waterDemandDetail$co6.dwelling_units) || ((_waterDemandDetail$co7 = waterDemandDetail.contextVariables) === null || _waterDemandDetail$co7 === void 0 ? void 0 : _waterDemandDetail$co7.total_du))), (propertyDetail.numberOfBeds > 0 || ((_waterDemandDetail$co8 = waterDemandDetail.contextVariables) === null || _waterDemandDetail$co8 === void 0 ? void 0 : _waterDemandDetail$co8.total_beds) > 0) && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-label"
+    }, t("WS_NUMBER_OF_BEDS")), /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-value"
+    }, propertyDetail.numberOfBeds || ((_waterDemandDetail$co9 = waterDemandDetail.contextVariables) === null || _waterDemandDetail$co9 === void 0 ? void 0 : _waterDemandDetail$co9.total_beds))), (propertyDetail.numberOfRooms > 0 || ((_waterDemandDetail$co0 = waterDemandDetail.contextVariables) === null || _waterDemandDetail$co0 === void 0 ? void 0 : _waterDemandDetail$co0.total_rooms) > 0) && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-label"
+    }, t("WS_NUMBER_OF_ROOMS")), /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-value"
+    }, propertyDetail.numberOfRooms || ((_waterDemandDetail$co1 = waterDemandDetail.contextVariables) === null || _waterDemandDetail$co1 === void 0 ? void 0 : _waterDemandDetail$co1.total_rooms))), (propertyDetail.numberOfStudents > 0 || ((_waterDemandDetail$co10 = waterDemandDetail.contextVariables) === null || _waterDemandDetail$co10 === void 0 ? void 0 : _waterDemandDetail$co10.total_students) > 0) && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-label"
+    }, t("WS_NUMBER_OF_STUDENTS")), /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-value"
+    }, propertyDetail.numberOfStudents || ((_waterDemandDetail$co11 = waterDemandDetail.contextVariables) === null || _waterDemandDetail$co11 === void 0 ? void 0 : _waterDemandDetail$co11.total_students))), (propertyDetail.numberOfStaff > 0 || ((_waterDemandDetail$co12 = waterDemandDetail.contextVariables) === null || _waterDemandDetail$co12 === void 0 ? void 0 : _waterDemandDetail$co12.total_staff) > 0) && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-label"
+    }, t("WS_NUMBER_OF_STAFF")), /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-value"
+    }, propertyDetail.numberOfStaff || ((_waterDemandDetail$co13 = waterDemandDetail.contextVariables) === null || _waterDemandDetail$co13 === void 0 ? void 0 : _waterDemandDetail$co13.total_staff))), ((_waterDemandDetail$co14 = waterDemandDetail.contextVariables) === null || _waterDemandDetail$co14 === void 0 ? void 0 : _waterDemandDetail$co14.total_seats) > 0 && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-label"
+    }, t("WS_NUMBER_OF_SEATS")), /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-value"
+    }, waterDemandDetail.contextVariables.total_seats)), ((_waterDemandDetail$co15 = waterDemandDetail.contextVariables) === null || _waterDemandDetail$co15 === void 0 ? void 0 : _waterDemandDetail$co15.highest_shift_strength) > 0 && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-label"
+    }, t("WS_HIGHEST_SHIFT_STRENGTH")), /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-value"
+    }, waterDemandDetail.contextVariables.highest_shift_strength)), ((_waterDemandDetail$co16 = waterDemandDetail.contextVariables) === null || _waterDemandDetail$co16 === void 0 ? void 0 : _waterDemandDetail$co16.sanctioned_beds) > 0 && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-label"
+    }, t("WS_SANCTIONED_BEDS")), /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-value"
+    }, waterDemandDetail.contextVariables.sanctioned_beds))))), /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-detail-card"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-detail-card-header"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "ws-calc-detail-card-badge"
+    }, "2"), /*#__PURE__*/React.createElement("h3", {
+      className: "ws-calc-detail-card-title"
+    }, t("WS_WATER_DEMAND_DETAILS"))), /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-split-card"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-split-left"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-row"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "ws-calc-row-label"
+    }, t("WS_MATCHED_NORM_CODE")), /*#__PURE__*/React.createElement("span", {
+      className: "ws-calc-row-value"
+    }, waterDemandDetail.matchedNormCode || "-")), /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-row"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "ws-calc-row-label"
+    }, t("WS_MATCHED_NORM_NAME")), /*#__PURE__*/React.createElement("span", {
+      className: "ws-calc-row-value-right"
+    }, waterDemandDetail.matchedNormName || "-")), /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-row"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "ws-calc-row-label"
+    }, t("WS_FORMULA_USED")), /*#__PURE__*/React.createElement("span", {
+      className: "ws-calc-row-value"
+    }, waterDemandDetail.formulaUsed || "-")), /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-row"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "ws-calc-row-label"
+    }, t("WS_CALCULATED_OCCUPANCY")), /*#__PURE__*/React.createElement("span", {
+      className: "ws-calc-row-value"
+    }, waterDemandDetail.calculatedOccupancy || 0, " Persons")), /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-row-last"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "ws-calc-row-label"
+    }, t("WS_LPCD_SELECTED")), /*#__PURE__*/React.createElement("span", {
+      className: "ws-calc-row-value"
+    }, waterDemandDetail.chosenLpcd || 0, " LPD"))), /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-split-right"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-row"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "ws-calc-row-label"
+    }, t("WS_BASE_DEMAND")), /*#__PURE__*/React.createElement("span", {
+      className: "ws-calc-row-value"
+    }, waterDemandDetail.baseDemand || 0, " L/day")), /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-row",
+      style: {
+        marginBottom: "24px"
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "ws-calc-row-label"
+    }, t("WS_CONTINGENCY")), /*#__PURE__*/React.createElement("span", {
+      className: "ws-calc-row-value"
+    }, waterDemandDetail.contingencyPercentage || 0, "%")), /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-highlight-blue"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "ws-calc-highlight-blue-label"
+    }, t("WS_TOTAL_WATER_DEMAND")), /*#__PURE__*/React.createElement("span", {
+      className: "ws-calc-highlight-blue-value"
+    }, waterDemandDetail.totalWaterDemandLPD || 0, " L/day"))))), /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-detail-card"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-detail-card-header"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "ws-calc-detail-card-badge"
+    }, "3"), /*#__PURE__*/React.createElement("h3", {
+      className: "ws-calc-detail-card-title"
+    }, t("WS_INFRASTRUCTURE_CHARGE_DETAILS"))), /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-split-card"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-split-left"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-row"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "ws-calc-row-label"
+    }, t("WS_COLONY_CATEGORY")), /*#__PURE__*/React.createElement("span", {
+      className: "ws-calc-row-value"
+    }, infraDetail.colonyCategory || "-")), /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-row"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "ws-calc-row-label"
+    }, t("WS_PLOT_AREA")), /*#__PURE__*/React.createElement("span", {
+      className: "ws-calc-row-value"
+    }, infraDetail.plotArea || 0, " sq. m.")), /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-row"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "ws-calc-row-label"
+    }, t("WS_MINIMUM_PLOT_AREA")), /*#__PURE__*/React.createElement("span", {
+      className: "ws-calc-row-value"
+    }, infraDetail.minimumPlotArea || 0, " sq. m.")), /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-row"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "ws-calc-row-label"
+    }, t("WS_WATER_RATE")), /*#__PURE__*/React.createElement("span", {
+      className: "ws-calc-row-value"
+    }, "\u20B9 ", infraDetail.waterRatePerLPD || 0, " / LPD")), /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-row-last"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "ws-calc-row-label"
+    }, t("WS_SEWER_RATE")), /*#__PURE__*/React.createElement("span", {
+      className: "ws-calc-row-value"
+    }, "\u20B9 ", infraDetail.sewerRatePerLPD || 0, " / LPD"))), /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-split-right"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-row"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "ws-calc-row-label"
+    }, t("WS_WATER_COMPONENT_IFC")), /*#__PURE__*/React.createElement("span", {
+      className: "ws-calc-row-value"
+    }, "\u20B9 ", ((_infraDetail$waterCom = infraDetail.waterComponentIFC) === null || _infraDetail$waterCom === void 0 ? void 0 : _infraDetail$waterCom.toLocaleString("en-IN")) || 0)), /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-row"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "ws-calc-row-label"
+    }, t("WS_SEWER_COMPONENT_IFC")), /*#__PURE__*/React.createElement("span", {
+      className: "ws-calc-row-value"
+    }, "\u20B9 ", ((_infraDetail$sewerCom = infraDetail.sewerComponentIFC) === null || _infraDetail$sewerCom === void 0 ? void 0 : _infraDetail$sewerCom.toLocaleString("en-IN")) || 0)), /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-row"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "ws-calc-row-label"
+    }, t("WS_GROSS_IFC")), /*#__PURE__*/React.createElement("span", {
+      className: "ws-calc-row-value"
+    }, "\u20B9 ", ((_infraDetail$grossIFC = infraDetail.grossIFC) === null || _infraDetail$grossIFC === void 0 ? void 0 : _infraDetail$grossIFC.toLocaleString("en-IN")) || 0)), /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-row"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "ws-calc-row-label"
+    }, t("WS_REBATE"), " (", infraDetail.rebatePercentage || 0, "%)"), /*#__PURE__*/React.createElement("span", {
+      className: "ws-calc-row-value-red"
+    }, "- \u20B9 ", ((_infraDetail$rebateAm = infraDetail.rebateAmount) === null || _infraDetail$rebateAm === void 0 ? void 0 : _infraDetail$rebateAm.toLocaleString("en-IN")) || 0)), /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-highlight-green"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "ws-calc-highlight-green-label"
+    }, t("WS_NET_INFRASTRUCTURE_CHARGE")), /*#__PURE__*/React.createElement("span", {
+      className: "ws-calc-highlight-green-value"
+    }, "\u20B9 ", ((_infraDetail$netIFC = infraDetail.netIFC) === null || _infraDetail$netIFC === void 0 ? void 0 : _infraDetail$netIFC.toLocaleString("en-IN")) || 0))))), /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-detail-card",
+      style: {
+        marginBottom: "0"
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-detail-card-header"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "ws-calc-detail-card-badge"
+    }, "4"), /*#__PURE__*/React.createElement("h3", {
+      className: "ws-calc-detail-card-title"
+    }, t("WS_FEE_SUMMARY"))), /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-split-card",
+      style: {
+        marginBottom: "0"
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-split-left",
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center"
+      }
+    }, taxHeadEstimates.map((taxHead, index) => {
+      var _taxHead$estimateAmou;
+      return /*#__PURE__*/React.createElement("div", {
+        key: index,
+        className: "ws-calc-row"
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "ws-calc-row-label"
+      }, t(taxHead.taxHeadCode)), /*#__PURE__*/React.createElement("span", {
+        className: "ws-calc-row-value"
+      }, "\u20B9 ", (_taxHead$estimateAmou = taxHead.estimateAmount) === null || _taxHead$estimateAmou === void 0 ? void 0 : _taxHead$estimateAmou.toLocaleString("en-IN")));
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "ws-calc-highlight-purple"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "ws-calc-highlight-purple-label"
+    }, t("WS_TOTAL_AMOUNT_PAYABLE")), /*#__PURE__*/React.createElement("span", {
+      className: "ws-calc-highlight-purple-value"
+    }, "\u20B9 ", totalAmount === null || totalAmount === void 0 ? void 0 : totalAmount.toLocaleString("en-IN")))))));
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "employee-form-section-wrapper"
+  }, /*#__PURE__*/React.createElement(VerticalTimeline, {
+    config: [{
+      timeLine: [{
+        actions: t("WS_CALCULATION"),
+        currentStep: 1
+      }]
+    }],
+    showFinalStep: false
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1
+    }
+  }, /*#__PURE__*/React.createElement(CollapsibleCardPage, {
+    title: t("WS_CALCULATION"),
+    defaultOpen: true,
+    style: props.style
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "formcomposer-section-grid"
+  }, /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t("WS_CATEGORY_TYPE") + "*"), /*#__PURE__*/React.createElement("div", {
+    className: "form-field"
+  }, /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "useDetails.categoryType",
+    rules: {
+      required: t("REQUIRED_FIELD")
+    },
+    render: props => /*#__PURE__*/React.createElement(Dropdown, {
+      option: categoryTypeList,
+      optionKey: "i18nKey",
+      selected: props.value,
+      select: props.onChange,
+      t: t,
+      onBlur: props.onBlur
+    })
+  }))), (errors === null || errors === void 0 ? void 0 : (_errors$useDetails = errors.useDetails) === null || _errors$useDetails === void 0 ? void 0 : _errors$useDetails.categoryType) && /*#__PURE__*/React.createElement(CardLabelError, {
+    style: errorStyle
+  }, errors.useDetails.categoryType.message), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t("WS_PROPERTY_CATEGORY") + "*"), /*#__PURE__*/React.createElement("div", {
+    className: "form-field"
+  }, /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "useDetails.propertyCategory",
+    rules: {
+      required: t("REQUIRED_FIELD")
+    },
+    render: props => /*#__PURE__*/React.createElement(Dropdown, {
+      option: categoryOptions,
+      optionKey: "name",
+      selected: props.value,
+      select: props.onChange,
+      t: t,
+      onBlur: props.onBlur
+    })
+  }))), (errors === null || errors === void 0 ? void 0 : (_errors$useDetails2 = errors.useDetails) === null || _errors$useDetails2 === void 0 ? void 0 : _errors$useDetails2.propertyCategory) && /*#__PURE__*/React.createElement(CardLabelError, {
+    style: errorStyle
+  }, errors.useDetails.propertyCategory.message), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t("WS_PROPERTY_TYPE") + "*"), /*#__PURE__*/React.createElement("div", {
+    className: "form-field"
+  }, /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "useDetails.propertyType",
+    rules: {
+      required: t("REQUIRED_FIELD")
+    },
+    render: props => /*#__PURE__*/React.createElement(Dropdown, {
+      option: propertyTypeOptions,
+      optionKey: "name",
+      selected: props.value,
+      select: props.onChange,
+      t: t,
+      onBlur: props.onBlur
+    })
+  }))), (errors === null || errors === void 0 ? void 0 : (_errors$useDetails3 = errors.useDetails) === null || _errors$useDetails3 === void 0 ? void 0 : _errors$useDetails3.propertyType) && /*#__PURE__*/React.createElement(CardLabelError, {
+    style: errorStyle
+  }, errors.useDetails.propertyType.message), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t("WS_WATER_CONNECTION_USAGE_TYPE") + "*"), /*#__PURE__*/React.createElement("div", {
+    className: "form-field"
+  }, /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "useDetails.WaterConnectionUsageType",
+    rules: {
+      required: t("REQUIRED_FIELD")
+    },
+    render: props => /*#__PURE__*/React.createElement(Dropdown, {
+      option: usageTypeOptions,
+      optionKey: "name",
+      selected: props.value,
+      select: props.onChange,
+      t: t,
+      onBlur: props.onBlur
+    })
+  }))), (errors === null || errors === void 0 ? void 0 : (_errors$useDetails4 = errors.useDetails) === null || _errors$useDetails4 === void 0 ? void 0 : _errors$useDetails4.WaterConnectionUsageType) && /*#__PURE__*/React.createElement(CardLabelError, {
+    style: errorStyle
+  }, errors.useDetails.WaterConnectionUsageType.message), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t("WS_COLONY_NAME") + "*"), /*#__PURE__*/React.createElement("div", {
+    className: "form-field"
+  }, /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "useDetails.colonyName",
+    rules: {
+      required: t("REQUIRED_FIELD")
+    },
+    render: props => /*#__PURE__*/React.createElement(Dropdown, {
+      option: colonyNameOptions,
+      optionKey: "name",
+      selected: props.value,
+      select: props.onChange,
+      t: t,
+      onBlur: props.onBlur
+    })
+  }))), (errors === null || errors === void 0 ? void 0 : (_errors$useDetails5 = errors.useDetails) === null || _errors$useDetails5 === void 0 ? void 0 : _errors$useDetails5.colonyName) && /*#__PURE__*/React.createElement(CardLabelError, {
+    style: errorStyle
+  }, errors.useDetails.colonyName.message), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, "" + t("WS_PLOT_AREA")), /*#__PURE__*/React.createElement("div", {
+    className: "form-field"
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    t: t,
+    inputRef: register({
+      pattern: {
+        value: DECIMAL_PATTERN,
+        message: t("ERR_INVALID_DECIMAL")
+      }
+    }),
+    name: "useDetails.plotArea"
+  }))), (errors === null || errors === void 0 ? void 0 : (_errors$useDetails6 = errors.useDetails) === null || _errors$useDetails6 === void 0 ? void 0 : _errors$useDetails6.plotArea) && /*#__PURE__*/React.createElement(CardLabelError, {
+    style: errorStyle
+  }, errors.useDetails.plotArea.message), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, "" + t("WS_BUILT_UP_AREA")), /*#__PURE__*/React.createElement("div", {
+    className: "form-field"
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    t: t,
+    inputRef: register({
+      pattern: {
+        value: DECIMAL_PATTERN,
+        message: t("ERR_INVALID_DECIMAL")
+      }
+    }),
+    name: "useDetails.builtUpArea"
+  }))), (errors === null || errors === void 0 ? void 0 : (_errors$useDetails7 = errors.useDetails) === null || _errors$useDetails7 === void 0 ? void 0 : _errors$useDetails7.builtUpArea) && /*#__PURE__*/React.createElement(CardLabelError, {
+    style: errorStyle
+  }, errors.useDetails.builtUpArea.message), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, "" + t("WS_FAR_AREA")), /*#__PURE__*/React.createElement("div", {
+    className: "form-field"
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    t: t,
+    inputRef: register({
+      pattern: {
+        value: DECIMAL_PATTERN,
+        message: t("ERR_INVALID_DECIMAL")
+      }
+    }),
+    name: "useDetails.farArea"
+  }))), (errors === null || errors === void 0 ? void 0 : (_errors$useDetails8 = errors.useDetails) === null || _errors$useDetails8 === void 0 ? void 0 : _errors$useDetails8.farArea) && /*#__PURE__*/React.createElement(CardLabelError, {
+    style: errorStyle
+  }, errors.useDetails.farArea.message), isDwellingUnit ? /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, "" + t("WS_NUMBER_OF_DWELLING_UNITS")), /*#__PURE__*/React.createElement("div", {
+    className: "form-field"
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    t: t,
+    inputRef: register({
+      pattern: {
+        value: NUMBER_PATTERN,
+        message: t("ERR_INVALID_NUMBER")
+      }
+    }),
+    name: "useDetails.NumberofDwellingUnits"
+  }))) : null, isDwellingUnit && (errors === null || errors === void 0 ? void 0 : (_errors$useDetails9 = errors.useDetails) === null || _errors$useDetails9 === void 0 ? void 0 : _errors$useDetails9.NumberofDwellingUnits) && /*#__PURE__*/React.createElement(CardLabelError, {
+    style: errorStyle
+  }, errors.useDetails.NumberofDwellingUnits.message), isHotelRestaurantProperty ? /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t("WS_NUMBER_OF_ROOMS") + "*"), /*#__PURE__*/React.createElement("div", {
+    className: "form-field"
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    t: t,
+    inputRef: register({
+      pattern: {
+        value: NUMBER_PATTERN,
+        message: t("ERR_INVALID_NUMBER")
+      },
+      required: isHotelRestaurantProperty ? t("REQUIRED_FIELD") : false
+    }),
+    name: "useDetails.NumberofRooms"
+  }))) : null, isHotelRestaurantProperty && (errors === null || errors === void 0 ? void 0 : (_errors$useDetails0 = errors.useDetails) === null || _errors$useDetails0 === void 0 ? void 0 : _errors$useDetails0.NumberofRooms) && /*#__PURE__*/React.createElement(CardLabelError, {
+    style: errorStyle
+  }, errors.useDetails.NumberofRooms.message), isHospitalProperty ? /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t("WS_NUMBER_OF_BEDS") + "*"), /*#__PURE__*/React.createElement("div", {
+    className: "form-field"
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    t: t,
+    inputRef: register({
+      pattern: {
+        value: NUMBER_PATTERN,
+        message: t("ERR_INVALID_NUMBER")
+      },
+      required: isHospitalProperty ? t("REQUIRED_FIELD") : false
+    }),
+    name: "useDetails.numberOfBeds"
+  }))) : null, isHospitalProperty && (errors === null || errors === void 0 ? void 0 : (_errors$useDetails1 = errors.useDetails) === null || _errors$useDetails1 === void 0 ? void 0 : _errors$useDetails1.numberOfBeds) && /*#__PURE__*/React.createElement(CardLabelError, {
+    style: errorStyle
+  }, errors.useDetails.numberOfBeds.message), isSchoolCollegeProperty ? /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, "" + t("WS_NUMBER_OF_STUDENTS")), /*#__PURE__*/React.createElement("div", {
+    className: "form-field"
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    t: t,
+    inputRef: register({
+      pattern: {
+        value: NUMBER_PATTERN,
+        message: t("ERR_INVALID_NUMBER")
+      }
+    }),
+    name: "useDetails.numberOfStudents"
+  }))) : null, isSchoolCollegeProperty && (errors === null || errors === void 0 ? void 0 : (_errors$useDetails10 = errors.useDetails) === null || _errors$useDetails10 === void 0 ? void 0 : _errors$useDetails10.numberOfStudents) && /*#__PURE__*/React.createElement(CardLabelError, {
+    style: errorStyle
+  }, errors.useDetails.numberOfStudents.message), isServentHouse ? /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, "" + t("WS_SERVENT_HOUSE")), /*#__PURE__*/React.createElement("div", {
+    className: "form-field"
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    t: t,
+    inputRef: register({
+      pattern: {
+        value: NUMBER_PATTERN,
+        message: t("ERR_INVALID_NUMBER")
+      }
+    }),
+    name: "useDetails.ServantQuartersRoom"
+  }))) : null, isServentHouse && (errors === null || errors === void 0 ? void 0 : (_errors$useDetails11 = errors.useDetails) === null || _errors$useDetails11 === void 0 ? void 0 : _errors$useDetails11.ServantQuartersRoom) && /*#__PURE__*/React.createElement(CardLabelError, {
+    style: errorStyle
+  }, errors.useDetails.ServantQuartersRoom.message))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      marginTop: "24px",
+      marginBottom: "32px",
+      justifyContent: isMobile ? "center" : "flex-end",
+      alignItems: "center"
+    }
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "clear-search generic-button",
+    style: {
+      marginRight: "24px"
+    },
+    onClick: () => {
+      reset();
+      setCalculationData(null);
+    }
+  }, t("CS_COMMON_CLEAR_SEARCH")), /*#__PURE__*/React.createElement(SubmitBar, {
+    label: t("ES_COMMON_CALCULATE"),
+    onSubmit: handleSubmit
+  })), calculationData && /*#__PURE__*/React.createElement(RenderCalculationDetails, {
+    data: calculationData
+  })));
+};
+
 const BILLSBreadCrumbs = _ref => {
   var _applicationDetails$a, _applicationDetails$a9, _applicationDetails$a0, _applicationDetails$a1, _applicationDetails$a13, _applicationDetails$a14, _reciept_data$Payment2;
   const getRecieptSearch = function (tenantId, payments, consumerCodes, receiptKey) {
@@ -10017,6 +10804,10 @@ const BILLSBreadCrumbs = _ref => {
     path: "/digit-ui/employee/ws/water/bulk-bil",
     label: t("CS_TITLE_BULK_BILL"),
     show: location.pathname.includes("/ws/water/bulk-bill") ? true : false
+  }, {
+    path: "/digit-ui/employee/ws/water/calculation",
+    label: t("WS_CALCULATION"),
+    show: location.pathname.includes("/ws/water/calculation") ? true : false
   }];
   let lastCrumbIndex = findLastIndex(crumbs, "show", true);
   crumbs[lastCrumbIndex] = _extends({}, crumbs[lastCrumbIndex], {
@@ -10274,6 +11065,11 @@ const App$1 = _ref2 => {
     component: props => /*#__PURE__*/React.createElement(WSBulkBillGeneration, _extends({}, props, {
       parentRoute: path
     }))
+  }), /*#__PURE__*/React.createElement(PrivateRoute, {
+    path: path + "/water/calculation",
+    component: props => /*#__PURE__*/React.createElement(WSCalculation, _extends({}, props, {
+      parentRoute: path
+    }))
   }))))));
 };
 
@@ -20627,9 +21423,9 @@ const WSDjbEmployee = _ref => {
   return /*#__PURE__*/React.createElement(React.Fragment, null, FormContent);
 };
 
-const _excluded = ["t", "config", "onSelect", "formData", "formState", "setError", "clearErrors"];
-const NUMBER_PATTERN = /^\d+$/;
-const DECIMAL_PATTERN = /^\d+(\.\d{1,2})?$/;
+const _excluded$1 = ["t", "config", "onSelect", "formData", "formState", "setError", "clearErrors"];
+const NUMBER_PATTERN$1 = /^\d+$/;
+const DECIMAL_PATTERN$1 = /^\d+(\.\d{1,2})?$/;
 const PropertyWaterConnection = _ref => {
   var _formData$cpt2, _errors$useDetails, _errors$useDetails2, _errors$useDetails3, _errors$useDetails4, _errors$useDetails5, _errors$useDetails6, _errors$useDetails7, _errors$useDetails8, _errors$useDetails9, _errors$useDetails0, _errors$useDetails1, _errors$useDetails10, _errors$useDetails11, _errors$useDetails12;
   let t = _ref.t,
@@ -20638,7 +21434,7 @@ const PropertyWaterConnection = _ref => {
     formData = _ref.formData,
     setError = _ref.setError,
     clearErrors = _ref.clearErrors,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
   const _useForm = useForm({
       defaultValues: (formData === null || formData === void 0 ? void 0 : formData[config.key]) || {
         useDetails: {
@@ -20954,7 +21750,7 @@ const PropertyWaterConnection = _ref => {
     t: t,
     inputRef: register({
       pattern: {
-        value: DECIMAL_PATTERN,
+        value: DECIMAL_PATTERN$1,
         message: t("ERR_INVALID_DECIMAL")
       }
     }),
@@ -20968,7 +21764,7 @@ const PropertyWaterConnection = _ref => {
     t: t,
     inputRef: register({
       pattern: {
-        value: DECIMAL_PATTERN,
+        value: DECIMAL_PATTERN$1,
         message: t("ERR_INVALID_DECIMAL")
       }
     }),
@@ -20982,7 +21778,7 @@ const PropertyWaterConnection = _ref => {
     t: t,
     inputRef: register({
       pattern: {
-        value: DECIMAL_PATTERN,
+        value: DECIMAL_PATTERN$1,
         message: t("ERR_INVALID_DECIMAL")
       }
     }),
@@ -21015,7 +21811,7 @@ const PropertyWaterConnection = _ref => {
     t: t,
     inputRef: register({
       pattern: {
-        value: NUMBER_PATTERN,
+        value: NUMBER_PATTERN$1,
         message: t("ERR_INVALID_NUMBER")
       }
     }),
@@ -21029,7 +21825,7 @@ const PropertyWaterConnection = _ref => {
     t: t,
     inputRef: register({
       pattern: {
-        value: NUMBER_PATTERN,
+        value: NUMBER_PATTERN$1,
         message: t("ERR_INVALID_NUMBER")
       },
       required: isHotelRestaurantProperty ? t("REQUIRED_FIELD") : false
@@ -21044,7 +21840,7 @@ const PropertyWaterConnection = _ref => {
     t: t,
     inputRef: register({
       pattern: {
-        value: NUMBER_PATTERN,
+        value: NUMBER_PATTERN$1,
         message: t("ERR_INVALID_NUMBER")
       },
       required: isHospitalProperty ? t("REQUIRED_FIELD") : false
@@ -21059,7 +21855,7 @@ const PropertyWaterConnection = _ref => {
     t: t,
     inputRef: register({
       pattern: {
-        value: NUMBER_PATTERN,
+        value: NUMBER_PATTERN$1,
         message: t("ERR_INVALID_NUMBER")
       }
     }),
@@ -21073,7 +21869,7 @@ const PropertyWaterConnection = _ref => {
     t: t,
     inputRef: register({
       pattern: {
-        value: NUMBER_PATTERN,
+        value: NUMBER_PATTERN$1,
         message: t("ERR_INVALID_NUMBER")
       }
     }),
@@ -22045,7 +22841,7 @@ const SearchFields = _ref => {
   }, t("CS_COMMON_CLEAR_SEARCH"))));
 };
 
-const _excluded$1 = ["currentlyActiveMobileModal", "searchFormFieldsComponentProps", "tenantId"],
+const _excluded$2 = ["currentlyActiveMobileModal", "searchFormFieldsComponentProps", "tenantId"],
   _excluded2 = ["currentlyActiveMobileModal", "searchFormFieldsComponentProps", "tenantId"];
 const MobileSearchApplication = _ref => {
   let Controller = _ref.Controller,
@@ -22092,7 +22888,7 @@ const MobileSearchApplication = _ref => {
     let currentlyActiveMobileModal = _ref2.currentlyActiveMobileModal,
       searchFormFieldsComponentProps = _ref2.searchFormFieldsComponentProps,
       tenantId = _ref2.tenantId,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$1);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$2);
     const closeMobilePopupModal = props.closeMobilePopupModal;
     switch (currentlyActiveMobileModal) {
       case "SearchFormComponent":
@@ -22527,7 +23323,7 @@ const SearchFields$1 = _ref => {
   }, t("WS_SEARCH_CONNECTION_RESET_BUTTON"))));
 };
 
-const _excluded$2 = ["currentlyActiveMobileModal", "searchFormFieldsComponentProps", "tenantId"],
+const _excluded$3 = ["currentlyActiveMobileModal", "searchFormFieldsComponentProps", "tenantId"],
   _excluded2$1 = ["currentlyActiveMobileModal", "searchFormFieldsComponentProps", "tenantId"];
 const MobileSearchWater = _ref => {
   let Controller = _ref.Controller,
@@ -22572,7 +23368,7 @@ const MobileSearchWater = _ref => {
     let currentlyActiveMobileModal = _ref2.currentlyActiveMobileModal,
       searchFormFieldsComponentProps = _ref2.searchFormFieldsComponentProps,
       tenantId = _ref2.tenantId,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$2);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$3);
     const closeMobilePopupModal = props.closeMobilePopupModal;
     switch (currentlyActiveMobileModal) {
       case "SearchFormComponent":
@@ -23807,6 +24603,10 @@ const WSCard = () => {
       label: t("WS_WATER_APPLICATION_SEARCH"),
       link: "/digit-ui/employee/ws/water/search-application",
       roles: ["WS_CEMP", "WS_APPROVER", "WS_FIELD_INSPECTOR", "WS_DOC_VERIFIER", "WS_CLERK"]
+    }, {
+      label: t("WS_CALCULATION"),
+      link: "/digit-ui/employee/ws/water/calculation",
+      roles: ["WS_CEMP", "WS_APPROVER", "WS_FIELD_INSPECTOR", "WS_DOC_VERIFIER", "WS_CLERK"]
     }]
   };
   return /*#__PURE__*/React.createElement(EmployeeModuleCard, propsForModuleCard);
@@ -29002,7 +29802,7 @@ const WSFeeEstimation = _ref => {
 };
 
 const ViewBreakup = _ref => {
-  var _breakUpData$calculat, _breakUpData$calculat2, _wsAdditionalDetails$8, _breakUpData$billSlab4, _breakUpData$billSlab5, _breakUpData$billSlab6, _breakUpData$billSlab7, _breakUpData$billSlab8, _breakUpData$billSlab9;
+  var _breakUpData$calculat, _breakUpData$calculat2, _breakUpData$calculat3, _wsAdditionalDetails$8, _breakUpData$billSlab4, _breakUpData$billSlab5, _breakUpData$billSlab6, _breakUpData$billSlab7, _breakUpData$billSlab8, _breakUpData$billSlab9;
   let wsAdditionalDetails = _ref.wsAdditionalDetails,
     print = _ref.print,
     download = _ref.download;
@@ -29113,11 +29913,8 @@ const ViewBreakup = _ref => {
       title: t("WS_APPLICATION_FEE_HEADER"),
       values: amountRows([...((breakUpData === null || breakUpData === void 0 ? void 0 : (_breakUpData$billSlab = breakUpData.billSlabData) === null || _breakUpData$billSlab === void 0 ? void 0 : _breakUpData$billSlab.FEE) || []), ...((breakUpData === null || breakUpData === void 0 ? void 0 : (_breakUpData$billSlab2 = breakUpData.billSlabData) === null || _breakUpData$billSlab2 === void 0 ? void 0 : _breakUpData$billSlab2.CHARGES) || [])])
     }, {
-      title: "Taxes",
-      values: amountRows(breakUpData === null || breakUpData === void 0 ? void 0 : (_breakUpData$billSlab3 = breakUpData.billSlabData) === null || _breakUpData$billSlab3 === void 0 ? void 0 : _breakUpData$billSlab3.TAX)
-    }, {
-      title: "Water demand details",
-      values: waterDemandRows.map(_ref4 => {
+      title: "Property details",
+      values: propertyRows.map(_ref4 => {
         let label = _ref4.label,
           value = _ref4.value,
           currency = _ref4.currency,
@@ -29129,8 +29926,11 @@ const ViewBreakup = _ref => {
         };
       })
     }, {
-      title: "Infrastructure charge details",
-      values: infrastructureChargeRows.map(_ref5 => {
+      title: "Taxes",
+      values: amountRows(breakUpData === null || breakUpData === void 0 ? void 0 : (_breakUpData$billSlab3 = breakUpData.billSlabData) === null || _breakUpData$billSlab3 === void 0 ? void 0 : _breakUpData$billSlab3.TAX)
+    }, {
+      title: "Water demand details",
+      values: waterDemandRows.map(_ref5 => {
         let label = _ref5.label,
           value = _ref5.value,
           currency = _ref5.currency,
@@ -29141,6 +29941,19 @@ const ViewBreakup = _ref => {
           value: currency ? "\u20B9" + formatNumber(value) : isText ? value || "-" : "" + formatNumber(value) + unit
         };
       })
+    }, {
+      title: "Infrastructure charge details",
+      values: infrastructureChargeRows.map(_ref6 => {
+        let label = _ref6.label,
+          value = _ref6.value,
+          currency = _ref6.currency,
+          unit = _ref6.unit,
+          isText = _ref6.isText;
+        return {
+          title: label,
+          value: currency ? "\u20B9" + formatNumber(value) : isText ? value || "-" : "" + formatNumber(value) + unit
+        };
+      })
     }, {
       title: "Total",
       values: [{
@@ -29182,8 +29995,58 @@ const ViewBreakup = _ref => {
     printWindow.focus();
     printWindow.print();
   };
-  const waterDemandDetail = breakUpData === null || breakUpData === void 0 ? void 0 : (_breakUpData$calculat = breakUpData.calculationDetail) === null || _breakUpData$calculat === void 0 ? void 0 : _breakUpData$calculat.waterDemandDetail;
-  const infrastructureChargeDetail = breakUpData === null || breakUpData === void 0 ? void 0 : (_breakUpData$calculat2 = breakUpData.calculationDetail) === null || _breakUpData$calculat2 === void 0 ? void 0 : _breakUpData$calculat2.infrastructureChargeDetail;
+  const propertyDetail = breakUpData === null || breakUpData === void 0 ? void 0 : (_breakUpData$calculat = breakUpData.calculationDetail) === null || _breakUpData$calculat === void 0 ? void 0 : _breakUpData$calculat.propertyDetail;
+  const waterDemandDetail = breakUpData === null || breakUpData === void 0 ? void 0 : (_breakUpData$calculat2 = breakUpData.calculationDetail) === null || _breakUpData$calculat2 === void 0 ? void 0 : _breakUpData$calculat2.waterDemandDetail;
+  const infrastructureChargeDetail = breakUpData === null || breakUpData === void 0 ? void 0 : (_breakUpData$calculat3 = breakUpData.calculationDetail) === null || _breakUpData$calculat3 === void 0 ? void 0 : _breakUpData$calculat3.infrastructureChargeDetail;
+  const propertyRows = propertyDetail ? [{
+    label: "Property ID",
+    value: propertyDetail.propertyId,
+    isText: true
+  }, {
+    label: "Property type",
+    value: propertyDetail.propertyType,
+    isText: true
+  }, {
+    label: "Plot area",
+    value: propertyDetail.landArea,
+    unit: " (sq. meter.)"
+  }, {
+    label: "Built-up area",
+    value: propertyDetail.superBuiltUpArea,
+    unit: " (sq. meter.)"
+  }, {
+    label: "farArea",
+    value: propertyDetail.farArea,
+    isText: true
+  }, {
+    label: "coveredArea",
+    value: propertyDetail.coveredArea,
+    isText: true
+  }, {
+    label: "numberOfDwellingUnits",
+    value: propertyDetail.numberOfDwellingUnits,
+    isText: true
+  }, {
+    label: "numberOfBeds",
+    value: propertyDetail.numberOfBeds,
+    isText: true
+  }, {
+    label: "numberOfRooms",
+    value: propertyDetail.numberOfRooms,
+    isText: true
+  }, {
+    label: "numberOfStudents",
+    value: propertyDetail.numberOfStudents,
+    isText: true
+  }, {
+    label: "numberOfStaff",
+    value: propertyDetail.numberOfStaff,
+    isText: true
+  }, {
+    label: "Usage category",
+    value: propertyDetail.usageCategory,
+    isText: true
+  }] : [];
   const waterDemandRows = waterDemandDetail ? [{
     label: "Calculated occupancy",
     value: waterDemandDetail.calculatedOccupancy,
@@ -29325,6 +30188,12 @@ const ViewBreakup = _ref => {
     textStyle: {
       textAlign: "right"
     }
+  })), propertyRows.length > 0 && /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(CardSectionHeader, {
+    style: {
+      margin: "10px 0px"
+    }
+  }, "Property details"), /*#__PURE__*/React.createElement(DetailRows, {
+    rows: propertyRows
   })), waterDemandRows.length > 0 && /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(CardSectionHeader, {
     style: {
       margin: "10px 0px"
@@ -34054,7 +34923,7 @@ const WSPropertyLocationDetails = props => {
   return /*#__PURE__*/React.createElement(PropertyLocationDetails, props);
 };
 
-const _excluded$3 = ["errors"],
+const _excluded$4 = ["errors"],
   _excluded2$2 = ["register", "control", "watch", "setValue", "unregister", "handleSubmit", "formState", "getValues", "reset"];
 const ApplicationBillAmendment = () => {
   var _data$BillingService, _data$BillingService$, _data$BillingService2, _data$BillingService3, _state, _state$data, _state$data$applicati, _state$data$applicati2, _state$data$applicati3, _billSearchData, _billSearchData$filte, _billSearchData2, _state9, _state9$data, _errors$WS_REDUCED_AM, _errors$WS_ADDITIONAL, _billSearchData3, _errors$effectiveTill, _errors$effectiveTill2, _state12, _state12$data;
@@ -34111,7 +34980,7 @@ const ApplicationBillAmendment = () => {
     handleSubmit = _useForm.handleSubmit,
     _useForm$formState = _useForm.formState,
     errors = _useForm$formState.errors,
-    rest = _objectWithoutPropertiesLoose(_useForm$formState, _excluded$3),
+    rest = _objectWithoutPropertiesLoose(_useForm$formState, _excluded$4),
     getValues = _useForm.getValues,
     methods = _objectWithoutPropertiesLoose(_useForm, _excluded2$2);
   const _Digit$Hooks$ws$useAp = Digit.Hooks.ws.useApplicationActionsBillAmendUpdate(),
@@ -34976,8 +35845,8 @@ const DECLARATION_POINTS = ["I understand that sanction of connection does not a
 const NAME_PATTERN = /^[a-zA-Z\s.'-]{1,50}$/;
 const EMAIL_PATTERN = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/;
 const MOBILE_PATTERN = /^[6-9][0-9]{9}$/;
-const NUMBER_PATTERN$1 = /^\d+$/;
-const DECIMAL_PATTERN$1 = /^\d+(\.\d{1,2})?$/;
+const NUMBER_PATTERN$2 = /^\d+$/;
+const DECIMAL_PATTERN$2 = /^\d+(\.\d{1,2})?$/;
 const IFSC_PATTERN = /^[A-Z]{4}0[A-Z0-9]{6}$/;
 const ACCOUNT_PATTERN = /^[0-9]{9,18}$/;
 const COLLAPSIBLE_CONTENT_TAB = "__WS_SECTION_CONTENT__";
@@ -37246,7 +38115,7 @@ const NewApplication = () => {
     errorStyle: !!getFieldError("useDetails.plotArea"),
     inputRef: register({
       pattern: {
-        value: DECIMAL_PATTERN$1,
+        value: DECIMAL_PATTERN$2,
         message: "Enter a valid numeric value."
       },
       required: "Plot Area is required."
@@ -37260,7 +38129,7 @@ const NewApplication = () => {
     errorStyle: !!getFieldError("useDetails.builtUpArea"),
     inputRef: register({
       pattern: {
-        value: DECIMAL_PATTERN$1,
+        value: DECIMAL_PATTERN$2,
         message: "Enter a valid numeric value."
       },
       required: "Built Up Area is required."
@@ -37291,7 +38160,7 @@ const NewApplication = () => {
     errorStyle: !!getFieldError("useDetails.NumberofDwellingUnits"),
     inputRef: register({
       pattern: {
-        value: DECIMAL_PATTERN$1,
+        value: DECIMAL_PATTERN$2,
         message: "Enter a valid numeric value."
       },
       required: "Built Up Area is required."
@@ -37305,7 +38174,7 @@ const NewApplication = () => {
     errorStyle: !!getFieldError("useDetails.NumberofRooms"),
     inputRef: register({
       pattern: {
-        value: DECIMAL_PATTERN$1,
+        value: DECIMAL_PATTERN$2,
         message: "Enter a valid numeric value."
       },
       required: "Built Up Area is required."
@@ -37319,7 +38188,7 @@ const NewApplication = () => {
     errorStyle: !!getFieldError("useDetails.hospitalBeds"),
     inputRef: register({
       pattern: {
-        value: NUMBER_PATTERN$1,
+        value: NUMBER_PATTERN$2,
         message: "Enter a valid whole number."
       },
       required: isHospitalProperty ? "No. of Beds is required for Hospital / Nursing Home." : false