231 lines
No EOL
10 KiB
TypeScript
231 lines
No EOL
10 KiB
TypeScript
// app/(app)/staff/utilisateurs/page.tsx
|
||
import { cookies } from "next/headers";
|
||
import Link from "next/link";
|
||
import ConfirmableForm from "@/components/ConfirmableForm";
|
||
import { createSbServer } from "@/lib/supabaseServer";
|
||
|
||
export const dynamic = "force-dynamic";
|
||
|
||
export default async function StaffUsersListPage() {
|
||
const sb = createSbServer();
|
||
const { data: { user } } = await sb.auth.getUser();
|
||
|
||
// 1) Refus si pas connecté
|
||
if (!user) {
|
||
return (
|
||
<main className="p-6">
|
||
<h1 className="text-lg font-semibold">Accès refusé</h1>
|
||
<p className="text-sm text-slate-600">Vous devez être connecté.</p>
|
||
</main>
|
||
);
|
||
}
|
||
|
||
// 2) Vérifier Staff
|
||
const { data: me } = await sb
|
||
.from("staff_users")
|
||
.select("is_staff")
|
||
.eq("user_id", user.id)
|
||
.maybeSingle();
|
||
|
||
const isStaff = !!me?.is_staff;
|
||
if (!isStaff) {
|
||
return (
|
||
<main className="p-6">
|
||
<h1 className="text-lg font-semibold">Accès refusé</h1>
|
||
<p className="text-sm text-slate-600">Cette page est réservée au Staff.</p>
|
||
</main>
|
||
);
|
||
}
|
||
|
||
// 3) Récupérer l’org active depuis le cookie posé par le switcher
|
||
const c = cookies();
|
||
const activeOrgId = c.get("active_org_id")?.value;
|
||
|
||
if (!activeOrgId) {
|
||
return (
|
||
<main className="p-6 space-y-2">
|
||
<h1 className="text-lg font-semibold">Utilisateurs de la structure</h1>
|
||
<p className="text-sm text-slate-600">
|
||
Aucune structure active. Sélectionnez un client via le sélecteur en haut à droite.
|
||
</p>
|
||
</main>
|
||
);
|
||
}
|
||
|
||
// 4) Appel RPC sécurisé : liste des membres
|
||
const { data: members, error } = await sb.rpc("get_org_members_secure", { p_org: activeOrgId });
|
||
|
||
if (error) {
|
||
return (
|
||
<main className="p-6">
|
||
<h1 className="text-lg font-semibold">Utilisateurs de la structure</h1>
|
||
<p className="text-sm text-red-600">Erreur de chargement : {error.message}</p>
|
||
</main>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<main className="p-6 space-y-4">
|
||
<div className="flex items-center justify-between">
|
||
<h1 className="text-lg font-semibold">Utilisateurs de la structure</h1>
|
||
<Link
|
||
href="/staff/utilisateurs/nouveau"
|
||
className="inline-flex items-center gap-2 px-3 py-2 rounded-lg text-sm bg-emerald-600 text-white hover:bg-emerald-700"
|
||
>
|
||
+ Créer un utilisateur
|
||
</Link>
|
||
</div>
|
||
|
||
<section className="rounded-2xl border bg-white p-4">
|
||
<h2 className="text-sm font-semibold mb-2">Niveaux d'habilitation</h2>
|
||
<ul className="text-sm leading-6 text-slate-700 list-disc pl-5 space-y-1">
|
||
<li>
|
||
<span className="font-medium">Super Admin</span> — accès total : gestion des utilisateurs (création, modification de niveau, révocation),
|
||
toutes les données (contrats, paies, salarié·es, facturation). Ne peut être modifié que par le support Odentas.
|
||
</li>
|
||
<li>
|
||
<span className="font-medium">Admin</span> — accès total : gestion des utilisateurs (création, modification de niveau, révocation) sauf le Super Admin,
|
||
toutes les données (contrats, paies, salarié·es, facturation).
|
||
</li>
|
||
<li>
|
||
<span className="font-medium">Agent</span> — accès opérationnel courant : création et suivi des contrats/paies et consultation salariés.
|
||
Pas d'accès à la facturation ni à la gestion des utilisateurs.
|
||
</li>
|
||
<li>
|
||
<span className="font-medium">Compta</span> — accès en lecture aux éléments financiers (paies, cotisations, facturation) et documents associés.
|
||
Pas de création/modification de contrats ni gestion des utilisateurs.
|
||
</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<div className="rounded-2xl border bg-white overflow-hidden">
|
||
<table className="w-full text-sm">
|
||
<thead className="bg-slate-50 text-slate-600">
|
||
<tr>
|
||
<th className="text-left px-4 py-3">Prénom</th>
|
||
<th className="text-left px-4 py-3">Email</th>
|
||
<th className="text-left px-4 py-3">Niveau</th>
|
||
<th className="text-left px-4 py-3">Créé le</th>
|
||
<th className="text-left px-4 py-3">Statut</th>
|
||
<th className="text-left px-4 py-3">Actions</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{(members ?? []).length === 0 ? (
|
||
<tr>
|
||
<td colSpan={6} className="px-4 py-6 text-slate-500">
|
||
Aucun utilisateur pour cette structure.
|
||
</td>
|
||
</tr>
|
||
) : (
|
||
(members as any[]).map((m) => {
|
||
const created = m.created_at ? new Date(m.created_at as string) : null;
|
||
const createdFmt = created
|
||
? created.toLocaleString("fr-FR", {
|
||
year: "numeric",
|
||
month: "2-digit",
|
||
day: "2-digit",
|
||
hour: "2-digit",
|
||
minute: "2-digit",
|
||
})
|
||
: "—";
|
||
const status = m.revoked ? "Révoqué" : "Actif";
|
||
const disabled = !!m.revoked;
|
||
return (
|
||
<tr key={m.user_id} className="border-t align-top">
|
||
<td className="px-4 py-3 whitespace-nowrap">{m.first_name || "—"}</td>
|
||
<td className="px-4 py-3">{m.email}</td>
|
||
<td className="px-4 py-3 uppercase tracking-wide text-xs">{m.role || "—"}</td>
|
||
<td className="px-4 py-3 whitespace-nowrap">{createdFmt}</td>
|
||
<td className="px-4 py-3">{status}</td>
|
||
<td className="px-4 py-2">
|
||
<div className="flex flex-col gap-2">
|
||
<ConfirmableForm
|
||
method="post"
|
||
action="/api/staff/users/update-role"
|
||
className="flex items-center gap-2"
|
||
disabled={disabled}
|
||
confirmTitle="Confirmer la modification du niveau"
|
||
confirmMessage={`Voulez-vous vraiment appliquer ce niveau à ${m.first_name || m.email} ?`}
|
||
>
|
||
<input type="hidden" name="org_id" value={activeOrgId} />
|
||
<input type="hidden" name="user_id" value={m.user_id} />
|
||
<select
|
||
name="role"
|
||
defaultValue={m.role || "ADMIN"}
|
||
disabled={disabled}
|
||
className="px-2 py-1 rounded border"
|
||
>
|
||
<option value="SUPER_ADMIN">Super Admin</option>
|
||
<option value="ADMIN">Admin</option>
|
||
<option value="AGENT">Agent</option>
|
||
<option value="COMPTA">Compta</option>
|
||
</select>
|
||
<button
|
||
type="submit"
|
||
disabled={disabled}
|
||
className="px-3 py-1 rounded bg-slate-900 text-white text-xs hover:bg-slate-700 disabled:opacity-50"
|
||
>
|
||
Modifier
|
||
</button>
|
||
</ConfirmableForm>
|
||
|
||
{!disabled ? (
|
||
<ConfirmableForm
|
||
method="post"
|
||
action="/api/staff/users/revoke"
|
||
className="flex items-center gap-2"
|
||
disabled={disabled}
|
||
confirmTitle="Confirmer la révocation"
|
||
confirmMessage={`Voulez-vous révoquer l’accès de ${m.first_name || m.email} pour cette structure ?`}
|
||
confirmCta="Révoquer"
|
||
>
|
||
<input type="hidden" name="org_id" value={activeOrgId} />
|
||
<input type="hidden" name="user_id" value={m.user_id} />
|
||
<button
|
||
type="submit"
|
||
disabled={disabled}
|
||
className="px-3 py-1 rounded text-xs bg-red-600 text-white hover:bg-red-700 disabled:opacity-50"
|
||
>
|
||
Supprimer
|
||
</button>
|
||
</ConfirmableForm>
|
||
) : (
|
||
<ConfirmableForm
|
||
method="post"
|
||
action="/api/staff/users/unrevoke"
|
||
className="flex items-center gap-2"
|
||
disabled={false}
|
||
confirmTitle="Confirmer la réintégration"
|
||
confirmMessage={`Réintégrer ${m.first_name || m.email} et lui redonner l’accès à cette structure ?`}
|
||
confirmCta="Réintégrer"
|
||
>
|
||
<input type="hidden" name="org_id" value={activeOrgId} />
|
||
<input type="hidden" name="user_id" value={m.user_id} />
|
||
<button
|
||
type="submit"
|
||
className="px-3 py-1 rounded text-xs bg-emerald-600 text-white hover:bg-emerald-700"
|
||
>
|
||
Réintégrer
|
||
</button>
|
||
</ConfirmableForm>
|
||
)}
|
||
{disabled && (
|
||
<div className="text-xs text-slate-500">Utilisateur révoqué — accès désactivé</div>
|
||
)}
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
);
|
||
})
|
||
)}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div className="text-xs text-slate-500">
|
||
* La suppression est une révocation : l’utilisateur reste historisé dans la base, mais ne peut plus se connecter.
|
||
</div>
|
||
</main>
|
||
);
|
||
} |