feat: multi-user reading progress & backoffice impersonation

- Scope all reading progress (books, series, stats) by user via Option<Extension<AuthUser>> — admin sees aggregate, read token sees own data - Fix duplicate book rows when admin views lists (IS NOT NULL guard on JOIN) - Add X-As-User header support: admin can impersonate any user from backoffice - UserSwitcher dropdown in nav header (persisted via as_user_id cookie) - Per-user filter pills on "Currently reading" and "Recently read" dashboard sections - Inline username editing (UsernameEdit component with optimistic update) - PATCH /admin/users/:id endpoint to rename a user - Unassigned read tokens row in users table - Komga sync now requires a user_id — reading progress attributed to selected user - Migration 0051: add user_id column to komga_sync_reports - Nav breakpoints: icons-only from md, labels from xl, hamburger until md Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-24 12:47:58 +01:00
parent 232ecdda41
commit bc796f4ee5
22 changed files with 1326 additions and 152 deletions
--- a/apps/backoffice/app/(app)/layout.tsx
+++ b/apps/backoffice/app/(app)/layout.tsx
@@ -1,11 +1,15 @@
 import Image from "next/image";
 import Link from "next/link";
 import type { ReactNode } from "react";
+import { cookies } from "next/headers";
+import { revalidatePath } from "next/cache";
 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 { UserSwitcher } from "@/app/components/UserSwitcher";
+import { fetchUsers } from "@/lib/api";
 import { getServerTranslations } from "@/lib/i18n/server";
 import type { TranslationKey } from "@/lib/i18n/fr";

