feat(emex): use SchemaViewer for group parts page with image pagination

Replace stacked images + plain table with interactive SchemaViewer (same as PL24).
Backend transforms response to SchemaViewer-compatible format (Part/SchemaPic types).
Add prev/next pagination for groups with multiple schema images.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

apps/web/src/routes/dashboard/catalog_/emex/$catalogCode_/$vehicleId_/groups/$groupId.tsx

@@ -1,10 +1,18 @@
+import { lazy, Suspense, useState, useEffect } from "react";
 import { createFileRoute, Link } from "@tanstack/react-router";
 import { useQuery } from "@tanstack/react-query";
 import { api } from "@/lib/api-client";
 import { useTranslation } from "@/lib/i18n";
+import { useSchemaStore } from "@/stores/schema.store";
 import { Button, Skeleton } from "@sase/ui";
-import { ArrowLeft, Copy, Check, ImageOff } from "lucide-react";
-import { useState, useCallback } from "react";
+import { ArrowLeft, ChevronLeft, ChevronRight } from "lucide-react";
+import type { Part, SchemaPic } from "@/hooks/use-parts";
+
+const SchemaViewer = lazy(() =>
+  import("@/components/schema/schema-viewer").then((mod) => ({
+    default: mod.SchemaViewer,
+  })),
+);
 
 export const Route = createFileRoute(
   "/dashboard/catalog_/emex/$catalogCode_/$vehicleId_/groups/$groupId",
@@ -12,28 +20,6 @@ export const Route = createFileRoute(
   component: EmexGroupPartsPage,
 });
 
