bede/tfm_ainventory
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: add photo_path fields to frontend Item interface to display saved photos

Browse Source 
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.
This commit is contained in:
Daniel Bedeleanu
2026-04-21 19:45:19 +03:00
parent 2e61dfe935
commit b5fb2a8cdb
3 changed files with 13 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/components/InventoryTable.tsx
View File

@@ -106,7 +106,7 @@ export default function InventoryTable({
onClick={() => handleItemClick(item)} onClick={() => handleItemClick(item)}
className="flex items-center gap-3 flex-1 min-w-0 pr-4 cursor-pointer" 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 <div
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); 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" 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 <img
src={item.image_url} src={item.photo_path || item.image_url || ''}
alt={item.name} alt={item.name}
className="w-full h-full object-cover" className="w-full h-full object-cover"
loading="lazy" loading="lazy"
@@ -128,7 +128,7 @@ export default function InventoryTable({
)} )}
<div className="truncate"> <div className="truncate">
<h4 className="card-title truncate">{item.name}</h4> <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> <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 <PhotoModal
photoUrl={selectedPhotoItem.image_url} photoUrl={selectedPhotoItem.photo_path || selectedPhotoItem.image_url || ''}
title={selectedPhotoItem.name} title={selectedPhotoItem.name}
onClose={() => setSelectedPhotoItem(null)} onClose={() => setSelectedPhotoItem(null)}
/> />

6
frontend/components/ItemDetailModal.tsx
View File

@@ -22,7 +22,11 @@ export default function ItemDetailModal({
}: ItemDetailModalProps) { }: ItemDetailModalProps) {
const [showPhotoUpload, setShowPhotoUpload] = useState(false); const [showPhotoUpload, setShowPhotoUpload] = useState(false);
const [currentPhoto, setCurrentPhoto] = useState<{ thumbnail_url: string; full_url: string } | null>( 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 [isDeleting, setIsDeleting] = useState(false);
const photoUploadRef = useRef<HTMLDivElement>(null); const photoUploadRef = useRef<HTMLDivElement>(null);

3
frontend/lib/db.ts
View File

@@ -19,6 +19,9 @@ export interface Item {
connector?: string; connector?: string;
size?: string; size?: string;
ocr_text?: string; ocr_text?: string;
photo_path?: string;
photo_thumbnail_path?: string;
photo_upload_date?: string;
} }
export interface PendingOperation { export interface PendingOperation {