Add genre management functionality and update sidebar navigation

.gitignore

@@ -9,4 +9,6 @@ node_modules/
 .env*.local
 .DS_Store
 .env
-test-ebook/
+test-ebook/
+reader.code-workspace
+reader-api.code-workspace

app/mod/collapsible-sidebar.tsx

@@ -3,7 +3,7 @@
 import { useState, useEffect } from "react"
 import Link from "next/link"
 import { usePathname } from "next/navigation"
-import { AlertTriangle, BookOpen, Home, Sparkles, Star, ChevronLeft, ChevronRight } from "lucide-react"
+import { AlertTriangle, BookOpen, Home, Sparkles, Star, Tag, ChevronLeft, ChevronRight } from "lucide-react"
 import { cn } from "@/lib/utils"
 
 export function CollapsibleSidebar() {
@@ -31,6 +31,7 @@ export function CollapsibleSidebar() {
         { href: "/mod", label: "Tổng quan", icon: Home },
         { href: "/mod/truyen", label: "Quản lý truyện", icon: BookOpen },
         { href: "/mod/thieu-thong-tin", label: "Truyện thiếu dữ liệu", icon: AlertTriangle },
+        { href: "/mod/the-loai", label: "Quản lý thể loại", icon: Tag },
         { href: "/mod/de-cu", label: "Quản lý đề cử", icon: Star },
         { href: "/mod/ai-tool", label: "AI Tool", icon: Sparkles },
     ]

app/mod/the-loai/genre-client.tsx

@@ -0,0 +1,348 @@
+"use client"
+
+import { useEffect, useMemo, useState } from "react"
+import { GitMerge, Loader2, Pencil, Plus, Save, Tag, Trash2, X } from "lucide-react"
+import { toast } from "sonner"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+
+interface Genre {
+  id: string
+  name: string
+  slug: string
+  description?: string | null
+  icon?: string | null
+  novelCount?: number
+}
+
+export function GenreClient() {
+  const [genres, setGenres] = useState<Genre[]>([])
+  const [loading, setLoading] = useState(true)
+  const [submitting, setSubmitting] = useState(false)
+  const [keyword, setKeyword] = useState("")
+
+  // Form state
+  const [editingId, setEditingId] = useState<string | null>(null)
+  const [formName, setFormName] = useState("")
+  const [formDesc, setFormDesc] = useState("")
+  const [formIcon, setFormIcon] = useState("")
+
+  // Merge dialog
+  const [mergeOpen, setMergeOpen] = useState(false)
+  const [mergeSource, setMergeSource] = useState<Genre | null>(null)
+  const [mergeTargetId, setMergeTargetId] = useState("")
+  const [mergeKeyword, setMergeKeyword] = useState("")
+
+  // Delete confirm
+  const [deleteTarget, setDeleteTarget] = useState<Genre | null>(null)
+  const [deleteOpen, setDeleteOpen] = useState(false)
+
+  const filtered = useMemo(() => {
+    const q = keyword.trim().toLowerCase()
+    if (!q) return genres
+    return genres.filter(
+      (g) =>
+        g.name.toLowerCase().includes(q) ||
+        g.slug.toLowerCase().includes(q)
+    )
+  }, [keyword, genres])
+
+  const mergeTargetOptions = useMemo(() => {
+    const q = mergeKeyword.trim().toLowerCase()
+    return genres.filter(
+      (g) =>
+        g.id !== mergeSource?.id &&
+        (!q || g.name.toLowerCase().includes(q) || g.slug.toLowerCase().includes(q))
+    )
+  }, [genres, mergeSource, mergeKeyword])
+
+  const fetchGenres = async () => {
+    try {
+      const res = await fetch("/api/mod/the-loai")
+      if (!res.ok) throw new Error("Không thể tải danh sách thể loại")
+      const data: Genre[] = await res.json()
+      // Enrich with novelCount from public endpoint
+      const countRes = await fetch("/api/genres")
+      if (countRes.ok) {
+        const countData: Genre[] = await countRes.json()
+        const countMap = Object.fromEntries(countData.map((g) => [g.id, g.novelCount ?? 0]))
+        data.forEach((g) => { g.novelCount = countMap[g.id] ?? 0 })
+      }
+      setGenres(data)
+    } catch (err: any) {
+      toast.error(err.message || "Lỗi tải thể loại")
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => { fetchGenres() }, [])
+
+  const resetForm = () => {
+    setEditingId(null)
+    setFormName("")
+    setFormDesc("")
+    setFormIcon("")
+  }
+
+  const handleEdit = (g: Genre) => {
+    setEditingId(g.id)
+    setFormName(g.name)
+    setFormDesc(g.description || "")
+    setFormIcon(g.icon || "")
+    window.scrollTo({ top: 0, behavior: "smooth" })
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!formName.trim()) { toast.error("Vui lòng nhập tên thể loại"); return }
+
+    setSubmitting(true)
+    try {
+      const payload: Record<string, any> = {
+        name: formName.trim(),
+        description: formDesc.trim() || null,
+        icon: formIcon.trim() || null,
+      }
+      if (editingId) payload.id = editingId
+
+      const res = await fetch("/api/mod/the-loai", {
+        method: editingId ? "PUT" : "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(payload),
+      })
+      const data = await res.json()
+      if (!res.ok) throw new Error(data.detail || "Không thể lưu")
+      toast.success(editingId ? "Đã cập nhật thể loại" : "Đã tạo thể loại")
+      resetForm()
+      fetchGenres()
+    } catch (err: any) {
+      toast.error(err.message)
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  const confirmDelete = (g: Genre) => {
+    setDeleteTarget(g)
+    setDeleteOpen(true)
+  }
+
+  const handleDelete = async () => {
+    if (!deleteTarget) return
+    setSubmitting(true)
+    try {
+      const res = await fetch(`/api/mod/the-loai?id=${deleteTarget.id}`, { method: "DELETE" })
+      const data = await res.json()
+      if (!res.ok) throw new Error(data.detail || "Không thể xóa")
+      toast.success(`Đã xóa thể loại "${deleteTarget.name}"`)
+      if (editingId === deleteTarget.id) resetForm()
+      setDeleteOpen(false)
+      fetchGenres()
+    } catch (err: any) {
+      toast.error(err.message)
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  const openMerge = (g: Genre) => {
+    setMergeSource(g)
+    setMergeTargetId("")
+    setMergeKeyword("")
+    setMergeOpen(true)
+  }
+
+  const handleMerge = async () => {
+    if (!mergeSource || !mergeTargetId) { toast.error("Vui lòng chọn thể loại đích"); return }
+    setSubmitting(true)
+    try {
+      const res = await fetch("/api/mod/the-loai/merge", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ sourceId: mergeSource.id, targetId: mergeTargetId }),
+      })
+      const data = await res.json()
+      if (!res.ok) throw new Error(data.detail || "Không thể gộp")
+      const target = genres.find((g) => g.id === mergeTargetId)
+      toast.success(`Đã gộp "${mergeSource.name}" vào "${target?.name}"`)
+      setMergeOpen(false)
+      if (editingId === mergeSource.id) resetForm()
+      fetchGenres()
+    } catch (err: any) {
+      toast.error(err.message)
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center gap-3">
+        <Tag className="h-6 w-6 text-primary" />
+        <h1 className="text-2xl font-bold">Quản lý Thể Loại</h1>
+      </div>
+
+      {/* Form tạo / chỉnh sửa */}
+      <form onSubmit={handleSubmit} className="rounded-xl border bg-card p-5 space-y-4">
+        <h2 className="font-semibold text-base">{editingId ? "Chỉnh sửa thể loại" : "Tạo thể loại mới"}</h2>
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+          <div className="space-y-1">
+            <label className="text-sm font-medium">Tên thể loại <span className="text-destructive">*</span></label>
+            <Input value={formName} onChange={(e) => setFormName(e.target.value)} placeholder="Ví dụ: Kiếm Hiệp" />
+          </div>
+          <div className="space-y-1">
+            <label className="text-sm font-medium">Icon (tên Lucide)</label>
+            <Input value={formIcon} onChange={(e) => setFormIcon(e.target.value)} placeholder="Ví dụ: Sword, Flame, Heart..." />
+          </div>
+        </div>
+        <div className="space-y-1">
+          <label className="text-sm font-medium">Mô tả</label>
+          <Textarea value={formDesc} onChange={(e) => setFormDesc(e.target.value)} placeholder="Mô tả ngắn về thể loại..." rows={2} />
+        </div>
+        <div className="flex gap-2">
+          <Button type="submit" disabled={submitting} size="sm">
+            {submitting ? <Loader2 className="h-4 w-4 animate-spin" /> : editingId ? <Save className="h-4 w-4" /> : <Plus className="h-4 w-4" />}
+            <span className="ml-1">{editingId ? "Lưu thay đổi" : "Tạo thể loại"}</span>
+          </Button>
+          {editingId && (
+            <Button type="button" variant="ghost" size="sm" onClick={resetForm}>
+              <X className="h-4 w-4" /><span className="ml-1">Hủy</span>
+            </Button>
+          )}
+        </div>
+      </form>
+
+      {/* Danh sách */}
+      <div className="rounded-xl border bg-card">
+        <div className="flex items-center gap-3 border-b px-5 py-3">
+          <Input
+            placeholder="Tìm theo tên, slug..."
+            value={keyword}
+            onChange={(e) => setKeyword(e.target.value)}
+            className="max-w-xs h-8 text-sm"
+          />
+          <span className="ml-auto text-sm text-muted-foreground whitespace-nowrap">{filtered.length} / {genres.length} thể loại</span>
+        </div>
+
+        {loading ? (
+          <div className="flex items-center justify-center py-16">
+            <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+          </div>
+        ) : filtered.length === 0 ? (
+          <div className="py-16 text-center text-sm text-muted-foreground">Không tìm thấy thể loại nào</div>
+        ) : (
+          <div className="divide-y">
+            {filtered.map((g) => (
+              <div key={g.id} className={`flex items-center gap-3 px-5 py-3 hover:bg-muted/40 transition-colors ${editingId === g.id ? "bg-primary/5" : ""}`}>
+                <div className="flex-1 min-w-0">
+                  <p className="font-medium text-sm truncate">{g.name}</p>
+                  <p className="text-xs text-muted-foreground truncate">{g.slug}{g.description ? ` · ${g.description}` : ""}</p>
+                </div>
+                <span className="text-xs text-muted-foreground whitespace-nowrap shrink-0">
+                  {g.novelCount ?? 0} truyện
+                </span>
+                <div className="flex gap-1 shrink-0">
+                  <Button variant="ghost" size="icon" className="h-7 w-7" title="Chỉnh sửa" onClick={() => handleEdit(g)}>
+                    <Pencil className="h-3.5 w-3.5" />
+                  </Button>
+                  <Button variant="ghost" size="icon" className="h-7 w-7" title="Gộp thể loại" onClick={() => openMerge(g)}>
+                    <GitMerge className="h-3.5 w-3.5" />
+                  </Button>
+                  <Button variant="ghost" size="icon" className="h-7 w-7 text-destructive hover:text-destructive" title="Xóa" onClick={() => confirmDelete(g)}>
+                    <Trash2 className="h-3.5 w-3.5" />
+                  </Button>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Dialog xóa */}
+      <Dialog open={deleteOpen} onOpenChange={setDeleteOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Xác nhận xóa thể loại</DialogTitle>
+            <DialogDescription>
+              Thể loại <strong>"{deleteTarget?.name}"</strong> sẽ bị xóa vĩnh viễn
+              {(deleteTarget?.novelCount ?? 0) > 0 && (
+                <> và bị gỡ khỏi <strong>{deleteTarget?.novelCount} truyện</strong></>
+              )}. Hành động này không thể hoàn tác.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant="ghost" onClick={() => setDeleteOpen(false)}>Hủy</Button>
+            <Button variant="destructive" disabled={submitting} onClick={handleDelete}>
+              {submitting ? <Loader2 className="h-4 w-4 animate-spin mr-1" /> : null}
+              Xóa
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Dialog gộp */}
+      <Dialog open={mergeOpen} onOpenChange={setMergeOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Gộp thể loại</DialogTitle>
+            <DialogDescription>
+              Tất cả truyện của <strong>"{mergeSource?.name}"</strong> sẽ được chuyển sang thể loại đích,
+              sau đó <strong>"{mergeSource?.name}"</strong> sẽ bị xóa.
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-3 my-2">
+            <div className="rounded-md border bg-muted/40 px-3 py-2 text-sm">
+              <span className="text-muted-foreground">Nguồn (sẽ bị xóa): </span>
+              <strong>{mergeSource?.name}</strong>
+              {(mergeSource?.novelCount ?? 0) > 0 && <span className="text-muted-foreground"> · {mergeSource?.novelCount} truyện</span>}
+            </div>
+
+            <Input
+              placeholder="Tìm thể loại đích..."
+              value={mergeKeyword}
+              onChange={(e) => setMergeKeyword(e.target.value)}
+              className="h-8 text-sm"
+            />
+
+            <div className="max-h-52 overflow-y-auto rounded-md border divide-y">
+              {mergeTargetOptions.length === 0 ? (
+                <p className="py-4 text-center text-sm text-muted-foreground">Không có thể loại nào</p>
+              ) : (
+                mergeTargetOptions.map((g) => (
+                  <button
+                    key={g.id}
+                    type="button"
+                    onClick={() => setMergeTargetId(g.id)}
+                    className={`w-full flex items-center gap-2 px-3 py-2 text-sm text-left hover:bg-muted transition-colors ${mergeTargetId === g.id ? "bg-primary/10 font-medium" : ""}`}
+                  >
+                    <span className="flex-1">{g.name}</span>
+                    <span className="text-xs text-muted-foreground shrink-0">{g.novelCount ?? 0} truyện</span>
+                  </button>
+                ))
+              )}
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button variant="ghost" onClick={() => setMergeOpen(false)}>Hủy</Button>
+            <Button disabled={!mergeTargetId || submitting} onClick={handleMerge}>
+              {submitting ? <Loader2 className="h-4 w-4 animate-spin mr-1" /> : <GitMerge className="h-4 w-4 mr-1" />}
+              Gộp thể loại
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}

app/mod/the-loai/page.tsx

@@ -0,0 +1,13 @@
+import { getServerSession } from "next-auth/next"
+import { authOptions } from "@/lib/auth"
+import { redirect } from "next/navigation"
+import { GenreClient } from "./genre-client"
+
+export default async function ModTheLoaiPage() {
+  const session = await getServerSession(authOptions)
+  if (!session || (session.user.role !== "MOD" && session.user.role !== "ADMIN")) {
+    redirect("/")
+  }
+
+  return <GenreClient />
+}

app/the-loai/[slug]/page.tsx

@@ -6,6 +6,8 @@ import { readerApiFetch, readerApiFetchNullable } from "@/lib/server-api"
 
 export const dynamic = "force-dynamic"
 
+const PAGE_SIZE = 24
+
 type GenreItem = {
   id: string
   name: string
@@ -29,41 +31,50 @@ type BrowseNovel = {
 
 type BrowseResponse = {
   items: BrowseNovel[]
+  totalCount: number
+  totalPages: number
+  currentPage: number
 }
 
-function collapseSeriesRows<T extends { id: string; seriesId?: string | null }>(rows: T[]): T[] {
-  const pickedSeries = new Set<string>()
-  const output: T[] = []
-
-  for (const row of rows) {
-    if (!row.seriesId) {
-      output.push(row)
-      continue
-    }
-
-    if (pickedSeries.has(row.seriesId)) continue
-    pickedSeries.add(row.seriesId)
-    output.push(row)
-  }
-
-  return output
-}
-
-export default async function GenreDetailPage({ params }: { params: Promise<{ slug: string }> }) {
+export default async function GenreDetailPage({
+  params,
+  searchParams,
+}: {
+  params: Promise<{ slug: string }>
+  searchParams: Promise<{ [key: string]: string | undefined }>
+}) {
   const { slug } = await params
+  const resolved = await searchParams
+  const sort = resolved.sort || "latest"
+  const requestedPage = Math.max(1, Number(resolved.page || "1") || 1)
 
-  const genres = await readerApiFetch<GenreItem[]>("/api/genres")
-  const genre = genres.find((item) => item.slug === slug) || null
+  const genre = await readerApiFetchNullable<GenreItem>(`/api/genres/${encodeURIComponent(slug)}`)
 
   if (!genre) {
     notFound()
   }
 
-  const browse = await readerApiFetch<BrowseResponse>(`/api/novels/browse?genre=${encodeURIComponent(slug)}&sort=latest&page=1&limit=80`)
+  const browse = await readerApiFetch<BrowseResponse>(
+    `/api/novels/browse?genre=${encodeURIComponent(slug)}&sort=${sort}&page=${requestedPage}&limit=${PAGE_SIZE}&collapse_series=true`
+  )
 
-  const allNovels = collapseSeriesRows(browse.items).slice(0, 20)
+  const totalPages = Math.max(1, browse.totalPages || 1)
+  const currentPage = Math.min(requestedPage, totalPages)
+
+  const pageRangeStart = Math.max(1, currentPage - 2)
+  const pageRangeEnd = Math.min(totalPages, currentPage + 2)
+  const pageNumbers = Array.from(
+    { length: pageRangeEnd - pageRangeStart + 1 },
+    (_, i) => pageRangeStart + i
+  )
+
+  const buildPageHref = (page: number) => {
+    const p = new URLSearchParams()
+    if (sort !== "latest") p.set("sort", sort)
+    p.set("page", String(page))
+    return `/the-loai/${slug}?${p.toString()}`
+  }
 
-  // Basic layout without sort for purely server side representation without search params. Optional searchParams can be added later if needed.
   return (
     <div className="mx-auto max-w-6xl px-4 py-6">
       <div className="mb-6">
@@ -71,26 +82,68 @@ export default async function GenreDetailPage({ params }: { params: Promise<{ sl
           <ChevronLeft className="h-4 w-4" /> Thể Loại
         </Link>
         <h1 className="text-2xl font-bold text-foreground">{genre.name}</h1>
-        <p className="mt-1 text-sm text-muted-foreground">{genre.description}</p>
+        {genre.description && (
+          <p className="mt-1 text-sm text-muted-foreground">{genre.description}</p>
+        )}
       </div>
 
-      <div className="mb-4 flex items-center justify-between">
-        <p className="text-sm text-muted-foreground">{allNovels.length} truyện</p>
-        <div className="w-40" /> {/* Spacer for symmetry if we add sort later */}
+      <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
+        <p className="text-sm text-muted-foreground">
+          {browse.totalCount} truyện {totalPages > 1 && `(Trang ${currentPage}/${totalPages})`}
+        </p>
+        <form method="GET" action={`/the-loai/${slug}`} className="flex items-center gap-2">
+          <select
+            name="sort"
+            defaultValue={sort}
+            className="flex h-9 items-center rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-1 focus:ring-ring"
+          >
+            <option value="latest">Mới nhất</option>
+            <option value="popular">Xem nhiều</option>
+            <option value="rating">Đánh giá cao</option>
+            <option value="name">Theo tên</option>
+          </select>
+          <button type="submit" className="h-9 rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground">Lọc</button>
+        </form>
       </div>
 
-      {allNovels.length === 0 ? (
+      {browse.items.length === 0 ? (
         <div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
           <p className="text-lg font-medium">Chưa có truyện nào</p>
           <p className="text-sm">Thể loại này chưa có truyện, hãy quay lại sau.</p>
         </div>
       ) : (
         <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4">
-          {allNovels.map((novel) => (
+          {browse.items.map((novel) => (
             <NovelCard key={novel.id} novel={novel} />
           ))}
         </div>
       )}
+
+      {totalPages > 1 && (
+        <div className="mt-6 flex flex-wrap items-center justify-center gap-2">
+          <Link
+            href={buildPageHref(Math.max(1, currentPage - 1))}
+            className={`rounded-md border px-3 py-1.5 text-sm ${currentPage <= 1 ? "pointer-events-none opacity-50" : "hover:bg-muted"}`}
+          >
+            Trước
+          </Link>
+          {pageNumbers.map((page) => (
+            <Link
+              key={page}
+              href={buildPageHref(page)}
+              className={`rounded-md border px-3 py-1.5 text-sm ${page === currentPage ? "border-primary bg-primary text-primary-foreground" : "hover:bg-muted"}`}
+            >
+              {page}
+            </Link>
+          ))}
+          <Link
+            href={buildPageHref(Math.min(totalPages, currentPage + 1))}
+            className={`rounded-md border px-3 py-1.5 text-sm ${currentPage >= totalPages ? "pointer-events-none opacity-50" : "hover:bg-muted"}`}
+          >
+            Sau
+          </Link>
+        </div>
+      )}
     </div>
   )
 }

app/the-loai/page.tsx

@@ -15,7 +15,7 @@ const iconMap: Record<string, React.ReactNode> = {
   Shield: <Shield className="h-6 w-6" />,
 }
 
-export const dynamic = "force-dynamic"
+export const revalidate = 300 // cache 5 phút, genres ít thay đổi
 
 type GenreItem = {
   id: string

app/tim-kiem/page.tsx

@@ -98,16 +98,16 @@ export default async function SearchPage({
         sort: sortBy,
         genre: genreFilter === "all" ? "" : genreFilter,
         status: statusFilter === "all" ? "" : statusFilter,
-        page: "1",
-        limit: "500",
+        page: String(requestedPage),
+        limit: String(PAGE_SIZE),
+        collapse_series: "true",
       })
     )
 
-    const collapsed = collapseSeriesRows(browse.items)
-    totalResults = collapsed.length
-    totalPages = Math.max(1, Math.ceil(totalResults / PAGE_SIZE))
+    filteredNovels = browse.items
+    totalResults = browse.totalCount
+    totalPages = Math.max(1, browse.totalPages || 1)
     currentPage = Math.min(requestedPage, totalPages)
-    filteredNovels = collapsed.slice((currentPage - 1) * PAGE_SIZE, currentPage * PAGE_SIZE)
   }
 
   const pageRangeStart = Math.max(1, currentPage - 2)