@goplusvn/core 0.1.51 → 0.1.52

package/features/README.md

@@ -29,5 +29,9 @@ GENERATED — đừng sửa tay) và tạo thư mục migration
 ## Feature hiện có
 
 - `background-tasks` — bảng `background_tasks` cho trung tâm tác vụ nền
-  (export/import chạy nền). Runtime hiện ở app (vinhhoa `src/server/tasks`);
-  sẽ dời lên core ở đợt F1.
+  (export/import chạy nền). Runtime: `@goerp/core/tasks`
+  (`configureTaskRunner`) + UI `@goerp/core/tasks/ui`.
+- `error-logs` — bảng `error_logs` cho hệ ghi lỗi server
+  (`createErrorLogger`/`buildServerError` ở `errors/server-error`) + trang
+  admin `system/pages/error-logs-page` (app cung cấp API, mẫu vinhhoa
+  /api/error-logs).

package/features/error-logs/migrations/0001_init.sql

@@ -0,0 +1,32 @@
+-- goerp feature: error-logs — bước 0001 (idempotent). Bảng cho createErrorLogger
+-- (@goerp/core/errors/server-error) + trang admin ErrorLogsPage.
+-- gen_random_uuid() là hàm sẵn của PostgreSQL 13+.
+CREATE TABLE IF NOT EXISTS "error_logs" (
+    "id" TEXT NOT NULL DEFAULT gen_random_uuid(),
+    "error_id" TEXT NOT NULL,
+    "fingerprint" TEXT,
+    "code" TEXT,
+    "message" TEXT NOT NULL,
+    "detail" TEXT,
+    "context" TEXT,
+    "module" TEXT,
+    "user_id" TEXT,
+    "url" TEXT,
+    "user_agent" TEXT,
+    "severity" TEXT NOT NULL DEFAULT 'error',
+    "resolved" BOOLEAN NOT NULL DEFAULT false,
+    "occurrence_count" INTEGER NOT NULL DEFAULT 1,
+    "last_seen_at" TIMESTAMPTZ(6) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "created_at" TIMESTAMPTZ(6) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "error_logs_pkey" PRIMARY KEY ("id")
+);
+
+CREATE INDEX IF NOT EXISTS "idx_error_logs_code" ON "error_logs"("code");
+CREATE INDEX IF NOT EXISTS "idx_error_logs_created_at" ON "error_logs"("created_at");
+CREATE INDEX IF NOT EXISTS "idx_error_logs_error_id" ON "error_logs"("error_id");
+CREATE INDEX IF NOT EXISTS "idx_error_logs_fingerprint" ON "error_logs"("fingerprint");
+CREATE INDEX IF NOT EXISTS "idx_error_logs_module" ON "error_logs"("module");
+CREATE INDEX IF NOT EXISTS "idx_error_logs_resolved" ON "error_logs"("resolved");
+CREATE INDEX IF NOT EXISTS "idx_error_logs_severity" ON "error_logs"("severity");
+CREATE INDEX IF NOT EXISTS "idx_error_logs_user_id" ON "error_logs"("user_id");

package/features/error-logs/schema.prisma

