🚧 WIP: separate proxy & client resources

messages/en-US.json

@@ -1151,6 +1151,8 @@
     "sidebarHome": "Home",
     "sidebarSites": "Sites",
     "sidebarResources": "Resources",
+    "sidebarProxyResources": "Proxy Resources",
+    "sidebarClientResources": "Client Resources",
     "sidebarAccessControl": "Access Control",
     "sidebarUsers": "Users",
     "sidebarInvitations": "Invitations",

src/app/[orgId]/settings/resources/client/page.tsx

@@ -0,0 +1,113 @@
+import ClientResourcesTable from "@app/components/ClientResourcesTable";
+import type { InternalResourceRow } from "@app/components/ProxyResourcesTable";
+import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
+import { internal } from "@app/lib/api";
+import { authCookieHeader } from "@app/lib/api/cookies";
+import { pullEnv } from "@app/lib/pullEnv";
+import OrgProvider from "@app/providers/OrgProvider";
+import type { GetOrgResponse } from "@server/routers/org";
+import type { ListResourcesResponse } from "@server/routers/resource";
+import type { ListAllSiteResourcesByOrgResponse } from "@server/routers/siteResource";
+import type { AxiosResponse } from "axios";
+import { getTranslations } from "next-intl/server";
+import { redirect } from "next/navigation";
+import { cache } from "react";
+
+export interface ClientResourcesPageProps {
+    params: Promise<{ orgId: string }>;
+    searchParams: Promise<{ view?: string }>;
+}
+
+export default async function ClientResourcesPage(
+    props: ClientResourcesPageProps
+) {
+    const params = await props.params;
+    const searchParams = await props.searchParams;
+    const t = await getTranslations();
+
+    const env = pullEnv();
+
+    // Default to 'proxy' view, or use the query param if provided
+    let defaultView: "proxy" | "internal" = "proxy";
+    if (env.flags.enableClients) {
+        defaultView = searchParams.view === "internal" ? "internal" : "proxy";
+    }
+
+    let resources: ListResourcesResponse["resources"] = [];
+    try {
+        const res = await internal.get<AxiosResponse<ListResourcesResponse>>(
+            `/org/${params.orgId}/resources`,
+            await authCookieHeader()
+        );
+        resources = res.data.data.resources;
+    } catch (e) {}
+
+    let siteResources: ListAllSiteResourcesByOrgResponse["siteResources"] = [];
+    try {
+        const res = await internal.get<
+            AxiosResponse<ListAllSiteResourcesByOrgResponse>
+        >(`/org/${params.orgId}/site-resources`, await authCookieHeader());
+        siteResources = res.data.data.siteResources;
+    } catch (e) {}
+
+    let org = null;
+    try {
+        const getOrg = cache(async () =>
+            internal.get<AxiosResponse<GetOrgResponse>>(
+                `/org/${params.orgId}`,
+                await authCookieHeader()
+            )
+        );
+        const res = await getOrg();
+        org = res.data.data;
+    } catch {
+        redirect(`/${params.orgId}/settings/resources`);
+    }
+
+    if (!org) {
+        redirect(`/${params.orgId}/settings/resources`);
+    }
+
+    const internalResourceRows: InternalResourceRow[] = siteResources.map(
+        (siteResource) => {
+            return {
+                id: siteResource.siteResourceId,
+                name: siteResource.name,
+                orgId: params.orgId,
+                siteName: siteResource.siteName,
+                siteAddress: siteResource.siteAddress || null,
+                mode: siteResource.mode || ("port" as any),
+                // protocol: siteResource.protocol,
+                // proxyPort: siteResource.proxyPort,
+                siteId: siteResource.siteId,
+                destination: siteResource.destination,
+                // destinationPort: siteResource.destinationPort,
+                alias: siteResource.alias || null,
+                siteNiceId: siteResource.siteNiceId
+            };
+        }
+    );
+    return (
+        <>
+            <SettingsSectionTitle
+                title={t("resourceTitle")}
+                description={t("resourceDescription")}
+            />
+
+            <OrgProvider org={org}>
+                <ClientResourcesTable
+                    resources={[]}
+                    internalResources={internalResourceRows}
+                    orgId={params.orgId}
+                    defaultView={
+                        env.flags.enableClients ? defaultView : "proxy"
+                    }
+                    defaultSort={{
+                        id: "name",
+                        desc: false
+                    }}
+                />
+            </OrgProvider>
+        </>
+    );
+}

src/app/[orgId]/settings/resources/page.tsx

@@ -1,149 +1,10 @@
-import { internal } from "@app/lib/api";
-import { authCookieHeader } from "@app/lib/api/cookies";
-import ResourcesTable, {
-    ResourceRow,
-    InternalResourceRow
-} from "../../../../components/ResourcesTable";
-import { AxiosResponse } from "axios";
-import { ListResourcesResponse } from "@server/routers/resource";
-import { ListAllSiteResourcesByOrgResponse } from "@server/routers/siteResource";
-import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
 import { redirect } from "next/navigation";
-import { cache } from "react";
-import { GetOrgResponse } from "@server/routers/org";
-import OrgProvider from "@app/providers/OrgProvider";
-import { getTranslations } from "next-intl/server";
-import { pullEnv } from "@app/lib/pullEnv";
-import { toUnicode } from "punycode";
 
