fix(ui): перенести таблицы администрирования и сортировать бэкапы по байтам

components/data-grids/backups-data-grid.tsx

@@ -1,23 +1,23 @@
 "use client"
 
+import { dataGridFeatures, type DataGridFeatures } from "@/components/reui/data-grid"
+
 import { useMemo, type ReactNode } from "react"
 import {
   type ColumnDef,
-  getCoreRowModel,
-  getSortedRowModel,
-  useReactTable,
-} from "@tanstack/react-table-v8"
+  useTable,
+} from "@tanstack/react-table"
 import type { Backup } from "@/lib/data"
 import { Button } from "@/components/ui/button"
 import { Badge } from "@/components/reui/badge"
 import { IconTile } from "@/components/reui/icon-tile"
-import { DataGridShell } from "@/components/data-grids/shared/legacy-data-grid-shell"
+import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
 import {
   DATA_GRID_CELL_PAD,
   DATA_GRID_CELL_PAD_FIRST,
   DATA_GRID_CELL_PAD_LAST,
-} from "@/components/data-grids/shared/legacy-data-grid-layout"
-import { DataGridSortHeader } from "@/components/data-grids/shared/legacy-data-grid-sort-header"
+} from "@/components/data-grids/shared/data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
 import { EmptyState } from "@/components/empty-state"
 import {
   CloudIcon,
@@ -52,7 +52,7 @@ function BackupsDataGrid({
   emptyTitle = "Нет бэкапов",
   emptyDescription = "Создайте первый бэкап вручную или настройте расписание",
 }: BackupsDataGridProps) {
-  const columns = useMemo<ColumnDef<Backup>[]>(
+  const columns = useMemo<ColumnDef<DataGridFeatures, Backup>[]>(
     () => [
       {
         id: "filename",
@@ -100,7 +100,8 @@ function BackupsDataGrid({
       },
       {
         id: "size",
-        accessorKey: "size",
+        accessorFn: (row) => row.sizeBytes,
+        sortUndefined: "last",
         header: ({ column }) => <DataGridSortHeader column={column} title="Размер" />,
         cell: ({ row }) => (
           <span className="font-mono text-xs text-muted-foreground">{row.original.size}</span>
@@ -230,11 +231,11 @@ function BackupsDataGrid({
     [onDelete, onDownload, onRestore],
   )
 
-  const table = useReactTable({
+  const table = useTable({
+    features: dataGridFeatures,
+    manualPagination: true,
     data: backups,
     columns,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
     getRowId: (row) => row.id,
   })
 

components/data-grids/certificates-data-grid.tsx

@@ -1,24 +1,23 @@
 "use client"
 
+import { dataGridFeatures, type DataGridFeatures } from "@/components/reui/data-grid"
+
 import { useMemo, type ReactNode } from "react"
 import {
   type ColumnDef,
-  getCoreRowModel,
-  getExpandedRowModel,
-  getSortedRowModel,
-  useReactTable,
-} from "@tanstack/react-table-v8"
+  useTable,
+} from "@tanstack/react-table"
 import type { CertStatus, Server } from "@/lib/data"
 import type { CertificateDto } from "@mmapp/contracts/certificates"
 import { Flag } from "@/components/flag"
 import { cn } from "@/lib/utils"
-import { DataGridShell } from "@/components/data-grids/shared/legacy-data-grid-shell"
+import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
 import {
   DATA_GRID_CELL_PAD,
   DATA_GRID_CELL_PAD_FIRST,
   DATA_GRID_CELL_PAD_LAST,
-} from "@/components/data-grids/shared/legacy-data-grid-layout"
-import { DataGridSortHeader } from "@/components/data-grids/shared/legacy-data-grid-sort-header"
+} from "@/components/data-grids/shared/data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
 import {
   CertificateExpandedDetail,
   daysLeftBar,
@@ -99,7 +98,7 @@ interface CertificatesDataGridProps {
 }
 
 function CertificatesDataGrid({ certificates, serverMap, isLoading }: CertificatesDataGridProps) {
-  const columns = useMemo<ColumnDef<CertificateDto>[]>(
+  const columns = useMemo<ColumnDef<DataGridFeatures, CertificateDto>[]>(
     () => [
       {
         id: "name",
@@ -244,12 +243,11 @@ function CertificatesDataGrid({ certificates, serverMap, isLoading }: Certificat
     [serverMap],
   )
 
-  const table = useReactTable({
+  const table = useTable({
+    features: dataGridFeatures,
+    manualPagination: true,
     data: certificates,
     columns,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getExpandedRowModel: getExpandedRowModel(),
     getRowId: (row) => row.id,
     getRowCanExpand: () => true,
   })

components/data-grids/subusers-data-grid.tsx

@@ -1,23 +1,23 @@
 "use client"
 
+import { dataGridFeatures, type DataGridFeatures } from "@/components/reui/data-grid"
+
 import { useMemo } from "react"
 import {
   type ColumnDef,
-  getCoreRowModel,
-  getSortedRowModel,
-  useReactTable,
-} from "@tanstack/react-table-v8"
+  useTable,
+} from "@tanstack/react-table"
 import type { Server } from "@/lib/data"
 import { Flag } from "@/components/flag"
 import { cn } from "@/lib/utils"
 import { FormToggle } from "@/components/form-kit"
-import { DataGridShell } from "@/components/data-grids/shared/legacy-data-grid-shell"
+import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
 import {
   DATA_GRID_CELL_PAD,
   DATA_GRID_CELL_PAD_FIRST,
   DATA_GRID_CELL_PAD_LAST,
-} from "@/components/data-grids/shared/legacy-data-grid-layout"
-import { DataGridSortHeader } from "@/components/data-grids/shared/legacy-data-grid-sort-header"
+} from "@/components/data-grids/shared/data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
 import { EmptyState } from "@/components/empty-state"
 import { CableIcon, CopyIcon, EyeIcon, EyeOffIcon, Trash2Icon } from "lucide-react"
 
@@ -49,7 +49,7 @@ function SubusersDataGrid({
   onToggleActive,
   onRemove,
 }: SubusersDataGridProps) {
-  const columns = useMemo<ColumnDef<SubUserRow>[]>(
+  const columns = useMemo<ColumnDef<DataGridFeatures, SubUserRow>[]>(
     () => [
       {
         id: "login",
@@ -200,11 +200,11 @@ function SubusersDataGrid({
     [onRemove, onToggleActive, onToggleReveal, revealedIds, servers],
   )
 
-  const table = useReactTable({
+  const table = useTable({
+    features: dataGridFeatures,
+    manualPagination: true,
     data: subUsers,
     columns,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
     getRowId: (row) => row.id,
   })
 

components/data-grids/users-data-grid.tsx

@@ -1,23 +1,22 @@
 "use client"
 
+import { dataGridFeatures, type DataGridFeatures } from "@/components/reui/data-grid"
+
 import { useMemo } from "react"
 import {
   type ColumnDef,
-  getCoreRowModel,
-  getExpandedRowModel,
-  getSortedRowModel,
-  useReactTable,
-} from "@tanstack/react-table-v8"
+  useTable,
+} from "@tanstack/react-table"
 import { Button } from "@/components/ui/button"
 import { Badge } from "@/components/reui/badge"
 import { cn } from "@/lib/utils"
-import { DataGridShell } from "@/components/data-grids/shared/legacy-data-grid-shell"
+import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
 import {
   DATA_GRID_CELL_PAD,
   DATA_GRID_CELL_PAD_FIRST,
   DATA_GRID_CELL_PAD_LAST,
-} from "@/components/data-grids/shared/legacy-data-grid-layout"
-import { DataGridSortHeader } from "@/components/data-grids/shared/legacy-data-grid-sort-header"
+} from "@/components/data-grids/shared/data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
 import { UsersExpandedDetail } from "@/components/data-grids/users-expanded-detail"
 import { EmptyState } from "@/components/empty-state"
 import { ALL_SECTIONS, ROLE_LABEL, type AppUser } from "@/lib/users"
@@ -60,7 +59,7 @@ function UsersDataGrid({
   onEdit,
   onDelete,
 }: UsersDataGridProps) {
-  const columns = useMemo<ColumnDef<AppUser>[]>(
+  const columns = useMemo<ColumnDef<DataGridFeatures, AppUser>[]>(
     () => [
       {
         id: "name",
@@ -209,12 +208,11 @@ function UsersDataGrid({
     [allSectionsCount, onDelete, onEdit, serversCount],
   )
 
-  const table = useReactTable({
+  const table = useTable({
+    features: dataGridFeatures,
+    manualPagination: true,
     data: users,
     columns,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getExpandedRowModel: getExpandedRowModel(),
     getRowId: (row) => row.id,
     getRowCanExpand: () => true,
   })