feat(backoffice): add reading progress management, series page, and live search

- API: add POST /series/mark-read to batch mark all books in a series
- API: add GET /series cross-library endpoint with search, library and status filters
- API: add library_id to SeriesItem response
- Backoffice: mark book as read/unread button on book detail page
- Backoffice: mark series as read/unread button on series cards
- Backoffice: new /series top-level page with search and filters
- Backoffice: new /libraries/[id]/series/[name] series detail page
- Backoffice: opacity on fully read books and series cards
- Backoffice: live search with debounce on books and series pages
- Backoffice: reading status filter on books and series pages
- Fix $2 -> $1 parameter binding in mark-series-read SQL

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

apps/backoffice/app/api/books/[bookId]/progress/route.ts

@@ -0,0 +1,17 @@
+import { NextRequest, NextResponse } from "next/server";
+import { updateReadingProgress } from "@/lib/api";
+
+export async function PATCH(
+  request: NextRequest,
+  { params }: { params: Promise<{ bookId: string }> }
+) {
+  const { bookId } = await params;
+  try {
+    const body = await request.json();
+    const data = await updateReadingProgress(bookId, body.status, body.current_page ?? undefined);
+    return NextResponse.json(data);
+  } catch (error) {
+    const message = error instanceof Error ? error.message : "Failed to update reading progress";
+    return NextResponse.json({ error: message }, { status: 500 });
+  }
+}

apps/backoffice/app/api/series/mark-read/route.ts

@@ -0,0 +1,13 @@
+import { NextRequest, NextResponse } from "next/server";
+import { markSeriesRead } from "@/lib/api";
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const data = await markSeriesRead(body.series, body.status ?? "read");
+    return NextResponse.json(data);
+  } catch (error) {
+    const message = error instanceof Error ? error.message : "Failed to mark series";
+    return NextResponse.json({ error: message }, { status: 500 });
+  }
+}

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

@@ -1,6 +1,7 @@
 import { fetchLibraries, getBookCoverUrl, BookDto, apiFetch, ReadingStatus } from "../../../lib/api";
 import { BookPreview } from "../../components/BookPreview";
 import { ConvertButton } from "../../components/ConvertButton";
+import { MarkBookReadButton } from "../../components/MarkBookReadButton";
 import Image from "next/image";
 import Link from "next/link";
 import { notFound } from "next/navigation";