-interface EmexPart {
-  id: string;
-  partNumber: string | null;
-  name: string;
-  nameOriginal: string | null;
-  description: string | null;
-  oemNumber: string | null;
-  hotspotIndex: number | null;
-  quantity: number | null;
-  position: string | null;
-}
-
-interface EmexSchemaPic {
-  id: string;
-  imageUrl: string | null;
-  localPath: string | null;
-  hotspots: unknown;
-  width: number | null;
-  height: number | null;
-  sortOrder: number | null;
-}
-
 interface EmexGroupParts {
   group: {
     id: string;
@@ -41,13 +27,14 @@ interface EmexGroupParts {
     name: string;
     nameOriginal: string | null;
   };
-  parts: EmexPart[];
-  schemaPics: EmexSchemaPic[];
+  parts: Part[];
+  schemaPics: SchemaPic[];
 }
 
 function EmexGroupPartsPage() {
   const { t } = useTranslation();
   const { catalogCode, vehicleId, groupId } = Route.useParams();
+  const [activeImageIndex, setActiveImageIndex] = useState(0);
 
   const { data, isLoading } = useQuery({
     queryKey: ["emex-group-parts", vehicleId, groupId],
@@ -55,6 +42,15 @@ function EmexGroupPartsPage() {
       api.get<EmexGroupParts>(`/catalog/emex/vehicles/${vehicleId}/groups/${groupId}`),
   });
 
+  // Reset schema store and image index on group change
+  useEffect(() => {
+    useSchemaStore.getState().resetView();
+    setActiveImageIndex(0);
+  }, [groupId]);
+
+  const activePic = data?.schemaPics?.[activeImageIndex] ?? null;
+  const totalImages = data?.schemaPics?.length ?? 0;
+
   return (
     <div className="space-y-4">
       <div className="flex items-center gap-3">
@@ -70,116 +66,54 @@ function EmexGroupPartsPage() {
         <h1 className="text-xl font-bold">{data?.group?.name || t("catalog.parts")}</h1>
       </div>
 
-      {isLoading ? (
-        <div className="space-y-4">
-          <Skeleton className="h-64 w-full rounded-lg" />
-          <Skeleton className="h-96 w-full rounded-lg" />
-        </div>
-      ) : !data ? (
-        <p className="py-8 text-center text-muted-foreground">{t("catalog.noParts")}</p>
-      ) : (
-        <div className="space-y-6">
-          {/* Schema images */}
-          {data.schemaPics.length > 0 && (
-            <div className="space-y-2">
-              {data.schemaPics.map((pic) => (
-                <div
-                  key={pic.id}
-                  className="overflow-hidden rounded-lg border border-border bg-card"
-                >
-                  {pic.imageUrl ? (
-                    <img
-                      src={pic.imageUrl}
-                      alt={data.group?.name || "Schema"}
-                      className="w-full object-contain"
-                      loading="lazy"
-                    />
-                  ) : (
-                    <div className="flex h-48 items-center justify-center bg-muted">
-                      <ImageOff className="size-8 text-muted-foreground" />
-                    </div>
-                  )}
-                </div>
+      <Suspense
+        fallback={
+          <div className="flex flex-col gap-4 rounded-lg border border-border md:h-[600px] md:flex-row">
+            <div className="flex h-[300px] items-center justify-center md:h-auto md:w-[60%]">
+              <Skeleton className="h-[80%] w-[80%]" />
+            </div>
+            <div className="w-full space-y-3 p-4 md:w-[40%]">
+              <Skeleton className="h-6 w-1/2" />
+              {Array.from({ length: 8 }).map((_, i) => (
+                <Skeleton key={i} className="h-10 w-full" />
               ))}
             </div>
-          )}
+          </div>
+        }
+      >
+        <SchemaViewer
+          schemaPic={activePic}
+          hotspots={[]}
+          parts={data?.parts ?? []}
+          isLoading={isLoading}
+          vehicleId={vehicleId}
+          categoryId={groupId}
+        />
+      </Suspense>
 
-          {/* Parts table */}
-          {data.parts.length > 0 ? (
-            <div className="overflow-x-auto rounded-lg border border-border">
-              <table className="w-full text-sm">
-                <thead className="bg-muted/50">
-                  <tr>
-                    <th className="px-3 py-2 text-left font-medium">#</th>
-                    <th className="px-3 py-2 text-left font-medium">
-                      {t("catalog.partNumber")}
-                    </th>
-                    <th className="px-3 py-2 text-left font-medium">
-                      {t("catalog.partName")}
-                    </th>
-                    <th className="px-3 py-2 text-left font-medium">OEM</th>
-                    <th className="px-3 py-2 text-center font-medium">
-                      {t("catalog.qty")}
-                    </th>
-                    <th className="px-3 py-2 text-center font-medium" />
-                  </tr>
-                </thead>
-                <tbody className="divide-y divide-border">
-                  {data.parts.map((part, idx) => (
-                    <PartRow key={part.id} part={part} idx={idx} />
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          ) : (
-            <p className="py-4 text-center text-muted-foreground">{t("catalog.noParts")}</p>
-          )}
+      {totalImages > 1 && (
+        <div className="flex items-center justify-center gap-2 py-1">
+          <Button
+            size="sm"
+            variant="ghost"
+            disabled={activeImageIndex === 0}
+            onClick={() => setActiveImageIndex((i) => i - 1)}
+          >
+            <ChevronLeft className="size-4" />
+          </Button>
+          <span className="text-sm text-muted-foreground">
+            {activeImageIndex + 1} / {totalImages}
+          </span>
+          <Button
+            size="sm"
+            variant="ghost"
+            disabled={activeImageIndex === totalImages - 1}
+            onClick={() => setActiveImageIndex((i) => i + 1)}
+          >
+            <ChevronRight className="size-4" />
+          </Button>
         </div>
       )}
     </div>
   );
 }
-
-function PartRow({ part, idx }: { part: EmexPart; idx: number }) {
-  const [copied, setCopied] = useState<string | null>(null);
-
-  const copyOem = useCallback((code: string) => {
-    navigator.clipboard.writeText(code);
-    setCopied(code);
-    setTimeout(() => setCopied(null), 1500);
-  }, []);
-
-  const oemCode = part.partNumber || part.oemNumber;
-
-  return (
-    <tr className="hover:bg-muted/30">
-      <td className="px-3 py-2 text-muted-foreground">
-        {part.hotspotIndex ?? idx + 1}
-      </td>
-      <td className="px-3 py-2 font-mono text-xs">
-        {oemCode && (
-          <button
-            type="button"
-            onClick={() => copyOem(oemCode)}
-            className="inline-flex items-center gap-1 rounded px-1 py-0.5 hover:bg-accent"
-          >
-            {oemCode}
-            {copied === oemCode ? (
-              <Check className="size-3 text-green-500" />
-            ) : (
-              <Copy className="size-3 text-muted-foreground" />
-            )}
-          </button>
-        )}
-      </td>
-      <td className="px-3 py-2">{part.name}</td>
-      <td className="px-3 py-2 font-mono text-xs text-muted-foreground">
-        {part.oemNumber && part.oemNumber !== part.partNumber ? part.oemNumber : ""}
-      </td>
-      <td className="px-3 py-2 text-center">{part.quantity ?? 1}</td>
-      <td className="px-3 py-2 text-center text-xs text-muted-foreground">
-        {part.position}
-      </td>
-    </tr>
-  );
-}