@apptimate/ui 3.4.0 → 3.6.0

package/src/common-components/transaction/ProductSelectionPanel.tsx

@@ -0,0 +1,587 @@
+'use client';
+
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import { cn } from '@apptimate/core-lib';
+import {
+  Search, ScanBarcode, X, ShoppingCart, Package, Loader2,
+  Trash2, ChevronDown, ChevronRight, AlertTriangle
+} from 'lucide-react';
+import { Badge } from '../../base-components/Badge';
+import { Table, THeader, TBody, TRow, TCell } from '../../base-components/Table';
+import { transactionLookup, getItemBatches } from '@apptimate/core-lib';
+import type { TransactionItem, TransactionLineItem, TransactionScreenConfig } from './types';
+import { BatchSelectionModal, SerialSelectionModal } from "../pickers";
+
+interface ProductSelectionPanelProps {
+  config: TransactionScreenConfig;
+  warehouseId?: number;
+  lineItems: TransactionLineItem[];
+  onAddItem: (item: TransactionItem, variant?: any, extraData?: { quantity?: number; batches?: any[]; serial_numbers?: string[] }) => void;
+  onUpdateLine: (uid: string, updates: Partial<TransactionLineItem>) => void;
+  onRemoveLine: (uid: string) => void;
+  onToggleExpand: (uid: string) => void;
+}
+
+export function ProductSelectionPanel({
+  config,
+  warehouseId,
+  lineItems,
+  onAddItem,
+  onUpdateLine,
+  onRemoveLine,
+  onToggleExpand,
+}: ProductSelectionPanelProps) {
+  const [searchValue, setSearchValue] = useState('');
+  const [searchResults, setSearchResults] = useState<TransactionItem[]>([]);
+  const [showResults, setShowResults] = useState(false);
+  const [isSearching, setIsSearching] = useState(false);
+  const [expandedItemIds, setExpandedItemIds] = useState<number[]>([]);
+  const [editingRates, setEditingRates] = useState<Record<string, string>>({});
+
+  const [activeBatchItem, setActiveBatchItem] = useState<{ item: TransactionItem; variant?: any } | null>(null);
+  const [activeBatchLineUid, setActiveBatchLineUid] = useState<string | null>(null);
+  const [activeSerialItem, setActiveSerialItem] = useState<{ item: TransactionItem; variant?: any } | null>(null);
+  const [activeSerialLineUid, setActiveSerialLineUid] = useState<string | null>(null);
+  const searchTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+  const panelRef = React.useRef<HTMLDivElement>(null);
+
+
+  // ── Search handler ──
+  const handleSearch = useCallback(
+    (value: string) => {
+      setSearchValue(value);
+      if (searchTimeoutRef.current) clearTimeout(searchTimeoutRef.current);
+
+      if (value.length < 1) {
+        setSearchResults([]);
+        setShowResults(false);
+        return;
+      }
+
+      searchTimeoutRef.current = setTimeout(async () => {
+        setIsSearching(true);
+        try {
+          const params: Record<string, string | number> = { search: value, limit: 20, type: config.type };
+          if (warehouseId) params.warehouse_id = warehouseId;
+          const res = await transactionLookup(params);
+          if (res.is_success) {
+            const results = res.result || [];
+            setSearchResults(results);
+            setExpandedItemIds(results.filter((i: any) => i.has_variants).map((i: any) => i.id));
+            setShowResults(true);
+          }
+        } finally {
+          setIsSearching(false);
+        }
+      }, 250);
+    },
+    [warehouseId]
+  );
+
+  // ── Select item → check tracking type or add to cart ──
+  const handleSelectItem = useCallback(
+    (item: TransactionItem, variant?: any) => {
+      setSearchValue('');
+      setSearchResults([]);
+      setShowResults(false);
+
+      if (item.tracking_type === 'batch') {
+        setActiveBatchItem({ item, variant });
+      } else if (item.tracking_type === 'serial') {
+        setActiveSerialItem({ item, variant });
+      } else {
+        onAddItem(item, variant);
+      }
+    },
+    [onAddItem]
+  );
+
+  const handleBatchConfirm = (selections: { batch: any; quantity: number }[]) => {
+    const batchesData = selections.map(sel => ({
+      batch_id: sel.batch.id > 0 ? sel.batch.id : null, 
+      batch_number: sel.batch.batch_number,
+      manufacturing_date: sel.batch.manufacturing_date,
+      expiry_date: sel.batch.expiry_date,
+      supplier_reference: sel.batch.supplier_reference,
+      selling_price: sel.batch.selling_price,
+      quantity: sel.quantity 
+    }));
+    const totalQty = batchesData.reduce((sum, b) => sum + b.quantity, 0);
+
+    if (activeBatchItem) {
+      onAddItem(activeBatchItem.item, activeBatchItem.variant, { 
+        batches: batchesData,
+        quantity: totalQty > 0 ? totalQty : 1
+      });
+      setActiveBatchItem(null);
+    }
+  };
+
+  const handleSerialConfirm = (serials: string[]) => {
+    if (!activeSerialItem) return;
+    onAddItem(activeSerialItem.item, activeSerialItem.variant, { serial_numbers: serials, quantity: serials.length });
+    setActiveSerialItem(null);
+  };
+
+  // Close dropdown on click outside
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (panelRef.current && !panelRef.current.contains(e.target as Node)) {
+        setShowResults(false);
+      }
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, []);
+
+  const formatCurrency = (v: number | string) => Number(v).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+
+  // ── Update inline input ──
+  const updateLineInput = (uid: string, field: 'quantity' | 'unit_price', value: string) => {
+    const num = value === '' ? 0 : Number(value);
+    const line = lineItems.find(l => l.uid === uid);
+    if (!line) return;
+    
+    let qty = line.quantity;
+    let price = line.unit_price;
+    
+    if (field === 'quantity') qty = Math.max(0.001, num);
+    if (field === 'unit_price') price = Math.max(0, num);
+    
+    const discAmt = (price * qty * line.discount_percent) / 100;
+    
+    onUpdateLine(uid, {
+      quantity: qty,
+      unit_price: price,
+      discount_amount: discAmt,
+      line_total: price * qty - discAmt,
+    });
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* ── Search Bar ── */}
+      <div ref={panelRef} className="relative mb-4">
+        <div className="flex items-center gap-2 bg-surface-0 border-[1.5px] border-border-subtle rounded-[12px] px-4 py-2.5 focus-within:border-primary/50 transition-all">
+          <Search size={18} className="text-foreground-disabled shrink-0" />
+          <input
+            type="text"
+            placeholder={
+              config.requireWarehouseFirst && !warehouseId
+                ? "Select a warehouse first to search items..."
+                : "Search by name, SKU, or scan barcode..."
+            }
+            value={searchValue}
+            onChange={(e) => handleSearch(e.target.value)}
+            onFocus={() => searchResults.length > 0 && setShowResults(true)}
+            disabled={config.requireWarehouseFirst && !warehouseId}
+            className={cn(
+              "flex-1 bg-transparent text-[13.5px] text-foreground-1 outline-none placeholder:text-foreground-disabled",
+              config.requireWarehouseFirst && !warehouseId && "cursor-not-allowed"
+            )}
+            autoComplete="off"
+            spellCheck={false}
+          />
+          {isSearching && <Loader2 size={16} className="animate-spin text-primary shrink-0" />}
+          <ScanBarcode size={18} className="text-foreground-disabled shrink-0 cursor-pointer hover:text-primary transition-colors" />
+        </div>
+
+        {/* ── Search Results Dropdown ── */}
+        {showResults && searchResults.length > 0 && (
+          <div className="absolute z-50 top-full mt-1 left-0 right-0 bg-surface-1 border border-border-subtle rounded-[12px] shadow-xl max-h-[calc(100vh-220px)] overflow-y-auto custom-scrollbar">
+            {searchResults.map((item) => (
+              <div key={item.id} className="flex flex-col border-b border-border-subtle/50 last:border-0">
+                <button
+                  onClick={() => {
+                    if (item.has_variants) {
+                      setExpandedItemIds(prev => prev.includes(item.id) ? prev.filter(id => id !== item.id) : [...prev, item.id]);
+                    } else {
+                      handleSelectItem(item);
+                    }
+                  }}
+                  className={cn("w-full flex items-center gap-3 px-4 py-3 text-left hover:bg-surface-hover transition-colors", expandedItemIds.includes(item.id) && "bg-surface-hover")}
+                >
+                  {/* Product thumbnail */}
+                  <div className="w-9 h-9 rounded-[8px] bg-surface-0 flex items-center justify-center shrink-0 overflow-hidden">
+                    {item.primary_image?.url || item.image_url ? (
+                      <img
+                        src={item.primary_image?.url || item.image_url}
+                        alt={item.name}
+                        className="w-full h-full object-cover"
+                      />
+                    ) : (
+                      <Package size={16} className="text-foreground-disabled" />
+                    )}
+                  </div>
+
+                  {/* Product info */}
+                  <div className="flex-1 min-w-0">
+                    <div className="text-[13px] font-medium text-foreground-1 truncate">{item.name}</div>
+                    <div className="text-[11px] text-foreground-subtle flex items-center gap-2 mt-0.5">
+                      <span className="font-mono">{item.sku}</span>
+                      {item.has_variants && (
+                        <Badge variant="flat" color="default" size="small">
+                          {item.variants?.length || 0} variants
+                        </Badge>
+                      )}
+                    </div>
+                  </div>
+
+                  {/* Price + stock + Chevron */}
+                  <div className="text-right shrink-0 flex items-center gap-3">
+                    <div className="flex flex-col items-end">
+                      {config.showPrices && (
+                        <div className="text-[13px] font-semibold text-foreground-1">
+                          {formatCurrency(item.variants?.[0]?.[config.priceField === 'default_cost_price' ? 'cost_price' : 'sale_price'] || 0)}
+                        </div>
+                      )}
+                      {config.showStock && item.stock && (
+                        <div className={cn(
+                          "text-[11px] font-medium",
+                          item.stock.qty_available > 0 ? "text-green-600" : "text-danger-alt"
+                        )}>
+                          {item.stock.qty_available} {item.uom?.abbreviation || 'pcs'}
+                        </div>
+                      )}
+                    </div>
+                    {item.has_variants && (
+                      <ChevronRight 
+                        size={16} 
+                        className={cn("text-foreground-disabled transition-transform", expandedItemIds.includes(item.id) && "rotate-90")} 
+                      />
+                    )}
+                  </div>
+                </button>
+
+                {/* Variants Tree */}
+                {item.has_variants && expandedItemIds.includes(item.id) && (
+                  <div className="relative flex flex-col pb-2 bg-surface-0">
+                    {/* Vertical connecting line for the tree (aligned with thumbnail center at 34px) */}
+                    <div className="absolute left-[34px] top-0 bottom-[24px] w-px bg-border-subtle" />
+                    
+                    <div className="pl-[52px] pr-4 flex flex-col gap-0.5 mt-1">
+                      {item.variants?.map((variant: any) => (
+                        <button
+                          key={variant.id}
+                          onClick={() => handleSelectItem(item, variant)}
+                          className="relative flex items-center justify-between py-2 px-3 rounded-[6px] hover:bg-surface-hover transition-colors text-left group"
+                        >
+                          {/* Horizontal connecting line to variant */}
+                          <div className="absolute left-[-18px] top-1/2 w-[18px] h-px bg-border-subtle" />
+                          <div className="flex flex-col">
+                          <span className="text-[12.5px] font-medium text-foreground-1">
+                            {variant.variant_name}
+                          </span>
+                          <span className="text-[11px] font-mono text-foreground-subtle mt-0.5">
+                            {variant.sku}
+                          </span>
+                        </div>
+                        <div className="text-right shrink-0 flex items-center gap-4">
+                          {config.showPrices && (
+                            <div className="text-[12.5px] font-semibold text-foreground-1 min-w-[70px] text-right">
+                              {formatCurrency(variant[config.priceField === 'default_cost_price' ? 'cost_price' : 'sale_price'] || item.variants?.[0]?.[config.priceField === 'default_cost_price' ? 'cost_price' : 'sale_price'] || 0)}
+                            </div>
+                          )}
+                          {config.showStock && variant.stock && (
+                            <div className={cn(
+                              "text-[11.5px] font-medium min-w-[50px] text-right",
+                              variant.stock.qty_available > 0 ? "text-green-600" : "text-danger-alt"
+                            )}>
+                              {variant.stock.qty_available} {item.uom?.abbreviation || 'pcs'}
+                            </div>
+                          )}
+                          <span className="text-[11px] font-medium text-primary opacity-0 group-hover:opacity-100 transition-opacity w-[40px] text-right">
+                            Select
+                          </span>
+                        </div>
+                      </button>
+                    ))}
+                    {(!item.variants || item.variants.length === 0) && (
+                      <div className="text-[12px] text-foreground-disabled italic py-2 px-3 relative">
+                        <div className="absolute left-[-18px] top-1/2 w-[18px] h-px bg-border-subtle" />
+                        No active variants found.
+                      </div>
+                    )}
+                    </div>
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+
+        {showResults && searchResults.length === 0 && searchValue.length > 0 && !isSearching && (
+          <div className="absolute z-50 top-full mt-1 left-0 right-0 bg-surface-1 border border-border-subtle rounded-[12px] shadow-xl px-4 py-6 text-center">
+            <p className="text-[13px] text-foreground-disabled">No items found for &quot;{searchValue}&quot;</p>
+          </div>
+        )}
+      </div>
+
+      {/* ── Selected Items Table ── */}
+      <div className="flex-1 overflow-y-auto custom-scrollbar w-full">
+        {lineItems.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-16 text-center h-full">
+            <div className="w-16 h-16 rounded-full bg-surface-hover flex items-center justify-center mb-4">
+              <ShoppingCart size={24} className="text-foreground-disabled" />
+            </div>
+            <p className="text-[14px] font-medium text-foreground-subtle mb-1">No items added</p>
+            <p className="text-[12px] text-foreground-disabled">Search for products above to add them</p>
+          </div>
+        ) : (
+          <Table>
+            <THeader>
+              <TRow>
+                <TCell isHeader className="w-[45%]">Item</TCell>
+                <TCell isHeader>Qty</TCell>
+                {config.showPrices && <TCell isHeader>Rate</TCell>}
+                {config.showPrices && <TCell isHeader className="text-right">Total</TCell>}
+                <TCell isHeader className="w-10 text-center"></TCell>
+              </TRow>
+            </THeader>
+            <TBody>
+              {lineItems.map((line) => (
+                <TRow key={line.uid}>
+                  <TCell label="Item" className="py-2.5">
+                    <div className="flex items-start gap-3">
+                      <div className="w-8 h-8 rounded-[6px] bg-surface-hover flex items-center justify-center shrink-0 overflow-hidden mt-0.5">
+                        {line.item.primary_image?.url || line.item.image_url ? (
+                          <img src={line.item.primary_image?.url || line.item.image_url} alt={line.item.name} className="w-full h-full object-cover" />
+                        ) : (
+                          <Package size={14} className="text-foreground-disabled" />
+                        )}
+                      </div>
+                      <div className="flex flex-col flex-1 min-w-0">
+                        <span className="text-[13px] font-semibold text-foreground-1 leading-tight break-words">{line.item.name}</span>
+                        <span className="text-[11px] text-foreground-subtle font-mono mt-0.5 break-words">
+                          {line.variant_id && line.item.variants?.find(v => v.id === line.variant_id)?.sku 
+                            ? line.item.variants.find(v => v.id === line.variant_id)?.sku 
+                            : line.item.sku}
+                        </span>
+                        {(line.variant_id || (line.batches && line.batches.length > 0) || (line.serial_numbers && line.serial_numbers.length > 0)) && (
+                          <div className="flex flex-wrap gap-1 mt-1.5">
+                            {line.variant_id && line.item.variants?.find(v => v.id === line.variant_id) && (
+                              <Badge variant="flat" color="primary" className="text-[10px] px-1.5 py-0">
+                                {line.item.variants.find(v => v.id === line.variant_id)?.variant_name}
+                              </Badge>
+                            )}
+                            {line.item.tracking_type === 'batch' && (() => {
+                              const batchesCount = line.batches?.length || 0;
+                              const selectedTotal = line.batches?.reduce((sum, b) => sum + b.quantity, 0) || 0;
+                              const isMismatch = selectedTotal !== line.quantity;
+                              return (
+                                <button
+                                  onClick={() => setActiveBatchLineUid(line.uid)}
+                                  className={cn(
+                                    "mt-1 flex items-center gap-1.5 text-[11.5px] font-medium transition-colors hover:underline text-left",
+                                    isMismatch
+                                      ? "text-warning-600 hover:text-warning-700"
+                                      : "text-primary"
+                                  )}
+                                >
+                                  {batchesCount > 0 ? (
+                                    isMismatch ? (
+                                      <><AlertTriangle size={12} className="mb-[1px]" /> <span>{selectedTotal} / {line.quantity} Selected</span></>
+                                    ) : (
+                                      <>✓ {batchesCount} Batches Selected</>
+                                    )
+                                  ) : (
+                                    <><AlertTriangle size={12} className="mb-[1px]" /> <span>Select Batches</span></>
+                                  )}
+                                </button>
+                              );
+                            })()}
+                            {line.item.tracking_type === 'serial' && (() => {
+                              const selectedCount = line.serial_numbers?.length || 0;
+                              const isMismatch = selectedCount !== line.quantity;
+                              return (
+                                <button
+                                  onClick={() => setActiveSerialLineUid(line.uid)}
+                                  className={cn(
+                                    "mt-1 flex items-center gap-1.5 text-[11.5px] font-medium transition-colors hover:underline text-left",
+                                    isMismatch
+                                      ? "text-warning-600 hover:text-warning-700"
+                                      : "text-primary"
+                                  )}
+                                >
+                                  {selectedCount > 0 ? (
+                                    isMismatch ? (
+                                      <><AlertTriangle size={12} className="mb-[1px]" /> <span>{selectedCount} / {line.quantity} Serials Selected</span></>
+                                    ) : (
+                                      <>✓ {selectedCount} Serials Selected</>
+                                    )
+                                  ) : (
+                                    <><AlertTriangle size={12} className="mb-[1px]" /> <span>Select Serial Numbers</span></>
+                                  )}
+                                </button>
+                              );
+                            })()}
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  </TCell>
+                  
+                  <TCell label="Qty" className="py-2.5">
+                    <input
+                      type="number"
+                      value={line.quantity}
+                      onChange={(e) => updateLineInput(line.uid, 'quantity', e.target.value)}
+                      className="w-20 h-8 px-2 text-[13px] text-center font-medium bg-surface-1 border border-border-subtle rounded-md focus:border-primary/50 focus:outline-none transition-colors"
+                      min={0.001}
+                      step="any"
+                    />
+                  </TCell>
+
+                  {config.showPrices && (
+                    <TCell label="Rate" className="py-2.5">
+                      <input
+                        type="text"
+                        value={editingRates[line.uid] ?? line.unit_price.toFixed(2)}
+                        onChange={(e) => {
+                          const val = e.target.value;
+                          if (/^\d*\.?\d{0,2}$/.test(val)) {
+                            setEditingRates(prev => ({ ...prev, [line.uid]: val }));
+                            updateLineInput(line.uid, 'unit_price', val);
+                          }
+                        }}
+                        onBlur={() => {
+                          setEditingRates(prev => {
+                            const next = { ...prev };
+                            delete next[line.uid];
+                            return next;
+                          });
+                        }}
+                        disabled={!config.allowEditPrice}
+                        className={cn(
+                          "w-24 h-8 px-2 text-[13px] text-right font-medium bg-surface-1 border border-border-subtle rounded-md focus:border-primary/50 focus:outline-none transition-colors",
+                          !config.allowEditPrice && "opacity-60 cursor-not-allowed bg-surface-hover border-transparent"
+                        )}
+                      />
+                    </TCell>
+                  )}
+
+                  {config.showPrices && (
+                    <TCell label="Total" className="text-right py-2.5 font-semibold text-[13px] text-foreground-1">
+                      {formatCurrency(line.line_total)}
+                    </TCell>
+                  )}
+
+                  <TCell className="text-center py-2.5">
+                    <button
+                      onClick={() => onRemoveLine(line.uid)}
+                      className="w-7 h-7 inline-flex items-center justify-center rounded-md text-foreground-disabled hover:bg-danger-alt/10 hover:text-danger-alt transition-colors"
+                      title="Remove Item"
+                    >
+                      <Trash2 size={16} />
+                    </button>
+                  </TCell>
+                </TRow>
+              ))}
+            </TBody>
+          </Table>
+        )}
+      </div>
+
+      {activeSerialLineUid && (
+        <SerialSelectionModal
+          isOpen={true}
+          onClose={() => setActiveSerialLineUid(null)}
+          item={lineItems.find(l => l.uid === activeSerialLineUid)?.item || null}
+          variant={
+            (() => {
+              const line = lineItems.find(l => l.uid === activeSerialLineUid);
+              return line?.variant_id ? line.item.variants?.find(v => v.id === line.variant_id) || null : null;
+            })()
+          }
+          warehouseId={warehouseId}
+          allowCreate={config.allowCreateBatchAndSerial}
+          initialSerials={lineItems.find(l => l.uid === activeSerialLineUid)?.serial_numbers || []}
+          onConfirm={(serials) => {
+            const line = lineItems.find(l => l.uid === activeSerialLineUid);
+            if (!line) return;
+            
+            const newQty = serials.length;
+            const discAmt = (line.unit_price * newQty * line.discount_percent) / 100;
+            
+            onUpdateLine(line.uid, {
+              serial_numbers: serials,
+              quantity: newQty,
+              discount_amount: discAmt,
+              line_total: line.unit_price * newQty - discAmt,
+            });
+            setActiveSerialLineUid(null);
+          }}
+        />
+      )}
+
+      {/* ── Totals Bar ── */}
+      {lineItems.length > 0 && (
+        <div className="mt-3 pt-3 border-t border-border-subtle">
+          <div className="flex items-center justify-between text-[12px] text-foreground-subtle">
+            <span>{lineItems.length} item{lineItems.length > 1 ? 's' : ''} · {lineItems.reduce((s, l) => s + l.quantity, 0)} units</span>
+            {config.showPrices && (
+              <span className="text-[15px] font-bold text-foreground-0">
+                {formatCurrency(lineItems.reduce((s, l) => s + l.line_total, 0))}
+              </span>
+            )}
+          </div>
+        </div>
+      )}
+
+      <BatchSelectionModal
+        isOpen={!!activeBatchItem || !!activeBatchLineUid}
+        onClose={() => { setActiveBatchItem(null); setActiveBatchLineUid(null); }}
+        item={activeBatchItem?.item || lineItems.find(l => l.uid === activeBatchLineUid)?.item || null}
+        variant={
+          activeBatchItem?.variant ||
+          (() => {
+            const line = lineItems.find(l => l.uid === activeBatchLineUid);
+            return line?.variant_id ? line.item.variants?.find(v => v.id === line.variant_id) || null : null;
+          })()
+        }
+        warehouseId={warehouseId}
+        allowMultiple={true}
+        allowCreate={config.allowCreateBatchAndSerial}
+        initialBatches={lineItems.find(l => l.uid === activeBatchLineUid)?.batches || []}
+        onConfirm={(selections) => {
+          if (activeBatchItem) {
+            handleBatchConfirm(selections);
+          } else if (activeBatchLineUid) {
+            const batchesData = selections.map(sel => ({
+              batch_id: sel.batch.id > 0 ? sel.batch.id : null, 
+              batch_number: sel.batch.batch_number,
+              manufacturing_date: sel.batch.manufacturing_date,
+              expiry_date: sel.batch.expiry_date,
+              supplier_reference: sel.batch.supplier_reference,
+              selling_price: sel.batch.selling_price,
+              quantity: sel.quantity 
+            }));
+            const line = lineItems.find(l => l.uid === activeBatchLineUid);
+            if (!line) return;
+            const newQty = batchesData.reduce((sum, b) => sum + b.quantity, 0);
+            const discAmt = (line.unit_price * newQty * line.discount_percent) / 100;
+            
+            onUpdateLine(line.uid, {
+              batches: batchesData,
+              quantity: newQty > 0 ? newQty : 1,
+              discount_amount: discAmt,
+              line_total: line.unit_price * (newQty > 0 ? newQty : 1) - discAmt,
+            });
+            setActiveBatchLineUid(null);
+          }
+        }}
+      />
+
+      <SerialSelectionModal
+        isOpen={!!activeSerialItem}
+        onClose={() => setActiveSerialItem(null)}
+        item={activeSerialItem?.item || null}
+        variant={activeSerialItem?.variant || null}
+        warehouseId={warehouseId}
+        allowCreate={config.allowCreateBatchAndSerial}
+        initialSerials={[]}
+        onConfirm={handleSerialConfirm}
+      />
+    </div>
+  );
+}