@mseva/digit-ui-module-ndc 1.0.72-dev.1 → 1.0.72-dev.1.1

package/dist/index.modern.js

@@ -1,9 +1,9 @@
-import { Card, Banner, ActionBar, SubmitBar as SubmitBar$1, PrivateRoute, BreadCrumb, AppContainer, Dropdown, UploadFile, Modal, FormComposer, Toast, Loader as Loader$1, LinkButton, CardSubHeader, StatusTable, Row, TextInput, CardLabel, FilterFormField, RadioButtons, Menu, EmployeeModuleCard, SearchField, CheckBox, ComplaintIcon, Header, InboxComposer, MobileNumber, CardLabelError, SearchAction, PopUp, DetailsCard, SearchForm, CloseSvg, Table, CardHeader, LabelFieldPair, DeleteIcon, KeyNote } from '@mseva/digit-ui-react-components';
+import { Card, Banner, ActionBar, SubmitBar as SubmitBar$1, PrivateRoute, BreadCrumb, AppContainer, Dropdown, UploadFile, Modal, FormComposer, Toast, Loader as Loader$1, LinkButton, CardSubHeader, StatusTable, Row, TextInput, CardLabel, FilterFormField, RadioButtons, Menu, EmployeeModuleCard, SearchField, ComplaintIcon, InboxComposer, FilterForm, Table, MobileNumber, CardLabelError, SearchAction, PopUp, DetailsCard, SearchForm, CloseSvg, CardHeader, LabelFieldPair, DeleteIcon, Header, KeyNote } from '@mseva/digit-ui-react-components';
 import React, { Fragment as Fragment$1, useState, useEffect, useMemo, useRef, useReducer, useCallback, forwardRef } from 'react';
 import { useHistory, useLocation, Switch, Route, useRouteMatch, useParams, Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
-import { useForm, Controller, useFormContext, FormProvider, useFieldArray } from 'react-hook-form';
+import { useForm, Controller, useController, useFormContext, FormProvider, useFieldArray } from 'react-hook-form';
 import 'react-query';
 import { combineReducers } from 'redux';
 
@@ -2670,9 +2670,7 @@ const ApplicationOverview = () => {
     user = userInfo === null || userInfo === void 0 ? void 0 : userInfo.value;
   }
   const userRoles = (_user = user) === null || _user === void 0 ? void 0 : (_user$info = _user.info) === null || _user$info === void 0 ? void 0 : (_user$info$roles = _user$info.roles) === null || _user$info$roles === void 0 ? void 0 : _user$info$roles.map(e => e.code);
-  console.log('userRoles', userRoles);
   const isCemp = (_user2 = user) === null || _user2 === void 0 ? void 0 : (_user2$info = _user2.info) === null || _user2$info === void 0 ? void 0 : (_user2$info$roles$fin = _user2$info.roles.find(role => role.code === "CEMP")) === null || _user2$info$roles$fin === void 0 ? void 0 : _user2$info$roles$fin.code;
-  console.log('isCemp', isCemp);
   let actions = (workflowDetails === null || workflowDetails === void 0 ? void 0 : (_workflowDetails$data6 = workflowDetails.data) === null || _workflowDetails$data6 === void 0 ? void 0 : (_workflowDetails$data7 = _workflowDetails$data6.actionState) === null || _workflowDetails$data7 === void 0 ? void 0 : (_workflowDetails$data8 = _workflowDetails$data7.nextActions) === null || _workflowDetails$data8 === void 0 ? void 0 : _workflowDetails$data8.filter(e => {
     return (userRoles === null || userRoles === void 0 ? void 0 : userRoles.some(role => {
       var _e$roles;
@@ -3065,7 +3063,7 @@ const ApplicationOverview = () => {
   }) : /*#__PURE__*/React.createElement("div", null, t("TL_NO_DOCUMENTS_MSG")))), /*#__PURE__*/React.createElement(NewApplicationTimeline, {
     workflowDetails: workflowDetails,
     t: t
-  }), (applicationDetails === null || applicationDetails === void 0 ? void 0 : (_applicationDetails$A21 = applicationDetails.Applications) === null || _applicationDetails$A21 === void 0 ? void 0 : (_applicationDetails$A22 = _applicationDetails$A21[0]) === null || _applicationDetails$A22 === void 0 ? void 0 : _applicationDetails$A22.applicationStatus) !== "INITIATED" && actions && /*#__PURE__*/React.createElement(ActionBar, null, displayMenu && (workflowDetails !== null && workflowDetails !== void 0 && (_workflowDetails$data1 = workflowDetails.data) !== null && _workflowDetails$data1 !== void 0 && (_workflowDetails$data10 = _workflowDetails$data1.actionState) !== null && _workflowDetails$data10 !== void 0 && _workflowDetails$data10.nextActions || workflowDetails !== null && workflowDetails !== void 0 && (_workflowDetails$data11 = workflowDetails.data) !== null && _workflowDetails$data11 !== void 0 && _workflowDetails$data11.nextActions) ? /*#__PURE__*/React.createElement(Menu, {
+  }), (applicationDetails === null || applicationDetails === void 0 ? void 0 : (_applicationDetails$A21 = applicationDetails.Applications) === null || _applicationDetails$A21 === void 0 ? void 0 : (_applicationDetails$A22 = _applicationDetails$A21[0]) === null || _applicationDetails$A22 === void 0 ? void 0 : _applicationDetails$A22.applicationStatus) !== "INITIATED" && (actions === null || actions === void 0 ? void 0 : actions.length) > 0 && /*#__PURE__*/React.createElement(ActionBar, null, displayMenu && (workflowDetails !== null && workflowDetails !== void 0 && (_workflowDetails$data1 = workflowDetails.data) !== null && _workflowDetails$data1 !== void 0 && (_workflowDetails$data10 = _workflowDetails$data1.actionState) !== null && _workflowDetails$data10 !== void 0 && _workflowDetails$data10.nextActions || workflowDetails !== null && workflowDetails !== void 0 && (_workflowDetails$data11 = workflowDetails.data) !== null && _workflowDetails$data11 !== void 0 && _workflowDetails$data11.nextActions) ? /*#__PURE__*/React.createElement(Menu, {
     localeKeyPrefix: `WF_EDITRENEWAL`,
     options: actions,
     optionKey: "action",
@@ -10810,7 +10808,7 @@ function _extends() {
   }, _extends.apply(null, arguments);
 }
 
-const SearchFormFieldsComponents = ({
+const NewSearchFormFieldsComponent = ({
   registerRef,
   searchFormState,
   searchFieldComponents
@@ -10819,7 +10817,6 @@ const SearchFormFieldsComponents = ({
     t
   } = useTranslation();
   const isMobile = window.Digit.Utils.browser.isMobile();
-  console.log("searchFieldComponents", searchFieldComponents);
   if (!isMobile) {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       className: "search-container ndc-search-container-custom"
@@ -10837,7 +10834,7 @@ const SearchFormFieldsComponents = ({
       className: "search-action-wrapper ndc-search-action-wrapper"
     }, searchFieldComponents)))));
   }
-  return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(SearchField, null, /*#__PURE__*/React.createElement("label", null, t("NOC_HOME_SEARCH_RESULTS_APP_NO_LABEL")), /*#__PURE__*/React.createElement(TextInput, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SearchField, null, /*#__PURE__*/React.createElement("label", null, t("NOC_HOME_SEARCH_RESULTS_APP_NO_LABEL")), /*#__PURE__*/React.createElement(TextInput, {
     name: "applicationNo",
     inputRef: registerRef({})
   })), /*#__PURE__*/React.createElement(SearchField, null, /*#__PURE__*/React.createElement("label", null, t("CORE_COMMON_PHONE_NUMBER")), /*#__PURE__*/React.createElement(TextInput, {
@@ -10846,7 +10843,7 @@ const SearchFormFieldsComponents = ({
   })));
 };
 
-const FilterFormFieldsComponent = ({
+const NewFilterFormFieldsComponent = ({
   statuses,
   controlFilterForm,
   applicationTypesOfBPA,
@@ -10855,15 +10852,7 @@ const FilterFormFieldsComponent = ({
   const {
     t
   } = useTranslation();
-  const tenantId = Digit.ULBService.getStateId();
-  const [tlfilters, setTLFilters] = useState({
-    applicationStatus: []
-  });
-  useEffect(() => {
-    if (tlfilters) {
-      handleFilter(tlfilters);
-    }
-  }, [tlfilters]);
+  const [showAllStatuses, setShowAllStatuses] = useState(false);
   const availableOptions = [{
     code: "ASSIGNED_TO_ME",
     name: `${t("ES_INBOX_ASSIGNED_TO_ME")}`
@@ -10875,43 +10864,128 @@ const FilterFormFieldsComponent = ({
     type.name = t(`WF_BPA_${type.code}`);
     type.i18nKey = t(`WF_BPA_${type.code}`);
   });
-  return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(FilterFormField, null, /*#__PURE__*/React.createElement(Controller, {
+  const getVariantFromCode = code => {
+    const value = String(code || "").toLowerCase();
+    if (value.includes("approved")) return "success";
+    if (value.includes("rejected")) return "danger";
+    if (value.includes("pending")) return "warning";
+    if (value.includes("inbox")) return "primary";
+    if (value.includes("assigned")) return "primary";
+    return "info";
+  };
+  const colorVariants = ["primary", "success", "warning", "danger", "info", "indigo", "teal", "pink", "amber", "slate"];
+  const getVariantByIndex = (index, fallback) => colorVariants[index % colorVariants.length] || fallback;
+  const {
+    field: assigneeField
+  } = useController({
     name: "assignee",
-    control: controlFilterForm,
-    render: props => /*#__PURE__*/React.createElement(RadioButtons, {
-      onSelect: e => {
-        props.onChange(e.code);
-      },
-      selectedOption: availableOptions.filter(option => option.code === props.value)[0],
-      optionsKey: "name",
-      options: availableOptions
-    })
-  })), /*#__PURE__*/React.createElement(FilterFormField, null, /*#__PURE__*/React.createElement(Controller, {
+    control: controlFilterForm
+  });
+  const {
+    field: statusField
+  } = useController({
     name: "applicationStatus",
     control: controlFilterForm,
-    defaultValue: [],
-    render: props => {
-      const toggleStatus = statusCode => {
-        console.log(statusCode, "statusCode");
-        if (props.value.includes(statusCode)) {
-          props.onChange(props.value.filter(code => code !== statusCode));
+    defaultValue: []
+  });
+  const statusValues = Array.isArray(statusField.value) ? statusField.value : [];
+  const toggleStatus = statusCode => {
+    let newStatusValues;
+    if (statusValues.includes(statusCode)) {
+      newStatusValues = statusValues.filter(code => code !== statusCode);
+    } else {
+      newStatusValues = [...statusValues, statusCode];
+    }
+    statusField.onChange(newStatusValues);
+    if (typeof handleFilter === "function") {
+      handleFilter({
+        applicationStatus: newStatusValues.map(code => ({
+          code
+        }))
+      });
+    }
+  };
+  const cards = [...availableOptions.map(option => ({
+    key: option.code,
+    type: "assignee",
+    label: option.name,
+    subtitle: t("ES_INBOX_ASSIGNED"),
+    count: null,
+    code: option.code,
+    icon: "⌂"
+  })), ...(statuses || []).map(status => ({
+    key: status.applicationstatus,
+    type: "status",
+    label: t(status.applicationstatus),
+    subtitle: null,
+    count: status.totalCount ?? status.count ?? status.noOfRecords ?? status.totalRecords ?? status.applicationCount ?? 0,
+    code: status.applicationstatus,
+    icon: "◎"
+  }))];
+  const visibleCards = showAllStatuses ? cards : cards.slice(0, 6);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "ndc-new-inbox-filter-card",
+    style: {
+      marginTop: 16,
+      marginBottom: 16
+    }
+  }, /*#__PURE__*/React.createElement(FilterFormField, null, /*#__PURE__*/React.createElement("div", {
+    className: "ndc-new-filter-status-wrapper"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "ndc-new-filter-status-grid ndc-new-filter-card-grid"
+  }, visibleCards.map((card, index) => {
+    const isActive = card.type === "assignee" ? assigneeField.value === card.code : statusValues.includes(card.code);
+    const variant = getVariantByIndex(index, getVariantFromCode(card.code));
+    return /*#__PURE__*/React.createElement("button", {
+      key: card.key,
+      type: "button",
+      className: `ndc-new-filter-status-card ndc-new-filter-option-card ndc-new-filter-card ${variant} ${isActive ? "active" : ""}`,
+      onClick: () => {
+        if (card.type === "assignee") {
+          assigneeField.onChange(card.code);
+          if (typeof handleFilter === "function") {
+            handleFilter({
+              assignee: card.code,
+              applicationStatus: statusValues.map(code => ({
+                code
+              }))
+            });
+          }
         } else {
-          props.onChange([...props.value, statusCode]);
-        }
-      };
-      return /*#__PURE__*/React.createElement(Fragment$1, null, statuses === null || statuses === void 0 ? void 0 : statuses.map((status, index) => /*#__PURE__*/React.createElement(CheckBox, {
-        key: status.applicationstatus,
-        label: `${t(status.applicationstatus)} - ${status.count}`,
-        value: status.applicationstatus,
-        checked: props.value.includes(status.applicationstatus),
-        onChange: () => toggleStatus(status.applicationstatus),
-        index: index
-      })));
+          toggleStatus(card.code);
+        }
+      }
+    }, isActive ? /*#__PURE__*/React.createElement("span", {
+      className: "ndc-new-filter-card-check",
+      "aria-hidden": "true"
+    }, "\u2713") : null, /*#__PURE__*/React.createElement("div", {
+      className: "ndc-new-filter-status-title ndc-new-filter-option-title"
+    }, card.label), card.subtitle ? /*#__PURE__*/React.createElement("div", {
+      className: "ndc-new-filter-option-subtitle"
+    }, card.subtitle) : /*#__PURE__*/React.createElement("div", {
+      className: "ndc-new-filter-status-count"
+    }, card.count !== null && card.count !== undefined ? card.count : ""), /*#__PURE__*/React.createElement("span", {
+      className: "ndc-new-filter-card-icon",
+      "aria-hidden": "true"
+    }, /*#__PURE__*/React.createElement("span", null, card.icon)));
+  })), cards.length > 6 ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      justifyContent: "center",
+      marginTop: 8
     }
-  })));
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "ndc-new-filter-show-more",
+    onClick: () => setShowAllStatuses(prev => !prev),
+    "aria-label": showAllStatuses ? t("ES_COMMON_SHOW_LESS") : t("ES_COMMON_SHOW_MORE")
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "ndc-new-filter-show-more-icon",
+    "aria-hidden": "true"
+  }, showAllStatuses ? "▲" : "▼"))) : null)));
 };
 
-const useInboxTableConfig = ({
+const useNewInboxTableConfig = ({
   parentRoute,
   onPageSizeChange,
   formState,
@@ -10924,33 +10998,87 @@ const useInboxTableConfig = ({
   const {
     t
   } = useTranslation();
-  const GetCell = value => /*#__PURE__*/React.createElement("span", {
-    className: "cell-text styled-cell"
-  }, value);
+  const getStatusClass = status => {
+    const value = String(status || "").toLowerCase();
+    if (value.includes("approved")) return "approved";
+    if (value.includes("rejected")) return "rejected";
+    if (value.includes("forward")) return "forwarded";
+    if (value.includes("process")) return "in-progress";
+    if (value.includes("pending")) return "pending";
+    if (value.includes("new")) return "new";
+    return "default";
+  };
+  const renderStatusIcon = statusClass => {
+    switch (statusClass) {
+      case "approved":
+        return /*#__PURE__*/React.createElement("svg", {
+          viewBox: "0 0 24 24",
+          width: "14",
+          height: "14",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2"
+        }, /*#__PURE__*/React.createElement("path", {
+          d: "M20 6L9 17l-5-5"
+        }));
+      case "rejected":
+        return /*#__PURE__*/React.createElement("svg", {
+          viewBox: "0 0 24 24",
+          width: "14",
+          height: "14",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2"
+        }, /*#__PURE__*/React.createElement("path", {
+          d: "M18 6L6 18"
+        }), /*#__PURE__*/React.createElement("path", {
+          d: "M6 6l12 12"
+        }));
+      case "forwarded":
+        return /*#__PURE__*/React.createElement("svg", {
+          viewBox: "0 0 24 24",
+          width: "14",
+          height: "14",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2"
+        }, /*#__PURE__*/React.createElement("path", {
+          d: "M5 12h14"
+        }), /*#__PURE__*/React.createElement("path", {
+          d: "M13 5l7 7-7 7"
+        }));
+      default:
+        return null;
+    }
+  };
   const tableColumnConfig = useMemo(() => {
     return [{
       Header: t("NOC_HOME_SEARCH_RESULTS_APP_NO_LABEL"),
-      accessor: "uuid",
+      accessor: "applicationId",
       disableSortBy: true,
+      className: "ndc-new-table-app",
       Cell: ({
         row
       }) => {
-        var _row$original, _row$original2;
-        console.log("row", row);
-        return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Link, {
-          to: `${parentRoute}/inbox/application-overview/${(_row$original = row.original) === null || _row$original === void 0 ? void 0 : _row$original.applicationId}`
-        }, /*#__PURE__*/React.createElement("span", {
-          className: "link"
-        }, (_row$original2 = row.original) === null || _row$original2 === void 0 ? void 0 : _row$original2.applicationId)));
+        var _row$original, _row$original2, _row$original3, _row$original4, _row$original5;
+        return /*#__PURE__*/React.createElement("div", {
+          className: "ndc-new-cell-stack"
+        }, /*#__PURE__*/React.createElement(Link, {
+          to: `${parentRoute}/inbox/application-overview/${(_row$original = row.original) === null || _row$original === void 0 ? void 0 : _row$original.applicationId}`,
+          className: "ndc-new-app-link"
+        }, ((_row$original2 = row.original) === null || _row$original2 === void 0 ? void 0 : _row$original2.applicationId) || ((_row$original3 = row.original) === null || _row$original3 === void 0 ? void 0 : _row$original3.applicationNo) || "-"), (_row$original4 = row.original) !== null && _row$original4 !== void 0 && _row$original4.locality ? /*#__PURE__*/React.createElement("div", {
+          className: "ndc-new-cell-secondary"
+        }, (_row$original5 = row.original) === null || _row$original5 === void 0 ? void 0 : _row$original5.locality) : null);
       }
     }, {
       Header: t("TL_COMMON_TABLE_COL_APP_DATE"),
-      accessor: "createdtime",
+      accessor: "date",
       Cell: ({
         row
       }) => {
-        var _row$original3, _row$original4;
-        return (_row$original3 = row.original) !== null && _row$original3 !== void 0 && _row$original3.date ? GetCell(format(new Date((_row$original4 = row.original) === null || _row$original4 === void 0 ? void 0 : _row$original4.date), "dd/MM/yyyy")) : "";
+        var _row$original6, _row$original7;
+        const dateValue = ((_row$original6 = row.original) === null || _row$original6 === void 0 ? void 0 : _row$original6.date) || ((_row$original7 = row.original) === null || _row$original7 === void 0 ? void 0 : _row$original7.createdTime);
+        return dateValue ? format(new Date(dateValue), "dd/MM/yyyy") : "-";
       }
     }, {
       Header: t("PT_COMMON_TABLE_COL_STATUS_LABEL"),
@@ -10958,18 +11086,56 @@ const useInboxTableConfig = ({
       Cell: ({
         row
       }) => {
-        var _row$original5;
-        return t((_row$original5 = row.original) === null || _row$original5 === void 0 ? void 0 : _row$original5.status);
+        var _row$original8, _row$original9;
+        const statusValue = ((_row$original8 = row.original) === null || _row$original8 === void 0 ? void 0 : _row$original8.status) || ((_row$original9 = row.original) === null || _row$original9 === void 0 ? void 0 : _row$original9.applicationStatus) || "-";
+        const statusClass = getStatusClass(statusValue);
+        return /*#__PURE__*/React.createElement("span", {
+          className: `ndc-new-status-pill ${statusClass}`
+        }, renderStatusIcon(statusClass), /*#__PURE__*/React.createElement("span", null, String(statusValue || "-").toLowerCase()));
+      }
+    }, {
+      Header: t("CS_COMMON_ACTION"),
+      accessor: "action",
+      disableSortBy: true,
+      className: "ndc-new-table-action",
+      Cell: ({
+        row
+      }) => {
+        var _row$original0;
+        return /*#__PURE__*/React.createElement("span", {
+          className: "ndc-new-action-group"
+        }, /*#__PURE__*/React.createElement(Link, {
+          to: `${parentRoute}/inbox/application-overview/${(_row$original0 = row.original) === null || _row$original0 === void 0 ? void 0 : _row$original0.applicationId}`,
+          className: "ndc-new-icon ndc-new-icon-link",
+          "aria-label": t("ES_COMMON_VIEW")
+        }, /*#__PURE__*/React.createElement("svg", {
+          viewBox: "0 0 24 24",
+          width: "18",
+          height: "18",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2"
+        }, /*#__PURE__*/React.createElement("path", {
+          d: "M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z"
+        }), /*#__PURE__*/React.createElement("circle", {
+          cx: "12",
+          cy: "12",
+          r: "3"
+        }))));
       }
     }];
-  });
+  }, [parentRoute, t]);
   return {
-    getCellProps: cellInfo => {
+    getCellProps: () => ({
+      style: {
+        padding: "16px 20px",
+        fontSize: "14px"
+      }
+    }),
+    getRowProps: row => {
+      var _row$original1, _row$original10;
       return {
-        style: {
-          padding: "20px 18px",
-          fontSize: "16px"
-        }
+        className: `ndc-new-row ${getStatusClass((row === null || row === void 0 ? void 0 : (_row$original1 = row.original) === null || _row$original1 === void 0 ? void 0 : _row$original1.status) || (row === null || row === void 0 ? void 0 : (_row$original10 = row.original) === null || _row$original10 === void 0 ? void 0 : _row$original10.applicationStatus))}`
       };
     },
     disableSort: false,
@@ -11024,7 +11190,7 @@ const useInboxTableConfig = ({
   };
 };
 
-const useInboxMobileCardsData = ({
+const useNewInboxMobileCardsData = ({
   parentRoute,
   table
 }) => {
@@ -11074,33 +11240,37 @@ const useInboxMobileCardsData = ({
   };
 };
 
-const Inbox = ({
-  parentRoute
+const NewNDCInbox = ({
+  parentRoute,
+  tableColumns
 }) => {
+  var _formState$filterForm3, _formState$filterForm4, _formState$filterForm5, _formState$tableForm5, _formState$tableForm6, _formState$tableForm7, _formState$tableForm8, _formState$tableForm9, _formState$tableForm0, _formState$tableForm1;
   const {
     t
   } = useTranslation();
   const tenantId = window.localStorage.getItem("Employee.tenant-id");
-  const [getFilter, setFilter] = useState();
-  const searchFormDefaultValues = {};
-  const filterFormDefaultValues = {
+  const [activeStatusTab, setActiveStatusTab] = useState("ALL");
+  const [topBarSearch, setTopBarSearch] = useState("");
+  const businessServices = useMemo(() => businessServiceList(true) || [], []);
+  const searchFormDefaultValues = useMemo(() => ({}), []);
+  const filterFormDefaultValues = useMemo(() => ({
     moduleName: "ndc-services",
     applicationStatus: [],
     businessService: null,
     locality: [],
     assignee: "ASSIGNED_TO_ALL",
-    businessServiceArray: businessServiceList(true) || []
-  };
-  const tableOrderFormDefaultValues = {
+    businessServiceArray: businessServices
+  }), [businessServices]);
+  const tableOrderFormDefaultValues = useMemo(() => ({
     sortBy: "",
     limit: window.Digit.Utils.browser.isMobile() ? 50 : 10,
     offset: 0,
     sortOrder: "DESC"
-  };
+  }), []);
   function formReducer(state, payload) {
     switch (payload.action) {
       case "mutateSearchForm":
-        Digit.SessionStorage.set("NDC.INBOX", {
+        Digit.SessionStorage.set("NDC.NEW_INBOX", {
           ...state,
           searchForm: payload.data
         });
@@ -11109,7 +11279,7 @@ const Inbox = ({
           searchForm: payload.data
         };
       case "mutateFilterForm":
-        Digit.SessionStorage.set("NDC.INBOX", {
+        Digit.SessionStorage.set("NDC.NEW_INBOX", {
           ...state,
           filterForm: payload.data
         });
@@ -11118,7 +11288,7 @@ const Inbox = ({
           filterForm: payload.data
         };
       case "mutateTableForm":
-        Digit.SessionStorage.set("NDC.INBOX", {
+        Digit.SessionStorage.set("NDC.NEW_INBOX", {
           ...state,
           tableForm: payload.data
         });
@@ -11128,7 +11298,7 @@ const Inbox = ({
         };
     }
   }
-  const InboxObjectInSessionStorage = Digit.SessionStorage.get("NDC.INBOX");
+  const InboxObjectInSessionStorage = Digit.SessionStorage.get("NDC.NEW_INBOX");
   const onSearchFormReset = setSearchFormValue => {
     setSearchFormValue("sourceRefId", null);
     setSearchFormValue("applicationNo", null);
@@ -11139,8 +11309,8 @@ const Inbox = ({
     });
   };
   const onFilterFormReset = setFilterFormValue => {
-    setFilterFormValue("moduleName", "bpa-services");
-    setFilterFormValue("applicationStatus", "");
+    setFilterFormValue("moduleName", "ndc-services");
+    setFilterFormValue("applicationStatus", []);
     setFilterFormValue("locality", []);
     setFilterFormValue("assignee", "ASSIGNED_TO_ALL");
     setFilterFormValue("applicationType", []);
@@ -11173,6 +11343,26 @@ const Inbox = ({
       }
     });
   };
+  const onNextPage = () => {
+    var _formState$tableForm, _formState$tableForm2;
+    return dispatch({
+      action: "mutateTableForm",
+      data: {
+        ...formState.tableForm,
+        offset: parseInt((_formState$tableForm = formState.tableForm) === null || _formState$tableForm === void 0 ? void 0 : _formState$tableForm.offset) + parseInt((_formState$tableForm2 = formState.tableForm) === null || _formState$tableForm2 === void 0 ? void 0 : _formState$tableForm2.limit)
+      }
+    });
+  };
+  const onPrevPage = () => {
+    var _formState$tableForm3, _formState$tableForm4;
+    return dispatch({
+      action: "mutateTableForm",
+      data: {
+        ...formState.tableForm,
+        offset: parseInt((_formState$tableForm3 = formState.tableForm) === null || _formState$tableForm3 === void 0 ? void 0 : _formState$tableForm3.offset) - parseInt((_formState$tableForm4 = formState.tableForm) === null || _formState$tableForm4 === void 0 ? void 0 : _formState$tableForm4.limit)
+      }
+    });
+  };
   const onSortingByData = e => {
     if (e.length > 0) {
       const [{
@@ -11209,17 +11399,54 @@ const Inbox = ({
     data: localitiesForEmployeesCurrentTenant,
     isLoading: loadingLocalitiesForEmployeesCurrentTenant
   } = Digit.Hooks.useBoundaryLocalities(tenantId, "revenue", {}, t);
-  const handleFilter = filterStatus => {
-    setFilter(filterStatus);
-  };
+  const {
+    register: registerFilterFormField,
+    control: controlFilterForm,
+    handleSubmit: handleFilterFormSubmit,
+    setValue: setFilterFormValue,
+    getValues: getFilterFormValue,
+    reset: resetFilterForm
+  } = useForm({
+    defaultValues: {
+      ...filterFormDefaultValues
+    }
+  });
+  const handleFilter = useCallback(filterData => {
+    var _filterData$applicati, _formState$filterForm, _formState$filterForm2;
+    if (filterData.applicationStatus) {
+      setFilterFormValue("applicationStatus", filterData.applicationStatus.map(item => item.code || item));
+    }
+    if (filterData.assignee) {
+      setFilterFormValue("assignee", filterData.assignee);
+    }
+    dispatch({
+      action: "mutateFilterForm",
+      data: {
+        ...(formState === null || formState === void 0 ? void 0 : formState.filterForm),
+        applicationStatus: ((_filterData$applicati = filterData.applicationStatus) === null || _filterData$applicati === void 0 ? void 0 : _filterData$applicati.map(item => item.code || item)) || (formState === null || formState === void 0 ? void 0 : (_formState$filterForm = formState.filterForm) === null || _formState$filterForm === void 0 ? void 0 : _formState$filterForm.applicationStatus) || [],
+        assignee: filterData.assignee || (formState === null || formState === void 0 ? void 0 : (_formState$filterForm2 = formState.filterForm) === null || _formState$filterForm2 === void 0 ? void 0 : _formState$filterForm2.assignee) || "ASSIGNED_TO_ALL"
+      }
+    });
+  }, [formState === null || formState === void 0 ? void 0 : formState.filterForm, setFilterFormValue]);
+  const prevFilterRef = useRef("");
+  const searchDebounceRef = useRef(null);
+  const hasInitializedFilterForm = useRef(false);
+  useEffect(() => {
+    if (formState !== null && formState !== void 0 && formState.filterForm) {
+      setFilterFormValue("assignee", formState.filterForm.assignee || "ASSIGNED_TO_ALL");
+      setFilterFormValue("applicationStatus", formState.filterForm.applicationStatus || []);
+      setFilterFormValue("moduleName", formState.filterForm.moduleName || "ndc-services");
+    }
+  }, [formState === null || formState === void 0 ? void 0 : (_formState$filterForm3 = formState.filterForm) === null || _formState$filterForm3 === void 0 ? void 0 : _formState$filterForm3.assignee, formState === null || formState === void 0 ? void 0 : (_formState$filterForm4 = formState.filterForm) === null || _formState$filterForm4 === void 0 ? void 0 : _formState$filterForm4.applicationStatus, formState === null || formState === void 0 ? void 0 : (_formState$filterForm5 = formState.filterForm) === null || _formState$filterForm5 === void 0 ? void 0 : _formState$filterForm5.moduleName, setFilterFormValue]);
   const {
     isLoading: isInboxLoading,
     data
   } = Digit.Hooks.ndc.useInbox({
     tenantId,
     filters: {
-      ...formState,
-      getFilter
+      filterForm: (formState === null || formState === void 0 ? void 0 : formState.filterForm) || filterFormDefaultValues,
+      searchForm: (formState === null || formState === void 0 ? void 0 : formState.searchForm) || searchFormDefaultValues,
+      tableForm: (formState === null || formState === void 0 ? void 0 : formState.tableForm) || tableOrderFormDefaultValues
     }
   });
   const [table, setTable] = useState([]);
@@ -11245,7 +11472,7 @@ const Inbox = ({
     registerRef,
     searchFormState,
     searchFieldComponents
-  }) => /*#__PURE__*/React.createElement(SearchFormFieldsComponents, {
+  }) => /*#__PURE__*/React.createElement(NewSearchFormFieldsComponent, {
     registerRef,
     searchFormState,
     searchFieldComponents
@@ -11255,7 +11482,7 @@ const Inbox = ({
     controlFilterForm,
     setFilterFormValue,
     getFilterFormValue
-  }) => /*#__PURE__*/React.createElement(FilterFormFieldsComponent, Object.assign({}, {
+  }) => /*#__PURE__*/React.createElement(NewFilterFormFieldsComponent, Object.assign({}, {
     statuses,
     isInboxLoading,
     registerRef,
@@ -11308,7 +11535,7 @@ const Inbox = ({
     resetFilterFormDefaultValues: filterFormDefaultValues,
     onFilterFormReset
   };
-  const propsForInboxTable = useInboxTableConfig({
+  const propsForInboxTable = useNewInboxTableConfig({
     ...{
       parentRoute,
       onPageSizeChange,
@@ -11319,7 +11546,7 @@ const Inbox = ({
       onSortingByData
     }
   });
-  const propsForInboxMobileCards = useInboxMobileCardsData({
+  const propsForInboxMobileCards = useNewInboxMobileCardsData({
     parentRoute,
     table
   });
@@ -11328,18 +11555,689 @@ const Inbox = ({
     sortFormDefaultValues: formState === null || formState === void 0 ? void 0 : formState.tableForm,
     onSortFormReset
   };
-  return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(Header, null, t("ES_COMMON_INBOX"), totalCount ? /*#__PURE__*/React.createElement("p", {
-    className: "inbox-count"
+  const resolvedTableColumns = tableColumns || (propsForInboxTable === null || propsForInboxTable === void 0 ? void 0 : propsForInboxTable.columns);
+  useEffect(() => {
+    const serialized = JSON.stringify((formState === null || formState === void 0 ? void 0 : formState.filterForm) || {});
+    if (prevFilterRef.current === serialized) return;
+    prevFilterRef.current = serialized;
+  }, [formState]);
+  useEffect(() => {
+    if (searchDebounceRef.current) clearTimeout(searchDebounceRef.current);
+    searchDebounceRef.current = setTimeout(() => {
+      const value = String(topBarSearch || "").trim();
+      const nextSearchForm = value ? {
+        applicationNo: value
+      } : {};
+      dispatch({
+        action: "mutateTableForm",
+        data: {
+          ...tableOrderFormDefaultValues
+        }
+      });
+      dispatch({
+        action: "mutateSearchForm",
+        data: nextSearchForm
+      });
+    }, 400);
+    return () => clearTimeout(searchDebounceRef.current);
+  }, [topBarSearch, tableOrderFormDefaultValues]);
+  const onResetFilterForm = () => {
+    onFilterFormReset(setFilterFormValue);
+  };
+  const normalizeStatus = useCallback(value => String(value || "").replace(/[\s-_]+/g, "").toUpperCase(), []);
+  const onStatusTabClick = useCallback((label, statusCode) => {
+    setActiveStatusTab(statusCode || label);
+    if (label === "CLEAR") {
+      setTopBarSearch("");
+      return;
+    }
+    if (label === "ALL") {
+      setFilterFormValue("applicationStatus", [], {
+        shouldDirty: true,
+        shouldTouch: true
+      });
+      handleFilterFormSubmit(onFilterFormSubmit)();
+      return;
+    }
+    const resolvedCode = statusCode || label;
+    setFilterFormValue("applicationStatus", [resolvedCode], {
+      shouldDirty: true,
+      shouldTouch: true
+    });
+    handleFilterFormSubmit(onFilterFormSubmit)();
+  }, [handleFilterFormSubmit, onFilterFormSubmit, setFilterFormValue]);
+  useEffect(() => {
+    if (hasInitializedFilterForm.current) return;
+    if (resetFilterForm && formState) {
+      resetFilterForm(formState === null || formState === void 0 ? void 0 : formState.filterForm);
+      hasInitializedFilterForm.current = true;
+    }
+  }, [formState, resetFilterForm]);
+  const isMobile = window.Digit.Utils.browser.isMobile();
+  if (isMobile) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "ndc-new-inbox"
+    }, /*#__PURE__*/React.createElement(InboxComposer, _extends({
+      isInboxLoading,
+      PropsForInboxLinks
+    }, propsForSearchForm, propsForFilterForm, propsForMobileSortForm, {
+      propsForInboxTable,
+      propsForInboxMobileCards,
+      formState
+    })));
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: "ndc-new-inbox"
+  }, /*#__PURE__*/React.createElement("style", null, `
+        .ndc-new-inbox {
+          margin-top: 32px;
+          padding: 20px;
+          background: #f8fafc;
+          border-radius: 12px;
+        }
+        .ndc-new-inbox .ndc-new-header {
+          display: flex;
+          align-items: center;
+          gap: 10px;
+          font-size: 24px;
+          font-weight: 700;
+          margin-bottom: 12px;
+        }
+        .ndc-new-inbox .ndc-new-count-pill {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          min-width: 28px;
+          height: 28px;
+          padding: 0 8px;
+          border-radius: 999px;
+          background: #2563eb;
+          color: #ffffff;
+          font-size: 12px;
+          font-weight: 700;
+        }
+  
+        .ndc-new-inbox .ndc-new-filter-card-grid {
+          display: grid;
+          grid-template-columns: repeat(6, 1fr);
+          gap: 14px;
+        }
+        .ndc-new-inbox .ndc-new-filter-option-card {
+          background: #f8fafc;
+          border: 1px solid #e5e7eb;
+          border-radius: 12px;
+          padding: 16px;
+          min-height: 88px;
+          text-align: left;
+          cursor: pointer;
+          transition: all 0.2s ease;
+          position: relative;
+          overflow: hidden;
+        }
+        .ndc-new-inbox .ndc-new-filter-option-card.active {
+          background: #e0f2fe;
+          border-color: #38bdf8;
+          box-shadow: 0 4px 12px rgba(2, 132, 199, 0.18);
+        }
+        .ndc-new-inbox .ndc-new-filter-option-title {
+          font-weight: 700;
+          font-size: 14px;
+        }
+        .ndc-new-inbox .ndc-new-filter-option-subtitle {
+          font-size: 12px;
+          margin-top: 6px;
+          color: white;
+        }
+        .ndc-new-inbox .ndc-new-filter-status-grid {
+          display: grid;
+          grid-template-columns: repeat(6, 1fr);
+          gap: 14px;
+        }
+        .ndc-new-inbox .ndc-new-filter-status-card {
+          background: #ffffff;
+          border: 1px solid #e5e7eb;
+          border-radius: 12px;
+          padding: 16px;
+          min-height: 88px;
+          text-align: left;
+          cursor: pointer;
+          transition: all 0.2s ease;
+          width: 100%;
+          box-sizing: border-box;
+          position: relative;
+          overflow: hidden;
+        }
+        .ndc-new-inbox .ndc-new-filter-status-card.active {
+          background: #e0f2fe;
+          border-color: #38bdf8;
+          box-shadow: 0 4px 12px rgba(2, 132, 199, 0.18);
+        }
+        .ndc-new-inbox .ndc-new-filter-status-title {
+          font-weight: 700;
+          font-size: 14px;
+        }
+        .ndc-new-inbox .ndc-new-filter-status-count {
+          font-size: 22px;
+          font-weight: 700;
+          margin-top: 8px;
+          color: inherit;
+        }
+        .ndc-new-inbox .ndc-new-filter-card-icon {
+          position: absolute;
+          top: 12px;
+          right: 12px;
+          width: 36px;
+          height: 36px;
+          border-radius: 999px;
+          background: rgba(255, 255, 255, 0.2);
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          color: #ffffff;
+          font-size: 16px;
+        }
+        .ndc-new-inbox .ndc-new-filter-card-check {
+          position: absolute;
+          top: 10px;
+          left: 12px;
+          width: 22px;
+          height: 22px;
+          border-radius: 999px;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 12px;
+          font-weight: 700;
+          background: rgba(255, 255, 255, 0.9);
+          color: #111827;
+          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+        }
+        .ndc-new-inbox .ndc-new-filter-card {
+          color: #ffffff;
+          border-color: transparent;
+        }
+        .ndc-new-inbox .ndc-new-filter-card.primary {
+          background: #2563eb;
+        }
+        .ndc-new-inbox .ndc-new-filter-card.success {
+          background: #16a34a;
+        }
+        .ndc-new-inbox .ndc-new-filter-card.warning {
+          background: #ea580c;
+        }
+        .ndc-new-inbox .ndc-new-filter-card.info {
+          background: #7c3aed;
+        }
+        .ndc-new-inbox .ndc-new-filter-card.danger {
+          background: #dc2626;
+        }
+        .ndc-new-inbox .ndc-new-filter-card.indigo {
+          background: #4f46e5;
+        }
+        .ndc-new-inbox .ndc-new-filter-card.teal {
+          background: #0f766e;
+        }
+        .ndc-new-inbox .ndc-new-filter-card.pink {
+          background: #db2777;
+        }
+        .ndc-new-inbox .ndc-new-filter-card.amber {
+          background: #d97706;
+        }
+        .ndc-new-inbox .ndc-new-filter-card.slate {
+          background: #475569;
+        }
+        .ndc-new-inbox .ndc-new-filter-card.active {
+          box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
+          transform: translateY(-1px);
+        }
+        .ndc-new-inbox .ndc-new-filter-show-more {
+          margin-top: 12px;
+          cursor: pointer;
+          font-weight: 600;
+          font-size: 12px;
+          color: #2563eb;
+          display: inline-flex;
+          align-items: center;
+          gap: 6px;
+          transition: all 0.2s ease;
+        }
+        .ndc-new-inbox .ndc-new-filter-show-more-icon {
+          width: 28px;
+          height: 28px;
+          border-radius: 999px;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 12px;
+          color: #457fff;
+          background: #eff6ff;
+        }
+        .ndc-new-inbox .ndc-new-filter-show-more:hover {
+          background: #eff6ff;
+          border-color: #bfdbfe;
+        }
+        .ndc-new-inbox .ndc-new-layout {
+          display: block;
+        }
+        .ndc-new-inbox .filter-card .heading {
+          display: none;
+        }
+        .ndc-new-inbox .filter-card .submit-bar,
+        .ndc-new-inbox .filter-card button[type="submit"] {
+          display: none;
+        }
+        .ndc-new-inbox .ndc-new-top-filters {
+          margin: 12px 0 16px;
+          background: #ffffff;
+          border: 1px solid #e2e8f0;
+          border-radius: 16px;
+          padding: 18px;
+          box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
+        }
+        .ndc-new-inbox .ndc-new-inbox-filter-card {
+          margin: 0;
+        }
+        .ndc-new-inbox .ndc-new-filter-card-grid {
+          grid-template-columns: repeat(6, 1fr);
+        }
+        .ndc-new-inbox .ndc-new-filter-status-grid {
+          grid-template-columns: repeat(6, 1fr);
+        }
+        @media (max-width: 1400px) {
+          .ndc-new-inbox .ndc-new-filter-card-grid,
+          .ndc-new-inbox .ndc-new-filter-status-grid {
+            grid-template-columns: repeat(4, minmax(140px, 1fr));
+          }
+        }
+        @media (max-width: 1100px) {
+          .ndc-new-inbox .ndc-new-filter-card-grid,
+          .ndc-new-inbox .ndc-new-filter-status-grid {
+            grid-template-columns: repeat(3, minmax(140px, 1fr));
+          }
+        }
+        @media (max-width: 900px) {
+          .ndc-new-inbox .ndc-new-filter-card-grid,
+          .ndc-new-inbox .ndc-new-filter-status-grid {
+            grid-template-columns: repeat(2, minmax(140px, 1fr));
+          }
+        }
+        @media (max-width: 640px) {
+          .ndc-new-inbox .ndc-new-filter-card-grid,
+          .ndc-new-inbox .ndc-new-filter-status-grid {
+            grid-template-columns: 1fr;
+          }
+        }
+        .ndc-new-inbox .ndc-new-table-card {
+          margin-top: 16px;
+          background: #ffffff;
+          border: 1px solid #e2e8f0;
+          border-radius: 16px;
+          box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
+          overflow: hidden;
+        }
+        .ndc-new-inbox .ndc-new-table-topbar {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          gap: 16px;
+          padding: 16px;
+          border-radius: 16px;
+          border: 1px solid #e2e8f0;
+          background: #ffffff;
+          box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
+        }
+        .ndc-new-inbox .ndc-new-tabs {
+          display: flex;
+          gap: 8px;
+          flex-wrap: nowrap;
+          overflow-x: auto;
+          max-width: calc(100% - 280px);
+          padding-bottom: 4px;
+          scrollbar-width: none;
+        }
+        .ndc-new-inbox .ndc-new-tabs::-webkit-scrollbar {
+          width: 0;
+          height: 0;
+        }
+        .ndc-new-inbox .ndc-new-tab {
+          padding: 6px 10px;
+          border-radius: 999px;
+          border: 1px solid #e5e7eb;
+          background: #f8fafc;
+          font-weight: 600;
+          font-size: 11px;
+          cursor: pointer;
+          white-space: nowrap;
+        }
+        .ndc-new-inbox .ndc-new-tab.active {
+          background: #2563eb;
+          color: #ffffff;
+          border-color: #2563eb;
+          box-shadow: 0 6px 14px rgba(37, 99, 235, 0.25);
+        }
+        .ndc-new-inbox .ndc-new-search {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          padding: 10px 14px;
+          border: 1px solid #e2e8f0;
+          border-radius: 10px;
+          min-width: 260px;
+          background: #f8fafc;
+          color: #6b7280;
+          font-size: 12px;
+        }
+        .ndc-new-inbox .ndc-new-search input {
+          border: none;
+          outline: none;
+          background: transparent;
+          width: 100%;
+          font-size: 12px;
+          color: #111827;
+        }
+        .ndc-new-inbox .ndc-new-table-header {
+          padding: 18px 20px;
+          font-size: 18px;
+          font-weight: 700;
+          border-bottom: 1px solid #e2e8f0;
+        }
+        .ndc-new-inbox .ndc-new-table-wrapper {
+          display: block;
+          overflow-x: auto;
+        }
+        .ndc-new-inbox .ndc-new-table {
+          width: 100%;
+          border-collapse: collapse;
+        }
+        .ndc-new-inbox .ndc-new-table th {
+          text-align: left;
+          font-size: 12px;
+          letter-spacing: 0.08em;
+          color: #6b7280;
+          padding: 14px 20px;
+          background: #f8fafc;
+          border-bottom: 1px solid #e2e8f0;
+        }
+        .ndc-new-inbox .ndc-new-table td {
+          padding: 16px 20px;
+          border-bottom: 1px solid #eef2f7;
+          font-size: 14px;
+          color: #334155;
+        }
+        .ndc-new-inbox .ndc-new-cell-stack {
+          display: flex;
+          flex-direction: column;
+          gap: 4px;
+        }
+        .ndc-new-inbox .ndc-new-cell-primary {
+          font-weight: 600;
+          color: #111827;
+        }
+        .ndc-new-inbox .ndc-new-cell-secondary {
+          font-size: 12px;
+          color: #64748b;
+        }
+        .ndc-new-inbox .ndc-new-row.pending {
+          background: #fff7ed;
+        }
+        .ndc-new-inbox .ndc-new-row.rejected {
+          background: #fef2f2;
+        }
+        .ndc-new-inbox .ndc-new-row.approved {
+          background: #f0fdf4;
+        }
+        .ndc-new-inbox .ndc-new-table-app {
+          font-weight: 600;
+          color: #111827;
+        }
+        .ndc-new-inbox .ndc-new-table-action {
+          text-align: left;
+          white-space: nowrap;
+        }
+        .ndc-new-inbox .ndc-new-status-pill {
+          display: inline-flex;
+          align-items: center;
+          gap: 6px;
+          padding: 4px 10px;
+          border-radius: 999px;
+          font-size: 12px;
+          font-weight: 600;
+          background: #e2e8f0;
+          color: #111827;
+          border: 1px solid transparent;
+        }
+        .ndc-new-inbox .ndc-new-status-pill.approved {
+          background: #f0fdf4;
+          color: #15803d;
+          border-color: #86efac;
+        }
+        .ndc-new-inbox .ndc-new-status-pill.rejected {
+          background: #fef2f2;
+          color: #b91c1c;
+          border-color: #fecaca;
+        }
+        .ndc-new-inbox .ndc-new-status-pill.forwarded {
+          background: #eff6ff;
+          color: #1d4ed8;
+          border-color: #bfdbfe;
+        }
+        .ndc-new-inbox .ndc-new-status-pill.in-progress {
+          background: #dbeafe;
+          color: #1d4ed8;
+        }
+        .ndc-new-inbox .ndc-new-status-pill.pending {
+          background: #ffedd5;
+          color: #c2410c;
+        }
+        .ndc-new-inbox .ndc-new-status-pill.new {
+          background: #f3f4f6;
+          color: #111827;
+        }
+        .ndc-new-inbox .ndc-new-icon {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          width: 28px;
+          height: 28px;
+          margin-left: 8px;
+          border-radius: 50%;
+          border: 1px solid #e5e7eb;
+          color: #94a3b8;
+        }
+        .ndc-new-inbox .ndc-new-action-group {
+          display: inline-flex;
+          align-items: center;
+          gap: 8px;
+        }
+        .ndc-new-inbox .ndc-new-icon-link {
+          text-decoration: none;
+        }
+        .ndc-new-inbox .ndc-new-app-link {
+          color: #2563eb;
+          text-decoration: none;
+        }
+        .ndc-new-inbox .ndc-new-app-link:hover {
+          text-decoration: underline;
+        }
+        .ndc-new-inbox .ndc-new-pagination {
+          display: flex;
+          align-items: center;
+          justify-content: flex-end;
+          gap: 12px;
+          padding: 12px 20px 18px;
+          border-top: 1px solid #eef2f7;
+          font-size: 12px;
+          color: #6b7280;
+        }
+        .ndc-new-inbox .ndc-new-pagination button {
+          border: 1px solid #e5e7eb;
+          background: #ffffff;
+          border-radius: 8px;
+          padding: 4px 8px;
+          cursor: pointer;
+        }
+        .ndc-new-inbox .ndc-new-pagination button:disabled {
+          opacity: 0.5;
+          cursor: not-allowed;
+        }
+        .ndc-new-inbox .ndc-new-pagination select {
+          border: 1px solid #e5e7eb;
+          border-radius: 8px;
+          padding: 4px 8px;
+          background: #ffffff;
+        }
+        @media (max-width: 768px) {
+          .ndc-new-inbox .ndc-new-top-filters {
+            padding: 0;
+          }
+          .ndc-new-inbox .ndc-new-table-topbar {
+            flex-wrap: wrap;
+          }
+          .ndc-new-inbox .ndc-new-tabs {
+            max-width: 100%;
+            overflow-x: visible;
+            flex-wrap: wrap;
+          }
+          .ndc-new-inbox .ndc-new-search {
+            width: 100%;
+            min-width: 0;
+          }
+          .ndc-new-inbox .ndc-new-table-header {
+            font-size: 16px;
+            padding: 14px 16px;
+          }
+          .ndc-new-inbox .ndc-new-table th,
+          .ndc-new-inbox .ndc-new-table td {
+            padding: 12px 14px;
+            font-size: 12px;
+          }
+          .ndc-new-inbox .ndc-new-status-pill {
+            font-size: 11px;
+            padding: 3px 8px;
+          }
+        }
+        .ndc-new-inbox .ndc-new-tab-count {
+          margin-left: 6px;
+          padding: 2px 6px;
+          border-radius: 999px;
+          background: #e2e8f0;
+          color: #475569;
+          font-size: 11px;
+          font-weight: 700;
+        }
+        .ndc-new-inbox .ndc-new-tab.active .ndc-new-tab-count {
+          background: rgba(255, 255, 255, 0.2);
+          color: #ffffff;
+        }
+      `), /*#__PURE__*/React.createElement("div", {
+    className: "ndc-new-header"
+  }, /*#__PURE__*/React.createElement("span", null, t("NDC Inbox")), totalCount ? /*#__PURE__*/React.createElement("span", {
+    className: "ndc-new-count-pill"
   }, totalCount) : null), /*#__PURE__*/React.createElement("div", {
-    className: "NDCSection"
-  }, /*#__PURE__*/React.createElement(InboxComposer, _extends({
-    isInboxLoading,
-    PropsForInboxLinks
-  }, propsForSearchForm, propsForFilterForm, propsForMobileSortForm, {
-    propsForInboxTable,
-    propsForInboxMobileCards,
-    formState
-  }))));
+    className: "ndc-new-layout"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "ndc-new-top-filters"
+  }, /*#__PURE__*/React.createElement(FilterForm, {
+    onSubmit: onFilterFormSubmit,
+    handleSubmit: handleFilterFormSubmit,
+    id: "filter-form",
+    onResetFilterForm: onResetFilterForm
+  }, /*#__PURE__*/React.createElement(NewFilterFormFieldsComponent, Object.assign({
+    registerRef: registerFilterFormField
+  }, {
+    controlFilterForm,
+    handleFilterFormSubmit,
+    setFilterFormValue,
+    getFilterFormValue,
+    statuses
+  }, {
+    handleFilter: handleFilter
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: "ndc-new-table-topbar"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "ndc-new-tabs"
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: `ndc-new-tab ${activeStatusTab === "ALL" ? "active" : ""}`,
+    onClick: () => onStatusTabClick("ALL")
+  }, t("ALL"), /*#__PURE__*/React.createElement("span", {
+    className: "ndc-new-tab-count"
+  }, totalCount || 0)), (statuses || []).map(status => /*#__PURE__*/React.createElement("button", {
+    key: status === null || status === void 0 ? void 0 : status.applicationstatus,
+    type: "button",
+    className: `ndc-new-tab ${activeStatusTab === (status === null || status === void 0 ? void 0 : status.applicationstatus) ? "active" : ""}`,
+    onClick: () => onStatusTabClick(status === null || status === void 0 ? void 0 : status.applicationstatus, status === null || status === void 0 ? void 0 : status.applicationstatus)
+  }, t(status === null || status === void 0 ? void 0 : status.applicationstatus), /*#__PURE__*/React.createElement("span", {
+    className: "ndc-new-tab-count"
+  }, (status === null || status === void 0 ? void 0 : status.count) ?? 0))), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: `ndc-new-tab ${activeStatusTab === "CLEAR" ? "active" : ""}`,
+    onClick: () => onStatusTabClick("CLEAR")
+  }, t("CLEAR"))), /*#__PURE__*/React.createElement("div", {
+    className: "ndc-new-search"
+  }, /*#__PURE__*/React.createElement("span", {
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("circle", {
+    cx: "11",
+    cy: "11",
+    r: "7",
+    stroke: "#6B7280",
+    strokeWidth: "2"
+  }), /*#__PURE__*/React.createElement("line", {
+    x1: "16.65",
+    y1: "16.65",
+    x2: "21",
+    y2: "21",
+    stroke: "#6B7280",
+    strokeWidth: "2",
+    strokeLinecap: "round"
+  }))), /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    value: topBarSearch,
+    onChange: e => setTopBarSearch(e.target.value),
+    placeholder: "Search by application no..."
+  }))), isInboxLoading ? /*#__PURE__*/React.createElement(Loader$1, null) : (table === null || table === void 0 ? void 0 : table.length) < 1 ? /*#__PURE__*/React.createElement(Card, {
+    className: "margin-unset text-align-center"
+  }, t("CS_MYAPPLICATIONS_NO_APPLICATION")) : /*#__PURE__*/React.createElement("div", {
+    className: "ndc-new-table-card"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "ndc-new-table-header"
+  }, t("Assigned Applications")), /*#__PURE__*/React.createElement(Table, Object.assign({
+    className: "ndc-new-table",
+    customTableWrapperClassName: "ndc-new-table-wrapper",
+    isPaginationRequired: false
+  }, propsForInboxTable, {
+    columns: resolvedTableColumns,
+    getRowProps: propsForInboxTable === null || propsForInboxTable === void 0 ? void 0 : propsForInboxTable.getRowProps
+  }))), totalCount > 0 ? /*#__PURE__*/React.createElement("div", {
+    className: "ndc-new-pagination"
+  }, t("CS_COMMON_ROWS_PER_PAGE"), ":", /*#__PURE__*/React.createElement("select", {
+    value: (_formState$tableForm5 = formState.tableForm) === null || _formState$tableForm5 === void 0 ? void 0 : _formState$tableForm5.limit,
+    onChange: onPageSizeChange
+  }, [10, 20, 30, 40, 50].map(pageSize => /*#__PURE__*/React.createElement("option", {
+    key: pageSize,
+    value: pageSize
+  }, pageSize))), /*#__PURE__*/React.createElement("span", null, ((_formState$tableForm6 = formState.tableForm) === null || _formState$tableForm6 === void 0 ? void 0 : _formState$tableForm6.offset) + 1, "-", Math.min(((_formState$tableForm7 = formState.tableForm) === null || _formState$tableForm7 === void 0 ? void 0 : _formState$tableForm7.offset) + ((_formState$tableForm8 = formState.tableForm) === null || _formState$tableForm8 === void 0 ? void 0 : _formState$tableForm8.limit), totalCount), " of ", totalCount), /*#__PURE__*/React.createElement("button", {
+    onClick: onPrevPage,
+    disabled: ((_formState$tableForm9 = formState.tableForm) === null || _formState$tableForm9 === void 0 ? void 0 : _formState$tableForm9.offset) <= 0
+  }, "\u2039"), /*#__PURE__*/React.createElement("button", {
+    onClick: onNextPage,
+    disabled: ((_formState$tableForm0 = formState.tableForm) === null || _formState$tableForm0 === void 0 ? void 0 : _formState$tableForm0.offset) + ((_formState$tableForm1 = formState.tableForm) === null || _formState$tableForm1 === void 0 ? void 0 : _formState$tableForm1.limit) >= totalCount
+  }, "\u203A")) : null));
+};
+
+const Inbox = ({
+  parentRoute
+}) => {
+  return /*#__PURE__*/React.createElement(NewNDCInbox, {
+    parentRoute: parentRoute
+  });
 };
 
 const SearchFormFieldsComponent = props => {
@@ -12708,14 +13606,25 @@ function SelectNDCReason({
   }, [ndcReason]);
   useEffect(() => {
     if (apiDataCheck && (ndcReasonOptions === null || ndcReasonOptions === void 0 ? void 0 : ndcReasonOptions.length) > 0) {
+      var _formData$NDCReason;
       console.log("check apiDataCheck", apiDataCheck);
       const matchedOption = ndcReasonOptions.find(opt => {
         var _apiDataCheck$;
         return (opt === null || opt === void 0 ? void 0 : opt.code) === (apiDataCheck === null || apiDataCheck === void 0 ? void 0 : (_apiDataCheck$ = apiDataCheck[0]) === null || _apiDataCheck$ === void 0 ? void 0 : _apiDataCheck$.reason);
       });
-      if (matchedOption) {
-        setNDCReason(matchedOption);
-        setValue("NDCReason", matchedOption);
+      if (matchedOption && (lodash.isEmpty(formData === null || formData === void 0 ? void 0 : formData.NDCReason) || !(formData !== null && formData !== void 0 && (_formData$NDCReason = formData.NDCReason) !== null && _formData$NDCReason !== void 0 && _formData$NDCReason.code))) {
+        let updatedOption = {
+          ...matchedOption
+        };
+        if (matchedOption.code === "OTHERS") {
+          var _apiDataCheck$2, _apiDataCheck$2$NdcDe, _ptDetail$additionalD;
+          const ptDetail = apiDataCheck === null || apiDataCheck === void 0 ? void 0 : (_apiDataCheck$2 = apiDataCheck[0]) === null || _apiDataCheck$2 === void 0 ? void 0 : (_apiDataCheck$2$NdcDe = _apiDataCheck$2.NdcDetails) === null || _apiDataCheck$2$NdcDe === void 0 ? void 0 : _apiDataCheck$2$NdcDe.find(detail => detail.businessService === "PT");
+          if (ptDetail !== null && ptDetail !== void 0 && (_ptDetail$additionalD = ptDetail.additionalDetails) !== null && _ptDetail$additionalD !== void 0 && _ptDetail$additionalD.reason) {
+            updatedOption.reason = ptDetail.additionalDetails.reason;
+          }
+        }
+        setNDCReason(updatedOption);
+        setValue("NDCReason", updatedOption);
       }
     }
   }, [apiDataCheck, ndcReasonOptions]);
@@ -12779,7 +13688,7 @@ const PropertyDetailsForm$1 = ({
   formState,
   clearErrors
 }) => {
-  var _formData$cpt, _formData$cpt$details, _checkApiDataCheck$Ap, _formData$cpt4, _Digit, _Digit$ComponentRegis, _formData$cpt5, _apiDataCheck$7, _propertyDetails$wate, _propertyDetails$sewe, _formData$cpt6, _formData$cpt6$detail;
+  var _formData$cpt, _formData$cpt$details, _checkApiDataCheck$Ap, _formData$cpt4, _Digit, _Digit$ComponentRegis, _formData$cpt5, _apiDataCheck$8, _propertyDetails$wate, _propertyDetails$sewe, _formData$cpt6, _formData$cpt6$detail;
   const {
     control,
     formState: localFormState,
@@ -12870,7 +13779,7 @@ const PropertyDetailsForm$1 = ({
     }
   }];
   useEffect(() => {
-    var _formData$cpt3, _formData$cpt3$detail, _ownerForName$map, _ownerForName$map$fil, _apiDataCheck$, _apiDataCheck$$owners, _apiDataCheck$$owners2, _formData$PropertyDet, _formData$PropertyDet2, _formData$PropertyDet3;
+    var _formData$cpt3, _formData$cpt3$detail, _ownerForName$map, _ownerForName$map$fil, _apiDataCheck$, _apiDataCheck$$owners, _apiDataCheck$$owners2, _formData$PropertyDet, _formData$PropertyDet2, _formData$PropertyDet3, _apiDataCheck$2, _apiDataCheck$2$NdcDe, _ptDetail$additionalD, _formData$PropertyDet4;
     const ownerForName = (formData === null || formData === void 0 ? void 0 : (_formData$cpt3 = formData.cpt) === null || _formData$cpt3 === void 0 ? void 0 : (_formData$cpt3$detail = _formData$cpt3.details) === null || _formData$cpt3$detail === void 0 ? void 0 : _formData$cpt3$detail.owners) || [];
     const ownerNames = ownerForName === null || ownerForName === void 0 ? void 0 : (_ownerForName$map = ownerForName.map(owner => owner === null || owner === void 0 ? void 0 : owner.name)) === null || _ownerForName$map === void 0 ? void 0 : (_ownerForName$map$fil = _ownerForName$map.filter(Boolean)) === null || _ownerForName$map$fil === void 0 ? void 0 : _ownerForName$map$fil.join(", ");
     const ownerObj = selectedRow;
@@ -12891,6 +13800,10 @@ const PropertyDetailsForm$1 = ({
       isLoading: false,
       billData: (formData === null || formData === void 0 ? void 0 : (_formData$PropertyDet2 = formData.PropertyDetails) === null || _formData$PropertyDet2 === void 0 ? void 0 : (_formData$PropertyDet3 = _formData$PropertyDet2.propertyBillData) === null || _formData$PropertyDet3 === void 0 ? void 0 : _formData$PropertyDet3.billData) || {}
     };
+    const ptDetail = apiDataCheck === null || apiDataCheck === void 0 ? void 0 : (_apiDataCheck$2 = apiDataCheck[0]) === null || _apiDataCheck$2 === void 0 ? void 0 : (_apiDataCheck$2$NdcDe = _apiDataCheck$2.NdcDetails) === null || _apiDataCheck$2$NdcDe === void 0 ? void 0 : _apiDataCheck$2$NdcDe.find(detail => detail.businessService === "PT");
+    if (ptDetail !== null && ptDetail !== void 0 && (_ptDetail$additionalD = ptDetail.additionalDetails) !== null && _ptDetail$additionalD !== void 0 && _ptDetail$additionalD.remarks && !(formData !== null && formData !== void 0 && (_formData$PropertyDet4 = formData.PropertyDetails) !== null && _formData$PropertyDet4 !== void 0 && _formData$PropertyDet4.remarks)) {
+      combinedObject.remarks = ptDetail.additionalDetails.remarks;
+    }
     setPropertyDetails(prev => {
       return {
         ...prev,
@@ -12899,11 +13812,11 @@ const PropertyDetailsForm$1 = ({
     });
   }, [formData === null || formData === void 0 ? void 0 : (_formData$cpt4 = formData.cpt) === null || _formData$cpt4 === void 0 ? void 0 : _formData$cpt4.details, apiDataCheck, selectedRow]);
   useEffect(() => {
-    var _apiDataCheck$2;
+    var _apiDataCheck$3;
     let waterConnection;
-    if (apiDataCheck !== null && apiDataCheck !== void 0 && (_apiDataCheck$2 = apiDataCheck[0]) !== null && _apiDataCheck$2 !== void 0 && _apiDataCheck$2.NdcDetails) {
-      var _apiDataCheck$3, _apiDataCheck$3$NdcDe;
-      const resData = apiDataCheck === null || apiDataCheck === void 0 ? void 0 : (_apiDataCheck$3 = apiDataCheck[0]) === null || _apiDataCheck$3 === void 0 ? void 0 : (_apiDataCheck$3$NdcDe = _apiDataCheck$3.NdcDetails) === null || _apiDataCheck$3$NdcDe === void 0 ? void 0 : _apiDataCheck$3$NdcDe.filter(item => {
+    if (apiDataCheck !== null && apiDataCheck !== void 0 && (_apiDataCheck$3 = apiDataCheck[0]) !== null && _apiDataCheck$3 !== void 0 && _apiDataCheck$3.NdcDetails) {
+      var _apiDataCheck$4, _apiDataCheck$4$NdcDe;
+      const resData = apiDataCheck === null || apiDataCheck === void 0 ? void 0 : (_apiDataCheck$4 = apiDataCheck[0]) === null || _apiDataCheck$4 === void 0 ? void 0 : (_apiDataCheck$4$NdcDe = _apiDataCheck$4.NdcDetails) === null || _apiDataCheck$4$NdcDe === void 0 ? void 0 : _apiDataCheck$4$NdcDe.filter(item => {
         return item.businessService == "WS";
       });
       waterConnection = (resData === null || resData === void 0 ? void 0 : resData.map(item => ({
@@ -12928,11 +13841,11 @@ const PropertyDetailsForm$1 = ({
     }));
   }, [waterConnectionData, apiDataCheck]);
   useEffect(() => {
-    var _apiDataCheck$4;
+    var _apiDataCheck$5;
     let sewerageConnection;
-    if (apiDataCheck !== null && apiDataCheck !== void 0 && (_apiDataCheck$4 = apiDataCheck[0]) !== null && _apiDataCheck$4 !== void 0 && _apiDataCheck$4.NdcDetails) {
-      var _apiDataCheck$5, _apiDataCheck$5$NdcDe;
-      const resData = apiDataCheck === null || apiDataCheck === void 0 ? void 0 : (_apiDataCheck$5 = apiDataCheck[0]) === null || _apiDataCheck$5 === void 0 ? void 0 : (_apiDataCheck$5$NdcDe = _apiDataCheck$5.NdcDetails) === null || _apiDataCheck$5$NdcDe === void 0 ? void 0 : _apiDataCheck$5$NdcDe.filter(item => {
+    if (apiDataCheck !== null && apiDataCheck !== void 0 && (_apiDataCheck$5 = apiDataCheck[0]) !== null && _apiDataCheck$5 !== void 0 && _apiDataCheck$5.NdcDetails) {
+      var _apiDataCheck$6, _apiDataCheck$6$NdcDe;
+      const resData = apiDataCheck === null || apiDataCheck === void 0 ? void 0 : (_apiDataCheck$6 = apiDataCheck[0]) === null || _apiDataCheck$6 === void 0 ? void 0 : (_apiDataCheck$6$NdcDe = _apiDataCheck$6.NdcDetails) === null || _apiDataCheck$6$NdcDe === void 0 ? void 0 : _apiDataCheck$6$NdcDe.filter(item => {
         return item.businessService == "SW";
       });
       sewerageConnection = (resData === null || resData === void 0 ? void 0 : resData.map(item => ({
@@ -13216,8 +14129,8 @@ const PropertyDetailsForm$1 = ({
   useEffect(() => {
     var _checkApiDataCheck$Ap2;
     if (checkApiDataCheck !== null && checkApiDataCheck !== void 0 && (_checkApiDataCheck$Ap2 = checkApiDataCheck.Applications) !== null && _checkApiDataCheck$Ap2 !== void 0 && _checkApiDataCheck$Ap2[0] || apiDataCheck !== null && apiDataCheck !== void 0 && apiDataCheck[0]) {
-      var _checkApiDataCheck$Ap3, _checkApiDataCheck$Ap4, _apiDataCheck$6;
-      const checkOwners = (checkApiDataCheck === null || checkApiDataCheck === void 0 ? void 0 : (_checkApiDataCheck$Ap3 = checkApiDataCheck.Applications) === null || _checkApiDataCheck$Ap3 === void 0 ? void 0 : (_checkApiDataCheck$Ap4 = _checkApiDataCheck$Ap3[0]) === null || _checkApiDataCheck$Ap4 === void 0 ? void 0 : _checkApiDataCheck$Ap4.owners) || (apiDataCheck === null || apiDataCheck === void 0 ? void 0 : (_apiDataCheck$6 = apiDataCheck[0]) === null || _apiDataCheck$6 === void 0 ? void 0 : _apiDataCheck$6.owners);
+      var _checkApiDataCheck$Ap3, _checkApiDataCheck$Ap4, _apiDataCheck$7;
+      const checkOwners = (checkApiDataCheck === null || checkApiDataCheck === void 0 ? void 0 : (_checkApiDataCheck$Ap3 = checkApiDataCheck.Applications) === null || _checkApiDataCheck$Ap3 === void 0 ? void 0 : (_checkApiDataCheck$Ap4 = _checkApiDataCheck$Ap3[0]) === null || _checkApiDataCheck$Ap4 === void 0 ? void 0 : _checkApiDataCheck$Ap4.owners) || (apiDataCheck === null || apiDataCheck === void 0 ? void 0 : (_apiDataCheck$7 = apiDataCheck[0]) === null || _apiDataCheck$7 === void 0 ? void 0 : _apiDataCheck$7.owners);
       const filterRow = checkOwners === null || checkOwners === void 0 ? void 0 : checkOwners.find(owner => owner === null || owner === void 0 ? void 0 : owner.isPrimaryOwner);
       console.log("filterRow===", filterRow);
       setSelectedRow(filterRow);
@@ -13227,7 +14140,7 @@ const PropertyDetailsForm$1 = ({
     style: {
       marginBottom: "16px"
     }
-  }, ((formData === null || formData === void 0 ? void 0 : (_formData$cpt5 = formData.cpt) === null || _formData$cpt5 === void 0 ? void 0 : _formData$cpt5.details) || (apiDataCheck === null || apiDataCheck === void 0 ? void 0 : (_apiDataCheck$7 = apiDataCheck[0]) === null || _apiDataCheck$7 === void 0 ? void 0 : _apiDataCheck$7.NdcDetails)) && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(LabelFieldPair, {
+  }, ((formData === null || formData === void 0 ? void 0 : (_formData$cpt5 = formData.cpt) === null || _formData$cpt5 === void 0 ? void 0 : _formData$cpt5.details) || (apiDataCheck === null || apiDataCheck === void 0 ? void 0 : (_apiDataCheck$8 = apiDataCheck[0]) === null || _apiDataCheck$8 === void 0 ? void 0 : _apiDataCheck$8.NdcDetails)) && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(LabelFieldPair, {
     style: {
       marginTop: "40px"
     }
@@ -13242,7 +14155,7 @@ const PropertyDetailsForm$1 = ({
       width: "100%"
     }
   }, propertyDetails === null || propertyDetails === void 0 ? void 0 : (_propertyDetails$wate = propertyDetails.waterConnection) === null || _propertyDetails$wate === void 0 ? void 0 : _propertyDetails$wate.map((item, index) => {
-    var _apiDataCheck$8, _item$billData, _item$billData2, _item$billData3, _item$billData4;
+    var _apiDataCheck$9, _item$billData, _item$billData2, _item$billData3, _item$billData4;
     return /*#__PURE__*/React.createElement("div", {
       className: "ndc_property_search",
       key: index,
@@ -13283,7 +14196,7 @@ const PropertyDetailsForm$1 = ({
         alignItems: "center",
         gap: "12px"
       }
-    }, !(apiDataCheck !== null && apiDataCheck !== void 0 && (_apiDataCheck$8 = apiDataCheck[0]) !== null && _apiDataCheck$8 !== void 0 && _apiDataCheck$8.NdcDetails) && (item === null || item === void 0 ? void 0 : item.connectionNo) && !(item !== null && item !== void 0 && (_item$billData = item.billData) !== null && _item$billData !== void 0 && _item$billData.id) && (item === null || item === void 0 ? void 0 : (_item$billData2 = item.billData) === null || _item$billData2 === void 0 ? void 0 : _item$billData2.totalAmount) != 0 && /*#__PURE__*/React.createElement("button", {
+    }, !(apiDataCheck !== null && apiDataCheck !== void 0 && (_apiDataCheck$9 = apiDataCheck[0]) !== null && _apiDataCheck$9 !== void 0 && _apiDataCheck$9.NdcDetails) && (item === null || item === void 0 ? void 0 : item.connectionNo) && !(item !== null && item !== void 0 && (_item$billData = item.billData) !== null && _item$billData !== void 0 && _item$billData.id) && (item === null || item === void 0 ? void 0 : (_item$billData2 = item.billData) === null || _item$billData2 === void 0 ? void 0 : _item$billData2.totalAmount) != 0 && /*#__PURE__*/React.createElement("button", {
       className: "submit-bar",
       type: "button",
       style: {
@@ -13350,7 +14263,7 @@ const PropertyDetailsForm$1 = ({
       width: "100%"
     }
   }, propertyDetails === null || propertyDetails === void 0 ? void 0 : (_propertyDetails$sewe = propertyDetails.sewerageConnection) === null || _propertyDetails$sewe === void 0 ? void 0 : _propertyDetails$sewe.map((item, index) => {
-    var _apiDataCheck$9, _item$billData5, _item$billData6, _item$billData7, _item$billData8;
+    var _apiDataCheck$0, _item$billData5, _item$billData6, _item$billData7, _item$billData8;
     return /*#__PURE__*/React.createElement("div", {
       className: "ndc_property_search",
       key: index,
@@ -13391,7 +14304,7 @@ const PropertyDetailsForm$1 = ({
         alignItems: "center",
         gap: "12px"
       }
-    }, !(apiDataCheck !== null && apiDataCheck !== void 0 && (_apiDataCheck$9 = apiDataCheck[0]) !== null && _apiDataCheck$9 !== void 0 && _apiDataCheck$9.NdcDetails) && (item === null || item === void 0 ? void 0 : item.connectionNo) && !(item !== null && item !== void 0 && (_item$billData5 = item.billData) !== null && _item$billData5 !== void 0 && _item$billData5.id) && (item === null || item === void 0 ? void 0 : (_item$billData6 = item.billData) === null || _item$billData6 === void 0 ? void 0 : _item$billData6.totalAmount) != 0 && /*#__PURE__*/React.createElement("button", {
+    }, !(apiDataCheck !== null && apiDataCheck !== void 0 && (_apiDataCheck$0 = apiDataCheck[0]) !== null && _apiDataCheck$0 !== void 0 && _apiDataCheck$0.NdcDetails) && (item === null || item === void 0 ? void 0 : item.connectionNo) && !(item !== null && item !== void 0 && (_item$billData5 = item.billData) !== null && _item$billData5 !== void 0 && _item$billData5.id) && (item === null || item === void 0 ? void 0 : (_item$billData6 = item.billData) === null || _item$billData6 === void 0 ? void 0 : _item$billData6.totalAmount) != 0 && /*#__PURE__*/React.createElement("button", {
       className: "submit-bar",
       type: "button",
       style: {
@@ -14621,7 +15534,7 @@ const PayWSBillModal = ({
     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 \r 17.59 19 19 17.59 13.41 12 19 6.41z"
+    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 = ({
     onClick
@@ -15241,7 +16154,7 @@ const NDCNewFormSummaryStepThreeEmployee = ({
     }
   };
   function mapToNDCPayload(inputData, actionStatus) {
-    var _Digit$UserService$ge, _ref, _inputData$apiData, _inputData$apiData$Ap, _inputData$apiData$Ap2, _formData$responseDat, _formData$apiData, _formData$apiData$App, _inputData$DocummentD, _inputData$DocummentD2;
+    var _Digit$UserService$ge, _ref, _inputData$apiData, _inputData$apiData$Ap, _inputData$apiData$Ap2, _formData$responseDat, _formData$apiData, _formData$apiData$App, _baseApplication$NdcD, _formData$NDCDetails4, _formData$NDCDetails5, _inputData$DocummentD, _inputData$DocummentD2;
     const applicant = ((_Digit$UserService$ge = Digit.UserService.getUser()) === null || _Digit$UserService$ge === void 0 ? void 0 : _Digit$UserService$ge.info) || {};
     console.log("checkFormData", formData);
     const owners = (_ref = (inputData === null || inputData === void 0 ? void 0 : (_inputData$apiData = inputData.apiData) === null || _inputData$apiData === void 0 ? void 0 : (_inputData$apiData$Ap = _inputData$apiData.Applications) === null || _inputData$apiData$Ap === void 0 ? void 0 : (_inputData$apiData$Ap2 = _inputData$apiData$Ap[0]) === null || _inputData$apiData$Ap2 === void 0 ? void 0 : _inputData$apiData$Ap2.owners) || []) === null || _ref === void 0 ? void 0 : _ref.map(({
@@ -15256,7 +16169,21 @@ const NDCNewFormSummaryStepThreeEmployee = ({
         action: actionStatus
       },
       owners: owners,
-      NdcDetails: baseApplication === null || baseApplication === void 0 ? void 0 : baseApplication.NdcDetails,
+      NdcDetails: baseApplication === null || baseApplication === void 0 ? void 0 : (_baseApplication$NdcD = baseApplication.NdcDetails) === null || _baseApplication$NdcD === void 0 ? void 0 : _baseApplication$NdcD.map(detail => {
+        if (detail.businessService === "PT") {
+          var _formData$NDCDetails, _formData$NDCDetails$, _formData$NDCDetails2, _formData$NDCDetails3;
+          return {
+            ...detail,
+            additionalDetails: {
+              ...detail.additionalDetails,
+              reason: formData === null || formData === void 0 ? void 0 : (_formData$NDCDetails = formData.NDCDetails) === null || _formData$NDCDetails === void 0 ? void 0 : (_formData$NDCDetails$ = _formData$NDCDetails.NDCReason) === null || _formData$NDCDetails$ === void 0 ? void 0 : _formData$NDCDetails$.reason,
+              remarks: formData === null || formData === void 0 ? void 0 : (_formData$NDCDetails2 = formData.NDCDetails) === null || _formData$NDCDetails2 === void 0 ? void 0 : (_formData$NDCDetails3 = _formData$NDCDetails2.PropertyDetails) === null || _formData$NDCDetails3 === void 0 ? void 0 : _formData$NDCDetails3.remarks
+            }
+          };
+        }
+        return detail;
+      }),
+      reason: formData === null || formData === void 0 ? void 0 : (_formData$NDCDetails4 = formData.NDCDetails) === null || _formData$NDCDetails4 === void 0 ? void 0 : (_formData$NDCDetails5 = _formData$NDCDetails4.NDCReason) === null || _formData$NDCDetails5 === void 0 ? void 0 : _formData$NDCDetails5.code,
       Documents: []
     };
     ((inputData === null || inputData === void 0 ? void 0 : (_inputData$DocummentD = inputData.DocummentDetails) === null || _inputData$DocummentD === void 0 ? void 0 : (_inputData$DocummentD2 = _inputData$DocummentD.documents) === null || _inputData$DocummentD2 === void 0 ? void 0 : _inputData$DocummentD2.documents) || []).forEach(doc => {