@@ -105,11 +106,14 @@ export default async function BookDetailPage({
               {book.reading_status && (
                 <div className="flex items-center justify-between py-2 border-b border-border">
                   <span className="text-sm text-muted-foreground">Lecture :</span>
-                  <ReadingStatusBadge
-                    status={book.reading_status}
-                    currentPage={book.reading_current_page ?? null}
-                    lastReadAt={book.reading_last_read_at ?? null}
-                  />
+                  <div className="flex items-center gap-3">
+                    <ReadingStatusBadge
+                      status={book.reading_status}
+                      currentPage={book.reading_current_page ?? null}
+                      lastReadAt={book.reading_last_read_at ?? null}
+                    />
+                    <MarkBookReadButton bookId={book.id} currentStatus={book.reading_status} />
+                  </div>
                 </div>
               )}
 

apps/backoffice/app/books/page.tsx

@@ -1,6 +1,7 @@
 import { fetchBooks, searchBooks, fetchLibraries, BookDto, LibraryDto, SeriesHitDto, getBookCoverUrl } from "../../lib/api";
 import { BooksGrid, EmptyState } from "../components/BookCard";
-import { Card, CardContent, Button, FormField, FormInput, FormSelect, FormRow, OffsetPagination } from "../components/ui";
+import { LiveSearchForm } from "../components/LiveSearchForm";
+import { Card, CardContent, OffsetPagination } from "../components/ui";
 import Link from "next/link";
 import Image from "next/image";
 
@@ -14,6 +15,7 @@ export default async function BooksPage({
   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 page = typeof searchParamsAwaited.page === "string" ? parseInt(searchParamsAwaited.page) : 1;
   const limit = typeof searchParamsAwaited.limit === "string" ? parseInt(searchParamsAwaited.limit) : 20;
 
@@ -52,7 +54,7 @@ export default async function BooksPage({
       totalHits = searchResponse.estimated_total_hits;
     }
   } else {
-    const booksPage = await fetchBooks(libraryId, undefined, page, limit).catch(() => ({
+    const booksPage = await fetchBooks(libraryId, undefined, page, limit, readingStatus).catch(() => ({
       items: [] as BookDto[],
       total: 0,
       page: 1,
@@ -69,6 +71,20 @@ export default async function BooksPage({
 
   const totalPages = Math.ceil(total / limit);
 
+  const libraryOptions = [
+    { value: "", label: "All libraries" },
+    ...libraries.map((lib) => ({ value: lib.id, label: lib.name })),
+  ];
+
+  const statusOptions = [
+    { value: "", label: "All" },
+    { value: "unread", label: "Unread" },
+    { value: "reading", label: "In progress" },
+    { value: "read", label: "Read" },
+  ];
+
+  const hasFilters = searchQuery || libraryId || readingStatus;
+
   return (
     <>
       <div className="mb-6">
@@ -79,67 +95,29 @@ export default async function BooksPage({
           Books
         </h1>
       </div>
-      
-      {/* Search Bar - Style compact et propre */}
+
       <Card className="mb-6">
         <CardContent className="pt-6">
-          <form className="flex flex-col sm:flex-row gap-3 items-start sm:items-end">
-            <FormField className="flex-1 w-full">
-              <label className="block text-sm font-medium text-foreground mb-1.5">Search</label>
-              <FormInput 
-                name="q" 
-                placeholder="Search by title, author, series..." 
-                defaultValue={searchQuery}
-                className="w-full"
-              />
-            </FormField>
-            <FormField className="w-full sm:w-48">
-              <label className="block text-sm font-medium text-foreground mb-1.5">Library</label>
-              <FormSelect name="library" defaultValue={libraryId || ""}>
-                <option value="">All libraries</option>
-                {libraries.map((lib) => (
-                  <option key={lib.id} value={lib.id}>
-                    {lib.name}
-                  </option>
-                ))}
-              </FormSelect>
-            </FormField>
-            <div className="flex gap-2 w-full sm:w-auto">
-              <Button type="submit" className="flex-1 sm:flex-none">
-                <svg className="w-4 h-4 mr-2" 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>
-                Search
-              </Button>
-              {searchQuery && (
-                <Link 
-                  href="/books" 
-                  className="
-                    inline-flex items-center justify-center
-                    h-10 px-4
-                    border border-input
-                    text-sm font-medium
-                    text-muted-foreground
-                    bg-background
-                    rounded-md
-                    hover:bg-accent hover:text-accent-foreground
-                    transition-colors duration-200
-                    flex-1 sm:flex-none
-                  "
-                >
-                  Clear
-                </Link>
-              )}
-            </div>
-          </form>
+          <LiveSearchForm
+            basePath="/books"
+            fields={[
+              { name: "q", type: "text", label: "Search", placeholder: "Search by title, author, series...", className: "flex-1 w-full" },
+              { name: "library", type: "select", label: "Library", options: libraryOptions, className: "w-full sm:w-48" },
+              { name: "status", type: "select", label: "Status", options: statusOptions, className: "w-full sm:w-40" },
+            ]}
+          />
         </CardContent>
       </Card>
 
       {/* Résultats */}
-      {searchQuery && totalHits !== null && (
+      {searchQuery && totalHits !== null ? (
         <p className="text-sm text-muted-foreground mb-4">
           Found {totalHits} result{totalHits !== 1 ? 's' : ''} for &quot;{searchQuery}&quot;
         </p>
+      ) : !searchQuery && (
+        <p className="text-sm text-muted-foreground mb-4">
+          {total} book{total !== 1 ? 's' : ''}
+        </p>
       )}
 
       {/* Séries matchantes */}
@@ -150,7 +128,7 @@ export default async function BooksPage({
             {seriesHits.map((s) => (
               <Link
                 key={`${s.library_id}-${s.name}`}
-                href={`/libraries/${s.library_id}/books?series=${encodeURIComponent(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">
@@ -183,7 +161,7 @@ export default async function BooksPage({
         <>
           {searchQuery && <h2 className="text-lg font-semibold text-foreground mb-3">Books</h2>}
           <BooksGrid books={displayBooks} />
-          
+
           {!searchQuery && (
             <OffsetPagination
               currentPage={page}

apps/backoffice/app/components/BookCard.tsx

@@ -61,10 +61,12 @@ export function BookCard({ book, readingStatus }: BookCardProps) {
   const status = readingStatus ?? book.reading_status;
   const overlay = status ? readingStatusOverlay[status] : null;
 
+  const isRead = status === "read";
+
   return (
     <Link
       href={`/books/${book.id}`}
-      className="group block bg-card rounded-xl border border-border/60 shadow-sm hover:shadow-md hover:-translate-y-1 transition-all duration-200 overflow-hidden"
+      className={`group block bg-card rounded-xl border border-border/60 shadow-sm hover:shadow-md hover:-translate-y-1 transition-all duration-200 overflow-hidden ${isRead ? "opacity-50" : ""}`}
     >
       <div className="relative">
         <BookImage

apps/backoffice/app/components/LiveSearchForm.tsx

@@ -0,0 +1,128 @@
+"use client";
+
+import { useRef, useCallback, useEffect } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+
+interface FieldDef {
+  name: string;
+  type: "text" | "select";
+  placeholder?: string;
+  label: string;
+  options?: { value: string; label: string }[];
+  className?: string;
+}
+
+interface LiveSearchFormProps {
+  fields: FieldDef[];
+  basePath: string;
+  debounceMs?: number;
+}
+
+export function LiveSearchForm({ fields, basePath, debounceMs = 300 }: LiveSearchFormProps) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const formRef = useRef<HTMLFormElement>(null);
+
+  const buildUrl = useCallback((): string => {
+    if (!formRef.current) return basePath;
+    const formData = new FormData(formRef.current);
+    const params = new URLSearchParams();
+    for (const [key, value] of formData.entries()) {
+      const str = value.toString().trim();
+      if (str) params.set(key, str);
+    }
+    const qs = params.toString();
+    return qs ? `${basePath}?${qs}` : basePath;
+  }, [basePath]);
+
+  const navigate = useCallback((immediate: boolean) => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    if (immediate) {
+      router.replace(buildUrl() as any);
+    } else {
+      timerRef.current = setTimeout(() => {
+        router.replace(buildUrl() as any);
+      }, debounceMs);
+    }
+  }, [router, buildUrl, debounceMs]);
+
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, []);
+
+  const hasFilters = fields.some((f) => {
+    const val = searchParams.get(f.name);
+    return val && val.trim() !== "";
+  });
+
+  return (
+    <form
+      ref={formRef}
+      onSubmit={(e) => {
+        e.preventDefault();
+        if (timerRef.current) clearTimeout(timerRef.current);
+        router.replace(buildUrl() as any);
+      }}
+      className="flex flex-col sm:flex-row gap-3 items-start sm:items-end"
+    >
+      {fields.map((field) =>
+        field.type === "text" ? (
+          <div key={field.name} className={field.className || "flex-1 w-full"}>
+            <label className="block text-sm font-medium text-foreground mb-1.5">
+              {field.label}
+            </label>
+            <input
+              name={field.name}
+              type="text"
+              placeholder={field.placeholder}
+              defaultValue={searchParams.get(field.name) || ""}
+              onChange={() => navigate(false)}
+              className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+            />
+          </div>
+        ) : (
+          <div key={field.name} className={field.className || "w-full sm:w-48"}>
+            <label className="block text-sm font-medium text-foreground mb-1.5">
+              {field.label}
+            </label>
+            <select
+              name={field.name}
+              defaultValue={searchParams.get(field.name) || ""}
+              onChange={() => navigate(true)}
+              className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+            >
+              {field.options?.map((opt) => (
+                <option key={opt.value} value={opt.value}>
+                  {opt.label}
+                </option>
+              ))}
+            </select>
+          </div>
+        )
+      )}
+      {hasFilters && (
+        <button
+          type="button"
+          onClick={() => router.replace(basePath as any)}
+          className="
+            inline-flex items-center justify-center
+            h-10 px-4
+            border border-input
+            text-sm font-medium
+            text-muted-foreground
+            bg-background
+            rounded-md
+            hover:bg-accent hover:text-accent-foreground
+            transition-colors duration-200
+            w-full sm:w-auto
+          "
+        >
+          Clear
+        </button>
+      )}
+    </form>
+  );
+}

apps/backoffice/app/components/MarkBookReadButton.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { Button } from "./ui";
+
+interface MarkBookReadButtonProps {
+  bookId: string;
+  currentStatus: string;
+}
+
+export function MarkBookReadButton({ bookId, currentStatus }: MarkBookReadButtonProps) {
+  const [loading, setLoading] = useState(false);
+  const router = useRouter();
+
+  const isRead = currentStatus === "read";
+  const targetStatus = isRead ? "unread" : "read";
+  const label = isRead ? "Marquer non lu" : "Marquer comme lu";
+
+  const handleClick = async () => {
+    setLoading(true);
+    try {
+      const res = await fetch(`/api/books/${bookId}/progress`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ status: targetStatus }),
+      });
+      if (!res.ok) {
+        const body = await res.json().catch(() => ({ error: res.statusText }));
+        console.error("Failed to update reading progress:", body.error);
+      }
+      router.refresh();
+    } catch (err) {
+      console.error("Failed to update reading progress:", err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Button
+      variant={isRead ? "outline" : "primary"}
+      size="sm"
+      onClick={handleClick}
+      disabled={loading}
+    >
+      {loading ? (
+        <svg className="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+          <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+        </svg>
+      ) : isRead ? (
+        <svg className="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
+          <path strokeLinecap="round" strokeLinejoin="round" d="M9 15 3 9m0 0 6-6M3 9h12a6 6 0 0 1 0 12h-3" />
+        </svg>
+      ) : (
+        <svg className="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
+          <path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0z" />
+        </svg>
+      )}
+      {!loading && label}
+    </Button>
+  );
+}

apps/backoffice/app/components/MarkSeriesReadButton.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+
+interface MarkSeriesReadButtonProps {
+  seriesName: string;
+  bookCount: number;
+  booksReadCount: number;
+}
+
+export function MarkSeriesReadButton({ seriesName, bookCount, booksReadCount }: MarkSeriesReadButtonProps) {
+  const [loading, setLoading] = useState(false);
+  const router = useRouter();
+
+  const allRead = booksReadCount >= bookCount;
+  const targetStatus = allRead ? "unread" : "read";
+  const label = allRead ? "Marquer non lu" : "Tout marquer lu";
+
+  const handleClick = async (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setLoading(true);
+    try {
+      const res = await fetch("/api/series/mark-read", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ series: seriesName, status: targetStatus }),
+      });
+      if (!res.ok) {
+        const body = await res.json().catch(() => ({ error: res.statusText }));
+        console.error("Failed to mark series:", body.error);
+      }
+      router.refresh();
+    } catch (err) {
+      console.error("Failed to mark series:", err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <button
+      onClick={handleClick}
+      disabled={loading}
+      className={`inline-flex items-center gap-1 text-xs px-2 py-1 rounded-full font-medium transition-colors ${
+        allRead
+          ? "bg-green-500/15 text-green-600 dark:text-green-400 hover:bg-green-500/25"
+          : "bg-muted/50 text-muted-foreground hover:bg-primary/10 hover:text-primary"
+      } disabled:opacity-50`}
+    >
+      {loading ? (
+        <svg className="w-3.5 h-3.5 animate-spin" fill="none" viewBox="0 0 24 24">
+          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+          <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+        </svg>
+      ) : allRead ? (
+        <>
+          <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M9 15 3 9m0 0 6-6M3 9h12a6 6 0 0 1 0 12h-3" />
+          </svg>
+          {label}
+        </>
+      ) : (
+        <>
+          <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0z" />
+          </svg>
+          {label}
+        </>
+      )}
+    </button>
+  );
+}

apps/backoffice/app/components/MobileNav.tsx

@@ -6,9 +6,9 @@ import Link from "next/link";
 import { NavIcon } from "./ui";
 
 type NavItem = {
-  href: "/" | "/books" | "/libraries" | "/jobs" | "/tokens" | "/settings";
+  href: "/" | "/books" | "/series" | "/libraries" | "/jobs" | "/tokens" | "/settings";
   label: string;
-  icon: "dashboard" | "books" | "libraries" | "jobs" | "tokens" | "settings";
+  icon: "dashboard" | "books" | "series" | "libraries" | "jobs" | "tokens" | "settings";
 };
 
 const HamburgerIcon = () => (

apps/backoffice/app/layout.tsx

@@ -15,14 +15,15 @@ export const metadata: Metadata = {
 };
 
 type NavItem = {
-  href: "/" | "/books" | "/libraries" | "/jobs" | "/tokens" | "/settings";
+  href: "/" | "/books" | "/series" | "/libraries" | "/jobs" | "/tokens" | "/settings";
   label: string;
-  icon: "dashboard" | "books" | "libraries" | "jobs" | "tokens" | "settings";
+  icon: "dashboard" | "books" | "series" | "libraries" | "jobs" | "tokens" | "settings";
 };
 
 const navItems: NavItem[] = [
   { href: "/", label: "Dashboard", icon: "dashboard" },
   { href: "/books", label: "Books", icon: "books" },
+  { href: "/series", label: "Series", icon: "series" },
   { href: "/libraries", label: "Libraries", icon: "libraries" },
   { href: "/jobs", label: "Jobs", icon: "jobs" },
   { href: "/tokens", label: "Tokens", icon: "tokens" },

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

@@ -0,0 +1,138 @@
+import { fetchLibraries, fetchBooks, getBookCoverUrl, BookDto } from "../../../../../lib/api";
+import { BooksGrid, EmptyState } from "../../../../components/BookCard";
+import { MarkSeriesReadButton } from "../../../../components/MarkSeriesReadButton";
+import { MarkBookReadButton } from "../../../../components/MarkBookReadButton";
+import { OffsetPagination } from "../../../../components/ui";
+import Image from "next/image";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+
+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 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] = 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,
+    })),
+  ]);
+
+  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" ? "Non classifié" : 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"
+        >
+          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={`Cover of ${displayName}`}
+                fill
+                className="object-cover"
+                unoptimized
+              />
+            </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-4 text-sm">
+            <span className="text-muted-foreground">
+              <span className="font-semibold text-foreground">{booksPage.total}</span> livre{booksPage.total !== 1 ? "s" : ""}
+            </span>
+            <span className="w-px h-4 bg-border" />
+            <span className="text-muted-foreground">
+              <span className="font-semibold text-foreground">{booksReadCount}</span>/{booksPage.total} lu{booksPage.total !== 1 ? "s" : ""}
+            </span>
+
+            {/* 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>
+          </div>
+
+          <div className="flex items-center gap-3">
+            <MarkSeriesReadButton
+              seriesName={seriesName}
+              bookCount={booksPage.total}
+              booksReadCount={booksReadCount}
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Books Grid */}
+      {books.length > 0 ? (
+        <>
+          <BooksGrid books={books} />
+          <OffsetPagination
+            currentPage={page}
+            totalPages={totalPages}
+            pageSize={limit}
+            totalItems={booksPage.total}
+          />
+        </>
+      ) : (
+        <EmptyState message="Aucun livre dans cette série" />
+      )}
+    </div>
+  );
+}

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

@@ -1,5 +1,6 @@
 import { fetchLibraries, fetchSeries, getBookCoverUrl, LibraryDto, SeriesDto, SeriesPageDto } from "../../../../lib/api";
 import { OffsetPagination } from "../../../components/ui";
+import { MarkSeriesReadButton } from "../../../components/MarkSeriesReadButton";
 import Image from "next/image";
 import Link from "next/link";
 import { notFound } from "next/navigation";
@@ -48,12 +49,12 @@ export default async function LibrarySeriesPage({
         <>
           <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}/books?series=${encodeURIComponent(s.name)}`}
+              <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">
+                <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)}
@@ -67,9 +68,16 @@ export default async function LibrarySeriesPage({
                     <h3 className="font-medium text-foreground truncate text-sm" title={s.name}>
                       {s.name === "unclassified" ? "Unclassified" : s.name}
                     </h3>
-                    <p className="text-xs text-muted-foreground mt-1">
-                      {s.book_count} book{s.book_count !== 1 ? 's' : ''}
-                    </p>
+                    <div className="flex items-center justify-between mt-1">
+                      <p className="text-xs text-muted-foreground">
+                        {s.books_read_count}/{s.book_count} lu{s.book_count !== 1 ? 's' : ''}
+                      </p>
+                      <MarkSeriesReadButton
+                        seriesName={s.name}
+                        bookCount={s.book_count}
+                        booksReadCount={s.books_read_count}
+                      />
+                    </div>
                   </div>
                 </div>
               </Link>

apps/backoffice/app/series/page.tsx

@@ -0,0 +1,140 @@
+import { fetchAllSeries, fetchLibraries, LibraryDto, SeriesDto, SeriesPageDto, getBookCoverUrl } from "../../lib/api";
+import { MarkSeriesReadButton } from "../components/MarkSeriesReadButton";
+import { LiveSearchForm } from "../components/LiveSearchForm";
+import { Card, CardContent, OffsetPagination } from "../components/ui";
+import Image from "next/image";
+import Link from "next/link";
+
+export const dynamic = "force-dynamic";
+
+export default async function SeriesPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+}) {
+  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 page = typeof searchParamsAwaited.page === "string" ? parseInt(searchParamsAwaited.page) : 1;
+  const limit = typeof searchParamsAwaited.limit === "string" ? parseInt(searchParamsAwaited.limit) : 20;
+
+  const [libraries, seriesPage] = await Promise.all([
+    fetchLibraries().catch(() => [] as LibraryDto[]),
+    fetchAllSeries(libraryId, searchQuery || undefined, readingStatus, page, limit).catch(
+      () => ({ items: [] as SeriesDto[], total: 0, page: 1, limit }) as SeriesPageDto
+    ),
+  ]);
+
+  const series = seriesPage.items;
+  const totalPages = Math.ceil(seriesPage.total / limit);
+  const hasFilters = searchQuery || libraryId || readingStatus;
+
+  const libraryOptions = [
+    { value: "", label: "All libraries" },
+    ...libraries.map((lib) => ({ value: lib.id, label: lib.name })),
+  ];
+
+  const statusOptions = [
+    { value: "", label: "All" },
+    { value: "unread", label: "Unread" },
+    { value: "reading", label: "In progress" },
+    { value: "read", label: "Read" },
+  ];
+
+  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="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>
+          Series
+        </h1>
+      </div>
+
+      <Card className="mb-6">
+        <CardContent className="pt-6">
+          <LiveSearchForm
+            basePath="/series"
+            fields={[
+              { name: "q", type: "text", label: "Search", placeholder: "Search by series name...", className: "flex-1 w-full" },
+              { name: "library", type: "select", label: "Library", options: libraryOptions, className: "w-full sm:w-48" },
+              { name: "status", type: "select", label: "Status", options: statusOptions, className: "w-full sm:w-40" },
+            ]}
+          />
+        </CardContent>
+      </Card>
+
+      {/* Results count */}
+      <p className="text-sm text-muted-foreground mb-4">
+        {seriesPage.total} series
+        {searchQuery && <> matching &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={`Cover of ${s.name}`}
+                      fill
+                      className="object-cover"
+                      unoptimized
+                    />
+                  </div>
+                  <div className="p-3">
+                    <h3 className="font-medium text-foreground truncate text-sm" title={s.name}>
+                      {s.name === "unclassified" ? "Unclassified" : s.name}
+                    </h3>
+                    <div className="flex items-center justify-between mt-1">
+                      <p className="text-xs text-muted-foreground">
+                        {s.books_read_count}/{s.book_count} lu{s.book_count !== 1 ? "s" : ""}
+                      </p>
+                      <MarkSeriesReadButton
+                        seriesName={s.name}
+                        bookCount={s.book_count}
+                        booksReadCount={s.books_read_count}
+                      />
+                    </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 ? "No series found matching your filters" : "No series available"}
+          </p>
+        </div>
+      )}
+    </>
+  );
+}