Premier commit de la v2 de l'app

2025-07-29 05:15:33 +02:00
parent 2f14898357
commit b593c60ab2
67 changed files with 5003 additions and 388 deletions
@@ -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} />;
+}