@apptimate/ui 3.7.0 → 3.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apptimate/ui",
-  "version": "3.7.0",
+  "version": "3.9.0",
   "main": "src/index.tsx",
   "types": "src/index.tsx",
   "dependencies": {

package/src/base-components/SearchableSelect.tsx

@@ -535,7 +535,7 @@ function SelectCore<T extends Record<string, unknown>>({
                             isSelected(item)
                                 ? 'bg-primary/10 text-primary font-medium'
                                 : 'text-foreground-1',
-                            idx === highlightedIndex && 'bg-surface-hover',
+                            idx === highlightedIndex && 'bg-primary/5',
                             isSelected(item) && idx === highlightedIndex && 'bg-primary/15'
                         )}
                         onClick={(e) => handleOptionClick(e, item)}

package/src/base-components/Textarea.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { cn } from '@apptimate/core-lib';
+import React from 'react';
+import { Label } from './Label';
+
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    label?: string;
+    error?: string;
+    isRequired?: boolean;
+    inputClassName?: string;
+}
+
+export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+    ({ label, error, isRequired, className, inputClassName, rows = 3, ...props }, ref) => {
+        return (
+            <div className={cn("flex flex-col gap-1.5 w-full", className)}>
+                {label && (
+                    <Label isRequired={isRequired}>
+                        {label}
+                    </Label>
+                )}
+                <div className="relative group flex-1 flex flex-col justify-center">
+                    <textarea
+                        ref={ref}
+                        rows={rows}
+                        className={cn(
+                            "w-full bg-surface-0 border-[1.5px] border-border-subtle rounded-[10px] px-3.5 py-2.5 text-[13.5px] text-foreground-1 outline-none transition-all hover:border-gray-300 focus:border-gray-300 focus:bg-surface-1 placeholder:text-foreground-disabled resize-none",
+                            "disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500",
+                            error && "border-danger-alt focus:border-danger-alt hover:border-danger-alt",
+                            inputClassName
+                        )}
+                        {...props}
+                    />
+                </div>
+                {error && <span className="text-[11px] text-danger-alt font-medium">{error}</span>}
+            </div>
+        );
+    }
+);
+
+Textarea.displayName = 'Textarea';

package/src/common-components/pickers/modals/BatchSelectionModal.tsx

@@ -221,8 +221,20 @@ export function BatchSelectionModal({
                 }}
                 placeholder="Select Existing Batch..."
                 option={{ label: 'batch_number', value: 'id', renderOption: (opt: any) => (
-                  <div className="flex justify-between w-full">
-                    <span>{opt.batch_number}</span>
+                  <div className="flex flex-col w-full py-0.5 gap-0.5">
+                    <div className="flex justify-between items-center w-full gap-2">
+                      <span className="truncate font-medium">{opt.batch_number}</span>
+                      {opt.qty_available !== undefined && (
+                        <span className="text-[10px] font-medium text-foreground-subtle bg-surface-hover px-1.5 py-0.5 rounded whitespace-nowrap shrink-0">
+                          {Number(opt.qty_available).toFixed(2)} in stock
+                        </span>
+                      )}
+                    </div>
+                    {opt.expiry_date && (
+                      <span className="text-[10px] text-foreground-subtle">
+                        Exp: {opt.expiry_date.substring(0, 10)}
+                      </span>
+                    )}
                   </div>
                 ) }}
               />