-type ResourcesPageProps = {
+export interface ResourcesPageProps {
     params: Promise<{ orgId: string }>;
-    searchParams: Promise<{ view?: string }>;
+}
-};
-
-export const dynamic = "force-dynamic";
 
 export default async function ResourcesPage(props: ResourcesPageProps) {
     const params = await props.params;
-    const searchParams = await props.searchParams;
+    redirect(`/${params.orgId}/settings/resources/proxy`);
-    const t = await getTranslations();
-
-    const env = pullEnv();
-
-    // Default to 'proxy' view, or use the query param if provided
-    let defaultView: "proxy" | "internal" = "proxy";
-    if (env.flags.enableClients) {
-        defaultView = searchParams.view === "internal" ? "internal" : "proxy";
-    }
-
-    let resources: ListResourcesResponse["resources"] = [];
-    try {
-        const res = await internal.get<AxiosResponse<ListResourcesResponse>>(
-            `/org/${params.orgId}/resources`,
-            await authCookieHeader()
-        );
-        resources = res.data.data.resources;
-    } catch (e) {}
-
-    let siteResources: ListAllSiteResourcesByOrgResponse["siteResources"] = [];
-    try {
-        const res = await internal.get<
-            AxiosResponse<ListAllSiteResourcesByOrgResponse>
-        >(`/org/${params.orgId}/site-resources`, await authCookieHeader());
-        siteResources = res.data.data.siteResources;
-    } catch (e) {}
-
-    let org = null;
-    try {
-        const getOrg = cache(async () =>
-            internal.get<AxiosResponse<GetOrgResponse>>(
-                `/org/${params.orgId}`,
-                await authCookieHeader()
-            )
-        );
-        const res = await getOrg();
-        org = res.data.data;
-    } catch {
-        redirect(`/${params.orgId}/settings/resources`);
-    }
-
-    if (!org) {
-        redirect(`/${params.orgId}/settings/resources`);
-    }
-
-    const resourceRows: ResourceRow[] = resources.map((resource) => {
-        return {
-            id: resource.resourceId,
-            name: resource.name,
-            orgId: params.orgId,
-            nice: resource.niceId,
-            domain: `${resource.ssl ? "https://" : "http://"}${toUnicode(resource.fullDomain || "")}`,
-            protocol: resource.protocol,
-            proxyPort: resource.proxyPort,
-            http: resource.http,
-            authState: !resource.http
-                ? "none"
-                : resource.sso ||
-                    resource.pincodeId !== null ||
-                    resource.passwordId !== null ||
-                    resource.whitelist ||
-                    resource.headerAuthId
-                  ? "protected"
-                  : "not_protected",
-            enabled: resource.enabled,
-            domainId: resource.domainId || undefined,
-            ssl: resource.ssl,
-            targets: resource.targets?.map((target) => ({
-                targetId: target.targetId,
-                ip: target.ip,
-                port: target.port,
-                enabled: target.enabled,
-                healthStatus: target.healthStatus
-            }))
-        };
-    });
-
-    const internalResourceRows: InternalResourceRow[] = siteResources.map(
-        (siteResource) => {
-            return {
-                id: siteResource.siteResourceId,
-                name: siteResource.name,
-                orgId: params.orgId,
-                siteName: siteResource.siteName,
-                siteAddress: siteResource.siteAddress || null,
-                mode: siteResource.mode || ("port" as any),
-                // protocol: siteResource.protocol,
-                // proxyPort: siteResource.proxyPort,
-                siteId: siteResource.siteId,
-                destination: siteResource.destination,
-                // destinationPort: siteResource.destinationPort,
-                alias: siteResource.alias || null,
-                siteNiceId: siteResource.siteNiceId
-            };
-        }
-    );
-
-    return (
-        <>
-            <SettingsSectionTitle
-                title={t("resourceTitle")}
-                description={t("resourceDescription")}
-            />
-
-            <OrgProvider org={org}>
-                <ResourcesTable
-                    resources={resourceRows}
-                    internalResources={internalResourceRows}
-                    orgId={params.orgId}
-                    defaultView={
-                        env.flags.enableClients ? defaultView : "proxy"
-                    }
-                    defaultSort={{
-                        id: "name",
-                        desc: false
-                    }}
-                />
-            </OrgProvider>
-        </>
-    );
 }

src/app/[orgId]/settings/resources/proxy/page.tsx

@@ -0,0 +1,122 @@
+import type { ResourceRow } from "@app/components/ProxyResourcesTable";
+import ProxyResourcesTable from "@app/components/ProxyResourcesTable";
+import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
+import { internal } from "@app/lib/api";
+import { authCookieHeader } from "@app/lib/api/cookies";
+import { pullEnv } from "@app/lib/pullEnv";
+import OrgProvider from "@app/providers/OrgProvider";
+import type { GetOrgResponse } from "@server/routers/org";
+import type { ListResourcesResponse } from "@server/routers/resource";
+import type { ListAllSiteResourcesByOrgResponse } from "@server/routers/siteResource";
+import type { AxiosResponse } from "axios";
+import { getTranslations } from "next-intl/server";
+import { redirect } from "next/navigation";
+import { toUnicode } from "punycode";
+import { cache } from "react";
+
+export interface ProxyResourcesPageProps {
+    params: Promise<{ orgId: string }>;
+    searchParams: Promise<{ view?: string }>;
+}
+
+export default async function ProxyResourcesPage(
+    props: ProxyResourcesPageProps
+) {
+    const params = await props.params;
+    const searchParams = await props.searchParams;
+    const t = await getTranslations();
+
+    const env = pullEnv();
+
+    // Default to 'proxy' view, or use the query param if provided
+    let defaultView: "proxy" | "internal" = "proxy";
+    if (env.flags.enableClients) {
+        defaultView = searchParams.view === "internal" ? "internal" : "proxy";
+    }
+
+    let resources: ListResourcesResponse["resources"] = [];
+    try {
+        const res = await internal.get<AxiosResponse<ListResourcesResponse>>(
+            `/org/${params.orgId}/resources`,
+            await authCookieHeader()
+        );
+        resources = res.data.data.resources;
+    } catch (e) {}
+
+    let siteResources: ListAllSiteResourcesByOrgResponse["siteResources"] = [];
+    try {
+        const res = await internal.get<
+            AxiosResponse<ListAllSiteResourcesByOrgResponse>
+        >(`/org/${params.orgId}/site-resources`, await authCookieHeader());
+        siteResources = res.data.data.siteResources;
+    } catch (e) {}
+
+    let org = null;
+    try {
+        const getOrg = cache(async () =>
+            internal.get<AxiosResponse<GetOrgResponse>>(
+                `/org/${params.orgId}`,
+                await authCookieHeader()
+            )
+        );
+        const res = await getOrg();
+        org = res.data.data;
+    } catch {
+        redirect(`/${params.orgId}/settings/resources`);
+    }
+
+    if (!org) {
+        redirect(`/${params.orgId}/settings/resources`);
+    }
+
+    const resourceRows: ResourceRow[] = resources.map((resource) => {
+        return {
+            id: resource.resourceId,
+            name: resource.name,
+            orgId: params.orgId,
+            nice: resource.niceId,
+            domain: `${resource.ssl ? "https://" : "http://"}${toUnicode(resource.fullDomain || "")}`,
+            protocol: resource.protocol,
+            proxyPort: resource.proxyPort,
+            http: resource.http,
+            authState: !resource.http
+                ? "none"
+                : resource.sso ||
+                    resource.pincodeId !== null ||
+                    resource.passwordId !== null ||
+                    resource.whitelist ||
+                    resource.headerAuthId
+                  ? "protected"
+                  : "not_protected",
+            enabled: resource.enabled,
+            domainId: resource.domainId || undefined,
+            ssl: resource.ssl,
+            targets: resource.targets?.map((target) => ({
+                targetId: target.targetId,
+                ip: target.ip,
+                port: target.port,
+                enabled: target.enabled,
+                healthStatus: target.healthStatus
+            }))
+        };
+    });
+    return (
+        <>
+            <SettingsSectionTitle
+                title={t("resourceTitle")}
+                description={t("resourceDescription")}
+            />
+
+            <OrgProvider org={org}>
+                <ProxyResourcesTable
+                    resources={resourceRows}
+                    orgId={params.orgId}
+                    defaultSort={{
+                        id: "name",
+                        desc: false
+                    }}
+                />
+            </OrgProvider>
+        </>
+    );
+}

