Build [v1.14.24]
This commit is contained in:
@@ -69,15 +69,15 @@ 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="bg-surface border border-outline/30 max-w-2xl w-full max-h-[90vh] overflow-y-auto">
|
||||
{/* Header */}
|
||||
<div className="sticky top-0 bg-surface border-b border-slate-800/50 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="sticky top-0 bg-surface border-b border-outline/30/50 p-4 md:p-6 flex items-center justify-between">
|
||||
<h2 className="text-xl md:text-2xl font-normal text-foreground 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-yellow-900/50 text-warning hover:text-yellow-300 transition-colors"
|
||||
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-surface-container text-secondary hover:text-foreground transition-colors"
|
||||
aria-label="Close modal"
|
||||
>
|
||||
<X size={20} />
|
||||
@@ -99,32 +99,32 @@ 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-sm text-white">{item.category}</p>
|
||||
<p className="text-xs text-secondary mb-1">Category</p>
|
||||
<p className="text-sm text-foreground">{item.category}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-muted mb-1">Type</p>
|
||||
<p className="text-sm text-white">{item.type || 'N/A'}</p>
|
||||
<p className="text-xs text-secondary mb-1">Type</p>
|
||||
<p className="text-sm text-foreground">{item.type || 'N/A'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-muted mb-1">Quantity</p>
|
||||
<p className="text-sm text-white">{item.quantity}</p>
|
||||
<p className="text-xs text-secondary mb-1">Quantity</p>
|
||||
<p className="text-sm text-foreground">{item.quantity}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-muted mb-1">Part Number</p>
|
||||
<p className="text-sm text-white">{item.part_number || 'N/A'}</p>
|
||||
<p className="text-xs text-secondary mb-1">Part Number</p>
|
||||
<p className="text-sm text-foreground">{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-sm text-white font-mono">{item.barcode}</p>
|
||||
<p className="text-xs text-secondary mb-1">Barcode</p>
|
||||
<p className="text-sm text-foreground font-mono">{item.barcode}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Photo Section */}
|
||||
<div className="border-t border-slate-800/50 pt-6">
|
||||
<h3 className="text-lg font-normal text-white mb-4 flex items-center gap-2">
|
||||
<div className="border-t border-outline/30/50 pt-6">
|
||||
<h3 className="text-lg font-normal text-foreground mb-4 flex items-center gap-2">
|
||||
<Camera size={18} className="text-primary" />
|
||||
Photo
|
||||
</h3>
|
||||
@@ -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-surface-container/50 overflow-hidden border border-outline/30/50 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 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-error/20 border border-error/50 text-rose-400 hover:bg-error/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-surface-container/30 border border-outline/30/50 p-8 text-center">
|
||||
<p className="text-secondary 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 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-surface-container/30 border border-outline/30/50 p-4 md:p-6">
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<h4 className="font-normal text-white">Upload New Photo</h4>
|
||||
<h4 className="font-normal text-foreground">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-surface-container text-secondary hover:text-foreground transition-colors"
|
||||
aria-label="Cancel upload"
|
||||
>
|
||||
<X size={16} />
|
||||
|
||||
Reference in New Issue
Block a user