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.
This commit is contained in:
@@ -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)}
|
||||
/>
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user