@@ -0,0 +1,28 @@
+model ErrorLog {
+  id              String   @id @default(dbgenerated("gen_random_uuid()")) @map("id")
+  errorId         String   @map("error_id")
+  fingerprint     String?  @map("fingerprint")
+  code            String?  @map("code")
+  message         String   @map("message")
+  detail          String?  @map("detail")
+  context         String?  @map("context")
+  module          String?  @map("module")
+  userId          String?  @map("user_id")
+  url             String?  @map("url")
+  userAgent       String?  @map("user_agent")
+  severity        String   @default("error") @map("severity")
+  resolved        Boolean  @default(false) @map("resolved")
+  occurrenceCount Int      @default(1) @map("occurrence_count")
+  lastSeenAt      DateTime @default(now()) @map("last_seen_at") @db.Timestamptz(6)
+  createdAt       DateTime @default(now()) @map("created_at") @db.Timestamptz(6)
+
+  @@index([code], map: "idx_error_logs_code")
+  @@index([createdAt], map: "idx_error_logs_created_at")
+  @@index([errorId], map: "idx_error_logs_error_id")
+  @@index([fingerprint], map: "idx_error_logs_fingerprint")
+  @@index([module], map: "idx_error_logs_module")
+  @@index([resolved], map: "idx_error_logs_resolved")
+  @@index([severity], map: "idx_error_logs_severity")
+  @@index([userId], map: "idx_error_logs_user_id")
+  @@map("error_logs")
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@goplusvn/core",
   "description": "GoPlusVN Platform Kit - ERP kernel: layout, RBAC, CRUD, multi-tenant, system pages",
-  "version": "0.1.51",
+  "version": "0.1.52",
   "private": false,
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
@@ -77,6 +77,7 @@
     "./system/services/system-category-service": "./src/system/services/system-category-service.ts",
     "./system/pages/system-settings-page": "./src/system/pages/system-settings-page.tsx",
     "./system/pages/system-category-page": "./src/system/pages/system-category-page.tsx",
+    "./system/pages/error-logs-page": "./src/system/pages/error-logs-page.tsx",
     "./rbac/role-service": "./src/rbac/role-service.ts",
     "./rbac/resource-service": "./src/rbac/resource-service.ts",
     "./infrastructure/cron/cron-manager": "./src/infrastructure/cron/cron-manager.ts",

package/src/system/pages/error-logs-page.tsx

@@ -0,0 +1,652 @@
+"use client"
+
+// Trang admin "Nhật ký lỗi" dùng chung mọi app goerp (F1 batch 2) — đọc/ghi
+// qua API app cung cấp (mẫu: vinhhoa /api/error-logs). Engine ghi lỗi + bảng
+// error_logs ship sẵn: createErrorLogger (errors/server-error) + feature
+// `error-logs` (goerp-features sync).
+
+import { useCallback, useEffect, useState } from "react"
+import { useDebounce } from "../../hooks"
+import { toast } from "sonner"
+import {
+    Badge,
+    Button,
+    Card,
+    CardContent,
+    Dialog,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+    Input,
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "../../ui/primitives"
+import {
+    AlertTriangle,
+    Bug,
+    CalendarDays,
+    Check,
+    CheckCircle2,
+    ChevronLeft,
+    ChevronRight,
+    Copy,
+    Filter,
+    Layers,
+    Link2,
+    RefreshCw,
+    Search,
+    Trash2,
+    User,
+    X,
+} from "lucide-react"
+
+interface ErrorLogItem {
+    id: string
+    errorId: string
+    code: string | null
+    message: string
+    detail: string | null
+    context: string | null
+    module: string | null
+    userId: string | null
+    userName?: string | null
+    url: string | null
+    severity: string
+    resolved: boolean
+    occurrenceCount: number
+    lastSeenAt: string
+    createdAt: string
+}
+
+interface ModuleStat { module: string; count: number }
+
+interface Meta {
+    total: number; skip: number; take: number; hasMore: boolean
+    todayCount: number; unresolvedCount: number
+    moduleStats: ModuleStat[]
+}
+
+// Parse stack trace string into structured frames
+function parseStackTrace(detail: string): { frame: string; isApp: boolean }[] {
+    return detail
+        .split("\n")
+        .map((line) => line.trim())
+        .filter(Boolean)
+        .map((line) => ({
+            frame: line,
+            isApp: line.includes("src/") || line.includes("app/") || line.includes("pages/"),
+        }))
+}
+
+function StackTraceViewer({ detail }: { detail: string }) {
+    const frames = parseStackTrace(detail)
+    // Try to parse as JSON first (structured error)
+    try {
+        const json = JSON.parse(detail)
+        return (
+            <pre className="text-xs bg-muted rounded-md p-3 overflow-x-auto whitespace-pre-wrap max-h-[240px] overflow-y-auto">
+                {JSON.stringify(json, null, 2)}
+            </pre>
+        )
+    } catch {
+        // Not JSON — render as stack trace
+    }
+
+    return (
+        <div className="rounded-md bg-slate-950 text-slate-100 text-xs font-mono p-3 max-h-[240px] overflow-y-auto space-y-0.5">
+            {frames.map((f, i) => (
+                <div
+                    key={i}
+                    className={`leading-5 ${
+                        i === 0 ? "text-red-400 font-bold" :
+                        f.isApp ? "text-amber-300" : "text-slate-400"
+                    }`}
+                >
+                    {f.frame}
+                </div>
+            ))}
+        </div>
+    )
+}
+
+function SeverityBadge({ sev }: { sev: string }) {
+    const map: Record<string, string> = {
+        critical: "bg-danger text-white",
+        error:    "bg-danger-subtle text-danger-text",
+        warning:  "bg-warning-subtle text-warning-text",
+    }
+    return (
+        <span className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${map[sev] || "bg-muted text-muted-foreground"}`}>
+            {sev}
+        </span>
+    )
+}
+
+export function ErrorLogsPage({
+    initialSearch,
+    apiUrl = "/api/error-logs",
+}: {
+    /** Deep-link từ dashboard vận hành: ?search=<errorId> */
+    initialSearch?: string
+    /** Endpoint app cung cấp (GET list/DELETE purge + [id] PATCH resolve). */
+    apiUrl?: string
+}) {
+    const [logs, setLogs] = useState<ErrorLogItem[]>([])
+    const [meta, setMeta] = useState<Meta>({
+        total: 0, skip: 0, take: 30, hasMore: false,
+        todayCount: 0, unresolvedCount: 0, moduleStats: [],
+    })
+    const [loading, setLoading] = useState(true)
+    const [search, setSearch] = useState(initialSearch ?? "")
+    const [severity, setSeverity] = useState("all")
+    // Khi deep-link theo errorId thì không lọc resolved — link luôn tìm ra dòng
+    const [resolved, setResolved] = useState(initialSearch ? "all" : "false")
+    const [moduleFilter, setModuleFilter] = useState("all")
+    const [startDate, setStartDate] = useState("")
+    const [endDate, setEndDate] = useState("")
+    const [selectedLog, setSelectedLog] = useState<ErrorLogItem | null>(null)
+    const [page, setPage] = useState(0)
+    const [showDeleteDialog, setShowDeleteDialog] = useState(false)
+    const [deleting, setDeleting] = useState(false)
+    const [showFilters, setShowFilters] = useState(false)
+
+    const PAGE_SIZE = 30
+
+    const debouncedSearch = useDebounce(search, 350)
+
+    const fetchLogs = useCallback(async (signal?: AbortSignal) => {
+        setLoading(true)
+        try {
+            const params = new URLSearchParams()
+            if (debouncedSearch)     params.set("search", debouncedSearch)
+            if (severity !== "all")  params.set("severity", severity)
+            if (resolved !== "all")  params.set("resolved", resolved)
+            if (moduleFilter !== "all") params.set("module", moduleFilter)
+            if (startDate)           params.set("startDate", startDate)
+            if (endDate)             params.set("endDate", new Date(endDate + "T23:59:59").toISOString())
+            params.set("skip", String(page * PAGE_SIZE))
+            params.set("take", String(PAGE_SIZE))
+
+            const res = await fetch(`${apiUrl}?${params}`, { signal })
+            if (!res.ok) return
+            const data = await res.json()
+            if (data.data) {
+                setLogs(data.data)
+                setMeta(data.meta)
+            }
+        } catch (e) {
+            if ((e as any)?.name === "AbortError") return
+            /* silent */
+        } finally {
+            setLoading(false)
+        }
+    }, [debouncedSearch, severity, resolved, moduleFilter, startDate, endDate, page])
+
+    useEffect(() => {
+        const controller = new AbortController()
+        fetchLogs(controller.signal)
+        return () => controller.abort()
+    }, [fetchLogs])
+
+    const handleToggleResolved = async (log: ErrorLogItem) => {
+        try {
+            await fetch(`${apiUrl}/${log.id}`, {
+                method: "PATCH",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ resolved: !log.resolved }),
+            })
+            toast.success(log.resolved ? "Đánh dấu chưa xử lý" : "Đánh dấu đã xử lý")
+            fetchLogs()
+            if (selectedLog?.id === log.id) {
+                setSelectedLog({ ...log, resolved: !log.resolved })
+            }
+        } catch {
+            toast.error("Lỗi cập nhật trạng thái")
+        }
+    }
+
+    const handleDeleteLogs = async (mode: "older_than" | "resolved", days?: number) => {
+        setDeleting(true)
+        try {
+            const params = new URLSearchParams({ mode })
+            if (days) params.set("days", String(days))
+            const res = await fetch(`${apiUrl}?${params}`, { method: "DELETE" })
+            const data = await res.json()
+            if (data.success) {
+                toast.success(`Đã xóa ${data.deleted} bản ghi`)
+                setShowDeleteDialog(false)
+                fetchLogs()
+            } else {
+                toast.error("Xóa log thất bại")
+            }
+        } catch {
+            toast.error("Xóa log thất bại")
+        } finally {
+            setDeleting(false)
+        }
+    }
+
+    const formatDate = (s: string) =>
+        new Date(s).toLocaleString("vi-VN", {
+            timeZone: "Asia/Ho_Chi_Minh",
+            day: "2-digit", month: "2-digit", year: "numeric",
+            hour: "2-digit", minute: "2-digit",
+        })
+
+    const hasActiveFilters = search || severity !== "all" || resolved !== "all" ||
+        moduleFilter !== "all" || startDate || endDate
+
+    const clearFilters = () => {
+        setSearch(""); setSeverity("all"); setResolved("false")
+        setModuleFilter("all"); setStartDate(""); setEndDate(""); setPage(0)
+    }
+
+    const allModules = Array.from(
+        new Set([
+            ...meta.moduleStats.map((m) => m.module),
+            ...logs.map((l) => l.module).filter(Boolean),
+        ])
+    ).filter(Boolean) as string[]
+
+    return (
+        <div className="flex h-full flex-col space-y-4 p-4 md:p-6">
+            {/* Header */}
+            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
+                <div>
+                    <h2 className="text-xl md:text-2xl font-bold tracking-tight flex items-center gap-2">
+                        <Bug className="h-5 w-5 md:h-6 md:w-6" />
+                        Nhật ký lỗi
+                    </h2>
+                    <p className="text-muted-foreground text-sm hidden sm:block">
+                        Theo dõi và quản lý lỗi hệ thống
+                    </p>
+                </div>
+                <div className="flex gap-2">
+                    <Button
+                        variant={showFilters ? "default" : "outline"}
+                        size="sm"
+                        onClick={() => setShowFilters((v) => !v)}
+                    >
+                        <Filter className="mr-1.5 h-4 w-4" />
+                        Bộ lọc
+                        {hasActiveFilters && (
+                            <span className="ml-1.5 rounded-full bg-primary-foreground text-primary w-4 h-4 text-[10px] flex items-center justify-center font-bold">
+                                !
+                            </span>
+                        )}
+                    </Button>
+                    <Button variant="outline" size="sm" onClick={() => setShowDeleteDialog(true)}>
+                        <Trash2 className="mr-1.5 h-4 w-4" />
+                        Xóa cũ
+                    </Button>
+                    <Button variant="outline" size="sm" onClick={() => fetchLogs()} disabled={loading}>
+                        <RefreshCw className={`mr-1.5 h-4 w-4 ${loading ? "animate-spin" : ""}`} />
+                        Làm mới
+                    </Button>
+                </div>
+            </div>
+
+            {/* Stats bar */}
+            <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+                <Card>
+                    <CardContent className="p-3 text-center">
+                        <p className="text-2xl font-bold text-destructive">{meta.unresolvedCount}</p>
+                        <p className="text-xs text-muted-foreground mt-0.5">Chưa xử lý</p>
+                    </CardContent>
+                </Card>
+                <Card>
+                    <CardContent className="p-3 text-center">
+                        <p className="text-2xl font-bold">{meta.todayCount}</p>
+                        <p className="text-xs text-muted-foreground mt-0.5">Hôm nay</p>
+                    </CardContent>
+                </Card>
+                {meta.moduleStats.slice(0, 2).map((m) => (
+                    <Card key={m.module}>
+                        <CardContent className="p-3 text-center">
+                            <p className="text-2xl font-bold text-amber-600">{m.count}</p>
+                            <p className="text-xs text-muted-foreground mt-0.5 truncate">{m.module}</p>
+                        </CardContent>
+                    </Card>
+                ))}
+            </div>
+
+            {/* Filters (collapsible) */}
+            {showFilters && (
+                <Card>
+                    <CardContent className="p-3">
+                        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
+                            <div className="relative sm:col-span-2 lg:col-span-1">
+                                <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
+                                <Input
+                                    placeholder="Tìm message, errorId, context..."
+                                    value={search}
+                                    onChange={(e) => { setSearch(e.target.value); setPage(0) }}
+                                    className="pl-8"
+                                />
+                            </div>
+                            <Select value={severity} onValueChange={(v) => { setSeverity(v); setPage(0) }}>
+                                <SelectTrigger>
+                                    <AlertTriangle className="h-3.5 w-3.5 mr-1.5 text-muted-foreground" />
+                                    <SelectValue placeholder="Mức độ" />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    <SelectItem value="all">Tất cả mức độ</SelectItem>
+                                    <SelectItem value="critical">Critical</SelectItem>
+                                    <SelectItem value="error">Error</SelectItem>
+                                    <SelectItem value="warning">Warning</SelectItem>
+                                </SelectContent>
+                            </Select>
+                            <Select value={resolved} onValueChange={(v) => { setResolved(v); setPage(0) }}>
+                                <SelectTrigger>
+                                    <SelectValue placeholder="Trạng thái" />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    <SelectItem value="all">Tất cả</SelectItem>
+                                    <SelectItem value="false">Chưa xử lý</SelectItem>
+                                    <SelectItem value="true">Đã xử lý</SelectItem>
+                                </SelectContent>
+                            </Select>
+                            <Select value={moduleFilter} onValueChange={(v) => { setModuleFilter(v); setPage(0) }}>
+                                <SelectTrigger>
+                                    <Layers className="h-3.5 w-3.5 mr-1.5 text-muted-foreground" />
+                                    <SelectValue placeholder="Module" />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    <SelectItem value="all">Tất cả module</SelectItem>
+                                    {allModules.map((m) => (
+                                        <SelectItem key={m} value={m}>{m}</SelectItem>
+                                    ))}
+                                </SelectContent>
+                            </Select>
+                            <div className="flex items-center gap-2 sm:col-span-2 lg:col-span-1">
+                                <CalendarDays className="h-4 w-4 text-muted-foreground shrink-0" />
+                                <Input
+                                    type="date" value={startDate}
+                                    onChange={(e) => { setStartDate(e.target.value); setPage(0) }}
+                                    className="flex-1"
+                                />
+                                <span className="text-muted-foreground text-sm">→</span>
+                                <Input
+                                    type="date" value={endDate}
+                                    onChange={(e) => { setEndDate(e.target.value); setPage(0) }}
+                                    className="flex-1"
+                                />
+                            </div>
+                            {hasActiveFilters && (
+                                <Button variant="ghost" size="sm" className="w-fit" onClick={clearFilters}>
+                                    <X className="h-3.5 w-3.5 mr-1" /> Xóa bộ lọc
+                                </Button>
+                            )}
+                        </div>
+                    </CardContent>
+                </Card>
+            )}
+
+            {/* Table */}
+            <Card className="flex-1">
+                <CardContent className="p-0">
+                    <div className="rounded-md border overflow-x-auto">
+                        <Table>
+                            <TableHeader>
+                                <TableRow>
+                                    <TableHead className="w-[130px]">Thời gian</TableHead>
+                                    <TableHead className="w-[85px]">Mức độ</TableHead>
+                                    <TableHead className="w-[100px] hidden md:table-cell">Module</TableHead>
+                                    <TableHead>Thông báo lỗi</TableHead>
+                                    <TableHead className="w-[60px] text-center">Lần</TableHead>
+                                    <TableHead className="w-[80px]">Trạng thái</TableHead>
+                                    <TableHead className="w-[50px] text-right hidden sm:table-cell" />
+                                </TableRow>
+                            </TableHeader>
+                            <TableBody>
+                                {loading ? (
+                                    <TableRow>
+                                        <TableCell colSpan={7} className="text-center py-8">
+                                            <RefreshCw className="h-5 w-5 animate-spin mx-auto text-muted-foreground" />
+                                        </TableCell>
+                                    </TableRow>
+                                ) : logs.length === 0 ? (
+                                    <TableRow>
+                                        <TableCell colSpan={7} className="text-center py-8 text-muted-foreground">
+                                            <CheckCircle2 className="h-8 w-8 mx-auto mb-2 text-green-500" />
+                                            Không có lỗi nào
+                                        </TableCell>
+                                    </TableRow>
+                                ) : (
+                                    logs.map((log) => (
+                                        <TableRow
+                                            key={log.id}
+                                            className="cursor-pointer hover:bg-muted/50"
+                                            onClick={() => setSelectedLog(log)}
+                                        >
+                                            <TableCell className="text-xs text-muted-foreground font-mono">
+                                                {formatDate(log.lastSeenAt || log.createdAt)}
+                                            </TableCell>
+                                            <TableCell>
+                                                <SeverityBadge sev={log.severity} />
+                                            </TableCell>
+                                            <TableCell className="hidden md:table-cell">
+                                                {log.module ? (
+                                                    <span className="text-xs bg-muted text-foreground px-1.5 py-0.5 rounded font-mono">
+                                                        {log.module}
+                                                    </span>
+                                                ) : (
+                                                    <span className="text-xs text-muted-foreground">—</span>
+                                                )}
+                                            </TableCell>
+                                            <TableCell
+                                                className="max-w-[200px] md:max-w-[300px] truncate text-sm"
+                                                title={log.message}
+                                            >
+                                                {log.message}
+                                            </TableCell>
+                                            <TableCell className="text-center">
+                                                {log.occurrenceCount > 1 ? (
+                                                    <span className="text-xs font-bold text-amber-600 bg-amber-50 rounded-full px-1.5 py-0.5">
+                                                        ×{log.occurrenceCount}
+                                                    </span>
+                                                ) : (
+                                                    <span className="text-xs text-muted-foreground">1</span>
+                                                )}
+                                            </TableCell>
+                                            <TableCell>
+                                                {log.resolved ? (
+                                                    <Badge variant="secondary" className="bg-success-subtle text-success-text text-xs">
+                                                        Đã xử lý
+                                                    </Badge>
+                                                ) : (
+                                                    <Badge variant="outline" className="text-destructive text-xs">
+                                                        Chưa xử lý
+                                                    </Badge>
+                                                )}
+                                            </TableCell>
+                                            <TableCell className="text-right hidden sm:table-cell">
+                                                <Button
+                                                    variant="ghost" size="sm"
+                                                    onClick={(e) => { e.stopPropagation(); handleToggleResolved(log) }}
+                                                    title={log.resolved ? "Đánh dấu chưa xử lý" : "Đánh dấu đã xử lý"}
+                                                >
+                                                    <Check className="h-4 w-4" />
+                                                </Button>
+                                            </TableCell>
+                                        </TableRow>
+                                    ))
+                                )}
+                            </TableBody>
+                        </Table>
+                    </div>
+                </CardContent>
+            </Card>
+
+            {/* Pagination */}
+            <div className="flex items-center justify-between text-sm">
+                <p className="text-muted-foreground">
+                    {logs.length} / {meta.total} bản ghi
+                </p>
+                <div className="flex gap-2">
+                    <Button variant="outline" size="sm" disabled={page === 0}
+                        onClick={() => setPage((p) => p - 1)}>
+                        <ChevronLeft className="h-4 w-4" />
+                    </Button>
+                    <Button variant="outline" size="sm" disabled={!meta.hasMore}
+                        onClick={() => setPage((p) => p + 1)}>
+                        <ChevronRight className="h-4 w-4" />
+                    </Button>
+                </div>
+            </div>
+
+            {/* Detail Dialog */}
+            <Dialog open={!!selectedLog} onOpenChange={() => setSelectedLog(null)}>
+                <DialogContent className="max-w-2xl max-h-[85vh] overflow-y-auto">
+                    <DialogHeader>
+                        <DialogTitle className="flex items-center gap-2">
+                            <Bug className="h-5 w-5" />
+                            Chi tiết lỗi
+                        </DialogTitle>
+                    </DialogHeader>
+                    {selectedLog && (
+                        <div className="space-y-4">
+                            {/* Meta grid */}
+                            <div className="grid grid-cols-2 sm:grid-cols-3 gap-3 text-sm">
+                                <div>
+                                    <p className="text-muted-foreground text-xs mb-1">Mức độ</p>
+                                    <SeverityBadge sev={selectedLog.severity} />
+                                </div>
+                                <div>
+                                    <p className="text-muted-foreground text-xs mb-1">Số lần</p>
+                                    <p className="font-bold text-amber-600">
+                                        ×{selectedLog.occurrenceCount}
+                                        {selectedLog.occurrenceCount > 1 && (
+                                            <span className="text-xs text-muted-foreground font-normal ml-1">lần</span>
+                                        )}
+                                    </p>
+                                </div>
+                                <div>
+                                    <p className="text-muted-foreground text-xs mb-1">Module</p>
+                                    <p className="font-mono text-xs">{selectedLog.module || "—"}</p>
+                                </div>
+                                <div>
+                                    <p className="text-muted-foreground text-xs mb-1">Lần đầu</p>
+                                    <p className="text-xs">{formatDate(selectedLog.createdAt)}</p>
+                                </div>
+                                <div>
+                                    <p className="text-muted-foreground text-xs mb-1">Lần cuối</p>
+                                    <p className="text-xs">{formatDate(selectedLog.lastSeenAt)}</p>
+                                </div>
+                                <div>
+                                    <p className="text-muted-foreground text-xs mb-1">Error ID</p>
+                                    <p className="font-mono text-xs">{selectedLog.errorId}</p>
+                                </div>
+                                {selectedLog.code && (
+                                    <div>
+                                        <p className="text-muted-foreground text-xs mb-1">Code</p>
+                                        <p className="font-mono text-xs">{selectedLog.code}</p>
+                                    </div>
+                                )}
+                                {selectedLog.context && (
+                                    <div className="col-span-2">
+                                        <p className="text-muted-foreground text-xs mb-1">Context</p>
+                                        <p className="font-mono text-xs">{selectedLog.context}</p>
+                                    </div>
+                                )}
+                                {selectedLog.url && (
+                                    <div className="col-span-2 sm:col-span-3">
+                                        <p className="text-muted-foreground text-xs mb-1 flex items-center gap-1">
+                                            <Link2 className="h-3 w-3" /> URL
+                                        </p>
+                                        <p className="text-xs font-mono break-all">{selectedLog.url}</p>
+                                    </div>
+                                )}
+                                {selectedLog.userId && (
+                                    <div>
+                                        <p className="text-muted-foreground text-xs mb-1 flex items-center gap-1">
+                                            <User className="h-3 w-3" /> Người dùng
+                                        </p>
+                                        <p className="font-mono text-xs">{selectedLog.userName || selectedLog.userId}</p>
+                                    </div>
+                                )}
+                            </div>
+
+                            {/* Message */}
+                            <div>
+                                <p className="text-sm text-muted-foreground mb-1">Thông báo lỗi</p>
+                                <p className="font-medium">{selectedLog.message}</p>
+                            </div>
+
+                            {/* Stack trace */}
+                            {selectedLog.detail && (
+                                <div>
+                                    <div className="flex items-center justify-between mb-1">
+                                        <p className="text-sm text-muted-foreground">Chi tiết kỹ thuật</p>
+                                        <Button
+                                            variant="ghost" size="sm"
+                                            onClick={() => {
+                                                navigator.clipboard.writeText(selectedLog.detail!)
+                                                toast.success("Đã copy")
+                                            }}
+                                        >
+                                            <Copy className="h-3 w-3 mr-1" /> Copy
+                                        </Button>
+                                    </div>
+                                    <StackTraceViewer detail={selectedLog.detail} />
+                                </div>
+                            )}
+
+                            {/* Actions */}
+                            <div className="flex justify-between pt-2 border-t">
+                                <Button
+                                    variant={selectedLog.resolved ? "outline" : "default"}
+                                    size="sm"
+                                    onClick={() => handleToggleResolved(selectedLog)}
+                                >
+                                    {selectedLog.resolved ? "Đánh dấu chưa xử lý" : "Đánh dấu đã xử lý"}
+                                </Button>
+                            </div>
+                        </div>
+                    )}
+                </DialogContent>
+            </Dialog>
+
+            {/* Delete Dialog */}
+            <Dialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
+                <DialogContent className="max-w-sm">
+                    <DialogHeader>
+                        <DialogTitle className="flex items-center gap-2">
+                            <Trash2 className="h-5 w-5 text-destructive" />
+                            Xóa log lỗi
+                        </DialogTitle>
+                    </DialogHeader>
+                    <div className="grid gap-2">
+                        {[7, 30, 90].map((d) => (
+                            <Button
+                                key={d} variant="outline" size="sm" className="justify-start"
+                                disabled={deleting}
+                                onClick={() => handleDeleteLogs("older_than", d)}
+                            >
+                                Xóa log cũ hơn {d} ngày
+                            </Button>
+                        ))}
+                        <Button
+                            variant="outline" size="sm"
+                            className="justify-start text-green-700"
+                            disabled={deleting}
+                            onClick={() => handleDeleteLogs("resolved")}
+                        >
+                            <CheckCircle2 className="mr-2 h-4 w-4" />
+                            Xóa tất cả log đã xử lý
+                        </Button>
+                    </div>
+                </DialogContent>
+            </Dialog>
+        </div>
+    )
+}