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

Build [v1.14.28]

Browse Source
This commit is contained in:
Daniel Bedeleanu
2026-04-25 12:43:41 +03:00
parent 5393b237de
commit 8dc8b7da9f
15 changed files with 227 additions and 213 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
frontend/components/ItemDetailModal.tsx
View File

@@ -68,16 +68,16 @@ export default function ItemDetailModal({
};
return (
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
<div className="bg-surface border border-slate-800 rounded-3xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4 font-sans">
<div className="bg-[#0A0A0A] border border-[#222222] rounded-none max-w-2xl w-full max-h-[90vh] overflow-y-auto shadow-none">
{/* Header */}
<div className="sticky top-0 bg-surface border-b border-slate-800/50 p-4 md:p-6 flex items-center justify-between">
<div className="sticky top-0 bg-[#0A0A0A] border-b border-[#222222] p-4 md:p-6 flex items-center justify-between">
<h2 className="text-xl md:text-2xl font-normal text-white truncate">{item.name}</h2>
<div className="flex items-center gap-2">
{currentPhoto && (
<button
onClick={() => setShowDebugPanel(true)}
className="p-2 hover:bg-yellow-900/50 rounded-full text-yellow-400 hover:text-yellow-300 transition-colors"
className="p-2 hover:bg-[#1A1A1A] rounded-none text-yellow-400 hover:text-yellow-300 transition-colors border border-transparent hover:border-[#222222]"
title="Debug rotation & crop"
aria-label="Debug panel"
>
@@ -86,7 +86,7 @@ export default function ItemDetailModal({
)}
<button
onClick={onClose}
className="p-2 hover:bg-slate-800 rounded-full text-muted hover:text-white transition-colors"
className="p-2 hover:bg-[#1A1A1A] rounded-none text-[#888888] hover:text-white transition-colors border border-transparent hover:border-[#222222]"
aria-label="Close modal"
>
<X size={20} />
@@ -99,31 +99,31 @@ export default function ItemDetailModal({
{/* Item Details */}
<div className="grid grid-cols-2 gap-4">
<div>
<p className="text-xs text-muted mb-1">Category</p>
<p className="text-xs text-[#888888] mb-1">Category</p>
<p className="text-sm text-white">{item.category}</p>
</div>
<div>
<p className="text-xs text-muted mb-1">Type</p>
<p className="text-xs text-[#888888] mb-1">Type</p>
<p className="text-sm text-white">{item.type || 'N/A'}</p>
</div>
<div>
<p className="text-xs text-muted mb-1">Quantity</p>
<p className="text-xs text-[#888888] mb-1">Quantity</p>
<p className="text-sm text-white">{item.quantity}</p>
</div>
<div>
<p className="text-xs text-muted mb-1">Part Number</p>
<p className="text-xs text-[#888888] mb-1">Part Number</p>
<p className="text-sm text-white">{item.part_number || 'N/A'}</p>
</div>
{item.barcode && (
<div className="col-span-2">
<p className="text-xs text-muted mb-1">Barcode</p>
<p className="text-xs text-[#888888] mb-1">Barcode</p>
<p className="text-sm text-white font-mono">{item.barcode}</p>
</div>
)}
</div>
{/* Photo Section */}
<div className="border-t border-slate-800/50 pt-6">
<div className="border-t border-[#222222] pt-6">
<h3 className="text-lg font-normal text-white mb-4 flex items-center gap-2">
<Camera size={18} className="text-primary" />
Photo
@@ -133,7 +133,7 @@ export default function ItemDetailModal({
<>
{currentPhoto ? (
<div className="space-y-3">
<div className="relative bg-slate-900/50 rounded-2xl overflow-hidden border border-slate-800/50 aspect-video max-h-96">
<div className="relative bg-black border border-[#222222] rounded-none overflow-hidden aspect-video max-h-96">
<img
src={buildPhotoUrl(backendUrl, currentPhoto.full_url)}
alt={item.name}
@@ -143,25 +143,25 @@ export default function ItemDetailModal({
<div className="flex gap-2">
<button
onClick={() => setShowPhotoUpload(true)}
className="flex-1 px-4 py-2 bg-primary/20 border border-primary/50 text-primary rounded-xl hover:bg-primary/30 transition-colors font-normal text-sm"
className="flex-1 px-4 py-2 bg-primary/20 border border-primary/50 text-primary rounded-none hover:bg-primary/30 transition-colors font-normal text-sm"
>
Replace Photo
</button>
<button
onClick={handleDeletePhoto}
disabled={isDeleting}
className="px-4 py-2 bg-rose-500/20 border border-rose-500/50 text-rose-400 rounded-xl hover:bg-rose-500/30 disabled:opacity-50 transition-colors font-normal text-sm"
className="px-4 py-2 bg-rose-500/20 border border-rose-500/50 text-rose-400 rounded-none hover:bg-rose-500/30 disabled:opacity-50 transition-colors font-normal text-sm"
>
<Trash2 size={16} />
</button>
</div>
</div>
) : (
<div className="bg-slate-900/30 border border-slate-800/50 rounded-2xl p-8 text-center">
<p className="text-muted text-sm mb-4">No photo uploaded</p>
<div className="bg-black border border-[#222222] rounded-none p-8 text-center">
<p className="text-[#888888] text-sm mb-4">No Photo Uploaded</p>
<button
onClick={() => setShowPhotoUpload(true)}
className="px-4 py-2 bg-primary/20 border border-primary/50 text-primary rounded-xl hover:bg-primary/30 transition-colors font-normal text-sm"
className="px-4 py-2 bg-primary/20 border border-primary/50 text-primary rounded-none hover:bg-primary/30 transition-colors font-normal text-sm"
>
Upload Photo
</button>
@@ -169,12 +169,12 @@ export default function ItemDetailModal({
)}
</>
) : (
<div ref={photoUploadRef} className="bg-slate-900/30 border border-slate-800/50 rounded-2xl p-4 md:p-6">
<div ref={photoUploadRef} className="bg-black border border-[#222222] rounded-none p-4 md:p-6">
<div className="mb-4 flex items-center justify-between">
<h4 className="font-normal text-white">Upload New Photo</h4>
<button
onClick={() => setShowPhotoUpload(false)}
className="p-1 hover:bg-slate-800 rounded-lg text-muted hover:text-white transition-colors"
className="p-1 hover:bg-[#1A1A1A] rounded-none text-[#888888] hover:text-white transition-colors border border-transparent hover:border-[#222222]"
aria-label="Cancel upload"
>
<X size={16} />