@apptimate/ui 4.6.0 → 4.7.0

package/package.json

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

package/src/base-components/SearchableSelect.tsx

@@ -49,6 +49,8 @@ export interface SearchableSelectProps<T = Record<string, unknown>> {
     creatable?: CreatableConfig<T>;
     /** Additional className on the outer wrapper */
     className?: string;
+    /** Additional className on the control div (the trigger) */
+    controlClassName?: string;
     /** Enable search filtering (default: true) */
     isSearchable?: boolean;
     /** Show clear button when a value is selected */
@@ -119,6 +121,7 @@ function SelectCore<T extends Record<string, unknown>>({
     error,
     isRequired,
     surface = 0,
+    controlClassName,
 }: SelectCoreProps<T>) {
     const opt = { ...DEFAULT_OPTION_CONFIG, ...optionConfig } as SearchableSelectOptionConfig<T>;
 
@@ -560,11 +563,11 @@ function SelectCore<T extends Record<string, unknown>>({
                         )}
 
                         {/* Option label */}
-                        <span className="truncate">
+                        <div className="flex-1 min-w-0">
                             {opt.renderOption
                                 ? opt.renderOption(item)
-                                : getLabel(item)}
-                        </span>
+                                : <span className="truncate block">{getLabel(item)}</span>}
+                        </div>
                     </li>
                 ))}
 
