refactor: extract StockAdjustmentPanel component
- Extracted from page.tsx (lines 450-710) - Pure presentational component with all state passed as props - Props: selectedItem, isEditing, editedItem, adjustQty, adjustType, trashReason, categories, fieldScanning - Callbacks: onCancel, onEdit, onEditChange, onQuantityChange, onTypeChange, onReasonChange, onShowScanner, onAdjustStock, onUpdateItem, onDeleteItem - Includes edit mode and adjustment mode with quantity controls - 291 tests passing, build successful
This commit is contained in:
@@ -11,6 +11,9 @@ import Scanner from '@/components/Scanner';
|
||||
import AIOnboarding from '@/components/AIOnboarding';
|
||||
import PageShell from '@/components/PageShell';
|
||||
import ItemComparisonModal from '@/components/ItemComparisonModal';
|
||||
import StockAdjustmentPanel from '@/components/StockAdjustmentPanel';
|
||||
import NewItemDialog from '@/components/NewItemDialog';
|
||||
import ScannerSection from '@/components/ScannerSection';
|
||||
import { toast } from 'react-hot-toast';
|
||||
import {
|
||||
Package,
|
||||
@@ -23,10 +26,6 @@ import {
|
||||
ChevronRight,
|
||||
Edit2,
|
||||
RefreshCw,
|
||||
Sparkles,
|
||||
Smartphone,
|
||||
ArrowDownCircle,
|
||||
ArrowUpCircle,
|
||||
Search
|
||||
} from 'lucide-react';
|
||||
import { generateBarcode128, getQRCodeURL } from '@/lib/labels';
|
||||
@@ -360,71 +359,15 @@ export default function Home() {
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="w-full px-1 space-y-6">
|
||||
{/* Mode Switcher */}
|
||||
<div className="flex p-1.5 bg-surface rounded-2xl shadow-inner w-full gap-1">
|
||||
{[
|
||||
{ id: 'CHECK_IN', label: 'Check In', icon: ArrowDownCircle },
|
||||
{ id: 'CHECK_OUT', label: 'Check Out', icon: ArrowUpCircle },
|
||||
{ id: 'TRASH', label: 'Trash', icon: Trash2 }
|
||||
].map((m) => (
|
||||
<button
|
||||
key={m.id}
|
||||
data-testid={m.id === 'CHECK_IN' ? 'operation-checkin' : m.id === 'CHECK_OUT' ? 'operation-checkout' : undefined}
|
||||
onClick={() => setMode(m.id as any)}
|
||||
className={cn(
|
||||
"flex-1 py-3.5 rounded-xl text-xs sm:text-sm font-black transition-all flex items-center justify-center gap-3",
|
||||
mode === m.id ? "bg-slate-800 text-primary shadow-lg ring-1 ring-primary/20" : "text-muted hover:text-secondary"
|
||||
)}
|
||||
>
|
||||
<m.icon size={18} className={mode === m.id ? "scale-110 transition-transform" : ""} />
|
||||
<span className="truncate">{m.label}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Scanner Section */}
|
||||
<section className="glass-card rounded-3xl p-6">
|
||||
{showScanner ? (
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<h2 className="text-lg font-semibold">scanning...</h2>
|
||||
<button
|
||||
onClick={() => setShowScanner(false)}
|
||||
className="p-2.5 bg-surface border border-slate-800 text-secondary rounded-xl hover:text-rose-500 transition-all active:scale-95"
|
||||
>
|
||||
<X size={18} />
|
||||
</button>
|
||||
</div>
|
||||
<Scanner onScanSuccess={onScanSuccess} onOCRMatch={onOCRMatch} />
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col items-center py-8 text-center gap-6">
|
||||
<button
|
||||
onClick={() => setShowScanner(true)}
|
||||
className="w-24 h-24 rounded-full bg-primary/20 hover:bg-primary/30 border-2 border-primary border-dashed flex items-center justify-center group transition-all"
|
||||
>
|
||||
<Smartphone className="w-10 h-10 text-primary group-hover:scale-110 transition-transform" />
|
||||
</button>
|
||||
|
||||
<div className="w-full flex justify-center mt-4">
|
||||
<button
|
||||
onClick={() => setShowOnboarding(true)}
|
||||
className="w-full flex flex-col items-center justify-center p-8 rounded-[2rem] bg-indigo-500/5 border border-indigo-500/20 group hover:border-indigo-500/50 transition-all font-black text-indigo-400 gap-4"
|
||||
>
|
||||
<div className="p-4 bg-indigo-500/10 rounded-2xl group-hover:scale-110 transition-transform shadow-lg shadow-indigo-500/10">
|
||||
<Sparkles size={32} />
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<p className="text-lg leading-tight">Add New Item</p>
|
||||
<p className="text-xs opacity-60 font-mono mt-1">AI Smart Discovery</p>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
<ScannerSection
|
||||
mode={mode}
|
||||
onModeChange={(newMode) => setMode(newMode as any)}
|
||||
showScanner={showScanner}
|
||||
onShowScanner={setShowScanner}
|
||||
onScanSuccess={onScanSuccess}
|
||||
onOCRMatch={onOCRMatch}
|
||||
onAddItemClick={() => setShowOnboarding(true)}
|
||||
/>
|
||||
|
||||
{/* Onboarding Overlay */}
|
||||
{showOnboarding && (
|
||||
@@ -446,267 +389,37 @@ export default function Home() {
|
||||
loading={comparisonLoading}
|
||||
/>
|
||||
|
||||
{/* Stock Adjustment Overlay */}
|
||||
{selectedItem && (
|
||||
<div data-testid="stock-adjustment-form" className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-4 bg-background/80 animate-in fade-in duration-200">
|
||||
<div className="w-full max-w-lg bg-surface border border-slate-800 rounded-[2.5rem] shadow-2xl p-6 overflow-hidden animate-in slide-in-from-bottom-10 duration-300">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h3 className="text-xl font-black tracking-tight flex items-center gap-2">
|
||||
<span data-testid="adjustment-item-name">{isEditing ? "Edit Metadata" : selectedItem.name}</span>
|
||||
{!isEditing && (
|
||||
<span data-testid="current-quantity" className="text-[11px] bg-slate-800 text-secondary px-2 py-0.5 rounded-md font-black tracking-tight shadow-sm border border-slate-700/50">
|
||||
In Stock: {selectedItem.quantity}
|
||||
</span>
|
||||
)}
|
||||
</h3>
|
||||
<div className="flex gap-2">
|
||||
{!isEditing && (
|
||||
<button
|
||||
onClick={() => {
|
||||
setEditedItem(selectedItem);
|
||||
setIsEditing(true);
|
||||
}}
|
||||
className="p-2 hover:bg-slate-800 rounded-full text-secondary"
|
||||
>
|
||||
<Edit2 size={20} />
|
||||
</button>
|
||||
)}
|
||||
{isEditing && (
|
||||
<button
|
||||
onClick={handleDeleteItem}
|
||||
className="p-2 hover:bg-red-500/20 rounded-full text-red-500"
|
||||
>
|
||||
<Trash2 size={20} />
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={() => {
|
||||
setSelectedItem(null);
|
||||
setIsEditing(false);
|
||||
}}
|
||||
data-testid="adjustment-cancel"
|
||||
className="p-2 hover:bg-slate-800 rounded-full"
|
||||
>
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/* Stock Adjustment Panel */}
|
||||
<StockAdjustmentPanel
|
||||
selectedItem={selectedItem}
|
||||
isEditing={isEditing}
|
||||
editedItem={editedItem}
|
||||
adjustQty={adjustQty}
|
||||
adjustType={adjustType}
|
||||
trashReason={trashReason}
|
||||
categories={categories}
|
||||
fieldScanning={fieldScanning}
|
||||
onCancel={() => {
|
||||
setSelectedItem(null);
|
||||
setIsEditing(false);
|
||||
}}
|
||||
onEdit={(item) => {
|
||||
setEditedItem(item);
|
||||
setIsEditing(true);
|
||||
}}
|
||||
onEditChange={setEditedItem}
|
||||
onQuantityChange={setAdjustQty}
|
||||
onTypeChange={setAdjustType}
|
||||
onReasonChange={setTrashReason}
|
||||
onShowScanner={(active, field) => {
|
||||
setFieldScanning({ active, field });
|
||||
setShowScanner(true);
|
||||
}}
|
||||
onAdjustStock={handleAdjustStock}
|
||||
onUpdateItem={handleUpdateItem}
|
||||
onDeleteItem={handleDeleteItem}
|
||||
/>
|
||||
|
||||
{isEditing ? (
|
||||
<div className="space-y-4 mb-8">
|
||||
<div>
|
||||
<div className="bg-surface py-2.5 px-4 rounded-[1.2rem] border border-slate-800 focus-within:border-primary/50 transition-colors group">
|
||||
<label className="text-xs text-secondary font-bold mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight">Item Name</label>
|
||||
<textarea
|
||||
value={editedItem.name || ''}
|
||||
onChange={(e) => setEditedItem({ ...editedItem, name: e.target.value })}
|
||||
className="bg-transparent w-full text-lg font-bold outline-none text-white placeholder:text-muted resize-none h-8 leading-tight selection:bg-primary/30 py-0"
|
||||
placeholder="SSD, SFP, Cable..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm font-bold text-secondary ml-1 tracking-tight">Part Number</label>
|
||||
<input
|
||||
type="text"
|
||||
value={editedItem.part_number || ''}
|
||||
onChange={e => setEditedItem({ ...editedItem, part_number: e.target.value })}
|
||||
className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm font-mono outline-none text-secondary"
|
||||
placeholder="e.g. PN-12345"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="text-sm font-bold text-secondary ml-1 tracking-tight">Category Group</label>
|
||||
<input
|
||||
type="text"
|
||||
list="existing-categories"
|
||||
value={editedItem.category || ''}
|
||||
onChange={e => setEditedItem({ ...editedItem, category: e.target.value })}
|
||||
className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm outline-none text-secondary placeholder:text-muted"
|
||||
placeholder="e.g. storage"
|
||||
/>
|
||||
<datalist id="existing-categories">
|
||||
{categories.map(c => (
|
||||
<option key={c.id} value={c.name} />
|
||||
))}
|
||||
</datalist>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm font-bold text-secondary ml-1 tracking-tight">Item Type</label>
|
||||
<input
|
||||
type="text"
|
||||
list="existing-types"
|
||||
value={editedItem.type || ''}
|
||||
onChange={e => setEditedItem({...editedItem, type: e.target.value})}
|
||||
className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm outline-none text-secondary"
|
||||
placeholder="e.g. spare parts"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2">
|
||||
<label className="text-sm font-bold text-secondary ml-1">Box / Container Label</label>
|
||||
<div className="relative flex items-center">
|
||||
<input
|
||||
type="text"
|
||||
list="existing-boxes"
|
||||
value={editedItem.box_label || ''}
|
||||
onChange={e => setEditedItem({...editedItem, box_label: e.target.value})}
|
||||
className="w-full bg-background border border-slate-800 rounded-xl py-3 pl-4 pr-12 text-sm outline-none text-secondary placeholder:text-muted focus:border-primary transition-colors"
|
||||
placeholder="e.g. SFPs 40G Cisco"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setFieldScanning({ active: true, field: 'box_label' });
|
||||
setShowScanner(true);
|
||||
toast.success("Scanning for BOX label...");
|
||||
}}
|
||||
className={cn(
|
||||
"absolute right-2 p-2 rounded-lg transition-all",
|
||||
fieldScanning?.active ? "bg-primary text-white animate-pulse" : "text-muted hover:bg-slate-800"
|
||||
)}
|
||||
>
|
||||
<Camera size={18} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm font-bold text-secondary ml-1 tracking-tight">Connector</label>
|
||||
<input
|
||||
type="text"
|
||||
value={editedItem.connector || ''}
|
||||
onChange={e => setEditedItem({...editedItem, connector: e.target.value})}
|
||||
className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm outline-none text-secondary"
|
||||
placeholder="e.g. LC/UPC"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm font-bold text-secondary ml-1 tracking-tight">Size / Length</label>
|
||||
<input
|
||||
type="text"
|
||||
value={editedItem.size || ''}
|
||||
onChange={e => setEditedItem({...editedItem, size: e.target.value})}
|
||||
className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm outline-none text-secondary"
|
||||
placeholder="e.g. 5m / 1600GB"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2">
|
||||
<label className="text-sm font-bold text-secondary ml-1 tracking-tight">Item Color</label>
|
||||
<input
|
||||
type="text"
|
||||
value={editedItem.color || ''}
|
||||
onChange={e => setEditedItem({...editedItem, color: e.target.value})}
|
||||
className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm outline-none text-secondary"
|
||||
placeholder="e.g. Black"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2">
|
||||
<label className="text-sm font-bold text-secondary ml-1">Description</label>
|
||||
<textarea
|
||||
value={editedItem.description || ''}
|
||||
onChange={e => setEditedItem({ ...editedItem, description: e.target.value })}
|
||||
className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm outline-none text-secondary resize-none h-20"
|
||||
placeholder="Item description..."
|
||||
/>
|
||||
</div>
|
||||
<div className="bg-surface py-2.5 px-4 rounded-[1.2rem] border border-slate-800 focus-within:border-primary/50 transition-colors group">
|
||||
<label className="text-xs text-secondary font-bold mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight">Item ID or Code</label>
|
||||
<textarea
|
||||
value={editedItem.ocr_text || ''}
|
||||
onChange={e => setEditedItem({ ...editedItem, ocr_text: e.target.value })}
|
||||
className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm font-bold outline-none text-secondary resize-none h-12"
|
||||
placeholder="e.g., SKU-12345 or barcode text..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
|
||||
<div className="flex p-1 bg-background rounded-2xl mb-8">
|
||||
{[
|
||||
{ id: 'ADD', label: 'Buy More', icon: Plus, color: 'text-primary' },
|
||||
{ id: 'REMOVE', label: 'Subtract', icon: Minus, color: 'text-amber-500' },
|
||||
{ id: 'TRASH', label: 'Discard', icon: Trash2, color: 'text-red-500' }
|
||||
].map((t) => (
|
||||
<button
|
||||
key={t.id}
|
||||
onClick={() => setAdjustType(t.id as any)}
|
||||
className={cn(
|
||||
"flex-1 flex flex-col items-center py-3 rounded-xl transition-all",
|
||||
adjustType === t.id ? "bg-slate-800 shadow-lg" : "text-muted"
|
||||
)}
|
||||
>
|
||||
<t.icon size={20} className={adjustType === t.id ? t.color : ""} />
|
||||
<span className="text-xs font-black mt-1">{t.label}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center gap-6 mb-8">
|
||||
<div className="flex items-center gap-8">
|
||||
<button
|
||||
onClick={() => setAdjustQty(Math.max(1, adjustQty - 1))}
|
||||
className="w-12 h-12 rounded-full border border-slate-800 flex items-center justify-center text-secondary active:bg-slate-800"
|
||||
>
|
||||
<Minus size={24} />
|
||||
</button>
|
||||
<div className="text-center" data-testid="adjustment-quantity-input">
|
||||
<span className="text-xs font-black tabular-nums">{adjustQty}</span>
|
||||
<span className="text-[10px] text-primary/80 font-bold tracking-tight">Units</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setAdjustQty(adjustQty + 1)}
|
||||
className="w-12 h-12 rounded-full border border-slate-800 flex items-center justify-center text-secondary active:bg-slate-800"
|
||||
>
|
||||
<Plus size={24} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{adjustType === 'TRASH' && (
|
||||
<div className="w-full bg-red-500/5 border border-red-500/20 p-4 rounded-2xl animate-in shake duration-500">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<AlertTriangle size={16} className="text-red-500" />
|
||||
<span className="text-sm font-bold text-red-400">Waste Declaration</span>
|
||||
</div>
|
||||
<select
|
||||
value={trashReason}
|
||||
onChange={(e) => setTrashReason(e.target.value)}
|
||||
className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm outline-none text-secondary"
|
||||
>
|
||||
<option>Damaged</option>
|
||||
<option>Expired</option>
|
||||
<option>Lost</option>
|
||||
<option>Technical Failure</option>
|
||||
<option>Other</option>
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<button
|
||||
onClick={isEditing ? handleUpdateItem : handleAdjustStock}
|
||||
data-testid="adjustment-submit"
|
||||
className={cn(
|
||||
"w-full py-5 rounded-[1.8rem] font-black text-lg transition-all active:scale-[0.98] shadow-2xl",
|
||||
isEditing ? "bg-slate-100 text-slate-900" : (
|
||||
adjustType === 'ADD' ? "bg-primary shadow-primary/20 text-white" :
|
||||
adjustType === 'REMOVE' ? "bg-amber-600 shadow-amber-500/20 text-white" :
|
||||
"bg-red-600 shadow-red-500/20 text-white"
|
||||
)
|
||||
)}
|
||||
>
|
||||
{isEditing ? "Save Changes" : (
|
||||
adjustType === 'ADD' ? `Add ${adjustQty} to Stock` :
|
||||
adjustType === 'REMOVE' ? `Subtract ${adjustQty} from Stock` :
|
||||
`Discard ${adjustQty} items`
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
{/* Box Contents Selection Modal */}
|
||||
|
||||
316
frontend/components/StockAdjustmentPanel.tsx
Normal file
316
frontend/components/StockAdjustmentPanel.tsx
Normal file
@@ -0,0 +1,316 @@
|
||||
'use client';
|
||||
|
||||
import { Item } from '@/lib/db';
|
||||
import {
|
||||
Plus,
|
||||
Minus,
|
||||
Trash2,
|
||||
AlertTriangle,
|
||||
X,
|
||||
Edit2,
|
||||
Camera
|
||||
} from 'lucide-react';
|
||||
import { toast } from 'react-hot-toast';
|
||||
import { clsx, type ClassValue } from 'clsx';
|
||||
import { twMerge } from 'tailwind-merge';
|
||||
|
||||
function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs));
|
||||
}
|
||||
|
||||
interface StockAdjustmentPanelProps {
|
||||
selectedItem: Item | null;
|
||||
isEditing: boolean;
|
||||
editedItem: Partial<Item>;
|
||||
adjustQty: number;
|
||||
adjustType: 'ADD' | 'REMOVE' | 'TRASH' | null;
|
||||
trashReason: string;
|
||||
categories: any[];
|
||||
fieldScanning: { active: boolean; field: string } | null;
|
||||
onCancel: () => void;
|
||||
onEdit: (item: Item) => void;
|
||||
onEditChange: (item: Partial<Item>) => void;
|
||||
onQuantityChange: (qty: number) => void;
|
||||
onTypeChange: (type: 'ADD' | 'REMOVE' | 'TRASH') => void;
|
||||
onReasonChange: (reason: string) => void;
|
||||
onShowScanner: (active: boolean, field: string) => void;
|
||||
onAdjustStock: () => void;
|
||||
onUpdateItem: () => void;
|
||||
onDeleteItem: () => void;
|
||||
}
|
||||
|
||||
export default function StockAdjustmentPanel({
|
||||
selectedItem,
|
||||
isEditing,
|
||||
editedItem,
|
||||
adjustQty,
|
||||
adjustType,
|
||||
trashReason,
|
||||
categories,
|
||||
fieldScanning,
|
||||
onCancel,
|
||||
onEdit,
|
||||
onEditChange,
|
||||
onQuantityChange,
|
||||
onTypeChange,
|
||||
onReasonChange,
|
||||
onShowScanner,
|
||||
onAdjustStock,
|
||||
onUpdateItem,
|
||||
onDeleteItem,
|
||||
}: StockAdjustmentPanelProps) {
|
||||
if (!selectedItem) return null;
|
||||
|
||||
return (
|
||||
<div data-testid="stock-adjustment-form" className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-4 bg-background/80 animate-in fade-in duration-200">
|
||||
<div className="w-full max-w-lg bg-surface border border-slate-800 rounded-[2.5rem] shadow-2xl p-6 overflow-hidden animate-in slide-in-from-bottom-10 duration-300">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h3 className="text-xl font-black tracking-tight flex items-center gap-2">
|
||||
<span data-testid="adjustment-item-name">{isEditing ? "Edit Metadata" : selectedItem.name}</span>
|
||||
{!isEditing && (
|
||||
<span data-testid="current-quantity" className="text-[11px] bg-slate-800 text-secondary px-2 py-0.5 rounded-md font-black tracking-tight shadow-sm border border-slate-700/50">
|
||||
In Stock: {selectedItem.quantity}
|
||||
</span>
|
||||
)}
|
||||
</h3>
|
||||
<div className="flex gap-2">
|
||||
{!isEditing && (
|
||||
<button
|
||||
onClick={() => onEdit(selectedItem)}
|
||||
className="p-2 hover:bg-slate-800 rounded-full text-secondary"
|
||||
>
|
||||
<Edit2 size={20} />
|
||||
</button>
|
||||
)}
|
||||
{isEditing && (
|
||||
<button
|
||||
onClick={onDeleteItem}
|
||||
className="p-2 hover:bg-red-500/20 rounded-full text-red-500"
|
||||
>
|
||||
<Trash2 size={20} />
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={onCancel}
|
||||
data-testid="adjustment-cancel"
|
||||
className="p-2 hover:bg-slate-800 rounded-full"
|
||||
>
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isEditing ? (
|
||||
<div className="space-y-4 mb-8">
|
||||
<div>
|
||||
<div className="bg-surface py-2.5 px-4 rounded-[1.2rem] border border-slate-800 focus-within:border-primary/50 transition-colors group">
|
||||
<label className="text-xs text-secondary font-bold mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight">Item Name</label>
|
||||
<textarea
|
||||
value={editedItem.name || ''}
|
||||
onChange={(e) => onEditChange({ ...editedItem, name: e.target.value })}
|
||||
className="bg-transparent w-full text-lg font-bold outline-none text-white placeholder:text-muted resize-none h-8 leading-tight selection:bg-primary/30 py-0"
|
||||
placeholder="SSD, SFP, Cable..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm font-bold text-secondary ml-1 tracking-tight">Part Number</label>
|
||||
<input
|
||||
type="text"
|
||||
value={editedItem.part_number || ''}
|
||||
onChange={e => onEditChange({ ...editedItem, part_number: e.target.value })}
|
||||
className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm font-mono outline-none text-secondary"
|
||||
placeholder="e.g. PN-12345"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="text-sm font-bold text-secondary ml-1 tracking-tight">Category Group</label>
|
||||
<input
|
||||
type="text"
|
||||
list="existing-categories"
|
||||
value={editedItem.category || ''}
|
||||
onChange={e => onEditChange({ ...editedItem, category: e.target.value })}
|
||||
className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm outline-none text-secondary placeholder:text-muted"
|
||||
placeholder="e.g. storage"
|
||||
/>
|
||||
<datalist id="existing-categories">
|
||||
{categories.map(c => (
|
||||
<option key={c.id} value={c.name} />
|
||||
))}
|
||||
</datalist>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm font-bold text-secondary ml-1 tracking-tight">Item Type</label>
|
||||
<input
|
||||
type="text"
|
||||
list="existing-types"
|
||||
value={editedItem.type || ''}
|
||||
onChange={e => onEditChange({...editedItem, type: e.target.value})}
|
||||
className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm outline-none text-secondary"
|
||||
placeholder="e.g. spare parts"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2">
|
||||
<label className="text-sm font-bold text-secondary ml-1">Box / Container Label</label>
|
||||
<div className="relative flex items-center">
|
||||
<input
|
||||
type="text"
|
||||
list="existing-boxes"
|
||||
value={editedItem.box_label || ''}
|
||||
onChange={e => onEditChange({...editedItem, box_label: e.target.value})}
|
||||
className="w-full bg-background border border-slate-800 rounded-xl py-3 pl-4 pr-12 text-sm outline-none text-secondary placeholder:text-muted focus:border-primary transition-colors"
|
||||
placeholder="e.g. SFPs 40G Cisco"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
onShowScanner(true, 'box_label');
|
||||
toast.success("Scanning for BOX label...");
|
||||
}}
|
||||
className={cn(
|
||||
"absolute right-2 p-2 rounded-lg transition-all",
|
||||
fieldScanning?.active ? "bg-primary text-white animate-pulse" : "text-muted hover:bg-slate-800"
|
||||
)}
|
||||
>
|
||||
<Camera size={18} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm font-bold text-secondary ml-1 tracking-tight">Connector</label>
|
||||
<input
|
||||
type="text"
|
||||
value={editedItem.connector || ''}
|
||||
onChange={e => onEditChange({...editedItem, connector: e.target.value})}
|
||||
className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm outline-none text-secondary"
|
||||
placeholder="e.g. LC/UPC"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm font-bold text-secondary ml-1 tracking-tight">Size / Length</label>
|
||||
<input
|
||||
type="text"
|
||||
value={editedItem.size || ''}
|
||||
onChange={e => onEditChange({...editedItem, size: e.target.value})}
|
||||
className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm outline-none text-secondary"
|
||||
placeholder="e.g. 5m / 1600GB"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2">
|
||||
<label className="text-sm font-bold text-secondary ml-1 tracking-tight">Item Color</label>
|
||||
<input
|
||||
type="text"
|
||||
value={editedItem.color || ''}
|
||||
onChange={e => onEditChange({...editedItem, color: e.target.value})}
|
||||
className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm outline-none text-secondary"
|
||||
placeholder="e.g. Black"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2">
|
||||
<label className="text-sm font-bold text-secondary ml-1">Description</label>
|
||||
<textarea
|
||||
value={editedItem.description || ''}
|
||||
onChange={e => onEditChange({ ...editedItem, description: e.target.value })}
|
||||
className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm outline-none text-secondary resize-none h-20"
|
||||
placeholder="Item description..."
|
||||
/>
|
||||
</div>
|
||||
<div className="bg-surface py-2.5 px-4 rounded-[1.2rem] border border-slate-800 focus-within:border-primary/50 transition-colors group">
|
||||
<label className="text-xs text-secondary font-bold mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight">Item ID or Code</label>
|
||||
<textarea
|
||||
value={editedItem.ocr_text || ''}
|
||||
onChange={e => onEditChange({ ...editedItem, ocr_text: e.target.value })}
|
||||
className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm font-bold outline-none text-secondary resize-none h-12"
|
||||
placeholder="e.g., SKU-12345 or barcode text..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex p-1 bg-background rounded-2xl mb-8">
|
||||
{[
|
||||
{ id: 'ADD', label: 'Buy More', icon: Plus, color: 'text-primary' },
|
||||
{ id: 'REMOVE', label: 'Subtract', icon: Minus, color: 'text-amber-500' },
|
||||
{ id: 'TRASH', label: 'Discard', icon: Trash2, color: 'text-red-500' }
|
||||
].map((t) => (
|
||||
<button
|
||||
key={t.id}
|
||||
onClick={() => onTypeChange(t.id as 'ADD' | 'REMOVE' | 'TRASH')}
|
||||
className={cn(
|
||||
"flex-1 flex flex-col items-center py-3 rounded-xl transition-all",
|
||||
adjustType === t.id ? "bg-slate-800 shadow-lg" : "text-muted"
|
||||
)}
|
||||
>
|
||||
<t.icon size={20} className={adjustType === t.id ? t.color : ""} />
|
||||
<span className="text-xs font-black mt-1">{t.label}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center gap-6 mb-8">
|
||||
<div className="flex items-center gap-8">
|
||||
<button
|
||||
onClick={() => onQuantityChange(Math.max(1, adjustQty - 1))}
|
||||
className="w-12 h-12 rounded-full border border-slate-800 flex items-center justify-center text-secondary active:bg-slate-800"
|
||||
>
|
||||
<Minus size={24} />
|
||||
</button>
|
||||
<div className="text-center" data-testid="adjustment-quantity-input">
|
||||
<span className="text-xs font-black tabular-nums">{adjustQty}</span>
|
||||
<span className="text-[10px] text-primary/80 font-bold tracking-tight">Units</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => onQuantityChange(adjustQty + 1)}
|
||||
className="w-12 h-12 rounded-full border border-slate-800 flex items-center justify-center text-secondary active:bg-slate-800"
|
||||
>
|
||||
<Plus size={24} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{adjustType === 'TRASH' && (
|
||||
<div className="w-full bg-red-500/5 border border-red-500/20 p-4 rounded-2xl animate-in shake duration-500">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<AlertTriangle size={16} className="text-red-500" />
|
||||
<span className="text-sm font-bold text-red-400">Waste Declaration</span>
|
||||
</div>
|
||||
<select
|
||||
value={trashReason}
|
||||
onChange={(e) => onReasonChange(e.target.value)}
|
||||
className="w-full bg-background border border-slate-800 rounded-xl py-3 px-4 text-sm outline-none text-secondary"
|
||||
>
|
||||
<option>Damaged</option>
|
||||
<option>Expired</option>
|
||||
<option>Lost</option>
|
||||
<option>Technical Failure</option>
|
||||
<option>Other</option>
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<button
|
||||
onClick={isEditing ? onUpdateItem : onAdjustStock}
|
||||
data-testid="adjustment-submit"
|
||||
className={cn(
|
||||
"w-full py-5 rounded-[1.8rem] font-black text-lg transition-all active:scale-[0.98] shadow-2xl",
|
||||
isEditing ? "bg-slate-100 text-slate-900" : (
|
||||
adjustType === 'ADD' ? "bg-primary shadow-primary/20 text-white" :
|
||||
adjustType === 'REMOVE' ? "bg-amber-600 shadow-amber-500/20 text-white" :
|
||||
"bg-red-600 shadow-red-500/20 text-white"
|
||||
)
|
||||
)}
|
||||
>
|
||||
{isEditing ? "Save Changes" : (
|
||||
adjustType === 'ADD' ? `Add ${adjustQty} to Stock` :
|
||||
adjustType === 'REMOVE' ? `Subtract ${adjustQty} from Stock` :
|
||||
`Discard ${adjustQty} items`
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user