feat(catalog): OEM oyları detay sayfasına taşındı + topluluk muadil önerileri

Parça tablosu sadeleşti: Uyum ve Adet kolonları kalktı, liste açılışındaki
toplu istekler (/oem-votes/lookup ve /p/matched) tamamen kaldırıldı. Her OEM
kodu artık koşulsuz /dashboard/oem/$code'a linklenir — P eşleşmesi olmayan
kodda da sayfa dolu: topluluk oyu kartı, muadil önerileri ve ters katalog.

OEM detay sayfası: OemVoteCard (uyumlu/uyumsuz, sayaçlar, puan toast'ı,
puanlama özeti + Parça Uzmanları linki) ve OemSuggestionsSection — eşleşme
bulunamayan kodlar için kullanıcıdan marka + parça kodu önerisi toplar.
Öneriler oem_suggestions tablosunda (kullanıcı+kod+normalize öneri başına
tek satır, ON CONFLICT yutulur), markaya+normalize koda göre gruplanıp
"× N kullanıcı" rozetiyle listelenir; önerilen kod kendi detayına linklenir.
Şimdilik öneri puan kazandırmaz; status kolonu moderasyon kancası.

API: oem-suggestions modülü (POST 10/dk throttle, GET ?code=), migration
0016_oem_suggestions. Eski tablo-içi OemVoteButtons bileşeni silindi.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

apps/web/src/components/catalog/__tests__/oem-suggestions-section.test.tsx

@@ -0,0 +1,102 @@
+import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+const captureMock = vi.fn();
+const toastSuccessMock = vi.fn();
+
+vi.mock("@/lib/posthog", () => ({
+  capture: (...args: unknown[]) => captureMock(...args),
+}));
+
+vi.mock("@/lib/api-client", () => ({
+  api: {
+    post: vi.fn().mockResolvedValue({}),
+    get: vi.fn().mockResolvedValue({}),
+  },
+}));
+
+vi.mock("@/lib/toast", () => ({
+  toast: {
+    success: (...args: unknown[]) => toastSuccessMock(...args),
+    error: vi.fn(),
+    info: vi.fn(),
+    warning: vi.fn(),
+  },
+}));
+
+vi.mock("@tanstack/react-router", () => ({
+  Link: ({
+    children,
+    to,
+    params,
+  }: { children: React.ReactNode; to: string; params?: { code: string } }) => (
+    <a href={params ? to.replace("$code", params.code) : to}>{children}</a>
+  ),
+}));
+
+import { api } from "@/lib/api-client";
+import { OemSuggestionsSection } from "../oem-suggestions-section";
+
+beforeEach(() => {
+  captureMock.mockClear();
+  toastSuccessMock.mockClear();
+  vi.mocked(api.get).mockReset().mockResolvedValue({ suggestions: [] });
+  vi.mocked(api.post).mockReset().mockResolvedValue({});
+});
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("OemSuggestionsSection", () => {
+  it("lists aggregated suggestions with supporter counts", async () => {
+    vi.mocked(api.get).mockResolvedValue({
+      suggestions: [
+        { brand: "Bosch", code: "0 986 478 123", count: 3, mine: true },
+        { brand: "TRW", code: "DF4823", count: 1, mine: false },
+      ],
+    });
+
+    render(<OemSuggestionsSection oemCode="8V0615423E" />);
+
+    await waitFor(() => {
+      expect(api.get).toHaveBeenCalledWith("/oem-suggestions?code=8V0615423E");
+      expect(screen.getByText("Bosch")).toBeInTheDocument();
+    });
+    expect(screen.getByRole("link", { name: "0 986 478 123" })).toBeInTheDocument();
+    expect(screen.getByText("sizin öneriniz")).toBeInTheDocument();
+  });
+
+  it("submits a brand + code suggestion and refreshes the list", async () => {
+    vi.mocked(api.post).mockResolvedValue({
+      created: true,
+      suggestions: [{ brand: "Valeo", code: "PHC123", count: 1, mine: true }],
+    });
+
+    render(<OemSuggestionsSection oemCode="X1" />);
+    await waitFor(() => expect(api.get).toHaveBeenCalled());
+
+    fireEvent.click(screen.getByRole("button", { name: /Muadil öner/ }));
+    fireEvent.change(screen.getByPlaceholderText("Marka (ör. Bosch)"), {
+      target: { value: "Valeo" },
+    });
+    fireEvent.change(screen.getByPlaceholderText("Parça kodu"), {
+      target: { value: "PHC123" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: "Gönder" }));
+
+    await waitFor(() => {
+      expect(api.post).toHaveBeenCalledWith("/oem-suggestions", {
+        oemCode: "X1",
+        brand: "Valeo",
+        suggestedCode: "PHC123",
+      });
+      expect(toastSuccessMock).toHaveBeenCalled();
+      expect(captureMock).toHaveBeenCalledWith(
+        "oem_suggestion_submitted",
+        expect.objectContaining({ oem_code: "X1", brand: "Valeo", created: true }),
+      );
+      expect(screen.getByText("Valeo")).toBeInTheDocument();
+    });
+  });
+});

