@apptimate/ui 4.5.0 → 4.7.0

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

@@ -4,7 +4,7 @@ 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
+  Trash2, ChevronDown, ChevronRight, AlertTriangle, Tag
 } from 'lucide-react';
 import { Badge } from '../../base-components/Badge';
 import { Table, THeader, TBody, TRow, TCell } from '../../base-components/Table';
@@ -13,10 +13,12 @@ import type { TransactionItem, TransactionLineItem, TransactionScreenConfig } fr
 import { BatchSelectionModal, SerialSelectionModal } from "../pickers";
 import { ParentLineSelectionModal } from "./ParentLineSelectionModal";
 import { HintIcon } from '../../base-components/HintIcon';
+import { AsyncSearchableSelect } from '../../base-components/SearchableSelect';
 
 interface ProductSelectionPanelProps {
   config: TransactionScreenConfig;
   warehouseId?: number;
+  partyId?: number | null;
   lineItems: TransactionLineItem[];
   onAddItem: (item: TransactionItem, variant?: any, extraData?: { quantity?: number; batches?: any[]; serial_numbers?: string[] }) => void;
   onUpdateLine: (uid: string, updates: Partial<TransactionLineItem>) => void;
@@ -27,6 +29,7 @@ interface ProductSelectionPanelProps {
 export function ProductSelectionPanel({
   config,
   warehouseId,
+  partyId,
   lineItems,
   onAddItem,
   onUpdateLine,
@@ -40,7 +43,7 @@ export function ProductSelectionPanel({
   const [expandedItemIds, setExpandedItemIds] = useState<number[]>([]);
   const [editingRates, setEditingRates] = useState<Record<string, string>>({});
   const [focusedIndex, setFocusedIndex] = useState<number>(-1);
-
+  const [discountTypes, setDiscountTypes] = useState<Record<string, 'amount' | 'percent'>>({});
   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);
@@ -51,6 +54,7 @@ export function ProductSelectionPanel({
   const panelRef = React.useRef<HTMLDivElement>(null);
   const inputRef = React.useRef<HTMLInputElement>(null);
 
+  const showDiscountCol = config.showPrices && ['sales', 'quotation', 'pos'].includes(config.type);
 
   // ── Search handler ──
   const handleSearch = useCallback(
@@ -69,6 +73,13 @@ export function ProductSelectionPanel({
         try {
           const params: Record<string, string | number> = { search: value, limit: 20, type: config.type };
           if (warehouseId) params.warehouse_id = warehouseId;
+          
+          if (['sales', 'quotation', 'pos'].includes(config.type)) {
+            params.apply_sales_prices = 1;
+            params.transaction_type = config.type;
+            if (partyId) params.party_id = partyId;
+          }
+
           const res = await transactionLookup(params);
           if (res.is_success && res.result) {
             const payload = res.result as any;
@@ -84,8 +95,15 @@ export function ProductSelectionPanel({
               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 });
+                const batchVariant = entity.variant || (entity.variant_id && entity.item?.variants ? entity.item.variants.find((v: any) => v.id === entity.variant_id) : null);
+                if (['sales', 'quotation'].includes(config.type)) {
+                  onAddItem(entity.item, batchVariant, { 
+                    batches: [{ batch_id: entity.id, batch_number: entity.batch_number, selling_price: entity.selling_price, quantity: 1 }], 
+                    quantity: 1 
+                  });
+                } else {
+                  setActiveBatchItem({ item: entity.item, variant: batchVariant, preSelectedBatch: entity });
+                }
               } else if (matchType === 'variant') {
                 handleSelectItem(entity.item, entity);
               } else if (matchType === 'item') {
@@ -103,7 +121,7 @@ export function ProductSelectionPanel({
         }
       }, 250);
     },
-    [warehouseId, autoAddEnabled, config.type]
+    [warehouseId, autoAddEnabled, config.type, partyId]
   );
 
   // ── Select item → check tracking type or add to cart ──
@@ -114,14 +132,18 @@ export function ProductSelectionPanel({
       setShowResults(false);
 
       if (!config.disableTrackingSelection && item.tracking_type === 'batch') {
-        setActiveBatchItem({ item, variant });
+        if (['sales', 'quotation'].includes(config.type)) {
+          onAddItem(item, variant);
+        } else {
+          setActiveBatchItem({ item, variant });
+        }
       } else if (!config.disableTrackingSelection && item.tracking_type === 'serial') {
         setActiveSerialItem({ item, variant });
       } else {
         onAddItem(item, variant);
       }
     },
-    [onAddItem]
+    [onAddItem, config.type, config.disableTrackingSelection]
   );
 
   const handleBatchConfirm = (selections: { batch: any; quantity: number }[]) => {
@@ -227,18 +249,38 @@ export function ProductSelectionPanel({
     }
   };
 
-  const updateLineInput = (uid: string, field: 'quantity' | 'unit_price' | 'free_qty' | 'uom_id', value: string) => {
+  const updateLineInput = (uid: string, field: 'quantity' | 'unit_price' | 'free_qty' | 'uom_id' | 'discount_amount' | 'discount_percent', value: string | number) => {
     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;
+    let discAmt = line.discount_amount;
+    let discPercent = line.discount_percent;
     
     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;
+    if (field === 'discount_amount') {
+      const maxDiscount = price;
+      const unitDiscount = Math.min(Math.max(0, num), maxDiscount);
+      discAmt = unitDiscount * qty;
+      discPercent = (price * qty) > 0 ? (discAmt * 100) / (price * qty) : 0;
+    } else if (field === 'discount_percent') {
+      discPercent = Math.min(Math.max(0, num), 100);
+      discAmt = (price * qty * discPercent) / 100;
+    } else {
+      // If price or qty changes, check which discount type is active
+      const activeDiscountType = discountTypes[uid] || 'amount';
+      
+      if (activeDiscountType === 'percent') {
+        // Preserve percentage, recalculate amount
+        discAmt = (price * qty * discPercent) / 100;
+      } else {
+        // Preserve amount (we will clamp on blur to avoid ruining it while typing), recalculate percentage
+        discPercent = (price * qty) > 0 ? (discAmt * 100) / (price * qty) : 0;
+      }
+    }
     
     if (field === 'uom_id') {
       const newUomId = Number(value);
@@ -260,8 +302,6 @@ export function ProductSelectionPanel({
       
       const newDiscAmt = (newPrice * line.quantity * line.discount_percent) / 100;
       
-      setEditingRates(prev => ({ ...prev, [uid]: newPrice.toFixed(2) }));
-      
       onUpdateLine(uid, { 
         uom_id: newUomId,
         unit_price: newPrice,
@@ -275,6 +315,7 @@ export function ProductSelectionPanel({
       quantity: qty,
       unit_price: price,
       discount_amount: discAmt,
+      discount_percent: discPercent,
       line_total: price * qty - discAmt,
     });
   };
@@ -531,15 +572,18 @@ export function ProductSelectionPanel({
             <THeader>
               <TRow>
                 <TCell isHeader className="w-[45%]">Item</TCell>
-                <TCell isHeader>Qty</TCell>
-                {config.enablePurchaseUnit && <TCell isHeader>Unit</TCell>}
-                {config.showPrices && <TCell isHeader>Rate</TCell>}
+                <TCell isHeader className="text-center">Qty</TCell>
+                {(config.enablePurchaseUnit || config.enableSalesUnit) && <TCell isHeader>Unit</TCell>}
+                {config.showPrices && <TCell isHeader className="text-right">Rate</TCell>}
+                {showDiscountCol && <TCell isHeader className="text-right">Disc.</TCell>}
                 {config.showPrices && <TCell isHeader className="text-right">Total</TCell>}
                 <TCell isHeader className="w-10 text-center"></TCell>
               </TRow>
             </THeader>
             <TBody>
-              {lineItems.map((line) => (
+              {lineItems.map((line) => {
+                const isBatchPending = ['sales', 'quotation'].includes(config.type) && line.item.tracking_type === 'batch' && (!line.batches || line.batches.length === 0);
+                return (
                 <TRow key={line.uid}>
                   <TCell label="Item" className="py-2.5">
                     <div className="flex items-start gap-3">
@@ -564,9 +608,56 @@ export function ProductSelectionPanel({
                             ? `${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>
-                        {!config.disableTrackingSelection && (line.item.tracking_type === 'batch' || line.item.tracking_type === 'serial') && (
+                        {((!config.disableTrackingSelection && (line.item.tracking_type === 'batch' || line.item.tracking_type === 'serial')) || (line.item.tracking_type === 'batch' && ['sales', 'quotation'].includes(config.type))) && (
                           <div className="flex flex-wrap gap-1 mt-1.5">
                             {line.item.tracking_type === 'batch' && (() => {
+                              if (['sales', 'quotation'].includes(config.type)) {
+                                return (
+                                  <div className="mt-1.5 flex items-center gap-2" onClick={(e) => e.stopPropagation()}>
+                                    {(!line.batches || line.batches.length === 0) && (
+                                      <AlertTriangle size={16} className="text-danger shrink-0" />
+                                    )}
+                                    <div className="w-56">
+                                      <AsyncSearchableSelect
+                                        controlClassName="!min-h-8 h-8 !py-1 text-sm"
+                                        placeholder="Select Batch..."
+                                        loadOptions={async (search) => {
+                                          const params: any = {};
+                                          if (line.variant_id) params.variant_id = line.variant_id;
+                                          if (warehouseId) params.warehouse_id = warehouseId;
+                                          const res = await getItemBatches(line.item.id, params);
+                                          const batches = res?.result?.data || res?.result || [];
+                                          return batches.filter((b: any) => b.batch_number.toLowerCase().includes(search.toLowerCase()));
+                                        }}
+                                        option={{ 
+                                          label: 'batch_number', 
+                                          value: 'id',
+                                          renderOption: (b: any) => (
+                                            <div className="flex items-center justify-between w-full pr-1">
+                                              <span>{b.batch_number}</span>
+                                              {warehouseId ? (
+                                                <span className="text-foreground-subtle text-[11px] font-mono" title="Available Stock">{b.qty_available ?? 0}</span>
+                                              ) : null}
+                                            </div>
+                                          )
+                                        }}
+                                        defaultValue={line.batches?.[0] ? { id: line.batches[0].batch_id, batch_number: line.batches[0].batch_number, selling_price: line.batches[0].selling_price } : undefined}
+                                      onChange={(val, selected: any) => {
+                                        if (selected) {
+                                          onUpdateLine(line.uid, {
+                                            batches: [{ batch_id: selected.id, batch_number: selected.batch_number, selling_price: selected.selling_price, quantity: line.quantity }],
+                                            unit_price: selected.selling_price || 0
+                                          });
+                                        } else {
+                                          onUpdateLine(line.uid, { batches: [] });
+                                        }
+                                      }}
+                                    />
+                                    </div>
+                                  </div>
+                                );
+                              }
+
                               const batchesCount = line.batches?.length || 0;
                               const selectedTotal = line.batches?.reduce((sum, b) => sum + b.quantity, 0) || 0;
                               const isMismatch = selectedTotal !== line.quantity;
@@ -619,22 +710,22 @@ export function ProductSelectionPanel({
                             })()}
                           </div>
                         )}
-                        {(config.type === 'purchase' || config.type === 'grn') && Number(line.unit_price) === 0 && (
+                        {Number(line.unit_price) === 0 && (
                           <div className="mt-2 flex items-center gap-2">
-                            <label className={cn("flex items-center gap-1.5", !!line.purchase_order_line_id ? "cursor-not-allowed" : "cursor-pointer")}>
+                            <label className={cn("flex items-center gap-1.5", !!(line.purchase_order_line_id || line.sales_order_line_id || line.sales_quotation_line_id) ? "cursor-not-allowed" : "cursor-pointer")}>
                               <input 
                                 type="checkbox" 
                                 checked={line.is_free_qty || false}
                                 onChange={(e) => handleToggleFreeQty(line.uid, e.target.checked)}
-                                disabled={!!line.purchase_order_line_id}
+                                disabled={!!(line.purchase_order_line_id || line.sales_order_line_id || line.sales_quotation_line_id)}
                                 className={cn(
                                   "rounded border-border-subtle text-primary h-3 w-3",
-                                  !!line.purchase_order_line_id ? "opacity-50 cursor-not-allowed" : "focus:ring-primary"
+                                  !!(line.purchase_order_line_id || line.sales_order_line_id || line.sales_quotation_line_id) ? "opacity-50 cursor-not-allowed" : "focus:ring-primary"
                                 )}
                               />
                               <span className={cn(
                                 "text-[11.5px] font-medium transition-colors",
-                                !!line.purchase_order_line_id ? "text-foreground-disabled" : "text-foreground-subtle hover:text-foreground-1"
+                                !!(line.purchase_order_line_id || line.sales_order_line_id || line.sales_quotation_line_id) ? "text-foreground-disabled" : "text-foreground-subtle hover:text-foreground-1"
                               )}>
                                 Free Quantity
                               </span>
@@ -644,17 +735,17 @@ export function ProductSelectionPanel({
                               <div className="flex items-center">
                                 <button
                                   onClick={() => setActiveParentLineUidFor(line.uid)}
-                                  disabled={!!line.purchase_order_line_id}
+                                  disabled={!!(line.purchase_order_line_id || line.sales_order_line_id || line.sales_quotation_line_id)}
                                   className={cn(
                                     "h-6 text-[11.5px] bg-surface-1 border border-border-subtle rounded-md px-2 ml-2 min-w-[120px] max-w-[180px] text-left truncate transition-colors flex justify-between items-center",
-                                    !!line.purchase_order_line_id ? "opacity-60 cursor-not-allowed" : "hover:bg-surface-hover focus:border-primary/50 focus:outline-none"
+                                    !!(line.purchase_order_line_id || line.sales_order_line_id || line.sales_quotation_line_id) ? "opacity-60 cursor-not-allowed" : "hover:bg-surface-hover focus:border-primary/50 focus:outline-none"
                                   )}
                                 >
                                   <span>
                                     {line.parent_line_uids && line.parent_line_uids.length > 0
                                       ? (() => {
                                           if (line.parent_line_uids.length === 1) {
-                                            const p = lineItems.find((l) => l.uid === line.parent_line_uids![0]);
+                                            const p = lineItems.find((l) => l.uid === line.parent_line_uids?.[0]);
                                             return p
                                               ? p.item.has_variants && p.variant_id && p.item.variants?.find((v) => v.id === p.variant_id)
                                                 ? `${p.item.name} (${p.item.variants.find((v) => v.id === p.variant_id)?.variant_name})`
@@ -675,25 +766,24 @@ export function ProductSelectionPanel({
                       </div>
                     </div>
                   </TCell>
-                  
-                  <TCell label="Qty" className="py-2.5">
+                  <TCell label="Qty" className="py-2.5 text-center">
                     <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"
+                      className="w-20 h-10 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.enablePurchaseUnit && (
+                  {(config.enablePurchaseUnit || config.enableSalesUnit) && (
                     <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)}
-                        disabled={line.item.tracking_type === 'serial'}
-                        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] disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50"
+                        disabled={line.item.tracking_type === 'serial' || isBatchPending}
+                        className="h-10 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] disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50"
                       >
                         {line.item.uom?.uom_group?.uoms?.map((uom: any) => (
                           <option key={uom.id} value={uom.id}>{uom.abbreviation}</option>
@@ -703,30 +793,93 @@ export function ProductSelectionPanel({
                   )}
 
                   {config.showPrices && (
-                    <TCell label="Rate" className="py-2.5">
-                      <input
-                        type="text"
-                        value={editingRates[line.uid] ?? Number(line.unit_price || 0).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 || line.is_free_qty}
-                        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 || line.is_free_qty) && "opacity-60 cursor-not-allowed bg-surface-hover border-transparent"
-                        )}
-                      />
+                    <TCell label="Rate" className="py-2.5 text-right relative">
+                      <div className="flex items-center justify-end w-full gap-2">
+                        {line.applied_price_rule?.price_list_name && (() => {
+                          const variantPriceField = config.priceField === 'default_cost_price' ? 'cost_price' : 'sale_price';
+                          const actualVariant = line.variant_id ? line.item.variants?.find((v: any) => v.id === line.variant_id) : (line.item.variants?.[0] || null);
+                          const batchPriceField = config.priceField === 'default_cost_price' ? 'cost_price' : 'selling_price';
+                          const batchPrice = ['sales', 'quotation'].includes(config.type) && line.batches?.[0] ? (line.batches[0] as any)[batchPriceField] : undefined;
+                          const basePrice = (batchPrice !== undefined && batchPrice !== null)
+                            ? Number(batchPrice)
+                            : (actualVariant 
+                              ? Number(actualVariant[variantPriceField] || line.item[config.priceField] || 0) 
+                              : Number(line.item[config.priceField] || 0));
+                          const finalPrice = Number(line.applied_price_rule?.final_rate || 0);
+                          if (basePrice === finalPrice) return null;
+
+                          return (
+                            <HintIcon 
+                              text={`Applied Rule: ${line.applied_price_rule?.price_list_name}\nBase Rate: ${basePrice.toFixed(2)}${
+                                line.applied_price_rule?.rate ? `\nNew Rate: ${line.applied_price_rule?.rate}` : 
+                                line.applied_price_rule?.markdown_percentage ? `\nMarkdown: ${line.applied_price_rule?.markdown_percentage}%` : ''
+                              }\nFinal Rate: ${Number(line.applied_price_rule?.final_rate || 0).toFixed(2)}`}
+                              icon={<Tag size={15} className="text-primary-600 opacity-80 hover:opacity-100 transition-opacity" />}
+                            />
+                          );
+                        })()}
+                        <input
+                          type="text"
+                          value={editingRates[line.uid] ?? Number(line.unit_price || 0).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;
+                            });
+                            // Clamp the discount amount if it exceeds the new rate
+                            if (discountTypes[line.uid] !== 'percent') {
+                              updateLineInput(line.uid, 'discount_amount', line.quantity > 0 ? line.discount_amount / line.quantity : 0);
+                            }
+                          }}
+                          disabled={!config.allowEditPrice || line.is_free_qty || !line.item.is_discountable || isBatchPending}
+                          className={cn(
+                            "w-24 h-10 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 || line.is_free_qty || !line.item.is_discountable || isBatchPending) && "opacity-60 cursor-not-allowed bg-surface-hover"
+                          )}
+                        />
+                      </div>
+                    </TCell>
+                  )}
+
+                  {showDiscountCol && (
+                    <TCell label="Disc." className="py-2.5 text-right">
+                      <div className={cn(
+                        "flex items-center w-32 h-10 bg-surface-1 border border-border-subtle rounded-md overflow-hidden focus-within:border-primary/50 transition-colors ml-auto",
+                        (!config.allowEditPrice || line.is_free_qty || !line.item.is_discountable || line.unit_price === 0 || isBatchPending) && "opacity-60 bg-surface-hover"
+                      )}>
+                        <select 
+                          className="h-full bg-surface-hover text-[11px] font-medium text-foreground-subtle border-r border-border-subtle pl-1.5 pr-0.5 focus:outline-none cursor-pointer disabled:cursor-not-allowed"
+                          value={discountTypes[line.uid] || 'amount'}
+                          onChange={(e) => {
+                            setDiscountTypes(prev => ({ ...prev, [line.uid]: e.target.value as 'amount' | 'percent' }));
+                          }}
+                          disabled={!config.allowEditPrice || line.is_free_qty || !line.item.is_discountable || line.unit_price === 0 || isBatchPending}
+                        >
+                          <option value="amount">Amt</option>
+                          <option value="percent">%</option>
+                        </select>
+                        <input
+                          type="number"
+                          value={(discountTypes[line.uid] === 'percent' ? line.discount_percent : (line.quantity > 0 ? Number((line.discount_amount / line.quantity).toFixed(2)) : 0)) || ''}
+                          placeholder="0.00"
+                          onChange={(e) => {
+                            const val = e.target.value;
+                            updateLineInput(line.uid, discountTypes[line.uid] === 'percent' ? 'discount_percent' : 'discount_amount', val ? Number(val) : 0);
+                          }}
+                          disabled={!config.allowEditPrice || line.is_free_qty || !line.item.is_discountable || line.unit_price === 0 || isBatchPending}
+                          className="flex-1 w-full min-w-0 h-full px-2 text-[13px] text-right font-medium bg-transparent focus:outline-none disabled:cursor-not-allowed"
+                          min={0}
+                          step="any"
+                        />
+                      </div>
                     </TCell>
                   )}
 
@@ -739,14 +892,15 @@ export function ProductSelectionPanel({
                   <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"
+                      className="w-10 h-10 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>
         )}
@@ -788,10 +942,15 @@ export function ProductSelectionPanel({
       {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>
+            <span>{lineItems.length} item{lineItems.length > 1 ? 's' : ''} · {lineItems.reduce((s, l) => {
+              const uoms = l.item.uom?.uom_group?.uoms || [];
+              const currentUom = uoms.find((u: any) => u.id === (l.uom_id || l.item.uom_id));
+              const factor = Number(currentUom?.conversion_factor) || 1;
+              return s + (l.quantity * factor);
+            }, 0)} units</span>
             {config.showPrices && (
               <span className="text-[15px] font-bold text-foreground-0">
-                {formatCurrency(lineItems.reduce((s, l) => s + l.line_total, 0))}
+                {formatCurrency(lineItems.reduce((s, l) => s + Number(l.line_total || 0), 0))}
               </span>
             )}
           </div>