diff --git a/forms-flow-admin/src/components/dashboard/dashboard.tsx b/forms-flow-admin/src/components/dashboard/dashboard.tsx
index be224ed2..2b403433 100644
--- a/forms-flow-admin/src/components/dashboard/dashboard.tsx
+++ b/forms-flow-admin/src/components/dashboard/dashboard.tsx
@@ -1,12 +1,8 @@
import React from "react";
import { Button } from "react-bootstrap";
import BootstrapTable from "react-bootstrap-table-next";
-import DropdownButton from "react-bootstrap/DropdownButton";
-import Dropdown from "react-bootstrap/Dropdown";
import OverlayTrigger from "react-bootstrap/OverlayTrigger";
import Popover from "react-bootstrap/Popover";
-import "react-bootstrap-table2-paginator/dist/react-bootstrap-table2-paginator.min.css";
-import paginationFactory from "react-bootstrap-table2-paginator";
import { toast } from "react-toastify";
import Loading from "../loading";
import { useParams } from "react-router-dom";
@@ -18,29 +14,9 @@ import {
fetchAuthorizations,
} from "../../services/dashboard";
import { Translation, useTranslation } from "react-i18next";
+import { TableFooter } from "@formsflow/components";
-const customDropUp = ({ options, currSizePerPage, onSizePerPageChange }) => {
- return (
-
- {options.map((option) => (
- onSizePerPageChange(option.page)}
- >
- {option.text}
-
- ))}
-
- );
-};
-
-export const InsightDashboard = React.memo((props: any) => {
+const InsightDashboard = React.memo((props: any) => {
const { dashboards, groups, authorizations, setCount, authReceived } = props;
const isGroupUpdated = groups.length > 0;
@@ -55,6 +31,7 @@ export const InsightDashboard = React.memo((props: any) => {
const [show, setShow] = React.useState(false);
const [activePage, setActivePage] = React.useState(1);
const [err, setErr] = React.useState({});
+ const [limit, setLimit] = React.useState(5);
const [isLoading, setIsLoading] = React.useState(true);
React.useEffect(() => {
@@ -285,36 +262,17 @@ export const InsightDashboard = React.memo((props: any) => {
return list;
};
- const customTotal = (from, to, size) => (
-
- {(t) => t("Showing")} {from}{" "}
- {(t) => t("to")} {to}{" "}
- {(t) => t("of")} {size}{" "}
- {(t) => t("results")}
-
- );
-
- const pagination = paginationFactory({
- showTotal: true,
- align: "center",
- sizePerPageList: getpageList(),
- page: activePage,
- paginationTotalRenderer: customTotal,
- onPageChange: (page) => setActivePage(page),
- sizePerPageRenderer: customDropUp,
- });
-
return (
<>
{!isLoading ? (
+
0 ? pagination : false}
bordered={false}
wrapperClasses="table-container-admin mb-3 px-4"
rowStyle={{
@@ -324,6 +282,19 @@ export const InsightDashboard = React.memo((props: any) => {
noDataIndication={noData}
data-testid="admin-dashboard-table"
/>
+
+
+ setActivePage(page)}
+ onLimitChange={setLimit}
+ pageOptions={getpageList()}
+ />
+
+
+
) : (
)}