111 lines
3.8 KiB
TypeScript
111 lines
3.8 KiB
TypeScript
export const dynamic = "force-dynamic";
|
|
import Link from "next/link";
|
|
import { createSbServer } from "@/lib/supabaseServer";
|
|
|
|
function formatDate(d?: string | null) {
|
|
if (!d) return "—";
|
|
try {
|
|
return new Intl.DateTimeFormat("fr-FR", { dateStyle: "medium", timeStyle: undefined }).format(new Date(d));
|
|
} catch {
|
|
return d;
|
|
}
|
|
}
|
|
|
|
export default async function StaffClientsPage({ searchParams }: { searchParams?: { q?: string } }) {
|
|
const q = (searchParams?.q || "").trim();
|
|
|
|
const sb = createSbServer();
|
|
const { data: { user } } = await sb.auth.getUser();
|
|
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>
|
|
);
|
|
}
|
|
|
|
const { data: me } = await sb
|
|
.from("staff_users")
|
|
.select("is_staff")
|
|
.eq("user_id", user.id)
|
|
.maybeSingle();
|
|
if (!me?.is_staff) {
|
|
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>
|
|
);
|
|
}
|
|
|
|
let query = sb.from("organizations").select("id, name, structure_api, created_at").order("created_at", { ascending: false });
|
|
if (q) {
|
|
// recherche simple sur name et structure_api
|
|
query = query.ilike("name", `%${q}%`).ilike("structure_api", `%${q}%`);
|
|
}
|
|
const { data: orgs, error } = await query;
|
|
if (error) {
|
|
return (
|
|
<main className="p-6">
|
|
<h1 className="text-lg font-semibold">Erreur</h1>
|
|
<p className="text-sm text-rose-600">{error.message}</p>
|
|
</main>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<main className="p-6 space-y-4">
|
|
<div className="flex items-center justify-between gap-4">
|
|
<h1 className="text-lg font-semibold">Clients</h1>
|
|
<div className="flex items-center gap-2">
|
|
<form className="hidden md:block" action="/staff/clients" method="get">
|
|
<input
|
|
type="text"
|
|
name="q"
|
|
defaultValue={q}
|
|
placeholder="Rechercher…"
|
|
className="px-3 py-2 rounded-lg border bg-transparent text-sm"
|
|
/>
|
|
</form>
|
|
<Link href="/staff/clients/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">
|
|
+ Nouveau client
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
<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-2 font-medium">Nom</th>
|
|
<th className="text-left px-4 py-2 font-medium">Structure API</th>
|
|
<th className="text-left px-4 py-2 font-medium">Créé le</th>
|
|
<th className="text-right px-4 py-2 font-medium">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{orgs?.length ? (
|
|
orgs.map((o) => (
|
|
<tr key={o.id} className="border-t">
|
|
<td className="px-4 py-2">{o.name}</td>
|
|
<td className="px-4 py-2">{o.structure_api || "—"}</td>
|
|
<td className="px-4 py-2">{formatDate(o.created_at)}</td>
|
|
<td className="px-4 py-2 text-right">
|
|
<Link href={`/staff/clients/${o.id}`} className="text-blue-600 hover:text-blue-800 underline">Ouvrir</Link>
|
|
</td>
|
|
</tr>
|
|
))
|
|
) : (
|
|
<tr>
|
|
<td className="px-4 py-6 text-center text-slate-500" colSpan={4}>
|
|
Aucun client pour le moment.
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|