item thumbnails

client/src/modules/inventory/InventoryDetailPage.tsx

@@ -5,6 +5,7 @@ import type {
   InventoryTransferInput,
   WarehouseLocationOptionDto,
 } from "@mrp/shared/dist/inventory/types.js";
+import type { FileAttachmentDto } from "@mrp/shared";
 import { permissions } from "@mrp/shared";
 import { useEffect, useState } from "react";
 import { Link, useParams } from "react-router-dom";
@@ -12,7 +13,7 @@ import { Link, useParams } from "react-router-dom";
 import { useAuth } from "../../auth/AuthProvider";
 import { api, ApiError } from "../../lib/api";
 import { ConfirmActionDialog } from "../../components/ConfirmActionDialog";
-import { emptyInventoryTransactionInput, inventoryTransactionOptions } from "./config";
+import { emptyInventoryTransactionInput, inventoryThumbnailOwnerType, inventoryTransactionOptions } from "./config";
 import { InventoryAttachmentsPanel } from "./InventoryAttachmentsPanel";
 import { InventoryStatusBadge } from "./InventoryStatusBadge";
 import { InventoryTransactionTypeBadge } from "./InventoryTransactionTypeBadge";
@@ -49,6 +50,8 @@ export function InventoryDetailPage() {
   const [isSavingTransfer, setIsSavingTransfer] = useState(false);
   const [isSavingReservation, setIsSavingReservation] = useState(false);
   const [status, setStatus] = useState("Loading inventory item...");
+  const [thumbnailAttachment, setThumbnailAttachment] = useState<FileAttachmentDto | null>(null);
+  const [thumbnailPreviewUrl, setThumbnailPreviewUrl] = useState<string | null>(null);
   const [pendingConfirmation, setPendingConfirmation] = useState<
     | {
         kind: "transaction" | "transfer" | "reservation";
@@ -64,6 +67,17 @@ export function InventoryDetailPage() {
   >(null);
 
   const canManage = user?.permissions.includes(permissions.inventoryWrite) ?? false;
+  const canReadFiles = user?.permissions.includes(permissions.filesRead) ?? false;
+
+  function replaceThumbnailPreview(nextUrl: string | null) {
+    setThumbnailPreviewUrl((current) => {
+      if (current) {
+        window.URL.revokeObjectURL(current);
+      }
+
+      return nextUrl;
+    });
+  }
 
   useEffect(() => {
     if (!token || !itemId) {
@@ -106,6 +120,56 @@ export function InventoryDetailPage() {
       .catch(() => setLocationOptions([]));
   }, [itemId, token]);
 
+  useEffect(() => {
+    return () => {
+      if (thumbnailPreviewUrl) {
+        window.URL.revokeObjectURL(thumbnailPreviewUrl);
+      }
+    };
+  }, [thumbnailPreviewUrl]);
+
+  useEffect(() => {
+    if (!token || !itemId || !canReadFiles) {
+      setThumbnailAttachment(null);
+      replaceThumbnailPreview(null);
+      return;
+    }
+
+    let cancelled = false;
+    const activeToken: string = token;
+    const activeItemId: string = itemId;
+
+    async function loadThumbnail() {
+      const attachments = await api.getAttachments(activeToken, inventoryThumbnailOwnerType, activeItemId);
+      const latestAttachment = attachments[0] ?? null;
+
+      if (!latestAttachment) {
+        if (!cancelled) {
+          setThumbnailAttachment(null);
+          replaceThumbnailPreview(null);
+        }
+        return;
+      }
+
+      const blob = await api.getFileContentBlob(activeToken, latestAttachment.id);
+      if (!cancelled) {
+        setThumbnailAttachment(latestAttachment);
+        replaceThumbnailPreview(window.URL.createObjectURL(blob));
+      }
+    }
+
+    void loadThumbnail().catch(() => {
+      if (!cancelled) {
+        setThumbnailAttachment(null);
+        replaceThumbnailPreview(null);
+      }
+    });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [canReadFiles, itemId, token]);
+
   function updateTransactionField<Key extends keyof InventoryTransactionInput>(key: Key, value: InventoryTransactionInput[Key]) {
     setTransactionForm((current) => ({ ...current, [key]: value }));
   }
@@ -333,6 +397,24 @@ export function InventoryDetailPage() {
             </div>
           </dl>
         </article>
+        <article className="rounded-[20px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
+          <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Thumbnail</p>
+          <div className="mt-4 overflow-hidden rounded-[18px] border border-line/70 bg-page/70">
+            {thumbnailPreviewUrl ? (
+              <img src={thumbnailPreviewUrl} alt={`${item.sku} thumbnail`} className="aspect-square w-full object-cover" />
+            ) : (
+              <div className="flex aspect-square items-center justify-center px-4 text-center text-sm text-muted">
+                No thumbnail image has been attached to this item.
+              </div>
+            )}
+          </div>
+          <div className="mt-3 text-xs text-muted">
+            {thumbnailAttachment ? `Current file: ${thumbnailAttachment.originalName}` : "Add or replace the thumbnail from the item edit page."}
+          </div>
+        </article>
+      </div>
+
+      <div className="grid gap-3 xl:grid-cols-[minmax(0,1.05fr)_minmax(340px,0.95fr)]">
         <article className="rounded-[20px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
           <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Stock By Location</p>
           {item.stockBalances.length === 0 ? (