fix(ui): заменить таблицы на карточки данных и улучшить функциональность поиска

components/data-table.tsx

@@ -4,18 +4,18 @@ import { useMemo, useState } from "react"
 import {
   type ColumnDef,
   getCoreRowModel,
-  getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
   useReactTable,
 } from "@tanstack/react-table"
-import { Card } from "@/components/ui/card"
+import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
 import {
-  DataGrid,
-  DataGridContainer,
-  DataGridPagination,
-  DataGridTable,
-} from "@/components/reui/data-grid"
+  DATA_GRID_CELL_PAD,
+  DATA_GRID_CELL_PAD_FIRST,
+  DATA_GRID_CELL_PAD_LAST,
+} from "@/components/data-grids/shared/data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
+import { DataPageCard } from "@/components/data-page-card"
 import { DataPageToolbar } from "@/components/data-page-toolbar"
 import { EmptyState } from "@/components/empty-state"
 import { InboxIcon } from "lucide-react"
@@ -24,6 +24,7 @@ export interface Column<T> {
   key: string
   label: string
   render: (row: T) => React.ReactNode
+  enableSorting?: boolean
 }
 
 interface DataTableProps<T extends { id: string }> {
@@ -34,6 +35,8 @@ interface DataTableProps<T extends { id: string }> {
   isLoading?: boolean
   emptyTitle?: string
   emptyDescription?: string
+  pagination?: boolean
+  countLabel?: string
 }
 
 export function DataTable<T extends { id: string }>({
@@ -44,9 +47,10 @@ export function DataTable<T extends { id: string }>({
   isLoading = false,
   emptyTitle = "Нет записей",
   emptyDescription,
+  pagination = false,
+  countLabel,
 }: DataTableProps<T>) {
   const [search, setSearch] = useState("")
-  const [globalFilter, setGlobalFilter] = useState("")
 
   const filteredData = useMemo(() => {
     if (!search || searchKeys.length === 0) return data
@@ -57,59 +61,70 @@ export function DataTable<T extends { id: string }>({
   }, [data, search, searchKeys])
 
   const columnDefs = useMemo<ColumnDef<T>[]>(
-    () =>
-      columns.map((col) => ({
+    () => {
+      const defs: ColumnDef<T>[] = columns.map((col, index) => ({
         id: col.key,
         accessorKey: col.key,
-        header: col.label,
+        header: ({ column }) => (
+          <DataGridSortHeader column={column} title={col.label} />
+        ),
         cell: ({ row }) => col.render(row.original),
-        meta: { headerTitle: col.label },
-      })),
+        enableSorting: col.enableSorting !== false,
+        meta: {
+          headerTitle: col.label,
+          headerClassName:
+            index === 0
+              ? DATA_GRID_CELL_PAD_FIRST
+              : index === columns.length - 1
+                ? DATA_GRID_CELL_PAD_LAST
+                : DATA_GRID_CELL_PAD,
+          cellClassName:
+            index === 0
+              ? DATA_GRID_CELL_PAD_FIRST
+              : index === columns.length - 1
+                ? DATA_GRID_CELL_PAD_LAST
+                : DATA_GRID_CELL_PAD,
+        },
+      }))
+      return defs
+    },
     [columns],
   )
 
   const table = useReactTable({
     data: filteredData,
     columns: columnDefs,
-    state: { globalFilter },
-    onGlobalFilterChange: setGlobalFilter,
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
+    ...(pagination ? { getPaginationRowModel: getPaginationRowModel() } : {}),
     getRowId: (row) => row.id,
   })
 
   const displayCount = searchKeys.length > 0 ? filteredData.length : data.length
 
   return (
-    <Card>
+    <DataPageCard>
       <DataPageToolbar
         search={search}
         onSearchChange={setSearch}
         searchPlaceholder={searchPlaceholder}
-        countLabel={`${displayCount} записей`}
+        countLabel={countLabel ?? `${displayCount} записей`}
       />
-      <DataGrid
+      <DataGridShell
         table={table}
         recordCount={filteredData.length}
         isLoading={isLoading}
         loadingMode="skeleton"
+        pagination={pagination}
         emptyMessage={
           <EmptyState
             icon={<InboxIcon className="size-4" />}
             title={emptyTitle}
             description={emptyDescription}
-            className="py-12"
+            className="border-0 py-12"
           />
         }
-        tableLayout={{ rowBorder: true, headerBackground: true }}
-      >
-        <DataGridContainer border={false}>
-          <DataGridTable />
-        </DataGridContainer>
-        {filteredData.length > 0 && <DataGridPagination className="px-5 pb-3" />}
-      </DataGrid>
-    </Card>
+      />
+    </DataPageCard>
   )
 }