feat: propagate PL24 part metadata, improve auth UX with Google sign-in prominence

- Add unavailable/remark/modelCodes/presel fields to categories and parts DB schema - Pass PL24 unavailable flag through pipeline instead of filtering out records - Show unavailable categories/parts at reduced opacity in grid, tree, and parts panel - Display part remark and model codes as secondary info in parts table - Move Google sign-in button above email form on login/register pages with branded icon - Add public email existence check endpoint for better login error messages - Update INDEX.md documentation Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-20 11:11:28 +00:00
parent 87f03f66ac
commit f3f3f57756
15 changed files with 561 additions and 328 deletions
--- a/apps/web/src/components/categories/category-grid.tsx
+++ b/apps/web/src/components/categories/category-grid.tsx
@@ -13,6 +13,7 @@ interface Category {
  partCount?: number;
  schemaImageUrl?: string | null;
  parentId?: string | null;
+  unavailable?: boolean;
 }

 interface CategoryGridProps {
@@ -252,6 +253,7 @@ export function CategoryGrid({ categories, vehicleId }: CategoryGridProps) {
                  key={category.id}
                  to="/dashboard/vehicles/$id/categories/$categoryId"
                  params={{ id: vehicleId, categoryId: category.id }}
+                  className={category.unavailable ? "opacity-40" : undefined}
                >
                  <CategoryCard
                    name={category.name}
@@ -269,7 +271,7 @@ export function CategoryGrid({ categories, vehicleId }: CategoryGridProps) {
                key={category.id}
                type="button"
                onClick={() => handleDrillDown(category)}
-                className="text-left"
+                className={category.unavailable ? "text-left opacity-40" : "text-left"}
              >
                <CategoryCard
                  name={category.name}
--- a/apps/web/src/components/categories/category-tree.tsx
+++ b/apps/web/src/components/categories/category-tree.tsx
@@ -2,6 +2,7 @@ import { useState, useCallback, useEffect, useRef } from "react";
 import { Link } from "@tanstack/react-router";
 import { useQueryClient } from "@tanstack/react-query";
 import { ChevronRight, ChevronDown, Loader2 } from "lucide-react";
+import { cn } from "@sase/ui";
 import { api } from "@/lib/api-client";
 import { getCategoryIcon } from "@/lib/category-icons";

@@ -12,6 +13,7 @@ interface Category {
  partCount?: number;
  schemaImageUrl?: string | null;
  parentId?: string | null;
+  unavailable?: boolean;
 }

 export function CategoryTree({ categories, vehicleId }: { categories: Category[]; vehicleId: string }) {
@@ -108,7 +110,10 @@ function CategoryNode({ category, vehicleId, level, parentPrefetching }: {
  return (
    <div>
      <div
-        className="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-accent"
+        className={cn(
+          "flex items-center gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-accent",
+          category.unavailable && "opacity-40",
+        )}
        style={{ paddingLeft: `${level * 16 + 8}px` }}
      >
        {loading ? (
--- a/apps/web/src/components/schema/parts-panel.tsx
+++ b/apps/web/src/components/schema/parts-panel.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Check, Copy } from "lucide-react";
 import { useSchemaStore } from "@/stores/schema.store";
 import { cn } from "@sase/ui";
@@ -18,6 +18,19 @@ export function PartsPanel({ parts, vehicleId, categoryId }: PartsPanelProps) {
  const rowRefs = useRef<Map<number, HTMLTableRowElement>>(new Map());
  const [copiedId, setCopiedId] = useState<string | null>(null);

+  // Map group → IDs of available (non-unavailable) parts
+  const availableByGroup = useMemo(() => {
+    const map = new Map<number, string[]>();
+    for (const part of parts) {
+      if (part.hotspotIndex != null && !part.unavailable) {
+        const ids = map.get(part.hotspotIndex) || [];
+        ids.push(part.id);
+        map.set(part.hotspotIndex, ids);
+      }
+    }
+    return map;
+  }, [parts]);
+
  const copyOemCode = useCallback((e: React.MouseEvent, partId: string, code: string) => {
    e.stopPropagation();
    navigator.clipboard.writeText(code);
@@ -81,13 +94,21 @@ export function PartsPanel({ parts, vehicleId, categoryId }: PartsPanelProps) {
                  key={part.id}
                  data-faro-user-action-name="select-part"
                  ref={(el) => {
-                    // Store ref for the first part in each group (for scroll-to)
-                    if (group != null && el && !rowRefs.current.has(group)) {
+                    if (group == null || !el) return;
+                    const availableIds = availableByGroup.get(group);
+                    if (availableIds?.length === 1) {
+                      // Single available part — scroll directly to it
+                      if (part.id === availableIds[0]) {
+                        rowRefs.current.set(group, el);
+                      }
+                    } else if (!rowRefs.current.has(group)) {
+                      // Multiple or zero available — first part in group
                      rowRefs.current.set(group, el);
                    }
                  }}
                  className={cn(
                    "cursor-pointer border-b border-border/50 transition-colors duration-150",
+                    part.unavailable && "opacity-40",
                    isSelected &&
                      "bg-primary/10 ring-1 ring-inset ring-primary/20",
                    isHighlighted && !isSelected && "bg-accent",
@@ -104,7 +125,14 @@ export function PartsPanel({ parts, vehicleId, categoryId }: PartsPanelProps) {
                  <td className="px-3 py-2 text-muted-foreground">
                    {part.hotspotIndex}
                  </td>
-                  <td className="px-3 py-2 font-medium">{part.name}</td>
+                  <td className="px-3 py-2">
+                    <span className="font-medium">{part.name}</span>
+                    {(part.remark || part.modelCodes) && (
+                      <span className="block text-xs text-muted-foreground">
+                        {[part.remark, part.modelCodes].filter(Boolean).join(" · ")}
+                      </span>
+                    )}
+                  </td>
                  <td className="px-3 py-2 font-mono text-xs">
                    <span className="inline-flex items-center gap-1">
                      {part.oemCode && (
--- a/apps/web/src/hooks/use-parts.ts
+++ b/apps/web/src/hooks/use-parts.ts
@@ -8,6 +8,10 @@ export interface Part {
  quantity: number | null;
  position: string | null;
  hotspotIndex: number | null;
+  unavailable?: boolean;
+  remark?: string;
+  modelCodes?: string;
+  presel?: boolean;
  price?: number;
  note?: string;
 }
--- a/apps/web/src/routes/_auth/login.tsx
+++ b/apps/web/src/routes/_auth/login.tsx
@@ -3,6 +3,7 @@ import { Link, createFileRoute, useNavigate } from "@tanstack/react-router";
 import { Button } from "@sase/ui";
 import { Input } from "@sase/ui";
 import { Label } from "@sase/ui";
+import { api } from "@/lib/api-client";
 import { signIn } from "@/lib/auth-client";
 import { startAction } from "@/lib/faro";
 import { capture } from "@/lib/posthog";
@@ -23,15 +24,27 @@ function LoginPage() {
    startAction("login", { method: "email" });
    setLoading(true);

-    try {
-      await signIn.email({ email, password });
+    const { error } = await signIn.email({ email, password });
+
+    if (error) {
+      try {
+        const { exists } = await api.post<{ exists: boolean }>("/users/check-email", { email });
+        if (!exists) {
+          toast.error("Kullanıcı bulunamadı", {
+            description: "Bu e-posta adresi ile kayıtlı bir hesap yok.",
+          });
+        } else {
+          toast.error("E-posta veya şifre hatalı");
+        }
+      } catch {
+        toast.error("E-posta veya şifre hatalı");
+      }
+    } else {
      capture("user_logged_in", { method: "email" });
      navigate({ to: "/dashboard/search" });
-    } catch {
-      toast.error("Giriş başarısız. E-posta veya şifre hatalı.");
-    } finally {
-      setLoading(false);
    }
+
+    setLoading(false);
  }

  return (
@@ -46,6 +59,37 @@ function LoginPage() {
        </p>
      </div>

+      {/* Google */}
+      <Button
+        variant="outline"
+        className="w-full"
+        onClick={() => {
+          startAction("login", { method: "google" });
+          capture("user_logged_in", { method: "google" });
+          signIn.social({ provider: "google", callbackURL: "/dashboard/search" });
+        }}
+      >
+        <svg className="mr-2 h-5 w-5" viewBox="0 0 24 24" aria-hidden="true">
+          <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" fill="#4285F4" />
+          <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853" />
+          <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05" />
+          <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335" />
+        </svg>
+        Google ile Giriş Yap
+      </Button>
+
+      {/* Divider */}
+      <div className="relative">
+        <div className="absolute inset-0 flex items-center">
+          <span className="w-full border-t" />
+        </div>
+        <div className="relative flex justify-center text-xs uppercase">
+          <span className="bg-background px-2 text-muted-foreground">
+            veya
+          </span>
+        </div>
+      </div>
+
      {/* Form */}
      <form onSubmit={handleSubmit} className="space-y-5">
        <div className="space-y-2">
@@ -92,32 +136,6 @@ function LoginPage() {
        </Button>
      </form>

-      {/* Divider + Google */}
-      <div className="space-y-3">
-        <div className="relative">
-          <div className="absolute inset-0 flex items-center">
-            <span className="w-full border-t" />
-          </div>
-          <div className="relative flex justify-center text-xs uppercase">
-            <span className="bg-background px-2 text-muted-foreground">
-              veya
-            </span>
-          </div>
-        </div>
-
-        <Button
-          variant="outline"
-          className="w-full"
-          onClick={() => {
-            startAction("login", { method: "google" });
-            capture("user_logged_in", { method: "google" });
-            signIn.social({ provider: "google", callbackURL: "/dashboard/search" });
-          }}
-        >
-          Google ile Giriş Yap
-        </Button>
-      </div>
-
      {/* Register link */}
      <p className="text-center text-sm">
        Hesabınız yok mu?{" "}
--- a/apps/web/src/routes/_auth/register.tsx
+++ b/apps/web/src/routes/_auth/register.tsx
@@ -61,6 +61,37 @@ function RegisterPage() {
        </div>
      </div>

+      {/* Google */}
+      <Button
+        variant="outline"
+        className="w-full"
+        onClick={() => {
+          startAction("register", { method: "google" });
+          capture("user_signed_up", { method: "google" });
+          signIn.social({ provider: "google", callbackURL: redirectUrl });
+        }}
+      >
+        <svg className="mr-2 h-5 w-5" viewBox="0 0 24 24" aria-hidden="true">
+          <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" fill="#4285F4" />
+          <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853" />
+          <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05" />
+          <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335" />
+        </svg>
+        Google ile Kayıt Ol
+      </Button>
+
+      {/* Divider */}
+      <div className="relative">
+        <div className="absolute inset-0 flex items-center">
+          <span className="w-full border-t" />
+        </div>
+        <div className="relative flex justify-center text-xs uppercase">
+          <span className="bg-background px-2 text-muted-foreground">
+            veya
+          </span>
+        </div>
+      </div>
+
      {/* Form */}
      <form onSubmit={handleSubmit} className="space-y-5">
        <div className="space-y-2">
@@ -102,32 +133,6 @@ function RegisterPage() {
        </Button>
      </form>

-      {/* Divider + Google */}
-      <div className="space-y-3">
-        <div className="relative">
-          <div className="absolute inset-0 flex items-center">
-            <span className="w-full border-t" />
-          </div>
-          <div className="relative flex justify-center text-xs uppercase">
-            <span className="bg-background px-2 text-muted-foreground">
-              veya
-            </span>
-          </div>
-        </div>
-
-        <Button
-          variant="outline"
-          className="w-full"
-          onClick={() => {
-            startAction("register", { method: "google" });
-            capture("user_signed_up", { method: "google" });
-            signIn.social({ provider: "google", callbackURL: redirectUrl });
-          }}
-        >
-          Google ile Kayıt Ol
-        </Button>
-      </div>
-
      <p className="text-center text-xs text-muted-foreground">
        Kayıt olunca hemen VIN aramaya başlayın
      </p>