feat(web/default): unified UI overhaul — Base UI migration, theme presets, rankings dashboard, and table toolbar refactor (#4633)

* 🎨 feat(web/default): add shadcn-style theme presets, radius prefs, and fix selection badges Integrate the qn-platform–style OKLCH color system into the default frontend while keeping the existing blue-tinted dark tokens for the default theme. Add [data-theme-preset] palettes for seven named presets plus the default zinc-like scale, define [data-theme-radius] overrides so user radius beats preset --radius, and align the Tailwind @custom-variant dark helper with .dark usage. Introduce ThemeCustomizationProvider to own preset and radius state, persist choices in cookies (theme-preset, theme-radius), and sync data-theme-preset / data-theme-radius on <html>. Wrap the tree in main.tsx. Extend ConfigDrawer with theme preset swatches (scoped data-theme-preset) and radius previews wired to context; refactor swatch/card markup so selected CircleCheck badges sit outside clipped rows (remove outer overflow-hidden that hid the centered checkmark). Add i18n keys for preset names, radius, and accessibility labels across en, zh, fr, ja, ru, vi. * 🎨 fix(web): align segmented controls with theme radius tokens - Replace hard-coded inner pill radii (rounded-[5px]) on dashboard chart toolbars with radius-md so the active state follows --radius when users change Radius in Theme Settings. - Use nested radii consistent with TabsList/TabsTrigger: outer rounded-lg (var(--radius)) and inner rounded-md (calc(var(--radius) - 2px)) so the track and active thumb stay concentric at small scales (e.g. 0.3rem) instead of a squared “focus” block inside a rounded shell. - Apply the same pattern to pricing SegmentedControl and the segmented groups in consumption-distribution-chart, model-charts, and user-charts. Verified: bun run typecheck (web/default) * ✨ feat(pricing): enrich model details with uptime sparkline and API documentation Add a compact 30-day uptime sparkline (OpenRouter-style bars + aggregate %) with per-day tooltips, surface it in a status row under quick stats and in the per-group performance table, and extend mock data so uptime series are stable and optionally scoped by group. Introduce an API tab with Shiki-highlighted code samples (cURL, Python, TypeScript, JavaScript), endpoint-type switching, authentication guidance, a supported-parameters table, and mock per-group RPM/TPM/RPD limits. Infer vendor, tokenizer, license, and data-retention hints for a provider & data privacy card on the Overview tab (capabilities/modalities stay with model identity; rate limits stay with the API tab). Update i18n for all new user-facing strings across en, zh, fr, ja, ru, and vi. * 🏆 feat(rankings): add comprehensive rankings dashboard Add a mock-data powered rankings experience with period tabs, model, app, and vendor leaderboards, market share and history charts, movers, new releases, and per-category sections while backend analytics are pending. Link ranked models to pricing details and ranked vendors to filtered pricing results, and include localized copy for all supported frontend locales. * fix(theme): correct theme preset selection state - update Base UI Radio selectors to use data-checked/data-unchecked states. - fix unchecked theme options still showing selected indicators. - isolate the default theme preview tokens to prevent preset changes from leaking into it. * fix(setup): correct usage mode radio state - use Base UI data-checked/data-unchecked states for RadioGroup styling. - hide radio indicators when options are unchecked to avoid setup page display issues. - drive usage mode card and icon selection styles from Base UI state. * fix(auth): submit sign-in and sign-up forms * 🎨 refactor: Align default theme with shadcn Base Nova and prune legacy customization Migrate shadcn UI to Base UI primitives via CLI (`base-nova` / `components.json`) and reinstall full component registry with `--overwrite`, including Hugeicons-backed widgets and newly added registry components. - Remove custom multi-preset/theme-radius system (`ThemeCustomizationProvider`, cookies, preset UI from config drawer); rely on official semantic CSS tokens + light/dark only. - Replace `theme.css` with shadcn’s documented neutral `:root`/`.dark` palette and `@theme inline` mappings (plus skeleton token vars for existing shimmer usage). - Update global styles for Base UI: collapsible animation uses `--collapsible-panel-height`; clarify scroll-lock override comment. Application compatibility: - Keep minimal shims where app code diverged from official APIs (popover collision props, combobox legacy `options` callers, Spinner prop typing). - Switch interactive styling from Radix-era `data-state` / `--radix-*` selectors to Base UI semantics (`data-open`, `data-popup-open`, `data-panel-open`, `--anchor-width`, etc.) Tooling / docs / build: - Rename Rsbuild vendor chunk grouping to `@base-ui` + transitive `@radix-ui`. - Refresh AGENTS.md / CLAUDE.md / classic→default sync skill for Base UI stack. - Bump `package.json` / lockfile for shadcn-postinstall deps (Hugeicons, chart stack, themes, etc.) Verified: `bun run typecheck` passes. Note: `bun run lint` still reports pre-existing hooks rule violations elsewhere; not addressed in this change. * 🎨 chore(web/default): unify table toolbar, relocate usage stats, refine filters - Refactor DataTableToolbar to a single wrapping flex row with a right-aligned action cluster (Reset / Search / View / Expand) for a cleaner Ant Design Pro–style filter bar; remove the dedicated stats row and the toolbar `stats` prop. - Move Common Logs summary badges (Usage / RPM / TPM) and the sensitive- data visibility toggle into the page header via CommonLogsHeaderActions and SectionPageLayout.Actions so the toolbar stays focused on filters. - Slim CommonLogsFilterBar props (no stats / preActions eye control). - Improve CompactDateTimeRangePicker: show minute-precision labels on the trigger (seconds omitted; aligns with datetime-local inputs); widen the trigger on sm+ breakpoints so the full range is visible without truncation; apply the same width in task logs filters. - Simplify DataTableViewOptions: text-only “View” trigger, no sliders icon. - Earlier layout tweak: extra top padding on SectionPageLayout scroll content so control focus rings are not clipped by overflow. * feat(web/default): Base UI migration and component foundation Migrate from Radix UI to Base UI, rewrite core UI primitives, update dependencies (recharts, date-fns, next-themes), add shadcn agent skill documentation, and refresh AI element components. This is the foundational work from the v2/localmain lineage that was not covered by the individual feature commits above. --------- Co-authored-by: t0ng7u <dev@aiass.cc> Co-authored-by: QuentinHsu <xuquentinyang@gmail.com>
2026-05-06 12:39:36 +08:00
parent dac55f0fde
commit 8b2b03d276
317 changed files with 19928 additions and 7065 deletions
@@ -88,7 +88,7 @@ export function DataTableBulkActions<TData>({
        break
      case 'Escape': {
        // Check if the Escape key came from a dropdown trigger or content
-        // We can't check dropdown state because Radix UI closes it before our handler runs
+        // We can't check dropdown state because the menu closes before our handler runs.
        const target = event.target as HTMLElement
        const activeElement = document.activeElement as HTMLElement

@@ -156,18 +156,20 @@ export function DataTableBulkActions<TData>({
          )}
        >
          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant='outline'
-                size='icon'
-                onClick={handleClearSelection}
-                className='size-6 rounded-full'
-                aria-label={t('Clear selection')}
-                title={t('Clear selection (Escape)')}
-              >
-                <X />
-                <span className='sr-only'>{t('Clear selection')}</span>
-              </Button>
+            <TooltipTrigger
+              render={
+                <Button
+                  variant='outline'
+                  size='icon'
+                  onClick={handleClearSelection}
+                  className='size-6 rounded-full'
+                  aria-label={t('Clear selection')}
+                  title={t('Clear selection (Escape)')}
+                />
+              }
+            >
+              <X />
+              <span className='sr-only'>{t('Clear selection')}</span>
            </TooltipTrigger>
            <TooltipContent>
              <p>{t('Clear selection (Escape)')}</p>
@@ -1,10 +1,10 @@
-import {
-  ArrowDownIcon,
-  ArrowUpIcon,
-  CaretSortIcon,
-  EyeNoneIcon,
-} from '@radix-ui/react-icons'
 import { type Column } from '@tanstack/react-table'
+import {
+  ArrowDown as ArrowDownIcon,
+  ArrowUp as ArrowUpIcon,
+  ChevronsUpDown as CaretSortIcon,
+  EyeOff as EyeNoneIcon,
+} from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { cn } from '@/lib/utils'
 import { Button } from '@/components/ui/button'
@@ -35,21 +35,23 @@ export function DataTableColumnHeader<TData, TValue>({
  return (
    <div className={cn('flex items-center space-x-2', className)}>
      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button
-            variant='ghost'
-            size='sm'
-            className='data-[state=open]:bg-accent -ms-3 h-8'
-          >
-            <span>{title}</span>
-            {column.getIsSorted() === 'desc' ? (
-              <ArrowDownIcon className='ms-2 h-4 w-4' />
-            ) : column.getIsSorted() === 'asc' ? (
-              <ArrowUpIcon className='ms-2 h-4 w-4' />
-            ) : (
-              <CaretSortIcon className='ms-2 h-4 w-4' />
-            )}
-          </Button>
+        <DropdownMenuTrigger
+          render={
+            <Button
+              variant='ghost'
+              size='sm'
+              className='data-popup-open:bg-accent -ms-3 h-8'
+            />
+          }
+        >
+          <span>{title}</span>
+          {column.getIsSorted() === 'desc' ? (
+            <ArrowDownIcon className='ms-2 h-4 w-4' />
+          ) : column.getIsSorted() === 'asc' ? (
+            <ArrowUpIcon className='ms-2 h-4 w-4' />
+          ) : (
+            <CaretSortIcon className='ms-2 h-4 w-4' />
+          )}
        </DropdownMenuTrigger>
        <DropdownMenuContent align='start'>
          <DropdownMenuItem onClick={() => column.toggleSorting(false)}>
@@ -0,0 +1,372 @@
+import * as React from 'react'
+import {
+  flexRender,
+  type ColumnDef,
+  type Row,
+  type Table as TanstackTable,
+} from '@tanstack/react-table'
+import { useMediaQuery } from '@/hooks'
+import { cn } from '@/lib/utils'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table'
+import { PageFooterPortal } from '@/components/layout'
+import { MobileCardList } from './mobile-card-list'
+import { DataTablePagination } from './pagination'
+import { TableEmpty } from './table-empty'
+import { TableSkeleton } from './table-skeleton'
+import { DataTableToolbar } from './toolbar'
+
+/**
+ * Pass-through configuration for the default {@link DataTableToolbar}.
+ * Pass `toolbar` (ReactNode) instead to fully replace the default toolbar.
+ */
+export type DataTablePageToolbarProps<TData> = Omit<
+  React.ComponentProps<typeof DataTableToolbar<TData>>,
+  'table'
+>
+
+export type DataTablePageProps<TData> = {
+  /**
+   * TanStack Table instance returned from `useReactTable`.
+   */
+  table: TanstackTable<TData>
+
+  /**
+   * Column definitions. Used for skeleton column count and empty-state colSpan.
+   */
+  columns: ColumnDef<TData, unknown>[]
+
+  /**
+   * Initial loading state — renders {@link TableSkeleton} or mobile skeleton.
+   */
+  isLoading?: boolean
+
+  /**
+   * Refetch / background loading — dims the table without removing rows.
+   */
+  isFetching?: boolean
+
+  /**
+   * Empty-state title (used for both desktop {@link TableEmpty} and mobile fallback).
+   */
+  emptyTitle?: string
+
+  /**
+   * Empty-state description.
+   */
+  emptyDescription?: string
+
+  /**
+   * Empty-state icon override (desktop only; mobile uses default Database icon).
+   */
+  emptyIcon?: React.ReactNode
+
+  /**
+   * Empty-state extra content — e.g. a "Create" button below the message.
+   */
+  emptyAction?: React.ReactNode
+
+  /**
+   * Custom toolbar node — fully replaces the default {@link DataTableToolbar}.
+   * Useful for layouts like "primary buttons + toolbar" or feature-specific filter cards.
+   * If provided, `toolbarProps` is ignored.
+   */
+  toolbar?: React.ReactNode
+
+  /**
+   * Pass-through props for the default {@link DataTableToolbar}.
+   * Ignored if `toolbar` is provided. Pass `null` to omit the toolbar entirely.
+   */
+  toolbarProps?: DataTablePageToolbarProps<TData> | null
+
+  /**
+   * Bulk action bar — typically a wrapped {@link DataTableBulkActions} component.
+   * Rendered only on desktop (mobile selection is uncommon).
+   */
+  bulkActions?: React.ReactNode
+
+  /**
+   * Custom mobile list node — fully replaces the default {@link MobileCardList}.
+   */
+  mobile?: React.ReactNode
+
+  /**
+   * Pass-through props for the default {@link MobileCardList}.
+   * Ignored if `mobile` is provided.
+   */
+  mobileProps?: {
+    getRowKey?: (row: Row<TData>) => string | number
+    getRowClassName?: (row: Row<TData>) => string | undefined
+  }
+
+  /**
+   * Disable the mobile-specific layout entirely — always renders desktop table.
+   * Useful for pages where the table is read-only and short.
+   */
+  hideMobile?: boolean
+
+  /**
+   * Row className resolver — applied to both desktop `TableRow` and mobile card.
+   * Composes with the default `data-state="selected"` styling on desktop.
+   * The `ctx.isMobile` flag is provided so consumers can return the
+   * appropriate variant (e.g. `DISABLED_ROW_DESKTOP` vs `DISABLED_ROW_MOBILE`)
+   * without having to re-call `useMediaQuery` themselves.
+   */
+  getRowClassName?: (
+    row: Row<TData>,
+    ctx: { isMobile: boolean }
+  ) => string | undefined
+
+  /**
+   * Custom desktop row renderer — replaces the default `<TableRow>`/`<TableCell>` mapping.
+   * Use for expanded rows, aggregate rows, click-on-row navigation, etc.
+   */
+  renderRow?: (row: Row<TData>) => React.ReactNode
+
+  /**
+   * Apply explicit column widths from `header.getSize()` to `<TableHead>`.
+   * Enable this when your column definitions include `size` and you want it honored.
+   * Off by default (TanStack Table assigns a default size of 150 to all columns
+   * which would unintentionally constrain layouts that don't define sizes).
+   */
+  applyHeaderSize?: boolean
+
+  /**
+   * Optional skeleton key prefix for stable React keys across re-renders.
+   */
+  skeletonKeyPrefix?: string
+
+  /**
+   * Whether to render pagination. Defaults to `true`.
+   */
+  showPagination?: boolean
+
+  /**
+   * Render pagination via `PageFooterPortal` (sticks to page footer).
+   * Defaults to `true`. Set `false` to render inline below the table.
+   */
+  paginationInFooter?: boolean
+
+  /**
+   * Extra content rendered between the table/mobile list and the pagination.
+   * E.g. summary stats, helper text.
+   */
+  afterTable?: React.ReactNode
+
+  /**
+   * Outer wrapper className (applied to the toolbar+table column).
+   */
+  className?: string
+
+  /**
+   * Desktop table container className (the bordered scroll wrapper).
+   */
+  tableClassName?: string
+
+  /**
+   * Desktop `<TableHeader>` className override.
+   * Useful for sticky headers (`'sticky top-0 z-10 bg-muted/30'`) on long lists.
+   */
+  tableHeaderClassName?: string
+}
+
+/**
+ * Unified table page wrapper. Encapsulates the canonical structure used across
+ * all list pages: toolbar → desktop table / mobile list → pagination, plus
+ * loading/empty states and an opt-in bulk action bar.
+ *
+ * Most pages should be expressible as:
+ * ```tsx
+ * <DataTablePage
+ *   table={table}
+ *   columns={columns}
+ *   isLoading={isLoading}
+ *   isFetching={isFetching}
+ *   emptyTitle={t('No X Found')}
+ *   toolbarProps={{ searchPlaceholder: t('Filter...'), filters }}
+ *   bulkActions={<MyBulkActions table={table} />}
+ * />
+ * ```
+ *
+ * For complex layouts (custom mobile, expanded rows, custom toolbar), use the
+ * `toolbar` / `mobile` / `renderRow` slots instead of the `*Props` variants.
+ */
+export function DataTablePage<TData>(props: DataTablePageProps<TData>) {
+  const isMobile = useMediaQuery('(max-width: 640px)')
+  const showMobile = isMobile && !props.hideMobile
+
+  const toolbarNode = renderToolbar(props)
+  const mobileNode = renderMobile(props, showMobile)
+  const desktopNode = renderDesktop(props, showMobile)
+
+  return (
+    <>
+      <div className={cn('space-y-2.5 sm:space-y-3', props.className)}>
+        {toolbarNode}
+        {mobileNode}
+        {desktopNode}
+        {props.afterTable}
+      </div>
+
+      {/* Bulk actions are typically a fixed-position toolbar; let the consumer
+          handle its own visibility, we just gate it to non-mobile. */}
+      {!showMobile && props.bulkActions}
+
+      {props.showPagination !== false &&
+        (props.paginationInFooter !== false ? (
+          <PageFooterPortal>
+            <DataTablePagination table={props.table} />
+          </PageFooterPortal>
+        ) : (
+          <div className='pt-2'>
+            <DataTablePagination table={props.table} />
+          </div>
+        ))}
+    </>
+  )
+}
+
+function renderToolbar<TData>(
+  props: DataTablePageProps<TData>
+): React.ReactNode {
+  if (props.toolbar !== undefined) {
+    return props.toolbar
+  }
+  if (props.toolbarProps === null) {
+    return null
+  }
+  if (props.toolbarProps) {
+    return <DataTableToolbar table={props.table} {...props.toolbarProps} />
+  }
+  return null
+}
+
+function renderMobile<TData>(
+  props: DataTablePageProps<TData>,
+  showMobile: boolean
+): React.ReactNode {
+  if (!showMobile) return null
+  if (props.mobile !== undefined) return props.mobile
+
+  const ownGetRowClassName = props.getRowClassName
+  const mobileGetRowClassName =
+    props.mobileProps?.getRowClassName ??
+    (ownGetRowClassName
+      ? (row: Row<TData>) => ownGetRowClassName(row, { isMobile: true })
+      : undefined)
+
+  return (
+    <MobileCardList
+      table={props.table}
+      isLoading={props.isLoading}
+      emptyTitle={props.emptyTitle}
+      emptyDescription={props.emptyDescription}
+      getRowKey={props.mobileProps?.getRowKey}
+      getRowClassName={mobileGetRowClassName}
+    />
+  )
+}
+
+function renderDesktop<TData>(
+  props: DataTablePageProps<TData>,
+  showMobile: boolean
+): React.ReactNode {
+  if (showMobile) return null
+
+  const rows = props.table.getRowModel().rows
+  const isFetchingOnly = props.isFetching && !props.isLoading
+
+  return (
+    <div
+      className={cn(
+        'overflow-hidden rounded-lg border transition-opacity duration-150',
+        isFetchingOnly && 'pointer-events-none opacity-60',
+        props.tableClassName
+      )}
+    >
+      <Table>
+        <TableHeader className={props.tableHeaderClassName}>
+          {props.table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id}>
+              {headerGroup.headers.map((header) => (
+                <TableHead
+                  key={header.id}
+                  colSpan={header.colSpan}
+                  style={
+                    props.applyHeaderSize
+                      ? { width: header.getSize() }
+                      : undefined
+                  }
+                >
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
+                </TableHead>
+              ))}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody>
+          {props.isLoading ? (
+            <TableSkeleton
+              table={props.table}
+              keyPrefix={props.skeletonKeyPrefix}
+            />
+          ) : rows.length === 0 ? (
+            <TableEmpty
+              colSpan={props.columns.length}
+              title={props.emptyTitle}
+              description={props.emptyDescription}
+              icon={props.emptyIcon}
+            >
+              {props.emptyAction}
+            </TableEmpty>
+          ) : (
+            rows.map((row) => {
+              if (props.renderRow) {
+                return props.renderRow(row)
+              }
+              return (
+                <DefaultRow
+                  key={row.id}
+                  row={row}
+                  className={props.getRowClassName?.(row, { isMobile: false })}
+                />
+              )
+            })
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  )
+}
+
+function DefaultRow<TData>({
+  row,
+  className,
+}: {
+  row: Row<TData>
+  className?: string
+}) {
+  return (
+    <TableRow
+      data-state={row.getIsSelected() && 'selected'}
+      className={className}
+    >
+      {row.getVisibleCells().map((cell) => (
+        <TableCell key={cell.id}>
+          {flexRender(cell.column.columnDef.cell, cell.getContext())}
+        </TableCell>
+      ))}
+    </TableRow>
+  )
+}
@@ -1,6 +1,6 @@
 import * as React from 'react'
-import { CheckIcon, PlusCircledIcon } from '@radix-ui/react-icons'
 import { type Column } from '@tanstack/react-table'
+import { Check as CheckIcon, PlusCircle as PlusCircledIcon } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { cn } from '@/lib/utils'
 import { Badge } from '@/components/ui/badge'
@@ -48,44 +48,46 @@ export function DataTableFacetedFilter<TData, TValue>({

  return (
    <Popover>
-      <PopoverTrigger asChild>
-        <Button variant='outline' size='sm' className='h-8 border-dashed'>
-          <PlusCircledIcon className='size-4' />
-          {title}
-          {selectedValues?.size > 0 && (
-            <>
-              <Separator orientation='vertical' className='mx-2 h-4' />
-              <Badge
-                variant='secondary'
-                className='rounded-sm px-1 font-normal lg:hidden'
-              >
-                {selectedValues.size}
-              </Badge>
-              <div className='hidden space-x-1 lg:flex'>
-                {selectedValues.size > 2 ? (
-                  <Badge
-                    variant='secondary'
-                    className='rounded-sm px-1 font-normal'
-                  >
-                    {selectedValues.size} {t('selected')}
-                  </Badge>
-                ) : (
-                  options
-                    .filter((option) => selectedValues.has(option.value))
-                    .map((option) => (
-                      <Badge
-                        variant='secondary'
-                        key={option.value}
-                        className='rounded-sm px-1 font-normal'
-                      >
-                        {t(option.label)}
-                      </Badge>
-                    ))
-                )}
-              </div>
-            </>
-          )}
-        </Button>
+      <PopoverTrigger
+        render={
+          <Button variant='outline' size='sm' className='h-8 border-dashed' />
+        }
+      >
+        <PlusCircledIcon className='size-4' />
+        {title}
+        {selectedValues?.size > 0 && (
+          <>
+            <Separator orientation='vertical' className='mx-2 h-4' />
+            <Badge
+              variant='secondary'
+              className='rounded-sm px-1 font-normal lg:hidden'
+            >
+              {selectedValues.size}
+            </Badge>
+            <div className='hidden space-x-1 lg:flex'>
+              {selectedValues.size > 2 ? (
+                <Badge
+                  variant='secondary'
+                  className='rounded-sm px-1 font-normal'
+                >
+                  {selectedValues.size} {t('selected')}
+                </Badge>
+              ) : (
+                options
+                  .filter((option) => selectedValues.has(option.value))
+                  .map((option) => (
+                    <Badge
+                      variant='secondary'
+                      key={option.value}
+                      className='rounded-sm px-1 font-normal'
+                    >
+                      {t(option.label)}
+                    </Badge>
+                  ))
+              )}
+            </div>
+          </>
+        )}
      </PopoverTrigger>
      <PopoverContent className='w-[200px] p-0' align='start'>
        <Command>
@@ -7,6 +7,7 @@ export { DataTableBulkActions } from './bulk-actions'
 export { TableSkeleton } from './table-skeleton'
 export { TableEmpty } from './table-empty'
 export { MobileCardList } from './mobile-card-list'
+export { DataTablePage, type DataTablePageProps } from './data-table-page'

 export const DISABLED_ROW_DESKTOP =
  'bg-muted/85 hover:bg-muted [&>td:first-child]:border-l-muted-foreground/35 dark:bg-zinc-700/55 dark:hover:bg-zinc-700/70 [&>td:first-child]:border-l-4 [&>td:first-child]:pl-1 dark:[&>td:first-child]:border-l-zinc-300/70'
@@ -6,6 +6,7 @@ import {
 } from '@tanstack/react-table'
 import { Database } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
+import { cn } from '@/lib/utils'
 import {
  Empty,
  EmptyDescription,
@@ -14,7 +15,6 @@ import {
  EmptyTitle,
 } from '@/components/ui/empty'
 import { Skeleton } from '@/components/ui/skeleton'
-import { cn } from '@/lib/utils'

 interface MobileCardListProps<TData> {
  table: Table<TData>
@@ -1,10 +1,10 @@
-import {
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  DoubleArrowLeftIcon,
-  DoubleArrowRightIcon,
-} from '@radix-ui/react-icons'
 import { type Table } from '@tanstack/react-table'
+import {
+  ChevronLeft as ChevronLeftIcon,
+  ChevronRight as ChevronRightIcon,
+  ChevronsLeft as DoubleArrowLeftIcon,
+  ChevronsRight as DoubleArrowRightIcon,
+} from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { cn, getPageNumbers } from '@/lib/utils'
 import { Button } from '@/components/ui/button'
@@ -1,82 +1,152 @@
-import { useState } from 'react'
-import { Cross2Icon } from '@radix-ui/react-icons'
+import * as React from 'react'
+import { useState, type ReactNode } from 'react'
 import { type Table } from '@tanstack/react-table'
-import { SlidersHorizontal } from 'lucide-react'
+import { ChevronDown, Loader2, X as Cross2Icon } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
-import { Badge } from '@/components/ui/badge'
+import { cn } from '@/lib/utils'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { DataTableFacetedFilter } from './faceted-filter'
 import { DataTableViewOptions } from './view-options'

-type DataTableToolbarProps<TData> = {
-  table: Table<TData>
-  searchPlaceholder?: string
-  searchKey?: string
-  filters?: {
-    columnId: string
-    title: string
-    options: {
-      label: string
-      value: string
-      icon?: React.ComponentType<{ className?: string }>
-      iconNode?: React.ReactNode
-      count?: number
-    }[]
-    singleSelect?: boolean
+type FilterDef = {
+  columnId: string
+  title: string
+  options: {
+    label: string
+    value: string
+    icon?: React.ComponentType<{ className?: string }>
+    iconNode?: React.ReactNode
+    count?: number
  }[]
-  /** Custom search component to replace the default input */
-  customSearch?: React.ReactNode
-  /** Additional search input to show alongside the main search */
-  additionalSearch?: React.ReactNode
-  /** Whether additional filters are active (for showing reset button) */
-  hasAdditionalFilters?: boolean
-  /** Callback when reset button is clicked (for clearing additional filters) */
-  onReset?: () => void
+  singleSelect?: boolean
 }

-export function DataTableToolbar<TData>({
-  table,
-  searchPlaceholder,
-  searchKey,
-  filters = [],
-  customSearch,
-  additionalSearch,
-  hasAdditionalFilters = false,
-  onReset,
-}: DataTableToolbarProps<TData>) {
+export type DataTableToolbarProps<TData> = {
+  table: Table<TData>
+  /**
+   * Placeholder for the default search input. Defaults to `t('Filter...')`.
+   */
+  searchPlaceholder?: string
+  /**
+   * Column id to filter on. When provided, the search input filters
+   * a specific column. When omitted, the search input updates the
+   * table's `globalFilter`.
+   */
+  searchKey?: string
+  /**
+   * Column-level filter chips (faceted multi-select / single-select).
+   */
+  filters?: FilterDef[]
+  /**
+   * Replaces the default search input entirely. Use when the primary
+   * "search" is something custom — e.g. a date-time range picker.
+   */
+  customSearch?: ReactNode
+  /**
+   * Extra inputs/selects displayed in the primary row alongside the
+   * search input and filter chips.
+   */
+  additionalSearch?: ReactNode
+  /**
+   * Whether non-table filters (e.g. `additionalSearch` or `expandable`
+   * inputs) are currently active. Controls Reset button visibility
+   * when no column filters are set.
+   */
+  hasAdditionalFilters?: boolean
+  /**
+   * Callback invoked when the user clicks Reset.
+   */
+  onReset?: () => void
+  /**
+   * Additional filter inputs hidden behind an Expand/Collapse toggle.
+   * Inputs flow inline with the primary row when expanded.
+   */
+  expandable?: ReactNode
+  /**
+   * When `expandable` is collapsed, highlights the toggle if any of
+   * the expandable inputs currently hold a value.
+   */
+  hasExpandedActiveFilters?: boolean
+  /**
+   * Custom action buttons rendered BEFORE the built-in
+   * Reset / Search / View buttons.
+   */
+  preActions?: ReactNode
+  /**
+   * Explicit "Search" / "Apply" callback. When provided the toolbar
+   * shows a primary Search button. Filters are committed only on click
+   * (form-mode workflow).
+   */
+  onSearch?: () => void
+  /**
+   * Loading state for the explicit Search button.
+   */
+  searchLoading?: boolean
+  /**
+   * Hide the View Options (column visibility) dropdown.
+   */
+  hideViewOptions?: boolean
+  /**
+   * Outer wrapper className override.
+   */
+  className?: string
+}
+
+/**
+ * Unified data-table filter panel — Ant Design Pro inspired.
+ *
+ * Layout (single flex-wrap row):
+ * - Filters (search input + additional inputs + filter chips + expandable
+ *   inputs) flow horizontally and wrap as needed.
+ * - The action cluster (Reset / Search / View / Expand) hugs the right
+ *   edge via `ms-auto`. When filters fill a row, the cluster naturally
+ *   wraps to the next line — still right-aligned — matching the
+ *   collapsed/expanded states from the user's reference design.
+ *
+ * No background panel, no row separators — relies on whitespace and the
+ * adjacent table border for visual hierarchy.
+ */
+export function DataTableToolbar<TData>(props: DataTableToolbarProps<TData>) {
  const { t } = useTranslation()
-  const [mobileFiltersOpen, setMobileFiltersOpen] = useState(false)
-  const resolvedSearchPlaceholder = searchPlaceholder ?? t('Filter...')
+  const [expanded, setExpanded] = useState(false)
+
+  const filters = props.filters ?? []
+  const hasExpandable = props.expandable != null
+  const hasSearch = props.onSearch != null
+
  const isFiltered =
-    table.getState().columnFilters.length > 0 ||
-    table.getState().globalFilter ||
-    hasAdditionalFilters
+    props.table.getState().columnFilters.length > 0 ||
+    !!props.table.getState().globalFilter ||
+    !!props.hasAdditionalFilters

-  const activeFilterCount =
-    table.getState().columnFilters.length + (hasAdditionalFilters ? 1 : 0)
-  const hasFilterContent = filters.length > 0 || additionalSearch != null
+  const placeholder = props.searchPlaceholder ?? t('Filter...')

-  const searchInput = searchKey ? (
+  const searchInput = props.searchKey ? (
    <Input
-      placeholder={resolvedSearchPlaceholder}
-      value={(table.getColumn(searchKey)?.getFilterValue() as string) ?? ''}
-      onChange={(event) =>
-        table.getColumn(searchKey)?.setFilterValue(event.target.value)
+      placeholder={placeholder}
+      value={
+        (props.table.getColumn(props.searchKey)?.getFilterValue() as string) ??
+        ''
      }
-      className='h-9 w-full sm:h-8 sm:w-[150px] lg:w-[250px]'
+      onChange={(event) =>
+        props.table
+          .getColumn(props.searchKey!)
+          ?.setFilterValue(event.target.value)
+      }
+      className='w-full sm:w-[200px] lg:w-[240px]'
    />
  ) : (
    <Input
-      placeholder={resolvedSearchPlaceholder}
-      value={table.getState().globalFilter ?? ''}
-      onChange={(event) => table.setGlobalFilter(event.target.value)}
-      className='h-9 w-full sm:h-8 sm:w-[150px] lg:w-[250px]'
+      placeholder={placeholder}
+      value={props.table.getState().globalFilter ?? ''}
+      onChange={(event) => props.table.setGlobalFilter(event.target.value)}
+      className='w-full sm:w-[200px] lg:w-[240px]'
    />
  )

  const filterChips = filters.map((filter) => {
-    const column = table.getColumn(filter.columnId)
+    const column = props.table.getColumn(filter.columnId)
    if (!column) return null
    return (
      <DataTableFacetedFilter
@@ -89,65 +159,82 @@ export function DataTableToolbar<TData>({
    )
  })

-  const resetButton = isFiltered ? (
+  const handleReset = () => {
+    props.table.resetColumnFilters()
+    props.table.setGlobalFilter('')
+    props.onReset?.()
+  }
+
+  // Reset: outline text-only for form mode (always visible, disabled when
+  // nothing to reset); ghost text + X for filter-as-you-type mode (only
+  // visible when active filters exist).
+  const resetButton = hasSearch ? (
+    <Button variant='outline' onClick={handleReset} disabled={!isFiltered}>
+      {t('Reset')}
+    </Button>
+  ) : isFiltered ? (
    <Button
      variant='ghost'
-      onClick={() => {
-        table.resetColumnFilters()
-        table.setGlobalFilter('')
-        onReset?.()
-      }}
-      className='h-8 px-2 lg:px-3'
+      onClick={handleReset}
+      className='text-muted-foreground hover:text-foreground gap-1 px-2'
    >
      {t('Reset')}
-      <Cross2Icon className='ms-2 h-4 w-4' />
+      <Cross2Icon />
+    </Button>
+  ) : null
+
+  const searchButton = hasSearch ? (
+    <Button onClick={props.onSearch} disabled={props.searchLoading}>
+      {props.searchLoading && <Loader2 className='animate-spin' />}
+      {t('Search')}
+    </Button>
+  ) : null
+
+  const viewOptionsNode = !props.hideViewOptions ? (
+    <DataTableViewOptions table={props.table} />
+  ) : null
+
+  const expandToggle = hasExpandable ? (
+    <Button
+      variant='ghost'
+      onClick={() => setExpanded((p) => !p)}
+      aria-expanded={expanded}
+      className={cn(
+        'text-muted-foreground hover:text-foreground gap-1 px-2',
+        props.hasExpandedActiveFilters &&
+          !expanded &&
+          'text-primary hover:text-primary'
+      )}
+    >
+      {expanded ? t('Collapse') : t('Expand')}
+      <ChevronDown
+        className={cn(
+          'size-3.5 transition-transform duration-200',
+          expanded && 'rotate-180'
+        )}
+      />
    </Button>
  ) : null

  return (
-    <div className='space-y-2'>
-      <div className='flex items-center gap-1.5 sm:gap-2'>
-        {/* Search input */}
-        {customSearch !== undefined ? customSearch : searchInput}
-
-        {/* Desktop: filters inline */}
-        {additionalSearch && (
-          <div className='hidden w-auto sm:block'>{additionalSearch}</div>
-        )}
-        <div className='hidden flex-wrap gap-2 sm:flex'>{filterChips}</div>
-        <div className='hidden sm:block'>{resetButton}</div>
-
-        {/* Mobile: filter toggle button */}
-        {hasFilterContent && (
-          <Button
-            variant='outline'
-            size='sm'
-            className='relative h-9 shrink-0 gap-1 px-2 sm:hidden'
-            onClick={() => setMobileFiltersOpen((v) => !v)}
-          >
-            <SlidersHorizontal className='h-3.5 w-3.5' />
-            {activeFilterCount > 0 && (
-              <Badge
-                variant='secondary'
-                className='h-4 min-w-4 rounded-full px-1 text-[10px] leading-none'
-              >
-                {activeFilterCount}
-              </Badge>
-            )}
-          </Button>
-        )}
-
-        <DataTableViewOptions table={table} />
-      </div>
-
-      {/* Mobile: collapsible filter area */}
-      {hasFilterContent && mobileFiltersOpen && (
-        <div className='bg-muted/30 flex flex-wrap items-center gap-2 rounded-lg border p-2 sm:hidden'>
-          {additionalSearch && <div className='w-full'>{additionalSearch}</div>}
-          {filterChips}
-          {resetButton}
-        </div>
+    <div
+      className={cn(
+        'flex flex-wrap items-center gap-2 sm:gap-3',
+        props.className
      )}
+    >
+      {props.customSearch !== undefined ? props.customSearch : searchInput}
+      {props.additionalSearch}
+      {filterChips}
+      {expanded && hasExpandable && props.expandable}
+
+      <div className='ms-auto flex shrink-0 items-center gap-1.5 sm:gap-2'>
+        {props.preActions}
+        {resetButton}
+        {searchButton}
+        {viewOptionsNode}
+        {expandToggle}
+      </div>
    </div>
  )
 }
@@ -1,5 +1,3 @@
-import { DropdownMenuTrigger } from '@radix-ui/react-dropdown-menu'
-import { MixerHorizontalIcon } from '@radix-ui/react-icons'
 import { type Table } from '@tanstack/react-table'
 import { useTranslation } from 'react-i18next'
 import { Button } from '@/components/ui/button'
@@ -7,8 +5,9 @@ import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
+  DropdownMenuGroup,
  DropdownMenuLabel,
-  DropdownMenuSeparator,
+  DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'

 type DataTableViewOptionsProps<TData> = {
@@ -21,37 +20,39 @@ export function DataTableViewOptions<TData>({
  const { t } = useTranslation()
  return (
    <DropdownMenu modal={false}>
-      <DropdownMenuTrigger asChild>
-        <Button
-          variant='outline'
-          size='sm'
-          className='ms-auto h-9 w-9 px-0 sm:h-8 sm:w-auto sm:px-3 lg:flex'
-        >
-          <MixerHorizontalIcon className='size-4' />
-          <span className='hidden sm:inline'>{t('View')}</span>
-        </Button>
+      <DropdownMenuTrigger
+        render={
+          <Button
+            variant='outline'
+            className='shrink-0'
+            aria-label={t('View')}
+          />
+        }
+      >
+        {t('View')}
      </DropdownMenuTrigger>
      <DropdownMenuContent align='end' className='w-[150px]'>
-        <DropdownMenuLabel>{t('Toggle columns')}</DropdownMenuLabel>
-        <DropdownMenuSeparator />
-        {table
-          .getAllColumns()
-          .filter(
-            (column) =>
-              typeof column.accessorFn !== 'undefined' && column.getCanHide()
-          )
-          .map((column) => {
-            return (
-              <DropdownMenuCheckboxItem
-                key={column.id}
-                className='capitalize'
-                checked={column.getIsVisible()}
-                onCheckedChange={(value) => column.toggleVisibility(!!value)}
-              >
-                {column.columnDef.meta?.label ?? column.id}
-              </DropdownMenuCheckboxItem>
+        <DropdownMenuGroup>
+          <DropdownMenuLabel>{t('Toggle columns')}</DropdownMenuLabel>
+          {table
+            .getAllColumns()
+            .filter(
+              (column) =>
+                typeof column.accessorFn !== 'undefined' && column.getCanHide()
            )
-          })}
+            .map((column) => {
+              return (
+                <DropdownMenuCheckboxItem
+                  key={column.id}
+                  className='capitalize'
+                  checked={column.getIsVisible()}
+                  onCheckedChange={(value) => column.toggleVisibility(!!value)}
+                >
+                  {column.columnDef.meta?.label ?? column.id}
+                </DropdownMenuCheckboxItem>
+              )
+            })}
+        </DropdownMenuGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  )