feat: add backoffice authentication with login page

- Add login page with logo background, glassmorphism card
- Add session management via JWT (jose) with httpOnly cookie
- Add Next.js proxy middleware to protect all routes
- Add logout button in nav
- Restructure app into (app) route group to isolate login layout
- Add ADMIN_USERNAME, ADMIN_PASSWORD, SESSION_SECRET env vars

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

apps/backoffice/app/(app)/authors/[name]/page.tsx

@@ -0,0 +1,135 @@
+import { fetchBooks, fetchAllSeries, BooksPageDto, SeriesPageDto, getBookCoverUrl } from "@/lib/api";
+import { getServerTranslations } from "@/lib/i18n/server";
+import { BooksGrid } from "@/app/components/BookCard";
+import { OffsetPagination } from "@/app/components/ui";
+import Image from "next/image";
+import Link from "next/link";
+
+export const dynamic = "force-dynamic";
+
+export default async function AuthorDetailPage({
+  params,
+  searchParams,
+}: {
+  params: Promise<{ name: string }>;
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+}) {
+  const { t } = await getServerTranslations();
+  const { name: encodedName } = await params;
+  const authorName = decodeURIComponent(encodedName);
+  const searchParamsAwaited = await searchParams;
+  const page = typeof searchParamsAwaited.page === "string" ? parseInt(searchParamsAwaited.page) : 1;
+  const limit = typeof searchParamsAwaited.limit === "string" ? parseInt(searchParamsAwaited.limit) : 20;
+
+  // Fetch books by this author (server-side filtering via API) and series by this author
+  const [booksPage, seriesPage] = await Promise.all([
+    fetchBooks(undefined, undefined, page, limit, undefined, undefined, authorName).catch(
+      () => ({ items: [], total: 0, page: 1, limit }) as BooksPageDto
+    ),
+    fetchAllSeries(undefined, undefined, undefined, 1, 200, undefined, undefined, undefined, undefined, authorName).catch(
+      () => ({ items: [], total: 0, page: 1, limit: 200 }) as SeriesPageDto
+    ),
+  ]);
+
+  const totalPages = Math.ceil(booksPage.total / limit);
+
+  const authorSeries = seriesPage.items;
+
+  return (
+    <>
+      {/* Breadcrumb */}
+      <nav className="flex items-center gap-2 text-sm text-muted-foreground mb-6">
+        <Link href="/authors" className="hover:text-foreground transition-colors">
+          {t("authors.title")}
+        </Link>
+        <span>/</span>
+        <span className="text-foreground font-medium">{authorName}</span>
+      </nav>
+
+      {/* Author Header */}
+      <div className="flex items-center gap-4 mb-8">
+        <div className="w-16 h-16 rounded-full bg-accent/50 flex items-center justify-center flex-shrink-0">
+          <span className="text-2xl font-bold text-accent-foreground">
+            {authorName.charAt(0).toUpperCase()}
+          </span>
+        </div>
+        <div>
+          <h1 className="text-3xl font-bold text-foreground">{authorName}</h1>
+          <div className="flex items-center gap-4 mt-1">
+            <span className="text-sm text-muted-foreground">
+              {t("authors.bookCount", { count: String(booksPage.total), plural: booksPage.total !== 1 ? "s" : "" })}
+            </span>
+            {authorSeries.length > 0 && (
+              <span className="text-sm text-muted-foreground">
+                {t("authors.seriesCount", { count: String(authorSeries.length), plural: authorSeries.length !== 1 ? "s" : "" })}
+              </span>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Series Section */}
+      {authorSeries.length > 0 && (
+        <section className="mb-8">
+          <h2 className="text-xl font-semibold text-foreground mb-4">
+            {t("authors.seriesBy", { name: authorName })}
+          </h2>
+          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4">
+            {authorSeries.map((s) => (
+              <Link
+                key={`${s.library_id}-${s.name}`}
+                href={`/libraries/${s.library_id}/series/${encodeURIComponent(s.name)}`}
+                className="group"
+              >
+                <div className="bg-card rounded-xl shadow-sm border border-border/60 overflow-hidden hover:shadow-md hover:-translate-y-1 transition-all duration-200">
+                  <div className="aspect-[2/3] relative bg-muted/50">
+                    <Image
+                      src={getBookCoverUrl(s.first_book_id)}
+                      alt={s.name}
+                      fill
+                      className="object-cover"
+                      sizes="(max-width: 640px) 50vw, (max-width: 768px) 33vw, (max-width: 1024px) 25vw, 16vw"
+                    />
+                  </div>
+                  <div className="p-3">
+                    <h3 className="font-medium text-foreground truncate text-sm" title={s.name}>
+                      {s.name}
+                    </h3>
+                    <p className="text-xs text-muted-foreground mt-1">
+                      {t("authors.bookCount", { count: String(s.book_count), plural: s.book_count !== 1 ? "s" : "" })}
+                    </p>
+                  </div>
+                </div>
+              </Link>
+            ))}
+          </div>
+        </section>
+      )}
+
+      {/* Books Section */}
+      {booksPage.items.length > 0 && (
+        <section>
+          <h2 className="text-xl font-semibold text-foreground mb-4">
+            {t("authors.booksBy", { name: authorName })}
+          </h2>
+          <BooksGrid books={booksPage.items} />
+          <OffsetPagination
+            currentPage={page}
+            totalPages={totalPages}
+            pageSize={limit}
+            totalItems={booksPage.total}
+          />
+        </section>
+      )}
+
+      {/* Empty State */}
+      {booksPage.items.length === 0 && authorSeries.length === 0 && (
+        <div className="flex flex-col items-center justify-center py-16 text-center">
+          <p className="text-muted-foreground text-lg">
+            {t("authors.noResults")}
+          </p>
+        </div>
+      )}
+    </>
+  );
+}

apps/backoffice/app/(app)/authors/page.tsx

@@ -0,0 +1,122 @@
+import { fetchAuthors, AuthorsPageDto } from "@/lib/api";
+import { getServerTranslations } from "@/lib/i18n/server";
+import { LiveSearchForm } from "@/app/components/LiveSearchForm";
+import { Card, CardContent, OffsetPagination } from "@/app/components/ui";
+import Link from "next/link";
+
+export const dynamic = "force-dynamic";
+
+export default async function AuthorsPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+}) {
+  const { t } = await getServerTranslations();
+  const searchParamsAwaited = await searchParams;
+  const searchQuery = typeof searchParamsAwaited.q === "string" ? searchParamsAwaited.q : "";
+  const sort = typeof searchParamsAwaited.sort === "string" ? searchParamsAwaited.sort : undefined;
+  const page = typeof searchParamsAwaited.page === "string" ? parseInt(searchParamsAwaited.page) : 1;
+  const limit = typeof searchParamsAwaited.limit === "string" ? parseInt(searchParamsAwaited.limit) : 20;
+
+  const authorsPage = await fetchAuthors(
+    searchQuery || undefined,
+    page,
+    limit,
+    sort,
+  ).catch(() => ({ items: [], total: 0, page: 1, limit }) as AuthorsPageDto);
+
+  const totalPages = Math.ceil(authorsPage.total / limit);
+  const hasFilters = searchQuery || sort;
+
+  const sortOptions = [
+    { value: "", label: t("authors.sortName") },
+    { value: "books", label: t("authors.sortBooks") },
+  ];
+
+  return (
+    <>
+      <div className="mb-6">
+        <h1 className="text-3xl font-bold text-foreground flex items-center gap-3">
+          <svg className="w-8 h-8 text-violet-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
+          </svg>
+          {t("authors.title")}
+        </h1>
+      </div>
+
+      <Card className="mb-6">
+        <CardContent className="pt-6">
+          <LiveSearchForm
+            basePath="/authors"
+            fields={[
+              { name: "q", type: "text", label: t("common.search"), placeholder: t("authors.searchPlaceholder") },
+              { name: "sort", type: "select", label: t("books.sort"), options: sortOptions },
+            ]}
+          />
+        </CardContent>
+      </Card>
+
+      {/* Results count */}
+      <p className="text-sm text-muted-foreground mb-4">
+        {authorsPage.total} {t("authors.title").toLowerCase()}
+        {searchQuery && <> {t("authors.matchingQuery")} &quot;{searchQuery}&quot;</>}
+      </p>
+
+      {/* Authors List */}
+      {authorsPage.items.length > 0 ? (
+        <>
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+            {authorsPage.items.map((author) => (
+              <Link
+                key={author.name}
+                href={`/authors/${encodeURIComponent(author.name)}`}
+                className="group"
+              >
+                <div className="bg-card rounded-xl shadow-sm border border-border/60 overflow-hidden hover:shadow-md hover:-translate-y-1 transition-all duration-200 p-4">
+                  <div className="flex items-center gap-3">
+                    <div className="w-10 h-10 rounded-full bg-accent/50 flex items-center justify-center flex-shrink-0">
+                      <span className="text-lg font-semibold text-violet-500">
+                        {author.name.charAt(0).toUpperCase()}
+                      </span>
+                    </div>
+                    <div className="min-w-0">
+                      <h3 className="font-medium text-foreground truncate text-sm group-hover:text-violet-500 transition-colors" title={author.name}>
+                        {author.name}
+                      </h3>
+                      <div className="flex items-center gap-3 mt-0.5">
+                        <span className="text-xs text-muted-foreground">
+                          {t("authors.bookCount", { count: String(author.book_count), plural: author.book_count !== 1 ? "s" : "" })}
+                        </span>
+                        <span className="text-xs text-muted-foreground">
+                          {t("authors.seriesCount", { count: String(author.series_count), plural: author.series_count !== 1 ? "s" : "" })}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </Link>
+            ))}
+          </div>
+
+          <OffsetPagination
+            currentPage={page}
+            totalPages={totalPages}
+            pageSize={limit}
+            totalItems={authorsPage.total}
+          />
+        </>
+      ) : (
+        <div className="flex flex-col items-center justify-center py-16 text-center">
+          <div className="w-16 h-16 mb-4 text-muted-foreground/30">
+            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
+            </svg>
+          </div>
+          <p className="text-muted-foreground text-lg">
+            {hasFilters ? t("authors.noResults") : t("authors.noAuthors")}
+          </p>
+        </div>
+      )}
+    </>
+  );
+}

apps/backoffice/app/(app)/books/[id]/page.tsx

