feat: add admin panel to manage candidatures and approve with Stripe link
- /admin page with secret-key authentication - List all candidatures with details (expandable cards) - Approve: updates status + generates Stripe checkout URL + sends email - Reject: updates status - Checkout URL displayed on screen for manual copy if Resend not configured - Protected by ADMIN_SECRET env var https://claude.ai/code/session_01H2aRGDaKgarPvhay2HxN6Y
This commit is contained in:
Claude
358
app/admin/page.tsx
Normal file
358
app/admin/page.tsx
Normal file
@@ -0,0 +1,358 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
import Link from "next/link";
|
||||
|
||||
interface Candidature {
|
||||
id: string;
|
||||
email: string;
|
||||
firstname: string;
|
||||
phone: string;
|
||||
persona: string;
|
||||
age: number;
|
||||
experience: string;
|
||||
time_daily: string;
|
||||
availability: string;
|
||||
start_date: string;
|
||||
motivation: string;
|
||||
monthly_goal: string;
|
||||
biggest_fear: string;
|
||||
tiktok_username: string | null;
|
||||
status: "pending" | "approved" | "rejected";
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
export default function AdminPage() {
|
||||
const [secret, setSecret] = useState("");
|
||||
const [authenticated, setAuthenticated] = useState(false);
|
||||
const [candidatures, setCandidatures] = useState<Candidature[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [actionLoading, setActionLoading] = useState<string | null>(null);
|
||||
const [checkoutUrls, setCheckoutUrls] = useState<Record<string, string>>({});
|
||||
const [expandedId, setExpandedId] = useState<string | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const fetchCandidatures = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const res = await fetch(`/api/admin/candidatures?secret=${encodeURIComponent(secret)}`);
|
||||
const data = await res.json();
|
||||
if (!res.ok) throw new Error(data.error);
|
||||
setCandidatures(data.candidatures);
|
||||
setAuthenticated(true);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Erreur de chargement");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [secret]);
|
||||
|
||||
useEffect(() => {
|
||||
// Vérifier si le secret est dans l'URL
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const urlSecret = params.get("secret");
|
||||
if (urlSecret) {
|
||||
setSecret(urlSecret);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (secret && !authenticated) {
|
||||
fetchCandidatures();
|
||||
}
|
||||
}, [secret, authenticated, fetchCandidatures]);
|
||||
|
||||
const handleApprove = async (id: string) => {
|
||||
setActionLoading(id);
|
||||
try {
|
||||
const res = await fetch(`/api/admin/candidatures/${id}/approve`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ secret }),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (!res.ok) throw new Error(data.error);
|
||||
|
||||
if (data.checkoutUrl) {
|
||||
setCheckoutUrls((prev) => ({ ...prev, [id]: data.checkoutUrl }));
|
||||
}
|
||||
|
||||
// Rafraîchir la liste
|
||||
await fetchCandidatures();
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Erreur");
|
||||
} finally {
|
||||
setActionLoading(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleReject = async (id: string) => {
|
||||
if (!confirm("Rejeter cette candidature ?")) return;
|
||||
setActionLoading(id);
|
||||
try {
|
||||
const res = await fetch(`/api/admin/candidatures/${id}/reject`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ secret }),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (!res.ok) throw new Error(data.error);
|
||||
await fetchCandidatures();
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Erreur");
|
||||
} finally {
|
||||
setActionLoading(null);
|
||||
}
|
||||
};
|
||||
|
||||
const statusColors: Record<string, string> = {
|
||||
pending: "bg-warning/10 text-warning",
|
||||
approved: "bg-success/10 text-success",
|
||||
rejected: "bg-error/10 text-error",
|
||||
};
|
||||
|
||||
const statusLabels: Record<string, string> = {
|
||||
pending: "En attente",
|
||||
approved: "Approuvée",
|
||||
rejected: "Rejetée",
|
||||
};
|
||||
|
||||
// Login form
|
||||
if (!authenticated) {
|
||||
return (
|
||||
<main className="min-h-screen flex items-center justify-center">
|
||||
<div className="bg-dark-light border border-dark-border rounded-[20px] p-8 w-full max-w-sm">
|
||||
<h1 className="text-xl font-bold text-white mb-6 text-center">Admin HookLab</h1>
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
fetchCandidatures();
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="password"
|
||||
placeholder="Clé secrète admin"
|
||||
value={secret}
|
||||
onChange={(e) => setSecret(e.target.value)}
|
||||
className="w-full px-4 py-3 bg-dark-lighter border border-dark-border rounded-xl text-white placeholder-white/30 text-sm mb-4 focus:outline-none focus:border-primary"
|
||||
/>
|
||||
{error && (
|
||||
<p className="text-error text-sm mb-4">{error}</p>
|
||||
)}
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading || !secret}
|
||||
className="w-full py-3 gradient-bg text-white font-semibold rounded-xl disabled:opacity-50 cursor-pointer"
|
||||
>
|
||||
{loading ? "Connexion..." : "Accéder"}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
const pending = candidatures.filter((c) => c.status === "pending");
|
||||
const approved = candidatures.filter((c) => c.status === "approved");
|
||||
const rejected = candidatures.filter((c) => c.status === "rejected");
|
||||
|
||||
return (
|
||||
<main className="min-h-screen py-10">
|
||||
<div className="max-w-6xl mx-auto px-4 sm:px-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<div>
|
||||
<Link href="/" className="text-white/40 hover:text-white text-sm transition-colors mb-2 inline-block">
|
||||
← Retour au site
|
||||
</Link>
|
||||
<h1 className="text-2xl font-bold text-white">Gestion des candidatures</h1>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex gap-2 text-xs">
|
||||
<span className="px-2 py-1 bg-warning/10 text-warning rounded-lg">{pending.length} en attente</span>
|
||||
<span className="px-2 py-1 bg-success/10 text-success rounded-lg">{approved.length} approuvées</span>
|
||||
<span className="px-2 py-1 bg-error/10 text-error rounded-lg">{rejected.length} rejetées</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={fetchCandidatures}
|
||||
className="px-3 py-1.5 bg-dark-lighter border border-dark-border rounded-lg text-white/60 text-sm hover:text-white transition-colors cursor-pointer"
|
||||
>
|
||||
Rafraîchir
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="mb-6 p-3 bg-error/10 border border-error/20 rounded-xl">
|
||||
<p className="text-error text-sm">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Liste des candidatures */}
|
||||
{candidatures.length === 0 ? (
|
||||
<div className="text-center py-20">
|
||||
<p className="text-white/40">Aucune candidature pour le moment.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{candidatures.map((c) => (
|
||||
<div
|
||||
key={c.id}
|
||||
className="bg-dark-light border border-dark-border rounded-2xl overflow-hidden"
|
||||
>
|
||||
{/* Header row */}
|
||||
<div
|
||||
className="px-6 py-4 flex items-center justify-between cursor-pointer hover:bg-dark-lighter/50 transition-colors"
|
||||
onClick={() => setExpandedId(expandedId === c.id ? null : c.id)}
|
||||
>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-10 h-10 rounded-full gradient-bg flex items-center justify-center text-sm font-bold text-white">
|
||||
{c.firstname.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-white font-medium">{c.firstname}</p>
|
||||
<p className="text-white/40 text-sm">{c.email}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-white/30 text-xs">
|
||||
{new Date(c.created_at).toLocaleDateString("fr-FR", {
|
||||
day: "numeric",
|
||||
month: "short",
|
||||
year: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
})}
|
||||
</span>
|
||||
<span className={`px-2.5 py-1 rounded-lg text-xs font-medium ${statusColors[c.status]}`}>
|
||||
{statusLabels[c.status]}
|
||||
</span>
|
||||
<svg
|
||||
className={`w-5 h-5 text-white/30 transition-transform ${expandedId === c.id ? "rotate-180" : ""}`}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Expanded details */}
|
||||
{expandedId === c.id && (
|
||||
<div className="px-6 pb-5 border-t border-dark-border">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 py-4">
|
||||
<div>
|
||||
<p className="text-white/40 text-xs mb-1">Téléphone</p>
|
||||
<p className="text-white text-sm">{c.phone}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-white/40 text-xs mb-1">Âge</p>
|
||||
<p className="text-white text-sm">{c.age} ans</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-white/40 text-xs mb-1">Profil</p>
|
||||
<p className="text-white text-sm capitalize">{c.persona}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-white/40 text-xs mb-1">Expérience</p>
|
||||
<p className="text-white text-sm">{c.experience}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-white/40 text-xs mb-1">Temps disponible</p>
|
||||
<p className="text-white text-sm">{c.time_daily}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-white/40 text-xs mb-1">Disponibilité</p>
|
||||
<p className="text-white text-sm">{c.availability}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-white/40 text-xs mb-1">Début souhaité</p>
|
||||
<p className="text-white text-sm">{c.start_date}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-white/40 text-xs mb-1">Objectif mensuel</p>
|
||||
<p className="text-white text-sm">{c.monthly_goal}</p>
|
||||
</div>
|
||||
{c.tiktok_username && (
|
||||
<div>
|
||||
<p className="text-white/40 text-xs mb-1">TikTok</p>
|
||||
<p className="text-white text-sm">{c.tiktok_username}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 py-3">
|
||||
<div>
|
||||
<p className="text-white/40 text-xs mb-1">Motivation</p>
|
||||
<p className="text-white/80 text-sm bg-dark-lighter rounded-xl p-3">{c.motivation}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-white/40 text-xs mb-1">Plus grande peur</p>
|
||||
<p className="text-white/80 text-sm bg-dark-lighter rounded-xl p-3">{c.biggest_fear}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Checkout URL si disponible */}
|
||||
{checkoutUrls[c.id] && (
|
||||
<div className="mt-3 p-3 bg-success/10 border border-success/20 rounded-xl">
|
||||
<p className="text-success text-xs font-medium mb-1">Lien de paiement généré :</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="text"
|
||||
readOnly
|
||||
value={checkoutUrls[c.id]}
|
||||
className="flex-1 bg-dark-lighter border border-dark-border rounded-lg px-3 py-2 text-white text-xs"
|
||||
/>
|
||||
<button
|
||||
onClick={() => navigator.clipboard.writeText(checkoutUrls[c.id])}
|
||||
className="px-3 py-2 bg-success/20 text-success rounded-lg text-xs font-medium hover:bg-success/30 transition-colors cursor-pointer"
|
||||
>
|
||||
Copier
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Actions */}
|
||||
{c.status === "pending" && (
|
||||
<div className="flex items-center gap-3 mt-4 pt-4 border-t border-dark-border">
|
||||
<button
|
||||
onClick={() => handleApprove(c.id)}
|
||||
disabled={actionLoading === c.id}
|
||||
className="px-4 py-2 bg-success/10 text-success border border-success/20 rounded-xl text-sm font-medium hover:bg-success/20 transition-colors disabled:opacity-50 cursor-pointer"
|
||||
>
|
||||
{actionLoading === c.id ? "Approbation..." : "Approuver + Envoyer lien paiement"}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleReject(c.id)}
|
||||
disabled={actionLoading === c.id}
|
||||
className="px-4 py-2 bg-error/10 text-error border border-error/20 rounded-xl text-sm font-medium hover:bg-error/20 transition-colors disabled:opacity-50 cursor-pointer"
|
||||
>
|
||||
Rejeter
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{c.status === "approved" && !checkoutUrls[c.id] && (
|
||||
<div className="flex items-center gap-3 mt-4 pt-4 border-t border-dark-border">
|
||||
<button
|
||||
onClick={() => handleApprove(c.id)}
|
||||
disabled={actionLoading === c.id}
|
||||
className="px-4 py-2 bg-primary/10 text-primary border border-primary/20 rounded-xl text-sm font-medium hover:bg-primary/20 transition-colors disabled:opacity-50 cursor-pointer"
|
||||
>
|
||||
{actionLoading === c.id ? "Génération..." : "Regénérer le lien de paiement"}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user