refactor: Enhance ChartCard and DataTable components by improving layout structure, adding pagination controls, and optimizing tab functionality for better user experience

apps/web/src/components/chart-card.tsx

@@ -42,17 +42,19 @@ export function ChartCard({
         {description && <AppCardDescription>{description}</AppCardDescription>}
         {action}
       </AppCardHeader>
-      <AppCardContent>
+      <AppCardContent className="pb-6">
         {hasTabs ? (
-          <Tabs defaultValue="chart">
+          <Tabs defaultValue="chart" className="w-full flex-col gap-6">
-            <TabsList>
+            <div className="flex items-center justify-between gap-2">
-              <TabsTrigger value="chart">{chartTabLabel}</TabsTrigger>
+              <TabsList>
-              <TabsTrigger value="table">{tableTabLabel}</TabsTrigger>
+                <TabsTrigger value="chart">{chartTabLabel}</TabsTrigger>
-            </TabsList>
+                <TabsTrigger value="table">{tableTabLabel}</TabsTrigger>
-            <TabsContent value="chart" className="pt-4">
+              </TabsList>
+            </div>
+            <TabsContent value="chart" className="mt-0">
               {chart}
             </TabsContent>
-            <TabsContent value="table" className="pt-4">
+            <TabsContent value="table" className="mt-0">
               {table}
             </TabsContent>
           </Tabs>

apps/web/src/components/data-table-pagination.tsx

@@ -8,10 +8,19 @@ import {
   PaginationNext,
   PaginationPrevious,
 } from '@cfdm/ui/components/pagination'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@cfdm/ui/components/select'
+import { pageSizeOptions } from '@/components/data-table-density'
 
 interface DataTablePaginationProps<TData> {
   table: Table<TData>
   selectedCount?: number
+  pageSizeLabel?: string
 }
 
 function buildPageRange(current: number, total: number): (number | 'ellipsis')[] {
@@ -31,57 +40,80 @@ function buildPageRange(current: number, total: number): (number | 'ellipsis')[]
 export function DataTablePagination<TData>({
   table,
   selectedCount,
+  pageSizeLabel = 'Строк',
 }: DataTablePaginationProps<TData>) {
-  const { pageIndex } = table.getState().pagination
+  const { pageIndex, pageSize } = table.getState().pagination
   const pageCount = table.getPageCount()
 
-  if (pageCount <= 1) return null
+  const total = table.getFilteredRowModel().rows.length
-
+  const from = total === 0 ? 0 : pageIndex * pageSize + 1
-  const pages = buildPageRange(pageIndex + 1, pageCount)
+  const to = Math.min((pageIndex + 1) * pageSize, total)
 
   return (
     <div className="flex flex-col items-center justify-between gap-4 px-4 py-3 text-sm sm:flex-row">
       <div className="text-muted-foreground tabular-nums">
         {selectedCount != null && selectedCount > 0
-          ? `Выбрано: ${selectedCount} из ${table.getFilteredRowModel().rows.length}`
+          ? `Выбрано: ${selectedCount} из ${total}`
-          : `Всего: ${table.getFilteredRowModel().rows.length}`}
+          : `${from}–${to} из ${total}`}
       </div>
-      <Pagination className="mx-0 w-auto">
+      <div className="flex items-center gap-6">
-        <PaginationContent>
+        <div className="flex items-center gap-2">
-          <PaginationItem>
+          <span className="text-muted-foreground">{pageSizeLabel}</span>
-            <PaginationPrevious
+          <Select
-              text="Назад"
+            value={String(pageSize)}
-              onClick={() => table.previousPage()}
+            onValueChange={(val) => table.setPageSize(Number(val))}
-              aria-disabled={!table.getCanPreviousPage()}
+          >
-              className={!table.getCanPreviousPage() ? 'pointer-events-none opacity-50' : undefined}
+            <SelectTrigger className="h-8 w-20">
-            />
+              <SelectValue />
-          </PaginationItem>
+            </SelectTrigger>
-          {pages.map((page, idx) =>
+            <SelectContent>
-            page === 'ellipsis' ? (
+              {pageSizeOptions.map((size) => (
-              <PaginationItem key={`ellipsis-${idx}`}>
+                <SelectItem key={size} value={String(size)}>
-                <PaginationEllipsis />
+                  {size}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        {pageCount > 1 && (
+          <Pagination className="mx-0 w-auto">
+            <PaginationContent>
+              <PaginationItem>
+                <PaginationPrevious
+                  text="Назад"
+                  onClick={() => table.previousPage()}
+                  aria-disabled={!table.getCanPreviousPage()}
+                  className={!table.getCanPreviousPage() ? 'pointer-events-none opacity-50' : undefined}
+                />
               </PaginationItem>
-            ) : (
+              {buildPageRange(pageIndex + 1, pageCount).map((page, idx) =>
-              <PaginationItem key={page}>
+                page === 'ellipsis' ? (
-                <PaginationLink
+                  <PaginationItem key={`ellipsis-${idx}`}>
-                  isActive={page === pageIndex + 1}
+                    <PaginationEllipsis />
-                  onClick={() => table.setPageIndex(page - 1)}
+                  </PaginationItem>
-                >
+                ) : (
-                  {page}
+                  <PaginationItem key={page}>
-                </PaginationLink>
+                    <PaginationLink
+                      isActive={page === pageIndex + 1}
+                      onClick={() => table.setPageIndex(page - 1)}
+                    >
+                      {page}
+                    </PaginationLink>
+                  </PaginationItem>
+                ),
+              )}
+              <PaginationItem>
+                <PaginationNext
+                  text="Вперёд"
+                  onClick={() => table.nextPage()}
+                  aria-disabled={!table.getCanNextPage()}
+                  className={!table.getCanNextPage() ? 'pointer-events-none opacity-50' : undefined}
+                />
               </PaginationItem>
-            ),
+            </PaginationContent>
-          )}
+          </Pagination>
-          <PaginationItem>
+        )}
-            <PaginationNext
+      </div>
-              text="Вперёд"
-              onClick={() => table.nextPage()}
-              aria-disabled={!table.getCanNextPage()}
-              className={!table.getCanNextPage() ? 'pointer-events-none opacity-50' : undefined}
-            />
-          </PaginationItem>
-        </PaginationContent>
-      </Pagination>
     </div>
   )
 }

apps/web/src/components/data-table-toolbar.tsx

@@ -13,13 +13,11 @@ import {
   DropdownMenuLabel,
   DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
-  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@cfdm/ui/components/dropdown-menu'
 import { AppButton } from '@/components/app-button'
 import {
   densityLabel,
-  pageSizeOptions,
   type Density,
 } from '@/components/data-table-density'
 
@@ -66,13 +64,11 @@ export function DataTableToolbar<TData>({
       <div className="flex items-center gap-2">
         <DropdownMenu>
           <DropdownMenuTrigger
-            render={
+            render={<AppButton variant="outline" size="sm" />}
-              <AppButton variant="outline" size="sm">
+          >
-                <ColumnsIcon data-icon="inline-start" />
+            <ColumnsIcon data-icon="inline-start" />
-                Колонки
+            Колонки
-              </AppButton>
+          </DropdownMenuTrigger>
-            }
-          />
           <DropdownMenuContent align="end" className="w-44">
             <DropdownMenuLabel>Видимость</DropdownMenuLabel>
             {columns.map((column) => (
@@ -90,12 +86,10 @@ export function DataTableToolbar<TData>({
         </DropdownMenu>
         <DropdownMenu>
           <DropdownMenuTrigger
-            render={
+            render={<AppButton variant="outline" size="sm" />}
-              <AppButton variant="outline" size="sm">
+          >
-                Плотность
+            Плотность
-              </AppButton>
+          </DropdownMenuTrigger>
-            }
-          />
           <DropdownMenuContent align="end" className="w-44">
             <DropdownMenuLabel>Плотность строк</DropdownMenuLabel>
             <DropdownMenuRadioGroup
@@ -108,18 +102,6 @@ export function DataTableToolbar<TData>({
                 </DropdownMenuRadioItem>
               ))}
             </DropdownMenuRadioGroup>
-            <DropdownMenuSeparator />
-            <DropdownMenuLabel>Строк на странице</DropdownMenuLabel>
-            <DropdownMenuRadioGroup
-              value={String(table.getState().pagination.pageSize)}
-              onValueChange={(val) => table.setPageSize(Number(val))}
-            >
-              {pageSizeOptions.map((size) => (
-                <DropdownMenuRadioItem key={size} value={String(size)}>
-                  {size}
-                </DropdownMenuRadioItem>
-              ))}
-            </DropdownMenuRadioGroup>
           </DropdownMenuContent>
         </DropdownMenu>
       </div>

packages/ui/src/components/tabs.tsx

@@ -11,9 +11,9 @@ function Tabs({
   return (
     <TabsPrimitive.Root
       data-slot="tabs"
-      data-orientation={orientation}
+      orientation={orientation}
       className={cn(
-        "group/tabs flex gap-2 data-horizontal:flex-col",
+        "group/tabs flex gap-2 data-[orientation=horizontal]:flex-col",
         className
       )}
       {...props}
@@ -22,7 +22,7 @@ function Tabs({
 }
 
 const tabsListVariants = cva(
-  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-[orientation=horizontal]/tabs:h-8 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none",
   {
     variants: {
       variant: {
@@ -56,10 +56,10 @@ function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
     <TabsPrimitive.Tab
       data-slot="tabs-trigger"
       className={cn(
-        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
         "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
-        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
         className
       )}
       {...props}