diff --git a/messages/en-US.json b/messages/en-US.json index 87e75479..b574a6c4 100644 --- a/messages/en-US.json +++ b/messages/en-US.json @@ -1166,7 +1166,7 @@ "sidebarIdentityProviders": "Identity Providers", "sidebarLicense": "License", "sidebarClients": "Clients", - "sidebarUserDevices": "User devices", + "sidebarUserDevices": "User Devices", "sidebarMachineClients": "Machine Clients", "sidebarDomains": "Domains", "sidebarBluePrints": "Blueprints", diff --git a/src/app/navigation.tsx b/src/app/navigation.tsx index a61ff4af..92ff41e1 100644 --- a/src/app/navigation.tsx +++ b/src/app/navigation.tsx @@ -19,7 +19,8 @@ import { SquareMousePointer, ScanEye, GlobeLock, - Smartphone + Smartphone, + Laptop } from "lucide-react"; export type SidebarNavSection = { @@ -81,7 +82,7 @@ export const orgNavSections = ( href: "/{orgId}/settings/clients/user", title: "sidebarUserDevices", icon: ( - + ) }, { diff --git a/src/components/ClientResourcesTable.tsx b/src/components/ClientResourcesTable.tsx index 53998e2e..42625f5f 100644 --- a/src/components/ClientResourcesTable.tsx +++ b/src/components/ClientResourcesTable.tsx @@ -2,49 +2,22 @@ import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog"; import CopyToClipboard from "@app/components/CopyToClipboard"; -import { DataTablePagination } from "@app/components/DataTablePagination"; -import { Button } from "@app/components/ui/button"; -import { Card, CardContent, CardHeader } from "@app/components/ui/card"; +import { DataTable } from "@app/components/ui/data-table"; import { ExtendedColumnDef } from "@app/components/ui/data-table"; +import { Button } from "@app/components/ui/button"; import { DropdownMenu, - DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, - DropdownMenuLabel, - DropdownMenuSeparator, DropdownMenuTrigger } 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 { toast } from "@app/hooks/useToast"; import { createApiClient, formatAxiosError } from "@app/lib/api"; -import { - ColumnFiltersState, - flexRender, - getCoreRowModel, - getFilteredRowModel, - getPaginationRowModel, - getSortedRowModel, - SortingState, - useReactTable -} from "@tanstack/react-table"; import { ArrowUpDown, ArrowUpRight, - Columns, - MoreHorizontal, - Plus, - RefreshCw, - Search + MoreHorizontal } from "lucide-react"; import { useTranslations } from "next-intl"; import Link from "next/link"; @@ -53,9 +26,7 @@ import { useState, useTransition } from "react"; import CreateInternalResourceDialog from "@app/components/CreateInternalResourceDialog"; import EditInternalResourceDialog from "@app/components/EditInternalResourceDialog"; -import { useStoredColumnVisibility } from "@app/hooks/useStoredColumnVisibility"; -import { useStoredPageSize } from "@app/hooks/useStoredPageSize"; -import { orgQueries, siteQueries } from "@app/lib/queries"; +import { orgQueries } from "@app/lib/queries"; import { useQuery } from "@tanstack/react-query"; export type TargetHealth = { @@ -122,10 +93,6 @@ export default function ClientResourcesTable({ const api = createApiClient({ env }); - const [internalPageSize, setInternalPageSize] = useStoredPageSize( - "internal-resources", - 20 - ); const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false); const [selectedInternalResource, setSelectedInternalResource] = @@ -135,29 +102,22 @@ export default function ClientResourcesTable({ useState(); const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false); - const { data: sites = [] } = useQuery(orgQueries.sites({ orgId, api })); + const { data: sites = [] } = useQuery(orgQueries.sites({ orgId })); - const [internalSorting, setInternalSorting] = useState( - defaultSort ? [defaultSort] : [] - ); - const [internalColumnFilters, setInternalColumnFilters] = - useState([]); - const [internalGlobalFilter, setInternalGlobalFilter] = useState([]); const [isRefreshing, startTransition] = useTransition(); - const [internalColumnVisibility, setInternalColumnVisibility] = - useStoredColumnVisibility("internal-resources", {}); - const refreshData = async () => { - try { - router.refresh(); - console.log("Data refreshed"); - } catch (error) { - toast({ - title: t("error"), - description: t("refreshError"), - variant: "destructive" - }); - } + const refreshData = () => { + startTransition(() => { + try { + router.refresh(); + } catch (error) { + toast({ + title: t("error"), + description: t("refreshError"), + variant: "destructive" + }); + } + }); }; const deleteInternalResource = async ( @@ -295,70 +255,7 @@ export default function ClientResourcesTable({ { id: "actions", enableHiding: false, - header: ({ table }) => { - const hasHideableColumns = table - .getAllColumns() - .some((column) => column.getCanHide()); - if (!hasHideableColumns) { - return ; - } - return ( -
- - - - - - - {t("toggleColumns") || "Toggle columns"} - - - {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 ( - - column.toggleVisibility( - !!value - ) - } - onSelect={(e) => - e.preventDefault() - } - > - {displayName} - - ); - })} - - -
- ); - }, + header: () => , cell: ({ row }) => { const resourceRow = row.original; 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 ( <> {selectedInternalResource && ( @@ -455,157 +326,22 @@ export default function ClientResourcesTable({ /> )} -
- - -
-
- - internalTable.setGlobalFilter( - String(e.target.value) - ) - } - className="w-full pl-8" - /> - -
-
-
-
- -
-
- {" "} - -
-
- - -
- - - {internalTable - .getHeaderGroups() - .map((headerGroup) => ( - - {headerGroup.headers - .filter((header) => - header.column.getIsVisible() - ) - .map((header) => ( - - {header.isPlaceholder - ? null - : flexRender( - header - .column - .columnDef - .header, - header.getContext() - )} - - ))} - - ))} - - - {internalTable.getRowModel().rows - ?.length ? ( - internalTable - .getRowModel() - .rows.map((row) => ( - - {row - .getVisibleCells() - .map((cell) => ( - - {flexRender( - cell.column - .columnDef - .cell, - cell.getContext() - )} - - ))} - - )) - ) : ( - - - {t( - "resourcesTableNoInternalResourcesFound" - )} - - - )} - -
-
-
- -
- - -
+ setIsCreateDialogOpen(true)} + addButtonText={t("resourceAdd")} + onRefresh={refreshData} + isRefreshing={isRefreshing} + defaultSort={defaultSort} + enableColumnVisibility={true} + persistColumnVisibility="internal-resources" + stickyLeftColumn="name" + stickyRightColumn="actions" + /> {editingResource && ( ( null @@ -97,34 +63,24 @@ export default function MachineClientsTable({ const api = createApiClient(useEnvContext()); const [isRefreshing, startTransition] = useTransition(); - const [machineSorting, setMachineSorting] = useState([]); - const [machineColumnFilters, setMachineColumnFilters] = - useState([]); - const [machineGlobalFilter, setMachineGlobalFilter] = useState([]); - const defaultMachineColumnVisibility = { client: false, subnet: false, userId: false }; - const [machineColumnVisibility, setMachineColumnVisibility] = - useStoredColumnVisibility( - "machine-clients", - defaultMachineColumnVisibility - ); - - const refreshData = async () => { - try { - router.refresh(); - console.log("Data refreshed"); - } catch (error) { - toast({ - title: t("error"), - description: t("refreshError"), - variant: "destructive" - }); - } + const refreshData = () => { + startTransition(() => { + try { + router.refresh(); + } catch (error) { + toast({ + title: t("error"), + description: t("refreshError"), + variant: "destructive" + }); + } + }); }; const deleteClient = (clientId: number) => { @@ -374,73 +330,7 @@ export default function MachineClientsTable({ baseColumns.push({ id: "actions", enableHiding: false, - header: ({ table }) => { - const hasHideableColumns = table - .getAllColumns() - .some((column) => column.getCanHide()); - if (!hasHideableColumns) { - return ; - } - return ( -
- - - - - - - {t("toggleColumns") || "Toggle columns"} - - - {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 ( - - column.toggleVisibility( - !!value - ) - } - onSelect={(e) => - e.preventDefault() - } - > - {displayName} - - ); - })} - - -
- ); - }, + header: () => , cell: ({ row }) => { const clientRow = row.original; return !clientRow.userId ? ( @@ -495,32 +385,6 @@ export default function MachineClientsTable({ return baseColumns; }, [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 ( <> {selectedClient && ( @@ -543,158 +407,24 @@ export default function MachineClientsTable({ /> )} -
- - -
-
- - machineTable.setGlobalFilter( - String(e.target.value) - ) - } - className="w-full pl-8" - /> - -
-
-
-
- -
-
- {" "} - -
-
- - -
- - - {machineTable - .getHeaderGroups() - .map((headerGroup) => ( - - {headerGroup.headers - .filter((header) => - header.column.getIsVisible() - ) - .map((header) => ( - - {header.isPlaceholder - ? null - : flexRender( - header - .column - .columnDef - .header, - header.getContext() - )} - - ))} - - ))} - - - {machineTable.getRowModel().rows?.length ? ( - machineTable - .getRowModel() - .rows.map((row) => ( - - {row - .getVisibleCells() - .map((cell) => ( - - {flexRender( - cell.column - .columnDef - .cell, - cell.getContext() - )} - - ))} - - )) - ) : ( - - - {t("noResults")} - - - )} - -
-
-
- -
- - -
+ + router.push(`/${orgId}/settings/clients/create`) + } + addButtonText={t("createClient")} + onRefresh={refreshData} + isRefreshing={isRefreshing} + enableColumnVisibility={true} + persistColumnVisibility="machine-clients" + columnVisibility={defaultMachineColumnVisibility} + stickyLeftColumn="name" + stickyRightColumn="actions" + /> ); } diff --git a/src/components/ProxyResourcesTable.tsx b/src/components/ProxyResourcesTable.tsx index 9fb4c91e..cbab8765 100644 --- a/src/components/ProxyResourcesTable.tsx +++ b/src/components/ProxyResourcesTable.tsx @@ -2,46 +2,21 @@ import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog"; import CopyToClipboard from "@app/components/CopyToClipboard"; -import { DataTablePagination } from "@app/components/DataTablePagination"; -import { Button } from "@app/components/ui/button"; -import { Card, CardContent, CardHeader } from "@app/components/ui/card"; +import { DataTable } from "@app/components/ui/data-table"; import { ExtendedColumnDef } from "@app/components/ui/data-table"; +import { Button } from "@app/components/ui/button"; import { DropdownMenu, - DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, - DropdownMenuLabel, - DropdownMenuSeparator, DropdownMenuTrigger } from "@app/components/ui/dropdown-menu"; import { InfoPopup } from "@app/components/ui/info-popup"; -import { Input } from "@app/components/ui/input"; 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 { useStoredColumnVisibility } from "@app/hooks/useStoredColumnVisibility"; -import { useStoredPageSize } from "@app/hooks/useStoredPageSize"; import { toast } from "@app/hooks/useToast"; import { createApiClient, formatAxiosError } from "@app/lib/api"; import { UpdateResourceResponse } from "@server/routers/resource"; -import { - ColumnFiltersState, - flexRender, - getCoreRowModel, - getFilteredRowModel, - getPaginationRowModel, - getSortedRowModel, - SortingState, - useReactTable -} from "@tanstack/react-table"; import { AxiosResponse } from "axios"; import { ArrowRight, @@ -49,11 +24,7 @@ import { CheckCircle2, ChevronDown, Clock, - Columns, MoreHorizontal, - Plus, - RefreshCw, - Search, ShieldCheck, ShieldOff, XCircle @@ -164,35 +135,24 @@ export default function ProxyResourcesTable({ const api = createApiClient({ env }); - const [proxyPageSize, setProxyPageSize] = useStoredPageSize( - "proxy-resources", - 20 - ); const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false); const [selectedResource, setSelectedResource] = useState(); - const [proxySorting, setProxySorting] = useState( - defaultSort ? [defaultSort] : [] - ); - - const [proxyColumnFilters, setProxyColumnFilters] = - useState([]); - const [proxyGlobalFilter, setProxyGlobalFilter] = useState([]); - const [isRefreshing, startTransition] = useTransition(); - const [proxyColumnVisibility, setProxyColumnVisibility] = - useStoredColumnVisibility("proxy-resources", {}); + const refreshData = () => { - try { - router.refresh(); - } catch (error) { - toast({ - title: t("error"), - description: t("refreshError"), - variant: "destructive" - }); - } + startTransition(() => { + try { + router.refresh(); + } catch (error) { + toast({ + title: t("error"), + description: t("refreshError"), + variant: "destructive" + }); + } + }); }; const deleteResource = (resourceId: number) => { @@ -512,70 +472,7 @@ export default function ProxyResourcesTable({ { id: "actions", enableHiding: false, - header: ({ table }) => { - const hasHideableColumns = table - .getAllColumns() - .some((column) => column.getCanHide()); - if (!hasHideableColumns) { - return ; - } - return ( -
- - - - - - - {t("toggleColumns") || "Toggle columns"} - - - {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 ( - - column.toggleVisibility( - !!value - ) - } - onSelect={(e) => - e.preventDefault() - } - > - {displayName} - - ); - })} - - -
- ); - }, + header: () => , cell: ({ row }) => { const resourceRow = row.original; 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 ( <> {selectedResource && ( @@ -672,159 +543,24 @@ export default function ProxyResourcesTable({ /> )} -
- - -
-
- - proxyTable.setGlobalFilter( - String(e.target.value) - ) - } - className="w-full pl-8" - /> - -
-
-
-
- -
-
- -
-
- - -
- - - {proxyTable - .getHeaderGroups() - .map((headerGroup) => ( - - {headerGroup.headers - .filter((header) => - header.column.getIsVisible() - ) - .map((header) => ( - - {header.isPlaceholder - ? null - : flexRender( - header - .column - .columnDef - .header, - header.getContext() - )} - - ))} - - ))} - - - {proxyTable.getRowModel().rows?.length ? ( - proxyTable - .getRowModel() - .rows.map((row) => ( - - {row - .getVisibleCells() - .map((cell) => ( - - {flexRender( - cell.column - .columnDef - .cell, - cell.getContext() - )} - - ))} - - )) - ) : ( - - - {t( - "resourcesTableNoProxyResourcesFound" - )} - - - )} - -
-
-
- -
- - -
+ + router.push(`/${orgId}/settings/resources/create`) + } + addButtonText={t("resourceAdd")} + onRefresh={refreshData} + isRefreshing={isRefreshing} + defaultSort={defaultSort} + enableColumnVisibility={true} + persistColumnVisibility="proxy-resources" + stickyLeftColumn="name" + stickyRightColumn="actions" + /> ); } diff --git a/src/components/SidebarNav.tsx b/src/components/SidebarNav.tsx index fb1f0044..ca05ca23 100644 --- a/src/components/SidebarNav.tsx +++ b/src/components/SidebarNav.tsx @@ -102,8 +102,8 @@ function CollapsibleNavItem({ {item.icon && ( {item.icon} )} - {t(item.title)} -
+
+ {t(item.title)} {item.isBeta && ( )} +
+
{build === "enterprise" && item.showEE && !isUnlocked() && ( @@ -251,8 +253,8 @@ export function SidebarNav({ )} {!isCollapsed && ( <> - {t(item.title)} -
+
+ {t(item.title)} {item.isBeta && ( )} - {build === "enterprise" && - item.showEE && - !isUnlocked() && ( - - {t("licenseBadge")} - - )}
+ {build === "enterprise" && + item.showEE && + !isUnlocked() && ( + + {t("licenseBadge")} + + )} )} @@ -283,8 +285,8 @@ export function SidebarNav({ {item.icon && ( {item.icon} )} - {t(item.title)} -
+
+ {t(item.title)} {item.isBeta && ( )} - {build === "enterprise" && - item.showEE && - !isUnlocked() && ( - - {t("licenseBadge")} - - )}
+ {build === "enterprise" && + item.showEE && + !isUnlocked() && ( + + {t("licenseBadge")} + + )}
); @@ -382,23 +384,22 @@ export function SidebarNav({ {childItem.icon} )} - - {t(childItem.title)} - - {childItem.isBeta && ( - - {t("beta")} - - )} +
+ {t(childItem.title)} + {childItem.isBeta && ( + + {t("beta")} + + )} +
{build === "enterprise" && childItem.showEE && !isUnlocked() && ( {t("licenseBadge")} diff --git a/src/components/UserDevicesTable.tsx b/src/components/UserDevicesTable.tsx index 0d903c88..256e0a00 100644 --- a/src/components/UserDevicesTable.tsx +++ b/src/components/UserDevicesTable.tsx @@ -1,49 +1,23 @@ "use client"; import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog"; -import { DataTablePagination } from "@app/components/DataTablePagination"; -import { Button } from "@app/components/ui/button"; -import { Card, CardContent, CardHeader } from "@app/components/ui/card"; +import { DataTable } from "@app/components/ui/data-table"; import { ExtendedColumnDef } from "@app/components/ui/data-table"; +import { Button } from "@app/components/ui/button"; import { DropdownMenu, - DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, - DropdownMenuLabel, - DropdownMenuSeparator, DropdownMenuTrigger } 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 { toast } from "@app/hooks/useToast"; import { createApiClient, formatAxiosError } from "@app/lib/api"; -import { - ColumnFiltersState, - flexRender, - getCoreRowModel, - getFilteredRowModel, - getPaginationRowModel, - getSortedRowModel, - SortingState, - useReactTable -} from "@tanstack/react-table"; import { ArrowRight, ArrowUpDown, ArrowUpRight, - Columns, - MoreHorizontal, - RefreshCw, - Search + MoreHorizontal } from "lucide-react"; import { useTranslations } from "next-intl"; import Link from "next/link"; @@ -52,9 +26,6 @@ import { useMemo, useState, useTransition } from "react"; import { Badge } from "./ui/badge"; import { InfoPopup } from "./ui/info-popup"; -import { useStoredColumnVisibility } from "@app/hooks/useStoredColumnVisibility"; -import { useStoredPageSize } from "@app/hooks/useStoredPageSize"; - export type ClientRow = { id: number; name: string; @@ -80,11 +51,6 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) { const router = useRouter(); const t = useTranslations(); - const [userPageSize, setUserPageSize] = useStoredPageSize( - "user-clients", - 20 - ); - const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false); const [selectedClient, setSelectedClient] = useState( null @@ -93,30 +59,23 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) { const api = createApiClient(useEnvContext()); const [isRefreshing, startTransition] = useTransition(); - const [userSorting, setUserSorting] = useState([]); - const [userColumnFilters, setUserColumnFilters] = - useState([]); - const [userGlobalFilter, setUserGlobalFilter] = useState([]); - const defaultUserColumnVisibility = { client: false, subnet: false }; - const [userColumnVisibility, setUserColumnVisibility] = - useStoredColumnVisibility("user-clients", defaultUserColumnVisibility); - - const refreshData = async () => { - try { - router.refresh(); - console.log("Data refreshed"); - } catch (error) { - toast({ - title: t("error"), - description: t("refreshError"), - variant: "destructive" - }); - } + const refreshData = () => { + startTransition(() => { + try { + router.refresh(); + } catch (error) { + toast({ + title: t("error"), + description: t("refreshError"), + variant: "destructive" + }); + } + }); }; const deleteClient = (clientId: number) => { @@ -366,73 +325,7 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) { baseColumns.push({ id: "actions", enableHiding: false, - header: ({ table }) => { - const hasHideableColumns = table - .getAllColumns() - .some((column) => column.getCanHide()); - if (!hasHideableColumns) { - return ; - } - return ( -
- - - - - - - {t("toggleColumns") || "Toggle columns"} - - - {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 ( - - column.toggleVisibility( - !!value - ) - } - onSelect={(e) => - e.preventDefault() - } - > - {displayName} - - ); - })} - - -
- ); - }, + header: () => , cell: ({ row }) => { const clientRow = row.original; return !clientRow.userId ? ( @@ -487,32 +380,6 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) { return baseColumns; }, [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 ( <> {selectedClient && ( @@ -535,145 +402,20 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) { /> )} -
- - -
-
- - userTable.setGlobalFilter( - String(e.target.value) - ) - } - className="w-full pl-8" - /> - -
-
-
-
- -
-
- - -
- - - {userTable - .getHeaderGroups() - .map((headerGroup) => ( - - {headerGroup.headers - .filter((header) => - header.column.getIsVisible() - ) - .map((header) => ( - - {header.isPlaceholder - ? null - : flexRender( - header - .column - .columnDef - .header, - header.getContext() - )} - - ))} - - ))} - - - {userTable.getRowModel().rows?.length ? ( - userTable - .getRowModel() - .rows.map((row) => ( - - {row - .getVisibleCells() - .map((cell) => ( - - {flexRender( - cell.column - .columnDef - .cell, - cell.getContext() - )} - - ))} - - )) - ) : ( - - - {t("noResults")} - - - )} - -
-
-
- -
- - -
+ ); }