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

components/data-grids/shared/data-grid-layout.ts

@@ -0,0 +1,28 @@
+import type { DataGridProps } from "@/components/reui/data-grid/data-grid"
+
+const DATA_GRID_CELL_PAD = "py-3"
+const DATA_GRID_CELL_PAD_FIRST = "pl-5 py-3"
+const DATA_GRID_CELL_PAD_LAST = "pr-4 py-3"
+
+const DEFAULT_DATA_GRID_LAYOUT: NonNullable<DataGridProps<object>["tableLayout"]> = {
+  rowBorder: true,
+  headerBackground: true,
+  headerBorder: true,
+  columnsResizable: false,
+}
+
+const DEFAULT_DATA_GRID_CLASS_NAMES: NonNullable<DataGridProps<object>["tableClassNames"]> = {
+  headerRow: "border-b border-border",
+  bodyRow: "group/row",
+}
+
+const DATA_GRID_CONTAINER_CLASS = "rounded-none border-0"
+
+export {
+  DATA_GRID_CELL_PAD,
+  DATA_GRID_CELL_PAD_FIRST,
+  DATA_GRID_CELL_PAD_LAST,
+  DEFAULT_DATA_GRID_LAYOUT,
+  DEFAULT_DATA_GRID_CLASS_NAMES,
+  DATA_GRID_CONTAINER_CLASS,
+}

components/data-grids/shared/data-grid-shell.tsx

@@ -0,0 +1,68 @@
+"use client"
+
+import type { ReactNode } from "react"
+import type { Table } from "@tanstack/react-table"
+import {
+  DataGrid,
+  DataGridContainer,
+  DataGridPagination,
+  DataGridTable,
+  type DataGridProps,
+} from "@/components/reui/data-grid"
+import {
+  DATA_GRID_CONTAINER_CLASS,
+  DEFAULT_DATA_GRID_CLASS_NAMES,
+  DEFAULT_DATA_GRID_LAYOUT,
+} from "@/components/data-grids/shared/data-grid-layout"
+
+interface DataGridShellProps<TData extends object> {
+  table: Table<TData>
+  recordCount: number
+  children?: ReactNode
+  pagination?: boolean
+  isLoading?: boolean
+  loadingMode?: DataGridProps<TData>["loadingMode"]
+  emptyMessage?: ReactNode
+  onRowClick?: DataGridProps<TData>["onRowClick"]
+  tableLayout?: DataGridProps<TData>["tableLayout"]
+  tableClassNames?: DataGridProps<TData>["tableClassNames"]
+}
+
+function DataGridShell<TData extends object>({
+  table,
+  recordCount,
+  children,
+  pagination = false,
+  isLoading,
+  loadingMode,
+  emptyMessage,
+  onRowClick,
+  tableLayout = DEFAULT_DATA_GRID_LAYOUT,
+  tableClassNames = DEFAULT_DATA_GRID_CLASS_NAMES,
+}: DataGridShellProps<TData>) {
+  return (
+    <DataGrid
+      table={table}
+      recordCount={recordCount}
+      isLoading={isLoading}
+      loadingMode={loadingMode}
+      emptyMessage={emptyMessage}
+      onRowClick={onRowClick}
+      tableLayout={tableLayout}
+      tableClassNames={tableClassNames}
+    >
+      {children ?? (
+        <>
+          <DataGridContainer border={false} className={DATA_GRID_CONTAINER_CLASS}>
+            <DataGridTable />
+          </DataGridContainer>
+          {pagination && recordCount > 0 && (
+            <DataGridPagination className="px-5 pb-3" />
+          )}
+        </>
+      )}
+    </DataGrid>
+  )
+}
+
+export { DataGridShell, type DataGridShellProps }

components/data-grids/shared/data-grid-sort-header.tsx

@@ -0,0 +1,51 @@
+"use client"
+
+import type { Column } from "@tanstack/react-table"
+import { cn } from "@/lib/utils"
+import { ArrowDownIcon, ArrowUpDownIcon, ArrowUpIcon } from "lucide-react"
+
+interface DataGridSortHeaderProps<TData> {
+  column: Column<TData, unknown>
+  title: string
+  className?: string
+}
+
+function DataGridSortHeader<TData>({
+  column,
+  title,
+  className,
+}: DataGridSortHeaderProps<TData>) {
+  const sorted = column.getIsSorted()
+  const canSort = column.getCanSort()
+
+  if (!canSort) {
+    return (
+      <span className={cn("text-xs font-medium text-muted-foreground", className)}>
+        {title}
+      </span>
+    )
+  }
+
+  return (
+    <button
+      type="button"
+      className={cn(
+        "inline-flex items-center gap-1.5 text-xs font-medium text-muted-foreground",
+        "hover:text-foreground transition-colors rounded-md -ml-1 px-1 py-0.5",
+        className,
+      )}
+      onClick={column.getToggleSortingHandler()}
+    >
+      {title}
+      {sorted === "asc" ? (
+        <ArrowUpIcon className="size-3 text-foreground" />
+      ) : sorted === "desc" ? (
+        <ArrowDownIcon className="size-3 text-foreground" />
+      ) : (
+        <ArrowUpDownIcon className="size-3 opacity-35" />
+      )}
+    </button>
+  )
+}
+
+export { DataGridSortHeader, type DataGridSortHeaderProps }