@allbluecn/admin-app 0.3.3 → 0.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allbluecn/admin-app",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "private": false,
   "license": "AGPL-3.0-or-later",
   "type": "module",
@@ -36,6 +36,8 @@
     "clsx": "^2.1.1",
     "cn": "^0.3.0",
     "date-fns": "^4.4.0",
+    "date-fns-tz": "^3.2.0",
+    "isomorphic-dompurify": "^3.22.0",
     "lucide-react": "^1.47.0",
     "motion": "^13.4.0",
     "next-themes": "^0.4.6",
@@ -75,8 +77,7 @@
     "typescript-eslint": "^8.70.1",
     "vite": "^8.3.3",
     "vitest": "5.0.0",
-    "wrangler": "^4.99.0",
-    "@allbluecn/ui": "0.1.0"
+    "wrangler": "^4.99.0"
   },
   "files": [
     "src",

package/src/components/admin/admin-user-menu.tsx

@@ -17,17 +17,17 @@
 
 import { LogOut } from "lucide-react";
 import { m } from '@/paraglide/messages.js'
-import { Badge } from "@allbluecn/ui/badge";
+import { Badge } from "@/components/ui/badge";
 import {
   SidebarMenu,
   SidebarMenuAction,
   SidebarMenuButton,
   SidebarMenuItem,
-} from "@allbluecn/ui/sidebar";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@allbluecn/ui/tooltip";
+} from "@/components/ui/sidebar";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { useRouter, useMatches } from "@tanstack/react-router";
 import { signOut, useSession } from "@/lib/auth-client";
-import { UserAvatar } from "@allbluecn/ui/components/user-avatar";
+import { UserAvatar } from "@/components/user-avatar";
 import type { AvatarConfig, ShapeType } from "@allbluecn/kernel";
 
 const ROLE_LABELS: Record<string, () => string> = {

package/src/components/admin/developer-log.tsx

@@ -4,7 +4,7 @@ import { Route } from '@/routes/_nav/developer-logs/route'
 import type { DeveloperLogEntry } from '@allbluecn/kernel'
 import { useQueryClient } from '@tanstack/react-query'
 import { useServerFn } from '@tanstack/react-start'
-import { toast } from '@allbluecn/ui/toast'
+import { toast } from '@/components/ui/toast'
 import {
   Plus,
   Pencil,
@@ -19,12 +19,12 @@ import {
   DialogHeader,
   DialogTitle,
   DialogFooter,
-} from '@allbluecn/ui/dialog'
-import { ConfirmDialog } from '@allbluecn/ui/components/confirm-dialog'
-import { Input } from '@allbluecn/ui/input'
-import { Textarea } from '@allbluecn/ui/textarea'
-import { Label } from '@allbluecn/ui/label'
-import { Button } from '@allbluecn/ui/button'
+} from '@/components/ui/dialog'
+import { ConfirmDialog } from '@/components/confirm-dialog'
+import { Input } from '@/components/ui/input'
+import { Textarea } from '@/components/ui/textarea'
+import { Label } from '@/components/ui/label'
+import { Button } from '@/components/ui/button'
 import { createDeveloperLogFn, updateDeveloperLogFn, deleteDeveloperLogFn } from '@/server/serverFns/developer-logs'
 import { autoGenerateLogsFn, backfillLogDetailsFn } from '@/server/serverFns/developer-log-auto-generate'
 

package/src/components/ai-memory/memory-facts-panel.tsx

@@ -26,21 +26,21 @@ import {
 } from "lucide-react"
 
 import { m } from "@/paraglide/messages.js"
-import { formatTimestamp } from "@allbluecn/ui/lib/datetime"
-import { toast } from "@allbluecn/ui/toast"
-import { Alert, AlertDescription, AlertTitle } from "@allbluecn/ui/alert"
-import { Badge } from "@allbluecn/ui/badge"
-import { Button } from "@allbluecn/ui/button"
-import { Card, CardContent } from "@allbluecn/ui/card"
-import { ConfirmDialog } from "@allbluecn/ui/components/confirm-dialog"
+import { formatTimestamp } from "@/lib/datetime"
+import { toast } from "@/components/ui/toast"
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent } from "@/components/ui/card"
+import { ConfirmDialog } from "@/components/confirm-dialog"
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@allbluecn/ui/select"
-import { DataTable, type AdminColumnDef } from "@allbluecn/ui/data-table"
+} from "@/components/ui/select"
+import { DataTable, type AdminColumnDef } from "@/components/data-table/data-table"
 import { listMemoryFactsFn } from "@/server/serverFns/ai-memory/list"
 import { deleteMemoryFactFn } from "@/server/serverFns/ai-memory/delete"
 import { clearMemoryFactsFn } from "@/server/serverFns/ai-memory/clear"

