From 3302bae7660d6d484b983d79a0a469ce15d94798 Mon Sep 17 00:00:00 2001
From: Daniel Bedeleanu <bede@tfm.ro>
Date: Sun, 19 Apr 2026 14:47:08 +0300
Subject: [PATCH] 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
---
 frontend/app/page.tsx                        | 371 +++----------------
 frontend/components/StockAdjustmentPanel.tsx | 316 ++++++++++++++++
 2 files changed, 358 insertions(+), 329 deletions(-)
 create mode 100644 frontend/components/StockAdjustmentPanel.tsx

diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
index 66607351..adc201f0 100644
--- a/frontend/app/page.tsx
+++ b/frontend/app/page.tsx
@@ -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 */}
diff --git a/frontend/components/StockAdjustmentPanel.tsx b/frontend/components/StockAdjustmentPanel.tsx
new file mode 100644
index 00000000..3709e05e
--- /dev/null
+++ b/frontend/components/StockAdjustmentPanel.tsx
@@ -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>
+  );
+}