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

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

@@ -36,7 +36,6 @@ interface CompactDataGridProps<T extends { id: string }> {
   emptyDescription?: string
   onRowClick?: (row: T) => void
   getExpandedContent?: (row: T) => ReactNode
-  compact?: boolean
 }
 
 function CompactDataGrid<T extends { id: string }>({
@@ -47,12 +46,7 @@ function CompactDataGrid<T extends { id: string }>({
   emptyDescription,
   onRowClick,
   getExpandedContent,
-  compact = false,
 }: CompactDataGridProps<T>) {
-  const pad = compact ? "py-2" : DATA_GRID_CELL_PAD
-  const padFirst = compact ? "pl-4 py-2" : DATA_GRID_CELL_PAD_FIRST
-  const padLast = compact ? "pr-4 py-2" : DATA_GRID_CELL_PAD_LAST
-
   const columnDefs = useMemo<ColumnDef<T>[]>(
     () =>
       columns.map((col, index) => ({
@@ -67,16 +61,24 @@ function CompactDataGrid<T extends { id: string }>({
           headerTitle: col.header,
           headerClassName:
             col.headerClassName ??
-            (index === 0 ? padFirst : index === columns.length - 1 ? padLast : pad),
+            (index === 0
+              ? DATA_GRID_CELL_PAD_FIRST
+              : index === columns.length - 1
+                ? DATA_GRID_CELL_PAD_LAST
+                : DATA_GRID_CELL_PAD),
           cellClassName:
             col.cellClassName ??
-            (index === 0 ? padFirst : index === columns.length - 1 ? padLast : pad),
+            (index === 0
+              ? DATA_GRID_CELL_PAD_FIRST
+              : index === columns.length - 1
+                ? DATA_GRID_CELL_PAD_LAST
+                : DATA_GRID_CELL_PAD),
           ...(getExpandedContent && index === 0
             ? { expandedContent: getExpandedContent }
             : {}),
         },
       })),
-    [columns, getExpandedContent, pad, padFirst, padLast],
+    [columns, getExpandedContent],
   )
 
   const table = useReactTable({

components/data-grids/dashboard-active-probes-data-grid.tsx

@@ -180,7 +180,6 @@ function DashboardActiveProbesDataGrid({
     <CompactDataGrid
       data={probes}
       columns={columns}
-      compact
       isLoading={isLoading}
       emptyTitle={emptyTitle}
       emptyDescription={emptyDescription}

components/data-grids/settings-access-summary-data-grid.tsx

@@ -159,7 +159,6 @@ function SettingsAccessSummaryDataGrid({
     <CompactDataGrid
       data={users}
       columns={columns}
-      compact
       emptyTitle="Нет пользователей"
     />
   )

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

@@ -16,7 +16,11 @@ const DEFAULT_DATA_GRID_CLASS_NAMES: NonNullable<DataGridProps<object>["tableCla
   bodyRow: "group/row",
 }
 
-const DATA_GRID_CONTAINER_CLASS = "rounded-none border-0"
+const DATA_GRID_CONTAINER_CLASS = "w-full rounded-none border-0"
+
+const DATA_PAGE_CARD_CLASS = "flex w-full flex-col overflow-hidden py-0 gap-0"
+
+const DATA_PAGE_TOOLBAR_CLASS = "flex items-center gap-3 px-5 py-3 border-b flex-wrap"
 
 export {
   DATA_GRID_CELL_PAD,
@@ -25,4 +29,6 @@ export {
   DEFAULT_DATA_GRID_LAYOUT,
   DEFAULT_DATA_GRID_CLASS_NAMES,
   DATA_GRID_CONTAINER_CLASS,
+  DATA_PAGE_CARD_CLASS,
+  DATA_PAGE_TOOLBAR_CLASS,
 }

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

@@ -42,6 +42,7 @@ function DataGridShell<TData extends object>({
 }: DataGridShellProps<TData>) {
   return (
     <DataGrid
+      className="w-full"
       table={table}
       recordCount={recordCount}
       isLoading={isLoading}

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

@@ -57,9 +57,9 @@ function SnapshotErrorCell({ error, className }: { error?: string; className?: s
 }
 
 function SnapshotDataGrid<T extends SnapshotRow>(
-  props: Omit<CompactDataGridProps<T>, "compact">,
+  props: CompactDataGridProps<T>,
 ) {
-  return <CompactDataGrid {...props} compact />
+  return <CompactDataGrid {...props} />
 }
 
 function TrafficSnapshotGrid({ servers }: { servers: TrafficServerSnapshot[] }) {

components/data-page-card.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from "react"
 import { Card } from "@/components/ui/card"
+import { DATA_PAGE_CARD_CLASS } from "@/components/data-grids/shared/data-grid-layout"
 import { cn } from "@/lib/utils"
 
 interface DataPageCardProps {
@@ -9,7 +10,7 @@ interface DataPageCardProps {
 
 function DataPageCard({ children, className }: DataPageCardProps) {
   return (
-    <Card className={cn("overflow-hidden py-0 gap-0", className)}>
+    <Card className={cn(DATA_PAGE_CARD_CLASS, className)}>
       {children}
     </Card>
   )

components/data-page-toolbar.tsx

@@ -14,6 +14,21 @@ import {
   type FilterFieldConfig,
 } from "@/components/reui/filters"
 import { SegmentedControl } from "@/components/form-kit"
+import { DATA_PAGE_TOOLBAR_CLASS } from "@/components/data-grids/shared/data-grid-layout"
+
+function DataPageToolbarFrame({
+  children,
+  className,
+}: {
+  children: ReactNode
+  className?: string
+}) {
+  return (
+    <div className={cn(DATA_PAGE_TOOLBAR_CLASS, className)}>
+      {children}
+    </div>
+  )
+}
 
 interface DataPageToolbarProps<T extends string = string> {
   search?: string
@@ -45,7 +60,7 @@ function DataPageToolbar<T extends string = string>({
   className,
 }: DataPageToolbarProps<T>) {
   return (
-    <div className={cn("flex items-center gap-3 px-5 py-3 border-b flex-wrap", className)}>
+    <DataPageToolbarFrame className={className}>
       {segmented && (
         <SegmentedControl
           value={segmented.value}
@@ -77,8 +92,8 @@ function DataPageToolbar<T extends string = string>({
         <span className="text-sm text-muted-foreground ml-auto">{countLabel}</span>
       )}
       {actions}
-    </div>
+    </DataPageToolbarFrame>
   )
 }
 
-export { DataPageToolbar, type DataPageToolbarProps }
+export { DataPageToolbar, DataPageToolbarFrame, type DataPageToolbarProps }