Premier commit de la v2 de l'app
This commit is contained in:
UltraLionFr
@@ -0,0 +1,63 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
LayoutDashboard,
|
||||
PlusCircle,
|
||||
TableProperties,
|
||||
User
|
||||
} from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
|
||||
const LINKS = [
|
||||
{ name: "Tableau", href: "/dashboard", icon: LayoutDashboard },
|
||||
{ name: "Profil", href: "/dashboard/profil", icon: User },
|
||||
{ name: "Ajouter", href: "/dashboard/ajouter", icon: PlusCircle },
|
||||
{ name: "Mes Projets", href: "/dashboard/projets", icon: TableProperties },
|
||||
];
|
||||
|
||||
export default function Sidebar() {
|
||||
const pathname = usePathname();
|
||||
|
||||
return (
|
||||
<aside className="flex flex-col w-56 bg-[#0e0e10]/80 backdrop-blur-lg border-r border-white/10">
|
||||
{/* Liens de navigation */}
|
||||
<nav className="flex-1 px-4 py-6 space-y-1">
|
||||
{LINKS.map(({ name, href, icon: Icon }) => {
|
||||
const active = pathname === href;
|
||||
return (
|
||||
<Link
|
||||
key={href}
|
||||
href={href}
|
||||
className={`
|
||||
group flex items-center gap-3 px-3 py-2 text-sm rounded-lg transition
|
||||
${active
|
||||
? "bg-white/10 border-l-4 border-red-500"
|
||||
: "hover:bg-white/10"}
|
||||
`}
|
||||
>
|
||||
<Icon
|
||||
size={18}
|
||||
className={`
|
||||
flex-shrink-0 transition
|
||||
${active
|
||||
? "text-red-500"
|
||||
: "text-white/60 group-hover:text-white"}
|
||||
`}
|
||||
/>
|
||||
<span
|
||||
className={`transition ${
|
||||
active
|
||||
? "text-red-500"
|
||||
: "text-white/60 group-hover:text-white"
|
||||
}`}
|
||||
>
|
||||
{name}
|
||||
</span>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import { ReactNode } from "react";
|
||||
|
||||
type Props = {
|
||||
title: string;
|
||||
value: string | number;
|
||||
icon?: ReactNode;
|
||||
};
|
||||
|
||||
export default function StatCard({ title, value, icon }: Props) {
|
||||
return (
|
||||
<motion.div
|
||||
whileHover={{ translateY: -4, boxShadow: "0 8px 24px rgba(0,0,0,0.4)" }}
|
||||
className="relative rounded-lg bg-white/5 p-6 backdrop-blur
|
||||
ring-1 ring-white/10 transition"
|
||||
>
|
||||
{icon && (
|
||||
<div className="absolute -top-4 right-4 text-4xl opacity-20">
|
||||
{icon}
|
||||
</div>
|
||||
)}
|
||||
<h3 className="text-sm font-medium text-white/70">{title}</h3>
|
||||
<p className="mt-2 text-3xl font-semibold text-white">{value}</p>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,90 @@
|
||||
"use server";
|
||||
|
||||
import { auth } from "@/auth";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { revalidatePath } from "next/cache";
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
export async function createProject(form: FormData) {
|
||||
const session = await auth();
|
||||
if (!session) throw new Error("unauth");
|
||||
|
||||
const currentUser = await prisma.user.findUnique({
|
||||
where: { email: session.user!.email! },
|
||||
});
|
||||
|
||||
const joueur =
|
||||
(form.get("joueur") as string | null)?.trim() ||
|
||||
currentUser?.mcName ||
|
||||
session.user!.name!;
|
||||
|
||||
const coords = form.get("coords")?.toString().trim();
|
||||
const tagsRaw = form.get("tags")?.toString() ?? "";
|
||||
|
||||
const data = {
|
||||
joueur,
|
||||
etat: (form.get("etat") as string) ?? "En cours",
|
||||
monde: (form.get("monde") as string) ?? "Overworld",
|
||||
projet: (form.get("projet") as string).trim(),
|
||||
description: (form.get("description") as string).trim(),
|
||||
coords: coords && coords.length > 0 ? coords : null,
|
||||
tags: tagsRaw
|
||||
.split(",")
|
||||
.map((t) => t.trim())
|
||||
.filter(Boolean),
|
||||
};
|
||||
|
||||
await prisma.project.create({ data });
|
||||
revalidatePath("/dashboard");
|
||||
redirect("/dashboard");
|
||||
}
|
||||
|
||||
export async function updateProject(projectId: string, form: FormData) {
|
||||
const session = await auth();
|
||||
if (!session) throw new Error("unauth");
|
||||
|
||||
const coords = form.get("coords")?.toString().trim();
|
||||
const tagsRaw = form.get("tags")?.toString() ?? "";
|
||||
|
||||
const data = {
|
||||
etat: (form.get("etat") as string),
|
||||
monde: (form.get("monde") as string),
|
||||
projet: (form.get("projet") as string).trim(),
|
||||
description: (form.get("description") as string).trim(),
|
||||
coords: coords && coords.length > 0 ? coords : null,
|
||||
tags: tagsRaw
|
||||
.split(",")
|
||||
.map((t) => t.trim())
|
||||
.filter(Boolean),
|
||||
};
|
||||
|
||||
await prisma.project.update({
|
||||
where: { id: projectId },
|
||||
data,
|
||||
});
|
||||
|
||||
revalidatePath("/dashboard");
|
||||
redirect("/dashboard");
|
||||
}
|
||||
|
||||
export async function updateMinecraftName(form: FormData) {
|
||||
const session = await auth();
|
||||
if (!session) throw new Error("unauth");
|
||||
|
||||
const mcName = (form.get("mcName") as string).trim();
|
||||
if (!/^[A-Za-z0-9_]{3,16}$/.test(mcName)) throw new Error("invalid");
|
||||
|
||||
await prisma.user.upsert({
|
||||
where: { email: session.user!.email! },
|
||||
update: { mcName },
|
||||
create: {
|
||||
email: session.user!.email!,
|
||||
name: session.user!.name,
|
||||
image: session.user!.image,
|
||||
mcName,
|
||||
},
|
||||
});
|
||||
|
||||
revalidatePath("/dashboard");
|
||||
revalidatePath("/");
|
||||
}
|
||||
@@ -0,0 +1,192 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import { Layers3, MapPin, Plus, Tags, User, X } from "lucide-react";
|
||||
import { useSession } from "next-auth/react";
|
||||
import { useState } from "react";
|
||||
import { createProject } from "../actions";
|
||||
|
||||
const PREDEF = ["build", "usine", "spawn"] as const;
|
||||
type TagColor = (typeof PREDEF)[number];
|
||||
|
||||
const palette: Record<TagColor, string> = {
|
||||
build: "bg-emerald-600/90",
|
||||
usine: "bg-orange-600/90",
|
||||
spawn: "bg-fuchsia-700/90",
|
||||
};
|
||||
|
||||
const isValidCoord = (value: string) => /^-?\d*$/.test(value);
|
||||
|
||||
export default function AddProjectForm() {
|
||||
const { data: session } = useSession();
|
||||
const [tags, setTags] = useState<string[]>([]);
|
||||
const [tagInput, setInput] = useState("");
|
||||
|
||||
const [x, setX] = useState("");
|
||||
const [y, setY] = useState("");
|
||||
const [z, setZ] = useState("");
|
||||
|
||||
const addTag = (t: string) => {
|
||||
const val = t.trim().toLowerCase();
|
||||
if (!val || tags.includes(val) || tags.length >= 5) return;
|
||||
setTags([...tags, val]);
|
||||
};
|
||||
|
||||
const del = (t: string) => setTags(tags.filter((x) => x !== t));
|
||||
|
||||
const getTagClass = (t: string) => {
|
||||
return palette[t as TagColor] ?? "bg-gray-600";
|
||||
};
|
||||
|
||||
return (
|
||||
<motion.form
|
||||
action={createProject}
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="max-w-xl mx-auto bg-gray-800/60 rounded-xl shadow-lg p-6 space-y-6"
|
||||
>
|
||||
{/* nom */}
|
||||
<div className="relative">
|
||||
<Layers3 className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" size={18} />
|
||||
<input
|
||||
name="projet"
|
||||
placeholder="Nom du projet"
|
||||
required
|
||||
className="w-full rounded-lg bg-gray-700 py-2 pl-10 pr-3 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* joueur */}
|
||||
{session?.user?.email === "ultralionfr@gmail.com" && (
|
||||
<div className="relative">
|
||||
<User className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" size={18} />
|
||||
<input
|
||||
name="joueur"
|
||||
placeholder="Pseudo Minecraft"
|
||||
required
|
||||
className="w-full rounded-lg bg-gray-700 py-2 pl-10 pr-3 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* coords */}
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
{[
|
||||
{ name: "x", value: x, setValue: setX },
|
||||
{ name: "y", value: y, setValue: setY },
|
||||
{ name: "z", value: z, setValue: setZ },
|
||||
].map(({ name, value, setValue }) => (
|
||||
<div className="relative" key={name}>
|
||||
<MapPin className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" size={16} />
|
||||
<input
|
||||
name={name}
|
||||
placeholder={name.toUpperCase()}
|
||||
value={value}
|
||||
onChange={(e) => {
|
||||
if (isValidCoord(e.target.value)) setValue(e.target.value);
|
||||
}}
|
||||
className="w-full rounded-lg bg-gray-700 py-2 pl-9 pr-3 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Tags */}
|
||||
<div className="space-y-2">
|
||||
<label className="flex items-center gap-1 text-sm text-gray-300">
|
||||
<Tags size={16} /> Tags <span className="text-xs text-gray-400">(max 5)</span>
|
||||
</label>
|
||||
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{tags.map((t) => (
|
||||
<button
|
||||
key={t}
|
||||
type="button"
|
||||
onClick={() => del(t)}
|
||||
className={`rounded-full px-3 py-1 text-xs ${getTagClass(t)} text-white flex items-center gap-1 hover:opacity-80`}
|
||||
>
|
||||
{t} <X size={12} />
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-3">
|
||||
<select
|
||||
onChange={(e) => {
|
||||
addTag(e.target.value);
|
||||
e.target.value = "";
|
||||
}}
|
||||
className="w-full sm:w-1/2 rounded-lg bg-gray-700 py-2 px-3 text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
||||
defaultValue=""
|
||||
>
|
||||
<option value="">Choisir un tag pré-défini</option>
|
||||
{PREDEF.map((t) => (
|
||||
<option key={t}>{t}</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
<div className="relative flex-1">
|
||||
<input
|
||||
value={tagInput}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
onKeyDown={(e) =>
|
||||
e.key === "Enter" && (e.preventDefault(), addTag(tagInput), setInput(""))
|
||||
}
|
||||
placeholder="Ajouter un tag personnalisé"
|
||||
className="w-full rounded-lg bg-gray-700 py-2 pl-3 pr-12 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
addTag(tagInput);
|
||||
setInput("");
|
||||
}}
|
||||
className="absolute right-1 top-1 rounded-lg bg-indigo-500 hover:bg-indigo-600 p-1"
|
||||
>
|
||||
<Plus size={16} className="text-white" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* description */}
|
||||
<textarea
|
||||
name="description"
|
||||
rows={4}
|
||||
placeholder="Description du projet"
|
||||
className="w-full rounded-lg bg-gray-700 p-3 text-white placeholder-gray-400 resize-y focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
||||
/>
|
||||
|
||||
{/* état + monde */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
<select name="etat" className="input-style bg-gray-700 text-white">
|
||||
<option>En cours</option>
|
||||
<option>Terminé</option>
|
||||
<option>Pause</option>
|
||||
</select>
|
||||
<select name="monde" className="input-style bg-gray-700 text-white">
|
||||
<option>Overworld</option>
|
||||
<option>Nether</option>
|
||||
<option>End</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* hidden */}
|
||||
<input type="hidden" name="tags" value={tags.join(",")} />
|
||||
<input type="hidden" name="coords" id="coordsField" value="" />
|
||||
|
||||
{/* submit */}
|
||||
<button
|
||||
type="submit"
|
||||
className="cursor-pointer w-full rounded-lg bg-gradient-to-r from-green-500 to-emerald-500 py-3 text-white font-semibold shadow-md hover:shadow-lg transition duration-300"
|
||||
onClick={(e) => {
|
||||
const form = (e.target as HTMLButtonElement).form!;
|
||||
const coordsField = form.coords as HTMLInputElement;
|
||||
coordsField.value = [form.x.value, form.y.value, form.z.value].filter(Boolean).join(" ");
|
||||
}}
|
||||
>
|
||||
Ajouter le projet
|
||||
</button>
|
||||
</motion.form>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import { auth } from "@/auth";
|
||||
import { redirect } from "next/navigation";
|
||||
import AddProjectForm from "./AddProjectForm";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
export const metadata = { title: "Ajouter un projet | Dashboard" };
|
||||
|
||||
export default async function AddProjectPage() {
|
||||
const session = await auth();
|
||||
if (!session) redirect("/");
|
||||
|
||||
return (
|
||||
<section className="mx-auto max-w-xl px-4 py-10">
|
||||
<div className="">
|
||||
<h1 className="text-xl font-semibold text-red-400">
|
||||
Ajouter un projet
|
||||
</h1><br />
|
||||
<AddProjectForm />
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
import Providers from "@/app/providers";
|
||||
import Sidebar from "./Sidebar";
|
||||
|
||||
export const metadata = { title: "Dashboard | Aystone" };
|
||||
|
||||
export default function DashboardLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<Providers>
|
||||
<div className="flex min-h-screen bg-[#0e0e10] text-white">
|
||||
<Sidebar />
|
||||
<main className="flex-1 p-6">{children}</main>
|
||||
</div>
|
||||
</Providers>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
import { auth } from "@/auth";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { Info } from "lucide-react";
|
||||
import { redirect } from "next/navigation";
|
||||
import StatCard from "./StatCard";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
export const revalidate = 0;
|
||||
|
||||
export default async function DashboardHome() {
|
||||
const session = await auth();
|
||||
if (!session) return redirect("/");
|
||||
|
||||
const user = await prisma.user.findUnique({
|
||||
where: { email: session.user!.email! },
|
||||
});
|
||||
|
||||
const joueur = user?.mcName ?? session.user!.name!;
|
||||
|
||||
const [projectCount, userCount] = await Promise.all([
|
||||
prisma.project.count({ where: { joueur } }),
|
||||
prisma.user.count(),
|
||||
]);
|
||||
|
||||
return (
|
||||
<div className="p-6 space-y-8">
|
||||
<h1 className="text-4xl font-bold tracking-tight">Tableau de bord</h1>
|
||||
|
||||
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4 flex items-start gap-3">
|
||||
<Info className="h-6 w-6 text-blue-600" />
|
||||
<div>
|
||||
<h2 className="font-semibold text-blue-800">Important</h2>
|
||||
<p className="text-blue-700">
|
||||
Pensez à compléter votre profil avec votre pseudo Minecraft pour pouvoir créer et associer vos projets à votre compte.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||||
<StatCard title="Mes projets" value={projectCount} />
|
||||
<StatCard title="Membres inscrits" value={userCount} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
import { auth } from "@/auth";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import Image from "next/image";
|
||||
import { redirect } from "next/navigation";
|
||||
import { updateMinecraftName } from "../actions";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
export const metadata = { title: "Profil | Dashboard" };
|
||||
|
||||
export default async function ProfilPage() {
|
||||
const session = await auth();
|
||||
if (!session) redirect("/");
|
||||
|
||||
const user = await prisma.user.findUnique({
|
||||
where: { email: session.user!.email! },
|
||||
});
|
||||
|
||||
return (
|
||||
<section className="mx-auto max-w-lg px-4 py-10">
|
||||
<h1 className="mb-6 text-2xl font-bold">Profil</h1>
|
||||
|
||||
<div className="card space-y-8">
|
||||
{/* avatar Discord */}
|
||||
<div className="flex items-center gap-4">
|
||||
<Image
|
||||
src={session.user?.image ?? ""}
|
||||
alt=""
|
||||
width={56}
|
||||
height={56}
|
||||
className="rounded-full"
|
||||
/>
|
||||
<div>
|
||||
<p className="text-lg font-semibold">{session.user?.name}</p>
|
||||
<p className="text-sm text-white/60">{session.user?.email}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* pseudo Minecraft */}
|
||||
<form action={updateMinecraftName} className="space-y-4">
|
||||
<label className="mb-1 block text-sm text-white/70">
|
||||
Pseudo Minecraft
|
||||
</label>
|
||||
|
||||
<div className="relative w-full max-w-md">
|
||||
{user?.mcName && (
|
||||
<Image
|
||||
src={`https://mc-heads.net/avatar/${user.mcName}/28`}
|
||||
alt=""
|
||||
width={28}
|
||||
height={28}
|
||||
className="absolute left-2 top-1/2 -translate-y-1/2 rounded"
|
||||
unoptimized
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* padding-left 48 px pour laisser la place à l’avatar */}
|
||||
<input
|
||||
name="mcName"
|
||||
defaultValue={user?.mcName ?? ""}
|
||||
placeholder="Pseudo MC"
|
||||
required
|
||||
pattern="[A-Za-z0-9_]{3,16}"
|
||||
className="input pl-12"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="rounded bg-indigo-600 px-4 py-2 text-sm font-medium hover:bg-indigo-700"
|
||||
>
|
||||
Enregistrer
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,106 @@
|
||||
"use client";
|
||||
|
||||
import { SafeProject } from "@/lib/validators/project";
|
||||
import { motion } from "framer-motion";
|
||||
import {
|
||||
BadgeCheck,
|
||||
FileText,
|
||||
Globe,
|
||||
MapPin,
|
||||
Pencil,
|
||||
Tag,
|
||||
} from "lucide-react";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function UserProjectsTable({ projects }: { projects: SafeProject[] }) {
|
||||
const headers = [
|
||||
{ label: "Projet", icon: FileText },
|
||||
{ label: "État", icon: BadgeCheck },
|
||||
{ label: "Monde", icon: Globe },
|
||||
{ label: "Coordonnées", icon: MapPin },
|
||||
{ label: "Tags", icon: Tag },
|
||||
{ label: "Actions", icon: Pencil },
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="mx-auto max-w-6xl px-4 py-10">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.4 }}
|
||||
className="flex items-center justify-between mb-6"
|
||||
>
|
||||
<h1 className="text-2xl font-bold text-white">Mes projets</h1>
|
||||
<Link
|
||||
href="/dashboard/ajouter"
|
||||
className="inline-flex items-center gap-2 rounded bg-green-600 px-3 py-1.5 text-sm font-medium hover:bg-green-700"
|
||||
>
|
||||
➕ Ajouter un projet
|
||||
</Link>
|
||||
</motion.div>
|
||||
|
||||
{projects.length === 0 ? (
|
||||
<p className="mt-6 text-center text-white/60">Vous n’avez encore créé aucun projet.</p>
|
||||
) : (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.4, delay: 0.1 }}
|
||||
className="overflow-x-auto rounded-t-2xl"
|
||||
>
|
||||
<table className="w-full border-collapse text-left text-[13px]">
|
||||
<thead>
|
||||
<tr className="bg-slate-800 text-amber-50 [&>th:first-child]:rounded-tl-xl [&>th:last-child]:rounded-tr-xl">
|
||||
{headers.map(({ label, icon: Icon }) => (
|
||||
<th key={label} className="px-3 py-2 font-semibold">
|
||||
<div className="flex items-center gap-1">
|
||||
<Icon size={14} className="opacity-70" />
|
||||
{label}
|
||||
</div>
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{projects.map((p) => (
|
||||
<tr key={p.id} className="bg-[#0f111c]">
|
||||
<td className="px-3 py-2">{p.projet}</td>
|
||||
<td className="px-3 py-2">
|
||||
<span className={`rounded-full px-2 py-0.5 text-[11px] font-medium ${
|
||||
p.etat === "En cours" ? "bg-yellow-400/90 text-black" :
|
||||
p.etat === "Terminé" ? "bg-green-600/90" : "bg-red-600/90"
|
||||
}`}>{p.etat}</span>
|
||||
</td>
|
||||
<td className="px-3 py-2">
|
||||
<span className={`rounded-full px-2 py-0.5 text-[11px] ${
|
||||
p.monde === "Overworld" ? "bg-emerald-700/80" :
|
||||
p.monde === "Nether" ? "bg-red-700/80" : "bg-violet-800/90"
|
||||
}`}>{p.monde}</span>
|
||||
</td>
|
||||
<td className="px-3 py-2 font-mono tabular-nums">{p.coords ?? "—"}</td>
|
||||
<td className="px-3 py-2">
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{p.tags.map((t, i) => (
|
||||
<span key={t + i} className="rounded-full bg-white/10 px-2 py-0.5 text-xs">
|
||||
{t}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-3 py-2">
|
||||
<Link
|
||||
href={`/dashboard/projets/${p.id}`}
|
||||
className="inline-flex items-center gap-1 rounded px-2 py-1 text-xs text-indigo-400 hover:bg-white/10"
|
||||
>
|
||||
<Pencil size={12} /> Modifier
|
||||
</Link>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</motion.div>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,165 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import { Layers3, MapPin, Tags } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { Project } from "../../../../components/ProjectsTable";
|
||||
import { updateProject } from "../../actions";
|
||||
|
||||
type Props = {
|
||||
project: Project;
|
||||
};
|
||||
|
||||
/** Formulaire client pour éditer un projet existant */
|
||||
export default function EditProjectForm({ project }: Props) {
|
||||
const [tags, setTags] = useState<string[]>(project.tags ?? []);
|
||||
const [customTag, setCustomTag] = useState("");
|
||||
|
||||
const PREDEF = ["build", "usine", "spawn"] as const;
|
||||
|
||||
const addTag = (t: string) => {
|
||||
const val = t.trim().toLowerCase();
|
||||
if (!val || tags.includes(val) || tags.length >= 5) return;
|
||||
setTags([...tags, val]);
|
||||
};
|
||||
|
||||
const removeTag = (t: string) => {
|
||||
setTags(tags.filter((x) => x !== t));
|
||||
};
|
||||
|
||||
const coordsParts = (project.coords ?? "").split(" ");
|
||||
|
||||
return (
|
||||
<motion.form
|
||||
action={(formData: FormData) => updateProject(project.id!, formData)}
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="space-y-6"
|
||||
>
|
||||
{/* Titre du projet */}
|
||||
<div className="relative">
|
||||
<Layers3 size={18} className="absolute left-3 top-3 text-white/40" />
|
||||
<input
|
||||
name="projet"
|
||||
defaultValue={project.projet}
|
||||
placeholder="Titre du projet"
|
||||
required
|
||||
className="input pl-10"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Coordonnées X Y Z */}
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
{["X", "Y", "Z"].map((axis, idx) => (
|
||||
<div key={axis} className="relative">
|
||||
<MapPin size={16} className="absolute left-3 top-3 text-white/40" />
|
||||
<input
|
||||
name={axis.toLowerCase()}
|
||||
defaultValue={coordsParts[idx] ?? ""}
|
||||
placeholder={axis}
|
||||
className="input pl-10"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<textarea
|
||||
name="description"
|
||||
defaultValue={project.description}
|
||||
rows={4}
|
||||
placeholder="Description détaillée"
|
||||
className="input w-full resize-y"
|
||||
/>
|
||||
|
||||
{/* État & Monde */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<select name="etat" defaultValue={project.etat} className="input">
|
||||
<option>En cours</option>
|
||||
<option>Terminé</option>
|
||||
<option>Pause</option>
|
||||
</select>
|
||||
<select name="monde" defaultValue={project.monde} className="input">
|
||||
<option>Overworld</option>
|
||||
<option>Nether</option>
|
||||
<option>End</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Tags */}
|
||||
<div className="space-y-2">
|
||||
<label className="flex items-center gap-2 text-sm text-white/70">
|
||||
<Tags size={16} /> Tags (max 5)
|
||||
</label>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{tags.map((t) => (
|
||||
<button
|
||||
key={t}
|
||||
type="button"
|
||||
onClick={() => removeTag(t)}
|
||||
className="rounded-full bg-slate-700/70 px-2 py-0.5 text-xs hover:bg-red-600/80"
|
||||
>
|
||||
{t} ✕
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<select
|
||||
onChange={(e) => {
|
||||
addTag(e.target.value);
|
||||
e.target.value = "";
|
||||
}}
|
||||
className="input flex-1"
|
||||
defaultValue=""
|
||||
>
|
||||
<option value="">Tag prédéfini</option>
|
||||
{PREDEF.map((t) => (
|
||||
<option key={t}>{t}</option>
|
||||
))}
|
||||
</select>
|
||||
<input
|
||||
value={customTag}
|
||||
onChange={(e) => setCustomTag(e.target.value)}
|
||||
onKeyDown={(e) =>
|
||||
e.key === "Enter" &&
|
||||
(e.preventDefault(), addTag(customTag), setCustomTag(""))
|
||||
}
|
||||
placeholder="Ajouter tag..."
|
||||
className="input flex-1"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
addTag(customTag);
|
||||
setCustomTag("");
|
||||
}}
|
||||
className="rounded bg-indigo-600 px-4 py-2 text-sm hover:bg-indigo-700"
|
||||
>
|
||||
Ajouter
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Champs cachés */}
|
||||
<input type="hidden" name="tags" value={tags.join(",")} />
|
||||
<input type="hidden" name="coords" value="" />
|
||||
|
||||
{/* Bouton de soumission */}
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full rounded-full bg-gradient-to-r from-green-500 to-emerald-600 py-2.5 font-semibold shadow hover:brightness-110"
|
||||
onClick={(e) => {
|
||||
const f = (e.target as HTMLButtonElement).form!;
|
||||
const x = (f.x as HTMLInputElement).value;
|
||||
const y = (f.y as HTMLInputElement).value;
|
||||
const z = (f.z as HTMLInputElement).value;
|
||||
(f.coords as HTMLInputElement).value = [x, y, z]
|
||||
.filter(Boolean)
|
||||
.join(" ");
|
||||
}}
|
||||
>
|
||||
Mettre à jour le projet
|
||||
</button>
|
||||
</motion.form>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
import { auth } from "@/auth";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { notFound, redirect } from "next/navigation";
|
||||
import { z } from "zod";
|
||||
import EditProjectForm from "./EditProjectForm";
|
||||
|
||||
type Props = { params: { id: string } };
|
||||
|
||||
// Définition stricte du schéma
|
||||
const ProjectSchema = z.object({
|
||||
id: z.string(),
|
||||
joueur: z.string(),
|
||||
projet: z.string(),
|
||||
description: z.string(),
|
||||
coords: z.string().nullable().transform((val) => val ?? ""),
|
||||
tags: z.string().array(),
|
||||
etat: z.enum(["En cours", "Terminé", "Pause"]),
|
||||
monde: z.enum(["Overworld", "Nether", "End"]),
|
||||
createdAt: z.date(),
|
||||
});
|
||||
|
||||
export default async function EditProjectPage({ params }: Props) {
|
||||
const session = await auth();
|
||||
if (!session) redirect("/");
|
||||
|
||||
const data = await prisma.project.findUnique({
|
||||
where: { id: params.id },
|
||||
});
|
||||
|
||||
if (!data) notFound();
|
||||
|
||||
// ✅ Cast via zod
|
||||
const project = ProjectSchema.parse(data);
|
||||
|
||||
return (
|
||||
<section className="mx-auto max-w-xl px-4 py-10">
|
||||
<h1 className="text-2xl font-bold mb-6">Modifier le projet</h1>
|
||||
<EditProjectForm project={project} />
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
import { auth } from "@/auth";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { redirect } from "next/navigation";
|
||||
import { z } from "zod";
|
||||
import UserProjectsTable from "./UserProjectsTable";
|
||||
|
||||
// Définition stricte du schéma
|
||||
const ProjectSchema = z.object({
|
||||
id: z.string(),
|
||||
joueur: z.string(),
|
||||
projet: z.string(),
|
||||
description: z.string(),
|
||||
coords: z.string().nullable(),
|
||||
tags: z.string().array(),
|
||||
etat: z.enum(["En cours", "Terminé", "Pause"]),
|
||||
monde: z.enum(["Overworld", "Nether", "End"]),
|
||||
createdAt: z.date(),
|
||||
});
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
export default async function UserProjectsPage() {
|
||||
const session = await auth();
|
||||
if (!session) redirect("/");
|
||||
|
||||
const user = await prisma.user.findUnique({
|
||||
where: { email: session.user.email! },
|
||||
});
|
||||
|
||||
const joueur = user?.mcName ?? session.user.name!;
|
||||
|
||||
const projectsRaw = await prisma.project.findMany({
|
||||
where: { joueur },
|
||||
orderBy: { createdAt: "desc" },
|
||||
});
|
||||
|
||||
// ✅ Valide les projets pour forcer le bon typage
|
||||
const projects = projectsRaw.map((p) => ProjectSchema.parse(p));
|
||||
|
||||
return <UserProjectsTable projects={projects} />;
|
||||
}
|
||||
Reference in New Issue
Block a user