@@ -616,6 +619,7 @@ function SelectCore<T extends Record<string, unknown>>({
                     ref={controlRef}
                     className={cn(
                         'w-full border-[1.5px] rounded-[10px] px-3.5 py-2.5 flex items-center gap-2 cursor-pointer transition-all min-h-[42px]',
+                        controlClassName,
                         isOpen
                             ? `border-gray-300 bg-surface-${surface === 0 ? 1 : 2}`
                             : `border-border-subtle bg-surface-${surface} hover:border-gray-300`,

package/src/common-components/pickers/EntityPickerModal.tsx

@@ -172,6 +172,7 @@ export interface PickerTriggerProps {
   placeholder?: string;
   isRequired?: boolean;
   error?: string;
+  disabled?: boolean;
   onClick: () => void;
   onClear?: () => void;
 }
@@ -182,6 +183,7 @@ export function PickerTrigger({
   placeholder = "Select…",
   isRequired = false,
   error,
+  disabled = false,
   onClick,
   onClear,
 }: PickerTriggerProps) {
@@ -193,10 +195,12 @@ export function PickerTrigger({
       </label>
       <button
         type="button"
+        disabled={disabled}
         onClick={onClick}
         className={`
           w-full flex items-center justify-between px-3.5 py-2.5 bg-surface-0 border-[1.5px] rounded-[10px] text-[13.5px] text-left transition-all
-          ${error 
+          ${disabled ? "opacity-60 cursor-not-allowed bg-surface-hover" : ""}
+          ${error && !disabled
             ? "border-red-500 text-red-500" 
             : value
               ? "border-border-subtle text-foreground-1"

package/src/common-components/pickers/PartyPicker.tsx

@@ -18,6 +18,7 @@ interface PartyPickerProps {
   label?: string;
   placeholder?: string;
   isRequired?: boolean;
+  disabled?: boolean;
   partyType?: "customer" | "supplier" | "all" | "artisan";
   customTrigger?: (onClick: () => void) => React.ReactNode;
 }
@@ -29,6 +30,7 @@ export function PartyPicker({
   label = "Party",
   placeholder = "Select party…",
   isRequired = false,
+  disabled = false,
   partyType = "all",
   customTrigger,
 }: PartyPickerProps) {
@@ -126,6 +128,7 @@ export function PartyPicker({
           value={displayValue || null}
           placeholder={placeholder}
           isRequired={isRequired}
+          disabled={disabled}
           onClick={handleOpen}
           onClear={value ? handleClear : undefined}
         />

package/src/common-components/pickers/WarehousePicker.tsx

@@ -18,6 +18,7 @@ interface WarehousePickerProps {
   label?: string;
   placeholder?: string;
   isRequired?: boolean;
+  disabled?: boolean;
   fetchFromAllUserOrgs?: boolean;
 }
 
@@ -28,6 +29,7 @@ export function WarehousePicker({
   label = "Warehouse",
   placeholder = "Select warehouse…",
   isRequired = false,
+  disabled = false,
   fetchFromAllUserOrgs = false,
 }: WarehousePickerProps) {
   const [isOpen, setIsOpen] = useState(false);
@@ -86,6 +88,7 @@ export function WarehousePicker({
         value={displayValue || null}
         placeholder={placeholder}
         isRequired={isRequired}
+        disabled={disabled}
         onClick={handleOpen}
         onClear={value ? handleClear : undefined}
       />

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

@@ -146,6 +146,7 @@ export function MetadataPanel({
             label={config.partyLabel}
             isRequired
             fetchFromAllUserOrgs={true}
+            disabled={config.disablePartySelection}
           />
         ) : (
           <PartyPicker
@@ -155,6 +156,7 @@ export function MetadataPanel({
             label={config.partyLabel}
             partyType={config.partyType}
             isRequired
+            disabled={config.disablePartySelection}
           />
         )
       )}
@@ -167,6 +169,7 @@ export function MetadataPanel({
           onChange={(w) => onWarehouseChange(w?.id ?? null, w?.name)}
           label="Warehouse"
           isRequired
+          disabled={config.disableWarehouseSelection}
         />
       )}
 

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

@@ -13,6 +13,7 @@ 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;
@@ -94,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') {
@@ -113,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 ──
@@ -124,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 }[]) => {
@@ -250,15 +262,24 @@ export function ProductSelectionPanel({
     if (field === 'quantity') qty = Math.max(0.001, num);
     if (field === 'unit_price') price = Math.max(0, num);
     if (field === 'discount_amount') {
-      const unitDiscount = Math.max(0, num);
+      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.max(0, num);
+      discPercent = Math.min(Math.max(0, num), 100);
       discAmt = (price * qty * discPercent) / 100;
     } else {
-      // If price or qty changes, recalculate discAmt from discPercent
-      discAmt = (price * qty * discPercent) / 100;
+      // 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') {
@@ -560,7 +581,9 @@ export function ProductSelectionPanel({
               </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">
@@ -585,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;
@@ -640,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>
@@ -665,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})`
@@ -701,7 +771,7 @@ export function ProductSelectionPanel({
                       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"
                     />
@@ -712,8 +782,8 @@ export function ProductSelectionPanel({
                       <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>
@@ -725,15 +795,29 @@ export function ProductSelectionPanel({
                   {config.showPrices && (
                     <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 && (
-                          <HintIcon 
-                            text={`Applied Rule: ${line.applied_price_rule.price_list_name}${
-                              line.applied_price_rule.rate ? `\nRate: ${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" />}
-                          />
-                        )}
+                        {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)}
@@ -750,11 +834,15 @@ export function ProductSelectionPanel({
                               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}
+                          disabled={!config.allowEditPrice || line.is_free_qty || !line.item.is_discountable || isBatchPending}
                           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 || !line.item.is_discountable) && "opacity-60 cursor-not-allowed bg-surface-hover"
+                            "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>
@@ -764,8 +852,8 @@ export function ProductSelectionPanel({
                   {showDiscountCol && (
                     <TCell label="Disc." className="py-2.5 text-right">
                       <div className={cn(
-                        "flex items-center w-32 h-8 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) && "opacity-60 bg-surface-hover"
+                        "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"
@@ -773,7 +861,7 @@ export function ProductSelectionPanel({
                           onChange={(e) => {
                             setDiscountTypes(prev => ({ ...prev, [line.uid]: e.target.value as 'amount' | 'percent' }));
                           }}
-                          disabled={!config.allowEditPrice || line.is_free_qty || !line.item.is_discountable}
+                          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>
@@ -786,7 +874,7 @@ export function ProductSelectionPanel({
                             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}
+                          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"
@@ -804,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>
         )}
@@ -861,7 +950,7 @@ export function ProductSelectionPanel({
             }, 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>

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

@@ -1,10 +1,12 @@
 'use client';
 
 import React, { useState, useCallback, useMemo, useEffect } from 'react';
-import { cn, PriceCalculationService, evaluatePriceLists } from '@apptimate/core-lib';
+import { cn, PriceCalculationService, evaluatePriceLists, checkHasActivePriceLists } from '@apptimate/core-lib';
 import toast from 'react-hot-toast';
 import { ProductSelectionPanel } from './ProductSelectionPanel';
 import { MetadataPanel } from './MetadataPanel';
+import { Modal, ModalFooter } from '../../base-components/Modal';
+import { Button } from '../../base-components/Button';
 import type {
   ProductTransactionScreenProps, TransactionItem, TransactionLineItem,
   TransactionPayload, PaymentEntry, PartyLookup,
@@ -42,6 +44,60 @@ export function ProductTransactionScreen({
   const [notes, setNotes] = useState('');
   const [payments, setPayments] = useState<PaymentEntry[]>([]);
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [hasActivePriceLists, setHasActivePriceLists] = useState<boolean>(false);
+  const [priceEvaluationModal, setPriceEvaluationModal] = useState<{
+    isOpen: boolean;
+    type: 'confirm' | 'force';
+    evaluatedRules: Record<number, any[]>;
+    pendingPartyId: number | null;
+    pendingParty: any;
+  } | null>(null);
+
+  const applyEvaluatedPrices = useCallback((evaluatedRules: Record<number, any[]>) => {
+    setLineItems(prev => prev.map(l => {
+      if (l.is_free_qty || !l.variant_id || !evaluatedRules[l.variant_id]) return l;
+      const rules = evaluatedRules[l.variant_id];
+      
+      const variantPriceField = config.priceField === 'default_cost_price' ? 'cost_price' : 'sale_price';
+      const actualVariant = l.item.variants?.find((v: any) => v.id === l.variant_id);
+      const batchPriceField = config.priceField === 'default_cost_price' ? 'cost_price' : 'selling_price';
+      const batchPrice = ['sales', 'quotation'].includes(config.type) && l.batches?.[0] ? (l.batches[0] as any)[batchPriceField] : undefined;
+      const basePrice = (batchPrice !== undefined && batchPrice !== null)
+        ? Number(batchPrice)
+        : (actualVariant 
+          ? Number(actualVariant[variantPriceField] || l.item[config.priceField] || 0) 
+          : Number(l.item[config.priceField] || 0));
+      
+      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;
+      const effectiveQty = l.quantity * factor;
+
+      const priceDetails = PriceCalculationService.calculatePriceDetails(basePrice, effectiveQty, rules, l.batches?.[0]?.batch_id);
+      
+      return {
+        ...l,
+        pricing_rules: rules,
+        unit_price: priceDetails.unitPrice * factor,
+        discount_percent: priceDetails.discountPercent,
+        discount_amount: priceDetails.discountAmount * factor,
+        applied_price_rule: priceDetails.appliedRule,
+        line_total: (priceDetails.unitPrice * factor * l.quantity) - (priceDetails.discountAmount * factor)
+      };
+    }));
+  }, [config.priceField]);
+
+  useEffect(() => {
+    if (['sales', 'pos', 'quotation'].includes(config.type)) {
+      checkHasActivePriceLists().then(res => {
+        if (res.is_success) {
+          setHasActivePriceLists(res.result as boolean);
+        }
+      }).catch(() => {
+        // Silently ignore
+      });
+    }
+  }, [config.type]);
 
   const submitting = externalSubmitting ?? isSubmitting;
 
@@ -53,24 +109,25 @@ export function ProductTransactionScreen({
       }
       if (initialData.warehouse_id) {
         setWarehouseId(initialData.warehouse_id);
+        if (initialData.warehouse?.name) setWarehouseName(initialData.warehouse.name);
       }
       if (initialData.lines && Array.isArray(initialData.lines)) {
         setLineItems(
           initialData.lines.map((l: any) => {
-            const qty = l.quantity || 1;
-            const unitPrice = l.unit_price || 0;
+            const qty = l.quantity !== undefined ? Number(l.quantity) : 1;
+            const unitPrice = l.unit_price !== undefined ? Number(l.unit_price) : 0;
             return {
               uid: l.uid || Math.random().toString(36).slice(2, 7),
               item: l.item,
               variant_id: l.variant_id || null,
-              batches: [],
-              serial_numbers: [],
+              batches: l.batches || [],
+              serial_numbers: l.serial_numbers || [],
               quantity: qty,
               unit_price: unitPrice,
-              discount_percent: 0,
-              discount_amount: 0,
-              line_total: unitPrice * qty,
-              expanded: false,
+              discount_percent: l.discount_percent !== undefined ? Number(l.discount_percent) : 0,
+              discount_amount: l.discount_amount !== undefined ? Number(l.discount_amount) : 0,
+              line_total: l.line_total !== undefined ? Number(l.line_total) : (unitPrice * qty - (l.discount_amount || 0)),
+              expanded: l.expanded || false,
               is_free_qty: l.is_free_qty,
               parent_line_uids: l.parent_line_uids,
               uom_id: l.uom_id,
@@ -78,6 +135,25 @@ export function ProductTransactionScreen({
             };
           })
         );
+        
+        // Populate pricing rules for existing items if party is selected
+        if (initialData.party_id && ['sales', 'pos', 'quotation'].includes(config.type)) {
+          evaluatePriceLists({
+            party_id: initialData.party_id,
+            transaction_type: config.type,
+            items: initialData.lines.filter((l: any) => l.variant_id && !l.is_free_qty).map((l: any) => ({ variant_id: l.variant_id }))
+          }).then(res => {
+            if (res.is_success && res.result) {
+              const evaluatedRules = res.result as Record<number, any[]>;
+              setLineItems(prev => prev.map(line => {
+                if (!line.is_free_qty && line.variant_id && evaluatedRules[line.variant_id]) {
+                  return { ...line, pricing_rules: evaluatedRules[line.variant_id] };
+                }
+                return line;
+              }));
+            }
+          }).catch(() => {});
+        }
       }
     }
   }, [initialData]);
@@ -104,7 +180,11 @@ export function ProductTransactionScreen({
         }
 
         const variantPriceField = config.priceField === 'default_cost_price' ? 'cost_price' : 'sale_price';
-        const basePrice = actualVariant ? Number(actualVariant[variantPriceField] || 0) : 0;
+        const batchPriceField = config.priceField === 'default_cost_price' ? 'cost_price' : 'selling_price';
+        const batchPrice = ['sales', 'quotation'].includes(config.type) && extra?.batches?.[0] ? (extra.batches[0] as any)[batchPriceField] : undefined;
+        const basePrice = (batchPrice !== undefined && batchPrice !== null)
+          ? Number(batchPrice)
+          : (actualVariant ? Number(actualVariant[variantPriceField] || itemWithVariants[config.priceField] || 0) : Number(itemWithVariants[config.priceField] || 0));
         const qty = extra?.quantity || 1;
         
         const uomId = itemWithVariants.uom_id;
@@ -120,7 +200,7 @@ export function ProductTransactionScreen({
 
         if (actualVariant && actualVariant.pricing_rules) {
           const effectiveQty = qty * factor;
-          const priceDetails = PriceCalculationService.calculatePriceDetails(basePrice, effectiveQty, actualVariant.pricing_rules);
+          const priceDetails = PriceCalculationService.calculatePriceDetails(basePrice, effectiveQty, actualVariant.pricing_rules, extra?.batches?.[0]?.batch_id);
           unitPrice = priceDetails.unitPrice * factor;
           discountPercent = priceDetails.discountPercent;
           discountAmt = priceDetails.discountAmount * factor;
@@ -161,13 +241,21 @@ export function ProductTransactionScreen({
         const isUomChanged = 'uom_id' in updates && updates.uom_id !== l.uom_id;
         const isPriceChanged = 'unit_price' in updates && updates.unit_price !== l.unit_price;
         const isDiscountChanged = ('discount_amount' in updates && updates.discount_amount !== l.discount_amount) || ('discount_percent' in updates && updates.discount_percent !== l.discount_percent);
+        const isBatchChanged = 'batches' in updates;
+        const isFreeQtyChanged = 'is_free_qty' in updates && updates.is_free_qty !== l.is_free_qty;
 
-        const isQtyOrUomChanged = isQtyChanged || isUomChanged;
+        const isQtyOrUomOrBatchChanged = isQtyChanged || isUomChanged || isBatchChanged || (isFreeQtyChanged && !updates.is_free_qty);
 
-        if (isQtyOrUomChanged && updatedLine.pricing_rules && updatedLine.pricing_rules.length > 0) {
+        if (isQtyOrUomOrBatchChanged && updatedLine.pricing_rules && updatedLine.pricing_rules.length > 0 && !updatedLine.is_free_qty) {
           const variantPriceField = config.priceField === 'default_cost_price' ? 'cost_price' : 'sale_price';
           const actualVariant = updatedLine.item.variants?.find((v: any) => v.id === updatedLine.variant_id);
-          const basePrice = actualVariant ? Number(actualVariant[variantPriceField] || 0) : 0;
+          const batchPriceField = config.priceField === 'default_cost_price' ? 'cost_price' : 'selling_price';
+          const batchPrice = ['sales', 'quotation'].includes(config.type) && updatedLine.batches?.[0] ? (updatedLine.batches[0] as any)[batchPriceField] : undefined;
+          const basePrice = (batchPrice !== undefined && batchPrice !== null)
+            ? Number(batchPrice)
+            : (actualVariant 
+              ? Number(actualVariant[variantPriceField] || updatedLine.item[config.priceField] || 0) 
+              : Number(updatedLine.item[config.priceField] || 0));
           
           const uoms = updatedLine.item.uom?.uom_group?.uoms || [];
           const currentUom = uoms.find((u: any) => u.id === (updatedLine.uom_id || updatedLine.item.uom_id));
@@ -175,7 +263,11 @@ export function ProductTransactionScreen({
           
           const effectiveQty = updatedLine.quantity * factor;
 
-          const priceDetails = PriceCalculationService.calculatePriceDetails(basePrice, effectiveQty, updatedLine.pricing_rules);
+          console.log("DEBUG: handleUpdateLine rules -> ", {
+            basePrice, effectiveQty, rules: updatedLine.pricing_rules
+          });
+
+          const priceDetails = PriceCalculationService.calculatePriceDetails(basePrice, effectiveQty, updatedLine.pricing_rules, updatedLine.batches?.[0]?.batch_id);
           updatedLine.unit_price = priceDetails.unitPrice * factor;
           updatedLine.discount_percent = priceDetails.discountPercent;
           updatedLine.discount_amount = priceDetails.discountAmount * factor;
@@ -190,6 +282,10 @@ export function ProductTransactionScreen({
           }
         }
 
+        if (isQtyChanged && updatedLine.batches && updatedLine.batches.length === 1) {
+          updatedLine.batches[0].quantity = updatedLine.quantity;
+        }
+
         return updatedLine;
       })
     );
@@ -197,7 +293,15 @@ export function ProductTransactionScreen({
 
   // ── Remove line ──
   const handleRemoveLine = useCallback((uid: string) => {
-    setLineItems((prev) => prev.filter((l) => l.uid !== uid));
+    setLineItems((prev) => prev
+      .filter((l) => l.uid !== uid)
+      .map((l) => {
+        if (l.parent_line_uids && l.parent_line_uids.includes(uid)) {
+          return { ...l, parent_line_uids: l.parent_line_uids.filter((pUid) => pUid !== uid) };
+        }
+        return l;
+      })
+    );
   }, []);
 
   // ── Toggle expand ──
@@ -208,8 +312,8 @@ export function ProductTransactionScreen({
   }, []);
 
   // ── Calculations ──
-  const subtotal = useMemo(() => lineItems.reduce((s, l) => s + l.unit_price * l.quantity, 0), [lineItems]);
-  const discountTotal = useMemo(() => lineItems.reduce((s, l) => s + l.discount_amount, 0), [lineItems]);
+  const subtotal = useMemo(() => lineItems.reduce((s, l) => s + (Number(l.unit_price) || 0) * (Number(l.quantity) || 1), 0), [lineItems]);
+  const discountTotal = useMemo(() => lineItems.reduce((s, l) => s + (Number(l.discount_amount) || 0), 0), [lineItems]);
   const grandTotal = useMemo(() => subtotal - discountTotal, [subtotal, discountTotal]);
 
   // ── Submit handler ──
@@ -224,16 +328,25 @@ export function ProductTransactionScreen({
       }
     }
 
-    if (!config.disableTrackingSelection) {
-      for (const line of lineItems) {
-        if (line.item.tracking_type === 'batch') {
+    if (config.showWarehouse && !warehouseId) {
+      toast.error('Please select a warehouse.');
+      return;
+    }
+
+    for (const line of lineItems) {
+      if (line.item.tracking_type === 'batch') {
+        const requiresBatch = !config.disableTrackingSelection || ['sales', 'quotation'].includes(config.type);
+        if (requiresBatch) {
           const selectedTotal = line.batches?.reduce((sum, b) => sum + b.quantity, 0) || 0;
           if (selectedTotal !== line.quantity) {
             toast.error(`Please select batches for ${line.item.name} to match the total quantity.`);
             return;
           }
         }
-        if (line.item.tracking_type === 'serial') {
+      }
+      if (line.item.tracking_type === 'serial') {
+        const requiresSerial = !config.disableTrackingSelection;
+        if (requiresSerial) {
           const selectedCount = line.serial_numbers?.length || 0;
           if (selectedCount !== line.quantity) {
             toast.error(`Please select exactly ${line.quantity} serial numbers for ${line.item.name}.`);
@@ -250,6 +363,7 @@ export function ProductTransactionScreen({
       transaction_date: transactionDate,
       expected_delivery_date: expectedDeliveryDate || undefined,
       notes: notes || undefined,
+      revised_from_id: initialData?.revised_from_id || undefined,
       lines: lineItems.flatMap((l): TransactionPayload['lines'] => {
         if (l.batches && l.batches.length > 0) {
           return l.batches.map(b => ({
@@ -320,7 +434,7 @@ export function ProductTransactionScreen({
     } finally {
       setIsSubmitting(false);
     }
-  }, [lineItems, config, partyId, warehouseId, transactionDate, expectedDeliveryDate, notes, payments, subtotal, discountTotal, grandTotal, onSubmit, defaultWarehouseId]);
+  }, [lineItems, config, partyId, warehouseId, transactionDate, expectedDeliveryDate, notes, payments, subtotal, discountTotal, grandTotal, onSubmit, defaultWarehouseId, initialData]);
 
   return (
     <div className="flex flex-col h-full">
@@ -330,6 +444,7 @@ export function ProductTransactionScreen({
         <div className="flex-[3] min-w-0 flex flex-col">
           <ProductSelectionPanel
             config={config}
+            partyId={partyId}
             warehouseId={warehouseId ?? undefined}
             lineItems={lineItems}
             onAddItem={handleAddItem}
@@ -357,39 +472,74 @@ export function ProductTransactionScreen({
             payments={payments}
             onPartyChange={async (id, party) => { 
               if (partyId !== id && lineItems.length > 0 && ['sales', 'pos', 'quotation'].includes(config.type)) {
-                toast.loading('Recalculating prices based on selected party...', { id: 'price-calc' });
-                try {
-                  const res = await evaluatePriceLists({
-                    party_id: id,
-                    transaction_type: config.type,
-                    items: lineItems.filter(l => l.variant_id).map(l => ({ variant_id: l.variant_id! }))
-                  });
-                  if (res.is_success && res.result) {
-                    const evaluatedRules = res.result as Record<number, any[]>;
-                    setLineItems(prev => prev.map(l => {
-                      if (!l.variant_id || !evaluatedRules[l.variant_id]) return l;
-                      const rules = evaluatedRules[l.variant_id];
+                if (hasActivePriceLists) {
+                  toast.loading('Checking price changes...', { id: 'price-calc' });
+                  try {
+                    const res = await evaluatePriceLists({
+                      party_id: id || null,
+                      transaction_type: config.type,
+                      items: lineItems.filter(l => l.variant_id && !l.is_free_qty).map(l => ({ variant_id: l.variant_id! }))
+                    });
+                    
+                    toast.dismiss('price-calc');
+                    
+                    if (res.is_success && res.result) {
+                      const evaluatedRules = res.result as Record<number, any[]>;
                       
-                      const variantPriceField = config.priceField === 'default_cost_price' ? 'cost_price' : 'sale_price';
-                      const actualVariant = l.item.variants?.find((v: any) => v.id === l.variant_id);
-                      const basePrice = actualVariant ? Number(actualVariant[variantPriceField] || 0) : 0;
-                      
-                      const priceDetails = PriceCalculationService.calculatePriceDetails(basePrice, l.quantity, rules);
+                      let hasActualPriceChanges = false;
+                      for (const l of lineItems) {
+                        if (!l.is_free_qty && l.variant_id && evaluatedRules[l.variant_id]) {
+                          const rules = evaluatedRules[l.variant_id];
+                          const variantPriceField = config.priceField === 'default_cost_price' ? 'cost_price' : 'sale_price';
+                          const actualVariant = l.item.variants?.find((v: any) => v.id === l.variant_id);
+                          const batchPriceField = config.priceField === 'default_cost_price' ? 'cost_price' : 'selling_price';
+                          const batchPrice = ['sales', 'quotation'].includes(config.type) && l.batches?.[0] ? (l.batches[0] as any)[batchPriceField] : undefined;
+                          const basePrice = (batchPrice !== undefined && batchPrice !== null)
+                            ? Number(batchPrice)
+                            : (actualVariant 
+                              ? Number(actualVariant[variantPriceField] || l.item[config.priceField] || 0) 
+                              : Number(l.item[config.priceField] || 0));
+                          
+                          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;
+                          const effectiveQty = l.quantity * factor;
+
+                          const priceDetails = PriceCalculationService.calculatePriceDetails(basePrice, effectiveQty, rules, l.batches?.[0]?.batch_id);
+                          
+                          if (Math.abs((priceDetails.unitPrice * factor) - l.unit_price) > 0.001) {
+                            hasActualPriceChanges = true;
+                            break;
+                          }
+                        }
+                      }
                       
-                      return {
-                        ...l,
-                        pricing_rules: rules,
-                        unit_price: priceDetails.unitPrice,
-                        discount_percent: priceDetails.discountPercent,
-                        discount_amount: priceDetails.discountAmount,
-                        applied_price_rule: priceDetails.appliedRule,
-                        line_total: (priceDetails.unitPrice * l.quantity) - priceDetails.discountAmount
-                      };
-                    }));
-                    toast.success('Prices updated based on party selection', { id: 'price-calc' });
+                      if (hasActualPriceChanges) {
+                        const previousRulesApplied = lineItems.some(l => l.applied_price_rule);
+                        setPriceEvaluationModal({
+                          isOpen: true,
+                          type: (partyId && previousRulesApplied) ? 'force' : 'confirm',
+                          evaluatedRules,
+                          pendingPartyId: id,
+                          pendingParty: party
+                        });
+                        return;
+                      } else {
+                        // No immediate price changes for current quantities,
+                        // but we still need to update the rules in the background
+                        // so that if they change quantity later, it uses the new rules!
+                        setLineItems(prev => prev.map(l => {
+                          if (!l.is_free_qty && l.variant_id && evaluatedRules[l.variant_id]) {
+                            return { ...l, pricing_rules: evaluatedRules[l.variant_id] };
+                          }
+                          return l;
+                        }));
+                      }
+                    }
+                  } catch (e) {
+                    toast.dismiss('price-calc');
+                    toast.error('Failed to check prices');
                   }
-                } catch (e) {
-                  toast.error('Failed to recalculate prices', { id: 'price-calc' });
                 }
               }
               setPartyId(id); 
@@ -407,6 +557,56 @@ export function ProductTransactionScreen({
           />
         </div>
       </div>
+
+      {/* ── Price Evaluation Modal ── */}
+      {priceEvaluationModal && (
+        <Modal
+          isOpen={priceEvaluationModal.isOpen}
+          onClose={() => {
+            if (priceEvaluationModal.type === 'confirm') {
+              setPartyId(priceEvaluationModal.pendingPartyId);
+              setPartyName(priceEvaluationModal.pendingParty?.name ?? null);
+              setPriceEvaluationModal(null);
+            }
+          }}
+          title="Price List Update"
+          backdrop="opaque"
+          size="sm"
+        >
+          <div className="text-[14px] text-foreground-1 leading-relaxed">
+            {priceEvaluationModal.type === 'confirm' 
+              ? "A few items have price changes based on the price list. Do you want to apply them?"
+              : "Prices need to be changed based on the party selection."}
+          </div>
+          <ModalFooter>
+            {priceEvaluationModal.type === 'confirm' && (
+              <Button 
+                variant="flat" 
+                color="secondary" 
+                onClick={() => {
+                  setPartyId(priceEvaluationModal.pendingPartyId);
+                  setPartyName(priceEvaluationModal.pendingParty?.name ?? null);
+                  setPriceEvaluationModal(null);
+                }}
+              >
+                No
+              </Button>
+            )}
+            <Button 
+              color="primary" 
+              onClick={() => {
+                applyEvaluatedPrices(priceEvaluationModal.evaluatedRules);
+                setPartyId(priceEvaluationModal.pendingPartyId);
+                setPartyName(priceEvaluationModal.pendingParty?.name ?? null);
+                setPriceEvaluationModal(null);
+                toast.success('Prices updated based on party selection');
+              }}
+            >
+              {priceEvaluationModal.type === 'confirm' ? 'Yes' : 'OK'}
+            </Button>
+          </ModalFooter>
+        </Modal>
+      )}
     </div>
   );
 }

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

@@ -79,6 +79,8 @@ export interface TransactionLineItem {
   parent_line_uids?: string[];
   uom_id?: number;
   purchase_order_line_id?: number | null;
+  sales_order_line_id?: number | null;
+  sales_quotation_line_id?: number | null;
   unit_price: number;
   discount_percent: number;
   discount_amount: number;
@@ -163,6 +165,10 @@ export interface TransactionScreenConfig {
   disableTrackingSelection?: boolean;
   /** Enforce that the sum of payments equals the grand total before allowing submission */
   requireFullPayment?: boolean;
+  /** Disable party selection (e.g. for revisions) */
+  disablePartySelection?: boolean;
+  /** Disable warehouse selection (e.g. for revisions) */
+  disableWarehouseSelection?: boolean;
 }
 
 // ── Module Presets ──
@@ -317,6 +323,7 @@ export interface TransactionPayload {
   transaction_date?: string;
   expected_delivery_date?: string;
   notes?: string;
+  revised_from_id?: number | null;
   lines: Array<{
     item_id: number;
     variant_id?: number | null;