# 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.

**Type:** Prompt  
**Tools:** Cursor, Claude Code, Codex, Windsurf  
**Stack:** Next.js, PostgreSQL, TypeScript, Tailwind  
**Difficulty:** hard  
**Updated:** 2026-06-08

---

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

```txt title="Main Prompt"
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

```txt
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

```bash
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

```txt title="Fix Prompt"
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.
```