Implémente le site Plein R (Accueil + Backend) sur Next.js + Postgres + Docker

Application unique Next.js (App Router, TypeScript) servant :
- Accueil public : héro, recherche, métiers, promotions, mises à l'honneur
  (données issues de Postgres)
- Backend authentifié avec RBAC : tableau de bord, adhérents (CRUD), modération
  des promotions, administrateurs, espace adhérent (publication avec aperçu)

Technique :
- Drizzle ORM + drizzle-kit (migrations versionnées) sur driver pg
- Auth.js v5 (credentials, sessions JWT), rôles admin/moderator/editor/member
- Middleware de protection de /backend + gardes par rôle dans chaque vue
- Server actions pour toutes les mutations (vérif auth + capacité + revalidate)
- Design fidèle aux maquettes (design-system CSS, animations, responsive)

Conteneurisation :
- 1 conteneur applicatif (sortie standalone) + 1 conteneur Postgres externe
- docker-compose avec healthcheck ; migrations + seed au démarrage
- scripts migrate/seed bundlés (esbuild) pour un runtime sans devDeps

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XwfhYHzC9hQWPDnQ2p53GL

src/app/backend/promotions/page.tsx

@@ -0,0 +1,158 @@
+import { redirect } from "next/navigation";
+import { desc, eq, inArray } from "drizzle-orm";
+import { auth } from "@/auth";
+import { db } from "@/db";
+import { members, promotions } from "@/db/schema";
+import { can } from "@/lib/rbac";
+import { moderatePromo } from "../actions";
+
+export const dynamic = "force-dynamic";
+
+const STRIPE_WARM =
+  "repeating-linear-gradient(45deg,#efe9da,#efe9da 11px,#e6ddc9 11px,#e6ddc9 22px)";
+const STRIPE_COOL =
+  "repeating-linear-gradient(45deg,#eef0ec,#eef0ec 11px,#e2e8e6 11px,#e2e8e6 22px)";
+
+export default async function PromotionsPage() {
+  const session = await auth();
+  if (!can(session?.user.role, "moderatePromos")) {
+    redirect("/backend");
+  }
+
+  const rows = await db
+    .select({
+      id: promotions.id,
+      title: promotions.title,
+      text: promotions.text,
+      category: promotions.category,
+      status: promotions.status,
+      imageUrl: promotions.imageUrl,
+      memberName: members.name,
+    })
+    .from(promotions)
+    .leftJoin(members, eq(promotions.memberId, members.id))
+    .where(inArray(promotions.status, ["pending", "live"]))
+    .orderBy(desc(promotions.status), desc(promotions.createdAt));
+
+  const pending = rows.filter((r) => r.status === "pending");
+  const live = rows.filter((r) => r.status === "live");
+  // pending first, then live
+  const ordered = [...pending, ...live];
+
+  return (
+    <div>
+      <div style={{ display: "flex", gap: 10, marginBottom: 18, flexWrap: "wrap" }}>
+        <span style={{ background: "#13324F", color: "#fff", fontSize: 13, fontWeight: 600, padding: "8px 16px", borderRadius: 999 }}>
+          En attente · {pending.length}
+        </span>
+        <span style={{ background: "#fff", border: "1px solid #e6dcc6", color: "#6c6150", fontSize: 13, fontWeight: 600, padding: "8px 16px", borderRadius: 999 }}>
+          En ligne · {live.length}
+        </span>
+      </div>
+
+      {ordered.length === 0 && (
+        <div style={{ background: "#fff", border: "1px solid #e6dcc6", borderRadius: 16, padding: 28, color: "#a99c82", fontSize: 14 }}>
+          Aucune promotion pour le moment.
+        </div>
+      )}
+
+      <div className="grid grid-3" style={{ gap: 18 }}>
+        {ordered.map((p) => {
+          const isPending = p.status === "pending";
+          return (
+            <article
+              key={p.id}
+              style={{
+                background: "#fff",
+                border: "1px solid #e6dcc6",
+                borderRadius: 16,
+                overflow: "hidden",
+                display: "flex",
+                flexDirection: "column",
+              }}
+            >
+              <div
+                style={{
+                  position: "relative",
+                  height: 150,
+                  background: p.imageUrl
+                    ? `url(${p.imageUrl})`
+                    : isPending
+                      ? STRIPE_COOL
+                      : STRIPE_WARM,
+                  backgroundSize: "cover",
+                  backgroundPosition: "center",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                }}
+              >
+                {p.category && (
+                  <span style={{ position: "absolute", top: 10, left: 10, background: "#9a6638", color: "#fff", borderRadius: 999, padding: "4px 11px", fontSize: 11, fontWeight: 700 }}>
+                    {p.category}
+                  </span>
+                )}
+                <span
+                  style={{
+                    position: "absolute",
+                    top: 10,
+                    right: 10,
+                    borderRadius: 999,
+                    padding: "4px 11px",
+                    fontSize: 11,
+                    fontWeight: 800,
+                    background: isPending ? "#fbeede" : "#e6f4ec",
+                    color: isPending ? "#9a6638" : "#1f8a5b",
+                  }}
+                >
+                  {isPending ? "En attente" : "En ligne"}
+                </span>
+              </div>
+              <div style={{ padding: "15px 16px 16px", display: "flex", flexDirection: "column", flex: 1 }}>
+                <h3 className="font-display" style={{ fontWeight: 700, fontSize: 16.5, margin: "0 0 4px", color: "#26201a" }}>
+                  {p.title}
+                </h3>
+                <div style={{ fontSize: 12.5, color: "#9a6638", fontWeight: 600, marginBottom: 8 }}>
+                  {p.memberName}
+                </div>
+                <p style={{ margin: "0 0 14px", fontSize: 13, color: "#8c8068", lineHeight: 1.5, flex: 1 }}>
+                  {p.text}
+                </p>
+
+                {isPending ? (
+                  <div style={{ display: "flex", gap: 8 }}>
+                    <form action={moderatePromo} style={{ flex: 1 }}>
+                      <input type="hidden" name="id" value={p.id} />
+                      <input type="hidden" name="action" value="approve" />
+                      <button type="submit" style={{ width: "100%", border: "none", background: "#1f8a5b", color: "#fff", fontWeight: 700, fontSize: 13, padding: 10, borderRadius: 9, cursor: "pointer" }}>
+                        Valider
+                      </button>
+                    </form>
+                    <form action={moderatePromo} style={{ flex: 1 }}>
+                      <input type="hidden" name="id" value={p.id} />
+                      <input type="hidden" name="action" value="reject" />
+                      <button type="submit" style={{ width: "100%", border: "1px solid #e0c3bb", background: "#fff", color: "#d8472b", fontWeight: 700, fontSize: 13, padding: 10, borderRadius: 9, cursor: "pointer" }}>
+                        Refuser
+                      </button>
+                    </form>
+                  </div>
+                ) : (
+                  <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", borderTop: "1px solid #f0e8d6", paddingTop: 11 }}>
+                    <span style={{ fontSize: 12.5, color: "#1f8a5b", fontWeight: 700 }}>● En ligne</span>
+                    <form action={moderatePromo}>
+                      <input type="hidden" name="id" value={p.id} />
+                      <input type="hidden" name="action" value="remove" />
+                      <button type="submit" style={{ border: "none", background: "transparent", color: "#a99c82", fontWeight: 700, fontSize: 12.5, cursor: "pointer" }}>
+                        Retirer
+                      </button>
+                    </form>
+                  </div>
+                )}
+              </div>
+            </article>
+          );
+        })}
+      </div>
+    </div>
+  );
+}