From e5dc483d438396db036c7d61c72ed654a14dfd9c Mon Sep 17 00:00:00 2001
From: Denozordec <shatskiy.blog@gmail.com>
Date: Thu, 25 Jun 2026 17:43:17 +0700
Subject: [PATCH] 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        |  18 +--
 .../src/components/data-table-pagination.tsx  | 112 +++++++++++-------
 .../web/src/components/data-table-toolbar.tsx |  36 ++----
 packages/ui/src/components/tabs.tsx           |  10 +-
 4 files changed, 96 insertions(+), 80 deletions(-)

diff --git a/apps/web/src/components/chart-card.tsx b/apps/web/src/components/chart-card.tsx
index c3c0d4a..3a2604b 100644
--- a/apps/web/src/components/chart-card.tsx
+++ b/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">
-            <TabsList>
-              <TabsTrigger value="chart">{chartTabLabel}</TabsTrigger>
-              <TabsTrigger value="table">{tableTabLabel}</TabsTrigger>
-            </TabsList>
-            <TabsContent value="chart" className="pt-4">
+          <Tabs defaultValue="chart" className="w-full flex-col gap-6">
+            <div className="flex items-center justify-between gap-2">
+              <TabsList>
+                <TabsTrigger value="chart">{chartTabLabel}</TabsTrigger>
+                <TabsTrigger value="table">{tableTabLabel}</TabsTrigger>
+              </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>
diff --git a/apps/web/src/components/data-table-pagination.tsx b/apps/web/src/components/data-table-pagination.tsx
index 8913e02..0d072f2 100644
--- a/apps/web/src/components/data-table-pagination.tsx
+++ b/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 pages = buildPageRange(pageIndex + 1, pageCount)
+  const total = table.getFilteredRowModel().rows.length
+  const from = total === 0 ? 0 : pageIndex * pageSize + 1
+  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}`
-          : `Всего: ${table.getFilteredRowModel().rows.length}`}
+          ? `Выбрано: ${selectedCount} из ${total}`
+          : `${from}–${to} из ${total}`}
       </div>
-      <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>
-          {pages.map((page, idx) =>
-            page === 'ellipsis' ? (
-              <PaginationItem key={`ellipsis-${idx}`}>
-                <PaginationEllipsis />
+      <div className="flex items-center gap-6">
+        <div className="flex items-center gap-2">
+          <span className="text-muted-foreground">{pageSizeLabel}</span>
+          <Select
+            value={String(pageSize)}
+            onValueChange={(val) => table.setPageSize(Number(val))}
+          >
+            <SelectTrigger className="h-8 w-20">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {pageSizeOptions.map((size) => (
+                <SelectItem key={size} value={String(size)}>
+                  {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>
-            ) : (
-              <PaginationItem key={page}>
-                <PaginationLink
-                  isActive={page === pageIndex + 1}
-                  onClick={() => table.setPageIndex(page - 1)}
-                >
-                  {page}
-                </PaginationLink>
+              {buildPageRange(pageIndex + 1, pageCount).map((page, idx) =>
+                page === 'ellipsis' ? (
+                  <PaginationItem key={`ellipsis-${idx}`}>
+                    <PaginationEllipsis />
+                  </PaginationItem>
+                ) : (
+                  <PaginationItem key={page}>
+                    <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>
-            ),
-          )}
-          <PaginationItem>
-            <PaginationNext
-              text="Вперёд"
-              onClick={() => table.nextPage()}
-              aria-disabled={!table.getCanNextPage()}
-              className={!table.getCanNextPage() ? 'pointer-events-none opacity-50' : undefined}
-            />
-          </PaginationItem>
-        </PaginationContent>
-      </Pagination>
+            </PaginationContent>
+          </Pagination>
+        )}
+      </div>
     </div>
   )
 }
diff --git a/apps/web/src/components/data-table-toolbar.tsx b/apps/web/src/components/data-table-toolbar.tsx
index 0f6f2a4..918ed51 100644
--- a/apps/web/src/components/data-table-toolbar.tsx
+++ b/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={
-              <AppButton variant="outline" size="sm">
-                <ColumnsIcon data-icon="inline-start" />
-                Колонки
-              </AppButton>
-            }
-          />
+            render={<AppButton variant="outline" size="sm" />}
+          >
+            <ColumnsIcon data-icon="inline-start" />
+            Колонки
+          </DropdownMenuTrigger>
           <DropdownMenuContent align="end" className="w-44">
             <DropdownMenuLabel>Видимость</DropdownMenuLabel>
             {columns.map((column) => (
@@ -90,12 +86,10 @@ export function DataTableToolbar<TData>({
         </DropdownMenu>
         <DropdownMenu>
           <DropdownMenuTrigger
-            render={
-              <AppButton variant="outline" size="sm">
-                Плотность
-              </AppButton>
-            }
-          />
+            render={<AppButton variant="outline" size="sm" />}
+          >
+            Плотность
+          </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>
diff --git a/packages/ui/src/components/tabs.tsx b/packages/ui/src/components/tabs.tsx
index 5dbd1de..4fe5c11 100644
--- a/packages/ui/src/components/tabs.tsx
+++ b/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}