package/src/components/ai-prompts/preview-panel.tsx

@@ -20,7 +20,7 @@ import { useCallback, useEffect, useRef, useState } from "react"
 import { AlertTriangle, Loader2 } from "lucide-react"
 
 import { m } from "@/paraglide/messages.js"
-import { Input } from "@allbluecn/ui/input"
+import { Input } from "@/components/ui/input"
 import {
   PROMPT_PREVIEW_DEBOUNCE_MS,
   useDebouncedCallback,

package/src/components/ai-prompts/prompt-editor.tsx

@@ -25,18 +25,18 @@ import { Link } from "@tanstack/react-router"
 import { ArrowLeft, Loader2, Save, ShieldCheck } from "lucide-react"
 
 import { m } from "@/paraglide/messages.js"
-import { toast } from "@allbluecn/ui/toast"
-import { Badge } from "@allbluecn/ui/badge"
-import { Button } from "@allbluecn/ui/button"
-import { Field, FieldContent, FieldLabel } from "@allbluecn/ui/field"
-import { Input } from "@allbluecn/ui/input"
-import { Switch } from "@allbluecn/ui/switch"
-import { Textarea } from "@allbluecn/ui/textarea"
+import { toast } from "@/components/ui/toast"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Field, FieldContent, FieldLabel } from "@/components/ui/field"
+import { Input } from "@/components/ui/input"
+import { Switch } from "@/components/ui/switch"
+import { Textarea } from "@/components/ui/textarea"
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from "@allbluecn/ui/tooltip"
+} from "@/components/ui/tooltip"
 import { activatePromptTemplateFn } from "@/server/serverFns/ai-prompts/activate"
 import { getPromptTemplateFn } from "@/server/serverFns/ai-prompts/get"
 import { rollbackPromptTemplateFn } from "@/server/serverFns/ai-prompts/rollback"

package/src/components/ai-prompts/prompt-table.tsx

@@ -19,14 +19,14 @@
 import { useMutation } from "@tanstack/react-query"
 import { Link, useRouter } from "@tanstack/react-router"
 import { Edit, ShieldCheck } from "lucide-react"
-import { formatTimestamp } from "@allbluecn/ui/lib/datetime"
+import { formatTimestamp } from "@/lib/datetime"
 
 import { m } from "@/paraglide/messages.js"
-import { toast } from "@allbluecn/ui/toast"
-import { Badge } from "@allbluecn/ui/badge"
-import { Button } from "@allbluecn/ui/button"
-import { Switch } from "@allbluecn/ui/switch"
-import { DataTable, type AdminColumnDef } from "@allbluecn/ui/data-table"
+import { toast } from "@/components/ui/toast"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Switch } from "@/components/ui/switch"
+import { DataTable, type AdminColumnDef } from "@/components/data-table/data-table"
 import { activatePromptTemplateFn } from "@/server/serverFns/ai-prompts/activate"
 import type { PromptTemplateRow } from "./prompt-utils"
 

package/src/components/ai-prompts/section-editor.tsx

@@ -19,9 +19,9 @@
 import { ArrowDown, ArrowUp, Plus, Trash2 } from "lucide-react"
 
 import { m } from "@/paraglide/messages.js"
