From ee9101e738cbdf064cc1c028d13472b0b60fe089 Mon Sep 17 00:00:00 2001
From: Pallavi <pallavilpmt1995@gmail.com>
Date: Mon, 1 Sep 2025 22:26:12 +0530
Subject: [PATCH] Save Amount of Entries

---
 .../invitations/InvitationsDataTable.tsx      |  1 +
 .../settings/access/roles/RolesDataTable.tsx  |  1 +
 .../settings/access/users/UsersDataTable.tsx  |  1 +
 .../settings/api-keys/OrgApiKeysDataTable.tsx |  1 +
 .../settings/clients/ClientsDataTable.tsx     |  1 +
 .../settings/domains/DomainsDataTable.tsx     |  1 +
 .../settings/resources/ResourcesTable.tsx     | 64 ++++++++++++-
 .../share-links/ShareLinksDataTable.tsx       |  1 +
 .../[orgId]/settings/sites/SitesDataTable.tsx |  1 +
 src/app/admin/api-keys/ApiKeysDataTable.tsx   |  1 +
 src/app/admin/idp/AdminIdpDataTable.tsx       |  1 +
 .../idp/[idpId]/policies/PolicyDataTable.tsx  |  1 +
 .../admin/license/LicenseKeysDataTable.tsx    |  1 +
 src/app/admin/users/AdminUsersDataTable.tsx   |  1 +
 src/components/DataTablePagination.tsx        | 20 +++--
 src/components/ui/data-table.tsx              | 89 +++++++++++++++++--
 16 files changed, 172 insertions(+), 14 deletions(-)

