Initial commit: WaMarket MVP

Marketplace inversée (Next.js 16 App Router + Supabase Cloud) : auth,
schéma + RLS, publication de besoins avec upload d'images, feed avec
filtres, offres, acceptation via RPC, messagerie temps réel,
dashboards, et Dockerfile pour déploiement Coolify.

app/needs/[id]/loading.tsx

@@ -0,0 +1,11 @@
+export default function Loading() {
+  return (
+    <div className="mx-auto max-w-2xl px-4 py-8 sm:px-6 sm:py-10">
+      <div className="h-5 w-24 animate-pulse rounded-md bg-muted" />
+      <div className="mt-3 h-8 w-3/4 animate-pulse rounded-md bg-muted" />
+      <div className="mt-2 h-5 w-32 animate-pulse rounded-md bg-muted" />
+      <div className="mt-6 h-32 w-32 animate-pulse rounded-md bg-muted" />
+      <div className="mt-6 h-24 w-full animate-pulse rounded-md bg-muted" />
+    </div>
+  );
+}

app/needs/[id]/page.tsx

@@ -0,0 +1,155 @@
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import Image from "next/image";
+import { createClient } from "@/lib/supabase/server";
+import { getCurrentUser } from "@/lib/dal";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { OfferForm } from "@/components/offers/offer-form";
+import { OfferList } from "@/components/offers/offer-list";
+
+export default async function NeedDetailPage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+  const supabase = await createClient();
+  const user = await getCurrentUser();
+
+  const { data: need } = await supabase
+    .from("needs")
+    .select(
+      "id, title, description, city, region, budget_min, budget_max, status, author_id, categories(name), need_images(storage_path, position)"
+    )
+    .eq("id", id)
+    .single();
+
+  if (!need) {
+    notFound();
+  }
+
+  const images = [...(need.need_images ?? [])].sort(
+    (a, b) => a.position - b.position
+  );
+  const isOwner = user?.id === need.author_id;
+  const category = Array.isArray(need.categories)
+    ? need.categories[0]
+    : need.categories;
+
+  const { data: offers } = await supabase
+    .from("offers")
+    .select(
+      "id, title, description, price, status, merchant_id, profiles(full_name), offer_images(storage_path, position)"
+    )
+    .eq("need_id", id)
+    .order("created_at", { ascending: true });
+
+  const offerList = offers ?? [];
+  const myOffer = user ? offerList.find((o) => o.merchant_id === user.id) : undefined;
+
+  function getOfferImageUrl(path: string) {
+    return supabase.storage.from("offer-images").getPublicUrl(path).data
+      .publicUrl;
+  }
+
+  return (
+    <div className="mx-auto max-w-2xl px-4 py-8 sm:px-6 sm:py-10">
+      <div className="flex items-center gap-2">
+        {category?.name && <Badge variant="secondary">{category.name}</Badge>}
+        <Badge
+          variant={need.status === "open" ? "default" : "outline"}
+        >
+          {need.status}
+        </Badge>
+      </div>
+      <h1 className="mt-3 text-2xl font-semibold">{need.title}</h1>
+      <p className="mt-1 text-muted-foreground">
+        {need.city}
+        {need.region ? `, ${need.region}` : ""}
+      </p>
+      {(need.budget_min || need.budget_max) && (
+        <p className="mt-1 text-sm">
+          Budget : {need.budget_min ?? "?"}€ – {need.budget_max ?? "?"}€
+        </p>
+      )}
+
+      {images.length > 0 && (
+        <div className="mt-6 flex flex-wrap gap-3">
+          {images.map((img) => {
+            const { data } = supabase.storage
+              .from("need-images")
+              .getPublicUrl(img.storage_path);
+            return (
+              <div
+                key={img.storage_path}
+                className="relative h-32 w-32 overflow-hidden rounded-md border"
+              >
+                <Image
+                  src={data.publicUrl}
+                  alt={need.title}
+                  fill
+                  className="object-cover"
+                />
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      <p className="mt-6 whitespace-pre-wrap">{need.description}</p>
+
+      <div className="mt-10 border-t pt-6">
+        {isOwner ? (
+          <>
+            <h2 className="text-lg font-semibold">Offres reçues</h2>
+            <OfferList
+              offers={offerList}
+              needId={need.id}
+              needStatus={need.status}
+              isOwner
+              getImageUrl={getOfferImageUrl}
+            />
+          </>
+        ) : !user ? (
+          <p className="text-sm text-muted-foreground">
+            <Link href="/auth/login" className="underline">
+              Connecte-toi
+            </Link>{" "}
+            pour proposer une offre sur ce besoin.
+          </p>
+        ) : myOffer ? (
+          <>
+            <h2 className="text-lg font-semibold">Ton offre</h2>
+            <OfferList
+              offers={[myOffer]}
+              needId={need.id}
+              needStatus={need.status}
+              isOwner={false}
+              getImageUrl={getOfferImageUrl}
+            />
+          </>
+        ) : need.status === "open" ? (
+          <>
+            <h2 className="text-lg font-semibold">Proposer une offre</h2>
+            <div className="mt-4">
+              <OfferForm needId={need.id} />
+            </div>
+          </>
+        ) : (
+          <p className="text-sm text-muted-foreground">
+            Ce besoin n&apos;accepte plus d&apos;offres.
+          </p>
+        )}
+      </div>
+
+      {isOwner && (
+        <p className="mt-4 text-xs text-muted-foreground">
+          <Button asChild variant="link" className="h-auto p-0 text-xs">
+            <Link href="/messages">Voir mes conversations</Link>
+          </Button>
+        </p>
+      )}
+    </div>
+  );
+}

app/needs/loading.tsx

@@ -0,0 +1,13 @@
+export default function Loading() {
+  return (
+    <div className="mx-auto max-w-5xl px-4 py-8 sm:px-6 sm:py-10">
+      <div className="h-8 w-40 animate-pulse rounded-md bg-muted" />
+      <div className="mt-6 h-10 w-full animate-pulse rounded-md bg-muted" />
+      <div className="mt-8 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        {Array.from({ length: 6 }).map((_, i) => (
+          <div key={i} className="h-56 animate-pulse rounded-xl bg-muted" />
+        ))}
+      </div>
+    </div>
+  );
+}

app/needs/new/loading.tsx

@@ -0,0 +1,13 @@
+export default function Loading() {
+  return (
+    <div className="mx-auto max-w-2xl px-4 py-8 sm:px-6 sm:py-10">
+      <div className="h-8 w-56 animate-pulse rounded-md bg-muted" />
+      <div className="mt-2 h-5 w-72 animate-pulse rounded-md bg-muted" />
+      <div className="mt-8 flex flex-col gap-5">
+        {Array.from({ length: 4 }).map((_, i) => (
+          <div key={i} className="h-10 w-full animate-pulse rounded-md bg-muted" />
+        ))}
+      </div>
+    </div>
+  );
+}

app/needs/new/page.tsx

@@ -0,0 +1,21 @@
+import { verifySession } from "@/lib/dal";
+import { getCategories } from "@/lib/data/categories";
+import { NeedForm } from "@/components/needs/need-form";
+
+export default async function NewNeedPage() {
+  await verifySession();
+  const categories = await getCategories();
+
+  return (
+    <div className="mx-auto max-w-2xl px-4 py-8 sm:px-6 sm:py-10">
+      <h1 className="text-2xl font-semibold">Publier un besoin</h1>
+      <p className="mt-1 text-muted-foreground">
+        Décris ce que tu cherches, les commerçants pourront te faire des
+        offres.
+      </p>
+      <div className="mt-8">
+        <NeedForm categories={categories} />
+      </div>
+    </div>
+  );
+}

app/needs/page.tsx

@@ -0,0 +1,118 @@
+import Link from "next/link";
+import { createClient } from "@/lib/supabase/server";
+import { getCategories } from "@/lib/data/categories";
+import { NeedFilters } from "@/components/needs/need-filters";
+import { NeedCard } from "@/components/needs/need-card";
+import { Button } from "@/components/ui/button";
+
+const PAGE_SIZE = 12;
+
+export default async function NeedsFeedPage({
+  searchParams,
+}: {
+  searchParams: Promise<{
+    q?: string;
+    city?: string;
+    category?: string;
+    page?: string;
+  }>;
+}) {
+  const { q, city, category, page } = await searchParams;
+  const currentPage = Math.max(1, Number(page) || 1);
+  const from = (currentPage - 1) * PAGE_SIZE;
+  const to = from + PAGE_SIZE - 1;
+
+  const supabase = await createClient();
+  const categories = await getCategories();
+
+  let query = supabase
+    .from("needs")
+    .select(
+      "id, title, city, region, budget_min, budget_max, created_at, categories(name), need_images(storage_path, position)",
+      { count: "exact" }
+    )
+    .eq("status", "open")
+    .order("created_at", { ascending: false })
+    .range(from, to);
+
+  if (q) {
+    query = query.ilike("title", `%${q}%`);
+  }
+  if (city) {
+    query = query.ilike("city", `%${city}%`);
+  }
+  if (category) {
+    const matchedCategory = categories.find((c) => c.slug === category);
+    if (matchedCategory) {
+      query = query.eq("category_id", matchedCategory.id);
+    }
+  }
+
+  const { data: needs, count } = await query;
+  const total = count ?? 0;
+  const hasNextPage = to + 1 < total;
+
+  function getImageUrl(path: string) {
+    return supabase.storage.from("need-images").getPublicUrl(path).data
+      .publicUrl;
+  }
+
+  return (
+    <div className="mx-auto max-w-5xl px-4 py-8 sm:px-6 sm:py-10">
+      <div className="flex flex-col items-start justify-between gap-3 sm:flex-row sm:items-center">
+        <h1 className="text-2xl font-semibold">Besoins</h1>
+        <Button asChild>
+          <Link href="/needs/new">Publier un besoin</Link>
+        </Button>
+      </div>
+
+      <div className="mt-6">
+        <NeedFilters
+          categories={categories}
+          defaultValues={{ category, city, q }}
+        />
+      </div>
+
+      {needs && needs.length > 0 ? (
+        <div className="mt-8 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+          {needs.map((need) => (
+            <NeedCard key={need.id} need={need} getImageUrl={getImageUrl} />
+          ))}
+        </div>
+      ) : (
+        <p className="mt-12 text-center text-muted-foreground">
+          Aucun besoin ne correspond à ta recherche.
+        </p>
+      )}
+
+      {(currentPage > 1 || hasNextPage) && (
+        <div className="mt-8 flex justify-center gap-2">
+          {currentPage > 1 && (
+            <Button asChild variant="outline">
+              <Link
+                href={{
+                  pathname: "/needs",
+                  query: { q, city, category, page: currentPage - 1 },
+                }}
+              >
+                Précédent
+              </Link>
+            </Button>
+          )}
+          {hasNextPage && (
+            <Button asChild variant="outline">
+              <Link
+                href={{
+                  pathname: "/needs",
+                  query: { q, city, category, page: currentPage + 1 },
+                }}
+              >
+                Suivant
+              </Link>
+            </Button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}