Prompt pour créer un tableau de bord admin dans Next.js

Prompt d'agent IA pour construire un tableau de bord admin protégé dans Next.js avec des tableaux de données, des gardes d'authentification côté serveur et une disposition de barre latérale utilisant Tailwind.

Donnez ce prompt à votre agent pour échafauder une zone admin avec restriction de rôle, avec une barre latérale persistante, des tableaux de données triables et des vérifications d’authentification côté serveur — sans qu’il échafaude un nouveau projet Next.js complet ou installe un framework admin lourd.

Prompt Principal

You are working in an existing Next.js App Router project with TypeScript, Tailwind CSS v4,
and PostgreSQL. Auth is already set up (assume a `getSession()` helper exists in `src/lib/get-session.ts`
that returns `{ user: { id, email, role } } | null`).

Task: add an admin dashboard at the `/admin` route group.

Requirements:
- Create a `src/app/(admin)/layout.tsx` that:
  - Calls `getSession()` and redirects to `/login` if the session is null or `role !== 'admin'`.
  - Renders a persistent sidebar with links: Dashboard, Users, Settings.
  - Uses Tailwind for layout — a fixed-width sidebar and a scrollable main area.
- Create `src/app/(admin)/dashboard/page.tsx` with:
  - Four KPI cards: Total Users, Active Today, Revenue (MRR), Churn Rate — all fetched from
    PostgreSQL using parameterized queries via `postgres` npm package.
  - A `<UsersTable>` server component that renders the 50 most recent users (id, email, role,
    created_at) with sortable column headers (URL-based sort param).
- Create `src/components/admin/KpiCard.tsx` and `src/components/admin/UsersTable.tsx`.
- All DB queries must use parameterized placeholders — never string interpolation.
- Do not install Prisma, Drizzle, or any ORM. Use the `postgres` package directly.
- Do not use any pre-built admin UI library (Refine, AdminJS, etc.).

Stop and list all planned file changes before writing any code.

Notes d’implémentation

Les parenthèses du groupe de routes (admin) gardent /admin/dashboard hors de l’URL tout en partageant la mise en page — l’agent oublie parfois les parenthèses et crée un segment littéral /admin.
Les colonnes triables doivent utiliser les paramètres d’URL ?sort=email&dir=asc lus dans le composant serveur via la prop searchParams — aucun état client n’est nécessaire.
Les requêtes KPI doivent être exécutées en parallèle avec Promise.all pour minimiser les allers-retours à la base de données.

Modifications de fichiers attendues

src/app/(admin)/layout.tsx                  (new)
src/app/(admin)/dashboard/page.tsx          (new)
src/components/admin/KpiCard.tsx            (new)
src/components/admin/UsersTable.tsx         (new)
src/lib/queries/admin-stats.ts             (new)

Critères d’acceptation

Visiter /dashboard en tant qu’utilisateur non admin redirige vers /login.
Les cartes KPI affichent des valeurs réelles provenant de PostgreSQL.
La table des utilisateurs est triée par les paramètres d’URL sort et dir côté serveur.
bun run build se termine avec le code 0 et sans erreurs de type.

Commandes de test

bun run typecheck
bun run build
bun run dev
# log in as admin and visit /dashboard
# visit /dashboard without auth — confirm redirect to /login
# add ?sort=email&dir=asc to the URL and confirm table order

Erreurs courantes de l’IA

Créer src/app/admin/layout.tsx au lieu de src/app/(admin)/layout.tsx.
Effectuer la vérification d’authentification côté client, ce qui est contournable.
Utiliser l’interpolation de chaîne dans les requêtes SQL : `SELECT * FROM users WHERE role = '${role}'`.
Récupérer les statistiques KPI de manière séquentielle au lieu d’utiliser Promise.all.

Prompt de correction

The admin layout does not redirect unauthenticated users, or the route group folder name is wrong.
Fix in order:
1. Rename `src/app/admin/` to `src/app/(admin)/` — the parentheses are required for a route group.
2. In `layout.tsx`, add the auth check at the very top using `getSession()` and `redirect('/login')`.
3. Audit all SQL query strings and replace any interpolated variables with `$1`, `$2` placeholders.
Show the corrected diff only.