Merge pull request 'fix: rebrancher /espace-hote sur le dashboard' (#60) from fix/host-dashboard-page into main

src/app/espace-hote/page.tsx

@@ -1,25 +1,287 @@
 import Link from "next/link";
 
+import { auth } from "@/auth";
 import { requireRole } from "@/lib/authorization";
+import { BookingStatus, UserRole } from "@/generated/prisma/enums";
+import {
+  getHostKpis,
+  listHostCarbets,
+  listHostRecentBookings,
+  isScopeAdmin,
+} from "@/lib/host-dashboard";
 
-export default async function HostPage() {
-  const session = await requireRole(["OWNER", "ADMIN"]);
+import { BookingDecision } from "./_components/BookingDecision";
+
+export const dynamic = "force-dynamic";
+
+const STATUS_TONES: Record<string, string> = {
+  PENDING: "bg-sky-100 text-sky-800 ring-sky-300",
+  CONFIRMED: "bg-emerald-100 text-emerald-800 ring-emerald-300",
+  CANCELLED: "bg-rose-100 text-rose-700 ring-rose-300",
+  COMPLETED: "bg-zinc-100 text-zinc-700 ring-zinc-300",
+  SUCCEEDED: "bg-emerald-100 text-emerald-800 ring-emerald-300",
+  REFUNDED: "bg-amber-100 text-amber-800 ring-amber-300",
+  FAILED: "bg-rose-100 text-rose-700 ring-rose-300",
+  AUTHORIZED: "bg-indigo-100 text-indigo-800 ring-indigo-300",
+  DRAFT: "bg-zinc-100 text-zinc-700 ring-zinc-300",
+  PUBLISHED: "bg-emerald-100 text-emerald-800 ring-emerald-300",
+  ARCHIVED: "bg-amber-100 text-amber-800 ring-amber-300",
+};
+
+const STATUS_LABEL: Record<string, string> = {
+  PENDING: "En attente",
+  CONFIRMED: "Confirmée",
+  CANCELLED: "Annulée",
+  COMPLETED: "Terminée",
+  SUCCEEDED: "Payé",
+  REFUNDED: "Remboursé",
+  FAILED: "Échec",
+  AUTHORIZED: "Autorisé",
+  DRAFT: "Brouillon",
+  PUBLISHED: "Publié",
+  ARCHIVED: "Archivé",
+};
+
+function Badge({ value }: { value: string }) {
+  const tone = STATUS_TONES[value] ?? STATUS_TONES.PENDING;
+  return (
+    <span className={`inline-flex rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wider ring-1 ring-inset ${tone}`}>
+      {STATUS_LABEL[value] ?? value}
+    </span>
+  );
+}
+
+function fmtEur(amount: string, currency: string): string {
+  const n = Number(amount);
+  return n.toLocaleString("fr-FR", { style: "currency", currency: currency || "EUR" });
+}
+
+const dateFmt = new Intl.DateTimeFormat("fr-FR", {
+  day: "2-digit",
+  month: "short",
+  year: "2-digit",
+});
+
+export default async function HostDashboardPage() {
+  await requireRole([UserRole.OWNER, UserRole.ADMIN]);
+  const session = await auth();
+  const userId = session!.user.id;
+  const isAdmin = isScopeAdmin(session?.user?.role);
+  const scope = { ownerId: userId, isAdmin };
+
+  const [kpis, recent, carbets] = await Promise.all([
+    getHostKpis(scope),
+    listHostRecentBookings(scope, 12),
+    listHostCarbets(scope),
+  ]);
+
+  const pendingBookings = recent.filter((b) => b.status === BookingStatus.PENDING);
 
   return (
-    <main className="mx-auto max-w-4xl px-6 py-12">
-      <h1 className="text-3xl font-semibold">Espace hôte</h1>
-      <p className="mt-4 text-zinc-700">
-        Accès autorisé pour {session.user.email} ({session.user.role}).
-      </p>
+    <main className="mx-auto max-w-6xl px-6 py-10">
+      <header className="mb-6 flex flex-wrap items-end justify-between gap-3">
+        <div>
+          <h1 className="text-3xl font-semibold text-zinc-900">Espace hôte</h1>
+          <p className="mt-1 text-sm text-zinc-600">
+            Bienvenue {session?.user?.name || session?.user?.email}.{" "}
+            {isAdmin ? "Vue globale (admin)." : "Vue limitée à vos carbets."}
+          </p>
+        </div>
+        <div className="flex gap-2">
+          <Link
+            href="/espace-hote/carbets/nouveau"
+            className="rounded-md bg-emerald-600 px-3 py-1.5 text-sm font-semibold text-white hover:bg-emerald-700"
+          >
+            + Nouveau carbet
+          </Link>
+          <Link
+            href="/espace-hote/carbets"
+            className="rounded-md border border-zinc-300 bg-white px-3 py-1.5 text-sm text-zinc-700 hover:bg-zinc-50"
+          >
+            Tous mes carbets
+          </Link>
+        </div>
+      </header>
 
-      <div className="mt-8">
-        <Link
-          href="/espace-hote/carbets"
-          className="inline-block rounded-md bg-emerald-600 px-5 py-2.5 text-sm font-semibold text-white hover:bg-emerald-700"
-        >
-          Gérer mes carbets
-        </Link>
-      </div>
+      <section className="mb-6 grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-6">
+        <Kpi label="CA total" value={fmtEur(kpis.revenueTotal, "EUR")} />
+        <Kpi label="CA 30 j" value={fmtEur(kpis.revenue30d, "EUR")} />
+        <Kpi label="CA 12 mois" value={fmtEur(kpis.revenue365d, "EUR")} />
+        <Kpi
+          label="À confirmer"
+          value={String(kpis.bookingsPending)}
+          tone={kpis.bookingsPending > 0 ? "warn" : "neutral"}
+        />
+        <Kpi label="Confirmées à venir" value={String(kpis.bookingsConfirmedUpcoming)} />
+        <Kpi label="Occupation 30 j" value={`${Math.round(kpis.occupancyRate30d * 100)} %`} />
+      </section>
+
+      {kpis.nextArrival ? (
+        <section className="mb-6 rounded-lg border border-emerald-300 bg-emerald-50 p-4">
+          <div className="text-xs uppercase tracking-wider text-emerald-700">Prochaine arrivée</div>
+          <div className="mt-1 text-base font-semibold text-emerald-900">
+            {kpis.nextArrival.tenantName} · {kpis.nextArrival.carbetTitle}
+          </div>
+          <div className="text-sm text-emerald-800">
+            {dateFmt.format(kpis.nextArrival.startDate)}
+          </div>
+        </section>
+      ) : null}
+
+      {pendingBookings.length > 0 ? (
+        <section className="mb-6 rounded-lg border border-amber-300 bg-amber-50 p-4">
+          <h2 className="mb-3 text-sm font-semibold uppercase tracking-wider text-amber-900">
+            Demandes en attente ({pendingBookings.length})
+          </h2>
+          <ul className="space-y-2">
+            {pendingBookings.map((b) => (
+              <li key={b.id} className="flex flex-wrap items-center justify-between gap-3 rounded border border-amber-200 bg-white px-3 py-2 text-sm">
+                <div>
+                  <div className="font-semibold text-zinc-900">
+                    {b.tenantName} — {b.carbetTitle}
+                  </div>
+                  <div className="text-xs text-zinc-600">
+                    {dateFmt.format(b.startDate)} → {dateFmt.format(b.endDate)} ·{" "}
+                    {b.guestCount} pers · {fmtEur(b.amount, b.currency)}
+                  </div>
+                </div>
+                <BookingDecision bookingId={b.id} />
+              </li>
+            ))}
+          </ul>
+        </section>
+      ) : null}
+
+      <section className="mb-6">
+        <h2 className="mb-3 text-sm font-semibold uppercase tracking-wider text-zinc-500">
+          Mes carbets ({carbets.length})
+        </h2>
+        {carbets.length === 0 ? (
+          <div className="rounded-lg border border-zinc-200 bg-white px-4 py-8 text-center text-sm text-zinc-500">
+            Aucun carbet pour l&apos;instant.{" "}
+            <Link href="/espace-hote/carbets/nouveau" className="text-emerald-700 underline">
+              Créer mon premier carbet
+            </Link>
+          </div>
+        ) : (
+          <div className="overflow-hidden rounded-lg border border-zinc-200 bg-white">
+            <table className="w-full text-sm">
+              <thead className="border-b border-zinc-200 bg-zinc-50 text-xs uppercase tracking-wider text-zinc-500">
+                <tr>
+                  <th className="px-4 py-2 text-left font-semibold">Titre</th>
+                  <th className="px-4 py-2 text-left font-semibold">Fleuve</th>
+                  <th className="px-4 py-2 text-right font-semibold">€/nuit</th>
+                  <th className="px-4 py-2 text-right font-semibold">Cap.</th>
+                  <th className="px-4 py-2 text-right font-semibold">Médias</th>
+                  <th className="px-4 py-2 text-right font-semibold">Résas</th>
+                  <th className="px-4 py-2 text-right font-semibold">Avis</th>
+                  <th className="px-4 py-2 text-left font-semibold">Statut</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-zinc-100">
+                {carbets.map((c) => (
+                  <tr key={c.id} className="hover:bg-zinc-50">
+                    <td className="px-4 py-2">
+                      <Link
+                        href={`/espace-hote/carbets/${c.id}`}
+                        className="font-medium text-zinc-900 hover:underline"
+                      >
+                        {c.title}
+                      </Link>
+                      <div className="text-[11px] text-zinc-500">
+                        <code>/{c.slug}</code>
+                      </div>
+                    </td>
+                    <td className="px-4 py-2 text-zinc-700">{c.river}</td>
+                    <td className="px-4 py-2 text-right font-mono text-zinc-700">
+                      {Number(c.nightlyPrice).toFixed(0)}
+                    </td>
+                    <td className="px-4 py-2 text-right font-mono text-zinc-700">{c.capacity}</td>
+                    <td className="px-4 py-2 text-right font-mono text-zinc-700">
+                      {c._count.media}
+                    </td>
+                    <td className="px-4 py-2 text-right font-mono text-zinc-700">
+                      {c._count.bookings}
+                    </td>
+                    <td className="px-4 py-2 text-right font-mono text-zinc-700">
+                      {c._count.reviews}
+                    </td>
+                    <td className="px-4 py-2">
+                      <Badge value={c.status} />
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </section>
+
+      {recent.length > 0 ? (
+        <section>
+          <h2 className="mb-3 text-sm font-semibold uppercase tracking-wider text-zinc-500">
+            Activité récente
+          </h2>
+          <div className="overflow-hidden rounded-lg border border-zinc-200 bg-white">
+            <table className="w-full text-sm">
+              <thead className="border-b border-zinc-200 bg-zinc-50 text-xs uppercase tracking-wider text-zinc-500">
+                <tr>
+                  <th className="px-4 py-2 text-left font-semibold">Carbet</th>
+                  <th className="px-4 py-2 text-left font-semibold">Locataire</th>
+                  <th className="px-4 py-2 text-left font-semibold">Séjour</th>
+                  <th className="px-4 py-2 text-right font-semibold">Montant</th>
+                  <th className="px-4 py-2 text-left font-semibold">Résa</th>
+                  <th className="px-4 py-2 text-left font-semibold">Paiement</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-zinc-100">
+                {recent.map((b) => (
+                  <tr key={b.id} className="hover:bg-zinc-50">
+                    <td className="px-4 py-2 text-zinc-900">{b.carbetTitle}</td>
+                    <td className="px-4 py-2 text-zinc-700">{b.tenantName}</td>
+                    <td className="px-4 py-2 text-zinc-700">
+                      {dateFmt.format(b.startDate)} → {dateFmt.format(b.endDate)}
+                    </td>
+                    <td className="px-4 py-2 text-right font-mono text-zinc-700">
+                      {fmtEur(b.amount, b.currency)}
+                    </td>
+                    <td className="px-4 py-2">
+                      <Badge value={b.status} />
+                    </td>
+                    <td className="px-4 py-2">
+                      <Badge value={b.paymentStatus} />
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </section>
+      ) : null}
     </main>
   );
 }
+
+function Kpi({
+  label,
+  value,
+  tone = "neutral",
+}: {
+  label: string;
+  value: string;
+  tone?: "neutral" | "warn";
+}) {
+  return (
+    <div
+      className={
+        "rounded-lg border bg-white p-3 shadow-sm " +
+        (tone === "warn" ? "border-amber-300" : "border-zinc-200")
+      }
+    >
+      <div className="text-[11px] uppercase tracking-wider text-zinc-500">{label}</div>
+      <div className={"mt-1 text-xl font-semibold " + (tone === "warn" ? "text-amber-700" : "text-zinc-900")}>
+        {value}
+      </div>
+    </div>
+  );
+}