@@ -250,7 +262,11 @@ export function BatchSelectionModal({
             </THeader>
             <TBody>
               {rows.length > 0 ? (
-                rows.map(row => (
+                rows.map(row => {
+                  const batchInfo = batches.find(b => String(b.id) === String(row.batch_id));
+                  const displayQtyAvailable = row.qty_available !== undefined ? row.qty_available : batchInfo?.qty_available;
+                  
+                  return (
                   <TRow key={row.uid}>
                     <TCell label="Batch Number">
                       {row.isNew ? (
@@ -316,14 +332,14 @@ export function BatchSelectionModal({
                         <input 
                           type="number" 
                           min="0"
-                          max={!allowCreate ? row.qty_available : undefined}
+                          max={!allowCreate && displayQtyAvailable !== undefined ? displayQtyAvailable : undefined}
                           value={row.quantity}
                           onChange={(e) => updateRow(row.uid, 'quantity', e.target.value)}
                           placeholder="0"
                           className="w-full 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"
                         />
-                        {!row.isNew && row.qty_available !== undefined && (
-                          <span className="text-[10px] text-gray-400 mt-0.5">Avail: {row.qty_available}</span>
+                        {!row.isNew && displayQtyAvailable !== undefined && (
+                          <span className="text-[10px] text-gray-400 mt-0.5">Avail: {Number(displayQtyAvailable).toFixed(4)}</span>
                         )}
                       </div>
                     </TCell>
@@ -336,7 +352,8 @@ export function BatchSelectionModal({
                       </button>
                     </TCell>
                   </TRow>
-                ))
+                  );
+                })
               ) : (
                 <TRow>
                   <TCell colSpan={7} className="p-8 text-center text-gray-500">

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

@@ -11,7 +11,7 @@ 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";
-
+import { HintIcon } from '../../base-components/HintIcon';
 interface ProductSelectionPanelProps {
   config: TransactionScreenConfig;
   warehouseId?: number;
@@ -37,13 +37,16 @@ export function ProductSelectionPanel({
   const [isSearching, setIsSearching] = useState(false);
   const [expandedItemIds, setExpandedItemIds] = useState<number[]>([]);
   const [editingRates, setEditingRates] = useState<Record<string, string>>({});
+  const [focusedIndex, setFocusedIndex] = useState<number>(-1);
 
-  const [activeBatchItem, setActiveBatchItem] = useState<{ item: TransactionItem; variant?: any } | null>(null);
+  const [activeBatchItem, setActiveBatchItem] = useState<{ item: TransactionItem; variant?: any; preSelectedBatch?: 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 [autoAddEnabled, setAutoAddEnabled] = useState(true);
   const searchTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
   const panelRef = React.useRef<HTMLDivElement>(null);
+  const inputRef = React.useRef<HTMLInputElement>(null);
 
 
   // ── Search handler ──
@@ -64,8 +67,30 @@ export function ProductSelectionPanel({
           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 || [];
+          if (res.is_success && res.result) {
+            const payload = res.result as any;
+            const results = payload.data || (Array.isArray(payload) ? payload : []);
+            const exactMatch = autoAddEnabled ? payload.exact_match : null;
+
+            if (exactMatch) {
+              setSearchValue('');
+              setSearchResults([]);
+              setShowResults(false);
+              
+              const { type: matchType, entity } = exactMatch;
+              if (matchType === 'serial') {
+                onAddItem(entity.item, entity.variant, { serial_numbers: [entity.serial_number], quantity: 1 });
+              } else if (matchType === 'batch') {
+                const batchVariant = entity.variant_id && entity.item?.variants ? entity.item.variants.find((v: any) => v.id === entity.variant_id) : null;
+                setActiveBatchItem({ item: entity.item, variant: batchVariant, preSelectedBatch: entity });
+              } else if (matchType === 'variant') {
+                handleSelectItem(entity.item, entity);
+              } else if (matchType === 'item') {
+                handleSelectItem(entity);
+              }
+              return;
+            }
+
             setSearchResults(results);
             setExpandedItemIds(results.filter((i: any) => i.has_variants).map((i: any) => i.id));
             setShowResults(true);
@@ -75,7 +100,7 @@ export function ProductSelectionPanel({
         }
       }, 250);
     },
-    [warehouseId]
+    [warehouseId, autoAddEnabled, config.type]
   );
 
   // ── Select item → check tracking type or add to cart ──
@@ -109,17 +134,54 @@ export function ProductSelectionPanel({
     const totalQty = batchesData.reduce((sum, b) => sum + b.quantity, 0);
 
     if (activeBatchItem) {
-      onAddItem(activeBatchItem.item, activeBatchItem.variant, { 
-        batches: batchesData,
-        quantity: totalQty > 0 ? totalQty : 1
-      });
+      const resolvedVariantId = activeBatchItem.variant?.id || (activeBatchItem.item.variants && activeBatchItem.item.variants.length > 0 ? activeBatchItem.item.variants[0].id : null);
+      const existingLine = lineItems.find(
+        (l) => l.item.id === activeBatchItem.item.id && 
+               l.variant_id === resolvedVariantId
+      );
+
+      if (existingLine) {
+        const newQty = totalQty > 0 ? totalQty : 1;
+        const discAmt = (existingLine.unit_price * newQty * existingLine.discount_percent) / 100;
+        
+        onUpdateLine(existingLine.uid, {
+          batches: batchesData,
+          quantity: newQty,
+          discount_amount: discAmt,
+          line_total: existingLine.unit_price * newQty - discAmt,
+        });
+      } else {
+        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 });
+
+    const resolvedVariantId = activeSerialItem.variant?.id || (activeSerialItem.item.variants && activeSerialItem.item.variants.length > 0 ? activeSerialItem.item.variants[0].id : null);
+    const existingLine = lineItems.find(
+      (l) => l.item.id === activeSerialItem.item.id && 
+             l.variant_id === resolvedVariantId
+    );
+
+    if (existingLine) {
+      const newQty = serials.length;
+      const discAmt = (existingLine.unit_price * newQty * existingLine.discount_percent) / 100;
+      
+      onUpdateLine(existingLine.uid, {
+        serial_numbers: serials,
+        quantity: newQty,
+        discount_amount: discAmt,
+        line_total: existingLine.unit_price * newQty - discAmt,
+      });
+    } else {
+      onAddItem(activeSerialItem.item, activeSerialItem.variant, { serial_numbers: serials, quantity: serials.length });
+    }
     setActiveSerialItem(null);
   };
 
@@ -137,7 +199,68 @@ export function ProductSelectionPanel({
   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) => {
+  // ── Keyboard Navigation ──
+  const flattenedItems = useMemo(() => {
+    const list: Array<{ type: 'item' | 'variant', item: TransactionItem, variant?: any, key: string }> = [];
+    searchResults.forEach(item => {
+      if (!item.has_variants) {
+        list.push({ type: 'item', item, key: `item-${item.id}` });
+      }
+      if (item.has_variants && expandedItemIds.includes(item.id)) {
+        item.variants?.forEach(variant => {
+          list.push({ type: 'variant', item, variant, key: `variant-${variant.id}` });
+        });
+      }
+    });
+    return list;
+  }, [searchResults, expandedItemIds]);
+
+  useEffect(() => {
+    setFocusedIndex(searchResults.length > 0 ? 0 : -1);
+  }, [searchResults]);
+
+  const focusedKey = flattenedItems[focusedIndex]?.key;
+
+  useEffect(() => {
+    if (focusedKey) {
+      const el = document.getElementById(`dropdown-item-${focusedKey}`);
+      if (el) el.scrollIntoView({ block: 'nearest' });
+    }
+  }, [focusedKey]);
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (!showResults || searchResults.length === 0) return;
+
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      setFocusedIndex(prev => Math.min(prev + 1, flattenedItems.length - 1));
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      setFocusedIndex(prev => Math.max(prev - 1, 0));
+    } else if (e.key === 'Enter') {
+      e.preventDefault();
+      if (focusedIndex >= 0 && focusedIndex < flattenedItems.length) {
+        const focused = flattenedItems[focusedIndex];
+        if (focused.type === 'item') {
+          if (focused.item.has_variants) {
+            setExpandedItemIds(prev => 
+              prev.includes(focused.item.id) 
+                ? prev.filter(id => id !== focused.item.id) 
+                : [...prev, focused.item.id]
+            );
+          } else {
+            handleSelectItem(focused.item);
+          }
+        } else if (focused.type === 'variant') {
+          handleSelectItem(focused.item, focused.variant);
+        }
+      }
+    } else if (e.key === 'Escape') {
+      setShowResults(false);
+    }
+  };
+
+  const updateLineInput = (uid: string, field: 'quantity' | 'unit_price' | 'free_qty' | 'uom_id', value: string) => {
     const num = value === '' ? 0 : Number(value);
     const line = lineItems.find(l => l.uid === uid);
     if (!line) return;
@@ -150,6 +273,16 @@ export function ProductSelectionPanel({
     
     const discAmt = (price * qty * line.discount_percent) / 100;
     
+    if (field === 'free_qty') {
+      onUpdateLine(uid, { free_qty: Math.max(0, num) });
+      return;
+    }
+    
+    if (field === 'uom_id') {
+      onUpdateLine(uid, { uom_id: Number(value) });
+      return;
+    }
+
     onUpdateLine(uid, {
       quantity: qty,
       unit_price: price,
@@ -165,6 +298,7 @@ export function ProductSelectionPanel({
         <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
+            ref={inputRef}
             type="text"
             placeholder={
               config.requireWarehouseFirst && !warehouseId
@@ -174,6 +308,7 @@ export function ProductSelectionPanel({
             value={searchValue}
             onChange={(e) => handleSearch(e.target.value)}
             onFocus={() => searchResults.length > 0 && setShowResults(true)}
+            onKeyDown={handleKeyDown}
             disabled={config.requireWarehouseFirst && !warehouseId}
             className={cn(
               "flex-1 bg-transparent text-[13.5px] text-foreground-1 outline-none placeholder:text-foreground-disabled",
@@ -183,14 +318,48 @@ export function ProductSelectionPanel({
             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 className="flex items-center gap-1.5 ml-1">
+            <HintIcon 
+              text="Automatically adds an item to the list when a barcode is scanned or an exact match is found." 
+              icon={
+                <button
+                  type="button"
+                  onClick={() => setAutoAddEnabled(!autoAddEnabled)}
+                  className={cn(
+                    "relative inline-flex h-5 w-8 shrink-0 cursor-pointer items-center rounded-full transition-colors duration-200 ease-in-out focus:outline-none",
+                    autoAddEnabled ? "bg-primary" : "bg-gray-300"
+                  )}
+                >
+                  <span
+                    className={cn(
+                      "pointer-events-none inline-block h-3.5 w-3.5 transform rounded-full bg-white shadow-sm ring-0 transition duration-200 ease-in-out",
+                      autoAddEnabled ? "translate-x-4" : "translate-x-1"
+                    )}
+                  />
+                </button>
+              }
+            />
+            <div className="w-[1px] h-5 bg-border-subtle mx-1" />
+            <button
+              type="button"
+              onClick={() => inputRef.current?.focus()}
+              title="Click to focus input for barcode scanning"
+              className="flex items-center justify-center outline-none"
+            >
+              <ScanBarcode 
+                size={18} 
+                className="text-foreground-disabled shrink-0 cursor-pointer hover:text-primary transition-colors" 
+              />
+            </button>
+          </div>
         </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">
+              <div key={item.id} className="flex flex-col border-b border-border-subtle last:border-0">
                 <button
                   onClick={() => {
                     if (item.has_variants) {
@@ -199,7 +368,13 @@ export function ProductSelectionPanel({
                       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")}
+                  id={`dropdown-item-item-${item.id}`}
+                  className={cn(
+                    "w-full flex items-center gap-3 px-4 py-3 text-left transition-colors",
+                    expandedItemIds.includes(item.id) && "bg-surface-hover",
+                    item.has_variants ? "cursor-default" : "cursor-pointer hover:bg-surface-hover",
+                    focusedKey === `item-${item.id}` && "bg-primary/5"
+                  )}
                 >
                   {/* Product thumbnail */}
                   <div className="w-9 h-9 rounded-[8px] bg-surface-0 flex items-center justify-center shrink-0 overflow-hidden">
@@ -263,8 +438,12 @@ export function ProductSelectionPanel({
                       {item.variants?.map((variant: any) => (
                         <button
                           key={variant.id}
+                          id={`dropdown-item-variant-${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"
+                          className={cn(
+                            "relative flex items-center justify-between py-2 px-3 rounded-[6px] hover:bg-surface-hover transition-colors text-left group cursor-pointer",
+                            focusedKey === `variant-${variant.id}` && "bg-primary/5"
+                          )}
                         >
                           {/* Horizontal connecting line to variant */}
                           <div className="absolute left-[-18px] top-1/2 w-[18px] h-px bg-border-subtle" />
@@ -333,6 +512,8 @@ export function ProductSelectionPanel({
               <TRow>
                 <TCell isHeader className="w-[45%]">Item</TCell>
                 <TCell isHeader>Qty</TCell>
+                {config.enablePurchaseUnit && <TCell isHeader>Unit</TCell>}
+                {config.enableFreeQty && <TCell isHeader>Free 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>
@@ -353,17 +534,12 @@ export function ProductSelectionPanel({
                       <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.variant_id && line.item.variants?.find(v => v.id === line.variant_id)
+                            ? `${line.item.variants.find(v => v.id === line.variant_id)?.variant_name} • ${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)) && (
+                        {((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;
@@ -432,6 +608,33 @@ export function ProductSelectionPanel({
                     />
                   </TCell>
 
+                  {config.enablePurchaseUnit && (
+                    <TCell label="Unit" className="py-2.5">
+                      <select
+                        value={line.uom_id || line.item.uom_id || ''}
+                        onChange={(e) => updateLineInput(line.uid, 'uom_id', e.target.value)}
+                        className="h-8 px-2 text-[13px] font-medium bg-surface-1 border border-border-subtle rounded-md focus:border-primary/50 focus:outline-none transition-colors min-w-[80px]"
+                      >
+                        {line.item.uom?.uom_group?.uoms?.map((uom: any) => (
+                          <option key={uom.id} value={uom.id}>{uom.abbreviation}</option>
+                        ))}
+                      </select>
+                    </TCell>
+                  )}
+
+                  {config.enableFreeQty && (
+                    <TCell label="Free Qty" className="py-2.5">
+                      <input
+                        type="number"
+                        value={line.free_qty || 0}
+                        onChange={(e) => updateLineInput(line.uid, 'free_qty', 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}
+                        step="any"
+                      />
+                    </TCell>
+                  )}
+
                   {config.showPrices && (
                     <TCell label="Rate" className="py-2.5">
                       <input
@@ -542,7 +745,29 @@ export function ProductSelectionPanel({
         warehouseId={warehouseId}
         allowMultiple={true}
         allowCreate={config.allowCreateBatchAndSerial}
-        initialBatches={lineItems.find(l => l.uid === activeBatchLineUid)?.batches || []}
+        initialBatches={(() => {
+          if (activeBatchLineUid) {
+            return lineItems.find(l => l.uid === activeBatchLineUid)?.batches || [];
+          }
+          if (activeBatchItem) {
+            const resolvedVariantId = activeBatchItem.variant?.id || (activeBatchItem.item.variants && activeBatchItem.item.variants.length > 0 ? activeBatchItem.item.variants[0].id : null);
+            const existingLine = lineItems.find(l => l.item.id === activeBatchItem.item.id && l.variant_id === resolvedVariantId);
+            
+            const existingBatches = existingLine?.batches ? [...existingLine.batches] : [];
+            
+            if (activeBatchItem.preSelectedBatch) {
+              const existingBatchIndex = existingBatches.findIndex((b: any) => b.batch_id === activeBatchItem.preSelectedBatch.id);
+              if (existingBatchIndex >= 0) {
+                const b = existingBatches[existingBatchIndex];
+                existingBatches[existingBatchIndex] = { ...b, quantity: Number(b.quantity) + 1 };
+              } else {
+                existingBatches.push({ ...activeBatchItem.preSelectedBatch, batch_id: activeBatchItem.preSelectedBatch.id, quantity: 1 });
+              }
+            }
+            return existingBatches;
+          }
+          return [];
+        })()}
         onConfirm={(selections) => {
           if (activeBatchItem) {
             handleBatchConfirm(selections);
@@ -579,7 +804,11 @@ export function ProductSelectionPanel({
         variant={activeSerialItem?.variant || null}
         warehouseId={warehouseId}
         allowCreate={config.allowCreateBatchAndSerial}
-        initialSerials={[]}
+        initialSerials={
+          activeSerialItem
+            ? lineItems.find(l => l.item.id === activeSerialItem.item.id && l.variant_id === (activeSerialItem.variant?.id || (activeSerialItem.item.variants && activeSerialItem.item.variants.length > 0 ? activeSerialItem.item.variants[0].id : null)))?.serial_numbers || []
+            : []
+        }
         onConfirm={handleSerialConfirm}
       />
     </div>

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

@@ -48,63 +48,87 @@ export function ProductTransactionScreen({
       variant?: any,
       extra?: { quantity?: number; batches?: any[]; serial_numbers?: string[] }
     ) => {
-      // Check if item+variant already exists
-      const existingIdx = lineItems.findIndex(
-        (l) => l.item.id === item.id && l.variant_id === (variant?.id || null)
-      );
-
-      if (existingIdx >= 0) {
-        // Increment quantity
-        const updated = [...lineItems];
-        const existing = updated[existingIdx];
-        const addedQty = extra?.quantity || 1;
-        const newQty = existing.quantity + addedQty;
-        const discountAmt = (existing.unit_price * newQty * existing.discount_percent) / 100;
-        
-        let mergedBatches = existing.batches;
-        if (extra?.batches?.length) {
-          mergedBatches = [...(mergedBatches || []), ...extra.batches];
+      setLineItems((prevLineItems) => {
+        const actualVariant = variant || (item.variants && item.variants.length > 0 ? item.variants[0] : null);
+        const resolvedVariantId = actualVariant?.id || null;
+
+        // Ensure the item's variants array includes the actualVariant 
+        // so that the UI can resolve the variant name when it renders.
+        const itemWithVariants = { ...item };
+        if (actualVariant) {
+          const variantsList = itemWithVariants.variants || [];
+          if (!variantsList.find((v) => v.id === actualVariant.id)) {
+            itemWithVariants.variants = [...variantsList, actualVariant];
+          }
         }
 
-        let mergedSerials = existing.serial_numbers;
-        if (extra?.serial_numbers?.length) {
-          mergedSerials = [...(mergedSerials || []), ...extra.serial_numbers];
+        // Check if item+variant already exists
+        const existingIdx = prevLineItems.findIndex(
+          (l) => l.item.id === itemWithVariants.id && l.variant_id === resolvedVariantId
+        );
+
+        if (existingIdx >= 0) {
+          // Increment quantity
+          const updated = [...prevLineItems];
+          const existing = updated[existingIdx];
+          let mergedSerials = existing.serial_numbers || [];
+          let newSerialsCount = 0;
+          if (extra?.serial_numbers?.length) {
+            const uniqueNewSerials = extra.serial_numbers.filter(s => !mergedSerials.includes(s));
+            mergedSerials = [...mergedSerials, ...uniqueNewSerials];
+            newSerialsCount = uniqueNewSerials.length;
+          }
+
+          // If this addition includes serial numbers, only increment quantity by the number of actually new serials added.
+          // Otherwise, fallback to the requested quantity or 1.
+          const addedQty = extra?.serial_numbers ? newSerialsCount : (extra?.quantity || 1);
+
+          if (addedQty === 0 && extra?.serial_numbers) {
+            // The serial number was already added, do nothing to avoid duplicates
+            return prevLineItems;
+          }
+
+          const newQty = existing.quantity + addedQty;
+          const discountAmt = (existing.unit_price * newQty * existing.discount_percent) / 100;
+          
+          let mergedBatches = existing.batches;
+          if (extra?.batches?.length) {
+            mergedBatches = [...(mergedBatches || []), ...extra.batches];
+          }
+
+          updated[existingIdx] = {
+            ...existing,
+            quantity: newQty,
+            discount_amount: discountAmt,
+            line_total: existing.unit_price * newQty - discountAmt,
+            batches: mergedBatches,
+            serial_numbers: mergedSerials,
+          };
+          return updated;
         }
 
-        updated[existingIdx] = {
-          ...existing,
-          quantity: newQty,
+        const variantPriceField = config.priceField === 'default_cost_price' ? 'cost_price' : 'sale_price';
+        const unitPrice = actualVariant ? Number(actualVariant[variantPriceField] || 0) : 0;
+        const qty = extra?.quantity || 1;
+        const discountAmt = 0; // Initial discount
+        
+        const newLine: TransactionLineItem = {
+          uid: `${itemWithVariants.id}-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`,
+          item: itemWithVariants,
+          variant_id: resolvedVariantId,
+          batches: extra?.batches || [],
+          serial_numbers: extra?.serial_numbers || [],
+          quantity: qty,
+          unit_price: unitPrice,
+          discount_percent: 0,
           discount_amount: discountAmt,
-          line_total: existing.unit_price * newQty - discountAmt,
-          batches: mergedBatches,
-          serial_numbers: mergedSerials,
+          line_total: unitPrice * qty - discountAmt,
+          expanded: false,
         };
-        setLineItems(updated);
-        return;
-      }
-
-      const variantPriceField = config.priceField === 'default_cost_price' ? 'cost_price' : 'sale_price';
-      const actualVariant = variant || (item.variants && item.variants.length > 0 ? item.variants[0] : null);
-      const unitPrice = actualVariant ? Number(actualVariant[variantPriceField] || 0) : 0;
-      const qty = extra?.quantity || 1;
-      const discountAmt = 0; // Initial discount
-      
-      const newLine: TransactionLineItem = {
-        uid: `${item.id}-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`,
-        item,
-        variant_id: variant?.id || null,
-        batches: extra?.batches || [],
-        serial_numbers: extra?.serial_numbers || [],
-        quantity: qty,
-        unit_price: unitPrice,
-        discount_percent: 0,
-        discount_amount: discountAmt,
-        line_total: unitPrice * qty - discountAmt,
-        expanded: false,
-      };
-      setLineItems((prev) => [...prev, newLine]);
+        return [...prevLineItems, newLine];
+      });
     },
-    [lineItems, config.priceField]
+    [config.priceField]
   );
 
   // ── Update line ──
@@ -154,6 +178,8 @@ export function ProductTransactionScreen({
             selling_price: b.selling_price,
             serial_numbers: undefined,
             quantity: b.quantity,
+            free_qty: l.free_qty,
+            uom_id: l.uom_id,
             unit_price: l.unit_price,
             discount_percent: l.discount_percent,
             discount_amount: (l.discount_amount / l.quantity) * b.quantity,
@@ -171,6 +197,8 @@ export function ProductTransactionScreen({
           selling_price: undefined,
           serial_numbers: l.serial_numbers,
           quantity: l.quantity,
+          free_qty: l.free_qty,
+          uom_id: l.uom_id,
           unit_price: l.unit_price,
           discount_percent: l.discount_percent,
           discount_amount: l.discount_amount,

package/src/common-components/transaction/types.ts

@@ -19,7 +19,15 @@ export interface TransactionItem {
   is_discountable: boolean;
   category?: { id: number; name: string };
   brand?: { id: number; name: string };
-  uom?: { id: number; name: string; abbreviation: string };
+  uom?: { 
+    id: number; 
+    name: string; 
+    abbreviation: string;
+    uom_group?: {
+      id: number;
+      uoms: { id: number; name: string; abbreviation: string; base_uom_id?: number | null }[];
+    };
+  };
   variants?: TransactionItemVariant[];
   primary_image?: { id: number; url: string } | null;
   stock?: { qty_on_hand: number; qty_allocated: number; qty_available: number };
@@ -66,6 +74,8 @@ export interface TransactionLineItem {
   batches?: TransactionLineBatch[];
   serial_numbers?: string[];
   quantity: number;
+  free_qty?: number;
+  uom_id?: number;
   unit_price: number;
   discount_percent: number;
   discount_amount: number;
@@ -134,6 +144,10 @@ export interface TransactionScreenConfig {
   allowEditPrice?: boolean;
   /** Whether to show available stock for variants in the search dropdown */
   showStock?: boolean;
+  /** Enable free quantity input (dynamic setting) */
+  enableFreeQty?: boolean;
+  /** Enable purchase unit selection (dynamic setting) */
+  enablePurchaseUnit?: boolean;
 }
 
 // ── Module Presets ──
@@ -288,6 +302,8 @@ export interface TransactionPayload {
     selling_price?: number;
     serial_numbers?: string[];
     quantity: number;
+    free_qty?: number;
+    uom_id?: number;
     unit_price: number;
     discount_percent: number;
     discount_amount: number;

package/src/index.tsx

@@ -19,6 +19,7 @@ export * from './base-components/TableMobileOptions';
 export * from './base-components/DesktopSearchPopover';
 export * from './base-components/DesktopFilterPopover';
 export * from './base-components/Input';
+export * from './base-components/Textarea';
 export * from './base-components/Label';
 export * from './base-components/Modal';
 export * from './base-components/ActionModal';