From b5fb2a8cdb3a8d979eacb57c3234ce147aa2a19e Mon Sep 17 00:00:00 2001
From: Daniel Bedeleanu <bede@tfm.ro>
Date: Tue, 21 Apr 2026 19:45:19 +0300
Subject: [PATCH] fix: add photo_path fields to frontend Item interface to
 display saved photos

The backend returns photo_path, photo_thumbnail_path, and photo_upload_date
from the AI auto-save feature, but the frontend Item interface was missing
these fields, causing images not to display in ItemDetailModal and InventoryTable.

Updated:
- frontend/lib/db.ts: Added missing photo fields to Item interface
- frontend/components/ItemDetailModal.tsx: Use photo_path first, fallback to image_url
- frontend/components/InventoryTable.tsx: Use photo_path first, fallback to image_url

This ensures the UI can now display photos saved by the auto-photo-save feature.
---
 frontend/components/InventoryTable.tsx  | 10 +++++-----
 frontend/components/ItemDetailModal.tsx |  6 +++++-
 frontend/lib/db.ts                      |  3 +++
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/frontend/components/InventoryTable.tsx b/frontend/components/InventoryTable.tsx
index 8f0d5765..41748600 100644
--- a/frontend/components/InventoryTable.tsx
+++ b/frontend/components/InventoryTable.tsx
@@ -106,7 +106,7 @@ export default function InventoryTable({
                       onClick={() => handleItemClick(item)}
                       className="flex items-center gap-3 flex-1 min-w-0 pr-4 cursor-pointer"
                     >
-                      {item.image_url ? (
+                      {item.photo_path || item.image_url ? (
                         <div
                           onClick={(e) => {
                             e.stopPropagation();
@@ -115,7 +115,7 @@ export default function InventoryTable({
                           className="w-12 h-12 rounded-xl shrink-0 border-2 border-slate-300 overflow-hidden cursor-pointer hover:border-primary transition-colors active:scale-95"
                         >
                           <img
-                            src={item.image_url}
+                            src={item.photo_path || item.image_url || ''}
                             alt={item.name}
                             className="w-full h-full object-cover"
                             loading="lazy"
@@ -128,7 +128,7 @@ export default function InventoryTable({
                       )}
                       <div className="truncate">
                         <h4 className="card-title truncate">{item.name}</h4>
-                        {item.image_url ? (
+                        {item.photo_path || item.image_url ? (
                           <p className="card-subtitle mt-0 lowercase opacity-80 text-xs">Tap photo for details</p>
                         ) : (
                           <>
@@ -163,9 +163,9 @@ export default function InventoryTable({
         />
       )}
 
-      {selectedPhotoItem && selectedPhotoItem.image_url && (
+      {selectedPhotoItem && (selectedPhotoItem.photo_path || selectedPhotoItem.image_url) && (
         <PhotoModal
-          photoUrl={selectedPhotoItem.image_url}
+          photoUrl={selectedPhotoItem.photo_path || selectedPhotoItem.image_url || ''}
           title={selectedPhotoItem.name}
           onClose={() => setSelectedPhotoItem(null)}
         />
diff --git a/frontend/components/ItemDetailModal.tsx b/frontend/components/ItemDetailModal.tsx
index 8d1ad145..e8c88e60 100644
--- a/frontend/components/ItemDetailModal.tsx
+++ b/frontend/components/ItemDetailModal.tsx
@@ -22,7 +22,11 @@ export default function ItemDetailModal({
 }: ItemDetailModalProps) {
   const [showPhotoUpload, setShowPhotoUpload] = useState(false);
   const [currentPhoto, setCurrentPhoto] = useState<{ thumbnail_url: string; full_url: string } | null>(
-    item.image_url ? { thumbnail_url: item.image_url, full_url: item.image_url } : null
+    item.photo_path && item.photo_thumbnail_path
+      ? { thumbnail_url: item.photo_thumbnail_path, full_url: item.photo_path }
+      : item.image_url
+        ? { thumbnail_url: item.image_url, full_url: item.image_url }
+        : null
   );
   const [isDeleting, setIsDeleting] = useState(false);
   const photoUploadRef = useRef<HTMLDivElement>(null);
diff --git a/frontend/lib/db.ts b/frontend/lib/db.ts
index 1df690e6..541dfa31 100644
--- a/frontend/lib/db.ts
+++ b/frontend/lib/db.ts
@@ -19,6 +19,9 @@ export interface Item {
   connector?: string;
   size?: string;
   ocr_text?: string;
+  photo_path?: string;
+  photo_thumbnail_path?: string;
+  photo_upload_date?: string;
 }
 
 export interface PendingOperation {