-import { Button } from "@allbluecn/ui/button"
-import { Input } from "@allbluecn/ui/input"
-import { Textarea } from "@allbluecn/ui/textarea"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
 import {
   appendSection,
   moveSection,

package/src/components/ai-prompts/variable-panel.tsx

@@ -19,8 +19,8 @@
 import { AlertTriangle, Plus, Trash2 } from "lucide-react"
 
 import { m } from "@/paraglide/messages.js"
-import { Button } from "@allbluecn/ui/button"
-import { Input } from "@allbluecn/ui/input"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
 import {
   addVariable,
   removeVariable,

package/src/components/ai-prompts/version-history.tsx

@@ -18,17 +18,17 @@
 // apps/admin/src/components/ai-prompts/version-history.tsx
 import { useState } from "react"
 import { History, Loader2, RotateCcw } from "lucide-react"
-import { formatTimestamp } from "@allbluecn/ui/lib/datetime"
+import { formatTimestamp } from "@/lib/datetime"
 
 import { m } from "@/paraglide/messages.js"
-import { Badge } from "@allbluecn/ui/badge"
-import { Button } from "@allbluecn/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
 import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
-} from "@allbluecn/ui/collapsible"
-import { ConfirmDialog } from "@allbluecn/ui/components/confirm-dialog"
+} from "@/components/ui/collapsible"
+import { ConfirmDialog } from "@/components/confirm-dialog"
 import type { PromptVersionSummary } from "./prompt-utils"
 
 interface VersionHistoryProps {

package/src/components/ai-provider/model-list-editor.tsx

@@ -17,8 +17,8 @@
 
 // apps/admin/src/components/ai-provider/model-list-editor.tsx
 import { Plus, Trash2 } from "lucide-react"
-import { Button } from "@allbluecn/ui/button"
-import { Input } from "@allbluecn/ui/input"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
 import { cn } from "@/lib/utils"
 import {
   MODEL_CAPABILITY_OPTIONS,

package/src/components/ai-provider/provider-form.tsx

@@ -21,7 +21,7 @@ import { m } from '@/paraglide/messages.js'
 import { useMutation } from "@tanstack/react-query"
 import { Link, useNavigate, useRouter } from "@tanstack/react-router"
 import { ArrowLeft, Loader2, Save } from "lucide-react"
-import { toast } from '@allbluecn/ui/toast'
+import { toast } from '@/components/ui/toast'
 import {
   ADAPTER_KINDS,
   PROVIDER_CATEGORIES,
@@ -29,17 +29,17 @@ import {
   type AdapterKind,
   type ProviderCategory,
 } from "@allbluecn/kernel"
-import { Button } from "@allbluecn/ui/button"
-import { Input } from "@allbluecn/ui/input"
-import { Textarea } from "@allbluecn/ui/textarea"
-import { Switch } from "@allbluecn/ui/switch"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+import { Switch } from "@/components/ui/switch"
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@allbluecn/ui/select"
+} from "@/components/ui/select"
 import {
   Field,
   FieldContent,
@@ -49,7 +49,7 @@ import {
   FieldSet,
   FieldLegend,
   FieldSeparator,
-} from "@allbluecn/ui/field"
+} from "@/components/ui/field"
 import { createAiProviderAdminFn } from "@/server/serverFns/ai-provider/create"
 import { updateAiProviderAdminFn } from "@/server/serverFns/ai-provider/update"
 import { ModelListEditor } from "./model-list-editor"

package/src/components/ai-provider/provider-table.tsx

@@ -21,13 +21,13 @@ import { m } from '@/paraglide/messages.js'
 import { useMutation } from "@tanstack/react-query"
 import { Link, useRouter } from "@tanstack/react-router"
 import { Edit, Plus, RefreshCw, Trash2, Users } from "lucide-react"
-import { toast } from '@allbluecn/ui/toast'
+import { toast } from '@/components/ui/toast'
 import { ADAPTER_KINDS, PROVIDER_BADGE_STYLES, type AiProviderRow } from "@allbluecn/kernel"
-import { Button } from "@allbluecn/ui/button"
-import { Switch } from "@allbluecn/ui/switch"
-import { Badge } from "@allbluecn/ui/badge"
-import { ConfirmDialog } from "@allbluecn/ui/components/confirm-dialog"
-import { DataTable, type AdminColumnDef } from "@allbluecn/ui/data-table"
+import { Button } from "@/components/ui/button"
+import { Switch } from "@/components/ui/switch"
+import { Badge } from "@/components/ui/badge"
+import { ConfirmDialog } from "@/components/confirm-dialog"
+import { DataTable, type AdminColumnDef } from "@/components/data-table/data-table"
 import { ProviderIcon } from "./provider-icon"
 import { updateAiProviderAdminFn } from "@/server/serverFns/ai-provider/update"
 import { deleteAiProviderAdminFn } from "@/server/serverFns/ai-provider/delete"

package/src/components/auth/admin-login-form.tsx

@@ -19,12 +19,12 @@ import { LogOut, Mail, Users, BarChart3, Shield, Settings, ArrowRight, ArrowLeft
 import { m } from '@/paraglide/messages.js'
 import { useState } from "react";
 import { signIn, signOut } from "@/lib/auth-client";
-import { Button } from "@allbluecn/ui/button";
-import { Checkbox } from "@allbluecn/ui/checkbox";
-import { Field, FieldLabel } from "@allbluecn/ui/field";
-import { Card, CardContent } from "@allbluecn/ui/card";
-import { toast } from '@allbluecn/ui/toast';
-import { UserAvatar } from "@allbluecn/ui/components/user-avatar";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Field, FieldLabel } from "@/components/ui/field";
+import { Card, CardContent } from "@/components/ui/card";
+import { toast } from '@/components/ui/toast';
+import { UserAvatar } from "@/components/user-avatar";
 import type { AvatarConfig, ShapeType } from "@allbluecn/kernel";
 import { AuthLayout, AuthLayoutLeft, AuthLayoutRight } from "@/components/auth/auth-layout";
 import { AuthHeader } from "@/components/auth/auth-header";

package/src/components/auth/icon-input.tsx

@@ -16,8 +16,8 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 
-import { Input } from '@allbluecn/ui/input'
-import { Label } from '@allbluecn/ui/label'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
 import type { LucideIcon } from 'lucide-react'
 
 interface IconInputProps extends React.InputHTMLAttributes<HTMLInputElement> {

package/src/components/auth/password-input.tsx

@@ -17,8 +17,8 @@
 
 import { useState } from 'react'
 import { m } from '@/paraglide/messages.js'
-import { Input } from '@allbluecn/ui/input'
-import { Label } from '@allbluecn/ui/label'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
 import { Lock } from 'lucide-react'
 
 interface PasswordInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {

package/src/components/component/component-form-dialog.tsx

@@ -17,28 +17,28 @@
 
 import { useState, useEffect } from 'react'
 import { m } from '@/paraglide/messages.js'
-import { Button } from '@allbluecn/ui/button'
-import { Input } from '@allbluecn/ui/input'
-import { Label } from '@allbluecn/ui/label'
-import { Textarea } from '@allbluecn/ui/textarea'
-import { Switch } from '@allbluecn/ui/switch'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Textarea } from '@/components/ui/textarea'
+import { Switch } from '@/components/ui/switch'
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '@allbluecn/ui/select'
+} from '@/components/ui/select'
 import {
   Dialog,
   DialogContent,
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from '@allbluecn/ui/dialog'
+} from '@/components/ui/dialog'
 import { ComponentPreview } from './component-preview'
 import { createComponentFn, updateComponentFn } from '@/server/serverFns/components/mutations'
-import { toast } from '@allbluecn/ui/toast'
+import { toast } from '@/components/ui/toast'
 import type { ComponentItem } from './component-table'
 
 const CATEGORY_KEYS = ['base', 'block', 'template'] as const

package/src/components/component/component-import-dialog.tsx

@@ -16,16 +16,16 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { useState } from 'react'
-import { Button } from '@allbluecn/ui/button'
-import { Input } from '@allbluecn/ui/input'
-import { Label } from '@allbluecn/ui/label'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '@allbluecn/ui/select'
+} from '@/components/ui/select'
 import {
   Dialog,
   DialogContent,
@@ -33,9 +33,9 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from '@allbluecn/ui/dialog'
+} from '@/components/ui/dialog'
 import { importComponentFn } from '@/server/serverFns/components/import'
-import { toast } from '@allbluecn/ui/toast'
+import { toast } from '@/components/ui/toast'
 import { Loader2, Sparkles } from 'lucide-react'
 import { cn } from '@/lib/utils'
 

package/src/components/component/component-table.tsx

@@ -17,8 +17,8 @@
 
 import { Edit, Trash2 } from 'lucide-react'
 import { m } from '@/paraglide/messages.js'
-import { Badge } from '@allbluecn/ui/badge'
-import { Button } from '@allbluecn/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
 import {
   Table,
   TableBody,
@@ -26,7 +26,7 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from '@allbluecn/ui/table'
+} from '@/components/ui/table'
 import { cn } from '@/lib/utils'
 
 export interface ComponentItem {

package/src/components/confirm-dialog.tsx

@@ -0,0 +1,94 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+
+import type { ReactElement, ReactNode } from "react"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "./ui/alert-dialog"
+import type { Button } from "./ui/button"
+
+export interface ConfirmDialogProps {
+  /** 受控 open；不传则由 trigger 非受控驱动 */
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+  title: ReactNode
+  /** 传 null 渲染空描述（保持 aria-describedby 结构），缺省则不渲染 */
+  description?: ReactNode
+  cancelLabel: ReactNode
+  confirmLabel: ReactNode
+  /** 确认按钮点击回调；关闭时机由调用方自行控制（与既有内联实现一致，不自动关闭） */
+  onConfirm: () => void
+  confirmVariant?: React.ComponentProps<typeof Button>["variant"]
+  confirmClassName?: string
+  confirmDisabled?: boolean
+  cancelDisabled?: boolean
+  confirmTestId?: string
+  contentTestId?: string
+  contentClassName?: string
+  /** 可选触发器元素（作为 AlertDialogTrigger 的 render 元素） */
+  trigger?: ReactElement
+}
+
+/**
+ * 通用确认弹窗：收口各处内联的「双 state + 手写 AlertDialog」确认模式。
+ * 仅做骨架渲染，onConfirm 的异步/关闭时序完全由调用方决定，保证逐站点行为等价迁移。
+ */
+export function ConfirmDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  cancelLabel,
+  confirmLabel,
+  onConfirm,
+  confirmVariant,
+  confirmClassName,
+  confirmDisabled,
+  cancelDisabled,
+  confirmTestId,
+  contentTestId,
+  contentClassName,
+  trigger,
+}: ConfirmDialogProps) {
+  const rootProps: { open?: boolean; onOpenChange?: (open: boolean) => void } = {}
+  if (open !== undefined) {
+    rootProps.open = open
+    rootProps.onOpenChange = onOpenChange
+  } else if (onOpenChange) {
+    rootProps.onOpenChange = onOpenChange
+  }
+  return (
+    <AlertDialog {...rootProps}>
+      {trigger ? <AlertDialogTrigger render={trigger} /> : null}
+      <AlertDialogContent data-testid={contentTestId} className={contentClassName}>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{title}</AlertDialogTitle>
+          {description !== undefined ? (
+            <AlertDialogDescription>{description}</AlertDialogDescription>
+          ) : null}
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={cancelDisabled}>{cancelLabel}</AlertDialogCancel>
+          <AlertDialogAction
+            variant={confirmVariant}
+            className={confirmClassName}
+            disabled={confirmDisabled}
+            onClick={onConfirm}
+            data-testid={confirmTestId}
+          >
+            {confirmLabel}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}

package/src/components/data-table/data-table-pagination.tsx

@@ -0,0 +1,121 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "../ui/pagination";
+
+// i18n 由消费方注入（包内不依赖 @/paraglide），文案与原 admin 实现逐字对应
+export interface DataTablePaginationLabels {
+  total: string;
+  previous: string;
+  next: string;
+}
+
+interface DataTablePaginationProps {
+  page: number;
+  totalPages: number;
+  total: number;
+  onPageChange: (page: number) => void;
+  labels: DataTablePaginationLabels;
+}
+
+function getPageNumbers(current: number, total: number): (number | "ellipsis")[] {
+  if (total <= 5) {
+    return Array.from({ length: total }, (_, i) => i + 1);
+  }
+
+  const pages: (number | "ellipsis")[] = [1];
+
+  if (current > 3) {
+    pages.push("ellipsis");
+  }
+
+  const start = Math.max(2, current - 1);
+  const end = Math.min(total - 1, current + 1);
+
+  for (let i = start; i <= end; i++) {
+    pages.push(i);
+  }
+
+  if (current < total - 2) {
+    pages.push("ellipsis");
+  }
+
+  pages.push(total);
+
+  return pages;
+}
+
+export function DataTablePagination({
+  page,
+  totalPages,
+  total,
+  onPageChange,
+  labels,
+}: DataTablePaginationProps) {
+  const pages = getPageNumbers(page, totalPages);
+
+  return (
+    <div className="flex items-center justify-between gap-4 px-2 py-4">
+      <div className="text-sm text-muted-foreground whitespace-nowrap shrink-0">
+        {labels.total}
+      </div>
+      <Pagination className="justify-end">
+        <PaginationContent>
+          <PaginationItem>
+            <PaginationPrevious
+              text={labels.previous}
+              onClick={() => page > 1 && onPageChange(page - 1)}
+              className={page <= 1 ? "pointer-events-none opacity-50" : "cursor-pointer"}
+            />
+          </PaginationItem>
+          {pages.map((p, i) =>
+            p === "ellipsis" ? (
+              <PaginationItem key={`ellipsis-${i}`}>
+                <PaginationEllipsis />
+              </PaginationItem>
+            ) : (
+              <PaginationItem key={p}>
+                <PaginationLink
+                  isActive={p === page}
+                  onClick={() => onPageChange(p)}
+                  className="cursor-pointer"
+                >
+                  {p}
+                </PaginationLink>
+              </PaginationItem>
+            )
+          )}
+          <PaginationItem>
+            <PaginationNext
+              text={labels.next}
+              onClick={() => page < totalPages && onPageChange(page + 1)}
+              className={page >= totalPages ? "pointer-events-none opacity-50" : "cursor-pointer"}
+            />
+          </PaginationItem>
+        </PaginationContent>
+      </Pagination>
+    </div>
+  );
+}