apps/web/src/components/catalog/__tests__/oem-vote-card.test.tsx

@@ -0,0 +1,100 @@
+import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+const captureMock = vi.fn();
+const toastSuccessMock = vi.fn();
+
+vi.mock("@/lib/posthog", () => ({
+  capture: (...args: unknown[]) => captureMock(...args),
+}));
+
+vi.mock("@/lib/api-client", () => ({
+  api: {
+    post: vi.fn().mockResolvedValue({}),
+    get: vi.fn().mockResolvedValue({}),
+  },
+}));
+
+vi.mock("@/lib/toast", () => ({
+  toast: {
+    success: (...args: unknown[]) => toastSuccessMock(...args),
+    error: vi.fn(),
+    info: vi.fn(),
+    warning: vi.fn(),
+  },
+}));
+
+vi.mock("@tanstack/react-router", () => ({
+  Link: ({ children, to }: { children: React.ReactNode; to: string }) => (
+    <a href={to}>{children}</a>
+  ),
+}));
+
+import { api } from "@/lib/api-client";
+import { OemVoteCard } from "../oem-vote-card";
+
+beforeEach(() => {
+  captureMock.mockClear();
+  toastSuccessMock.mockClear();
+  vi.mocked(api.post).mockReset().mockResolvedValue({});
+});
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("OemVoteCard", () => {
+  it("loads the summary for the code and shows the counts", async () => {
+    vi.mocked(api.post).mockResolvedValue({
+      votes: { "8V0615423E": { compatible: 4, incompatible: 1, myVote: "compatible" } },
+    });
+
+    render(<OemVoteCard oemCode="8V0615423E" />);
+
+    const upButton = screen.getByRole("button", { name: /Uyumlu/ });
+    const downButton = screen.getByRole("button", { name: /Uyumsuz/ });
+    await waitFor(() => {
+      expect(api.post).toHaveBeenCalledWith("/oem-votes/lookup", { codes: ["8V0615423E"] });
+      expect(upButton.textContent).toContain("4");
+      expect(downButton.textContent).toContain("1");
+    });
+    expect(upButton).toHaveAttribute("aria-pressed", "true");
+  });
+
+  it("casts a vote, updates the counts and reports the points", async () => {
+    const postMock = vi.mocked(api.post);
+    postMock.mockImplementation((path: string) => {
+      if (path === "/oem-votes") {
+        return Promise.resolve({
+          oemCode: "X1",
+          myVote: "incompatible",
+          counts: { compatible: 0, incompatible: 1 },
+          pointsAwarded: 3,
+          correct: true,
+          isNew: true,
+        });
+      }
+      return Promise.resolve({ votes: {} });
+    });
+
+    render(<OemVoteCard oemCode="X1" />);
+
+    const downButton = screen.getByRole("button", { name: /Uyumsuz/ });
+    await waitFor(() => expect(downButton).toBeEnabled());
+    fireEvent.click(downButton);
+
+    await waitFor(() => {
+      expect(postMock).toHaveBeenCalledWith("/oem-votes", {
+        oemCode: "X1",
+        vote: "incompatible",
+      });
+      expect(toastSuccessMock).toHaveBeenCalledWith("+3 puan kazandınız!", expect.anything());
+      expect(captureMock).toHaveBeenCalledWith(
+        "oem_vote_cast",
+        expect.objectContaining({ oem_code: "X1", vote: "incompatible", surface: "oem_detail" }),
+      );
+    });
+    expect(downButton.textContent).toContain("1");
+    expect(downButton).toHaveAttribute("aria-pressed", "true");
+  });
+});

apps/web/src/components/catalog/oem-suggestions-section.tsx

