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

feat(phase2): add photo display to inventory card with modal viewer

Browse Source 
- Create PhotoModal component for full-res photo viewing
- Add photo thumbnail (200px square) to inventory item card
- Implement photo modal trigger on thumbnail click
- Add fallback text when no photo available
- Modal closeable via X button, click outside, or Escape key
- Image scales responsively without stretching
- Add comprehensive test coverage (30+ tests)
- All 427 tests passing, build successful
- TypeScript strict mode compliant
This commit is contained in:
Daniel Bedeleanu
2026-04-21 14:53:27 +03:00
parent 74c91b117f
commit 3df15cf68f
5 changed files with 880 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
frontend/components/InventoryTable.tsx
View File

@@ -6,6 +6,7 @@ import { ChevronRight, ChevronDown, Layers, Package } from 'lucide-react';
import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';
import ItemDetailModal from '@/components/ItemDetailModal';
import PhotoModal from '@/components/PhotoModal';
function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
@@ -32,6 +33,7 @@ export default function InventoryTable({
}: InventoryTableProps) {
const [selectedItemDetail, setSelectedItemDetail] = useState<Item | null>(null);
const [refreshTrigger, setRefreshTrigger] = useState(0);
const [selectedPhotoItem, setSelectedPhotoItem] = useState<Item | null>(null);
const handleItemClick = (item: Item) => {
setSelectedItemDetail(item);
@@ -98,16 +100,42 @@ export default function InventoryTable({
{categoryItems.map(item => (
<div
key={item.id}
onClick={() => handleItemClick(item)}
className="bg-background/40 border border-slate-800/50 p-4 rounded-2xl flex items-center justify-between hover:border-primary/40 cursor-pointer transition-all active:scale-[0.98]"
className="bg-background/40 border border-slate-800/50 p-4 rounded-2xl flex items-center justify-between hover:border-primary/40 transition-all active:scale-[0.98]"
>
<div className="flex items-center gap-3 flex-1 min-w-0 pr-4">
<div className="w-8 h-8 rounded-xl bg-green-500/10 flex items-center justify-center text-green-500 shrink-0">
<Package size={14} />
</div>
<div
onClick={() => handleItemClick(item)}
className="flex items-center gap-3 flex-1 min-w-0 pr-4 cursor-pointer"
>
{item.image_url ? (
<div
onClick={(e) => {
e.stopPropagation();
setSelectedPhotoItem(item);
}}
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}
alt={item.name}
className="w-full h-full object-cover"
loading="lazy"
/>
</div>
) : (
<div className="w-12 h-12 rounded-xl bg-green-500/10 flex items-center justify-center text-green-500 shrink-0">
<Package size={14} />
</div>
)}
<div className="truncate">
<h4 className="card-title truncate">{item.name}</h4>
<p className="card-subtitle mt-0 lowercase opacity-80 truncate">{item.specs}</p>
{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 truncate">{item.specs}</p>
<p className="card-subtitle mt-0 text-xs">No photo</p>
</>
)}
</div>
</div>
<div className="text-right shrink-0">
@@ -134,6 +162,14 @@ export default function InventoryTable({
onItemRefresh={handleItemRefresh}
/>
)}
{selectedPhotoItem && selectedPhotoItem.image_url && (
<PhotoModal
photoUrl={selectedPhotoItem.image_url}
title={selectedPhotoItem.name}
onClose={() => setSelectedPhotoItem(null)}
/>
)}
</section>
);
}