100 lines
3.9 KiB
TypeScript
100 lines
3.9 KiB
TypeScript
export const dynamic = "force-dynamic";
|
|
import Link from "next/link";
|
|
import { cookies } from "next/headers";
|
|
import { createSbServer } from "@/lib/supabaseServer";
|
|
import { Metadata } from "next";
|
|
|
|
export const metadata: Metadata = {
|
|
title: "Tickets support | Espace Paie Odentas",
|
|
};
|
|
|
|
function formatDate(d?: string | null) {
|
|
if (!d) return "—";
|
|
try {
|
|
return new Intl.DateTimeFormat("fr-FR", { dateStyle: "medium", timeStyle: "short" }).format(new Date(d));
|
|
} catch {
|
|
return d as string;
|
|
}
|
|
}
|
|
|
|
export default async function StaffTicketsPage() {
|
|
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>
|
|
);
|
|
}
|
|
|
|
const c = cookies();
|
|
const activeOrgId = c.get("active_org_id")?.value || null;
|
|
let query = sb
|
|
.from("tickets")
|
|
.select("id, org_id, subject, status, priority, last_message_at, message_count, unread_by_client, unread_by_staff, created_at, updated_at")
|
|
.order("last_message_at", { ascending: false })
|
|
.limit(100);
|
|
if (activeOrgId) query = query.eq("org_id", activeOrgId);
|
|
const { data: items, 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">Tickets Support {activeOrgId ? '(organisation active)' : '(tous)'}
|
|
</h1>
|
|
<Link href="/staff/tickets/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 ticket</Link>
|
|
</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">Sujet</th>
|
|
<th className="text-left px-4 py-2 font-medium">Statut</th>
|
|
<th className="text-left px-4 py-2 font-medium">Priorité</th>
|
|
<th className="text-left px-4 py-2 font-medium">Dernier message</th>
|
|
<th className="text-left px-4 py-2 font-medium">Non lus (client/staff)</th>
|
|
<th className="text-right px-4 py-2 font-medium">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{(items || []).length ? (
|
|
items!.map((t) => (
|
|
<tr key={t.id} className="border-t">
|
|
<td className="px-4 py-2">{t.subject}</td>
|
|
<td className="px-4 py-2">{t.status}</td>
|
|
<td className="px-4 py-2">{t.priority}</td>
|
|
<td className="px-4 py-2">{formatDate(t.last_message_at)}</td>
|
|
<td className="px-4 py-2">{t.unread_by_client || 0} / {t.unread_by_staff || 0}</td>
|
|
<td className="px-4 py-2 text-right">
|
|
<Link href={`/staff/tickets/${t.id}`} className="text-slate-600 underline">Ouvrir</Link>
|
|
</td>
|
|
</tr>
|
|
))
|
|
) : (
|
|
<tr>
|
|
<td className="px-4 py-6 text-center text-slate-500" colSpan={6}>Aucun ticket pour le moment.</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|
|
|