@@ -0,0 +1,242 @@
+import { fetchLibraries, getBookCoverUrl, BookDto, apiFetch, ReadingStatus } from "@/lib/api";
+import { BookPreview } from "@/app/components/BookPreview";
+import { ConvertButton } from "@/app/components/ConvertButton";
+import { MarkBookReadButton } from "@/app/components/MarkBookReadButton";
+import nextDynamic from "next/dynamic";
+import { SafeHtml } from "@/app/components/SafeHtml";
+import { getServerTranslations } from "@/lib/i18n/server";
+import Image from "next/image";
+import Link from "next/link";
+
+const EditBookForm = nextDynamic(
+  () => import("@/app/components/EditBookForm").then(m => m.EditBookForm)
+);
+import { notFound } from "next/navigation";
+
+export const dynamic = "force-dynamic";
+
+const readingStatusClassNames: Record<ReadingStatus, string> = {
+  unread: "bg-muted/60 text-muted-foreground border border-border",
+  reading: "bg-amber-500/15 text-amber-600 dark:text-amber-400 border border-amber-500/30",
+  read: "bg-green-500/15 text-green-600 dark:text-green-400 border border-green-500/30",
+};
+
+async function fetchBook(bookId: string): Promise<BookDto | null> {
+  try {
+    return await apiFetch<BookDto>(`/books/${bookId}`);
+  } catch {
+    return null;
+  }
+}
+
+export default async function BookDetailPage({
+  params
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+  const [book, libraries] = await Promise.all([
+    fetchBook(id),
+    fetchLibraries().catch(() => [] as { id: string; name: string }[])
+  ]);
+
+  if (!book) {
+    notFound();
+  }
+
+  const { t, locale } = await getServerTranslations();
+
+  const library = libraries.find(l => l.id === book.library_id);
+  const formatBadge = (book.format ?? book.kind).toUpperCase();
+  const formatColor =
+    formatBadge === "CBZ" ? "bg-success/10 text-success border-success/30" :
+    formatBadge === "CBR" ? "bg-warning/10 text-warning border-warning/30" :
+    formatBadge === "PDF" ? "bg-destructive/10 text-destructive border-destructive/30" :
+    "bg-muted/50 text-muted-foreground border-border";
+  const statusLabel = t(`status.${book.reading_status}` as "status.unread" | "status.reading" | "status.read");
+  const statusClassName = readingStatusClassNames[book.reading_status];
+
+  return (
+    <div className="space-y-6">
+      {/* Breadcrumb */}
+      <div className="flex items-center gap-2 text-sm">
+        <Link href="/libraries" className="text-muted-foreground hover:text-primary transition-colors">
+          {t("bookDetail.libraries")}
+        </Link>
+        <span className="text-muted-foreground">/</span>
+        {library && (
+          <>
+            <Link
+              href={`/libraries/${book.library_id}/series`}
+              className="text-muted-foreground hover:text-primary transition-colors"
+            >
+              {library.name}
+            </Link>
+            <span className="text-muted-foreground">/</span>
+          </>
+        )}
+        {book.series && (
+          <>
+            <Link
+              href={`/libraries/${book.library_id}/series/${encodeURIComponent(book.series)}`}
+              className="text-muted-foreground hover:text-primary transition-colors"
+            >
+              {book.series}
+            </Link>
+            <span className="text-muted-foreground">/</span>
+          </>
+        )}
+        <span className="text-foreground font-medium truncate">{book.title}</span>
+      </div>
+
+      {/* Hero */}
+      <div className="flex flex-col sm:flex-row gap-6">
+        {/* Cover */}
+        <div className="flex-shrink-0">
+          <div className="w-48 aspect-[2/3] relative rounded-xl overflow-hidden shadow-card border border-border">
+            <Image
+              src={getBookCoverUrl(book.id)}
+              alt={t("bookDetail.coverOf", { title: book.title })}
+              fill
+              className="object-cover"
+              sizes="192px"
+              loading="lazy"
+            />
+          </div>
+        </div>
+
+        {/* Info */}
+        <div className="flex-1 space-y-4">
+          <div className="flex items-start justify-between gap-4">
+            <div>
+              <h1 className="text-3xl font-bold text-foreground">{book.title}</h1>
+              {book.author && (
+                <p className="text-base text-muted-foreground mt-1">{book.author}</p>
+              )}
+            </div>
+            <EditBookForm book={book} />
+          </div>
+
+          {/* Series + Volume link */}
+          {book.series && (
+            <div className="flex items-center gap-2 text-sm">
+              <Link
+                href={`/libraries/${book.library_id}/series/${encodeURIComponent(book.series)}`}
+                className="text-primary hover:text-primary/80 transition-colors font-medium"
+              >
+                {book.series}
+              </Link>
+              {book.volume != null && (
+                <span className="px-2 py-0.5 bg-primary/10 text-primary rounded-md text-xs font-semibold">
+                  Vol. {book.volume}
+                </span>
+              )}
+            </div>
+          )}
+
+          {/* Reading status + actions */}
+          <div className="flex flex-wrap items-center gap-3">
+            <span className={`inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold ${statusClassName}`}>
+              {statusLabel}
+              {book.reading_status === "reading" && book.reading_current_page != null && ` · p. ${book.reading_current_page}`}
+            </span>
+            {book.reading_last_read_at && (
+              <span className="text-xs text-muted-foreground">
+                {new Date(book.reading_last_read_at).toLocaleDateString(locale)}
+              </span>
+            )}
+            <MarkBookReadButton bookId={book.id} currentStatus={book.reading_status} />
+            {book.file_format === "cbr" && <ConvertButton bookId={book.id} />}
+          </div>
+
+          {/* Metadata pills */}
+          <div className="flex flex-wrap items-center gap-2">
+            <span className={`inline-flex px-2.5 py-1 rounded-full text-xs font-semibold border ${formatColor}`}>
+              {formatBadge}
+            </span>
+            {book.page_count && (
+              <span className="inline-flex px-2.5 py-1 rounded-full text-xs font-medium bg-muted/50 text-muted-foreground border border-border">
+                {book.page_count} {t("dashboard.pages").toLowerCase()}
+              </span>
+            )}
+            {book.language && (
+              <span className="inline-flex px-2.5 py-1 rounded-full text-xs font-medium bg-muted/50 text-muted-foreground border border-border">
+                {book.language.toUpperCase()}
+              </span>
+            )}
+            {book.isbn && (
+              <span className="inline-flex px-2.5 py-1 rounded-full text-xs font-mono font-medium bg-muted/50 text-muted-foreground border border-border">
+                ISBN {book.isbn}
+              </span>
+            )}
+            {book.publish_date && (
+              <span className="inline-flex px-2.5 py-1 rounded-full text-xs font-medium bg-muted/50 text-muted-foreground border border-border">
+                {book.publish_date}
+              </span>
+            )}
+          </div>
+
+          {/* Description */}
+          {book.summary && (
+            <SafeHtml html={book.summary} className="text-sm text-muted-foreground leading-relaxed" />
+          )}
+        </div>
+      </div>
+
+      {/* Technical info (collapsible) */}
+      <details className="group">
+        <summary className="cursor-pointer text-xs text-muted-foreground hover:text-foreground transition-colors select-none flex items-center gap-1.5">
+          <svg className="w-3.5 h-3.5 transition-transform group-open:rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+          </svg>
+          {t("bookDetail.technicalInfo")}
+        </summary>
+        <div className="mt-3 p-4 rounded-lg bg-muted/30 border border-border/50 space-y-2 text-xs">
+          {book.file_path && (
+            <div className="flex flex-col gap-0.5">
+              <span className="text-muted-foreground">{t("bookDetail.file")}</span>
+              <code className="font-mono text-foreground break-all">{book.file_path}</code>
+            </div>
+          )}
+          {book.file_format && (
+            <div className="flex items-center justify-between">
+              <span className="text-muted-foreground">{t("bookDetail.fileFormat")}</span>
+              <span className="text-foreground">{book.file_format.toUpperCase()}</span>
+            </div>
+          )}
+          {book.file_parse_status && (
+            <div className="flex items-center justify-between">
+              <span className="text-muted-foreground">{t("bookDetail.parsing")}</span>
+              <span className={`inline-flex px-2 py-0.5 rounded-full text-xs font-medium ${
+                book.file_parse_status === "success" ? "bg-success/10 text-success" :
+                book.file_parse_status === "failed" ? "bg-destructive/10 text-destructive" :
+                "bg-muted/50 text-muted-foreground"
+              }`}>
+                {book.file_parse_status}
+              </span>
+            </div>
+          )}
+          <div className="flex items-center justify-between">
+            <span className="text-muted-foreground">Book ID</span>
+            <code className="font-mono text-foreground">{book.id}</code>
+          </div>
+          <div className="flex items-center justify-between">
+            <span className="text-muted-foreground">Library ID</span>
+            <code className="font-mono text-foreground">{book.library_id}</code>
+          </div>
+          {book.updated_at && (
+            <div className="flex items-center justify-between">
+              <span className="text-muted-foreground">{t("bookDetail.updatedAt")}</span>
+              <span className="text-foreground">{new Date(book.updated_at).toLocaleString(locale)}</span>
+            </div>
+          )}
+        </div>
+      </details>
+
+      {/* Book Preview */}
+      {book.page_count && book.page_count > 0 && (
+        <BookPreview bookId={book.id} pageCount={book.page_count} />
+      )}
+    </div>
+  );
+}

apps/backoffice/app/(app)/books/page.tsx

@@ -0,0 +1,211 @@
+import { fetchBooks, searchBooks, fetchLibraries, BookDto, LibraryDto, SeriesHitDto, getBookCoverUrl } from "@/lib/api";
+import { BooksGrid, EmptyState } from "@/app/components/BookCard";
+import { LiveSearchForm } from "@/app/components/LiveSearchForm";
+import { Card, CardContent, OffsetPagination } from "@/app/components/ui";
+import Link from "next/link";
+import Image from "next/image";
+import { getServerTranslations } from "@/lib/i18n/server";
+
+export const dynamic = "force-dynamic";
+
+export default async function BooksPage({
+  searchParams
+}: {
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+}) {
+  const { t } = await getServerTranslations();
+  const searchParamsAwaited = await searchParams;
+  const libraryId = typeof searchParamsAwaited.library === "string" ? searchParamsAwaited.library : undefined;
+  const searchQuery = typeof searchParamsAwaited.q === "string" ? searchParamsAwaited.q : "";
+  const readingStatus = typeof searchParamsAwaited.status === "string" ? searchParamsAwaited.status : undefined;
+  const format = typeof searchParamsAwaited.format === "string" ? searchParamsAwaited.format : undefined;
+  const metadataProvider = typeof searchParamsAwaited.metadata === "string" ? searchParamsAwaited.metadata : undefined;
+  const sort = typeof searchParamsAwaited.sort === "string" ? searchParamsAwaited.sort : undefined;
+  const page = typeof searchParamsAwaited.page === "string" ? parseInt(searchParamsAwaited.page) : 1;
+  const limit = typeof searchParamsAwaited.limit === "string" ? parseInt(searchParamsAwaited.limit) : 20;
+
+  const [libraries] = await Promise.all([
+    fetchLibraries().catch(() => [] as LibraryDto[])
+  ]);
+
+  let books: BookDto[] = [];
+  let total = 0;
+  let searchResults: BookDto[] | null = null;
+  let seriesHits: SeriesHitDto[] = [];
+  let totalHits: number | null = null;
+
+  if (searchQuery) {
+    const searchResponse = await searchBooks(searchQuery, libraryId, limit).catch(() => null);
+    if (searchResponse) {
+      seriesHits = searchResponse.series_hits ?? [];
+      searchResults = searchResponse.hits.map(hit => ({
+        id: hit.id,
+        library_id: hit.library_id,
+        kind: hit.kind,
+        title: hit.title,
+        author: hit.authors?.[0] ?? null,
+        authors: hit.authors ?? [],
+        series: hit.series,
+        volume: hit.volume,
+        language: hit.language,
+        page_count: null,
+        format: null,
+        file_path: null,
+        file_format: null,
+        file_parse_status: null,
+        updated_at: "",
+        reading_status: "unread" as const,
+        reading_current_page: null,
+        reading_last_read_at: null,
+        summary: null,
+        isbn: null,
+        publish_date: null,
+      }));
+      totalHits = searchResponse.estimated_total_hits;
+    }
+  } else {
+    const booksPage = await fetchBooks(libraryId, undefined, page, limit, readingStatus, sort, undefined, format, metadataProvider).catch(() => ({
+      items: [] as BookDto[],
+      total: 0,
+      page: 1,
+      limit,
+    }));
+    books = booksPage.items;
+    total = booksPage.total;
+  }
+
+  const displayBooks = (searchResults || books).map(book => ({
+    ...book,
+    coverUrl: getBookCoverUrl(book.id)
+  }));
+
+  const totalPages = Math.ceil(total / limit);
+
+  const libraryOptions = [
+    { value: "", label: t("books.allLibraries") },
+    ...libraries.map((lib) => ({ value: lib.id, label: lib.name })),
+  ];
+
+  const statusOptions = [
+    { value: "", label: t("common.all") },
+    { value: "unread", label: t("status.unread") },
+    { value: "reading", label: t("status.reading") },
+    { value: "read", label: t("status.read") },
+  ];
+
+  const formatOptions = [
+    { value: "", label: t("books.allFormats") },
+    { value: "cbz", label: "CBZ" },
+    { value: "cbr", label: "CBR" },
+    { value: "pdf", label: "PDF" },
+    { value: "epub", label: "EPUB" },
+  ];
+
+  const metadataOptions = [
+    { value: "", label: t("series.metadataAll") },
+    { value: "linked", label: t("series.metadataLinked") },
+    { value: "unlinked", label: t("series.metadataUnlinked") },
+  ];
+
+  const sortOptions = [
+    { value: "", label: t("books.sortTitle") },
+    { value: "latest", label: t("books.sortLatest") },
+  ];
+
+  const hasFilters = searchQuery || libraryId || readingStatus || format || metadataProvider || sort;
+
+  return (
+    <>
+      <div className="mb-6">
+        <h1 className="text-3xl font-bold text-foreground flex items-center gap-3">
+          <svg className="w-8 h-8 text-success" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+          </svg>
+          {t("books.title")}
+        </h1>
+      </div>
+
+      <Card className="mb-6">
+        <CardContent className="pt-6">
+          <LiveSearchForm
+            basePath="/books"
+            fields={[
+              { name: "q", type: "text", label: t("common.search"), placeholder: t("books.searchPlaceholder") },
+              { name: "library", type: "select", label: t("books.library"), options: libraryOptions },
+              { name: "status", type: "select", label: t("books.status"), options: statusOptions },
+              { name: "format", type: "select", label: t("books.format"), options: formatOptions },
+              { name: "metadata", type: "select", label: t("series.metadata"), options: metadataOptions },
+              { name: "sort", type: "select", label: t("books.sort"), options: sortOptions },
+            ]}
+          />
+        </CardContent>
+      </Card>
+
+      {/* Résultats */}
+      {searchQuery && totalHits !== null ? (
+        <p className="text-sm text-muted-foreground mb-4">
+          {t("books.resultCountFor", { count: String(totalHits), plural: totalHits !== 1 ? "s" : "", query: searchQuery })}
+        </p>
+      ) : !searchQuery && (
+        <p className="text-sm text-muted-foreground mb-4">
+          {t("books.resultCount", { count: String(total), plural: total !== 1 ? "s" : "" })}
+        </p>
+      )}
+
+      {/* Séries matchantes */}
+      {seriesHits.length > 0 && (
+        <div className="mb-8">
+          <h2 className="text-lg font-semibold text-foreground mb-3">{t("books.seriesHeading")}</h2>
+          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
+            {seriesHits.map((s) => (
+              <Link
+                key={`${s.library_id}-${s.name}`}
+                href={`/libraries/${s.library_id}/series/${encodeURIComponent(s.name)}`}
+                className="group"
+              >
+                <div className="bg-card rounded-xl shadow-sm border border-border/60 overflow-hidden hover:shadow-md transition-shadow duration-200">
+                  <div className="aspect-[2/3] relative bg-muted/50">
+                    <Image
+                      src={getBookCoverUrl(s.first_book_id)}
+                      alt={t("books.coverOf", { name: s.name })}
+                      fill
+                      className="object-cover"
+                      sizes="(max-width: 640px) 50vw, (max-width: 768px) 33vw, (max-width: 1024px) 25vw, 16vw"
+                    />
+                  </div>
+                  <div className="p-2">
+                    <h3 className="font-medium text-foreground truncate text-sm" title={s.name}>
+                      {s.name === "unclassified" ? t("books.unclassified") : s.name}
+                    </h3>
+                    <p className="text-xs text-muted-foreground mt-0.5">
+                      {t("books.bookCount", { count: String(s.book_count), plural: s.book_count !== 1 ? "s" : "" })}
+                    </p>
+                  </div>
+                </div>
+              </Link>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Grille de livres */}
+      {displayBooks.length > 0 ? (
+        <>
+          {searchQuery && <h2 className="text-lg font-semibold text-foreground mb-3">{t("books.title")}</h2>}
+          <BooksGrid books={displayBooks} />
+
+          {!searchQuery && (
+            <OffsetPagination
+              currentPage={page}
+              totalPages={totalPages}
+              pageSize={limit}
+              totalItems={total}
+            />
+          )}
+        </>
+      ) : (
+        <EmptyState message={searchQuery ? t("books.noResults", { query: searchQuery }) : t("books.noBooks")} />
+      )}
+    </>
+  );
+}

apps/backoffice/app/(app)/jobs/[id]/page.tsx

@@ -0,0 +1,809 @@
+export const dynamic = "force-dynamic";
+
+import { notFound } from "next/navigation";
+import Link from "next/link";
+import { apiFetch, getMetadataBatchReport, getMetadataBatchResults, getMetadataRefreshReport, MetadataBatchReportDto, MetadataBatchResultDto, MetadataRefreshReportDto } from "@/lib/api";
+import {
+  Card, CardHeader, CardTitle, CardDescription, CardContent,
+  StatusBadge, JobTypeBadge, StatBox, ProgressBar
+} from "@/app/components/ui";
+import { JobDetailLive } from "@/app/components/JobDetailLive";
+import { getServerTranslations } from "@/lib/i18n/server";
+
+interface JobDetailPageProps {
+  params: Promise<{ id: string }>;
+}
+
+interface JobDetails {
+  id: string;
+  library_id: string | null;
+  book_id: string | null;
+  type: string;
+  status: string;
+  created_at: string;
+  started_at: string | null;
+  finished_at: string | null;
+  phase2_started_at: string | null;
+  generating_thumbnails_started_at: string | null;
+  current_file: string | null;
+  progress_percent: number | null;
+  processed_files: number | null;
+  total_files: number | null;
+  stats_json: {
+    scanned_files: number;
+    indexed_files: number;
+    removed_files: number;
+    errors: number;
+    warnings: number;
+  } | null;
+  error_opt: string | null;
+}
+
+interface JobError {
+  id: string;
+  file_path: string;
+  error_message: string;
+  created_at: string;
+}
+
+
+async function getJobDetails(jobId: string): Promise<JobDetails | null> {
+  try {
+    return await apiFetch<JobDetails>(`/index/jobs/${jobId}`);
+  } catch {
+    return null;
+  }
+}
+
+async function getJobErrors(jobId: string): Promise<JobError[]> {
+  try {
+    return await apiFetch<JobError[]>(`/index/jobs/${jobId}/errors`);
+  } catch {
+    return [];
+  }
+}
+
+function formatDuration(start: string, end: string | null): string {
+  const startDate = new Date(start);
+  const endDate = end ? new Date(end) : new Date();
+  const diff = endDate.getTime() - startDate.getTime();
+
+  if (diff < 60000) return `${Math.floor(diff / 1000)}s`;
+  if (diff < 3600000) return `${Math.floor(diff / 60000)}m ${Math.floor((diff % 60000) / 1000)}s`;
+  return `${Math.floor(diff / 3600000)}h ${Math.floor((diff % 3600000) / 60000)}m`;
+}
+
+function formatSpeed(count: number, durationMs: number): string {
+  if (durationMs === 0 || count === 0) return "-";
+  return `${(count / (durationMs / 1000)).toFixed(1)}/s`;
+}
+
+export default async function JobDetailPage({ params }: JobDetailPageProps) {
+  const { id } = await params;
+  const [job, errors] = await Promise.all([
+    getJobDetails(id),
+    getJobErrors(id),
+  ]);
+
+  if (!job) {
+    notFound();
+  }
+
+  const { t, locale } = await getServerTranslations();
+
+  const JOB_TYPE_INFO: Record<string, { label: string; description: string; isThumbnailOnly: boolean }> = {
+    rebuild: {
+      label: t("jobType.rebuildLabel"),
+      description: t("jobType.rebuildDesc"),
+      isThumbnailOnly: false,
+    },
+    full_rebuild: {
+      label: t("jobType.full_rebuildLabel"),
+      description: t("jobType.full_rebuildDesc"),
+      isThumbnailOnly: false,
+    },
+    rescan: {
+      label: t("jobType.rescanLabel"),
+      description: t("jobType.rescanDesc"),
+      isThumbnailOnly: false,
+    },
+    thumbnail_rebuild: {
+      label: t("jobType.thumbnail_rebuildLabel"),
+      description: t("jobType.thumbnail_rebuildDesc"),
+      isThumbnailOnly: true,
+    },
+    thumbnail_regenerate: {
+      label: t("jobType.thumbnail_regenerateLabel"),
+      description: t("jobType.thumbnail_regenerateDesc"),
+      isThumbnailOnly: true,
+    },
+    cbr_to_cbz: {
+      label: t("jobType.cbr_to_cbzLabel"),
+      description: t("jobType.cbr_to_cbzDesc"),
+      isThumbnailOnly: false,
+    },
+    metadata_batch: {
+      label: t("jobType.metadata_batchLabel"),
+      description: t("jobType.metadata_batchDesc"),
+      isThumbnailOnly: false,
+    },
+    metadata_refresh: {
+      label: t("jobType.metadata_refreshLabel"),
+      description: t("jobType.metadata_refreshDesc"),
+      isThumbnailOnly: false,
+    },
+  };
+
+  const isMetadataBatch = job.type === "metadata_batch";
+  const isMetadataRefresh = job.type === "metadata_refresh";
+
+  // Fetch batch report & results for metadata_batch jobs
+  let batchReport: MetadataBatchReportDto | null = null;
+  let batchResults: MetadataBatchResultDto[] = [];
+  if (isMetadataBatch) {
+    [batchReport, batchResults] = await Promise.all([
+      getMetadataBatchReport(id).catch(() => null),
+      getMetadataBatchResults(id).catch(() => []),
+    ]);
+  }
+
+  // Fetch refresh report for metadata_refresh jobs
+  let refreshReport: MetadataRefreshReportDto | null = null;
+  if (isMetadataRefresh) {
+    refreshReport = await getMetadataRefreshReport(id).catch(() => null);
+  }
+
+  const typeInfo = JOB_TYPE_INFO[job.type] ?? {
+    label: job.type,
+    description: null,
+    isThumbnailOnly: false,
+  };
+
+  const durationMs = job.started_at
+    ? new Date(job.finished_at || new Date()).getTime() - new Date(job.started_at).getTime()
+    : 0;
+
+  const isCompleted = job.status === "success";
+  const isFailed = job.status === "failed";
+  const isCancelled = job.status === "cancelled";
+  const isTerminal = isCompleted || isFailed || isCancelled;
+  const isExtractingPages = job.status === "extracting_pages";
+  const isThumbnailPhase = job.status === "generating_thumbnails";
+  const isPhase2 = isExtractingPages || isThumbnailPhase;
+  const { isThumbnailOnly } = typeInfo;
+
+  // Which label to use for the progress card
+  const progressTitle = isMetadataBatch
+    ? t("jobDetail.metadataSearch")
+    : isMetadataRefresh
+    ? t("jobDetail.metadataRefresh")
+    : isThumbnailOnly
+      ? t("jobType.thumbnail_rebuild")
+      : isExtractingPages
+        ? t("jobDetail.phase2a")
+        : isThumbnailPhase
+          ? t("jobDetail.phase2b")
+          : t("jobDetail.phase1");
+
+  const progressDescription = isMetadataBatch
+    ? t("jobDetail.metadataSearchDesc")
+    : isMetadataRefresh
+    ? t("jobDetail.metadataRefreshDesc")
+    : isThumbnailOnly
+      ? undefined
+      : isExtractingPages
+        ? t("jobDetail.phase2aDesc")
+        : isThumbnailPhase
+          ? t("jobDetail.phase2bDesc")
+          : t("jobDetail.phase1Desc");
+
+  // Speed metric: thumbnail count for thumbnail jobs, scanned files for index jobs
+  const speedCount = isThumbnailOnly
+    ? (job.processed_files ?? 0)
+    : (job.stats_json?.scanned_files ?? 0);
+
+  const showProgressCard =
+    (isCompleted || isFailed || job.status === "running" || isPhase2) &&
+    (job.total_files != null || !!job.current_file);
+
+  return (
+    <>
+      <JobDetailLive jobId={id} isTerminal={isTerminal} />
+      <div className="mb-6">
+        <Link
+          href="/jobs"
+          className="inline-flex items-center text-sm text-muted-foreground hover:text-primary transition-colors duration-200"
+        >
+          <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+          </svg>
+          {t("jobDetail.backToJobs")}
+        </Link>
+        <h1 className="text-3xl font-bold text-foreground mt-2">{t("jobDetail.title")}</h1>
+      </div>
+
+      {/* Summary banner — completed */}
+      {isCompleted && job.started_at && (
+        <div className="mb-6 p-4 rounded-xl bg-success/10 border border-success/30 flex items-start gap-3">
+          <svg className="w-5 h-5 text-success mt-0.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
+          <div className="text-sm text-success">
+            <span className="font-semibold">{t("jobDetail.completedIn", { duration: formatDuration(job.started_at, job.finished_at) })}</span>
+            {isMetadataBatch && batchReport && (
+              <span className="ml-2 text-success/80">
+                — {batchReport.auto_matched} {t("jobDetail.autoMatched").toLowerCase()}, {batchReport.already_linked} {t("jobDetail.alreadyLinked").toLowerCase()}, {batchReport.no_results} {t("jobDetail.noResults").toLowerCase()}, {batchReport.errors} {t("jobDetail.errors").toLowerCase()}
+              </span>
+            )}
+            {isMetadataRefresh && refreshReport && (
+              <span className="ml-2 text-success/80">
+                — {refreshReport.refreshed} {t("jobDetail.refreshed").toLowerCase()}, {refreshReport.unchanged} {t("jobDetail.unchanged").toLowerCase()}, {refreshReport.errors} {t("jobDetail.errors").toLowerCase()}
+              </span>
+            )}
+            {!isMetadataBatch && !isMetadataRefresh && job.stats_json && (
+              <span className="ml-2 text-success/80">
+                — {job.stats_json.scanned_files} {t("jobDetail.scanned").toLowerCase()}, {job.stats_json.indexed_files} {t("jobDetail.indexed").toLowerCase()}
+                {job.stats_json.removed_files > 0 && `, ${job.stats_json.removed_files} ${t("jobDetail.removed").toLowerCase()}`}
+                {(job.stats_json.warnings ?? 0) > 0 && `, ${job.stats_json.warnings} ${t("jobDetail.warnings").toLowerCase()}`}
+                {job.stats_json.errors > 0 && `, ${job.stats_json.errors} ${t("jobDetail.errors").toLowerCase()}`}
+                {job.total_files != null && job.total_files > 0 && `, ${job.total_files} ${t("jobType.thumbnail_rebuild").toLowerCase()}`}
+              </span>
+            )}
+            {!isMetadataBatch && !isMetadataRefresh && !job.stats_json && isThumbnailOnly && job.total_files != null && (
+              <span className="ml-2 text-success/80">
+                — {job.processed_files ?? job.total_files} {t("jobDetail.generated").toLowerCase()}
+              </span>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Summary banner — failed */}
+      {isFailed && (
+        <div className="mb-6 p-4 rounded-xl bg-destructive/10 border border-destructive/30 flex items-start gap-3">
+          <svg className="w-5 h-5 text-destructive mt-0.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
+          <div className="text-sm text-destructive">
+            <span className="font-semibold">{t("jobDetail.jobFailed")}</span>
+            {job.started_at && (
+              <span className="ml-2 text-destructive/80">{t("jobDetail.failedAfter", { duration: formatDuration(job.started_at, job.finished_at) })}</span>
+            )}
+            {job.error_opt && (
+              <p className="mt-1 text-destructive/70 font-mono text-xs break-all">{job.error_opt}</p>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Summary banner — cancelled */}
+      {isCancelled && (
+        <div className="mb-6 p-4 rounded-xl bg-muted border border-border flex items-start gap-3">
+          <svg className="w-5 h-5 text-muted-foreground mt-0.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
+          </svg>
+          <span className="text-sm text-muted-foreground">
+            <span className="font-semibold">{t("jobDetail.cancelled")}</span>
+            {job.started_at && (
+              <span className="ml-2">{t("jobDetail.failedAfter", { duration: formatDuration(job.started_at, job.finished_at) })}</span>
+            )}
+          </span>
+        </div>
+      )}
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {/* Overview Card */}
+        <Card>
+          <CardHeader>
+            <CardTitle>{t("jobDetail.overview")}</CardTitle>
+            {typeInfo.description && (
+              <CardDescription>{typeInfo.description}</CardDescription>
+            )}
+          </CardHeader>
+          <CardContent className="space-y-3">
+            <div className="flex items-center justify-between py-2 border-b border-border/60">
+              <span className="text-sm text-muted-foreground">ID</span>
+              <code className="px-2 py-1 bg-muted rounded font-mono text-sm text-foreground">{job.id}</code>
+            </div>
+            <div className="flex items-center justify-between py-2 border-b border-border/60">
+              <span className="text-sm text-muted-foreground">{t("jobsList.type")}</span>
+              <div className="flex items-center gap-2">
+                <JobTypeBadge type={job.type} />
+                <span className="text-sm text-muted-foreground">{typeInfo.label}</span>
+              </div>
+            </div>
+            <div className="flex items-center justify-between py-2 border-b border-border/60">
+              <span className="text-sm text-muted-foreground">{t("jobsList.status")}</span>
+              <StatusBadge status={job.status} />
+            </div>
+            <div className={`flex items-center justify-between py-2 ${(job.book_id || job.started_at) ? "border-b border-border/60" : ""}`}>
+              <span className="text-sm text-muted-foreground">{t("jobDetail.library")}</span>
+              <span className="text-sm text-foreground">{job.library_id || t("jobDetail.allLibraries")}</span>
+            </div>
+            {job.book_id && (
+              <div className={`flex items-center justify-between py-2 ${job.started_at ? "border-b border-border/60" : ""}`}>
+                <span className="text-sm text-muted-foreground">{t("jobDetail.book")}</span>
+                <Link
+                  href={`/books/${job.book_id}`}
+                  className="text-sm text-primary hover:text-primary/80 font-mono hover:underline"
+                >
+                  {job.book_id.slice(0, 8)}…
+                </Link>
+              </div>
+            )}
+            {job.started_at && (
+              <div className="flex items-center justify-between py-2">
+                <span className="text-sm text-muted-foreground">{t("jobsList.duration")}</span>
+                <span className="text-sm font-semibold text-foreground">
+                  {formatDuration(job.started_at, job.finished_at)}
+                </span>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* Timeline Card */}
+        <Card>
+          <CardHeader>
+            <CardTitle>{t("jobDetail.timeline")}</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="relative">
+              {/* Vertical line */}
+              <div className="absolute left-[7px] top-2 bottom-2 w-px bg-border" />
+
+              <div className="space-y-5">
+                {/* Created */}
+                <div className="flex items-start gap-4">
+                  <div className="w-3.5 h-3.5 rounded-full mt-0.5 bg-muted border-2 border-border shrink-0 z-10" />
+                  <div className="flex-1 min-w-0">
+                    <span className="text-sm font-medium text-foreground">{t("jobDetail.created")}</span>
+                    <p className="text-xs text-muted-foreground">{new Date(job.created_at).toLocaleString(locale)}</p>
+                  </div>
+                </div>
+
+                {/* Phase 1 start — for index jobs that have two phases */}
+                {job.started_at && job.phase2_started_at && (
+                  <div className="flex items-start gap-4">
+                    <div className="w-3.5 h-3.5 rounded-full mt-0.5 bg-primary shrink-0 z-10" />
+                    <div className="flex-1 min-w-0">
+                      <span className="text-sm font-medium text-foreground">{t("jobDetail.phase1")}</span>
+                      <p className="text-xs text-muted-foreground">{new Date(job.started_at).toLocaleString(locale)}</p>
+                      <p className="text-xs text-primary/80 font-medium mt-0.5">
+                        {t("jobDetail.duration", { duration: formatDuration(job.started_at, job.phase2_started_at) })}
+                        {job.stats_json && (
+                          <span className="text-muted-foreground font-normal ml-1">
+                            · {job.stats_json.scanned_files} {t("jobDetail.scanned").toLowerCase()}, {job.stats_json.indexed_files} {t("jobDetail.indexed").toLowerCase()}
+                            {job.stats_json.removed_files > 0 && `, ${job.stats_json.removed_files} ${t("jobDetail.removed").toLowerCase()}`}
+                            {(job.stats_json.warnings ?? 0) > 0 && `, ${job.stats_json.warnings} ${t("jobDetail.warnings").toLowerCase()}`}
+                          </span>
+                        )}
+                      </p>
+                    </div>
+                  </div>
+                )}
+
+                {/* Phase 2a — Extracting pages (index jobs with phase2) */}
+                {job.phase2_started_at && !isThumbnailOnly && (
+                  <div className="flex items-start gap-4">
+                    <div className={`w-3.5 h-3.5 rounded-full mt-0.5 shrink-0 z-10 ${
+                      job.generating_thumbnails_started_at || job.finished_at ? "bg-primary" : "bg-primary animate-pulse"
+                    }`} />
+                    <div className="flex-1 min-w-0">
+                      <span className="text-sm font-medium text-foreground">{t("jobDetail.phase2a")}</span>
+                      <p className="text-xs text-muted-foreground">{new Date(job.phase2_started_at).toLocaleString(locale)}</p>
+                      <p className="text-xs text-primary/80 font-medium mt-0.5">
+                        {t("jobDetail.duration", { duration: formatDuration(job.phase2_started_at, job.generating_thumbnails_started_at ?? job.finished_at ?? null) })}
+                        {!job.generating_thumbnails_started_at && !job.finished_at && isExtractingPages && (
+                          <span className="text-muted-foreground font-normal ml-1">· {t("jobDetail.inProgress")}</span>
+                        )}
+                      </p>
+                    </div>
+                  </div>
+                )}
+
+                {/* Phase 2b — Generating thumbnails */}
+                {(job.generating_thumbnails_started_at || (job.phase2_started_at && isThumbnailOnly)) && (
+                  <div className="flex items-start gap-4">
+                    <div className={`w-3.5 h-3.5 rounded-full mt-0.5 shrink-0 z-10 ${
+                      job.finished_at ? "bg-primary" : "bg-primary animate-pulse"
+                    }`} />
+                    <div className="flex-1 min-w-0">
+                      <span className="text-sm font-medium text-foreground">
+                        {isThumbnailOnly ? t("jobType.thumbnail_rebuild") : t("jobDetail.phase2b")}
+                      </span>
+                      <p className="text-xs text-muted-foreground">
+                        {(job.generating_thumbnails_started_at ? new Date(job.generating_thumbnails_started_at) : job.phase2_started_at ? new Date(job.phase2_started_at) : null)?.toLocaleString(locale)}
+                      </p>
+                      {(job.generating_thumbnails_started_at || job.finished_at) && (
+                        <p className="text-xs text-primary/80 font-medium mt-0.5">
+                          {t("jobDetail.duration", { duration: formatDuration(
+                            job.generating_thumbnails_started_at ?? job.phase2_started_at!,
+                            job.finished_at ?? null
+                          ) })}
+                          {job.total_files != null && job.total_files > 0 && (
+                            <span className="text-muted-foreground font-normal ml-1">
+                              · {job.processed_files ?? job.total_files} {t("jobType.thumbnail_rebuild").toLowerCase()}
+                            </span>
+                          )}
+                        </p>
+                      )}
+                      {!job.finished_at && isThumbnailPhase && (
+                        <span className="text-xs text-muted-foreground">{t("jobDetail.inProgress")}</span>
+                      )}
+                    </div>
+                  </div>
+                )}
+
+                {/* Started — for jobs without phase2 (cbr_to_cbz, or no phase yet) */}
+                {job.started_at && !job.phase2_started_at && (
+                  <div className="flex items-start gap-4">
+                    <div className={`w-3.5 h-3.5 rounded-full mt-0.5 shrink-0 z-10 ${
+                      job.finished_at ? "bg-primary" : "bg-primary animate-pulse"
+                    }`} />
+                    <div className="flex-1 min-w-0">
+                      <span className="text-sm font-medium text-foreground">{t("jobDetail.started")}</span>
+                      <p className="text-xs text-muted-foreground">{new Date(job.started_at).toLocaleString(locale)}</p>
+                    </div>
+                  </div>
+                )}
+
+                {/* Pending — not started yet */}
+                {!job.started_at && (
+                  <div className="flex items-start gap-4">
+                    <div className="w-3.5 h-3.5 rounded-full mt-0.5 bg-warning shrink-0 z-10" />
+                    <div className="flex-1 min-w-0">
+                      <span className="text-sm font-medium text-foreground">{t("jobDetail.pendingStart")}</span>
+                    </div>
+                  </div>
+                )}
+
+                {/* Finished */}
+                {job.finished_at && (
+                  <div className="flex items-start gap-4">
+                    <div className={`w-3.5 h-3.5 rounded-full mt-0.5 shrink-0 z-10 ${
+                      isCompleted ? "bg-success" : isFailed ? "bg-destructive" : "bg-muted"
+                    }`} />
+                    <div className="flex-1 min-w-0">
+                      <span className="text-sm font-medium text-foreground">
+                        {isCompleted ? t("jobDetail.finished") : isFailed ? t("jobDetail.failed") : t("jobDetail.cancelled")}
+                      </span>
+                      <p className="text-xs text-muted-foreground">{new Date(job.finished_at).toLocaleString(locale)}</p>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Progress Card */}
+        {showProgressCard && (
+          <Card>
+            <CardHeader>
+              <CardTitle>{progressTitle}</CardTitle>
+              {progressDescription && <CardDescription>{progressDescription}</CardDescription>}
+            </CardHeader>
+            <CardContent>
+              {job.total_files != null && job.total_files > 0 && (
+                <>
+                  <ProgressBar value={job.progress_percent || 0} showLabel size="lg" className="mb-4" />
+                  <div className="grid grid-cols-3 gap-4">
+                    <StatBox
+                      value={job.processed_files ?? 0}
+                      label={isThumbnailOnly || isPhase2 ? t("jobDetail.generated") : t("jobDetail.processed")}
+                      variant="primary"
+                    />
+                    <StatBox value={job.total_files} label={t("jobDetail.total")} />
+                    <StatBox
+                      value={Math.max(0, job.total_files - (job.processed_files ?? 0))}
+                      label={t("jobDetail.remaining")}
+                      variant={isCompleted ? "default" : "warning"}
+                    />
+                  </div>
+                </>
+              )}
+              {job.current_file && (
+                <div className="mt-4 p-3 bg-muted/50 rounded-lg">
+                  <span className="text-xs text-muted-foreground uppercase tracking-wide">{t("jobDetail.currentFile")}</span>
+                  <code className="block mt-1 text-xs font-mono text-foreground break-all">{job.current_file}</code>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Index Statistics — index jobs only */}
+        {job.stats_json && !isThumbnailOnly && !isMetadataBatch && !isMetadataRefresh && (
+          <Card>
+            <CardHeader>
+              <CardTitle>{t("jobDetail.indexStats")}</CardTitle>
+              {job.started_at && (
+                <CardDescription>
+                  {formatDuration(job.started_at, job.finished_at)}
+                  {speedCount > 0 && ` · ${formatSpeed(speedCount, durationMs)} scan rate`}
+                </CardDescription>
+              )}
+            </CardHeader>
+            <CardContent>
+              <div className="grid grid-cols-2 sm:grid-cols-5 gap-4">
+                <StatBox value={job.stats_json.scanned_files} label={t("jobDetail.scanned")} variant="success" />
+                <StatBox value={job.stats_json.indexed_files} label={t("jobDetail.indexed")} variant="primary" />
+                <StatBox value={job.stats_json.removed_files} label={t("jobDetail.removed")} variant="warning" />
+                <StatBox value={job.stats_json.warnings ?? 0} label={t("jobDetail.warnings")} variant={(job.stats_json.warnings ?? 0) > 0 ? "warning" : "default"} />
+                <StatBox value={job.stats_json.errors} label={t("jobDetail.errors")} variant={job.stats_json.errors > 0 ? "error" : "default"} />
+              </div>
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Thumbnail statistics — thumbnail-only jobs, completed */}
+        {isThumbnailOnly && isCompleted && job.total_files != null && (
+          <Card>
+            <CardHeader>
+              <CardTitle>{t("jobDetail.thumbnailStats")}</CardTitle>
+              {job.started_at && (
+                <CardDescription>
+                  {formatDuration(job.started_at, job.finished_at)}
+                  {speedCount > 0 && ` · ${formatSpeed(speedCount, durationMs)} thumbnails/s`}
+                </CardDescription>
+              )}
+            </CardHeader>
+            <CardContent>
+              <div className="grid grid-cols-2 gap-4">
+                <StatBox value={job.processed_files ?? job.total_files} label={t("jobDetail.generated")} variant="success" />
+                <StatBox value={job.total_files} label={t("jobDetail.total")} />
+              </div>
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Metadata batch report */}
+        {isMetadataBatch && batchReport && (
+          <Card>
+            <CardHeader>
+              <CardTitle>{t("jobDetail.batchReport")}</CardTitle>
+              <CardDescription>{t("jobDetail.seriesAnalyzed", { count: String(batchReport.total_series) })}</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="grid grid-cols-2 sm:grid-cols-3 gap-4">
+                <StatBox value={batchReport.auto_matched} label={t("jobDetail.autoMatched")} variant="success" />
+                <StatBox value={batchReport.already_linked} label={t("jobDetail.alreadyLinked")} variant="primary" />
+                <StatBox value={batchReport.no_results} label={t("jobDetail.noResults")} />
+                <StatBox value={batchReport.too_many_results} label={t("jobDetail.tooManyResults")} variant="warning" />
+                <StatBox value={batchReport.low_confidence} label={t("jobDetail.lowConfidence")} variant="warning" />
+                <StatBox value={batchReport.errors} label={t("jobDetail.errors")} variant={batchReport.errors > 0 ? "error" : "default"} />
+              </div>
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Metadata refresh report */}
+        {isMetadataRefresh && refreshReport && (
+          <Card>
+            <CardHeader>
+              <CardTitle>{t("jobDetail.refreshReport")}</CardTitle>
+              <CardDescription>{t("jobDetail.refreshReportDesc", { count: String(refreshReport.total_links) })}</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
+                <StatBox
+                  value={refreshReport.refreshed}
+                  label={t("jobDetail.refreshed")}
+                  variant="success"
+                  icon={
+                    <svg className="w-6 h-6 text-success" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                    </svg>
+                  }
+                />
+                <StatBox value={refreshReport.unchanged} label={t("jobDetail.unchanged")} />
+                <StatBox value={refreshReport.errors} label={t("jobDetail.errors")} variant={refreshReport.errors > 0 ? "error" : "default"} />
+                <StatBox value={refreshReport.total_links} label={t("jobDetail.total")} />
+              </div>
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Metadata refresh changes detail */}
+        {isMetadataRefresh && refreshReport && refreshReport.changes.length > 0 && (
+          <Card className="lg:col-span-2">
+            <CardHeader>
+              <CardTitle>{t("jobDetail.refreshChanges")}</CardTitle>
+              <CardDescription>{t("jobDetail.refreshChangesDesc", { count: String(refreshReport.changes.length) })}</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-3 max-h-[600px] overflow-y-auto">
+              {refreshReport.changes.map((r, idx) => (
+                <div
+                  key={idx}
+                  className={`p-3 rounded-lg border ${
+                    r.status === "updated" ? "bg-success/10 border-success/20" :
+                    r.status === "error" ? "bg-destructive/10 border-destructive/20" :
+                    "bg-muted/50 border-border/60"
+                  }`}
+                >
+                  <div className="flex items-center justify-between gap-2">
+                    {job.library_id ? (
+                      <Link
+                        href={`/libraries/${job.library_id}/series/${encodeURIComponent(r.series_name)}`}
+                        className="font-medium text-sm text-primary hover:underline truncate"
+                      >
+                        {r.series_name}
+                      </Link>
+                    ) : (
+                      <span className="font-medium text-sm text-foreground truncate">{r.series_name}</span>
+                    )}
+                    <div className="flex items-center gap-2">
+                      <span className="text-[10px] text-muted-foreground">{r.provider}</span>
+                      <span className={`text-[10px] px-1.5 py-0.5 rounded-full font-medium whitespace-nowrap ${
+                        r.status === "updated" ? "bg-success/20 text-success" :
+                        r.status === "error" ? "bg-destructive/20 text-destructive" :
+                        "bg-muted text-muted-foreground"
+                      }`}>
+                        {r.status === "updated" ? t("jobDetail.refreshed") :
+                         r.status === "error" ? t("common.error") :
+                         t("jobDetail.unchanged")}
+                      </span>
+                    </div>
+                  </div>
+
+                  {r.error && (
+                    <p className="text-xs text-destructive/80 mt-1">{r.error}</p>
+                  )}
+
+                  {/* Series field changes */}
+                  {r.series_changes.length > 0 && (
+                    <div className="mt-2">
+                      <span className="text-[10px] uppercase tracking-wide text-muted-foreground font-semibold">{t("metadata.seriesLabel")}</span>
+                      <div className="mt-1 space-y-1">
+                        {r.series_changes.map((c, ci) => (
+                          <div key={ci} className="flex items-start gap-2 text-xs">
+                            <span className="font-medium text-foreground shrink-0 w-24">{t(`field.${c.field}` as never) || c.field}</span>
+                            <span className="text-muted-foreground line-through truncate max-w-[200px]" title={String(c.old ?? "—")}>
+                              {c.old != null ? (Array.isArray(c.old) ? (c.old as string[]).join(", ") : String(c.old)) : "—"}
+                            </span>
+                            <span className="text-success shrink-0">→</span>
+                            <span className="text-success truncate max-w-[200px]" title={String(c.new ?? "—")}>
+                              {c.new != null ? (Array.isArray(c.new) ? (c.new as string[]).join(", ") : String(c.new)) : "—"}
+                            </span>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+
+                  {/* Book field changes */}
+                  {r.book_changes.length > 0 && (
+                    <div className="mt-2">
+                      <span className="text-[10px] uppercase tracking-wide text-muted-foreground font-semibold">
+                        {t("metadata.booksLabel")} ({r.book_changes.length})
+                      </span>
+                      <div className="mt-1 space-y-2">
+                        {r.book_changes.map((b, bi) => (
+                          <div key={bi} className="pl-2 border-l-2 border-border/60">
+                            <Link
+                              href={`/books/${b.book_id}`}
+                              className="text-xs text-primary hover:underline font-medium"
+                            >
+                              {b.volume != null && <span className="text-muted-foreground mr-1">T.{b.volume}</span>}
+                              {b.title}
+                            </Link>
+                            <div className="mt-0.5 space-y-0.5">
+                              {b.changes.map((c, ci) => (
+                                <div key={ci} className="flex items-start gap-2 text-xs">
+                                  <span className="font-medium text-foreground shrink-0 w-24">{t(`field.${c.field}` as never) || c.field}</span>
+                                  <span className="text-muted-foreground line-through truncate max-w-[150px]" title={String(c.old ?? "—")}>
+                                    {c.old != null ? (Array.isArray(c.old) ? (c.old as string[]).join(", ") : String(c.old).substring(0, 60)) : "—"}
+                                  </span>
+                                  <span className="text-success shrink-0">→</span>
+                                  <span className="text-success truncate max-w-[150px]" title={String(c.new ?? "—")}>
+                                    {c.new != null ? (Array.isArray(c.new) ? (c.new as string[]).join(", ") : String(c.new).substring(0, 60)) : "—"}
+                                  </span>
+                                </div>
+                              ))}
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              ))}
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Metadata batch results */}
+        {isMetadataBatch && batchResults.length > 0 && (
+          <Card className="lg:col-span-2">
+            <CardHeader>
+              <CardTitle>{t("jobDetail.resultsBySeries")}</CardTitle>
+              <CardDescription>{t("jobDetail.seriesProcessed", { count: String(batchResults.length) })}</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-2 max-h-[600px] overflow-y-auto">
+              {batchResults.map((r) => (
+                <div
+                  key={r.id}
+                  className={`p-3 rounded-lg border ${
+                    r.status === "auto_matched" ? "bg-success/10 border-success/20" :
+                    r.status === "already_linked" ? "bg-primary/10 border-primary/20" :
+                    r.status === "error" ? "bg-destructive/10 border-destructive/20" :
+                    "bg-muted/50 border-border/60"
+                  }`}
+                >
+                  <div className="flex items-center justify-between gap-2">
+                    {job.library_id ? (
+                      <Link
+                        href={`/libraries/${job.library_id}/series/${encodeURIComponent(r.series_name)}`}
+                        className="font-medium text-sm text-primary hover:underline truncate"
+                      >
+                        {r.series_name}
+                      </Link>
+                    ) : (
+                      <span className="font-medium text-sm text-foreground truncate">{r.series_name}</span>
+                    )}
+                    <span className={`text-[10px] px-1.5 py-0.5 rounded-full font-medium whitespace-nowrap ${
+                      r.status === "auto_matched" ? "bg-success/20 text-success" :
+                      r.status === "already_linked" ? "bg-primary/20 text-primary" :
+                      r.status === "no_results" ? "bg-muted text-muted-foreground" :
+                      r.status === "too_many_results" ? "bg-amber-500/15 text-amber-600" :
+                      r.status === "low_confidence" ? "bg-amber-500/15 text-amber-600" :
+                      r.status === "error" ? "bg-destructive/20 text-destructive" :
+                      "bg-muted text-muted-foreground"
+                    }`}>
+                      {r.status === "auto_matched" ? t("jobDetail.autoMatched") :
+                       r.status === "already_linked" ? t("jobDetail.alreadyLinked") :
+                       r.status === "no_results" ? t("jobDetail.noResults") :
+                       r.status === "too_many_results" ? t("jobDetail.tooManyResults") :
+                       r.status === "low_confidence" ? t("jobDetail.lowConfidence") :
+                       r.status === "error" ? t("common.error") :
+                       r.status}
+                    </span>
+                  </div>
+                  <div className="flex items-center gap-3 mt-1 text-xs text-muted-foreground">
+                    {r.provider_used && (
+                      <span>{r.provider_used}{r.fallback_used ? ` ${t("metadata.fallbackUsed")}` : ""}</span>
+                    )}
+                    {r.candidates_count > 0 && (
+                      <span>{r.candidates_count} {t("jobDetail.candidates", { plural: r.candidates_count > 1 ? "s" : "" })}</span>
+                    )}
+                    {r.best_confidence != null && (
+                      <span>{Math.round(r.best_confidence * 100)}% {t("jobDetail.confidence")}</span>
+                    )}
+                  </div>
+                  {r.best_candidate_json && (
+                    <p className="text-xs text-muted-foreground mt-1">
+                      {t("jobDetail.match", { title: (r.best_candidate_json as { title?: string }).title || r.best_candidate_json.toString() })}
+                    </p>
+                  )}
+                  {r.error_message && (
+                    <p className="text-xs text-destructive/80 mt-1">{r.error_message}</p>
+                  )}
+                </div>
+              ))}
+            </CardContent>
+          </Card>
+        )}
+
+        {/* File errors */}
+        {errors.length > 0 && (
+          <Card className="lg:col-span-2">
+            <CardHeader>
+              <CardTitle>{t("jobDetail.fileErrors", { count: String(errors.length) })}</CardTitle>
+              <CardDescription>{t("jobDetail.fileErrorsDesc")}</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-2 max-h-80 overflow-y-auto">
+              {errors.map((error) => (
+                <div key={error.id} className="p-3 bg-destructive/10 rounded-lg border border-destructive/20">
+                  <code className="block text-sm font-mono text-destructive mb-1">{error.file_path}</code>
+                  <p className="text-sm text-destructive/80">{error.error_message}</p>
+                  <span className="text-xs text-muted-foreground">{new Date(error.created_at).toLocaleString(locale)}</span>
+                </div>
+              ))}
+            </CardContent>
+          </Card>
+        )}
+      </div>
+    </>
+  );
+}

apps/backoffice/app/(app)/jobs/page.tsx

@@ -0,0 +1,269 @@
+import { revalidatePath } from "next/cache";
+import { redirect } from "next/navigation";
+import { listJobs, fetchLibraries, rebuildIndex, rebuildThumbnails, regenerateThumbnails, startMetadataBatch, startMetadataRefresh, IndexJobDto, LibraryDto } from "@/lib/api";
+import { JobsList } from "@/app/components/JobsList";
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, FormField, FormSelect } from "@/app/components/ui";
+import { getServerTranslations } from "@/lib/i18n/server";
+
+export const dynamic = "force-dynamic";
+
+export default async function JobsPage({ searchParams }: { searchParams: Promise<{ highlight?: string }> }) {
+  const { highlight } = await searchParams;
+  const { t } = await getServerTranslations();
+  const [jobs, libraries] = await Promise.all([
+    listJobs().catch(() => [] as IndexJobDto[]),
+    fetchLibraries().catch(() => [] as LibraryDto[])
+  ]);
+
+  const libraryMap = new Map(libraries.map(l => [l.id, l.name]));
+
+  async function triggerRebuild(formData: FormData) {
+    "use server";
+    const libraryId = formData.get("library_id") as string;
+    const result = await rebuildIndex(libraryId || undefined);
+    revalidatePath("/jobs");
+    redirect(`/jobs?highlight=${result.id}`);
+  }
+
+  async function triggerFullRebuild(formData: FormData) {
+    "use server";
+    const libraryId = formData.get("library_id") as string;
+    const result = await rebuildIndex(libraryId || undefined, true);
+    revalidatePath("/jobs");
+    redirect(`/jobs?highlight=${result.id}`);
+  }
+
+  async function triggerRescan(formData: FormData) {
+    "use server";
+    const libraryId = formData.get("library_id") as string;
+    const result = await rebuildIndex(libraryId || undefined, false, true);
+    revalidatePath("/jobs");
+    redirect(`/jobs?highlight=${result.id}`);
+  }
+
+  async function triggerThumbnailsRebuild(formData: FormData) {
+    "use server";
+    const libraryId = formData.get("library_id") as string;
+    const result = await rebuildThumbnails(libraryId || undefined);
+    revalidatePath("/jobs");
+    redirect(`/jobs?highlight=${result.id}`);
+  }
+
+  async function triggerThumbnailsRegenerate(formData: FormData) {
+    "use server";
+    const libraryId = formData.get("library_id") as string;
+    const result = await regenerateThumbnails(libraryId || undefined);
+    revalidatePath("/jobs");
+    redirect(`/jobs?highlight=${result.id}`);
+  }
+
+  async function triggerMetadataBatch(formData: FormData) {
+    "use server";
+    const libraryId = formData.get("library_id") as string;
+    if (libraryId) {
+      let result;
+      try {
+        result = await startMetadataBatch(libraryId);
+      } catch {
+        // Library may have metadata disabled — ignore silently
+        return;
+      }
+      revalidatePath("/jobs");
+      redirect(`/jobs?highlight=${result.id}`);
+    } else {
+      // All libraries — skip those with metadata disabled
+      const allLibraries = await fetchLibraries().catch(() => [] as LibraryDto[]);
+      let lastId: string | undefined;
+      for (const lib of allLibraries) {
+        if (lib.metadata_provider === "none") continue;
+        try {
+          const result = await startMetadataBatch(lib.id);
+          if (result.status !== "already_running") lastId = result.id;
+        } catch {
+          // Library may have metadata disabled or other issue — skip
+        }
+      }
+      revalidatePath("/jobs");
+      redirect(lastId ? `/jobs?highlight=${lastId}` : "/jobs");
+    }
+  }
+
+  async function triggerMetadataRefresh(formData: FormData) {
+    "use server";
+    const libraryId = formData.get("library_id") as string;
+    if (libraryId) {
+      let result;
+      try {
+        result = await startMetadataRefresh(libraryId);
+      } catch {
+        return;
+      }
+      revalidatePath("/jobs");
+      redirect(`/jobs?highlight=${result.id}`);
+    } else {
+      // All libraries — skip those with metadata disabled
+      const allLibraries = await fetchLibraries().catch(() => [] as LibraryDto[]);
+      let lastId: string | undefined;
+      for (const lib of allLibraries) {
+        if (lib.metadata_provider === "none") continue;
+        try {
+          const result = await startMetadataRefresh(lib.id);
+          if (result.status !== "already_running") lastId = result.id;
+        } catch {
+          // Library may have metadata disabled or no approved links — skip
+        }
+      }
+      revalidatePath("/jobs");
+      redirect(lastId ? `/jobs?highlight=${lastId}` : "/jobs");
+    }
+  }
+
+  return (
+    <>
+      <div className="mb-6">
+        <h1 className="text-3xl font-bold text-foreground flex items-center gap-3">
+          <svg className="w-8 h-8 text-warning" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+          </svg>
+          {t("jobs.title")}
+        </h1>
+      </div>
+
+      <Card className="mb-6">
+        <CardHeader>
+          <CardTitle>{t("jobs.startJob")}</CardTitle>
+          <CardDescription>{t("jobs.startJobDescription")}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form>
+            <div className="mb-6">
+              <FormField className="max-w-xs">
+                <FormSelect name="library_id" defaultValue="">
+                  <option value="">{t("jobs.allLibraries")}</option>
+                  {libraries.map((lib) => (
+                    <option key={lib.id} value={lib.id}>{lib.name}</option>
+                  ))}
+                </FormSelect>
+              </FormField>
+            </div>
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+
+              {/* Indexation group */}
+              <div className="space-y-3">
+                <div className="flex items-center gap-2 text-sm font-semibold text-foreground">
+                  <svg className="w-4 h-4 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
+                  </svg>
+                  {t("jobs.groupIndexation")}
+                </div>
+                <div className="space-y-2">
+                  <button type="submit" formAction={triggerRebuild}
+                    className="w-full text-left rounded-lg border border-input bg-background p-3 hover:bg-accent/50 transition-colors group cursor-pointer">
+                    <div className="flex items-center gap-2">
+                      <svg className="w-4 h-4 text-primary shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                      </svg>
+                      <span className="font-medium text-sm text-foreground">{t("jobs.rebuild")}</span>
+                    </div>
+                    <p className="text-xs text-muted-foreground mt-1 ml-6">{t("jobs.rebuildShort")}</p>
+                  </button>
+                  <button type="submit" formAction={triggerRescan}
+                    className="w-full text-left rounded-lg border border-input bg-background p-3 hover:bg-accent/50 transition-colors group cursor-pointer">
+                    <div className="flex items-center gap-2">
+                      <svg className="w-4 h-4 text-primary shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                      </svg>
+                      <span className="font-medium text-sm text-foreground">{t("jobs.rescan")}</span>
+                    </div>
+                    <p className="text-xs text-muted-foreground mt-1 ml-6">{t("jobs.rescanShort")}</p>
+                  </button>
+                  <button type="submit" formAction={triggerFullRebuild}
+                    className="w-full text-left rounded-lg border border-destructive/30 bg-destructive/5 p-3 hover:bg-destructive/10 transition-colors group cursor-pointer">
+                    <div className="flex items-center gap-2">
+                      <svg className="w-4 h-4 text-destructive shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                      </svg>
+                      <span className="font-medium text-sm text-destructive">{t("jobs.fullRebuild")}</span>
+                    </div>
+                    <p className="text-xs text-muted-foreground mt-1 ml-6">{t("jobs.fullRebuildShort")}</p>
+                  </button>
+                </div>
+              </div>
+
+              {/* Thumbnails group */}
+              <div className="space-y-3">
+                <div className="flex items-center gap-2 text-sm font-semibold text-foreground">
+                  <svg className="w-4 h-4 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                  </svg>
+                  {t("jobs.groupThumbnails")}
+                </div>
+                <div className="space-y-2">
+                  <button type="submit" formAction={triggerThumbnailsRebuild}
+                    className="w-full text-left rounded-lg border border-input bg-background p-3 hover:bg-accent/50 transition-colors group cursor-pointer">
+                    <div className="flex items-center gap-2">
+                      <svg className="w-4 h-4 text-primary shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+                      </svg>
+                      <span className="font-medium text-sm text-foreground">{t("jobs.generateThumbnails")}</span>
+                    </div>
+                    <p className="text-xs text-muted-foreground mt-1 ml-6">{t("jobs.generateThumbnailsShort")}</p>
+                  </button>
+                  <button type="submit" formAction={triggerThumbnailsRegenerate}
+                    className="w-full text-left rounded-lg border border-warning/30 bg-warning/5 p-3 hover:bg-warning/10 transition-colors group cursor-pointer">
+                    <div className="flex items-center gap-2">
+                      <svg className="w-4 h-4 text-warning shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                      </svg>
+                      <span className="font-medium text-sm text-warning">{t("jobs.regenerateThumbnails")}</span>
+                    </div>
+                    <p className="text-xs text-muted-foreground mt-1 ml-6">{t("jobs.regenerateThumbnailsShort")}</p>
+                  </button>
+                </div>
+              </div>
+
+              {/* Metadata group */}
+              <div className="space-y-3">
+                <div className="flex items-center gap-2 text-sm font-semibold text-foreground">
+                  <svg className="w-4 h-4 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
+                  </svg>
+                  {t("jobs.groupMetadata")}
+                </div>
+                <div className="space-y-2">
+                  <button type="submit" formAction={triggerMetadataBatch}
+                    className="w-full text-left rounded-lg border border-input bg-background p-3 hover:bg-accent/50 transition-colors group cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-background">
+                    <div className="flex items-center gap-2">
+                      <svg className="w-4 h-4 text-primary shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                      </svg>
+                      <span className="font-medium text-sm text-foreground">{t("jobs.batchMetadata")}</span>
+                    </div>
+                    <p className="text-xs text-muted-foreground mt-1 ml-6">{t("jobs.batchMetadataShort")}</p>
+                  </button>
+                  <button type="submit" formAction={triggerMetadataRefresh}
+                    className="w-full text-left rounded-lg border border-input bg-background p-3 hover:bg-accent/50 transition-colors group cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-background">
+                    <div className="flex items-center gap-2">
+                      <svg className="w-4 h-4 text-primary shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                      </svg>
+                      <span className="font-medium text-sm text-foreground">{t("jobs.refreshMetadata")}</span>
+                    </div>
+                    <p className="text-xs text-muted-foreground mt-1 ml-6">{t("jobs.refreshMetadataShort")}</p>
+                  </button>
+                </div>
+              </div>
+
+            </div>
+          </form>
+        </CardContent>
+      </Card>
+
+      <JobsList
+        initialJobs={jobs}
+        libraries={libraryMap}
+        highlightJobId={highlight}
+      />
+    </>
+  );
+}

apps/backoffice/app/(app)/layout.tsx

@@ -0,0 +1,102 @@
+import Image from "next/image";
+import Link from "next/link";
+import type { ReactNode } from "react";
+import { ThemeToggle } from "@/app/theme-toggle";
+import { JobsIndicator } from "@/app/components/JobsIndicator";
+import { NavIcon, Icon } from "@/app/components/ui";
+import { LogoutButton } from "@/app/components/LogoutButton";
+import { MobileNav } from "@/app/components/MobileNav";
+import { getServerTranslations } from "@/lib/i18n/server";
+import type { TranslationKey } from "@/lib/i18n/fr";
+
+type NavItem = {
+  href: "/" | "/books" | "/series" | "/authors" | "/libraries" | "/jobs" | "/tokens" | "/settings";
+  labelKey: TranslationKey;
+  icon: "dashboard" | "books" | "series" | "authors" | "libraries" | "jobs" | "tokens" | "settings";
+};
+
+const navItems: NavItem[] = [
+  { href: "/", labelKey: "nav.dashboard", icon: "dashboard" },
+  { href: "/books", labelKey: "nav.books", icon: "books" },
+  { href: "/series", labelKey: "nav.series", icon: "series" },
+  { href: "/authors", labelKey: "nav.authors", icon: "authors" },
+  { href: "/libraries", labelKey: "nav.libraries", icon: "libraries" },
+  { href: "/jobs", labelKey: "nav.jobs", icon: "jobs" },
+  { href: "/tokens", labelKey: "nav.tokens", icon: "tokens" },
+];
+
+export default async function AppLayout({ children }: { children: ReactNode }) {
+  const { t } = await getServerTranslations();
+
+  return (
+    <>
+      <header className="sticky top-0 z-50 w-full border-b border-border/40 bg-background/70 backdrop-blur-xl backdrop-saturate-150 supports-[backdrop-filter]:bg-background/60">
+        <nav className="container mx-auto flex h-16 items-center justify-between px-4">
+          <Link
+            href="/"
+            className="flex items-center gap-3 hover:opacity-80 transition-opacity duration-200"
+          >
+            <Image src="/logo.png" alt="StripStream" width={36} height={36} className="rounded-lg" />
+            <div className="flex items-baseline gap-2">
+              <span className="text-xl font-bold tracking-tight text-foreground">StripStream</span>
+              <span className="text-sm text-muted-foreground font-medium hidden md:inline">
+                {t("common.backoffice")}
+              </span>
+            </div>
+          </Link>
+
+          <div className="flex items-center gap-2">
+            <div className="hidden md:flex items-center gap-1">
+              {navItems.map((item) => (
+                <NavLink key={item.href} href={item.href} title={t(item.labelKey)}>
+                  <NavIcon name={item.icon} />
+                  <span className="ml-2 hidden lg:inline">{t(item.labelKey)}</span>
+                </NavLink>
+              ))}
+            </div>
+
+            <div className="flex items-center gap-1 pl-4 ml-2 border-l border-border/60">
+              <JobsIndicator />
+              <Link
+                href="/settings"
+                className="hidden md:flex p-2 rounded-lg text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
+                title={t("nav.settings")}
+              >
+                <Icon name="settings" size="md" />
+              </Link>
+              <ThemeToggle />
+              <LogoutButton />
+              <MobileNav navItems={navItems.map(item => ({ ...item, label: t(item.labelKey) }))} />
+            </div>
+          </div>
+        </nav>
+      </header>
+
+      <main className="container mx-auto px-4 sm:px-6 lg:px-8 py-8 pb-16">
+        {children}
+      </main>
+    </>
+  );
+}
+
+function NavLink({ href, title, children }: { href: NavItem["href"]; title?: string; children: React.ReactNode }) {
+  return (
+    <Link
+      href={href}
+      title={title}
+      className="
+        flex items-center
+        px-2 lg:px-3 py-2
+        rounded-lg
+        text-sm font-medium
+        text-muted-foreground
+        hover:text-foreground
+        hover:bg-accent
+        transition-colors duration-200
+        active:scale-[0.98]
+      "
+    >
+      {children}
+    </Link>
+  );
+}

apps/backoffice/app/(app)/libraries/[id]/books/page.tsx

@@ -0,0 +1,80 @@
+import { fetchLibraries, fetchBooks, getBookCoverUrl, LibraryDto, BookDto } from "@/lib/api";
+import { BooksGrid, EmptyState } from "@/app/components/BookCard";
+import { LibrarySubPageHeader } from "@/app/components/LibrarySubPageHeader";
+import { OffsetPagination } from "@/app/components/ui";
+import { notFound } from "next/navigation";
+import { getServerTranslations } from "@/lib/i18n/server";
+
+export const dynamic = "force-dynamic";
+
+export default async function LibraryBooksPage({
+  params,
+  searchParams
+}: {
+  params: Promise<{ id: string }>;
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+}) {
+  const { id } = await params;
+  const { t } = await getServerTranslations();
+  const searchParamsAwaited = await searchParams;
+  const page = typeof searchParamsAwaited.page === "string" ? parseInt(searchParamsAwaited.page) : 1;
+  const series = typeof searchParamsAwaited.series === "string" ? searchParamsAwaited.series : undefined;
+  const limit = typeof searchParamsAwaited.limit === "string" ? parseInt(searchParamsAwaited.limit) : 20;
+
+  const [library, booksPage] = await Promise.all([
+    fetchLibraries().then(libs => libs.find(l => l.id === id)),
+    fetchBooks(id, series, page, limit).catch(() => ({
+      items: [] as BookDto[],
+      total: 0,
+      page: 1,
+      limit,
+    }))
+  ]);
+
+  if (!library) {
+    notFound();
+  }
+
+  const books = booksPage.items.map(book => ({
+    ...book,
+    coverUrl: getBookCoverUrl(book.id)
+  }));
+
+  const seriesDisplayName = series === "unclassified" ? t("books.unclassified") : (series ?? "");
+  const totalPages = Math.ceil(booksPage.total / limit);
+
+  return (
+    <div className="space-y-6">
+      <LibrarySubPageHeader
+        library={library}
+        title={series ? t("libraryBooks.booksOfSeries", { series: seriesDisplayName }) : t("libraryBooks.allBooks")}
+        icon={
+          <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+          </svg>
+        }
+        iconColor="text-success"
+        filterInfo={series ? {
+          label: t("libraryBooks.filterLabel", { series: seriesDisplayName }),
+          clearHref: `/libraries/${id}/books`,
+          clearLabel: t("libraryBooks.viewAll")
+        } : undefined}
+      />
+
+      {books.length > 0 ? (
+        <>
+          <BooksGrid books={books} />
+          
+          <OffsetPagination
+            currentPage={page}
+            totalPages={totalPages}
+            pageSize={limit}
+            totalItems={booksPage.total}
+          />
+        </>
+      ) : (
+        <EmptyState message={series ? t("libraryBooks.noBooksInSeries", { series: seriesDisplayName }) : t("libraryBooks.noBooks")} />
+      )}
+    </div>
+  );
+}

apps/backoffice/app/(app)/libraries/[id]/series/[name]/page.tsx

@@ -0,0 +1,229 @@
+import { fetchLibraries, fetchBooks, fetchSeriesMetadata, getBookCoverUrl, getMetadataLink, getMissingBooks, BookDto, SeriesMetadataDto, ExternalMetadataLinkDto, MissingBooksDto } from "@/lib/api";
+import { BooksGrid, EmptyState } from "@/app/components/BookCard";
+import { MarkSeriesReadButton } from "@/app/components/MarkSeriesReadButton";
+import { MarkBookReadButton } from "@/app/components/MarkBookReadButton";
+import nextDynamic from "next/dynamic";
+import { OffsetPagination } from "@/app/components/ui";
+import { SafeHtml } from "@/app/components/SafeHtml";
+import Image from "next/image";
+import Link from "next/link";
+
+const EditSeriesForm = nextDynamic(
+  () => import("@/app/components/EditSeriesForm").then(m => m.EditSeriesForm)
+);
+const MetadataSearchModal = nextDynamic(
+  () => import("@/app/components/MetadataSearchModal").then(m => m.MetadataSearchModal)
+);
+const ProwlarrSearchModal = nextDynamic(
+  () => import("@/app/components/ProwlarrSearchModal").then(m => m.ProwlarrSearchModal)
+);
+import { notFound } from "next/navigation";
+import { getServerTranslations } from "@/lib/i18n/server";
+
+export const dynamic = "force-dynamic";
+
+export default async function SeriesDetailPage({
+  params,
+  searchParams,
+}: {
+  params: Promise<{ id: string; name: string }>;
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+}) {
+  const { id, name } = await params;
+  const { t } = await getServerTranslations();
+  const searchParamsAwaited = await searchParams;
+  const page = typeof searchParamsAwaited.page === "string" ? parseInt(searchParamsAwaited.page) : 1;
+  const limit = typeof searchParamsAwaited.limit === "string" ? parseInt(searchParamsAwaited.limit) : 50;
+
+  const seriesName = decodeURIComponent(name);
+
+  const [library, booksPage, seriesMeta, metadataLinks] = await Promise.all([
+    fetchLibraries().then((libs) => libs.find((l) => l.id === id)),
+    fetchBooks(id, seriesName, page, limit).catch(() => ({
+      items: [] as BookDto[],
+      total: 0,
+      page: 1,
+      limit,
+    })),
+    fetchSeriesMetadata(id, seriesName).catch(() => null as SeriesMetadataDto | null),
+    getMetadataLink(id, seriesName).catch(() => [] as ExternalMetadataLinkDto[]),
+  ]);
+
+  const existingLink = metadataLinks.find((l) => l.status === "approved") ?? metadataLinks[0] ?? null;
+  let missingData: MissingBooksDto | null = null;
+  if (existingLink && existingLink.status === "approved") {
+    missingData = await getMissingBooks(existingLink.id).catch(() => null);
+  }
+
+  if (!library) {
+    notFound();
+  }
+
+  const books = booksPage.items.map((book) => ({
+    ...book,
+    coverUrl: getBookCoverUrl(book.id),
+  }));
+
+  const totalPages = Math.ceil(booksPage.total / limit);
+  const booksReadCount = booksPage.items.filter((b) => b.reading_status === "read").length;
+  const displayName = seriesName === "unclassified" ? t("books.unclassified") : seriesName;
+
+  // Use first book cover as series cover
+  const coverBookId = booksPage.items[0]?.id;
+
+  return (
+    <div className="space-y-6">
+      {/* Breadcrumb */}
+      <div className="flex items-center gap-2 text-sm">
+        <Link
+          href="/libraries"
+          className="text-muted-foreground hover:text-primary transition-colors"
+        >
+          {t("nav.libraries")}
+        </Link>
+        <span className="text-muted-foreground">/</span>
+        <Link
+          href={`/libraries/${id}/series`}
+          className="text-muted-foreground hover:text-primary transition-colors"
+        >
+          {library.name}
+        </Link>
+        <span className="text-muted-foreground">/</span>
+        <span className="text-foreground font-medium">{displayName}</span>
+      </div>
+
+      {/* Series Header */}
+      <div className="flex flex-col sm:flex-row gap-6">
+        {coverBookId && (
+          <div className="flex-shrink-0">
+            <div className="w-40 aspect-[2/3] relative rounded-xl overflow-hidden shadow-card border border-border">
+              <Image
+                src={getBookCoverUrl(coverBookId)}
+                alt={t("books.coverOf", { name: displayName })}
+                fill
+                className="object-cover"
+                sizes="160px"
+              />
+            </div>
+          </div>
+        )}
+
+        <div className="flex-1 space-y-4">
+          <h1 className="text-3xl font-bold text-foreground">{displayName}</h1>
+
+          <div className="flex flex-wrap items-center gap-3">
+            {seriesMeta && seriesMeta.authors.length > 0 && (
+              <p className="text-base text-muted-foreground">{seriesMeta.authors.join(", ")}</p>
+            )}
+            {seriesMeta?.status && (
+              <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
+                seriesMeta.status === "ongoing" ? "bg-blue-500/15 text-blue-600" :
+                seriesMeta.status === "ended" ? "bg-green-500/15 text-green-600" :
+                seriesMeta.status === "hiatus" ? "bg-amber-500/15 text-amber-600" :
+                seriesMeta.status === "cancelled" ? "bg-red-500/15 text-red-600" :
+                "bg-muted text-muted-foreground"
+              }`}>
+                {t(`seriesStatus.${seriesMeta.status}` as any) || seriesMeta.status}
+              </span>
+            )}
+          </div>
+
+          {seriesMeta?.description && (
+            <SafeHtml html={seriesMeta.description} className="text-sm text-muted-foreground leading-relaxed" />
+          )}
+
+          <div className="flex flex-wrap items-center gap-4 text-sm">
+            {seriesMeta && seriesMeta.publishers.length > 0 && (
+              <span className="text-muted-foreground">
+                <span className="font-semibold text-foreground">{seriesMeta.publishers.join(", ")}</span>
+              </span>
+            )}
+            {seriesMeta?.start_year && (
+              <span className="text-muted-foreground">{seriesMeta.start_year}</span>
+            )}
+            {((seriesMeta && seriesMeta.publishers.length > 0) || seriesMeta?.start_year) && <span className="w-px h-4 bg-border" />}
+            <span className="text-muted-foreground">
+              <span className="font-semibold text-foreground">{booksPage.total}</span> {t("dashboard.books").toLowerCase()}
+            </span>
+            <span className="w-px h-4 bg-border" />
+            <span className="text-muted-foreground">
+              {t("series.readCount", { read: String(booksReadCount), total: String(booksPage.total), plural: booksPage.total !== 1 ? "s" : "" })}
+            </span>
+
+            {/* Reading progress bar */}
+            <div className="flex items-center gap-2 flex-1 min-w-[120px] max-w-[200px]">
+              <div className="flex-1 h-2 bg-muted rounded-full overflow-hidden">
+                <div
+                  className="h-full bg-green-500 rounded-full transition-all"
+                  style={{ width: `${booksPage.total > 0 ? (booksReadCount / booksPage.total) * 100 : 0}%` }}
+                />
+              </div>
+            </div>
+
+            {/* Collection progress bar (owned / expected) */}
+            {missingData && missingData.total_external > 0 && (
+              <>
+                <span className="w-px h-4 bg-border" />
+                <span className="text-muted-foreground">
+                  {booksPage.total}/{missingData.total_external} — {t("series.missingCount", { count: missingData.missing_count, plural: missingData.missing_count !== 1 ? "s" : "" })}
+                </span>
+                <div className="w-[150px] h-2 bg-muted rounded-full overflow-hidden">
+                  <div
+                    className="h-full bg-amber-500 rounded-full transition-all"
+                    style={{ width: `${Math.round((booksPage.total / missingData.total_external) * 100)}%` }}
+                  />
+                </div>
+              </>
+            )}
+          </div>
+
+          <div className="flex flex-wrap items-center gap-3">
+            <MarkSeriesReadButton
+              seriesName={seriesName}
+              bookCount={booksPage.total}
+              booksReadCount={booksReadCount}
+            />
+            <EditSeriesForm
+              libraryId={id}
+              seriesName={seriesName}
+              currentAuthors={seriesMeta?.authors ?? []}
+              currentPublishers={seriesMeta?.publishers ?? []}
+              currentBookAuthor={seriesMeta?.book_author ?? booksPage.items[0]?.author ?? null}
+              currentBookLanguage={seriesMeta?.book_language ?? booksPage.items[0]?.language ?? null}
+              currentDescription={seriesMeta?.description ?? null}
+              currentStartYear={seriesMeta?.start_year ?? null}
+              currentTotalVolumes={seriesMeta?.total_volumes ?? null}
+              currentStatus={seriesMeta?.status ?? null}
+              currentLockedFields={seriesMeta?.locked_fields ?? {}}
+            />
+            <ProwlarrSearchModal
+              seriesName={seriesName}
+              missingBooks={missingData?.missing_books ?? null}
+            />
+            <MetadataSearchModal
+              libraryId={id}
+              seriesName={seriesName}
+              existingLink={existingLink}
+              initialMissing={missingData}
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Books Grid */}
+      {books.length > 0 ? (
+        <>
+          <BooksGrid books={books} />
+          <OffsetPagination
+            currentPage={page}
+            totalPages={totalPages}
+            pageSize={limit}
+            totalItems={booksPage.total}
+          />
+        </>
+      ) : (
+        <EmptyState message={t("librarySeries.noBooksInSeries")} />
+      )}
+    </div>
+  );
+}

apps/backoffice/app/(app)/libraries/[id]/series/page.tsx

@@ -0,0 +1,144 @@
+import { fetchLibraries, fetchSeries, fetchSeriesStatuses, getBookCoverUrl, LibraryDto, SeriesDto, SeriesPageDto } from "@/lib/api";
+import { OffsetPagination } from "@/app/components/ui";
+import { MarkSeriesReadButton } from "@/app/components/MarkSeriesReadButton";
+import { SeriesFilters } from "@/app/components/SeriesFilters";
+import Image from "next/image";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { LibrarySubPageHeader } from "@/app/components/LibrarySubPageHeader";
+import { getServerTranslations } from "@/lib/i18n/server";
+
+export const dynamic = "force-dynamic";
+
+export default async function LibrarySeriesPage({
+  params,
+  searchParams
+}: {
+  params: Promise<{ id: string }>;
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+}) {
+  const { id } = await params;
+  const { t } = await getServerTranslations();
+  const searchParamsAwaited = await searchParams;
+  const page = typeof searchParamsAwaited.page === "string" ? parseInt(searchParamsAwaited.page) : 1;
+  const limit = typeof searchParamsAwaited.limit === "string" ? parseInt(searchParamsAwaited.limit) : 20;
+  const seriesStatus = typeof searchParamsAwaited.series_status === "string" ? searchParamsAwaited.series_status : undefined;
+  const hasMissing = searchParamsAwaited.has_missing === "true";
+
+  const [library, seriesPage, dbStatuses] = await Promise.all([
+    fetchLibraries().then(libs => libs.find(l => l.id === id)),
+    fetchSeries(id, page, limit, seriesStatus, hasMissing).catch(() => ({ items: [] as SeriesDto[], total: 0, page: 1, limit }) as SeriesPageDto),
+    fetchSeriesStatuses().catch(() => [] as string[]),
+  ]);
+
+  if (!library) {
+    notFound();
+  }
+
+  const series = seriesPage.items;
+  const totalPages = Math.ceil(seriesPage.total / limit);
+
+  const KNOWN_STATUSES: Record<string, string> = {
+    ongoing: t("seriesStatus.ongoing"),
+    ended: t("seriesStatus.ended"),
+    hiatus: t("seriesStatus.hiatus"),
+    cancelled: t("seriesStatus.cancelled"),
+    upcoming: t("seriesStatus.upcoming"),
+  };
+  const seriesStatusOptions = [
+    { value: "", label: t("seriesStatus.allStatuses") },
+    ...dbStatuses.map((s) => ({ value: s, label: KNOWN_STATUSES[s] || s })),
+  ];
+
+  return (
+    <div className="space-y-6">
+      <LibrarySubPageHeader
+        library={library}
+        title={t("series.title")}
+        icon={
+          <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+          </svg>
+        }
+        iconColor="text-primary"
+      />
+
+      <SeriesFilters
+        basePath={`/libraries/${id}/series`}
+        currentSeriesStatus={seriesStatus}
+        currentHasMissing={hasMissing}
+        seriesStatusOptions={seriesStatusOptions}
+      />
+
+      {series.length > 0 ? (
+        <>
+          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6">
+            {series.map((s) => (
+              <Link
+                key={s.name}
+                href={`/libraries/${id}/series/${encodeURIComponent(s.name)}`}
+                className="group"
+              >
+                <div className={`bg-card rounded-xl shadow-sm border border-border/60 overflow-hidden hover:shadow-md transition-shadow duration-200 ${s.books_read_count >= s.book_count ? "opacity-50" : ""}`}>
+                  <div className="aspect-[2/3] relative bg-muted/50">
+                    <Image
+                      src={getBookCoverUrl(s.first_book_id)}
+                      alt={t("books.coverOf", { name: s.name })}
+                      fill
+                      className="object-cover"
+                      sizes="(max-width: 640px) 50vw, (max-width: 768px) 33vw, (max-width: 1024px) 25vw, 20vw"
+                    />
+                  </div>
+                  <div className="p-3">
+                    <h3 className="font-medium text-foreground truncate text-sm" title={s.name}>
+                      {s.name === "unclassified" ? t("books.unclassified") : s.name}
+                    </h3>
+                    <div className="flex items-center justify-between mt-1">
+                      <p className="text-xs text-muted-foreground">
+                        {t("series.readCount", { read: String(s.books_read_count), total: String(s.book_count), plural: s.book_count !== 1 ? "s" : "" })}
+                      </p>
+                      <MarkSeriesReadButton
+                        seriesName={s.name}
+                        bookCount={s.book_count}
+                        booksReadCount={s.books_read_count}
+                      />
+                    </div>
+                    <div className="flex items-center gap-1 mt-1.5 flex-wrap">
+                      {s.series_status && (
+                        <span className={`text-[10px] px-1.5 py-0.5 rounded-full font-medium ${
+                          s.series_status === "ongoing" ? "bg-blue-500/15 text-blue-600" :
+                          s.series_status === "ended" ? "bg-green-500/15 text-green-600" :
+                          s.series_status === "hiatus" ? "bg-amber-500/15 text-amber-600" :
+                          s.series_status === "cancelled" ? "bg-red-500/15 text-red-600" :
+                          "bg-muted text-muted-foreground"
+                        }`}>
+                          {KNOWN_STATUSES[s.series_status] || s.series_status}
+                        </span>
+                      )}
+                      {s.missing_count != null && s.missing_count > 0 && (
+                        <span className="text-[10px] px-1.5 py-0.5 rounded-full font-medium bg-yellow-500/15 text-yellow-600">
+                          {t("series.missingCount", { count: String(s.missing_count) })}
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              </Link>
+            ))}
+          </div>
+          
+          <OffsetPagination
+            currentPage={page}
+            totalPages={totalPages}
+            pageSize={limit}
+            totalItems={seriesPage.total}
+          />
+        </>
+      ) : (
+        <div className="text-center py-12 text-muted-foreground">
+          <p>{t("librarySeries.noSeries")}</p>
+        </div>
+      )}
+    </div>
+  );
+}

apps/backoffice/app/(app)/libraries/page.tsx

@@ -0,0 +1,227 @@
+import { revalidatePath } from "next/cache";
+import Image from "next/image";
+import Link from "next/link";
+import { listFolders, createLibrary, deleteLibrary, fetchLibraries, getBookCoverUrl, LibraryDto, FolderItem } from "@/lib/api";
+import type { TranslationKey } from "@/lib/i18n/fr";
+import { getServerTranslations } from "@/lib/i18n/server";
+import { LibraryActions } from "@/app/components/LibraryActions";
+import { LibraryForm } from "@/app/components/LibraryForm";
+import { ProviderIcon } from "@/app/components/ProviderIcon";
+import {
+  Card, CardHeader, CardTitle, CardDescription, CardContent,
+  Button, Badge
+} from "@/app/components/ui";
+
+export const dynamic = "force-dynamic";
+
+function formatNextScan(nextScanAt: string | null, imminentLabel: string): string {
+  if (!nextScanAt) return "-";
+  const date = new Date(nextScanAt);
+  const now = new Date();
+  const diff = date.getTime() - now.getTime();
+
+  if (diff < 0) return imminentLabel;
+  if (diff < 60000) return "< 1 min";
+  if (diff < 3600000) return `${Math.floor(diff / 60000)}m`;
+  if (diff < 86400000) return `${Math.floor(diff / 3600000)}h`;
+  return `${Math.floor(diff / 86400000)}d`;
+}
+
+export default async function LibrariesPage() {
+  const { t } = await getServerTranslations();
+  const [libraries, folders] = await Promise.all([
+    fetchLibraries().catch(() => [] as LibraryDto[]),
+    listFolders().catch(() => [] as FolderItem[])
+  ]);
+
+  const thumbnailMap = new Map(
+    libraries.map(lib => [
+      lib.id,
+      (lib.thumbnail_book_ids || []).map(bookId => getBookCoverUrl(bookId)),
+    ])
+  );
+
+  async function addLibrary(formData: FormData) {
+    "use server";
+    const name = formData.get("name") as string;
+    const rootPath = formData.get("root_path") as string;
+    if (name && rootPath) {
+      await createLibrary(name, rootPath);
+      revalidatePath("/libraries");
+    }
+  }
+
+  async function removeLibrary(formData: FormData) {
+    "use server";
+    const id = formData.get("id") as string;
+    await deleteLibrary(id);
+    revalidatePath("/libraries");
+  }
+
+  return (
+    <>
+      <div className="mb-6">
+        <h1 className="text-3xl font-bold text-foreground flex items-center gap-3">
+          <svg className="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
+          </svg>
+          {t("libraries.title")}
+        </h1>
+      </div>
+
+      {/* Add Library Form */}
+      <Card className="mb-6">
+        <CardHeader>
+          <CardTitle>{t("libraries.addLibrary")}</CardTitle>
+          <CardDescription>{t("libraries.addLibraryDescription")}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <LibraryForm initialFolders={folders} action={addLibrary} />
+        </CardContent>
+      </Card>
+
+      {/* Libraries Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {libraries.map((lib) => {
+          const thumbnails = thumbnailMap.get(lib.id) || [];
+          return (
+            <Card key={lib.id} className="flex flex-col overflow-hidden">
+              {/* Thumbnail fan */}
+              {thumbnails.length > 0 ? (
+                <Link href={`/libraries/${lib.id}/series`} className="block relative h-48 overflow-hidden bg-muted/10">
+                  <Image
+                    src={thumbnails[0]}
+                    alt=""
+                    fill
+                    className="object-cover blur-xl scale-110 opacity-40"
+                    sizes="(max-width: 768px) 100vw, 33vw"
+                    loading="lazy"
+                  />
+                  <div className="absolute inset-0 flex items-end justify-center">
+                    {thumbnails.map((url, i) => {
+                      const count = thumbnails.length;
+                      const mid = (count - 1) / 2;
+                      const angle = (i - mid) * 12;
+                      const radius = 220;
+                      const rad = ((angle - 90) * Math.PI) / 180;
+                      const cx = Math.cos(rad) * radius;
+                      const cy = Math.sin(rad) * radius;
+                      return (
+                        <Image
+                          key={i}
+                          src={url}
+                          alt=""
+                          width={96}
+                          height={144}
+                          className="absolute object-cover shadow-lg"
+                          style={{
+                            transform: `translate(${cx}px, ${cy}px) rotate(${angle}deg)`,
+                            transformOrigin: 'bottom center',
+                            zIndex: count - Math.abs(Math.round(i - mid)),
+                            bottom: '-185px',
+                          }}
+                          sizes="96px"
+                          loading="lazy"
+                        />
+                      );
+                    })}
+                  </div>
+                </Link>
+              ) : (
+                <div className="h-8 bg-muted/10" />
+              )}
+
+              <CardHeader className="pb-2">
+                <div className="flex items-start justify-between">
+                  <div>
+                    <CardTitle className="text-lg">{lib.name}</CardTitle>
+                    {!lib.enabled && <Badge variant="muted" className="mt-1">{t("libraries.disabled")}</Badge>}
+                  </div>
+                  <div className="flex items-center gap-1">
+                    <LibraryActions
+                      libraryId={lib.id}
+                      monitorEnabled={lib.monitor_enabled}
+                      scanMode={lib.scan_mode}
+                      watcherEnabled={lib.watcher_enabled}
+                      metadataProvider={lib.metadata_provider}
+                      fallbackMetadataProvider={lib.fallback_metadata_provider}
+                      metadataRefreshMode={lib.metadata_refresh_mode}
+                    />
+                    <form>
+                      <input type="hidden" name="id" value={lib.id} />
+                      <Button type="submit" variant="ghost" size="sm" formAction={removeLibrary} className="text-muted-foreground hover:text-destructive">
+                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                        </svg>
+                      </Button>
+                    </form>
+                  </div>
+                </div>
+                <code className="text-xs font-mono text-muted-foreground break-all">{lib.root_path}</code>
+              </CardHeader>
+              <CardContent className="flex-1 pt-0">
+                {/* Stats */}
+                <div className="grid grid-cols-2 gap-3 mb-3">
+                  <Link
+                    href={`/libraries/${lib.id}/books`}
+                    className="text-center p-2.5 bg-muted/50 rounded-lg hover:bg-accent transition-colors duration-200"
+                  >
+                    <span className="block text-2xl font-bold text-primary">{lib.book_count}</span>
+                    <span className="text-xs text-muted-foreground">{t("libraries.books")}</span>
+                  </Link>
+                  <Link
+                    href={`/libraries/${lib.id}/series`}
+                    className="text-center p-2.5 bg-muted/50 rounded-lg hover:bg-accent transition-colors duration-200"
+                  >
+                    <span className="block text-2xl font-bold text-foreground">{lib.series_count}</span>
+                    <span className="text-xs text-muted-foreground">{t("libraries.series")}</span>
+                  </Link>
+                </div>
+
+                {/* Configuration tags */}
+                <div className="flex flex-wrap gap-1.5">
+                  <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-medium ${
+                    lib.monitor_enabled
+                      ? 'bg-success/10 text-success'
+                      : 'bg-muted/50 text-muted-foreground'
+                  }`}>
+                    <span className="text-[9px]">{lib.monitor_enabled ? '●' : '○'}</span>
+                    {t("libraries.scanLabel", { mode: t(`monitoring.${lib.scan_mode}` as TranslationKey) })}
+                  </span>
+
+                  <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-medium ${
+                    lib.watcher_enabled
+                      ? 'bg-warning/10 text-warning'
+                      : 'bg-muted/50 text-muted-foreground'
+                  }`}>
+                    <span>{lib.watcher_enabled ? '⚡' : '○'}</span>
+                    <span>{t("libraries.watcherLabel")}</span>
+                  </span>
+
+                  {lib.metadata_provider && lib.metadata_provider !== "none" && (
+                    <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-medium bg-primary/10 text-primary">
+                      <ProviderIcon provider={lib.metadata_provider} size={11} />
+                      {lib.metadata_provider.replace('_', ' ')}
+                    </span>
+                  )}
+
+                  {lib.metadata_refresh_mode !== "manual" && (
+                    <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-medium bg-muted/50 text-muted-foreground">
+                      {t("libraries.metaRefreshLabel", { mode: t(`monitoring.${lib.metadata_refresh_mode}` as TranslationKey) })}
+                    </span>
+                  )}
+
+                  {lib.monitor_enabled && lib.next_scan_at && (
+                    <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-medium bg-muted/50 text-muted-foreground">
+                      {t("libraries.nextScan", { time: formatNextScan(lib.next_scan_at, t("libraries.imminent")) })}
+                    </span>
+                  )}
+                </div>
+              </CardContent>
+            </Card>
+          );
+        })}
+      </div>
+    </>
+  );
+}

apps/backoffice/app/(app)/page.tsx

@@ -0,0 +1,497 @@
+import React from "react";
+import { fetchStats, StatsResponse, getBookCoverUrl } from "@/lib/api";
+import { Card, CardContent, CardHeader, CardTitle } from "@/app/components/ui";
+import { RcDonutChart, RcBarChart, RcAreaChart, RcStackedBar, RcHorizontalBar, RcMultiLineChart } from "@/app/components/DashboardCharts";
+import { PeriodToggle } from "@/app/components/PeriodToggle";
+import Image from "next/image";
+import Link from "next/link";
+import { getServerTranslations } from "@/lib/i18n/server";
+import type { TranslateFunction } from "@/lib/i18n/dictionaries";
+
+export const dynamic = "force-dynamic";
+
+function formatBytes(bytes: number): string {
+  if (bytes === 0) return "0 B";
+  const k = 1024;
+  const sizes = ["B", "KB", "MB", "GB", "TB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${(bytes / Math.pow(k, i)).toFixed(1)} ${sizes[i]}`;
+}
+
+function formatNumber(n: number, locale: string): string {
+  return n.toLocaleString(locale === "fr" ? "fr-FR" : "en-US");
+}
+
+function formatChartLabel(raw: string, period: "day" | "week" | "month", locale: string): string {
+  const loc = locale === "fr" ? "fr-FR" : "en-US";
+  if (period === "month") {
+    // raw = "YYYY-MM"
+    const [y, m] = raw.split("-");
+    const d = new Date(Number(y), Number(m) - 1, 1);
+    return d.toLocaleDateString(loc, { month: "short" });
+  }
+  if (period === "week") {
+    // raw = "YYYY-MM-DD" (Monday of the week)
+    const d = new Date(raw + "T00:00:00");
+    return d.toLocaleDateString(loc, { day: "numeric", month: "short" });
+  }
+  // day: raw = "YYYY-MM-DD"
+  const d = new Date(raw + "T00:00:00");
+  return d.toLocaleDateString(loc, { weekday: "short", day: "numeric" });
+}
+
+// Horizontal progress bar for metadata quality (stays server-rendered, no recharts needed)
+function HorizontalBar({ label, value, max, subLabel, color = "var(--color-primary)" }: { label: string; value: number; max: number; subLabel?: string; color?: string }) {
+  const pct = max > 0 ? (value / max) * 100 : 0;
+  return (
+    <div className="space-y-1">
+      <div className="flex justify-between text-sm">
+        <span className="font-medium text-foreground truncate">{label}</span>
+        <span className="text-muted-foreground shrink-0 ml-2">{subLabel || value}</span>
+      </div>
+      <div className="h-2 bg-muted rounded-full overflow-hidden">
+        <div
+          className="h-full rounded-full transition-all duration-500"
+          style={{ width: `${pct}%`, backgroundColor: color }}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default async function DashboardPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+}) {
+  const searchParamsAwaited = await searchParams;
+  const rawPeriod = searchParamsAwaited.period;
+  const period = rawPeriod === "day" ? "day" as const : rawPeriod === "week" ? "week" as const : "month" as const;
+  const { t, locale } = await getServerTranslations();
+
+  let stats: StatsResponse | null = null;
+  try {
+    stats = await fetchStats(period);
+  } catch (e) {
+    console.error("Failed to fetch stats:", e);
+  }
+
+  if (!stats) {
+    return (
+      <div className="max-w-5xl mx-auto">
+        <div className="text-center mb-12">
+          <h1 className="text-4xl font-bold tracking-tight mb-4 text-foreground">StripStream Backoffice</h1>
+          <p className="text-lg text-muted-foreground">{t("dashboard.loadError")}</p>
+        </div>
+        <QuickLinks t={t} />
+      </div>
+    );
+  }
+
+  const {
+    overview,
+    reading_status,
+    currently_reading = [],
+    recently_read = [],
+    reading_over_time = [],
+    by_format,
+    by_library,
+    top_series,
+    additions_over_time,
+    jobs_over_time = [],
+    metadata = { total_series: 0, series_linked: 0, series_unlinked: 0, books_with_summary: 0, books_with_isbn: 0, by_provider: [] },
+  } = stats;
+
+  const readingColors = ["hsl(220 13% 70%)", "hsl(45 93% 47%)", "hsl(142 60% 45%)"];
+  const formatColors = [
+    "hsl(198 78% 37%)", "hsl(142 60% 45%)", "hsl(45 93% 47%)",
+    "hsl(2 72% 48%)", "hsl(280 60% 50%)", "hsl(32 80% 50%)",
+    "hsl(170 60% 45%)", "hsl(220 60% 50%)",
+  ];
+
+  const noDataLabel = t("common.noData");
+
+  return (
+    <div className="max-w-7xl mx-auto space-y-6">
+      {/* Header */}
+      <div className="mb-2">
+        <h1 className="text-3xl font-bold text-foreground flex items-center gap-3">
+          <svg className="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+          </svg>
+          {t("dashboard.title")}
+        </h1>
+        <p className="text-muted-foreground mt-2 max-w-2xl">
+          {t("dashboard.subtitle")}
+        </p>
+      </div>
+
+      {/* Overview stat cards */}
+      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
+        <StatCard icon="book" label={t("dashboard.books")} value={formatNumber(overview.total_books, locale)} color="success" />
+        <StatCard icon="series" label={t("dashboard.series")} value={formatNumber(overview.total_series, locale)} color="primary" />
+        <StatCard icon="library" label={t("dashboard.libraries")} value={formatNumber(overview.total_libraries, locale)} color="warning" />
+        <StatCard icon="pages" label={t("dashboard.pages")} value={formatNumber(overview.total_pages, locale)} color="primary" />
+        <StatCard icon="author" label={t("dashboard.authors")} value={formatNumber(overview.total_authors, locale)} color="success" />
+        <StatCard icon="size" label={t("dashboard.totalSize")} value={formatBytes(overview.total_size_bytes)} color="warning" />
+      </div>
+
+      {/* Currently reading + Recently read */}
+      {(currently_reading.length > 0 || recently_read.length > 0) && (
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          {/* Currently reading */}
+          <Card hover={false}>
+            <CardHeader>
+              <CardTitle className="text-base">{t("dashboard.currentlyReading")}</CardTitle>
+            </CardHeader>
+            <CardContent>
+              {currently_reading.length === 0 ? (
+                <p className="text-muted-foreground text-sm text-center py-4">{t("dashboard.noCurrentlyReading")}</p>
+              ) : (
+                <div className="space-y-3 max-h-[216px] overflow-y-auto pr-1">
+                  {currently_reading.slice(0, 8).map((book) => {
+                    const pct = book.page_count > 0 ? Math.round((book.current_page / book.page_count) * 100) : 0;
+                    return (
+                      <Link key={book.book_id} href={`/books/${book.book_id}` as any} className="flex items-center gap-3 group">
+                        <Image
+                          src={getBookCoverUrl(book.book_id)}
+                          alt={book.title}
+                          width={40}
+                          height={56}
+                          className="w-10 h-14 object-cover rounded shadow-sm shrink-0 bg-muted"
+                        />
+                        <div className="min-w-0 flex-1">
+                          <p className="text-sm font-medium text-foreground truncate group-hover:text-primary transition-colors">{book.title}</p>
+                          {book.series && <p className="text-xs text-muted-foreground truncate">{book.series}</p>}
+                          <div className="mt-1.5 flex items-center gap-2">
+                            <div className="h-1.5 flex-1 bg-muted rounded-full overflow-hidden">
+                              <div className="h-full bg-warning rounded-full transition-all" style={{ width: `${pct}%` }} />
+                            </div>
+                            <span className="text-[10px] text-muted-foreground shrink-0">{pct}%</span>
+                          </div>
+                          <p className="text-[10px] text-muted-foreground mt-0.5">{t("dashboard.pageProgress", { current: book.current_page, total: book.page_count })}</p>
+                        </div>
+                      </Link>
+                    );
+                  })}
+                </div>
+              )}
+            </CardContent>
+          </Card>
+
+          {/* Recently read */}
+          <Card hover={false}>
+            <CardHeader>
+              <CardTitle className="text-base">{t("dashboard.recentlyRead")}</CardTitle>
+            </CardHeader>
+            <CardContent>
+              {recently_read.length === 0 ? (
+                <p className="text-muted-foreground text-sm text-center py-4">{t("dashboard.noRecentlyRead")}</p>
+              ) : (
+                <div className="space-y-3 max-h-[216px] overflow-y-auto pr-1">
+                  {recently_read.map((book) => (
+                    <Link key={book.book_id} href={`/books/${book.book_id}` as any} className="flex items-center gap-3 group">
+                      <Image
+                        src={getBookCoverUrl(book.book_id)}
+                        alt={book.title}
+                        width={40}
+                        height={56}
+                        className="w-10 h-14 object-cover rounded shadow-sm shrink-0 bg-muted"
+                      />
+                      <div className="min-w-0 flex-1">
+                        <p className="text-sm font-medium text-foreground truncate group-hover:text-primary transition-colors">{book.title}</p>
+                        {book.series && <p className="text-xs text-muted-foreground truncate">{book.series}</p>}
+                      </div>
+                      <span className="text-xs text-muted-foreground shrink-0">{book.last_read_at}</span>
+                    </Link>
+                  ))}
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        </div>
+      )}
+
+      {/* Reading activity line chart */}
+      <Card hover={false}>
+        <CardHeader className="flex flex-row items-center justify-between space-y-0">
+          <CardTitle className="text-base">{t("dashboard.readingActivity")}</CardTitle>
+          <PeriodToggle labels={{ day: t("dashboard.periodDay"), week: t("dashboard.periodWeek"), month: t("dashboard.periodMonth") }} />
+        </CardHeader>
+        <CardContent>
+          <RcAreaChart
+            noDataLabel={noDataLabel}
+            data={reading_over_time.map((m) => ({ label: formatChartLabel(m.month, period, locale), value: m.books_read }))}
+            color="hsl(142 60% 45%)"
+          />
+        </CardContent>
+      </Card>
+
+      {/* Charts row */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {/* Reading status donut */}
+        <Card hover={false}>
+          <CardHeader>
+            <CardTitle className="text-base">{t("dashboard.readingStatus")}</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <RcDonutChart
+              noDataLabel={noDataLabel}
+              data={[
+                { name: t("status.unread"), value: reading_status.unread, color: readingColors[0] },
+                { name: t("status.reading"), value: reading_status.reading, color: readingColors[1] },
+                { name: t("status.read"), value: reading_status.read, color: readingColors[2] },
+              ]}
+            />
+          </CardContent>
+        </Card>
+
+        {/* By format donut */}
+        <Card hover={false}>
+          <CardHeader>
+            <CardTitle className="text-base">{t("dashboard.byFormat")}</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <RcDonutChart
+              noDataLabel={noDataLabel}
+              data={by_format.slice(0, 6).map((f, i) => ({
+                name: (f.format || t("dashboard.unknown")).toUpperCase(),
+                value: f.count,
+                color: formatColors[i % formatColors.length],
+              }))}
+            />
+          </CardContent>
+        </Card>
+
+        {/* By library donut */}
+        <Card hover={false}>
+          <CardHeader>
+            <CardTitle className="text-base">{t("dashboard.byLibrary")}</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <RcDonutChart
+              noDataLabel={noDataLabel}
+              data={by_library.slice(0, 6).map((l, i) => ({
+                name: l.library_name,
+                value: l.book_count,
+                color: formatColors[i % formatColors.length],
+              }))}
+            />
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Metadata row */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {/* Series metadata coverage donut */}
+        <Card hover={false}>
+          <CardHeader>
+            <CardTitle className="text-base">{t("dashboard.metadataCoverage")}</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <RcDonutChart
+              noDataLabel={noDataLabel}
+              data={[
+                { name: t("dashboard.seriesLinked"), value: metadata.series_linked, color: "hsl(142 60% 45%)" },
+                { name: t("dashboard.seriesUnlinked"), value: metadata.series_unlinked, color: "hsl(220 13% 70%)" },
+              ]}
+            />
+          </CardContent>
+        </Card>
+
+        {/* By provider donut */}
+        <Card hover={false}>
+          <CardHeader>
+            <CardTitle className="text-base">{t("dashboard.byProvider")}</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <RcDonutChart
+              noDataLabel={noDataLabel}
+              data={metadata.by_provider.map((p, i) => ({
+                name: p.provider.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase()),
+                value: p.count,
+                color: formatColors[i % formatColors.length],
+              }))}
+            />
+          </CardContent>
+        </Card>
+
+        {/* Book metadata quality */}
+        <Card hover={false}>
+          <CardHeader>
+            <CardTitle className="text-base">{t("dashboard.bookMetadata")}</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-4">
+              <HorizontalBar
+                label={t("dashboard.withSummary")}
+                value={metadata.books_with_summary}
+                max={overview.total_books}
+                subLabel={overview.total_books > 0 ? `${Math.round((metadata.books_with_summary / overview.total_books) * 100)}%` : "0%"}
+                color="hsl(198 78% 37%)"
+              />
+              <HorizontalBar
+                label={t("dashboard.withIsbn")}
+                value={metadata.books_with_isbn}
+                max={overview.total_books}
+                subLabel={overview.total_books > 0 ? `${Math.round((metadata.books_with_isbn / overview.total_books) * 100)}%` : "0%"}
+                color="hsl(280 60% 50%)"
+              />
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Libraries breakdown + Top series */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {by_library.length > 0 && (
+          <Card hover={false}>
+            <CardHeader>
+              <CardTitle className="text-base">{t("dashboard.libraries")}</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <RcStackedBar
+                data={by_library.map((lib) => ({
+                  name: lib.library_name,
+                  read: lib.read_count,
+                  reading: lib.reading_count,
+                  unread: lib.unread_count,
+                  sizeLabel: formatBytes(lib.size_bytes),
+                }))}
+                labels={{
+                  read: t("status.read"),
+                  reading: t("status.reading"),
+                  unread: t("status.unread"),
+                  books: t("dashboard.books"),
+                }}
+              />
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Top series */}
+        <Card hover={false}>
+          <CardHeader>
+            <CardTitle className="text-base">{t("dashboard.popularSeries")}</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <RcHorizontalBar
+              noDataLabel={t("dashboard.noSeries")}
+              data={top_series.slice(0, 8).map((s) => ({
+                name: s.series,
+                value: s.book_count,
+                subLabel: t("dashboard.readCount", { read: s.read_count, total: s.book_count }),
+              }))}
+              color="hsl(142 60% 45%)"
+            />
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Additions line chart – full width */}
+      <Card hover={false}>
+        <CardHeader className="flex flex-row items-center justify-between space-y-0">
+          <CardTitle className="text-base">{t("dashboard.booksAdded")}</CardTitle>
+          <PeriodToggle labels={{ day: t("dashboard.periodDay"), week: t("dashboard.periodWeek"), month: t("dashboard.periodMonth") }} />
+        </CardHeader>
+        <CardContent>
+          <RcAreaChart
+            noDataLabel={noDataLabel}
+            data={additions_over_time.map((m) => ({ label: formatChartLabel(m.month, period, locale), value: m.books_added }))}
+            color="hsl(198 78% 37%)"
+          />
+        </CardContent>
+      </Card>
+
+      {/* Jobs over time – multi-line chart */}
+      <Card hover={false}>
+        <CardHeader className="flex flex-row items-center justify-between space-y-0">
+          <CardTitle className="text-base">{t("dashboard.jobsOverTime")}</CardTitle>
+          <PeriodToggle labels={{ day: t("dashboard.periodDay"), week: t("dashboard.periodWeek"), month: t("dashboard.periodMonth") }} />
+        </CardHeader>
+        <CardContent>
+          <RcMultiLineChart
+            noDataLabel={noDataLabel}
+            data={jobs_over_time.map((j) => ({
+              label: formatChartLabel(j.label, period, locale),
+              scan: j.scan,
+              rebuild: j.rebuild,
+              thumbnail: j.thumbnail,
+              other: j.other,
+            }))}
+            lines={[
+              { key: "scan", label: t("dashboard.jobScan"), color: "hsl(198 78% 37%)" },
+              { key: "rebuild", label: t("dashboard.jobRebuild"), color: "hsl(142 60% 45%)" },
+              { key: "thumbnail", label: t("dashboard.jobThumbnail"), color: "hsl(45 93% 47%)" },
+              { key: "other", label: t("dashboard.jobOther"), color: "hsl(280 60% 50%)" },
+            ]}
+          />
+        </CardContent>
+      </Card>
+
+      {/* Quick links */}
+      <QuickLinks t={t} />
+    </div>
+  );
+}
+
+function StatCard({ icon, label, value, color }: { icon: string; label: string; value: string; color: string }) {
+  const icons: Record<string, React.ReactNode> = {
+    book: <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />,
+    series: <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />,
+    library: <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />,
+    pages: <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />,
+    author: <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />,
+    size: <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />,
+  };
+
+  const colorClasses: Record<string, string> = {
+    primary: "bg-primary/10 text-primary",
+    success: "bg-success/10 text-success",
+    warning: "bg-warning/10 text-warning",
+  };
+
+  return (
+    <Card hover={false} className="p-4">
+      <div className="flex items-center gap-3">
+        <div className={`w-10 h-10 rounded-lg flex items-center justify-center shrink-0 ${colorClasses[color]}`}>
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            {icons[icon]}
+          </svg>
+        </div>
+        <div className="min-w-0">
+          <p className="text-xl font-bold text-foreground leading-tight">{value}</p>
+          <p className="text-xs text-muted-foreground">{label}</p>
+        </div>
+      </div>
+    </Card>
+  );
+}
+
+function QuickLinks({ t }: { t: TranslateFunction }) {
+  const links = [
+    { href: "/libraries", label: t("nav.libraries"), bg: "bg-primary/10", text: "text-primary", hoverBg: "group-hover:bg-primary", hoverText: "group-hover:text-primary-foreground", icon: <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" /> },
+    { href: "/books", label: t("nav.books"), bg: "bg-success/10", text: "text-success", hoverBg: "group-hover:bg-success", hoverText: "group-hover:text-white", icon: <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" /> },
+    { href: "/series", label: t("nav.series"), bg: "bg-warning/10", text: "text-warning", hoverBg: "group-hover:bg-warning", hoverText: "group-hover:text-white", icon: <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" /> },
+    { href: "/jobs", label: t("nav.jobs"), bg: "bg-destructive/10", text: "text-destructive", hoverBg: "group-hover:bg-destructive", hoverText: "group-hover:text-destructive-foreground", icon: <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" /> },
+  ];
+
+  return (
+    <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+      {links.map((l) => (
+        <Link
+          key={l.href}
+          href={l.href as any}
+          className="group p-4 bg-card/80 backdrop-blur-sm rounded-xl border border-border/50 shadow-sm hover:shadow-md hover:-translate-y-0.5 transition-all duration-200 flex items-center gap-3"
+        >
+          <div className={`w-9 h-9 rounded-lg flex items-center justify-center transition-colors duration-200 ${l.bg} ${l.hoverBg}`}>
+            <svg className={`w-5 h-5 ${l.text} ${l.hoverText}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              {l.icon}
+            </svg>
+          </div>
+          <span className="font-medium text-foreground text-sm">{l.label}</span>
+        </Link>
+      ))}
+    </div>
+  );
+}

apps/backoffice/app/(app)/series/page.tsx

@@ -0,0 +1,208 @@
+import { fetchAllSeries, fetchLibraries, fetchSeriesStatuses, LibraryDto, SeriesDto, SeriesPageDto, getBookCoverUrl } from "@/lib/api";
+import { getServerTranslations } from "@/lib/i18n/server";
+import { MarkSeriesReadButton } from "@/app/components/MarkSeriesReadButton";
+import { LiveSearchForm } from "@/app/components/LiveSearchForm";
+import { Card, CardContent, OffsetPagination } from "@/app/components/ui";
+import Image from "next/image";
+import Link from "next/link";
+import { ProviderIcon } from "@/app/components/ProviderIcon";
+
+export const dynamic = "force-dynamic";
+
+export default async function SeriesPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+}) {
+  const { t } = await getServerTranslations();
+  const searchParamsAwaited = await searchParams;
+  const libraryId = typeof searchParamsAwaited.library === "string" ? searchParamsAwaited.library : undefined;
+  const searchQuery = typeof searchParamsAwaited.q === "string" ? searchParamsAwaited.q : "";
+  const readingStatus = typeof searchParamsAwaited.status === "string" ? searchParamsAwaited.status : undefined;
+  const sort = typeof searchParamsAwaited.sort === "string" ? searchParamsAwaited.sort : undefined;
+  const seriesStatus = typeof searchParamsAwaited.series_status === "string" ? searchParamsAwaited.series_status : undefined;
+  const hasMissing = searchParamsAwaited.has_missing === "true";
+  const metadataProvider = typeof searchParamsAwaited.metadata_provider === "string" ? searchParamsAwaited.metadata_provider : undefined;
+  const page = typeof searchParamsAwaited.page === "string" ? parseInt(searchParamsAwaited.page) : 1;
+  const limit = typeof searchParamsAwaited.limit === "string" ? parseInt(searchParamsAwaited.limit) : 20;
+
+  const [libraries, seriesPage, dbStatuses] = await Promise.all([
+    fetchLibraries().catch(() => [] as LibraryDto[]),
+    fetchAllSeries(libraryId, searchQuery || undefined, readingStatus, page, limit, sort, seriesStatus, hasMissing, metadataProvider).catch(
+      () => ({ items: [] as SeriesDto[], total: 0, page: 1, limit }) as SeriesPageDto
+    ),
+    fetchSeriesStatuses().catch(() => [] as string[]),
+  ]);
+
+  const series = seriesPage.items;
+  const totalPages = Math.ceil(seriesPage.total / limit);
+  const sortOptions = [
+    { value: "", label: t("books.sortTitle") },
+    { value: "latest", label: t("books.sortLatest") },
+  ];
+
+  const hasFilters = searchQuery || libraryId || readingStatus || sort || seriesStatus || hasMissing || metadataProvider;
+
+  const libraryOptions = [
+    { value: "", label: t("books.allLibraries") },
+    ...libraries.map((lib) => ({ value: lib.id, label: lib.name })),
+  ];
+
+  const statusOptions = [
+    { value: "", label: t("common.all") },
+    { value: "unread", label: t("status.unread") },
+    { value: "reading", label: t("status.reading") },
+    { value: "read", label: t("status.read") },
+  ];
+
+  const KNOWN_STATUSES: Record<string, string> = {
+    ongoing: t("seriesStatus.ongoing"),
+    ended: t("seriesStatus.ended"),
+    hiatus: t("seriesStatus.hiatus"),
+    cancelled: t("seriesStatus.cancelled"),
+    upcoming: t("seriesStatus.upcoming"),
+  };
+  const seriesStatusOptions = [
+    { value: "", label: t("seriesStatus.allStatuses") },
+    ...dbStatuses.map((s) => ({ value: s, label: KNOWN_STATUSES[s] || s })),
+  ];
+
+  const missingOptions = [
+    { value: "", label: t("common.all") },
+    { value: "true", label: t("series.missingBooks") },
+  ];
+
+  const metadataOptions = [
+    { value: "", label: t("series.metadataAll") },
+    { value: "linked", label: t("series.metadataLinked") },
+    { value: "unlinked", label: t("series.metadataUnlinked") },
+    { value: "google_books", label: "Google Books" },
+    { value: "open_library", label: "Open Library" },
+    { value: "comicvine", label: "ComicVine" },
+    { value: "anilist", label: "AniList" },
+    { value: "bedetheque", label: "Bédéthèque" },
+  ];
+
+  return (
+    <>
+      <div className="mb-6">
+        <h1 className="text-3xl font-bold text-foreground flex items-center gap-3">
+          <svg className="w-8 h-8 text-warning" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+          </svg>
+          {t("series.title")}
+        </h1>
+      </div>
+
+      <Card className="mb-6">
+        <CardContent className="pt-6">
+          <LiveSearchForm
+            basePath="/series"
+            fields={[
+              { name: "q", type: "text", label: t("common.search"), placeholder: t("series.searchPlaceholder") },
+              { name: "library", type: "select", label: t("books.library"), options: libraryOptions },
+              { name: "status", type: "select", label: t("series.reading"), options: statusOptions },
+              { name: "series_status", type: "select", label: t("editSeries.status"), options: seriesStatusOptions },
+              { name: "has_missing", type: "select", label: t("series.missing"), options: missingOptions },
+              { name: "metadata_provider", type: "select", label: t("series.metadata"), options: metadataOptions },
+              { name: "sort", type: "select", label: t("books.sort"), options: sortOptions },
+            ]}
+          />
+        </CardContent>
+      </Card>
+
+      {/* Results count */}
+      <p className="text-sm text-muted-foreground mb-4">
+        {seriesPage.total} {t("series.title").toLowerCase()}
+        {searchQuery && <> {t("series.matchingQuery")} &quot;{searchQuery}&quot;</>}
+      </p>
+
+      {/* Series Grid */}
+      {series.length > 0 ? (
+        <>
+          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4">
+            {series.map((s) => (
+              <Link
+                key={s.name}
+                href={`/libraries/${s.library_id}/series/${encodeURIComponent(s.name)}`}
+                className="group"
+              >
+                <div
+                  className={`bg-card rounded-xl shadow-sm border border-border/60 overflow-hidden hover:shadow-md hover:-translate-y-1 transition-all duration-200 ${
+                    s.books_read_count >= s.book_count ? "opacity-50" : ""
+                  }`}
+                >
+                  <div className="aspect-[2/3] relative bg-muted/50">
+                    <Image
+                      src={getBookCoverUrl(s.first_book_id)}
+                      alt={t("books.coverOf", { name: s.name })}
+                      fill
+                      className="object-cover"
+                      sizes="(max-width: 640px) 50vw, (max-width: 768px) 33vw, (max-width: 1024px) 25vw, 16vw"
+                    />
+                  </div>
+                  <div className="p-3">
+                    <h3 className="font-medium text-foreground truncate text-sm" title={s.name}>
+                      {s.name === "unclassified" ? t("books.unclassified") : s.name}
+                    </h3>
+                    <div className="flex items-center justify-between mt-1">
+                      <p className="text-xs text-muted-foreground">
+                        {t("series.readCount", { read: String(s.books_read_count), total: String(s.book_count), plural: s.book_count !== 1 ? "s" : "" })}
+                      </p>
+                      <MarkSeriesReadButton
+                        seriesName={s.name}
+                        bookCount={s.book_count}
+                        booksReadCount={s.books_read_count}
+                      />
+                    </div>
+                    <div className="flex items-center gap-1 mt-1.5 flex-wrap">
+                      {s.series_status && (
+                        <span className={`text-[10px] px-1.5 py-0.5 rounded-full font-medium ${
+                          s.series_status === "ongoing" ? "bg-blue-500/15 text-blue-600" :
+                          s.series_status === "ended" ? "bg-green-500/15 text-green-600" :
+                          s.series_status === "hiatus" ? "bg-amber-500/15 text-amber-600" :
+                          s.series_status === "cancelled" ? "bg-red-500/15 text-red-600" :
+                          "bg-muted text-muted-foreground"
+                        }`}>
+                          {KNOWN_STATUSES[s.series_status] || s.series_status}
+                        </span>
+                      )}
+                      {s.missing_count != null && s.missing_count > 0 && (
+                        <span className="text-[10px] px-1.5 py-0.5 rounded-full font-medium bg-yellow-500/15 text-yellow-600">
+                          {t("series.missingCount", { count: String(s.missing_count), plural: s.missing_count > 1 ? "s" : "" })}
+                        </span>
+                      )}
+                      {s.metadata_provider && (
+                        <span className="text-[10px] px-1.5 py-0.5 rounded-full font-medium bg-purple-500/15 text-purple-600 inline-flex items-center gap-0.5">
+                          <ProviderIcon provider={s.metadata_provider} size={10} />
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              </Link>
+            ))}
+          </div>
+
+          <OffsetPagination
+            currentPage={page}
+            totalPages={totalPages}
+            pageSize={limit}
+            totalItems={seriesPage.total}
+          />
+        </>
+      ) : (
+        <div className="flex flex-col items-center justify-center py-16 text-center">
+          <div className="w-16 h-16 mb-4 text-muted-foreground/30">
+            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+            </svg>
+          </div>
+          <p className="text-muted-foreground text-lg">
+            {hasFilters ? t("series.noResults") : t("series.noSeries")}
+          </p>
+        </div>
+      )}
+    </>
+  );
+}

apps/backoffice/app/(app)/settings/page.tsx

@@ -0,0 +1,27 @@
+import { getSettings, getCacheStats, getThumbnailStats } from "@/lib/api";
+import SettingsPage from "./SettingsPage";
+
+export const dynamic = "force-dynamic";
+
+export default async function SettingsPageWrapper() {
+  const settings = await getSettings().catch(() => ({
+    image_processing: { format: "webp", quality: 85, filter: "lanczos3", max_width: 2160 },
+    cache: { enabled: true, directory: "/tmp/stripstream-image-cache", max_size_mb: 10000 },
+    limits: { concurrent_renders: 4, timeout_seconds: 12, rate_limit_per_second: 120 },
+    thumbnail: { enabled: true, width: 300, height: 400, quality: 80, format: "webp", directory: "/data/thumbnails" }
+  }));
+
+  const cacheStats = await getCacheStats().catch(() => ({
+    total_size_mb: 0,
+    file_count: 0,
+    directory: "/tmp/stripstream-image-cache"
+  }));
+
+  const thumbnailStats = await getThumbnailStats().catch(() => ({
+    total_size_mb: 0,
+    file_count: 0,
+    directory: "/data/thumbnails"
+  }));
+
+  return <SettingsPage initialSettings={settings} initialCacheStats={cacheStats} initialThumbnailStats={thumbnailStats} />;
+}

apps/backoffice/app/(app)/tokens/page.tsx

@@ -0,0 +1,151 @@
+import { revalidatePath } from "next/cache";
+import { redirect } from "next/navigation";
+import { listTokens, createToken, revokeToken, deleteToken, TokenDto } from "@/lib/api";
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, Button, Badge, FormField, FormInput, FormSelect, FormRow } from "@/app/components/ui";
+import { getServerTranslations } from "@/lib/i18n/server";
+
+export const dynamic = "force-dynamic";
+
+export default async function TokensPage({
+  searchParams
+}: {
+  searchParams: Promise<{ created?: string }>;
+}) {
+  const { t } = await getServerTranslations();
+  const params = await searchParams;
+  const tokens = await listTokens().catch(() => [] as TokenDto[]);
+
+  async function createTokenAction(formData: FormData) {
+    "use server";
+    const name = formData.get("name") as string;
+    const scope = formData.get("scope") as string;
+    if (name) {
+      const result = await createToken(name, scope);
+      revalidatePath("/tokens");
+      redirect(`/tokens?created=${encodeURIComponent(result.token)}`);
+    }
+  }
+
+  async function revokeTokenAction(formData: FormData) {
+    "use server";
+    const id = formData.get("id") as string;
+    await revokeToken(id);
+    revalidatePath("/tokens");
+  }
+
+  async function deleteTokenAction(formData: FormData) {
+    "use server";
+    const id = formData.get("id") as string;
+    await deleteToken(id);
+    revalidatePath("/tokens");
+  }
+
+  return (
+    <>
+      <div className="mb-6">
+        <h1 className="text-3xl font-bold text-foreground flex items-center gap-3">
+          <svg className="w-8 h-8 text-destructive" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
+          </svg>
+          {t("tokens.title")}
+        </h1>
+      </div>
+
+      {params.created ? (
+        <Card className="mb-6 border-success/50 bg-success/5">
+          <CardHeader>
+            <CardTitle className="text-success">{t("tokens.created")}</CardTitle>
+            <CardDescription>{t("tokens.createdDescription")}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <pre className="p-4 bg-background rounded-lg text-sm font-mono text-foreground overflow-x-auto border">{params.created}</pre>
+          </CardContent>
+        </Card>
+      ) : null}
+
+      <Card className="mb-6">
+        <CardHeader>
+          <CardTitle>{t("tokens.createNew")}</CardTitle>
+          <CardDescription>{t("tokens.createDescription")}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form action={createTokenAction}>
+            <FormRow>
+              <FormField className="flex-1 min-w-48">
+                <FormInput name="name" placeholder={t("tokens.tokenName")} required />
+              </FormField>
+              <FormField className="w-32">
+                <FormSelect name="scope" defaultValue="read">
+                  <option value="read">{t("tokens.scopeRead")}</option>
+                  <option value="admin">{t("tokens.scopeAdmin")}</option>
+                </FormSelect>
+              </FormField>
+              <Button type="submit">{t("tokens.createButton")}</Button>
+            </FormRow>
+          </form>
+        </CardContent>
+      </Card>
+
+      <Card className="overflow-hidden">
+        <div className="overflow-x-auto">
+          <table className="w-full">
+            <thead>
+              <tr className="border-b border-border/60 bg-muted/50">
+                <th className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">{t("tokens.name")}</th>
+                <th className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">{t("tokens.scope")}</th>
+                <th className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">{t("tokens.prefix")}</th>
+                <th className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">{t("tokens.status")}</th>
+                <th className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">{t("tokens.actions")}</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-border/60">
+              {tokens.map((token) => (
+                <tr key={token.id} className="hover:bg-accent/50 transition-colors">
+                  <td className="px-4 py-3 text-sm text-foreground">{token.name}</td>
+                  <td className="px-4 py-3 text-sm">
+                    <Badge variant={token.scope === "admin" ? "destructive" : "secondary"}>
+                      {token.scope}
+                    </Badge>
+                  </td>
+                  <td className="px-4 py-3 text-sm">
+                    <code className="px-2 py-1 bg-muted rounded font-mono text-foreground">{token.prefix}</code>
+                  </td>
+                  <td className="px-4 py-3 text-sm">
+                    {token.revoked_at ? (
+                      <Badge variant="error">{t("tokens.revoked")}</Badge>
+                    ) : (
+                      <Badge variant="success">{t("tokens.active")}</Badge>
+                    )}
+                  </td>
+                  <td className="px-4 py-3">
+                    {!token.revoked_at ? (
+                      <form action={revokeTokenAction}>
+                        <input type="hidden" name="id" value={token.id} />
+                        <Button type="submit" variant="destructive" size="sm">
+                          <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                          </svg>
+                          {t("tokens.revoke")}
+                        </Button>
+                      </form>
+                    ) : (
+                      <form action={deleteTokenAction}>
+                        <input type="hidden" name="id" value={token.id} />
+                        <Button type="submit" variant="destructive" size="sm">
+                          <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                          </svg>
+                          {t("common.delete")}
+                        </Button>
+                      </form>
+                    )}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </Card>
+    </>
+  );
+}