src/app/navigation.tsx

@@ -17,7 +17,8 @@ import {
     CreditCard,
     Logs,
     SquareMousePointer,
-    ScanEye
+    ScanEye,
+    GlobeLock
 } from "lucide-react";
 
 export type SidebarNavSection = {
@@ -31,7 +32,7 @@ export const orgLangingNavItems: SidebarNavItem[] = [
     {
         title: "sidebarAccount",
         href: "/{orgId}",
-        icon: <User className="h-4 w-4" />
+        icon: <User className="size-4 flex-none" />
     }
 ];
 
@@ -44,19 +45,36 @@ export const orgNavSections = (
             {
                 title: "sidebarSites",
                 href: "/{orgId}/settings/sites",
-                icon: <Combine className="h-4 w-4" />
+                icon: <Combine className="size-4 flex-none" />
             },
             {
                 title: "sidebarResources",
-                href: "/{orgId}/settings/resources",
+                icon: <Waypoints className="size-4 flex-none" />,
-                icon: <Waypoints className="h-4 w-4" />
+                items: [
+                    {
+                        title: "sidebarProxyResources",
+                        href: "/{orgId}/settings/resources/proxy",
+                        icon: <Globe className="size-4 flex-none" />
+                    },
+                    ...(enableClients
+                        ? [
+                              {
+                                  title: "sidebarClientResources",
+                                  href: "/{orgId}/settings/resources/client",
+                                  icon: (
+                                      <GlobeLock className="size-4 flex-none" />
+                                  )
+                              }
+                          ]
+                        : [])
+                ]
             },
             ...(enableClients
                 ? [
                       {
                           title: "sidebarClients",
                           href: "/{orgId}/settings/clients",
-                          icon: <MonitorUp className="h-4 w-4" />,
+                          icon: <MonitorUp className="size-4 flex-none" />,
                           isBeta: true
                       }
                   ]
@@ -66,7 +84,7 @@ export const orgNavSections = (
                       {
                           title: "sidebarRemoteExitNodes",
                           href: "/{orgId}/settings/remote-exit-nodes",
-                          icon: <Server className="h-4 w-4" />,
+                          icon: <Server className="size-4 flex-none" />,
                           showEE: true
                       }
                   ]
@@ -74,12 +92,12 @@ export const orgNavSections = (
             {
                 title: "sidebarDomains",
                 href: "/{orgId}/settings/domains",
-                icon: <Globe className="h-4 w-4" />
+                icon: <Globe className="size-4 flex-none" />
             },
             {
                 title: "sidebarBluePrints",
                 href: "/{orgId}/settings/blueprints",
-                icon: <ReceiptText className="h-4 w-4" />
+                icon: <ReceiptText className="size-4 flex-none" />
             }
         ]
     },
@@ -88,31 +106,31 @@ export const orgNavSections = (
         items: [
             {
                 title: "sidebarUsers",
-                icon: <User className="h-4 w-4" />,
+                icon: <User className="size-4 flex-none" />,
                 items: [
                     {
                         title: "sidebarUsers",
                         href: "/{orgId}/settings/access/users",
-                        icon: <User className="h-4 w-4" />
+                        icon: <User className="size-4 flex-none" />
                     },
                     {
                         title: "sidebarInvitations",
                         href: "/{orgId}/settings/access/invitations",
-                        icon: <TicketCheck className="h-4 w-4" />
+                        icon: <TicketCheck className="size-4 flex-none" />
                     }
                 ]
             },
             {
                 title: "sidebarRoles",
                 href: "/{orgId}/settings/access/roles",
-                icon: <Users className="h-4 w-4" />
+                icon: <Users className="size-4 flex-none" />
             },
             ...(build == "saas"
                 ? [
                       {
                           title: "sidebarIdentityProviders",
                           href: "/{orgId}/settings/idp",
-                          icon: <Fingerprint className="h-4 w-4" />,
+                          icon: <Fingerprint className="size-4 flex-none" />,
                           showEE: true
                       }
                   ]
@@ -120,7 +138,7 @@ export const orgNavSections = (
             {
                 title: "sidebarShareableLinks",
                 href: "/{orgId}/settings/share-links",
-                icon: <LinkIcon className="h-4 w-4" />
+                icon: <LinkIcon className="size-4 flex-none" />
             }
         ]
     },
@@ -131,19 +149,19 @@ export const orgNavSections = (
                 {
                     title: "sidebarLogsRequest",
                     href: "/{orgId}/settings/logs/request",
-                    icon: <SquareMousePointer className="h-4 w-4" />
+                    icon: <SquareMousePointer className="size-4 flex-none" />
                 },
                 ...(build != "oss"
                     ? [
                           {
                               title: "sidebarLogsAccess",
                               href: "/{orgId}/settings/logs/access",
-                              icon: <ScanEye className="h-4 w-4" />
+                              icon: <ScanEye className="size-4 flex-none" />
                           },
                           {
                               title: "sidebarLogsAction",
                               href: "/{orgId}/settings/logs/action",
-                              icon: <Logs className="h-4 w-4" />
+                              icon: <Logs className="size-4 flex-none" />
                           }
                       ]
                     : [])
@@ -158,7 +176,7 @@ export const orgNavSections = (
             return [
                 {
                     title: "sidebarLogs",
-                    icon: <Logs className="h-4 w-4" />,
+                    icon: <Logs className="size-4 flex-none" />,
                     items: logItems
                 }
             ];
@@ -170,14 +188,14 @@ export const orgNavSections = (
             {
                 title: "sidebarApiKeys",
                 href: "/{orgId}/settings/api-keys",
-                icon: <KeyRound className="h-4 w-4" />
+                icon: <KeyRound className="size-4 flex-none" />
             },
             ...(build == "saas"
                 ? [
                       {
                           title: "sidebarBilling",
                           href: "/{orgId}/settings/billing",
-                          icon: <CreditCard className="h-4 w-4" />
+                          icon: <CreditCard className="size-4 flex-none" />
                       }
                   ]
                 : []),
@@ -186,14 +204,14 @@ export const orgNavSections = (
                       {
                           title: "sidebarEnterpriseLicenses",
                           href: "/{orgId}/settings/license",
-                          icon: <TicketCheck className="h-4 w-4" />
+                          icon: <TicketCheck className="size-4 flex-none" />
                       }
                   ]
                 : []),
             {
                 title: "sidebarSettings",
                 href: "/{orgId}/settings/general",
-                icon: <Settings className="h-4 w-4" />
+                icon: <Settings className="size-4 flex-none" />
             }
         ]
     }
@@ -206,24 +224,24 @@ export const adminNavSections: SidebarNavSection[] = [
             {
                 title: "sidebarAllUsers",
                 href: "/admin/users",
-                icon: <Users className="h-4 w-4" />
+                icon: <Users className="size-4 flex-none" />
             },
             {
                 title: "sidebarApiKeys",
                 href: "/admin/api-keys",
-                icon: <KeyRound className="h-4 w-4" />
+                icon: <KeyRound className="size-4 flex-none" />
             },
             {
                 title: "sidebarIdentityProviders",
                 href: "/admin/idp",
-                icon: <Fingerprint className="h-4 w-4" />
+                icon: <Fingerprint className="size-4 flex-none" />
             },
             ...(build == "enterprise"
                 ? [
                       {
                           title: "sidebarLicense",
                           href: "/admin/license",
-                          icon: <TicketCheck className="h-4 w-4" />
+                          icon: <TicketCheck className="size-4 flex-none" />
                       }
                   ]
                 : [])

src/components/ClientResourcesTable.tsx

@@ -177,7 +177,7 @@ export type InternalResourceRow = {
 
 type Site = ListSitesResponse["sites"][0];
 
-type ResourcesTableProps = {
+type ClientResourcesTableProps = {
     resources: ResourceRow[];
     internalResources: InternalResourceRow[];
     orgId: string;
@@ -270,13 +270,13 @@ const setStoredColumnVisibility = (
     }
 };
 
-export default function ResourcesTable({
+export default function ClientResourcesTable({
     resources,
     internalResources,
     orgId,
     defaultView = "proxy",
     defaultSort
-}: ResourcesTableProps) {
+}: ClientResourcesTableProps) {
     const router = useRouter();
     const searchParams = useSearchParams();
     const t = useTranslations();

src/components/ProxyResourcesTable.tsx

@@ -0,0 +1,924 @@
+"use client";
+
+import {
+    flexRender,
+    getCoreRowModel,
+    useReactTable,
+    getPaginationRowModel,
+    SortingState,
+    getSortedRowModel,
+    ColumnFiltersState,
+    getFilteredRowModel,
+    VisibilityState
+} from "@tanstack/react-table";
+import { ExtendedColumnDef } from "@app/components/ui/data-table";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuCheckboxItem
+} from "@app/components/ui/dropdown-menu";
+import { Button } from "@app/components/ui/button";
+import {
+    ArrowRight,
+    ArrowUpDown,
+    MoreHorizontal,
+    ShieldOff,
+    ShieldCheck,
+    RefreshCw,
+    Columns,
+    Plus,
+    Search,
+    ChevronDown,
+    Clock,
+    CheckCircle2,
+    XCircle
+} from "lucide-react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useState, useEffect, useTransition } from "react";
+import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
+import { formatAxiosError } from "@app/lib/api";
+import { toast } from "@app/hooks/useToast";
+import { createApiClient } from "@app/lib/api";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import CopyToClipboard from "@app/components/CopyToClipboard";
+import { Switch } from "@app/components/ui/switch";
+import { AxiosResponse } from "axios";
+import { UpdateResourceResponse } from "@server/routers/resource";
+import { ListSitesResponse } from "@server/routers/site";
+import { useTranslations } from "next-intl";
+import { InfoPopup } from "@app/components/ui/info-popup";
+import { Input } from "@app/components/ui/input";
+import { DataTablePagination } from "@app/components/DataTablePagination";
+import { Card, CardContent, CardHeader } from "@app/components/ui/card";
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow
+} from "@app/components/ui/table";
+
+export type TargetHealth = {
+    targetId: number;
+    ip: string;
+    port: number;
+    enabled: boolean;
+    healthStatus?: "healthy" | "unhealthy" | "unknown";
+};
+
+export type ResourceRow = {
+    id: number;
+    nice: string | null;
+    name: string;
+    orgId: string;
+    domain: string;
+    authState: string;
+    http: boolean;
+    protocol: string;
+    proxyPort: number | null;
+    enabled: boolean;
+    domainId?: string;
+    ssl: boolean;
+    targetHost?: string;
+    targetPort?: number;
+    targets?: TargetHealth[];
+};
+
+function getOverallHealthStatus(
+    targets?: TargetHealth[]
+): "online" | "degraded" | "offline" | "unknown" {
+    if (!targets || targets.length === 0) {
+        return "unknown";
+    }
+
+    const monitoredTargets = targets.filter(
+        (t) => t.enabled && t.healthStatus && t.healthStatus !== "unknown"
+    );
+
+    if (monitoredTargets.length === 0) {
+        return "unknown";
+    }
+
+    const healthyCount = monitoredTargets.filter(
+        (t) => t.healthStatus === "healthy"
+    ).length;
+    const unhealthyCount = monitoredTargets.filter(
+        (t) => t.healthStatus === "unhealthy"
+    ).length;
+
+    if (healthyCount === monitoredTargets.length) {
+        return "online";
+    } else if (unhealthyCount === monitoredTargets.length) {
+        return "offline";
+    } else {
+        return "degraded";
+    }
+}
+
+function StatusIcon({
+    status,
+    className = ""
+}: {
+    status: "online" | "degraded" | "offline" | "unknown";
+    className?: string;
+}) {
+    const iconClass = `h-4 w-4 ${className}`;
+
+    switch (status) {
+        case "online":
+            return <CheckCircle2 className={`${iconClass} text-green-500`} />;
+        case "degraded":
+            return <CheckCircle2 className={`${iconClass} text-yellow-500`} />;
+        case "offline":
+            return <XCircle className={`${iconClass} text-destructive`} />;
+        case "unknown":
+            return <Clock className={`${iconClass} text-muted-foreground`} />;
+        default:
+            return null;
+    }
+}
+
+type ProxyResourcesTableProps = {
+    resources: ResourceRow[];
+    orgId: string;
+    defaultSort?: {
+        id: string;
+        desc: boolean;
+    };
+};
+
+const STORAGE_KEYS = {
+    PAGE_SIZE: "datatable-page-size",
+    COLUMN_VISIBILITY: "datatable-column-visibility",
+    getTablePageSize: (tableId?: string) =>
+        tableId ? `datatable-${tableId}-page-size` : STORAGE_KEYS.PAGE_SIZE,
+    getTableColumnVisibility: (tableId?: string) =>
+        tableId
+            ? `datatable-${tableId}-column-visibility`
+            : STORAGE_KEYS.COLUMN_VISIBILITY
+};
+
+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);
+    }
+};
+
+const getStoredColumnVisibility = (
+    tableId?: string,
+    defaultVisibility?: Record<string, boolean>
+): Record<string, boolean> => {
+    if (typeof window === "undefined") return defaultVisibility || {};
+
+    try {
+        const key = STORAGE_KEYS.getTableColumnVisibility(tableId);
+        const stored = localStorage.getItem(key);
+        if (stored) {
+            const parsed = JSON.parse(stored);
+            // Validate that it's an object
+            if (typeof parsed === "object" && parsed !== null) {
+                return parsed;
+            }
+        }
+    } catch (error) {
+        console.warn(
+            "Failed to read column visibility from localStorage:",
+            error
+        );
+    }
+    return defaultVisibility || {};
+};
+
+const setStoredColumnVisibility = (
+    visibility: Record<string, boolean>,
+    tableId?: string
+): void => {
+    if (typeof window === "undefined") return;
+
+    try {
+        const key = STORAGE_KEYS.getTableColumnVisibility(tableId);
+        localStorage.setItem(key, JSON.stringify(visibility));
+    } catch (error) {
+        console.warn(
+            "Failed to save column visibility to localStorage:",
+            error
+        );
+    }
+};
+
+export default function ProxyResourcesTable({
+    resources,
+    orgId,
+    defaultSort
+}: ProxyResourcesTableProps) {
+    const router = useRouter();
+    const t = useTranslations();
+
+    const { env } = useEnvContext();
+
+    const api = createApiClient({ env });
+
+    const [proxyPageSize, setProxyPageSize] = useState<number>(() =>
+        getStoredPageSize("proxy-resources", 20)
+    );
+
+    const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+    const [selectedResource, setSelectedResource] =
+        useState<ResourceRow | null>();
+
+    const [proxySorting, setProxySorting] = useState<SortingState>(
+        defaultSort ? [defaultSort] : []
+    );
+
+    const [proxyColumnFilters, setProxyColumnFilters] =
+        useState<ColumnFiltersState>([]);
+    const [proxyGlobalFilter, setProxyGlobalFilter] = useState<any>([]);
+
+    const [isRefreshing, startTransition] = useTransition();
+    const [proxyColumnVisibility, setProxyColumnVisibility] =
+        useState<VisibilityState>(() =>
+            getStoredColumnVisibility("proxy-resources", {})
+        );
+
+    const refreshData = () => {
+        try {
+            router.refresh();
+        } catch (error) {
+            toast({
+                title: t("error"),
+                description: t("refreshError"),
+                variant: "destructive"
+            });
+        }
+    };
+
+    const deleteResource = (resourceId: number) => {
+        api.delete(`/resource/${resourceId}`)
+            .catch((e) => {
+                console.error(t("resourceErrorDelte"), e);
+                toast({
+                    variant: "destructive",
+                    title: t("resourceErrorDelte"),
+                    description: formatAxiosError(e, t("resourceErrorDelte"))
+                });
+            })
+            .then(() => {
+                router.refresh();
+                setIsDeleteModalOpen(false);
+            });
+    };
+
+    async function toggleResourceEnabled(val: boolean, resourceId: number) {
+        await api
+            .post<AxiosResponse<UpdateResourceResponse>>(
+                `resource/${resourceId}`,
+                {
+                    enabled: val
+                }
+            )
+            .catch((e) => {
+                toast({
+                    variant: "destructive",
+                    title: t("resourcesErrorUpdate"),
+                    description: formatAxiosError(
+                        e,
+                        t("resourcesErrorUpdateDescription")
+                    )
+                });
+            });
+    }
+
+    function TargetStatusCell({ targets }: { targets?: TargetHealth[] }) {
+        const overallStatus = getOverallHealthStatus(targets);
+
+        if (!targets || targets.length === 0) {
+            return (
+                <div className="flex items-center gap-2">
+                    <StatusIcon status="unknown" />
+                    <span className="text-sm">
+                        {t("resourcesTableNoTargets")}
+                    </span>
+                </div>
+            );
+        }
+
+        const monitoredTargets = targets.filter(
+            (t) => t.enabled && t.healthStatus && t.healthStatus !== "unknown"
+        );
+        const unknownTargets = targets.filter(
+            (t) => !t.enabled || !t.healthStatus || t.healthStatus === "unknown"
+        );
+
+        return (
+            <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                    <Button
+                        variant="ghost"
+                        size="sm"
+                        className="flex items-center gap-2 h-8 px-0 font-normal"
+                    >
+                        <StatusIcon status={overallStatus} />
+                        <span className="text-sm">
+                            {overallStatus === "online" &&
+                                t("resourcesTableHealthy")}
+                            {overallStatus === "degraded" &&
+                                t("resourcesTableDegraded")}
+                            {overallStatus === "offline" &&
+                                t("resourcesTableOffline")}
+                            {overallStatus === "unknown" &&
+                                t("resourcesTableUnknown")}
+                        </span>
+                        <ChevronDown className="h-3 w-3" />
+                    </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="start" className="min-w-[280px]">
+                    {monitoredTargets.length > 0 && (
+                        <>
+                            {monitoredTargets.map((target) => (
+                                <DropdownMenuItem
+                                    key={target.targetId}
+                                    className="flex items-center justify-between gap-4"
+                                >
+                                    <div className="flex items-center gap-2">
+                                        <StatusIcon
+                                            status={
+                                                target.healthStatus ===
+                                                "healthy"
+                                                    ? "online"
+                                                    : "offline"
+                                            }
+                                            className="h-3 w-3"
+                                        />
+                                        {`${target.ip}:${target.port}`}
+                                    </div>
+                                    <span
+                                        className={`capitalize ${
+                                            target.healthStatus === "healthy"
+                                                ? "text-green-500"
+                                                : "text-destructive"
+                                        }`}
+                                    >
+                                        {target.healthStatus}
+                                    </span>
+                                </DropdownMenuItem>
+                            ))}
+                        </>
+                    )}
+                    {unknownTargets.length > 0 && (
+                        <>
+                            {unknownTargets.map((target) => (
+                                <DropdownMenuItem
+                                    key={target.targetId}
+                                    className="flex items-center justify-between gap-4"
+                                >
+                                    <div className="flex items-center gap-2">
+                                        <StatusIcon
+                                            status="unknown"
+                                            className="h-3 w-3"
+                                        />
+                                        {`${target.ip}:${target.port}`}
+                                    </div>
+                                    <span className="text-muted-foreground">
+                                        {!target.enabled
+                                            ? t("disabled")
+                                            : t("resourcesTableNotMonitored")}
+                                    </span>
+                                </DropdownMenuItem>
+                            ))}
+                        </>
+                    )}
+                </DropdownMenuContent>
+            </DropdownMenu>
+        );
+    }
+
+    const proxyColumns: ExtendedColumnDef<ResourceRow>[] = [
+        {
+            accessorKey: "name",
+            enableHiding: false,
+            friendlyName: t("name"),
+            header: ({ column }) => {
+                return (
+                    <Button
+                        variant="ghost"
+                        onClick={() =>
+                            column.toggleSorting(column.getIsSorted() === "asc")
+                        }
+                    >
+                        {t("name")}
+                        <ArrowUpDown className="ml-2 h-4 w-4" />
+                    </Button>
+                );
+            }
+        },
+        {
+            accessorKey: "nice",
+            friendlyName: t("resource"),
+            enableHiding: true,
+            header: ({ column }) => {
+                return (
+                    <Button
+                        variant="ghost"
+                        onClick={() =>
+                            column.toggleSorting(column.getIsSorted() === "asc")
+                        }
+                    >
+                        {t("resource")}
+                        <ArrowUpDown className="ml-2 h-4 w-4" />
+                    </Button>
+                );
+            }
+        },
+        {
+            accessorKey: "protocol",
+            friendlyName: t("protocol"),
+            header: () => <span className="p-3">{t("protocol")}</span>,
+            cell: ({ row }) => {
+                const resourceRow = row.original;
+                return (
+                    <span>
+                        {resourceRow.http
+                            ? resourceRow.ssl
+                                ? "HTTPS"
+                                : "HTTP"
+                            : resourceRow.protocol.toUpperCase()}
+                    </span>
+                );
+            }
+        },
+        {
+            id: "status",
+            accessorKey: "status",
+            friendlyName: t("status"),
+            header: ({ column }) => {
+                return (
+                    <Button
+                        variant="ghost"
+                        onClick={() =>
+                            column.toggleSorting(column.getIsSorted() === "asc")
+                        }
+                    >
+                        {t("status")}
+                        <ArrowUpDown className="ml-2 h-4 w-4" />
+                    </Button>
+                );
+            },
+            cell: ({ row }) => {
+                const resourceRow = row.original;
+                return <TargetStatusCell targets={resourceRow.targets} />;
+            },
+            sortingFn: (rowA, rowB) => {
+                const statusA = getOverallHealthStatus(rowA.original.targets);
+                const statusB = getOverallHealthStatus(rowB.original.targets);
+                const statusOrder = {
+                    online: 3,
+                    degraded: 2,
+                    offline: 1,
+                    unknown: 0
+                };
+                return statusOrder[statusA] - statusOrder[statusB];
+            }
+        },
+        {
+            accessorKey: "domain",
+            friendlyName: t("access"),
+            header: () => <span className="p-3">{t("access")}</span>,
+            cell: ({ row }) => {
+                const resourceRow = row.original;
+                return (
+                    <div className="flex items-center space-x-2">
+                        {!resourceRow.http ? (
+                            <CopyToClipboard
+                                text={resourceRow.proxyPort?.toString() || ""}
+                                isLink={false}
+                            />
+                        ) : !resourceRow.domainId ? (
+                            <InfoPopup
+                                info={t("domainNotFoundDescription")}
+                                text={t("domainNotFound")}
+                            />
+                        ) : (
+                            <CopyToClipboard
+                                text={resourceRow.domain}
+                                isLink={true}
+                            />
+                        )}
+                    </div>
+                );
+            }
+        },
+        {
+            accessorKey: "authState",
+            friendlyName: t("authentication"),
+            header: ({ column }) => {
+                return (
+                    <Button
+                        variant="ghost"
+                        onClick={() =>
+                            column.toggleSorting(column.getIsSorted() === "asc")
+                        }
+                    >
+                        {t("authentication")}
+                        <ArrowUpDown className="ml-2 h-4 w-4" />
+                    </Button>
+                );
+            },
+            cell: ({ row }) => {
+                const resourceRow = row.original;
+                return (
+                    <div>
+                        {resourceRow.authState === "protected" ? (
+                            <span className="flex items-center space-x-2">
+                                <ShieldCheck className="w-4 h-4 text-green-500" />
+                                <span>{t("protected")}</span>
+                            </span>
+                        ) : resourceRow.authState === "not_protected" ? (
+                            <span className="flex items-center space-x-2">
+                                <ShieldOff className="w-4 h-4 text-yellow-500" />
+                                <span>{t("notProtected")}</span>
+                            </span>
+                        ) : (
+                            <span>-</span>
+                        )}
+                    </div>
+                );
+            }
+        },
+        {
+            accessorKey: "enabled",
+            friendlyName: t("enabled"),
+            header: () => <span className="p-3">{t("enabled")}</span>,
+            cell: ({ row }) => (
+                <Switch
+                    defaultChecked={
+                        row.original.http
+                            ? !!row.original.domainId && row.original.enabled
+                            : row.original.enabled
+                    }
+                    disabled={
+                        row.original.http ? !row.original.domainId : false
+                    }
+                    onCheckedChange={(val) =>
+                        toggleResourceEnabled(val, row.original.id)
+                    }
+                />
+            )
+        },
+        {
+            id: "actions",
+            enableHiding: false,
+            header: ({ table }) => {
+                const hasHideableColumns = table
+                    .getAllColumns()
+                    .some((column) => column.getCanHide());
+                if (!hasHideableColumns) {
+                    return <span className="p-3"></span>;
+                }
+                return (
+                    <div className="flex flex-col items-end gap-1 p-3">
+                        <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                                <Button
+                                    variant="ghost"
+                                    size="sm"
+                                    className="h-7 w-7 p-0"
+                                >
+                                    <Columns className="h-4 w-4" />
+                                    <span className="sr-only">
+                                        {t("columns") || "Columns"}
+                                    </span>
+                                </Button>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent align="end" className="w-48">
+                                <DropdownMenuLabel>
+                                    {t("toggleColumns") || "Toggle columns"}
+                                </DropdownMenuLabel>
+                                <DropdownMenuSeparator />
+                                {table
+                                    .getAllColumns()
+                                    .filter((column) => column.getCanHide())
+                                    .map((column) => {
+                                        const columnDef =
+                                            column.columnDef as any;
+                                        const friendlyName =
+                                            columnDef.friendlyName;
+                                        const displayName =
+                                            friendlyName ||
+                                            (typeof columnDef.header ===
+                                            "string"
+                                                ? columnDef.header
+                                                : column.id);
+                                        return (
+                                            <DropdownMenuCheckboxItem
+                                                key={column.id}
+                                                className="capitalize"
+                                                checked={column.getIsVisible()}
+                                                onCheckedChange={(value) =>
+                                                    column.toggleVisibility(
+                                                        !!value
+                                                    )
+                                                }
+                                                onSelect={(e) =>
+                                                    e.preventDefault()
+                                                }
+                                            >
+                                                {displayName}
+                                            </DropdownMenuCheckboxItem>
+                                        );
+                                    })}
+                            </DropdownMenuContent>
+                        </DropdownMenu>
+                    </div>
+                );
+            },
+            cell: ({ row }) => {
+                const resourceRow = row.original;
+                return (
+                    <div className="flex items-center gap-2 justify-end">
+                        <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                                <Button variant="ghost" className="h-8 w-8 p-0">
+                                    <span className="sr-only">
+                                        {t("openMenu")}
+                                    </span>
+                                    <MoreHorizontal className="h-4 w-4" />
+                                </Button>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent align="end">
+                                <Link
+                                    className="block w-full"
+                                    href={`/${resourceRow.orgId}/settings/resources/${resourceRow.nice}`}
+                                >
+                                    <DropdownMenuItem>
+                                        {t("viewSettings")}
+                                    </DropdownMenuItem>
+                                </Link>
+                                <DropdownMenuItem
+                                    onClick={() => {
+                                        setSelectedResource(resourceRow);
+                                        setIsDeleteModalOpen(true);
+                                    }}
+                                >
+                                    <span className="text-red-500">
+                                        {t("delete")}
+                                    </span>
+                                </DropdownMenuItem>
+                            </DropdownMenuContent>
+                        </DropdownMenu>
+                        <Link
+                            href={`/${resourceRow.orgId}/settings/resources/${resourceRow.nice}`}
+                        >
+                            <Button variant={"outline"}>
+                                {t("edit")}
+                                <ArrowRight className="ml-2 w-4 h-4" />
+                            </Button>
+                        </Link>
+                    </div>
+                );
+            }
+        }
+    ];
+
+    const proxyTable = useReactTable({
+        data: resources,
+        columns: proxyColumns,
+        getCoreRowModel: getCoreRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        onSortingChange: setProxySorting,
+        getSortedRowModel: getSortedRowModel(),
+        onColumnFiltersChange: setProxyColumnFilters,
+        getFilteredRowModel: getFilteredRowModel(),
+        onGlobalFilterChange: setProxyGlobalFilter,
+        onColumnVisibilityChange: setProxyColumnVisibility,
+        initialState: {
+            pagination: {
+                pageSize: proxyPageSize,
+                pageIndex: 0
+            },
+            columnVisibility: proxyColumnVisibility
+        },
+        state: {
+            sorting: proxySorting,
+            columnFilters: proxyColumnFilters,
+            globalFilter: proxyGlobalFilter,
+            columnVisibility: proxyColumnVisibility
+        }
+    });
+
+    const handleProxyPageSizeChange = (newPageSize: number) => {
+        setProxyPageSize(newPageSize);
+        setStoredPageSize(newPageSize, "proxy-resources");
+    };
+
+    // Persist column visibility changes to localStorage
+    useEffect(() => {
+        setStoredColumnVisibility(proxyColumnVisibility, "proxy-resources");
+    }, [proxyColumnVisibility]);
+
+    return (
+        <>
+            {selectedResource && (
+                <ConfirmDeleteDialog
+                    open={isDeleteModalOpen}
+                    setOpen={(val) => {
+                        setIsDeleteModalOpen(val);
+                        setSelectedResource(null);
+                    }}
+                    dialog={
+                        <div>
+                            <p>{t("resourceQuestionRemove")}</p>
+                            <p>{t("resourceMessageRemove")}</p>
+                        </div>
+                    }
+                    buttonText={t("resourceDeleteConfirm")}
+                    onConfirm={async () => deleteResource(selectedResource!.id)}
+                    string={selectedResource.name}
+                    title={t("resourceDelete")}
+                />
+            )}
+
+            <div className="container mx-auto max-w-12xl">
+                <Card>
+                    <CardHeader className="flex flex-col space-y-4 sm:flex-row sm:items-center sm:justify-between sm:space-y-0 pb-0">
+                        <div className="flex flex-row space-y-3 w-full sm:mr-2 gap-2">
+                            <div className="relative w-full sm:max-w-sm">
+                                <Input
+                                    placeholder={t("resourcesSearch")}
+                                    value={proxyGlobalFilter ?? ""}
+                                    onChange={(e) =>
+                                        proxyTable.setGlobalFilter(
+                                            String(e.target.value)
+                                        )
+                                    }
+                                    className="w-full pl-8"
+                                />
+                                <Search className="h-4 w-4 absolute left-2 top-1/2 transform -translate-y-1/2 text-muted-foreground" />
+                            </div>
+                        </div>
+                        <div className="flex items-center gap-2 sm:justify-end">
+                            <div>
+                                <Button
+                                    variant="outline"
+                                    onClick={() => startTransition(refreshData)}
+                                    disabled={isRefreshing}
+                                >
+                                    <RefreshCw
+                                        className={`mr-0 sm:mr-2 h-4 w-4 ${isRefreshing ? "animate-spin" : ""}`}
+                                    />
+                                    <span className="hidden sm:inline">
+                                        {t("refresh")}
+                                    </span>
+                                </Button>
+                            </div>
+                            <div>
+                                <Button
+                                    onClick={() =>
+                                        router.push(
+                                            `/${orgId}/settings/resources/create`
+                                        )
+                                    }
+                                >
+                                    <Plus className="mr-2 h-4 w-4" />
+                                    {t("resourceAdd")}
+                                </Button>
+                            </div>
+                        </div>
+                    </CardHeader>
+                    <CardContent>
+                        <div className="overflow-x-auto">
+                            <Table>
+                                <TableHeader>
+                                    {proxyTable
+                                        .getHeaderGroups()
+                                        .map((headerGroup) => (
+                                            <TableRow key={headerGroup.id}>
+                                                {headerGroup.headers
+                                                    .filter((header) =>
+                                                        header.column.getIsVisible()
+                                                    )
+                                                    .map((header) => (
+                                                        <TableHead
+                                                            key={header.id}
+                                                            className={`whitespace-nowrap ${
+                                                                header.column
+                                                                    .id ===
+                                                                "actions"
+                                                                    ? "sticky right-0 z-10 w-auto min-w-fit bg-card"
+                                                                    : header
+                                                                            .column
+                                                                            .id ===
+                                                                        "name"
+                                                                      ? "md:sticky md:left-0 z-10 bg-card"
+                                                                      : ""
+                                                            }`}
+                                                        >
+                                                            {header.isPlaceholder
+                                                                ? null
+                                                                : flexRender(
+                                                                      header
+                                                                          .column
+                                                                          .columnDef
+                                                                          .header,
+                                                                      header.getContext()
+                                                                  )}
+                                                        </TableHead>
+                                                    ))}
+                                            </TableRow>
+                                        ))}
+                                </TableHeader>
+                                <TableBody>
+                                    {proxyTable.getRowModel().rows?.length ? (
+                                        proxyTable
+                                            .getRowModel()
+                                            .rows.map((row) => (
+                                                <TableRow
+                                                    key={row.id}
+                                                    data-state={
+                                                        row.getIsSelected() &&
+                                                        "selected"
+                                                    }
+                                                >
+                                                    {row
+                                                        .getVisibleCells()
+                                                        .map((cell) => (
+                                                            <TableCell
+                                                                key={cell.id}
+                                                                className={`whitespace-nowrap ${
+                                                                    cell.column
+                                                                        .id ===
+                                                                    "actions"
+                                                                        ? "sticky right-0 z-10 w-auto min-w-fit bg-card"
+                                                                        : cell
+                                                                                .column
+                                                                                .id ===
+                                                                            "name"
+                                                                          ? "md:sticky md:left-0 z-10 bg-card"
+                                                                          : ""
+                                                                }`}
+                                                            >
+                                                                {flexRender(
+                                                                    cell.column
+                                                                        .columnDef
+                                                                        .cell,
+                                                                    cell.getContext()
+                                                                )}
+                                                            </TableCell>
+                                                        ))}
+                                                </TableRow>
+                                            ))
+                                    ) : (
+                                        <TableRow>
+                                            <TableCell
+                                                colSpan={proxyColumns.length}
+                                                className="h-24 text-center"
+                                            >
+                                                {t(
+                                                    "resourcesTableNoProxyResourcesFound"
+                                                )}
+                                            </TableCell>
+                                        </TableRow>
+                                    )}
+                                </TableBody>
+                            </Table>
+                        </div>
+                        <div className="mt-4">
+                            <DataTablePagination
+                                table={proxyTable}
+                                onPageSizeChange={handleProxyPageSizeChange}
+                            />
+                        </div>
+                    </CardContent>
+                </Card>
+            </div>
+        </>
+    );
+}