1d0bd349fd
- Replace ADMIN_SECRET query param with proper Supabase auth + is_admin flag - Add admin layout with auth check (redirects non-admin to /) - Add AdminShell component with sidebar navigation (Dashboard, Candidatures, Cours) - Add admin dashboard with stats (candidatures, users, modules) - Add admin candidatures page with filters and approve/reject - Add admin course management page (create, edit, delete, publish/unpublish) - Add API routes: GET/POST /api/admin/modules, GET/PUT/DELETE /api/admin/modules/[id] - Add verifyAdmin() helper for API route protection - Update database types with is_admin on profiles https://claude.ai/code/session_01H2aRGDaKgarPvhay2HxN6Y
564 lines
21 KiB
TypeScript
564 lines
21 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect, useCallback } from "react";
|
|
|
|
interface Module {
|
|
id: string;
|
|
title: string;
|
|
description: string | null;
|
|
week_number: number;
|
|
order_index: number;
|
|
content_type: "video" | "pdf" | "text" | "quiz" | null;
|
|
content_url: string | null;
|
|
duration_minutes: number | null;
|
|
is_published: boolean;
|
|
created_at: string;
|
|
}
|
|
|
|
type FormData = {
|
|
title: string;
|
|
description: string;
|
|
week_number: number;
|
|
order_index: number;
|
|
content_type: "video" | "pdf" | "text" | "quiz" | "";
|
|
content_url: string;
|
|
duration_minutes: number | "";
|
|
is_published: boolean;
|
|
};
|
|
|
|
const emptyForm: FormData = {
|
|
title: "",
|
|
description: "",
|
|
week_number: 1,
|
|
order_index: 0,
|
|
content_type: "video",
|
|
content_url: "",
|
|
duration_minutes: "",
|
|
is_published: false,
|
|
};
|
|
|
|
export default function AdminCoursPage() {
|
|
const [modules, setModules] = useState<Module[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [saving, setSaving] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [success, setSuccess] = useState<string | null>(null);
|
|
|
|
// Vue : "list" ou "form"
|
|
const [view, setView] = useState<"list" | "form">("list");
|
|
const [editingId, setEditingId] = useState<string | null>(null);
|
|
const [form, setForm] = useState<FormData>(emptyForm);
|
|
const [deleteConfirm, setDeleteConfirm] = useState<string | null>(null);
|
|
|
|
const fetchModules = useCallback(async () => {
|
|
setLoading(true);
|
|
try {
|
|
const res = await fetch("/api/admin/modules");
|
|
const data = await res.json();
|
|
if (!res.ok) throw new Error(data.error);
|
|
setModules(data.modules);
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : "Erreur de chargement");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
fetchModules();
|
|
}, [fetchModules]);
|
|
|
|
// Auto-clear success message
|
|
useEffect(() => {
|
|
if (success) {
|
|
const t = setTimeout(() => setSuccess(null), 3000);
|
|
return () => clearTimeout(t);
|
|
}
|
|
}, [success]);
|
|
|
|
const openNew = () => {
|
|
// Calculer automatiquement le prochain order_index
|
|
const maxOrder = modules.reduce((max, m) => Math.max(max, m.order_index), -1);
|
|
setForm({ ...emptyForm, order_index: maxOrder + 1 });
|
|
setEditingId(null);
|
|
setView("form");
|
|
setError(null);
|
|
};
|
|
|
|
const openEdit = (mod: Module) => {
|
|
setForm({
|
|
title: mod.title,
|
|
description: mod.description || "",
|
|
week_number: mod.week_number,
|
|
order_index: mod.order_index,
|
|
content_type: mod.content_type || "",
|
|
content_url: mod.content_url || "",
|
|
duration_minutes: mod.duration_minutes ?? "",
|
|
is_published: mod.is_published,
|
|
});
|
|
setEditingId(mod.id);
|
|
setView("form");
|
|
setError(null);
|
|
};
|
|
|
|
const handleSave = async () => {
|
|
if (!form.title.trim()) {
|
|
setError("Le titre est obligatoire.");
|
|
return;
|
|
}
|
|
|
|
setSaving(true);
|
|
setError(null);
|
|
|
|
try {
|
|
const payload = {
|
|
title: form.title.trim(),
|
|
description: form.description.trim() || null,
|
|
week_number: form.week_number,
|
|
order_index: form.order_index,
|
|
content_type: form.content_type || null,
|
|
content_url: form.content_url.trim() || null,
|
|
duration_minutes: form.duration_minutes === "" ? null : Number(form.duration_minutes),
|
|
is_published: form.is_published,
|
|
};
|
|
|
|
let res: Response;
|
|
if (editingId) {
|
|
res = await fetch(`/api/admin/modules/${editingId}`, {
|
|
method: "PUT",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(payload),
|
|
});
|
|
} else {
|
|
res = await fetch("/api/admin/modules", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(payload),
|
|
});
|
|
}
|
|
|
|
const data = await res.json();
|
|
if (!res.ok) throw new Error(data.error);
|
|
|
|
setSuccess(editingId ? "Cours mis à jour !" : "Cours créé !");
|
|
setView("list");
|
|
await fetchModules();
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : "Erreur");
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
const handleDelete = async (id: string) => {
|
|
try {
|
|
const res = await fetch(`/api/admin/modules/${id}`, { method: "DELETE" });
|
|
const data = await res.json();
|
|
if (!res.ok) throw new Error(data.error);
|
|
setSuccess("Cours supprimé !");
|
|
setDeleteConfirm(null);
|
|
await fetchModules();
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : "Erreur");
|
|
}
|
|
};
|
|
|
|
const handleTogglePublish = async (mod: Module) => {
|
|
try {
|
|
const res = await fetch(`/api/admin/modules/${mod.id}`, {
|
|
method: "PUT",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ is_published: !mod.is_published }),
|
|
});
|
|
const data = await res.json();
|
|
if (!res.ok) throw new Error(data.error);
|
|
await fetchModules();
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : "Erreur");
|
|
}
|
|
};
|
|
|
|
const contentTypeLabels: Record<string, string> = {
|
|
video: "Vidéo",
|
|
pdf: "PDF",
|
|
text: "Texte",
|
|
quiz: "Quiz",
|
|
};
|
|
|
|
// Grouper par semaine pour l'affichage liste
|
|
const modulesByWeek = modules.reduce(
|
|
(acc, mod) => {
|
|
const w = mod.week_number;
|
|
if (!acc[w]) acc[w] = [];
|
|
acc[w].push(mod);
|
|
return acc;
|
|
},
|
|
{} as Record<number, Module[]>
|
|
);
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex items-center justify-center py-20">
|
|
<div className="animate-spin w-8 h-8 border-2 border-primary border-t-transparent rounded-full" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ========== FORMULAIRE ==========
|
|
if (view === "form") {
|
|
return (
|
|
<div className="max-w-2xl">
|
|
<button
|
|
onClick={() => setView("list")}
|
|
className="text-white/40 hover:text-white text-sm transition-colors mb-6 flex items-center gap-1 cursor-pointer"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
|
</svg>
|
|
Retour à la liste
|
|
</button>
|
|
|
|
<h1 className="text-2xl font-bold text-white mb-8">
|
|
{editingId ? "Modifier le cours" : "Nouveau cours"}
|
|
</h1>
|
|
|
|
{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>
|
|
)}
|
|
|
|
<div className="space-y-6">
|
|
{/* Titre */}
|
|
<div>
|
|
<label className="block text-sm font-medium text-white/80 mb-1.5">
|
|
Titre du cours *
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={form.title}
|
|
onChange={(e) => setForm({ ...form, title: e.target.value })}
|
|
placeholder="Ex : Introduction au TikTok Shop"
|
|
className="w-full px-4 py-3 bg-dark-lighter border border-dark-border rounded-xl text-white placeholder-white/30 text-sm focus:outline-none focus:border-primary"
|
|
/>
|
|
</div>
|
|
|
|
{/* Description */}
|
|
<div>
|
|
<label className="block text-sm font-medium text-white/80 mb-1.5">
|
|
Description
|
|
</label>
|
|
<textarea
|
|
value={form.description}
|
|
onChange={(e) => setForm({ ...form, description: e.target.value })}
|
|
rows={3}
|
|
placeholder="Description courte du module..."
|
|
className="w-full px-4 py-3 bg-dark-lighter border border-dark-border rounded-xl text-white placeholder-white/30 text-sm focus:outline-none focus:border-primary resize-none"
|
|
/>
|
|
</div>
|
|
|
|
{/* Semaine + Ordre */}
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-white/80 mb-1.5">
|
|
Semaine
|
|
</label>
|
|
<select
|
|
value={form.week_number}
|
|
onChange={(e) => setForm({ ...form, week_number: Number(e.target.value) })}
|
|
className="w-full px-4 py-3 bg-dark-lighter border border-dark-border rounded-xl text-white text-sm focus:outline-none focus:border-primary"
|
|
>
|
|
{[1, 2, 3, 4, 5, 6, 7, 8].map((w) => (
|
|
<option key={w} value={w}>
|
|
Semaine {w}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-white/80 mb-1.5">
|
|
Ordre d'affichage
|
|
</label>
|
|
<input
|
|
type="number"
|
|
value={form.order_index}
|
|
onChange={(e) => setForm({ ...form, order_index: Number(e.target.value) })}
|
|
min={0}
|
|
className="w-full px-4 py-3 bg-dark-lighter border border-dark-border rounded-xl text-white text-sm focus:outline-none focus:border-primary"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Type de contenu */}
|
|
<div>
|
|
<label className="block text-sm font-medium text-white/80 mb-1.5">
|
|
Type de contenu
|
|
</label>
|
|
<div className="grid grid-cols-4 gap-2">
|
|
{(["video", "pdf", "text", "quiz"] as const).map((type) => (
|
|
<button
|
|
key={type}
|
|
type="button"
|
|
onClick={() => setForm({ ...form, content_type: type })}
|
|
className={`px-3 py-2.5 rounded-xl text-sm font-medium transition-colors cursor-pointer ${
|
|
form.content_type === type
|
|
? "bg-primary/10 text-primary border border-primary/30"
|
|
: "bg-dark-lighter text-white/40 border border-dark-border hover:text-white"
|
|
}`}
|
|
>
|
|
{contentTypeLabels[type]}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* URL du contenu */}
|
|
<div>
|
|
<label className="block text-sm font-medium text-white/80 mb-1.5">
|
|
URL du contenu
|
|
</label>
|
|
<input
|
|
type="url"
|
|
value={form.content_url}
|
|
onChange={(e) => setForm({ ...form, content_url: e.target.value })}
|
|
placeholder={
|
|
form.content_type === "video"
|
|
? "https://www.youtube.com/embed/..."
|
|
: form.content_type === "pdf"
|
|
? "https://drive.google.com/file/..."
|
|
: "https://..."
|
|
}
|
|
className="w-full px-4 py-3 bg-dark-lighter border border-dark-border rounded-xl text-white placeholder-white/30 text-sm focus:outline-none focus:border-primary"
|
|
/>
|
|
<p className="text-white/20 text-xs mt-1">
|
|
{form.content_type === "video"
|
|
? "Utilise l'URL d'intégration YouTube (embed). Ex : https://www.youtube.com/embed/VIDEO_ID"
|
|
: "Lien direct vers le fichier ou la page."}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Durée */}
|
|
<div>
|
|
<label className="block text-sm font-medium text-white/80 mb-1.5">
|
|
Durée (minutes)
|
|
</label>
|
|
<input
|
|
type="number"
|
|
value={form.duration_minutes}
|
|
onChange={(e) =>
|
|
setForm({
|
|
...form,
|
|
duration_minutes: e.target.value === "" ? "" : Number(e.target.value),
|
|
})
|
|
}
|
|
min={0}
|
|
placeholder="15"
|
|
className="w-full px-4 py-3 bg-dark-lighter border border-dark-border rounded-xl text-white placeholder-white/30 text-sm focus:outline-none focus:border-primary"
|
|
/>
|
|
</div>
|
|
|
|
{/* Publié */}
|
|
<div className="flex items-center gap-3">
|
|
<button
|
|
type="button"
|
|
onClick={() => setForm({ ...form, is_published: !form.is_published })}
|
|
className={`relative w-12 h-6 rounded-full transition-colors cursor-pointer ${
|
|
form.is_published ? "bg-success" : "bg-dark-lighter"
|
|
}`}
|
|
>
|
|
<span
|
|
className={`absolute top-0.5 w-5 h-5 bg-white rounded-full transition-transform ${
|
|
form.is_published ? "translate-x-6.5" : "translate-x-0.5"
|
|
}`}
|
|
/>
|
|
</button>
|
|
<span className="text-white/80 text-sm">
|
|
{form.is_published ? "Publié (visible par les élèves)" : "Brouillon (non visible)"}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Boutons */}
|
|
<div className="flex items-center gap-3 pt-4 border-t border-dark-border">
|
|
<button
|
|
onClick={handleSave}
|
|
disabled={saving}
|
|
className="px-6 py-3 gradient-bg text-white font-semibold rounded-xl disabled:opacity-50 cursor-pointer"
|
|
>
|
|
{saving ? "Enregistrement..." : editingId ? "Mettre à jour" : "Créer le cours"}
|
|
</button>
|
|
<button
|
|
onClick={() => setView("list")}
|
|
className="px-6 py-3 bg-dark-lighter text-white/60 rounded-xl hover:text-white transition-colors cursor-pointer"
|
|
>
|
|
Annuler
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ========== LISTE ==========
|
|
return (
|
|
<div className="max-w-6xl">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between mb-8">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-white">Gestion des cours</h1>
|
|
<p className="text-white/40 text-sm mt-1">
|
|
{modules.length} cours · {modules.filter((m) => m.is_published).length} publiés
|
|
</p>
|
|
</div>
|
|
<button
|
|
onClick={openNew}
|
|
className="px-4 py-2.5 gradient-bg text-white font-semibold rounded-xl text-sm flex items-center gap-2 cursor-pointer"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
|
</svg>
|
|
Nouveau cours
|
|
</button>
|
|
</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>
|
|
)}
|
|
|
|
{success && (
|
|
<div className="mb-6 p-3 bg-success/10 border border-success/20 rounded-xl">
|
|
<p className="text-success text-sm">{success}</p>
|
|
</div>
|
|
)}
|
|
|
|
{modules.length === 0 ? (
|
|
<div className="text-center py-20 bg-dark-light border border-dark-border rounded-[20px]">
|
|
<div className="text-5xl mb-4">📚</div>
|
|
<h3 className="text-white font-semibold text-lg mb-2">Aucun cours</h3>
|
|
<p className="text-white/40 text-sm mb-6">Crée ton premier cours pour commencer.</p>
|
|
<button
|
|
onClick={openNew}
|
|
className="px-6 py-3 gradient-bg text-white font-semibold rounded-xl cursor-pointer"
|
|
>
|
|
Créer un cours
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-8">
|
|
{Object.entries(modulesByWeek)
|
|
.sort(([a], [b]) => Number(a) - Number(b))
|
|
.map(([week, weekModules]) => (
|
|
<div key={week}>
|
|
<h2 className="text-lg font-bold text-white mb-3 flex items-center gap-2">
|
|
<span className="px-2.5 py-1 bg-primary/10 text-primary rounded-lg text-xs font-medium">
|
|
Semaine {week}
|
|
</span>
|
|
<span className="text-white/30 text-xs font-normal">
|
|
{weekModules.length} cours
|
|
</span>
|
|
</h2>
|
|
<div className="space-y-2">
|
|
{weekModules
|
|
.sort((a, b) => a.order_index - b.order_index)
|
|
.map((mod) => (
|
|
<div
|
|
key={mod.id}
|
|
className="bg-dark-light border border-dark-border rounded-xl px-5 py-4 flex items-center justify-between group"
|
|
>
|
|
<div className="flex items-center gap-4 flex-1 min-w-0">
|
|
{/* Grip handle (visuel) */}
|
|
<span className="text-white/15 group-hover:text-white/30 transition-colors">
|
|
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M7 2a2 2 0 10.001 4.001A2 2 0 007 2zm0 6a2 2 0 10.001 4.001A2 2 0 007 8zm0 6a2 2 0 10.001 4.001A2 2 0 007 14zm6-8a2 2 0 10-.001-4.001A2 2 0 0013 6zm0 2a2 2 0 10.001 4.001A2 2 0 0013 8zm0 6a2 2 0 10.001 4.001A2 2 0 0013 14z" />
|
|
</svg>
|
|
</span>
|
|
|
|
{/* Status dot */}
|
|
<span
|
|
className={`w-2.5 h-2.5 rounded-full flex-shrink-0 ${
|
|
mod.is_published ? "bg-success" : "bg-white/20"
|
|
}`}
|
|
/>
|
|
|
|
{/* Info */}
|
|
<div className="min-w-0 flex-1">
|
|
<p className="text-white font-medium text-sm truncate">{mod.title}</p>
|
|
<div className="flex items-center gap-2 mt-0.5">
|
|
{mod.content_type && (
|
|
<span className="text-white/30 text-xs uppercase">
|
|
{contentTypeLabels[mod.content_type] || mod.content_type}
|
|
</span>
|
|
)}
|
|
{mod.duration_minutes && (
|
|
<span className="text-white/20 text-xs">{mod.duration_minutes} min</span>
|
|
)}
|
|
<span className="text-white/20 text-xs">
|
|
#{mod.order_index}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Actions */}
|
|
<div className="flex items-center gap-2 ml-4">
|
|
{/* Toggle publish */}
|
|
<button
|
|
onClick={() => handleTogglePublish(mod)}
|
|
className={`px-2.5 py-1 rounded-lg text-xs font-medium transition-colors cursor-pointer ${
|
|
mod.is_published
|
|
? "bg-success/10 text-success hover:bg-success/20"
|
|
: "bg-white/5 text-white/30 hover:text-white hover:bg-white/10"
|
|
}`}
|
|
>
|
|
{mod.is_published ? "Publié" : "Brouillon"}
|
|
</button>
|
|
|
|
{/* Edit */}
|
|
<button
|
|
onClick={() => openEdit(mod)}
|
|
className="p-2 text-white/30 hover:text-primary transition-colors cursor-pointer rounded-lg hover:bg-primary/5"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
|
|
</svg>
|
|
</button>
|
|
|
|
{/* Delete */}
|
|
{deleteConfirm === mod.id ? (
|
|
<div className="flex items-center gap-1">
|
|
<button
|
|
onClick={() => handleDelete(mod.id)}
|
|
className="px-2 py-1 bg-error/10 text-error rounded-lg text-xs font-medium cursor-pointer hover:bg-error/20"
|
|
>
|
|
Confirmer
|
|
</button>
|
|
<button
|
|
onClick={() => setDeleteConfirm(null)}
|
|
className="px-2 py-1 text-white/30 text-xs cursor-pointer hover:text-white"
|
|
>
|
|
Annuler
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<button
|
|
onClick={() => setDeleteConfirm(mod.id)}
|
|
className="p-2 text-white/30 hover:text-error transition-colors cursor-pointer rounded-lg hover:bg-error/5"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
|
</svg>
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|