@@ -27,6 +31,21 @@ const navItems: NavItem[] = [

 export default async function AppLayout({ children }: { children: ReactNode }) {
  const { t } = await getServerTranslations();
+  const cookieStore = await cookies();
+  const activeUserId = cookieStore.get("as_user_id")?.value || null;
+  const users = await fetchUsers().catch(() => []);
+
+  async function setActiveUserAction(formData: FormData) {
+    "use server";
+    const userId = formData.get("user_id") as string;
+    const store = await cookies();
+    if (userId) {
+      store.set("as_user_id", userId, { path: "/", httpOnly: false, sameSite: "lax" });
+    } else {
+      store.delete("as_user_id");
+    }
+    revalidatePath("/", "layout");
+  }

  return (
    <>
@@ -39,7 +58,7 @@ export default async function AppLayout({ children }: { children: ReactNode }) {
            <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">
+              <span className="text-sm text-muted-foreground font-medium hidden xl:inline">
                {t("common.backoffice")}
              </span>
            </div>
@@ -50,16 +69,22 @@ export default async function AppLayout({ children }: { children: ReactNode }) {
              {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>
+                  <span className="ml-2 hidden xl:inline">{t(item.labelKey)}</span>
                </NavLink>
              ))}
            </div>

+            <UserSwitcher
+              users={users}
+              activeUserId={activeUserId}
+              setActiveUserAction={setActiveUserAction}
+            />
+
            <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"
+                className="hidden xl: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" />
--- a/apps/backoffice/app/(app)/page.tsx
+++ b/apps/backoffice/app/(app)/page.tsx
@@ -1,9 +1,9 @@
 import React from "react";
-import { fetchStats, StatsResponse, getBookCoverUrl } from "@/lib/api";
+import { fetchStats, fetchUsers, StatsResponse, UserDto } 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 { CurrentlyReadingList, RecentlyReadList } from "@/app/components/ReadingUserFilter";
 import Link from "next/link";
 import { getServerTranslations } from "@/lib/i18n/server";
 import type { TranslateFunction } from "@/lib/i18n/dictionaries";
@@ -70,8 +70,12 @@ export default async function DashboardPage({
  const { t, locale } = await getServerTranslations();

  let stats: StatsResponse | null = null;
+  let users: UserDto[] = [];
  try {
-    stats = await fetchStats(period);
+    [stats, users] = await Promise.all([
+      fetchStats(period),
+      fetchUsers().catch(() => []),
+    ]);
  } catch (e) {
    console.error("Failed to fetch stats:", e);
  }
@@ -94,6 +98,7 @@ export default async function DashboardPage({
    currently_reading = [],
    recently_read = [],
    reading_over_time = [],
+    users_reading_over_time = [],
    by_format,
    by_library,
    top_series,
@@ -145,37 +150,12 @@ export default async function DashboardPage({
              <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>
-              )}
+              <CurrentlyReadingList
+                items={currently_reading}
+                allLabel={t("dashboard.allUsers")}
+                emptyLabel={t("dashboard.noCurrentlyReading")}
+                pageProgressTemplate={t("dashboard.pageProgress")}
+              />
            </CardContent>
          </Card>

@@ -185,28 +165,11 @@ export default async function DashboardPage({
              <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>
-              )}
+              <RecentlyReadList
+                items={recently_read}
+                allLabel={t("dashboard.allUsers")}
+                emptyLabel={t("dashboard.noRecentlyRead")}
+              />
            </CardContent>
          </Card>
        </div>
@@ -219,30 +182,84 @@ export default async function DashboardPage({
          <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%)"
-          />
+          {(() => {
+            const userColors = [
+              "hsl(142 60% 45%)", "hsl(198 78% 37%)", "hsl(45 93% 47%)",
+              "hsl(2 72% 48%)", "hsl(280 60% 50%)", "hsl(32 80% 50%)",
+            ];
+            const usernames = [...new Set(users_reading_over_time.map(r => r.username))];
+            if (usernames.length === 0) {
+              return (
+                <RcAreaChart
+                  noDataLabel={noDataLabel}
+                  data={reading_over_time.map((m) => ({ label: formatChartLabel(m.month, period, locale), value: m.books_read }))}
+                  color="hsl(142 60% 45%)"
+                />
+              );
+            }
+            // Pivot: { label, username1: n, username2: n, ... }
+            const byMonth = new Map<string, Record<string, unknown>>();
+            for (const row of users_reading_over_time) {
+              const label = formatChartLabel(row.month, period, locale);
+              if (!byMonth.has(row.month)) byMonth.set(row.month, { label });
+              byMonth.get(row.month)![row.username] = row.books_read;
+            }
+            const chartData = [...byMonth.values()];
+            const lines = usernames.map((u, i) => ({
+              key: u,
+              label: u,
+              color: userColors[i % userColors.length],
+            }));
+            return <RcMultiLineChart data={chartData} lines={lines} noDataLabel={noDataLabel} />;
+          })()}
        </CardContent>
      </Card>

      {/* Charts row */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-        {/* Reading status donut */}
+        {/* Reading status par lecteur */}
        <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] },
-              ]}
-            />
+            {users.length === 0 ? (
+              <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] },
+                ]}
+              />
+            ) : (
+              <div className="space-y-3">
+                {users.map((user) => {
+                  const total = overview.total_books;
+                  const read = user.books_read;
+                  const reading = user.books_reading;
+                  const unread = Math.max(0, total - read - reading);
+                  const readPct = total > 0 ? (read / total) * 100 : 0;
+                  const readingPct = total > 0 ? (reading / total) * 100 : 0;
+                  return (
+                    <div key={user.id} className="space-y-1">
+                      <div className="flex items-center justify-between text-sm">
+                        <span className="font-medium text-foreground truncate">{user.username}</span>
+                        <span className="text-xs text-muted-foreground shrink-0 ml-2">
+                          <span className="text-success font-medium">{read}</span>
+                          {reading > 0 && <span className="text-amber-500 font-medium"> · {reading}</span>}
+                          <span className="text-muted-foreground/60"> / {total}</span>
+                        </span>
+                      </div>
+                      <div className="h-2 bg-muted rounded-full overflow-hidden flex">
+                        <div className="h-full bg-success transition-all duration-500" style={{ width: `${readPct}%` }} />
+                        <div className="h-full bg-amber-500 transition-all duration-500" style={{ width: `${readingPct}%` }} />
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            )}
          </CardContent>
        </Card>

--- a/apps/backoffice/app/(app)/settings/SettingsPage.tsx
+++ b/apps/backoffice/app/(app)/settings/SettingsPage.tsx
@@ -3,7 +3,7 @@
 import { useState, useEffect, useCallback, useMemo } from "react";
 import { Card, CardHeader, CardTitle, CardDescription, CardContent, Button, FormField, FormInput, FormSelect, FormRow, Icon } from "@/app/components/ui";
 import { ProviderIcon } from "@/app/components/ProviderIcon";
-import { Settings, CacheStats, ClearCacheResponse, ThumbnailStats, KomgaSyncResponse, KomgaSyncReportSummary, StatusMappingDto } from "@/lib/api";
+import { Settings, CacheStats, ClearCacheResponse, ThumbnailStats, KomgaSyncResponse, KomgaSyncReportSummary, StatusMappingDto, UserDto } from "@/lib/api";
 import { useTranslation } from "@/lib/i18n/context";
 import type { Locale } from "@/lib/i18n/types";

@@ -11,9 +11,10 @@ interface SettingsPageProps {
  initialSettings: Settings;
  initialCacheStats: CacheStats;
  initialThumbnailStats: ThumbnailStats;
+  users: UserDto[];
 }

-export default function SettingsPage({ initialSettings, initialCacheStats, initialThumbnailStats }: SettingsPageProps) {
+export default function SettingsPage({ initialSettings, initialCacheStats, initialThumbnailStats, users }: SettingsPageProps) {
  const { t, locale, setLocale } = useTranslation();
  const [settings, setSettings] = useState<Settings>({
    ...initialSettings,
@@ -29,6 +30,7 @@ export default function SettingsPage({ initialSettings, initialCacheStats, initi
  const [komgaUrl, setKomgaUrl] = useState("");
  const [komgaUsername, setKomgaUsername] = useState("");
  const [komgaPassword, setKomgaPassword] = useState("");
+  const [komgaUserId, setKomgaUserId] = useState(users[0]?.id ?? "");
  const [isSyncing, setIsSyncing] = useState(false);
  const [syncResult, setSyncResult] = useState<KomgaSyncResponse | null>(null);
  const [syncError, setSyncError] = useState<string | null>(null);
@@ -104,6 +106,7 @@ export default function SettingsPage({ initialSettings, initialCacheStats, initi
      if (data) {
        if (data.url) setKomgaUrl(data.url);
        if (data.username) setKomgaUsername(data.username);
+        if (data.user_id) setKomgaUserId(data.user_id);
      }
    }).catch(() => {});
  }, [fetchReports]);
@@ -128,7 +131,7 @@ export default function SettingsPage({ initialSettings, initialCacheStats, initi
      const response = await fetch("/api/komga/sync", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ url: komgaUrl, username: komgaUsername, password: komgaPassword }),
+        body: JSON.stringify({ url: komgaUrl, username: komgaUsername, password: komgaPassword, user_id: komgaUserId }),
      });
      const data = await response.json();
      if (!response.ok) {
@@ -140,7 +143,7 @@ export default function SettingsPage({ initialSettings, initialCacheStats, initi
        fetch("/api/settings/komga", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ value: { url: komgaUrl, username: komgaUsername } }),
+          body: JSON.stringify({ value: { url: komgaUrl, username: komgaUsername, user_id: komgaUserId } }),
        }).catch(() => {});
      }
    } catch {
@@ -627,9 +630,22 @@ export default function SettingsPage({ initialSettings, initialCacheStats, initi
              </FormField>
            </FormRow>

+            {users.length > 0 && (
+              <FormRow>
+                <FormField className="flex-1">
+                  <label className="text-sm font-medium text-muted-foreground mb-1 block">{t("users.title")}</label>
+                  <FormSelect value={komgaUserId} onChange={(e) => setKomgaUserId(e.target.value)}>
+                    {users.map((u) => (
+                      <option key={u.id} value={u.id}>{u.username}</option>
+                    ))}
+                  </FormSelect>
+                </FormField>
+              </FormRow>
+            )}
+
            <Button
              onClick={handleKomgaSync}
-              disabled={isSyncing || !komgaUrl || !komgaUsername || !komgaPassword}
+              disabled={isSyncing || !komgaUrl || !komgaUsername || !komgaPassword || !komgaUserId}
            >
              {isSyncing ? (
                <>
--- a/apps/backoffice/app/(app)/settings/page.tsx
+++ b/apps/backoffice/app/(app)/settings/page.tsx
@@ -1,4 +1,4 @@
-import { getSettings, getCacheStats, getThumbnailStats } from "@/lib/api";
+import { getSettings, getCacheStats, getThumbnailStats, fetchUsers } from "@/lib/api";
 import SettingsPage from "./SettingsPage";

 export const dynamic = "force-dynamic";
@@ -23,5 +23,7 @@ export default async function SettingsPageWrapper() {
    directory: "/data/thumbnails"
  }));

-  return <SettingsPage initialSettings={settings} initialCacheStats={cacheStats} initialThumbnailStats={thumbnailStats} />;
+  const users = await fetchUsers().catch(() => []);
+
+  return <SettingsPage initialSettings={settings} initialCacheStats={cacheStats} initialThumbnailStats={thumbnailStats} users={users} />;
 }
--- a/apps/backoffice/app/(app)/tokens/page.tsx
+++ b/apps/backoffice/app/(app)/tokens/page.tsx
@@ -1,7 +1,9 @@
 import { revalidatePath } from "next/cache";
 import { redirect } from "next/navigation";
-import { listTokens, createToken, revokeToken, deleteToken, TokenDto } from "@/lib/api";
+import { listTokens, createToken, revokeToken, deleteToken, updateToken, fetchUsers, createUser, deleteUser, updateUser, TokenDto, UserDto } from "@/lib/api";
 import { Card, CardHeader, CardTitle, CardDescription, CardContent, Button, Badge, FormField, FormInput, FormSelect, FormRow } from "@/app/components/ui";
+import { TokenUserSelect } from "@/app/components/TokenUserSelect";
+import { UsernameEdit } from "@/app/components/UsernameEdit";
 import { getServerTranslations } from "@/lib/i18n/server";

 export const dynamic = "force-dynamic";
@@ -14,13 +16,15 @@ export default async function TokensPage({
  const { t } = await getServerTranslations();
  const params = await searchParams;
  const tokens = await listTokens().catch(() => [] as TokenDto[]);
+  const users = await fetchUsers().catch(() => [] as UserDto[]);

  async function createTokenAction(formData: FormData) {
    "use server";
    const name = formData.get("name") as string;
    const scope = formData.get("scope") as string;
+    const userId = (formData.get("user_id") as string) || undefined;
    if (name) {
-      const result = await createToken(name, scope);
+      const result = await createToken(name, scope, userId);
      revalidatePath("/tokens");
      redirect(`/tokens?created=${encodeURIComponent(result.token)}`);
    }
@@ -40,6 +44,40 @@ export default async function TokensPage({
    revalidatePath("/tokens");
  }

+  async function createUserAction(formData: FormData) {
+    "use server";
+    const username = formData.get("username") as string;
+    if (username) {
+      await createUser(username);
+      revalidatePath("/tokens");
+    }
+  }
+
+  async function deleteUserAction(formData: FormData) {
+    "use server";
+    const id = formData.get("id") as string;
+    await deleteUser(id);
+    revalidatePath("/tokens");
+  }
+
+  async function renameUserAction(formData: FormData) {
+    "use server";
+    const id = formData.get("id") as string;
+    const username = formData.get("username") as string;
+    if (username?.trim()) {
+      await updateUser(id, username.trim());
+      revalidatePath("/tokens");
+    }
+  }
+
+  async function reassignTokenAction(formData: FormData) {
+    "use server";
+    const id = formData.get("id") as string;
+    const userId = (formData.get("user_id") as string) || null;
+    await updateToken(id, userId);
+    revalidatePath("/tokens");
+  }
+
  return (
    <>
      <div className="mb-6">
@@ -51,6 +89,115 @@ export default async function TokensPage({
        </h1>
      </div>

+      {/* ── Lecteurs ─────────────────────────────────────────── */}
+      <div className="mb-2">
+        <h2 className="text-xl font-semibold text-foreground">{t("users.title")}</h2>
+      </div>
+
+      <Card className="mb-6">
+        <CardHeader>
+          <CardTitle>{t("users.createNew")}</CardTitle>
+          <CardDescription>{t("users.createDescription")}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form action={createUserAction}>
+            <FormRow>
+              <FormField className="flex-1 min-w-48">
+                <FormInput name="username" placeholder={t("users.username")} required autoComplete="off" />
+              </FormField>
+              <Button type="submit">{t("users.createButton")}</Button>
+            </FormRow>
+          </form>
+        </CardContent>
+      </Card>
+
+      <Card className="overflow-hidden mb-10">
+        <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("users.name")}</th>
+                <th className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">{t("users.tokenCount")}</th>
+                <th className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">{t("status.read")}</th>
+                <th className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">{t("status.reading")}</th>
+                <th className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">{t("users.createdAt")}</th>
+                <th className="px-4 py-3 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">{t("users.actions")}</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-border/60">
+              {/* Ligne admin synthétique */}
+              <tr className="hover:bg-accent/50 transition-colors bg-destructive/5">
+                <td className="px-4 py-3 text-sm font-medium text-foreground flex items-center gap-2">
+                  {process.env.ADMIN_USERNAME ?? "admin"}
+                  <Badge variant="destructive">{t("tokens.scopeAdmin")}</Badge>
+                </td>
+                <td className="px-4 py-3 text-sm text-muted-foreground">
+                  {tokens.filter(tok => tok.scope === "admin" && !tok.revoked_at).length}
+                </td>
+                <td className="px-4 py-3 text-sm text-muted-foreground/50">—</td>
+                <td className="px-4 py-3 text-sm text-muted-foreground/50">—</td>
+                <td className="px-4 py-3 text-sm text-muted-foreground/50">—</td>
+                <td className="px-4 py-3 text-sm text-muted-foreground/50">—</td>
+              </tr>
+              {/* Ligne tokens read non assignés */}
+              {(() => {
+                const unassigned = tokens.filter(tok => tok.scope === "read" && !tok.user_id && !tok.revoked_at);
+                if (unassigned.length === 0) return null;
+                return (
+                  <tr className="hover:bg-accent/50 transition-colors bg-warning/5">
+                    <td className="px-4 py-3 text-sm font-medium text-muted-foreground italic">
+                      {t("tokens.noUser")}
+                    </td>
+                    <td className="px-4 py-3 text-sm text-warning font-medium">{unassigned.length}</td>
+                    <td className="px-4 py-3 text-sm text-muted-foreground/50">—</td>
+                    <td className="px-4 py-3 text-sm text-muted-foreground/50">—</td>
+                    <td className="px-4 py-3 text-sm text-muted-foreground/50">—</td>
+                    <td className="px-4 py-3 text-sm text-muted-foreground/50">—</td>
+                  </tr>
+                );
+              })()}
+              {users.map((user) => (
+                  <tr key={user.id} className="hover:bg-accent/50 transition-colors">
+                    <td className="px-4 py-3">
+                      <UsernameEdit userId={user.id} currentUsername={user.username} action={renameUserAction} />
+                    </td>
+                    <td className="px-4 py-3 text-sm text-muted-foreground">{user.token_count}</td>
+                    <td className="px-4 py-3 text-sm">
+                      {user.books_read > 0
+                        ? <span className="font-medium text-success">{user.books_read}</span>
+                        : <span className="text-muted-foreground/50">—</span>}
+                    </td>
+                    <td className="px-4 py-3 text-sm">
+                      {user.books_reading > 0
+                        ? <span className="font-medium text-amber-500">{user.books_reading}</span>
+                        : <span className="text-muted-foreground/50">—</span>}
+                    </td>
+                    <td className="px-4 py-3 text-sm text-muted-foreground">
+                      {new Date(user.created_at).toLocaleDateString()}
+                    </td>
+                    <td className="px-4 py-3">
+                      <form action={deleteUserAction}>
+                        <input type="hidden" name="id" value={user.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>
+
+      {/* ── Tokens API ───────────────────────────────────────── */}
+      <div className="mb-2">
+        <h2 className="text-xl font-semibold text-foreground">{t("tokens.apiTokens")}</h2>
+      </div>
+
      {params.created ? (
        <Card className="mb-6 border-success/50 bg-success/5">
          <CardHeader>
@@ -72,7 +219,7 @@ export default async function TokensPage({
          <form action={createTokenAction}>
            <FormRow>
              <FormField className="flex-1 min-w-48">
-                <FormInput name="name" placeholder={t("tokens.tokenName")} required />
+                <FormInput name="name" placeholder={t("tokens.tokenName")} required autoComplete="off" />
              </FormField>
              <FormField className="w-32">
                <FormSelect name="scope" defaultValue="read">
@@ -80,6 +227,14 @@ export default async function TokensPage({
                  <option value="admin">{t("tokens.scopeAdmin")}</option>
                </FormSelect>
              </FormField>
+              <FormField className="w-48">
+                <FormSelect name="user_id" defaultValue="">
+                  <option value="">{t("tokens.noUser")}</option>
+                  {users.map((user) => (
+                    <option key={user.id} value={user.id}>{user.username}</option>
+                  ))}
+                </FormSelect>
+              </FormField>
              <Button type="submit">{t("tokens.createButton")}</Button>
            </FormRow>
          </form>
@@ -92,6 +247,7 @@ export default async function TokensPage({
            <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.user")}</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>
@@ -102,6 +258,15 @@ export default async function TokensPage({
              {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">
+                    <TokenUserSelect
+                      tokenId={token.id}
+                      currentUserId={token.user_id}
+                      users={users}
+                      action={reassignTokenAction}
+                      noUserLabel={t("tokens.noUser")}
+                    />
+                  </td>
                  <td className="px-4 py-3 text-sm">
                    <Badge variant={token.scope === "admin" ? "destructive" : "secondary"}>
                      {token.scope}
--- a/apps/backoffice/app/components/ReadingUserFilter.tsx
+++ b/apps/backoffice/app/components/ReadingUserFilter.tsx
@@ -0,0 +1,145 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import Image from "next/image";
+import type { CurrentlyReadingItem, RecentlyReadItem } from "@/lib/api";
+import { getBookCoverUrl } from "@/lib/api";
+
+function FilterPills({ usernames, selected, allLabel, onSelect }: {
+  usernames: string[];
+  selected: string | null;
+  allLabel: string;
+  onSelect: (u: string | null) => void;
+}) {
+  if (usernames.length <= 1) return null;
+  return (
+    <div className="flex flex-wrap gap-1.5 mb-3">
+      <button
+        onClick={() => onSelect(null)}
+        className={`px-2.5 py-0.5 rounded-full text-xs font-medium transition-colors ${
+          selected === null
+            ? "bg-primary text-primary-foreground"
+            : "bg-muted text-muted-foreground hover:bg-muted/80"
+        }`}
+      >
+        {allLabel}
+      </button>
+      {usernames.map((u) => (
+        <button
+          key={u}
+          onClick={() => onSelect(u === selected ? null : u)}
+          className={`px-2.5 py-0.5 rounded-full text-xs font-medium transition-colors ${
+            selected === u
+              ? "bg-primary text-primary-foreground"
+              : "bg-muted text-muted-foreground hover:bg-muted/80"
+          }`}
+        >
+          {u}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+export function CurrentlyReadingList({
+  items,
+  allLabel,
+  emptyLabel,
+  pageProgressTemplate,
+}: {
+  items: CurrentlyReadingItem[];
+  allLabel: string;
+  emptyLabel: string;
+  /** Template with {{current}} and {{total}} placeholders */
+  pageProgressTemplate: string;
+}) {
+  const usernames = [...new Set(items.map((i) => i.username).filter((u): u is string => !!u))];
+  const [selected, setSelected] = useState<string | null>(null);
+  const filtered = selected ? items.filter((i) => i.username === selected) : items;
+
+  return (
+    <div>
+      <FilterPills usernames={usernames} selected={selected} allLabel={allLabel} onSelect={setSelected} />
+      {filtered.length === 0 ? (
+        <p className="text-muted-foreground text-sm text-center py-4">{emptyLabel}</p>
+      ) : (
+        <div className="space-y-3 max-h-[216px] overflow-y-auto pr-1">
+          {filtered.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}-${book.username}`} 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>}
+                  {book.username && usernames.length > 1 && (
+                    <p className="text-[10px] text-primary/70 font-medium">{book.username}</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">{pageProgressTemplate.replace("{{current}}", String(book.current_page)).replace("{{total}}", String(book.page_count))}</p>
+                </div>
+              </Link>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function RecentlyReadList({
+  items,
+  allLabel,
+  emptyLabel,
+}: {
+  items: RecentlyReadItem[];
+  allLabel: string;
+  emptyLabel: string;
+}) {
+  const usernames = [...new Set(items.map((i) => i.username).filter((u): u is string => !!u))];
+  const [selected, setSelected] = useState<string | null>(null);
+  const filtered = selected ? items.filter((i) => i.username === selected) : items;
+
+  return (
+    <div>
+      <FilterPills usernames={usernames} selected={selected} allLabel={allLabel} onSelect={setSelected} />
+      {filtered.length === 0 ? (
+        <p className="text-muted-foreground text-sm text-center py-4">{emptyLabel}</p>
+      ) : (
+        <div className="space-y-3 max-h-[216px] overflow-y-auto pr-1">
+          {filtered.map((book) => (
+            <Link key={`${book.book_id}-${book.username}`} 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>}
+                {book.username && usernames.length > 1 && (
+                  <p className="text-[10px] text-primary/70 font-medium">{book.username}</p>
+                )}
+              </div>
+              <span className="text-xs text-muted-foreground shrink-0">{book.last_read_at}</span>
+            </Link>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
--- a/apps/backoffice/app/components/TokenUserSelect.tsx
+++ b/apps/backoffice/app/components/TokenUserSelect.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import { useOptimistic, useTransition } from "react";
+
+interface TokenUserSelectProps {
+  tokenId: string;
+  currentUserId?: string;
+  users: { id: string; username: string }[];
+  action: (formData: FormData) => Promise<void>;
+  noUserLabel: string;
+}
+
+export function TokenUserSelect({ tokenId, currentUserId, users, action, noUserLabel }: TokenUserSelectProps) {
+  const [optimisticValue, setOptimisticValue] = useOptimistic(currentUserId ?? "");
+  const [, startTransition] = useTransition();
+
+  return (
+    <select
+      value={optimisticValue}
+      onChange={(e) => {
+        const newValue = e.target.value;
+        startTransition(async () => {
+          setOptimisticValue(newValue);
+          const fd = new FormData();
+          fd.append("id", tokenId);
+          fd.append("user_id", newValue);
+          await action(fd);
+        });
+      }}
+      className="flex h-8 rounded-md border border-input bg-background px-2 py-0 text-xs shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+    >
+      <option value="">{noUserLabel}</option>
+      {users.map((u) => (
+        <option key={u.id} value={u.id}>{u.username}</option>
+      ))}
+    </select>
+  );
+}
--- a/apps/backoffice/app/components/UserSwitcher.tsx
+++ b/apps/backoffice/app/components/UserSwitcher.tsx
@@ -0,0 +1,121 @@
+"use client";
+
+import { useState, useTransition, useRef, useEffect } from "react";
+import type { UserDto } from "@/lib/api";
+
+export function UserSwitcher({
+  users,
+  activeUserId,
+  setActiveUserAction,
+}: {
+  users: UserDto[];
+  activeUserId: string | null;
+  setActiveUserAction: (formData: FormData) => Promise<void>;
+}) {
+  const [open, setOpen] = useState(false);
+  const [, startTransition] = useTransition();
+  const ref = useRef<HTMLDivElement>(null);
+
+  const activeUser = users.find((u) => u.id === activeUserId) ?? null;
+
+  useEffect(() => {
+    function handleClickOutside(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  function select(userId: string | null) {
+    setOpen(false);
+    startTransition(async () => {
+      const fd = new FormData();
+      fd.append("user_id", userId ?? "");
+      await setActiveUserAction(fd);
+    });
+  }
+
+  if (users.length === 0) return null;
+
+  const isImpersonating = activeUserId !== null;
+
+  return (
+    <div ref={ref} className="relative">
+      <button
+        onClick={() => setOpen((v) => !v)}
+        className={`flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-xs font-medium border transition-colors ${
+          isImpersonating
+            ? "border-primary/40 bg-primary/10 text-primary hover:bg-primary/15"
+            : "border-border/60 bg-muted/40 text-muted-foreground hover:text-foreground hover:bg-accent"
+        }`}
+      >
+        {isImpersonating ? (
+          <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <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" />
+          </svg>
+        ) : (
+          <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+              d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+          </svg>
+        )}
+        <span className="max-w-[80px] truncate hidden sm:inline">
+          {activeUser ? activeUser.username : "Admin"}
+        </span>
+        <svg className="w-3 h-3 opacity-60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+        </svg>
+      </button>
+
+      {open && (
+        <div className="absolute right-0 top-full mt-1.5 w-44 rounded-lg border border-border/60 bg-popover shadow-lg z-50 overflow-hidden py-1">
+          <button
+            onClick={() => select(null)}
+            className={`w-full flex items-center gap-2.5 px-3 py-2 text-sm transition-colors ${
+              !isImpersonating
+                ? "bg-accent text-foreground font-medium"
+                : "text-muted-foreground hover:bg-accent hover:text-foreground"
+            }`}
+          >
+            <svg className="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+                d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+            </svg>
+            Admin
+            {!isImpersonating && (
+              <svg className="w-3.5 h-3.5 ml-auto text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" />
+              </svg>
+            )}
+          </button>
+
+          <div className="h-px bg-border/60 my-1" />
+
+          {users.map((user) => (
+            <button
+              key={user.id}
+              onClick={() => select(user.id)}
+              className={`w-full flex items-center gap-2.5 px-3 py-2 text-sm transition-colors ${
+                activeUserId === user.id
+                  ? "bg-accent text-foreground font-medium"
+                  : "text-muted-foreground hover:bg-accent hover:text-foreground"
+              }`}
+            >
+              <svg className="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <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" />
+              </svg>
+              <span className="truncate">{user.username}</span>
+              {activeUserId === user.id && (
+                <svg className="w-3.5 h-3.5 ml-auto text-primary shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" />
+                </svg>
+              )}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
--- a/apps/backoffice/app/components/UsernameEdit.tsx
+++ b/apps/backoffice/app/components/UsernameEdit.tsx
@@ -0,0 +1,73 @@
+"use client";
+
+import { useOptimistic, useTransition, useRef, useState } from "react";
+
+export function UsernameEdit({
+  userId,
+  currentUsername,
+  action,
+}: {
+  userId: string;
+  currentUsername: string;
+  action: (formData: FormData) => Promise<void>;
+}) {
+  const [optimisticUsername, setOptimisticUsername] = useOptimistic(currentUsername);
+  const [editing, setEditing] = useState(false);
+  const [, startTransition] = useTransition();
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  function startEdit() {
+    setEditing(true);
+    setTimeout(() => inputRef.current?.select(), 0);
+  }
+
+  function submit(value: string) {
+    const trimmed = value.trim();
+    if (!trimmed || trimmed === currentUsername) {
+      setEditing(false);
+      return;
+    }
+    setEditing(false);
+    startTransition(async () => {
+      setOptimisticUsername(trimmed);
+      const fd = new FormData();
+      fd.append("id", userId);
+      fd.append("username", trimmed);
+      await action(fd);
+    });
+  }
+
+  if (editing) {
+    return (
+      <input
+        ref={inputRef}
+        defaultValue={optimisticUsername}
+        className="text-sm font-medium text-foreground bg-background border border-border rounded px-2 py-0.5 focus:outline-none focus:ring-1 focus:ring-primary w-36"
+        autoFocus
+        onBlur={(e) => submit(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === "Enter") submit((e.target as HTMLInputElement).value);
+          if (e.key === "Escape") setEditing(false);
+        }}
+      />
+    );
+  }
+
+  return (
+    <button
+      onClick={startEdit}
+      className="flex items-center gap-1.5 group/edit text-left"
+      title="Modifier"
+    >
+      <span className="text-sm font-medium text-foreground">{optimisticUsername}</span>
+      <svg
+        className="w-3.5 h-3.5 text-muted-foreground opacity-0 group-hover/edit:opacity-100 transition-opacity shrink-0"
+        fill="none" stroke="currentColor" viewBox="0 0 24 24"
+      >
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+          d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+        />
+      </svg>
+    </button>
+  );
+}
--- a/apps/backoffice/lib/api.ts
+++ b/apps/backoffice/lib/api.ts
@@ -45,6 +45,17 @@ export type TokenDto = {
  scope: string;
  prefix: string;
  revoked_at: string | null;
+  user_id?: string;
+  username?: string;
+};
+
+export type UserDto = {
+  id: string;
+  username: string;
+  token_count: number;
+  books_read: number;
+  books_reading: number;
+  created_at: string;
 };

 export type FolderItem = {
@@ -151,6 +162,16 @@ export async function apiFetch<T>(
    headers.set("Content-Type", "application/json");
  }

+  // Impersonation : injecte X-As-User si un user est sélectionné dans le backoffice
+  try {
+    const { cookies } = await import("next/headers");
+    const cookieStore = await cookies();
+    const asUserId = cookieStore.get("as_user_id")?.value;
+    if (asUserId) headers.set("X-As-User", asUserId);
+  } catch {
+    // Hors contexte Next.js (tests, etc.)
+  }
+
  const { next: nextOptions, ...restInit } = init ?? {};

  const res = await fetch(`${baseUrl}${path}`, {
@@ -268,10 +289,32 @@ export async function listTokens() {
  return apiFetch<TokenDto[]>("/admin/tokens");
 }

-export async function createToken(name: string, scope: string) {
+export async function createToken(name: string, scope: string, userId?: string) {
  return apiFetch<{ token: string }>("/admin/tokens", {
    method: "POST",
-    body: JSON.stringify({ name, scope }),
+    body: JSON.stringify({ name, scope, ...(userId ? { user_id: userId } : {}) }),
+  });
+}
+
+export async function fetchUsers(): Promise<UserDto[]> {
+  return apiFetch<UserDto[]>("/admin/users");
+}
+
+export async function createUser(username: string): Promise<UserDto> {
+  return apiFetch<UserDto>("/admin/users", {
+    method: "POST",
+    body: JSON.stringify({ username }),
+  });
+}
+
+export async function deleteUser(id: string): Promise<void> {
+  return apiFetch<void>(`/admin/users/${id}`, { method: "DELETE" });
+}
+
+export async function updateUser(id: string, username: string): Promise<void> {
+  return apiFetch<void>(`/admin/users/${id}`, {
+    method: "PATCH",
+    body: JSON.stringify({ username }),
  });
 }

@@ -283,6 +326,13 @@ export async function deleteToken(id: string) {
  return apiFetch<void>(`/admin/tokens/${id}/delete`, { method: "POST" });
 }

+export async function updateToken(id: string, userId: string | null) {
+  return apiFetch<void>(`/admin/tokens/${id}`, {
+    method: "PATCH",
+    body: JSON.stringify({ user_id: userId || null }),
+  });
+}
+
 export async function fetchBooks(
  libraryId?: string,
  series?: string,
@@ -557,6 +607,7 @@ export type CurrentlyReadingItem = {
  series: string | null;
  current_page: number;
  page_count: number;
+  username?: string;
 };

 export type RecentlyReadItem = {
@@ -564,6 +615,7 @@ export type RecentlyReadItem = {
  title: string;
  series: string | null;
  last_read_at: string;
+  username?: string;
 };

 export type MonthlyReading = {
@@ -571,6 +623,12 @@ export type MonthlyReading = {
  books_read: number;
 };

+export type UserMonthlyReading = {
+  month: string;
+  username: string;
+  books_read: number;
+};
+
 export type JobTimePoint = {
  label: string;
  scan: number;
@@ -585,6 +643,7 @@ export type StatsResponse = {
  currently_reading: CurrentlyReadingItem[];
  recently_read: RecentlyReadItem[];
  reading_over_time: MonthlyReading[];
+  users_reading_over_time: UserMonthlyReading[];
  by_format: FormatCount[];
  by_language: LanguageCount[];
  by_library: LibraryStatsItem[];
@@ -699,11 +758,13 @@ export type KomgaSyncRequest = {
  url: string;
  username: string;
  password: string;
+  user_id: string;
 };

 export type KomgaSyncResponse = {
  id: string;
  komga_url: string;
+  user_id?: string;
  total_komga_read: number;
  matched: number;
  already_read: number;
@@ -717,6 +778,7 @@ export type KomgaSyncResponse = {
 export type KomgaSyncReportSummary = {
  id: string;
  komga_url: string;
+  user_id?: string;
  total_komga_read: number;
  matched: number;
  already_read: number;
--- a/apps/backoffice/lib/i18n/en.ts
+++ b/apps/backoffice/lib/i18n/en.ts
@@ -8,6 +8,7 @@ const en: Record<TranslationKey, string> = {
  "nav.libraries": "Libraries",
  "nav.jobs": "Jobs",
  "nav.tokens": "Tokens",
+  "nav.users": "Users",
  "nav.settings": "Settings",
  "nav.navigation": "Navigation",
  "nav.closeMenu": "Close menu",
@@ -96,6 +97,7 @@ const en: Record<TranslationKey, string> = {
  "dashboard.pageProgress": "p. {{current}} / {{total}}",
  "dashboard.noCurrentlyReading": "No books in progress",
  "dashboard.noRecentlyRead": "No books read recently",
+  "dashboard.allUsers": "All",

  // Books page
  "books.title": "Books",
@@ -405,6 +407,21 @@ const en: Record<TranslationKey, string> = {
  "tokens.revoked": "Revoked",
  "tokens.active": "Active",
  "tokens.revoke": "Revoke",
+  "tokens.user": "User",
+  "tokens.noUser": "None (admin)",
+  "tokens.apiTokens": "API Tokens",
+
+  // Users page
+  "users.title": "Users",
+  "users.createNew": "Create a user",
+  "users.createDescription": "Create a user account for read access",
+  "users.username": "Username",
+  "users.createButton": "Create",
+  "users.name": "Username",
+  "users.tokenCount": "Tokens",
+  "users.createdAt": "Created",
+  "users.actions": "Actions",
+  "users.noUsers": "No users",

  // Settings page
  "settings.title": "Settings",
--- a/apps/backoffice/lib/i18n/fr.ts
+++ b/apps/backoffice/lib/i18n/fr.ts
@@ -6,6 +6,7 @@ const fr = {
  "nav.libraries": "Bibliothèques",
  "nav.jobs": "Tâches",
  "nav.tokens": "Jetons",
+  "nav.users": "Utilisateurs",
  "nav.settings": "Paramètres",
  "nav.navigation": "Navigation",
  "nav.closeMenu": "Fermer le menu",
@@ -94,6 +95,7 @@ const fr = {
  "dashboard.pageProgress": "p. {{current}} / {{total}}",
  "dashboard.noCurrentlyReading": "Aucun livre en cours",
  "dashboard.noRecentlyRead": "Aucun livre lu récemment",
+  "dashboard.allUsers": "Tous",

  // Books page
  "books.title": "Livres",
@@ -403,6 +405,21 @@ const fr = {
  "tokens.revoked": "Révoqué",
  "tokens.active": "Actif",
  "tokens.revoke": "Révoquer",
+  "tokens.user": "Utilisateur",
+  "tokens.noUser": "Aucun (admin)",
+  "tokens.apiTokens": "Tokens API",
+
+  // Users page
+  "users.title": "Utilisateurs",
+  "users.createNew": "Créer un utilisateur",
+  "users.createDescription": "Créer un compte utilisateur pour accès lecture",
+  "users.username": "Nom d'utilisateur",
+  "users.createButton": "Créer",
+  "users.name": "Nom d'utilisateur",
+  "users.tokenCount": "Nb de jetons",
+  "users.createdAt": "Créé le",
+  "users.actions": "Actions",
+  "users.noUsers": "Aucun utilisateur",

  // Settings page
  "settings.title": "Paramètres",