diff --git a/src/app/[orgId]/settings/access/invitations/InvitationsDataTable.tsx b/src/app/[orgId]/settings/access/invitations/InvitationsDataTable.tsx
index 57b1d746..396a3c20 100644
--- a/src/app/[orgId]/settings/access/invitations/InvitationsDataTable.tsx
+++ b/src/app/[orgId]/settings/access/invitations/InvitationsDataTable.tsx
@@ -22,6 +22,7 @@ export function InvitationsDataTable<TData, TValue>({
         <DataTable
             columns={columns}
             data={data}
+            persistPageSize="invitations-table"
             title={t('invite')}
             searchPlaceholder={t('inviteSearch')}
             searchColumn="email"
diff --git a/src/app/[orgId]/settings/access/roles/RolesDataTable.tsx b/src/app/[orgId]/settings/access/roles/RolesDataTable.tsx
index 3900a70b..e88f9a2f 100644
--- a/src/app/[orgId]/settings/access/roles/RolesDataTable.tsx
+++ b/src/app/[orgId]/settings/access/roles/RolesDataTable.tsx
@@ -24,6 +24,7 @@ export function RolesDataTable<TData, TValue>({
         <DataTable
             columns={columns}
             data={data}
+            persistPageSize="roles-table"
             title={t('roles')}
             searchPlaceholder={t('accessRolesSearch')}
             searchColumn="name"
diff --git a/src/app/[orgId]/settings/access/users/UsersDataTable.tsx b/src/app/[orgId]/settings/access/users/UsersDataTable.tsx
index 349e51a1..1999b620 100644
--- a/src/app/[orgId]/settings/access/users/UsersDataTable.tsx
+++ b/src/app/[orgId]/settings/access/users/UsersDataTable.tsx
@@ -24,6 +24,7 @@ export function UsersDataTable<TData, TValue>({
         <DataTable
             columns={columns}
             data={data}
+            persistPageSize="users-table"
             title={t('users')}
             searchPlaceholder={t('accessUsersSearch')}
             searchColumn="email"
diff --git a/src/app/[orgId]/settings/api-keys/OrgApiKeysDataTable.tsx b/src/app/[orgId]/settings/api-keys/OrgApiKeysDataTable.tsx
index 9efc9bb7..773b2141 100644
--- a/src/app/[orgId]/settings/api-keys/OrgApiKeysDataTable.tsx
+++ b/src/app/[orgId]/settings/api-keys/OrgApiKeysDataTable.tsx
@@ -22,6 +22,7 @@ export function OrgApiKeysDataTable<TData, TValue>({
         <DataTable
             columns={columns}
             data={data}
+            persistPageSize="Org-apikeys-table"
             title={t('apiKeys')}
             searchPlaceholder={t('searchApiKeys')}
             searchColumn="name"
diff --git a/src/app/[orgId]/settings/clients/ClientsDataTable.tsx b/src/app/[orgId]/settings/clients/ClientsDataTable.tsx
index 4f4c3b36..6242ba05 100644
--- a/src/app/[orgId]/settings/clients/ClientsDataTable.tsx
+++ b/src/app/[orgId]/settings/clients/ClientsDataTable.tsx
@@ -20,6 +20,7 @@ export function ClientsDataTable<TData, TValue>({
         <DataTable
             columns={columns}
             data={data}
+            persistPageSize="clients-table"
             title="Clients"
             searchPlaceholder="Search clients..."
             searchColumn="name"
diff --git a/src/app/[orgId]/settings/domains/DomainsDataTable.tsx b/src/app/[orgId]/settings/domains/DomainsDataTable.tsx
index 2008f0e8..4059b7d3 100644
--- a/src/app/[orgId]/settings/domains/DomainsDataTable.tsx
+++ b/src/app/[orgId]/settings/domains/DomainsDataTable.tsx
@@ -25,6 +25,7 @@ export function DomainsDataTable<TData, TValue>({
         <DataTable
             columns={columns}
             data={data}
+            persistPageSize="domains-table"
             title={t("domains")}
             searchPlaceholder={t("domainsSearch")}
             searchColumn="baseDomain"
diff --git a/src/app/[orgId]/settings/resources/ResourcesTable.tsx b/src/app/[orgId]/settings/resources/ResourcesTable.tsx
index 97bdfdd9..7f57c944 100644
--- a/src/app/[orgId]/settings/resources/ResourcesTable.tsx
+++ b/src/app/[orgId]/settings/resources/ResourcesTable.tsx
@@ -99,6 +99,43 @@ type ResourcesTableProps = {
     defaultView?: "proxy" | "internal";
 };
 
+
+const STORAGE_KEYS = {
+    PAGE_SIZE: 'datatable-page-size',
+    getTablePageSize: (tableId?: string) =>
+        tableId ? `datatable-${tableId}-page-size` : STORAGE_KEYS.PAGE_SIZE
+};
+
+const getStoredPageSize = (tableId?: string, defaultSize = 20): number => {
+    if (typeof window === 'undefined') return defaultSize;
+
+    try {
+        const key = STORAGE_KEYS.getTablePageSize(tableId);
+        const stored = localStorage.getItem(key);
+        if (stored) {
+            const parsed = parseInt(stored, 10);
+            if (parsed > 0 && parsed <= 1000) {
+                return parsed;
+            }
+        }
+    } catch (error) {
+        console.warn('Failed to read page size from localStorage:', error);
+    }
+    return defaultSize;
+};
+
+const setStoredPageSize = (pageSize: number, tableId?: string): void => {
+    if (typeof window === 'undefined') return;
+
+    try {
+        const key = STORAGE_KEYS.getTablePageSize(tableId);
+        localStorage.setItem(key, pageSize.toString());
+    } catch (error) {
+        console.warn('Failed to save page size to localStorage:', error);
+    }
+};
+
+
 export default function ResourcesTable({
     resources,
     internalResources,
@@ -113,6 +150,13 @@ export default function ResourcesTable({
 
     const api = createApiClient({ env });
 
+    const [proxyPageSize, setProxyPageSize] = useState<number>(() =>
+        getStoredPageSize('proxy-resources', 20)
+    );
+    const [internalPageSize, setInternalPageSize] = useState<number>(() =>
+        getStoredPageSize('internal-resources', 20)
+    );
+
     const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
     const [selectedResource, setSelectedResource] =
         useState<ResourceRow | null>();
@@ -559,7 +603,7 @@ export default function ResourcesTable({
         onGlobalFilterChange: setProxyGlobalFilter,
         initialState: {
             pagination: {
-                pageSize: 20,
+                pageSize: proxyPageSize,
                 pageIndex: 0
             }
         },
@@ -582,7 +626,7 @@ export default function ResourcesTable({
         onGlobalFilterChange: setInternalGlobalFilter,
         initialState: {
             pagination: {
-                pageSize: 20,
+                pageSize: proxyPageSize,
                 pageIndex: 0
             }
         },
@@ -593,6 +637,16 @@ export default function ResourcesTable({
         }
     });
 
+    const handleProxyPageSizeChange = (newPageSize: number) => {
+        setProxyPageSize(newPageSize);
+        setStoredPageSize(newPageSize, 'proxy-resources');
+    };
+
+    const handleInternalPageSizeChange = (newPageSize: number) => {
+        setInternalPageSize(newPageSize);
+        setStoredPageSize(newPageSize, 'internal-resources');
+    };
+
     return (
         <>
             {selectedResource && (
@@ -761,7 +815,10 @@ export default function ResourcesTable({
                                     </TableBody>
                                 </Table>
                                 <div className="mt-4">
-                                    <DataTablePagination table={proxyTable} />
+                                    <DataTablePagination
+                                        table={proxyTable}
+                                        onPageSizeChange={handleProxyPageSizeChange}
+                                    />
                                 </div>
                             </TabsContent>
                             <TabsContent value="internal">
@@ -861,6 +918,7 @@ export default function ResourcesTable({
                                 <div className="mt-4">
                                     <DataTablePagination
                                         table={internalTable}
+                                        onPageSizeChange={handleInternalPageSizeChange}
                                     />
                                 </div>
                             </TabsContent>
diff --git a/src/app/[orgId]/settings/share-links/ShareLinksDataTable.tsx b/src/app/[orgId]/settings/share-links/ShareLinksDataTable.tsx
index e9fc4c6a..dd266bcf 100644
--- a/src/app/[orgId]/settings/share-links/ShareLinksDataTable.tsx
+++ b/src/app/[orgId]/settings/share-links/ShareLinksDataTable.tsx
@@ -24,6 +24,7 @@ export function ShareLinksDataTable<TData, TValue>({
         <DataTable
             columns={columns}
             data={data}
+            persistPageSize="shareLinks-table"
             title={t('shareLinks')}
             searchPlaceholder={t('shareSearch')}
             searchColumn="name"
diff --git a/src/app/[orgId]/settings/sites/SitesDataTable.tsx b/src/app/[orgId]/settings/sites/SitesDataTable.tsx
index 60c395c7..5dc39077 100644
--- a/src/app/[orgId]/settings/sites/SitesDataTable.tsx
+++ b/src/app/[orgId]/settings/sites/SitesDataTable.tsx
@@ -26,6 +26,7 @@ export function SitesDataTable<TData, TValue>({
         <DataTable
             columns={columns}
             data={data}
+            persistPageSize="sites-table"
             title={t('sites')}
             searchPlaceholder={t('searchSitesProgress')}
             searchColumn="name"
diff --git a/src/app/admin/api-keys/ApiKeysDataTable.tsx b/src/app/admin/api-keys/ApiKeysDataTable.tsx
index d82eaba5..6ac8d68b 100644
--- a/src/app/admin/api-keys/ApiKeysDataTable.tsx
+++ b/src/app/admin/api-keys/ApiKeysDataTable.tsx
@@ -47,6 +47,7 @@ export function ApiKeysDataTable<TData, TValue>({
         <DataTable
             columns={columns}
             data={data}
+            persistPageSize="apiKeys-table"
             title={t('apiKeys')}
             searchPlaceholder={t('searchApiKeys')}
             searchColumn="name"
diff --git a/src/app/admin/idp/AdminIdpDataTable.tsx b/src/app/admin/idp/AdminIdpDataTable.tsx
index f01b3c03..2efd9e7c 100644
--- a/src/app/admin/idp/AdminIdpDataTable.tsx
+++ b/src/app/admin/idp/AdminIdpDataTable.tsx
@@ -21,6 +21,7 @@ export function IdpDataTable<TData, TValue>({
         <DataTable
             columns={columns}
             data={data}
+            persistPageSize="idp-table"
             title={t('idp')}
             searchPlaceholder={t('idpSearch')}
             searchColumn="name"
diff --git a/src/app/admin/idp/[idpId]/policies/PolicyDataTable.tsx b/src/app/admin/idp/[idpId]/policies/PolicyDataTable.tsx
index cbaf3760..89c1ed19 100644
--- a/src/app/admin/idp/[idpId]/policies/PolicyDataTable.tsx
+++ b/src/app/admin/idp/[idpId]/policies/PolicyDataTable.tsx
@@ -22,6 +22,7 @@ export function PolicyDataTable<TData, TValue>({
         <DataTable
             columns={columns}
             data={data}
+            persistPageSize="orgPolicies-table"
             title={t('orgPolicies')}
             searchPlaceholder={t('orgPoliciesSearch')}
             searchColumn="orgId"
diff --git a/src/app/admin/license/LicenseKeysDataTable.tsx b/src/app/admin/license/LicenseKeysDataTable.tsx
index ae6206e0..1def304b 100644
--- a/src/app/admin/license/LicenseKeysDataTable.tsx
+++ b/src/app/admin/license/LicenseKeysDataTable.tsx
@@ -136,6 +136,7 @@ export function LicenseKeysDataTable({
         <DataTable
             columns={columns}
             data={licenseKeys}
+            persistPageSize="licenseKeys-table"
             title={t('licenseKeys')}
             searchPlaceholder={t('licenseKeySearch')}
             searchColumn="licenseKey"
diff --git a/src/app/admin/users/AdminUsersDataTable.tsx b/src/app/admin/users/AdminUsersDataTable.tsx
index 5e1e3ce8..fecba7fb 100644
--- a/src/app/admin/users/AdminUsersDataTable.tsx
+++ b/src/app/admin/users/AdminUsersDataTable.tsx
@@ -22,6 +22,7 @@ export function UsersDataTable<TData, TValue>({
         <DataTable
             columns={columns}
             data={data}
+            persistPageSize="userServer-table"
             title={t('userServer')}
             searchPlaceholder={t('userSearch')}
             searchColumn="email"
diff --git a/src/components/DataTablePagination.tsx b/src/components/DataTablePagination.tsx
index 24a12319..af0a0fe6 100644
--- a/src/components/DataTablePagination.tsx
+++ b/src/components/DataTablePagination.tsx
@@ -18,28 +18,38 @@ import { useTranslations } from "next-intl";
 
 interface DataTablePaginationProps<TData> {
     table: Table<TData>;
+    onPageSizeChange?: (pageSize: number) => void;
 }
 
 export function DataTablePagination<TData>({
-    table
+    table,
+    onPageSizeChange
 }: DataTablePaginationProps<TData>) {
     const t = useTranslations();
 
+    const handlePageSizeChange = (value: string) => {
+        const newPageSize = Number(value);
+        table.setPageSize(newPageSize);
+        
+        // Call the callback if provided (for persistence)
+        if (onPageSizeChange) {
+            onPageSizeChange(newPageSize);
+        }
+    };
+
     return (
         <div className="flex items-center justify-between text-muted-foreground">
             <div className="flex items-center space-x-2">
                 <Select
                     value={`${table.getState().pagination.pageSize}`}
-                    onValueChange={(value) => {
-                        table.setPageSize(Number(value));
-                    }}
+                    onValueChange={handlePageSizeChange}
                 >
                     <SelectTrigger className="h-8 w-[70px]">
                         <SelectValue
                             placeholder={table.getState().pagination.pageSize}
                         />
                     </SelectTrigger>
-                    <SelectContent side="top">
+                    <SelectContent side="bottom">
                         {[10, 20, 30, 40, 50, 100].map((pageSize) => (
                             <SelectItem key={pageSize} value={`${pageSize}`}>
                                 {pageSize}
diff --git a/src/components/ui/data-table.tsx b/src/components/ui/data-table.tsx
index fde1f12b..ae94b12e 100644
--- a/src/components/ui/data-table.tsx
+++ b/src/components/ui/data-table.tsx
@@ -20,7 +20,7 @@ import {
     TableRow
 } from "@/components/ui/table";
 import { Button } from "@app/components/ui/button";
-import { useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { Input } from "@app/components/ui/input";
 import { DataTablePagination } from "@app/components/DataTablePagination";
 import { Plus, Search, RefreshCw } from "lucide-react";
@@ -32,7 +32,42 @@ import {
 } from "@app/components/ui/card";
 import { Tabs, TabsList, TabsTrigger } from "@app/components/ui/tabs";
 import { useTranslations } from "next-intl";
-import { useMemo } from "react";
+
+const STORAGE_KEYS = {
+    PAGE_SIZE: 'datatable-page-size',
+    getTablePageSize: (tableId?: string) => 
+        tableId ? `${tableId}-size` : STORAGE_KEYS.PAGE_SIZE
+};
+
+const getStoredPageSize = (tableId?: string, defaultSize = 20): number => {
+    if (typeof window === 'undefined') return defaultSize;
+    
+    try {
+        const key = STORAGE_KEYS.getTablePageSize(tableId);
+        const stored = localStorage.getItem(key);
+        if (stored) {
+            const parsed = parseInt(stored, 10);
+            // Validate that it's a reasonable page size
+            if (parsed > 0 && parsed <= 1000) {
+                return parsed;
+            }
+        }
+    } catch (error) {
+        console.warn('Failed to read page size from localStorage:', error);
+    }
+    return defaultSize;
+};
+
+const setStoredPageSize = (pageSize: number, tableId?: string): void => {
+    if (typeof window === 'undefined') return;
+    
+    try {
+        const key = STORAGE_KEYS.getTablePageSize(tableId);
+        localStorage.setItem(key, pageSize.toString());
+    } catch (error) {
+        console.warn('Failed to save page size to localStorage:', error);
+    }
+};
 
 type TabFilter = {
     id: string;
@@ -56,6 +91,8 @@ type DataTableProps<TData, TValue> = {
     };
     tabs?: TabFilter[];
     defaultTab?: string;
+    persistPageSize?: boolean | string;
+    defaultPageSize?: number;
 };
 
 export function DataTable<TData, TValue>({
@@ -70,8 +107,23 @@ export function DataTable<TData, TValue>({
     searchColumn = "name",
     defaultSort,
     tabs,
-    defaultTab
+    defaultTab,
+    persistPageSize = false,
+    defaultPageSize = 20
 }: DataTableProps<TData, TValue>) {
+    const t = useTranslations();
+    
+    // Determine table identifier for storage
+    const tableId = typeof persistPageSize === 'string' ? persistPageSize : undefined;
+    
+    // Initialize page size from storage or default
+    const [pageSize, setPageSize] = useState<number>(() => {
+        if (persistPageSize) {
+            return getStoredPageSize(tableId, defaultPageSize);
+        }
+        return defaultPageSize;
+    });
+    
     const [sorting, setSorting] = useState<SortingState>(
         defaultSort ? [defaultSort] : []
     );
@@ -80,7 +132,6 @@ export function DataTable<TData, TValue>({
     const [activeTab, setActiveTab] = useState<string>(
         defaultTab || tabs?.[0]?.id || ""
     );
-    const t = useTranslations();
 
     // Apply tab filter to data
     const filteredData = useMemo(() => {
@@ -108,7 +159,7 @@ export function DataTable<TData, TValue>({
         onGlobalFilterChange: setGlobalFilter,
         initialState: {
             pagination: {
-                pageSize: 20,
+                pageSize: pageSize,
                 pageIndex: 0
             }
         },
@@ -119,12 +170,35 @@ export function DataTable<TData, TValue>({
         }
     });
 
+    useEffect(() => {
+        const currentPageSize = table.getState().pagination.pageSize;
+        if (currentPageSize !== pageSize) {
+            table.setPageSize(pageSize);
+            
+            // Persist to localStorage if enabled
+            if (persistPageSize) {
+                setStoredPageSize(pageSize, tableId);
+            }
+        }
+    }, [pageSize, table, persistPageSize, tableId]);
+
     const handleTabChange = (value: string) => {
         setActiveTab(value);
         // Reset to first page when changing tabs
         table.setPageIndex(0);
     };
 
+    // Enhanced pagination component that updates our local state
+    const handlePageSizeChange = (newPageSize: number) => {
+        setPageSize(newPageSize);
+        table.setPageSize(newPageSize);
+        
+        // Persist immediately when changed
+        if (persistPageSize) {
+            setStoredPageSize(newPageSize, tableId);
+        }
+    };
+
     return (
         <div className="container mx-auto max-w-12xl">
             <Card>
@@ -235,7 +309,10 @@ export function DataTable<TData, TValue>({
                         </TableBody>
                     </Table>
                     <div className="mt-4">
-                        <DataTablePagination table={table} />
+                        <DataTablePagination 
+                            table={table} 
+                            onPageSizeChange={handlePageSizeChange}
+                        />
                     </div>
                 </CardContent>
             </Card>