Nicolas
0c8cda7f3e
All checks were successful
PR 2/2 de l'issue #80 — la vue admin en lecture seule des messages remontés via le formulaire de contact (PR 1 = #123). - Contrat partagé : `listContactMessagesQuerySchema` (filtre `type` optionnel) + `types/contact.ts` `ContactMessageAdminView` (`author` = `{ id, firstName, lastName, email } | null`, `null` = compte supprimé). - API : `admin-contact.{routes,service}.ts` — `GET /admin/api/contact?type=` (`requireAdmin`), tri `createdAt desc`, plafond `CONTACT_MESSAGES_PAGE_SIZE = 200` (même esprit que `CORRECTIONS_PAGE_SIZE`). Branché dans `admin.routes.ts` (`adminRouter.use(/contact, …)`). Aucune route d'écriture. - Front : page `/admin/messages` (`MessagesPage` + `.scss`) — tableau lecture seule (date, expéditeur ou « Compte supprimé », badge de type, message, page, user-agent tronqué + titre au survol), un filtre par type. Entrée de nav « Messages » (icône `Inbox`) dans `AdminLayout` + `adminApiClient.getContactMessages` + i18n `admin.nav.messages` / `admin.messages.*`. - Tests : `apps/api/test/admin-contact.test.ts` (Mocha — 401 sans session admin, tri récent d'abord + `author` résolu, filtre `type`, type inconnu → 400, plafond 200, `author: null` après suppression du compte), `apps/web/cypress/e2e/admin-messages.cy.ts` (rendu lecture seule, filtre par type via le query param). - Docs : `backend-architecture.md` (section `admin` + event `contact.submitted` dans la liste). Closes #80. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
95 lines
3.2 KiB
TypeScript
95 lines
3.2 KiB
TypeScript
import {
|
|
Activity,
|
|
GraduationCap,
|
|
Inbox,
|
|
LayoutDashboard,
|
|
ListChecks,
|
|
PackageSearch,
|
|
} from "lucide-react";
|
|
import { useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { NavLink, Outlet, useNavigate } from "react-router-dom";
|
|
import { useAdminAuth } from "../features/admin/AdminAuthContext";
|
|
import "./AdminLayout.scss";
|
|
|
|
/**
|
|
* One entry in the admin sidebar's nav. `key` maps to `admin.nav.<key>` in
|
|
* the locale file — adding a section is one array entry plus one locale key.
|
|
* Paths are absolute under `/admin` (the admin route group lives inside
|
|
* `apps/web`'s `App.tsx`, mounted at `/admin`).
|
|
*/
|
|
const NAV_ITEMS = [
|
|
{ to: "/admin", key: "dashboard", Icon: LayoutDashboard, end: true },
|
|
{ to: "/admin/monitoring", key: "monitoring", Icon: Activity, end: false },
|
|
{ to: "/admin/corrections", key: "corrections", Icon: ListChecks, end: false },
|
|
{ to: "/admin/catalogue", key: "catalog", Icon: PackageSearch, end: false },
|
|
{ to: "/admin/didacticiels", key: "tours", Icon: GraduationCap, end: false },
|
|
{ to: "/admin/messages", key: "messages", Icon: Inbox, end: false },
|
|
] as const;
|
|
|
|
/**
|
|
* Shell for every authenticated admin page: a fixed sidebar (brand, section
|
|
* nav, the signed-in admin's name + logout) plus a main area rendering the
|
|
* matched child route via `<Outlet />`. Mounted once as the parent of the
|
|
* whole `RequireAdmin`-guarded route group (see `App.tsx`), so `admin` is
|
|
* guaranteed non-null here.
|
|
*/
|
|
export function AdminLayout() {
|
|
const { t } = useTranslation();
|
|
const { admin, logout } = useAdminAuth();
|
|
const navigate = useNavigate();
|
|
const [isLoggingOut, setIsLoggingOut] = useState(false);
|
|
|
|
async function handleLogout() {
|
|
setIsLoggingOut(true);
|
|
try {
|
|
await logout();
|
|
void navigate("/admin/login");
|
|
} catch {
|
|
// Even if the network call failed, the local session state was
|
|
// cleared optimistically enough for the guard to bounce to /login;
|
|
// nothing useful to show the operator here.
|
|
void navigate("/admin/login");
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="admin-layout">
|
|
<aside className="admin-sidebar">
|
|
<div className="admin-sidebar__brand">
|
|
batchCooking <span>Admin</span>
|
|
</div>
|
|
|
|
<nav className="admin-sidebar__nav">
|
|
{NAV_ITEMS.map(({ to, key, Icon, end }) => (
|
|
<NavLink
|
|
key={to}
|
|
to={to}
|
|
end={end}
|
|
className={({ isActive }) => (isActive ? "active" : undefined)}
|
|
>
|
|
<Icon size={18} aria-hidden="true" />
|
|
<span>{t(`admin.nav.${key}`)}</span>
|
|
</NavLink>
|
|
))}
|
|
</nav>
|
|
|
|
<div className="admin-sidebar__footer">
|
|
<span className="admin-sidebar__who" title={admin?.email}>
|
|
{admin?.name}
|
|
</span>
|
|
<button type="button" onClick={handleLogout} disabled={isLoggingOut}>
|
|
{t("admin.layout.logout")}
|
|
</button>
|
|
<p className="admin-sidebar__version" aria-hidden="true">
|
|
v{__APP_VERSION__}
|
|
</p>
|
|
</div>
|
|
</aside>
|
|
|
|
<main className="admin-content">
|
|
<Outlet />
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|