diff --git a/apps/admin/src/app/(shell)/utilisateurs/page.tsx b/apps/admin/src/app/(shell)/utilisateurs/page.tsx
new file mode 100644
index 00000000..5243f2c5
--- /dev/null
+++ b/apps/admin/src/app/(shell)/utilisateurs/page.tsx
@@ -0,0 +1,11 @@
+import { UsersContainer } from '@/containers/UsersContainer';
+import { Suspense } from 'react';
+
+/** A-06. The state of the list and the open account are read from the address, in the browser. */
+export default function UsersPage() {
+ return (
+
+
+
+ );
+}
diff --git a/apps/admin/src/components/users/UserActions.tsx b/apps/admin/src/components/users/UserActions.tsx
new file mode 100644
index 00000000..2aea4679
--- /dev/null
+++ b/apps/admin/src/components/users/UserActions.tsx
@@ -0,0 +1,60 @@
+import { messages } from '@/messages/fr';
+import type { UserAction } from '@widoo/shared';
+import { Button } from '@widoo/ui';
+
+const texts = messages.users.actions;
+
+export type UserActionName = Exclude | 'suspend' | 'reactivate';
+
+type UserActionsProps = {
+ /** What the role of the member allows on this account (`allowedUserActions`). */
+ allowed: readonly UserAction[];
+ isSuspended: boolean;
+ onAct: (action: UserActionName) => void;
+ isBusy: boolean;
+};
+
+/** The actions of the card of an account (A-06): only the ones the role of the member allows. */
+export function UserActions({ allowed, isSuspended, onAct, isBusy }: UserActionsProps) {
+ const has = (action: UserAction) => allowed.includes(action);
+ return (
+ <>
+ {has('suspend') ? (
+ isSuspended ? (
+
+ ) : (
+
+ )
+ ) : null}
+ {has('role') ? (
+
+ ) : null}
+ {has('gift') ? (
+
+ ) : null}
+ {has('certification') ? (
+
+ ) : null}
+ {has('export') ? (
+
+ ) : null}
+ {has('delete') ? (
+
+ ) : null}
+
+ );
+}
diff --git a/apps/admin/src/components/users/UserChoiceDialog.tsx b/apps/admin/src/components/users/UserChoiceDialog.tsx
new file mode 100644
index 00000000..f36a887e
--- /dev/null
+++ b/apps/admin/src/components/users/UserChoiceDialog.tsx
@@ -0,0 +1,55 @@
+import { messages } from '@/messages/fr';
+import { ConfirmDialog, RadioGroup, type RadioOption } from '@widoo/ui';
+
+type UserChoiceDialogProps = {
+ isOpen: boolean;
+ /** What the window says: its title, what the choice changes, and its button. */
+ dialog: { title: string; description: string; confirm: string };
+ /** Name of the radio group, and its question. */
+ name: string;
+ legend: string;
+ options: readonly RadioOption[];
+ value: string;
+ onChange: (value: string) => void;
+ onCancel: () => void;
+ onConfirm: () => void;
+ isBusy: boolean;
+};
+
+/** One choice among a few for an account (its role, the badge), confirmed in a window. */
+export function UserChoiceDialog({
+ isOpen,
+ dialog,
+ name,
+ legend,
+ options,
+ value,
+ onChange,
+ onCancel,
+ onConfirm,
+ isBusy,
+}: UserChoiceDialogProps) {
+ return (
+
+
+
+ );
+}
diff --git a/apps/admin/src/components/users/UserGiftDialog.tsx b/apps/admin/src/components/users/UserGiftDialog.tsx
new file mode 100644
index 00000000..7cde1604
--- /dev/null
+++ b/apps/admin/src/components/users/UserGiftDialog.tsx
@@ -0,0 +1,87 @@
+import { messages } from '@/messages/fr';
+import { ConfirmDialog, Field, Input, RadioGroup } from '@widoo/ui';
+
+const texts = messages.users.dialogs.gift;
+
+export type GiftKind = 'until' | 'route';
+
+type UserGiftDialogProps = {
+ isOpen: boolean;
+ userName: string;
+ kind: GiftKind;
+ onKindChange: (kind: GiftKind) => void;
+ /** Last day of the Premium plan, `AAAA-MM-JJ`. */
+ until: string;
+ onUntilChange: (until: string) => void;
+ /** First day that may be chosen: tomorrow. */
+ minUntil: string;
+ routeId: string;
+ onRouteIdChange: (routeId: string) => void;
+ onCancel: () => void;
+ onConfirm: () => void;
+ isBusy: boolean;
+};
+
+/** « Offrir Premium »: until a date, or one Premium route, never both. */
+export function UserGiftDialog({
+ isOpen,
+ userName,
+ kind,
+ onKindChange,
+ until,
+ onUntilChange,
+ minUntil,
+ routeId,
+ onRouteIdChange,
+ onCancel,
+ onConfirm,
+ isBusy,
+}: UserGiftDialogProps) {
+ return (
+
+ onKindChange(value === 'route' ? 'route' : 'until')}
+ />
+ {kind === 'until' ? (
+
+ onUntilChange(event.target.value)}
+ />
+
+ ) : (
+
+ onRouteIdChange(event.target.value.trim())}
+ />
+
+ )}
+
+ );
+}
diff --git a/apps/admin/src/components/users/UserPanelContent.tsx b/apps/admin/src/components/users/UserPanelContent.tsx
new file mode 100644
index 00000000..7fd51ba7
--- /dev/null
+++ b/apps/admin/src/components/users/UserPanelContent.tsx
@@ -0,0 +1,126 @@
+import { RouteStatusBadge } from '@/components/routes/RouteStatusBadge';
+import { formatRelativeDate } from '@/lib/dates';
+import { planLabelOf } from '@/lib/user-display';
+import { messages } from '@/messages/fr';
+import type { AdminUserDetail } from '@widoo/shared';
+import Link from 'next/link';
+import type { ReactNode } from 'react';
+import { UserRoleBadge } from './UserRoleBadge';
+
+const texts = messages.users.panel;
+
+/** A line of the panel: what it is on the left, its value on the right. */
+function Line({ label, children }: { label: string; children: ReactNode }) {
+ return (
+
+
{label}
+
{children}
+
+ );
+}
+
+/** A titled list of objects of the account, or « Aucun ». */
+function Section({ title, children }: { title: string; children: ReactNode[] }) {
+ return (
+
+
{title}
+ {children.length === 0 ? (
+
{texts.none}
+ ) : (
+
{children}
+ )}
+
+ );
+}
+
+type UserPanelContentProps = {
+ user: AdminUserDetail;
+ /** Address of the sheet of a route, to open it from the card. */
+ routePathOf: (routeId: string) => string;
+};
+
+/** The card of an account inside the detail panel (A-06): profile, plan, routes, reports. */
+export function UserPanelContent({ user, routePathOf }: UserPanelContentProps) {
+ const routeLink = (route: { id: string; title: string }) => (
+
+ {route.title}
+
+ );
+ const reportItem = (report: AdminUserDetail['reportsMade'][number]) => (
+