refactor: update configuration and enhance skeleton components for improved UI consistency

Modified .npmrc to set a new store directory. Updated eslint configuration to ignore additional paths. Adjusted tsconfig to exclude specific components and refined the SectionCardsSkeleton and AnalyticsDashboardSkeleton for better layout and loading states. Removed the deprecated DashboardQuickActions component to streamline the codebase.
2026-07-09 18:23:53 +07:00
parent 3a9bd0dba3
commit 39f1295438
78 changed files with 8226 additions and 449 deletions
@@ -1,9 +1,9 @@
 import {
+  CSSProperties,
  memo,
  ReactNode,
  useCallback,
  useEffect,
-  useMemo,
  useState,
 } from "react"
 import { useDataGrid } from "@/components/reui/data-grid/data-grid"
@@ -11,6 +11,8 @@ import {
  DataGridTableBase,
  DataGridTableBody,
  DataGridTableEmpty,
+  DataGridTableFillBodyCell,
+  DataGridTableFillHeadCell,
  DataGridTableFoot,
  DataGridTableHead,
  DataGridTableHeadRow,
@@ -19,10 +21,12 @@ import {
  DataGridTableRenderedRow,
  DataGridTableRowSpacer,
  DataGridTableViewport,
+  getDataGridTableMergedHeaderGroups,
  getDataGridTableRowSections,
+  getPinningStyles,
+  hasDataGridTableRightPinnedColumns,
 } from "@/components/reui/data-grid/data-grid-table"
-import { DATA_GRID_MESSAGES_RU } from "@/lib/data-grid-defaults"
-import { flexRender, HeaderGroup, Row, Table } from "@tanstack/react-table"
+import { Column, flexRender, Row, Table } from "@tanstack/react-table"
 import {
  useVirtualizer,
  VirtualItem,
@@ -69,7 +73,6 @@ interface DataGridTableVirtualProps<TData> {

 interface VirtualBodyProps<TData> {
  table: Table<TData>
-  columnCount: number
  topRows: Row<TData>[]
  centerRows: Row<TData>[]
  bottomRows: Row<TData>[]
@@ -84,49 +87,140 @@ interface VirtualBodyProps<TData> {
  measureRowRef?: (element: HTMLTableRowElement | null) => void
 }

-function DataGridTableVirtualSpacer({
-  columnCount,
+function DataGridTableVirtualPinnedPlaceholderCell<TData>({
+  column,
+}: {
+  column: Column<TData>
+}) {
+  const { props } = useDataGrid()
+  const isPinned = column.getIsPinned()
+  const isLastLeftPinned = isPinned === "left" && column.getIsLastColumn("left")
+  const isFirstRightPinned =
+    isPinned === "right" && column.getIsFirstColumn("right")
+
+  return (
+    <td
+      aria-hidden="true"
+      style={{
+        ...(props.tableLayout?.columnsPinnable &&
+          column.getCanPin() &&
+          getPinningStyles(column)),
+        ...(props.tableLayout?.columnsResizable && {
+          width: `calc(var(--col-${column.id}-size) * 1px)`,
+        }),
+      }}
+      data-pinned={isPinned || undefined}
+      data-last-col={
+        isLastLeftPinned ? "left" : isFirstRightPinned ? "right" : undefined
+      }
+      className={cn(
+        "p-0",
+        props.tableLayout?.cellBorder && "border-e",
+        props.tableLayout?.columnsPinnable &&
+          column.getCanPin() &&
+          "data-pinned:bg-background data-pinned:isolate [&[data-pinned=left][data-last-col=left]]:shadow-[inset_-1px_0_0_0_var(--border)] [&[data-pinned=right][data-last-col=right]]:shadow-[inset_1px_0_0_0_var(--border)]"
+      )}
+    />
+  )
+}
+
+function DataGridTableVirtualUtilityRow<TData>({
+  table,
+  children,
+  centerCellClassName,
+  centerCellStyle,
+  rowClassName,
+  ariaHidden,
+}: {
+  table: Table<TData>
+  children: ReactNode
+  centerCellClassName?: string
+  centerCellStyle?: CSSProperties
+  rowClassName?: string
+  ariaHidden?: boolean
+}) {
+  const { props } = useDataGrid()
+  const leftVisibleColumns = table.getLeftVisibleLeafColumns()
+  const centerVisibleColumns = table.getCenterVisibleLeafColumns()
+  const rightVisibleColumns = table.getRightVisibleLeafColumns()
+  const hasRightPinnedColumns = hasDataGridTableRightPinnedColumns(table)
+
+  return (
+    <tr aria-hidden={ariaHidden || undefined} className={rowClassName}>
+      {leftVisibleColumns.map((column) => (
+        <DataGridTableVirtualPinnedPlaceholderCell
+          column={column}
+          key={column.id}
+        />
+      ))}
+      <td
+        colSpan={Math.max(centerVisibleColumns.length, 1)}
+        className={centerCellClassName}
+        style={centerCellStyle}
+      >
+        {children}
+      </td>
+      {props.tableLayout?.columnsResizable && hasRightPinnedColumns ? (
+        <DataGridTableFillBodyCell />
+      ) : null}
+      {rightVisibleColumns.map((column) => (
+        <DataGridTableVirtualPinnedPlaceholderCell
+          column={column}
+          key={column.id}
+        />
+      ))}
+      {props.tableLayout?.columnsResizable && !hasRightPinnedColumns ? (
+        <DataGridTableFillBodyCell />
+      ) : null}
+    </tr>
+  )
+}
+
+function DataGridTableVirtualSpacer<TData>({
+  table,
  height,
 }: {
-  columnCount: number
+  table: Table<TData>
  height: number
 }) {
  if (height <= 0) return null

  return (
-    <tr aria-hidden="true">
-      <td colSpan={columnCount} style={{ height, padding: 0 }} />
-    </tr>
+    <DataGridTableVirtualUtilityRow
+      table={table}
+      ariaHidden
+      centerCellClassName="p-0"
+      centerCellStyle={{ height, padding: 0 }}
+    >
+      {null}
+    </DataGridTableVirtualUtilityRow>
  )
 }

-function DataGridTableVirtualStatusRow({
+function DataGridTableVirtualStatusRow<TData>({
+  table,
  children,
  className,
-  columnCount,
 }: {
+  table: Table<TData>
  children: ReactNode
  className?: string
-  columnCount: number
 }) {
  return (
-    <tr>
-      <td
-        colSpan={columnCount}
-        className={cn(
-          "text-muted-foreground py-4 text-center text-sm",
-          className
-        )}
-      >
-        {children}
-      </td>
-    </tr>
+    <DataGridTableVirtualUtilityRow
+      table={table}
+      centerCellClassName={cn(
+        "text-muted-foreground py-4 text-center text-sm",
+        className
+      )}
+    >
+      {children}
+    </DataGridTableVirtualUtilityRow>
  )
 }

 function DataGridTableVirtualBody<TData>({
  table,
-  columnCount,
  topRows,
  centerRows,
  bottomRows,
@@ -179,7 +273,7 @@ function DataGridTableVirtualBody<TData>({
      renderedRows.push(
        <DataGridTableVirtualSpacer
          key="virtual-spacer-start"
-          columnCount={columnCount}
+          table={table}
          height={leadingSpacerHeight}
        />
      )
@@ -203,7 +297,7 @@ function DataGridTableVirtualBody<TData>({
      renderedRows.push(
        <DataGridTableVirtualSpacer
          key="virtual-spacer-end"
-          columnCount={columnCount}
+          table={table}
          height={trailingSpacerHeight}
        />
      )
@@ -216,10 +310,7 @@ function DataGridTableVirtualBody<TData>({

  if (showFetchingRow) {
    renderedRows.push(
-      <DataGridTableVirtualStatusRow
-        key="virtual-status-loading"
-        columnCount={columnCount}
-      >
+      <DataGridTableVirtualStatusRow key="virtual-status-loading" table={table}>
        <div className="flex items-center justify-center gap-2">
          <Spinner className="size-4 opacity-60" />
          {loadingMoreMessage}
@@ -232,7 +323,7 @@ function DataGridTableVirtualBody<TData>({
    renderedRows.push(
      <DataGridTableVirtualStatusRow
        key="virtual-status-complete"
-        columnCount={columnCount}
+        table={table}
        className="py-3 text-xs"
      >
        {allRowsLoadedMessage}
@@ -280,13 +371,12 @@ function DataGridTableVirtual<TData>({
  virtualizerOptions,
 }: DataGridTableVirtualProps<TData>) {
  const { table, props } = useDataGrid()
+  const mergedHeaderGroups = getDataGridTableMergedHeaderGroups(table)
+  const hasRightPinnedColumns = hasDataGridTableRightPinnedColumns(table)
  const { topRows, centerRows, bottomRows } = getDataGridTableRowSections(
    table,
    props.tableLayout?.rowsPinnable
  )
-  const columnCount =
-    table.getVisibleFlatColumns().length +
-    (props.tableLayout?.columnsResizable ? 1 : 0)
  const isInfiniteMode = typeof onFetchMore === "function"
  const [viewportElements, setViewportElements] =
    useState<DataGridTableVirtualScrollElements>({
@@ -305,9 +395,9 @@ function DataGridTableVirtual<TData>({

  const isVirtualizationEnabled = virtualizerOptions?.enabled !== false
  const loadingMoreMessage =
-    props.fetchingMoreMessage || props.loadingMessage || DATA_GRID_MESSAGES_RU.loadingMessage
+    props.fetchingMoreMessage || props.loadingMessage || "Loading..."
  const allRowsLoadedMessage =
-    props.allRowsLoadedMessage || DATA_GRID_MESSAGES_RU.allRecordsLoadedMessage
+    props.allRowsLoadedMessage || "All records loaded"

  const handleViewportRef = useCallback((node: HTMLDivElement | null) => {
    setViewportElements({
@@ -371,10 +461,7 @@ function DataGridTableVirtual<TData>({
    isVirtualizationEnabled && customMeasureElement
      ? virtualizer.measureElement
      : undefined
-  const resolvedFetchMoreOffset = useMemo(
-    () => Math.max(0, fetchMoreOffset),
-    [fetchMoreOffset]
-  )
+  const resolvedFetchMoreOffset = Math.max(0, fetchMoreOffset)

  useEffect(() => {
    if (
@@ -416,29 +503,21 @@ function DataGridTableVirtual<TData>({
      <DataGridTableBase>
        {renderHeader && (
          <DataGridTableHead>
-            {table
-              .getHeaderGroups()
-              .map((headerGroup: HeaderGroup<TData>, index) => (
-                <DataGridTableHeadRow headerGroup={headerGroup} key={index}>
-                  {headerGroup.headers.map((header, hIndex) => {
+            {mergedHeaderGroups.map((headerGroup) => (
+              <DataGridTableHeadRow key={headerGroup.id} rowId={headerGroup.id}>
+                {headerGroup.headers
+                  .filter((header) => header.column.getIsPinned() !== "right")
+                  .map((header) => {
                    const { column } = header

                    return (
-                      <DataGridTableHeadRowCell header={header} key={hIndex}>
-                        {header.isPlaceholder ? null : props.tableLayout
-                            ?.columnsResizable && column.getCanResize() ? (
-                          <div className="truncate">
-                            {flexRender(
+                      <DataGridTableHeadRowCell header={header} key={header.id}>
+                        {header.isPlaceholder
+                          ? null
+                          : flexRender(
                              header.column.columnDef.header,
                              header.getContext()
                            )}
-                          </div>
-                        ) : (
-                          flexRender(
-                            header.column.columnDef.header,
-                            header.getContext()
-                          )
-                        )}
                        {props.tableLayout?.columnsResizable &&
                          column.getCanResize() && (
                            <DataGridTableHeadRowCellResize header={header} />
@@ -446,8 +525,36 @@ function DataGridTableVirtual<TData>({
                      </DataGridTableHeadRowCell>
                    )
                  })}
-                </DataGridTableHeadRow>
-              ))}
+                {props.tableLayout?.columnsResizable &&
+                hasRightPinnedColumns ? (
+                  <DataGridTableFillHeadCell />
+                ) : null}
+                {headerGroup.headers
+                  .filter((header) => header.column.getIsPinned() === "right")
+                  .map((header) => {
+                    const { column } = header
+
+                    return (
+                      <DataGridTableHeadRowCell header={header} key={header.id}>
+                        {header.isPlaceholder
+                          ? null
+                          : flexRender(
+                              header.column.columnDef.header,
+                              header.getContext()
+                            )}
+                        {props.tableLayout?.columnsResizable &&
+                          column.getCanResize() && (
+                            <DataGridTableHeadRowCellResize header={header} />
+                          )}
+                      </DataGridTableHeadRowCell>
+                    )
+                  })}
+                {props.tableLayout?.columnsResizable &&
+                !hasRightPinnedColumns ? (
+                  <DataGridTableFillHeadCell />
+                ) : null}
+              </DataGridTableHeadRow>
+            ))}
          </DataGridTableHead>
        )}

@@ -459,7 +566,6 @@ function DataGridTableVirtual<TData>({
        <DataGridTableBody>
          <MemoizedVirtualBody
            table={table}
-            columnCount={columnCount}
            topRows={topRows}
            centerRows={centerRows}
            bottomRows={bottomRows}