pangolin_mirror/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-02-23 05:16:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor to use DataTable component

Browse Source
This commit is contained in:
miloschwartz
2025-12-03 14:45:21 -05:00
parent 8b0491eb52
commit 11c1efc19c
7 changed files with 168 additions and 1222 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
messages/en-US.json
View File

@@ -1166,7 +1166,7 @@
"sidebarIdentityProviders": "Identity Providers", "sidebarIdentityProviders": "Identity Providers",
"sidebarLicense": "License", "sidebarLicense": "License",
"sidebarClients": "Clients", "sidebarClients": "Clients",
"sidebarUserDevices": "User devices", "sidebarUserDevices": "User Devices",
"sidebarMachineClients": "Machine Clients", "sidebarMachineClients": "Machine Clients",
"sidebarDomains": "Domains", "sidebarDomains": "Domains",
"sidebarBluePrints": "Blueprints", "sidebarBluePrints": "Blueprints",

5
src/app/navigation.tsx
View File

@@ -19,7 +19,8 @@ import {
SquareMousePointer, SquareMousePointer,
ScanEye, ScanEye,
GlobeLock, GlobeLock,
Smartphone Smartphone,
Laptop
} from "lucide-react"; } from "lucide-react";
export type SidebarNavSection = { export type SidebarNavSection = {
@@ -81,7 +82,7 @@ export const orgNavSections = (
href: "/{orgId}/settings/clients/user", href: "/{orgId}/settings/clients/user",
title: "sidebarUserDevices", title: "sidebarUserDevices",
icon: ( icon: (
<Smartphone className="size-4 flex-none" /> <Laptop className="size-4 flex-none" />
) )
}, },
{ {

332
src/components/ClientResourcesTable.tsx
View File

@@ -2,49 +2,22 @@
import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog"; import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
import CopyToClipboard from "@app/components/CopyToClipboard"; import CopyToClipboard from "@app/components/CopyToClipboard";
import { DataTablePagination } from "@app/components/DataTablePagination"; import { DataTable } from "@app/components/ui/data-table";
import { Button } from "@app/components/ui/button";
import { Card, CardContent, CardHeader } from "@app/components/ui/card";
import { ExtendedColumnDef } from "@app/components/ui/data-table"; import { ExtendedColumnDef } from "@app/components/ui/data-table";
import { Button } from "@app/components/ui/button";
import { import {
DropdownMenu, DropdownMenu,
DropdownMenuCheckboxItem,
DropdownMenuContent, DropdownMenuContent,
DropdownMenuItem, DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger DropdownMenuTrigger
} from "@app/components/ui/dropdown-menu"; } from "@app/components/ui/dropdown-menu";
import { Input } from "@app/components/ui/input";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow
} from "@app/components/ui/table";
import { useEnvContext } from "@app/hooks/useEnvContext"; import { useEnvContext } from "@app/hooks/useEnvContext";
import { toast } from "@app/hooks/useToast"; import { toast } from "@app/hooks/useToast";
import { createApiClient, formatAxiosError } from "@app/lib/api"; import { createApiClient, formatAxiosError } from "@app/lib/api";
import {
ColumnFiltersState,
flexRender,
getCoreRowModel,
getFilteredRowModel,
getPaginationRowModel,
getSortedRowModel,
SortingState,
useReactTable
} from "@tanstack/react-table";
import { import {
ArrowUpDown, ArrowUpDown,
ArrowUpRight, ArrowUpRight,
Columns, MoreHorizontal
MoreHorizontal,
Plus,
RefreshCw,
Search
} from "lucide-react"; } from "lucide-react";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import Link from "next/link"; import Link from "next/link";
@@ -53,9 +26,7 @@ import { useState, useTransition } from "react";
import CreateInternalResourceDialog from "@app/components/CreateInternalResourceDialog"; import CreateInternalResourceDialog from "@app/components/CreateInternalResourceDialog";
import EditInternalResourceDialog from "@app/components/EditInternalResourceDialog"; import EditInternalResourceDialog from "@app/components/EditInternalResourceDialog";
import { useStoredColumnVisibility } from "@app/hooks/useStoredColumnVisibility"; import { orgQueries } from "@app/lib/queries";
import { useStoredPageSize } from "@app/hooks/useStoredPageSize";
import { orgQueries, siteQueries } from "@app/lib/queries";
import { useQuery } from "@tanstack/react-query"; import { useQuery } from "@tanstack/react-query";
export type TargetHealth = { export type TargetHealth = {
@@ -122,10 +93,6 @@ export default function ClientResourcesTable({
const api = createApiClient({ env }); const api = createApiClient({ env });
const [internalPageSize, setInternalPageSize] = useStoredPageSize(
"internal-resources",
20
);
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false); const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
const [selectedInternalResource, setSelectedInternalResource] = const [selectedInternalResource, setSelectedInternalResource] =
@@ -135,29 +102,22 @@ export default function ClientResourcesTable({
useState<InternalResourceRow | null>(); useState<InternalResourceRow | null>();
const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false); const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
const { data: sites = [] } = useQuery(orgQueries.sites({ orgId, api })); const { data: sites = [] } = useQuery(orgQueries.sites({ orgId }));
const [internalSorting, setInternalSorting] = useState<SortingState>(
defaultSort ? [defaultSort] : []
);
const [internalColumnFilters, setInternalColumnFilters] =
useState<ColumnFiltersState>([]);
const [internalGlobalFilter, setInternalGlobalFilter] = useState<any>([]);
const [isRefreshing, startTransition] = useTransition(); const [isRefreshing, startTransition] = useTransition();
const [internalColumnVisibility, setInternalColumnVisibility] = const refreshData = () => {
useStoredColumnVisibility("internal-resources", {}); startTransition(() => {
const refreshData = async () => { try {
try { router.refresh();
router.refresh(); } catch (error) {
console.log("Data refreshed"); toast({
} catch (error) { title: t("error"),
toast({ description: t("refreshError"),
title: t("error"), variant: "destructive"
description: t("refreshError"), });
variant: "destructive" }
}); });
}
}; };
const deleteInternalResource = async ( const deleteInternalResource = async (
@@ -295,70 +255,7 @@ export default function ClientResourcesTable({
{ {
id: "actions", id: "actions",
enableHiding: false, enableHiding: false,
header: ({ table }) => { header: () => <span className="p-3"></span>,
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="outline"
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 }) => { cell: ({ row }) => {
const resourceRow = row.original; const resourceRow = row.original;
return ( return (
@@ -402,32 +299,6 @@ export default function ClientResourcesTable({
} }
]; ];
const internalTable = useReactTable({
data: internalResources,
columns: internalColumns,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
onSortingChange: setInternalSorting,
getSortedRowModel: getSortedRowModel(),
onColumnFiltersChange: setInternalColumnFilters,
getFilteredRowModel: getFilteredRowModel(),
onGlobalFilterChange: setInternalGlobalFilter,
onColumnVisibilityChange: setInternalColumnVisibility,
initialState: {
pagination: {
pageSize: internalPageSize,
pageIndex: 0
},
columnVisibility: internalColumnVisibility
},
state: {
sorting: internalSorting,
columnFilters: internalColumnFilters,
globalFilter: internalGlobalFilter,
columnVisibility: internalColumnVisibility
}
});
return ( return (
<> <>
{selectedInternalResource && ( {selectedInternalResource && (
@@ -455,157 +326,22 @@ export default function ClientResourcesTable({
/> />
)} )}
<div className="container mx-auto max-w-12xl"> <DataTable
<Card> columns={internalColumns}
<CardHeader className="flex flex-col space-y-4 sm:flex-row sm:items-center sm:justify-between sm:space-y-0 pb-0"> data={internalResources}
<div className="flex flex-row space-y-3 w-full sm:mr-2 gap-2"> persistPageSize="internal-resources"
<div className="relative w-full sm:max-w-sm"> searchPlaceholder={t("resourcesSearch")}
<Input searchColumn="name"
placeholder={t("resourcesSearch")} onAdd={() => setIsCreateDialogOpen(true)}
value={internalGlobalFilter ?? ""} addButtonText={t("resourceAdd")}
onChange={(e) => onRefresh={refreshData}
internalTable.setGlobalFilter( isRefreshing={isRefreshing}
String(e.target.value) defaultSort={defaultSort}
) enableColumnVisibility={true}
} persistColumnVisibility="internal-resources"
className="w-full pl-8" stickyLeftColumn="name"
/> stickyRightColumn="actions"
<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={() => setIsCreateDialogOpen(true)}
>
<Plus className="mr-2 h-4 w-4" />
{t("resourceAdd")}
</Button>
</div>
</div>
</CardHeader>
<CardContent>
<div className="overflow-x-auto mt-9">
<Table>
<TableHeader>
{internalTable
.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>
{internalTable.getRowModel().rows
?.length ? (
internalTable
.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={internalColumns.length}
className="h-24 text-center"
>
{t(
"resourcesTableNoInternalResourcesFound"
)}
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
</div>
<div className="mt-4">
<DataTablePagination
table={internalTable}
onPageSizeChange={setInternalPageSize}
/>
</div>
</CardContent>
</Card>
</div>
{editingResource && ( {editingResource && (
<EditInternalResourceDialog <EditInternalResourceDialog

338
src/components/MachineClientsTable.tsx
View File

@@ -1,52 +1,23 @@
"use client"; "use client";
import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog"; import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
import { DataTablePagination } from "@app/components/DataTablePagination"; import { DataTable } from "@app/components/ui/data-table";
import { Button } from "@app/components/ui/button";
import { Card, CardContent, CardHeader } from "@app/components/ui/card";
import { ExtendedColumnDef } from "@app/components/ui/data-table"; import { ExtendedColumnDef } from "@app/components/ui/data-table";
import { Button } from "@app/components/ui/button";
import { import {
DropdownMenu, DropdownMenu,
DropdownMenuCheckboxItem,
DropdownMenuContent, DropdownMenuContent,
DropdownMenuItem, DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger DropdownMenuTrigger
} from "@app/components/ui/dropdown-menu"; } from "@app/components/ui/dropdown-menu";
import { Input } from "@app/components/ui/input";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow
} from "@app/components/ui/table";
import { useEnvContext } from "@app/hooks/useEnvContext"; import { useEnvContext } from "@app/hooks/useEnvContext";
import { useStoredColumnVisibility } from "@app/hooks/useStoredColumnVisibility";
import { useStoredPageSize } from "@app/hooks/useStoredPageSize";
import { toast } from "@app/hooks/useToast"; import { toast } from "@app/hooks/useToast";
import { createApiClient, formatAxiosError } from "@app/lib/api"; import { createApiClient, formatAxiosError } from "@app/lib/api";
import {
ColumnFiltersState,
flexRender,
getCoreRowModel,
getFilteredRowModel,
getPaginationRowModel,
getSortedRowModel,
SortingState,
useReactTable
} from "@tanstack/react-table";
import { import {
ArrowRight, ArrowRight,
ArrowUpDown, ArrowUpDown,
ArrowUpRight, ArrowUpRight,
Columns, MoreHorizontal
MoreHorizontal,
Plus,
RefreshCw,
Search
} from "lucide-react"; } from "lucide-react";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import Link from "next/link"; import Link from "next/link";
@@ -84,11 +55,6 @@ export default function MachineClientsTable({
const t = useTranslations(); const t = useTranslations();
const [machinePageSize, setMachinePageSize] = useStoredPageSize(
"machine-clients",
20
);
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false); const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
const [selectedClient, setSelectedClient] = useState<ClientRow | null>( const [selectedClient, setSelectedClient] = useState<ClientRow | null>(
null null
@@ -97,34 +63,24 @@ export default function MachineClientsTable({
const api = createApiClient(useEnvContext()); const api = createApiClient(useEnvContext());
const [isRefreshing, startTransition] = useTransition(); const [isRefreshing, startTransition] = useTransition();
const [machineSorting, setMachineSorting] = useState<SortingState>([]);
const [machineColumnFilters, setMachineColumnFilters] =
useState<ColumnFiltersState>([]);
const [machineGlobalFilter, setMachineGlobalFilter] = useState<any>([]);
const defaultMachineColumnVisibility = { const defaultMachineColumnVisibility = {
client: false, client: false,
subnet: false, subnet: false,
userId: false userId: false
}; };
const [machineColumnVisibility, setMachineColumnVisibility] = const refreshData = () => {
useStoredColumnVisibility( startTransition(() => {
"machine-clients", try {
defaultMachineColumnVisibility router.refresh();
); } catch (error) {
toast({
const refreshData = async () => { title: t("error"),
try { description: t("refreshError"),
router.refresh(); variant: "destructive"
console.log("Data refreshed"); });
} catch (error) { }
toast({ });
title: t("error"),
description: t("refreshError"),
variant: "destructive"
});
}
}; };
const deleteClient = (clientId: number) => { const deleteClient = (clientId: number) => {
@@ -374,73 +330,7 @@ export default function MachineClientsTable({
baseColumns.push({ baseColumns.push({
id: "actions", id: "actions",
enableHiding: false, enableHiding: false,
header: ({ table }) => { header: () => <span className="p-3"></span>,
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 }) => { cell: ({ row }) => {
const clientRow = row.original; const clientRow = row.original;
return !clientRow.userId ? ( return !clientRow.userId ? (
@@ -495,32 +385,6 @@ export default function MachineClientsTable({
return baseColumns; return baseColumns;
}, [hasRowsWithoutUserId, t]); }, [hasRowsWithoutUserId, t]);
const machineTable = useReactTable({
data: machineClients || [],
columns,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
onSortingChange: setMachineSorting,
getSortedRowModel: getSortedRowModel(),
onColumnFiltersChange: setMachineColumnFilters,
getFilteredRowModel: getFilteredRowModel(),
onGlobalFilterChange: setMachineGlobalFilter,
onColumnVisibilityChange: setMachineColumnVisibility,
initialState: {
pagination: {
pageSize: machinePageSize,
pageIndex: 0
},
columnVisibility: machineColumnVisibility
},
state: {
sorting: machineSorting,
columnFilters: machineColumnFilters,
globalFilter: machineGlobalFilter,
columnVisibility: machineColumnVisibility
}
});
return ( return (
<> <>
{selectedClient && ( {selectedClient && (
@@ -543,158 +407,24 @@ export default function MachineClientsTable({
/> />
)} )}
<div className="container mx-auto max-w-12xl"> <DataTable
<Card> columns={columns}
<CardHeader className="flex flex-col space-y-4 sm:flex-row sm:items-center sm:justify-between sm:space-y-0 pb-0"> data={machineClients || []}
<div className="flex flex-row space-y-3 w-full sm:mr-2 gap-2"> persistPageSize="machine-clients"
<div className="relative w-full sm:max-w-sm"> searchPlaceholder={t("resourcesSearch")}
<Input searchColumn="name"
placeholder={t("resourcesSearch")} onAdd={() =>
value={machineGlobalFilter ?? ""} router.push(`/${orgId}/settings/clients/create`)
onChange={(e) => }
machineTable.setGlobalFilter( addButtonText={t("createClient")}
String(e.target.value) onRefresh={refreshData}
) isRefreshing={isRefreshing}
} enableColumnVisibility={true}
className="w-full pl-8" persistColumnVisibility="machine-clients"
/> columnVisibility={defaultMachineColumnVisibility}
<Search className="h-4 w-4 absolute left-2 top-1/2 transform -translate-y-1/2 text-muted-foreground" /> stickyLeftColumn="name"
</div> stickyRightColumn="actions"
</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/clients/create`
)
}
>
<Plus className="mr-2 h-4 w-4" />
{t("createClient")}
</Button>
</div>
</div>
</CardHeader>
<CardContent>
<div className="overflow-x-auto mt-9">
<Table>
<TableHeader>
{machineTable
.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>
{machineTable.getRowModel().rows?.length ? (
machineTable
.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={columns.length}
className="h-24 text-center"
>
{t("noResults")}
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
</div>
<div className="mt-4">
<DataTablePagination
table={machineTable}
onPageSizeChange={setMachinePageSize}
/>
</div>
</CardContent>
</Card>
</div>
</> </>
); );
} }

330
src/components/ProxyResourcesTable.tsx
View File

@@ -2,46 +2,21 @@
import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog"; import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
import CopyToClipboard from "@app/components/CopyToClipboard"; import CopyToClipboard from "@app/components/CopyToClipboard";
import { DataTablePagination } from "@app/components/DataTablePagination"; import { DataTable } from "@app/components/ui/data-table";
import { Button } from "@app/components/ui/button";
import { Card, CardContent, CardHeader } from "@app/components/ui/card";
import { ExtendedColumnDef } from "@app/components/ui/data-table"; import { ExtendedColumnDef } from "@app/components/ui/data-table";
import { Button } from "@app/components/ui/button";
import { import {
DropdownMenu, DropdownMenu,
DropdownMenuCheckboxItem,
DropdownMenuContent, DropdownMenuContent,
DropdownMenuItem, DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger DropdownMenuTrigger
} from "@app/components/ui/dropdown-menu"; } from "@app/components/ui/dropdown-menu";
import { InfoPopup } from "@app/components/ui/info-popup"; import { InfoPopup } from "@app/components/ui/info-popup";
import { Input } from "@app/components/ui/input";
import { Switch } from "@app/components/ui/switch"; import { Switch } from "@app/components/ui/switch";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow
} from "@app/components/ui/table";
import { useEnvContext } from "@app/hooks/useEnvContext"; import { useEnvContext } from "@app/hooks/useEnvContext";
import { useStoredColumnVisibility } from "@app/hooks/useStoredColumnVisibility";
import { useStoredPageSize } from "@app/hooks/useStoredPageSize";
import { toast } from "@app/hooks/useToast"; import { toast } from "@app/hooks/useToast";
import { createApiClient, formatAxiosError } from "@app/lib/api"; import { createApiClient, formatAxiosError } from "@app/lib/api";
import { UpdateResourceResponse } from "@server/routers/resource"; import { UpdateResourceResponse } from "@server/routers/resource";
import {
ColumnFiltersState,
flexRender,
getCoreRowModel,
getFilteredRowModel,
getPaginationRowModel,
getSortedRowModel,
SortingState,
useReactTable
} from "@tanstack/react-table";
import { AxiosResponse } from "axios"; import { AxiosResponse } from "axios";
import { import {
ArrowRight, ArrowRight,
@@ -49,11 +24,7 @@ import {
CheckCircle2, CheckCircle2,
ChevronDown, ChevronDown,
Clock, Clock,
Columns,
MoreHorizontal, MoreHorizontal,
Plus,
RefreshCw,
Search,
ShieldCheck, ShieldCheck,
ShieldOff, ShieldOff,
XCircle XCircle
@@ -164,35 +135,24 @@ export default function ProxyResourcesTable({
const api = createApiClient({ env }); const api = createApiClient({ env });
const [proxyPageSize, setProxyPageSize] = useStoredPageSize(
"proxy-resources",
20
);
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false); const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
const [selectedResource, setSelectedResource] = const [selectedResource, setSelectedResource] =
useState<ResourceRow | null>(); 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 [isRefreshing, startTransition] = useTransition();
const [proxyColumnVisibility, setProxyColumnVisibility] =
useStoredColumnVisibility("proxy-resources", {});
const refreshData = () => { const refreshData = () => {
try { startTransition(() => {
router.refresh(); try {
} catch (error) { router.refresh();
toast({ } catch (error) {
title: t("error"), toast({
description: t("refreshError"), title: t("error"),
variant: "destructive" description: t("refreshError"),
}); variant: "destructive"
} });
}
});
}; };
const deleteResource = (resourceId: number) => { const deleteResource = (resourceId: number) => {
@@ -512,70 +472,7 @@ export default function ProxyResourcesTable({
{ {
id: "actions", id: "actions",
enableHiding: false, enableHiding: false,
header: ({ table }) => { header: () => <span className="p-3"></span>,
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 }) => { cell: ({ row }) => {
const resourceRow = row.original; const resourceRow = row.original;
return ( return (
@@ -624,32 +521,6 @@ export default function ProxyResourcesTable({
} }
]; ];
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
}
});
return ( return (
<> <>
{selectedResource && ( {selectedResource && (
@@ -672,159 +543,24 @@ export default function ProxyResourcesTable({
/> />
)} )}
<div className="container mx-auto max-w-12xl"> <DataTable
<Card> columns={proxyColumns}
<CardHeader className="flex flex-col space-y-4 sm:flex-row sm:items-center sm:justify-between sm:space-y-0 pb-0"> data={resources}
<div className="flex flex-row space-y-3 w-full sm:mr-2 gap-2"> persistPageSize="proxy-resources"
<div className="relative w-full sm:max-w-sm"> searchPlaceholder={t("resourcesSearch")}
<Input searchColumn="name"
placeholder={t("resourcesSearch")} onAdd={() =>
value={proxyGlobalFilter ?? ""} router.push(`/${orgId}/settings/resources/create`)
onChange={(e) => }
proxyTable.setGlobalFilter( addButtonText={t("resourceAdd")}
String(e.target.value) onRefresh={refreshData}
) isRefreshing={isRefreshing}
} defaultSort={defaultSort}
className="w-full pl-8" enableColumnVisibility={true}
/> persistColumnVisibility="proxy-resources"
<Search className="h-4 w-4 absolute left-2 top-1/2 transform -translate-y-1/2 text-muted-foreground" /> stickyLeftColumn="name"
</div> stickyRightColumn="actions"
</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 mt-9">
<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={setProxyPageSize}
/>
</div>
</CardContent>
</Card>
</div>
</> </>
); );
} }

65
src/components/SidebarNav.tsx
View File

@@ -102,8 +102,8 @@ function CollapsibleNavItem({
{item.icon && ( {item.icon && (
<span className="flex-shrink-0 mr-2">{item.icon}</span> <span className="flex-shrink-0 mr-2">{item.icon}</span>
)} )}
<span className="flex-1 text-left">{t(item.title)}</span> <div className="flex items-center gap-1.5 flex-1">
<div className="flex items-center gap-1.5"> <span className="text-left">{t(item.title)}</span>
{item.isBeta && ( {item.isBeta && (
<Badge <Badge
variant="outline" variant="outline"
@@ -112,6 +112,8 @@ function CollapsibleNavItem({
{t("beta")} {t("beta")}
</Badge> </Badge>
)} )}
</div>
<div className="flex items-center gap-1.5">
{build === "enterprise" && {build === "enterprise" &&
item.showEE && item.showEE &&
!isUnlocked() && ( !isUnlocked() && (
@@ -251,8 +253,8 @@ export function SidebarNav({
)} )}
{!isCollapsed && ( {!isCollapsed && (
<> <>
<span className="flex-1">{t(item.title)}</span> <div className="flex items-center gap-1.5 flex-1">
<div className="flex items-center gap-1.5"> <span>{t(item.title)}</span>
{item.isBeta && ( {item.isBeta && (
<Badge <Badge
variant="outline" variant="outline"
@@ -261,14 +263,14 @@ export function SidebarNav({
{t("beta")} {t("beta")}
</Badge> </Badge>
)} )}
{build === "enterprise" &&
item.showEE &&
!isUnlocked() && (
<Badge variant="outlinePrimary">
{t("licenseBadge")}
</Badge>
)}
</div> </div>
{build === "enterprise" &&
item.showEE &&
!isUnlocked() && (
<Badge variant="outlinePrimary">
{t("licenseBadge")}
</Badge>
)}
</> </>
)} )}
</Link> </Link>
@@ -283,8 +285,8 @@ export function SidebarNav({
{item.icon && ( {item.icon && (
<span className="flex-shrink-0 mr-2">{item.icon}</span> <span className="flex-shrink-0 mr-2">{item.icon}</span>
)} )}
<span className="flex-1">{t(item.title)}</span> <div className="flex items-center gap-1.5 flex-1">
<div className="flex items-center gap-1.5"> <span>{t(item.title)}</span>
{item.isBeta && ( {item.isBeta && (
<Badge <Badge
variant="outline" variant="outline"
@@ -293,14 +295,14 @@ export function SidebarNav({
{t("beta")} {t("beta")}
</Badge> </Badge>
)} )}
{build === "enterprise" &&
item.showEE &&
!isUnlocked() && (
<Badge variant="outlinePrimary">
{t("licenseBadge")}
</Badge>
)}
</div> </div>
{build === "enterprise" &&
item.showEE &&
!isUnlocked() && (
<Badge variant="outlinePrimary">
{t("licenseBadge")}
</Badge>
)}
</div> </div>
); );
@@ -382,23 +384,22 @@ export function SidebarNav({
{childItem.icon} {childItem.icon}
</span> </span>
)} )}
<span className="flex-1"> <div className="flex items-center gap-1.5 flex-1">
{t(childItem.title)} <span>{t(childItem.title)}</span>
</span> {childItem.isBeta && (
{childItem.isBeta && ( <Badge
<Badge variant="outline"
variant="outline" className="text-muted-foreground"
className="ml-2 text-muted-foreground" >
> {t("beta")}
{t("beta")} </Badge>
</Badge> )}
)} </div>
{build === "enterprise" && {build === "enterprise" &&
childItem.showEE && childItem.showEE &&
!isUnlocked() && ( !isUnlocked() && (
<Badge <Badge
variant="outlinePrimary" variant="outlinePrimary"
className="ml-2"
> >
{t("licenseBadge")} {t("licenseBadge")}
</Badge> </Badge>

318
src/components/UserDevicesTable.tsx
View File

@@ -1,49 +1,23 @@
"use client"; "use client";
import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog"; import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
import { DataTablePagination } from "@app/components/DataTablePagination"; import { DataTable } from "@app/components/ui/data-table";
import { Button } from "@app/components/ui/button";
import { Card, CardContent, CardHeader } from "@app/components/ui/card";
import { ExtendedColumnDef } from "@app/components/ui/data-table"; import { ExtendedColumnDef } from "@app/components/ui/data-table";
import { Button } from "@app/components/ui/button";
import { import {
DropdownMenu, DropdownMenu,
DropdownMenuCheckboxItem,
DropdownMenuContent, DropdownMenuContent,
DropdownMenuItem, DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger DropdownMenuTrigger
} from "@app/components/ui/dropdown-menu"; } from "@app/components/ui/dropdown-menu";
import { Input } from "@app/components/ui/input";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow
} from "@app/components/ui/table";
import { useEnvContext } from "@app/hooks/useEnvContext"; import { useEnvContext } from "@app/hooks/useEnvContext";
import { toast } from "@app/hooks/useToast"; import { toast } from "@app/hooks/useToast";
import { createApiClient, formatAxiosError } from "@app/lib/api"; import { createApiClient, formatAxiosError } from "@app/lib/api";
import {
ColumnFiltersState,
flexRender,
getCoreRowModel,
getFilteredRowModel,
getPaginationRowModel,
getSortedRowModel,
SortingState,
useReactTable
} from "@tanstack/react-table";
import { import {
ArrowRight, ArrowRight,
ArrowUpDown, ArrowUpDown,
ArrowUpRight, ArrowUpRight,
Columns, MoreHorizontal
MoreHorizontal,
RefreshCw,
Search
} from "lucide-react"; } from "lucide-react";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import Link from "next/link"; import Link from "next/link";
@@ -52,9 +26,6 @@ import { useMemo, useState, useTransition } from "react";
import { Badge } from "./ui/badge"; import { Badge } from "./ui/badge";
import { InfoPopup } from "./ui/info-popup"; import { InfoPopup } from "./ui/info-popup";
import { useStoredColumnVisibility } from "@app/hooks/useStoredColumnVisibility";
import { useStoredPageSize } from "@app/hooks/useStoredPageSize";
export type ClientRow = { export type ClientRow = {
id: number; id: number;
name: string; name: string;
@@ -80,11 +51,6 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
const router = useRouter(); const router = useRouter();
const t = useTranslations(); const t = useTranslations();
const [userPageSize, setUserPageSize] = useStoredPageSize(
"user-clients",
20
);
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false); const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
const [selectedClient, setSelectedClient] = useState<ClientRow | null>( const [selectedClient, setSelectedClient] = useState<ClientRow | null>(
null null
@@ -93,30 +59,23 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
const api = createApiClient(useEnvContext()); const api = createApiClient(useEnvContext());
const [isRefreshing, startTransition] = useTransition(); const [isRefreshing, startTransition] = useTransition();
const [userSorting, setUserSorting] = useState<SortingState>([]);
const [userColumnFilters, setUserColumnFilters] =
useState<ColumnFiltersState>([]);
const [userGlobalFilter, setUserGlobalFilter] = useState<any>([]);
const defaultUserColumnVisibility = { const defaultUserColumnVisibility = {
client: false, client: false,
subnet: false subnet: false
}; };
const [userColumnVisibility, setUserColumnVisibility] = const refreshData = () => {
useStoredColumnVisibility("user-clients", defaultUserColumnVisibility); startTransition(() => {
try {
const refreshData = async () => { router.refresh();
try { } catch (error) {
router.refresh(); toast({
console.log("Data refreshed"); title: t("error"),
} catch (error) { description: t("refreshError"),
toast({ variant: "destructive"
title: t("error"), });
description: t("refreshError"), }
variant: "destructive" });
});
}
}; };
const deleteClient = (clientId: number) => { const deleteClient = (clientId: number) => {
@@ -366,73 +325,7 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
baseColumns.push({ baseColumns.push({
id: "actions", id: "actions",
enableHiding: false, enableHiding: false,
header: ({ table }) => { header: () => <span className="p-3"></span>,
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 }) => { cell: ({ row }) => {
const clientRow = row.original; const clientRow = row.original;
return !clientRow.userId ? ( return !clientRow.userId ? (
@@ -487,32 +380,6 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
return baseColumns; return baseColumns;
}, [hasRowsWithoutUserId, t]); }, [hasRowsWithoutUserId, t]);
const userTable = useReactTable({
data: userClients || [],
columns,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
onSortingChange: setUserSorting,
getSortedRowModel: getSortedRowModel(),
onColumnFiltersChange: setUserColumnFilters,
getFilteredRowModel: getFilteredRowModel(),
onGlobalFilterChange: setUserGlobalFilter,
onColumnVisibilityChange: setUserColumnVisibility,
initialState: {
pagination: {
pageSize: userPageSize,
pageIndex: 0
},
columnVisibility: userColumnVisibility
},
state: {
sorting: userSorting,
columnFilters: userColumnFilters,
globalFilter: userGlobalFilter,
columnVisibility: userColumnVisibility
}
});
return ( return (
<> <>
{selectedClient && ( {selectedClient && (
@@ -535,145 +402,20 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
/> />
)} )}
<div className="container mx-auto max-w-12xl"> <DataTable
<Card> columns={columns}
<CardHeader className="flex flex-col space-y-4 sm:flex-row sm:items-center sm:justify-between sm:space-y-0 pb-0"> data={userClients || []}
<div className="flex flex-row space-y-3 w-full sm:mr-2 gap-2"> persistPageSize="user-clients"
<div className="relative w-full sm:max-w-sm"> searchPlaceholder={t("resourcesSearch")}
<Input searchColumn="name"
placeholder={t("resourcesSearch")} onRefresh={refreshData}
value={userGlobalFilter ?? ""} isRefreshing={isRefreshing}
onChange={(e) => enableColumnVisibility={true}
userTable.setGlobalFilter( persistColumnVisibility="user-clients"
String(e.target.value) columnVisibility={defaultUserColumnVisibility}
) stickyLeftColumn="name"
} stickyRightColumn="actions"
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>
</CardHeader>
<CardContent>
<div className="overflow-x-auto mt-9">
<Table>
<TableHeader>
{userTable
.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>
{userTable.getRowModel().rows?.length ? (
userTable
.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={columns.length}
className="h-24 text-center"
>
{t("noResults")}
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
</div>
<div className="mt-4">
<DataTablePagination
table={userTable}
onPageSizeChange={setUserPageSize}
/>
</div>
</CardContent>
</Card>
</div>
</> </>
); );
} }