@@ -0,0 +1,158 @@
+import { api } from "@/lib/api-client";
+import { capture } from "@/lib/posthog";
+import { toast } from "@/lib/toast";
+import { Badge, Button, Input, Skeleton } from "@sase/ui";
+import { Link } from "@tanstack/react-router";
+import { Plus, Users } from "lucide-react";
+import { useEffect, useState } from "react";
+
+export interface AggregatedSuggestion {
+  brand: string;
+  code: string;
+  count: number;
+  mine: boolean;
+}
+
+// Topluluk muadil önerileri: P kataloğunda eşleşmesi olmayan (ya da eksik
+// kalan) OEM kodları için parça satıcılarından marka + kod toplar. Aynı
+// öneriyi veren kullanıcı sayısı rozetle gösterilir; önerilen kod kendi OEM
+// detay sayfasına linklenir.
+export function OemSuggestionsSection({ oemCode }: { oemCode: string }) {
+  const [suggestions, setSuggestions] = useState<AggregatedSuggestion[] | null>(null);
+  const [formOpen, setFormOpen] = useState(false);
+  const [brand, setBrand] = useState("");
+  const [code, setCode] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    setSuggestions(null);
+    api
+      .get<{ suggestions: AggregatedSuggestion[] }>(
+        `/oem-suggestions?code=${encodeURIComponent(oemCode)}`,
+      )
+      .then((res) => {
+        if (!cancelled) setSuggestions(res?.suggestions ?? []);
+      })
+      .catch(() => {
+        if (!cancelled) setSuggestions([]);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [oemCode]);
+
+  const submit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setSubmitting(true);
+    try {
+      const res = await api.post<{ created: boolean; suggestions: AggregatedSuggestion[] }>(
+        "/oem-suggestions",
+        { oemCode, brand, suggestedCode: code },
+      );
+      setSuggestions(res.suggestions);
+      if (res.created) {
+        toast.success("Öneriniz eklendi, teşekkürler!", {
+          description: "Aynı öneriyi veren satıcı arttıkça öneri güçlenir.",
+        });
+      } else {
+        toast.info("Bu öneriyi zaten eklemişsiniz.");
+      }
+      capture("oem_suggestion_submitted", {
+        oem_code: oemCode,
+        brand,
+        created: res.created,
+      });
+      setBrand("");
+      setCode("");
+      setFormOpen(false);
+    } catch {
+      toast.error("Öneri kaydedilemedi", { description: "Lütfen tekrar deneyin." });
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <section className="space-y-3">
+      <div className="flex flex-wrap items-center justify-between gap-2">
+        <div>
+          <h2 className="text-sm font-semibold">Topluluk muadil önerileri</h2>
+          <p className="mt-0.5 text-xs text-muted-foreground">
+            Bu kodun muadilini biliyorsanız marka + parça kodu olarak ekleyin.
+          </p>
+        </div>
+        <Button type="button" variant="outline" size="sm" onClick={() => setFormOpen((o) => !o)}>
+          <Plus className="mr-1.5 size-4" />
+          Muadil öner
+        </Button>
+      </div>
+
+      {formOpen && (
+        <form
+          onSubmit={submit}
+          className="flex flex-col gap-2 rounded-xl border border-border bg-background p-3 sm:flex-row"
+        >
+          <Input
+            value={brand}
+            onChange={(e) => setBrand(e.target.value)}
+            placeholder="Marka (ör. Bosch)"
+            required
+            minLength={2}
+            maxLength={80}
+            className="sm:max-w-48"
+          />
+          <Input
+            value={code}
+            onChange={(e) => setCode(e.target.value)}
+            placeholder="Parça kodu"
+            required
+            minLength={2}
+            maxLength={100}
+            className="font-mono"
+          />
+          <Button type="submit" disabled={submitting}>
+            {submitting ? "Gönderiliyor…" : "Gönder"}
+          </Button>
+        </form>
+      )}
+
+      {suggestions === null ? (
+        <Skeleton className="h-14 w-full rounded-xl" />
+      ) : suggestions.length === 0 ? (
+        <p className="rounded-xl border border-dashed border-border px-4 py-6 text-center text-sm text-muted-foreground">
+          Henüz öneri yok — muadilini biliyorsanız ilk öneriyi siz ekleyin.
+        </p>
+      ) : (
+        <ul className="divide-y divide-border overflow-hidden rounded-xl border border-border">
+          {suggestions.map((s) => (
+            <li
+              key={`${s.brand.toLocaleLowerCase("tr-TR")}|${s.code}`}
+              className="flex items-center justify-between gap-3 bg-background px-4 py-2.5"
+            >
+              <span className="min-w-0">
+                <span className="text-sm font-medium">{s.brand}</span>{" "}
+                <Link
+                  to="/dashboard/oem/$code"
+                  params={{ code: s.code }}
+                  className="font-mono text-xs underline decoration-dotted underline-offset-2 hover:decoration-solid"
+                >
+                  {s.code}
+                </Link>
+                {s.mine && (
+                  <span className="ml-2 text-[10px] font-semibold uppercase tracking-wide text-primary">
+                    sizin öneriniz
+                  </span>
+                )}
+              </span>
+              <Badge variant="secondary" title="Bu muadili öneren kullanıcı sayısı">
+                <Users className="mr-1 size-3" />
+                {s.count}
+              </Badge>
+            </li>
+          ))}
+        </ul>
+      )}
+    </section>
+  );
+}

apps/web/src/components/catalog/oem-vote-buttons.tsx

@@ -1,79 +0,0 @@
-import { cn } from "@sase/ui";
-import { ThumbsDown, ThumbsUp } from "lucide-react";
-
-export type OemVoteChoice = "compatible" | "incompatible";
-
-export interface OemVoteSummary {
-  compatible: number;
-  incompatible: number;
-  myVote: OemVoteChoice | null;
-}
-
-export interface CastOemVoteResult {
-  oemCode: string;
-  myVote: OemVoteChoice;
-  counts: { compatible: number; incompatible: number };
-  pointsAwarded: number;
-  correct: boolean | null;
-  isNew: boolean;
-}
-
-interface OemVoteButtonsProps {
-  summary?: OemVoteSummary;
-  pending?: boolean;
-  onVote: (vote: OemVoteChoice) => void;
-}
-
-// Parça satırındaki topluluk oyu ikilisi: uyumlu (👍) / uyumsuz (👎).
-// Satır tıklaması hotspot grubunu seçtiği için tıklamalar satıra taşmaz.
-export function OemVoteButtons({ summary, pending, onVote }: OemVoteButtonsProps) {
-  const myVote = summary?.myVote ?? null;
-  const options = [
-    {
-      vote: "compatible" as const,
-      icon: ThumbsUp,
-      count: summary?.compatible ?? 0,
-      title: "Uyumlu — bu OEM kodu doğru",
-      activeClass: "text-green-500",
-    },
-    {
-      vote: "incompatible" as const,
-      icon: ThumbsDown,
-      count: summary?.incompatible ?? 0,
-      title: "Uyumsuz — bu OEM kodu hatalı",
-      activeClass: "text-red-500",
-    },
-  ];
-
-  return (
-    <span className="inline-flex items-center gap-0.5">
-      {options.map(({ vote, icon: Icon, count, title, activeClass }) => {
-        const isActive = myVote === vote;
-        return (
-          <button
-            key={vote}
-            type="button"
-            disabled={pending}
-            title={title}
-            aria-label={title}
-            aria-pressed={isActive}
-            onClick={(e) => {
-              e.stopPropagation();
-              onVote(vote);
-            }}
-            onKeyDown={(e) => e.stopPropagation()}
-            className={cn(
-              "inline-flex items-center gap-1 rounded px-1.5 py-1 text-xs transition-colors disabled:opacity-50",
-              isActive
-                ? cn(activeClass, "font-semibold")
-                : "text-muted-foreground hover:bg-accent hover:text-foreground",
-            )}
-          >
-            <Icon className="size-3.5 shrink-0" fill={isActive ? "currentColor" : "none"} />
-            <span className="tabular-nums">{count}</span>
-          </button>
-        );
-      })}
-    </span>
-  );
-}

apps/web/src/components/catalog/oem-vote-card.tsx

@@ -0,0 +1,142 @@
+import { api } from "@/lib/api-client";
+import { capture } from "@/lib/posthog";
+import { toast } from "@/lib/toast";
+import { cn } from "@sase/ui";
+import { Link } from "@tanstack/react-router";
+import { ThumbsDown, ThumbsUp } from "lucide-react";
+import { useEffect, useState } from "react";
+
+export type OemVoteChoice = "compatible" | "incompatible";
+
+export interface OemVoteSummary {
+  compatible: number;
+  incompatible: number;
+  myVote: OemVoteChoice | null;
+}
+
+export interface CastOemVoteResult {
+  oemCode: string;
+  myVote: OemVoteChoice;
+  counts: { compatible: number; incompatible: number };
+  pointsAwarded: number;
+  correct: boolean | null;
+  isNew: boolean;
+}
+
+const EMPTY_SUMMARY: OemVoteSummary = { compatible: 0, incompatible: 0, myVote: null };
+
+// OEM detay sayfasındaki topluluk oyu kartı: uyumlu/uyumsuz + sayaçlar.
+// Kendi durumunu yönetir; oy puanları toast ile bildirilir (oy +1, çoğunluk
+// +2, ilk oy 3 — kural API'deki computeVoteAward'da).
+export function OemVoteCard({ oemCode }: { oemCode: string }) {
+  const [summary, setSummary] = useState<OemVoteSummary | null>(null);
+  const [pending, setPending] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    setSummary(null);
+    api
+      .post<{ votes: Record<string, OemVoteSummary> }>("/oem-votes/lookup", { codes: [oemCode] })
+      .then((res) => {
+        if (!cancelled) setSummary(res?.votes?.[oemCode] ?? EMPTY_SUMMARY);
+      })
+      .catch(() => {
+        if (!cancelled) setSummary(EMPTY_SUMMARY);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [oemCode]);
+
+  const cast = async (vote: OemVoteChoice) => {
+    setPending(true);
+    try {
+      const result = await api.post<CastOemVoteResult>("/oem-votes", { oemCode, vote });
+      setSummary({ ...result.counts, myVote: result.myVote });
+      if (result.isNew) {
+        const isFirstVote = result.counts.compatible + result.counts.incompatible === 1;
+        toast.success(`+${result.pointsAwarded} puan kazandınız!`, {
+          description: isFirstVote
+            ? "Bu OEM kodunu ilk değerlendiren sizsiniz."
+            : result.correct
+              ? "Çoğunluk görüşüyle aynı yöndesiniz."
+              : "Oyunuz kaydedildi — çoğunluk şimdilik farklı görüşte.",
+        });
+      } else {
+        toast.info("Oyunuz güncellendi.");
+      }
+      capture("oem_vote_cast", {
+        oem_code: oemCode,
+        vote,
+        points_awarded: result.pointsAwarded,
+        correct: result.correct,
+        is_new: result.isNew,
+        surface: "oem_detail",
+      });
+    } catch {
+      toast.error("Oy kaydedilemedi", { description: "Lütfen tekrar deneyin." });
+    } finally {
+      setPending(false);
+    }
+  };
+
+  const options = [
+    {
+      vote: "compatible" as const,
+      icon: ThumbsUp,
+      label: "Uyumlu",
+      count: summary?.compatible ?? 0,
+      activeClass: "border-green-500/50 bg-green-500/10 text-green-500",
+    },
+    {
+      vote: "incompatible" as const,
+      icon: ThumbsDown,
+      label: "Uyumsuz",
+      count: summary?.incompatible ?? 0,
+      activeClass: "border-red-500/50 bg-red-500/10 text-red-500",
+    },
+  ];
+
+  return (
+    <section className="rounded-xl border border-border bg-background p-4">
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <div className="min-w-0">
+          <h2 className="text-sm font-semibold">Topluluk uyumluluk oyu</h2>
+          <p className="mt-0.5 text-xs text-muted-foreground">
+            Bu OEM kodu sizce doğru mu? Oyunuz diğer parça satıcılarına yol gösterir.
+          </p>
+        </div>
+        <div className="flex gap-2">
+          {options.map(({ vote, icon: Icon, label, count, activeClass }) => {
+            const isActive = summary?.myVote === vote;
+            return (
+              <button
+                key={vote}
+                type="button"
+                disabled={pending || summary === null}
+                aria-pressed={isActive}
+                onClick={() => cast(vote)}
+                className={cn(
+                  "inline-flex items-center gap-2 rounded-lg border px-3 py-2 text-sm font-medium transition-colors disabled:opacity-50",
+                  isActive
+                    ? activeClass
+                    : "border-border text-muted-foreground hover:bg-accent hover:text-foreground",
+                )}
+              >
+                <Icon className="size-4 shrink-0" fill={isActive ? "currentColor" : "none"} />
+                {label}
+                <span className="font-semibold tabular-nums">{count}</span>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+      <p className="mt-3 text-xs text-muted-foreground">
+        Oy +1 puan, çoğunlukla aynı görüş +2 puan, ilk oy 3 puan ·{" "}
+        <Link to="/dashboard/uzmanlar" className="font-medium text-primary hover:underline">
+          Parça Uzmanları sıralaması
+        </Link>
+      </p>
+    </section>
+  );
+}