diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/Module.js b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/Module.js
index 7846d99a54d..f2a6087f3e5 100644
--- a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/Module.js
+++ b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/Module.js
@@ -26,6 +26,7 @@ import FacilityPopup from "./components/FacilityPopup";
import UserAccessMgmt from "./components/UserAccessMgmt";
import UserAccessMgmtTableWrapper from "./components/UserAccessMgmtTableWrapper";
import { DataMgmtComponent } from "./components/DataMgmtComponent";
+import { ShowMoreWrapper } from "./components/ShowMoreWrapper";
export const MicroplanModule = ({ stateCode, userType, tenants }) => {
const { path, url } = useRouteMatch();
@@ -82,7 +83,8 @@ const componentsToRegister = {
FacilityPopup,
UserAccessMgmt,
UserAccessMgmtTableWrapper,
- DataMgmtComponent
+ DataMgmtComponent,
+ ShowMoreWrapper,
};
export const initMicroplanComponents = () => {
diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/ShowMoreWrapper.js b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/ShowMoreWrapper.js
new file mode 100644
index 00000000000..67e8b6f06ec
--- /dev/null
+++ b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/ShowMoreWrapper.js
@@ -0,0 +1,41 @@
+import React, { Fragment, useEffect, useState } from "react";
+import { Button, PopUp, Chip, Loader,} from "@egovernments/digit-ui-components";
+import { useTranslation } from "react-i18next";
+
+
+export const ShowMoreWrapper = ({ setShowPopUp, alreadyQueuedSelectedState, heading="" }) => {
+ const { t } = useTranslation();
+
+ return (
+ {
+ setShowPopUp(false);
+ }}
+ onClose={() => {
+ setShowPopUp(false);
+ }}
+ >
+
+ {alreadyQueuedSelectedState?.map((item, index) => (
+
+ ))}
+
+
+ );
+
+ };
\ No newline at end of file
diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/UserAccessMgmtTableWrapper.js b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/UserAccessMgmtTableWrapper.js
index dbd76dc89d6..fe0dd1fe30b 100644
--- a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/UserAccessMgmtTableWrapper.js
+++ b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/UserAccessMgmtTableWrapper.js
@@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next";
import DataTable from "react-data-table-component";
import { CardSubHeader, Card } from "@egovernments/digit-ui-react-components";
import { tableCustomStyle } from "./tableCustomStyle";
+import { ShowMoreWrapper } from "./ShowMoreWrapper";
function groupEmployeesByPlan(data, planData) {
@@ -31,43 +32,6 @@ function groupEmployeesByPlan(data, planData) {
return groupedEmployees ? Object.values(groupedEmployees) : [];
}
- const Wrapper = ({ setShowPopUp, alreadyQueuedSelectedState }) => {
-
- const { t } = useTranslation();
- return (
- {
- setShowPopUp(false);
- }}
- onClose={() => {
- setShowPopUp(false);
- }}
- >
-
- {alreadyQueuedSelectedState?.map((item, index) => (
-
- ))}
-
-
- );
-
- };
-
const UserAccessMgmtTableWrapper = ({ role,}) => {
const { t } = useTranslation();
const tenantId = Digit.ULBService.getCurrentTenantId();
@@ -189,10 +153,11 @@ const UserAccessMgmtTableWrapper = ({ role,}) => {
/>
)}
{showPopUp && (
-
+
)}
);
diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/subBoundaryView.js b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/subBoundaryView.js
index b4b7081619e..ce592eb172c 100644
--- a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/subBoundaryView.js
+++ b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/subBoundaryView.js
@@ -1,9 +1,17 @@
-import React from 'react'
+import React, { useState } from 'react'
import HeaderComp from './HeaderComp';
-import { Card } from '@egovernments/digit-ui-components';
-import { Chip } from '@egovernments/digit-ui-components';
+import { Card, Button, PopUp, Chip, Loader } from '@egovernments/digit-ui-components';
+import { ShowMoreWrapper } from './ShowMoreWrapper';
+import { useTranslation } from 'react-i18next';
const SubBoundaryView = ({ title, arr }) => {
+ const [showPopUp, setShowPopUp] = useState(false);
+ const { t } = useTranslation();
+
+ const openPopUp = () => {
+ setShowPopUp(true);
+ };
+
return (
{
@@ -11,22 +19,53 @@ const SubBoundaryView = ({ title, arr }) => {
{/* Flex container for the chips */}
-
- {arr.map((el, ind) => {
+
+ {arr?.slice(0, 10)?.map((el, ind) => {
return (
-
-
);
- })}
+ }
+
+
+ )}
+ {arr?.length > (10) && (
+
) : (
diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/UserDownload.js b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/UserDownload.js
index f7db93e713e..03ce41f4e79 100644
--- a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/UserDownload.js
+++ b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/UserDownload.js
@@ -1,14 +1,14 @@
import React, { useState, useEffect } from 'react';
import FileComponent from '../../components/FileComponent';
-import { Card } from '@egovernments/digit-ui-components';
import HeaderComp from '../../components/HeaderComp';
-import { TextBlock } from '@egovernments/digit-ui-components';
+import { TextBlock, Card } from '@egovernments/digit-ui-components';
+import {LoaderWithGap} from "@egovernments/digit-ui-react-components";
+import { useTranslation } from 'react-i18next';
+
const UserDownload = () => {
-
+ const { t } = useTranslation();
const [Files, setFile] = useState(""); // Initialize as an empty string
-
-
const { data, isFetching, isLoading } = Digit.Hooks.microplanv1.useFileDownload({
"SearchCriteria": {
"tenantId": Digit.ULBService.getCurrentTenantId(),
@@ -53,11 +53,10 @@ const UserDownload = () => {
return (
-
-
+ {isLoading && }
-
+
{data?.ResourceDetails &&
[...data?.ResourceDetails].reverse().map((item, index) => {
let fileName = item?.additionalDetails?.fileName || `FileNo${item?.processedFilestoreId?.slice(0, 4) || ''}`;