@apptimate/ui 3.9.0 → 4.1.0

package/package.json

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

package/src/base-components/Dropdown.tsx

@@ -112,15 +112,24 @@ export function Dropdown({ trigger, children, align = 'left', valign = 'bottom',
 
 interface DropdownItemProps {
     children: ReactNode;
-    onClick?: () => void;
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
     className?: string;
     isActive?: boolean;
+    icon?: ReactNode;
+    preventClose?: boolean;
 }
 
-export function DropdownItem({ children, onClick, className, isActive }: DropdownItemProps) {
+export function DropdownItem({ children, onClick, className, isActive, icon, preventClose }: DropdownItemProps) {
+    const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+        if (preventClose) {
+            e.stopPropagation();
+        }
+        onClick?.(e);
+    };
+
     return (
         <div
-            onClick={onClick}
+            onClick={handleClick}
             className={cn(
                 "px-3 py-2 text-[13px] rounded-[6px] cursor-pointer transition-colors flex items-center gap-2",
                 isActive
@@ -129,7 +138,9 @@ export function DropdownItem({ children, onClick, className, isActive }: Dropdow
                 className
             )}
         >
+            {icon && <span className="flex items-center justify-center text-current opacity-70 shrink-0">{icon}</span>}
             {children}
         </div>
     );
 }
+

package/src/base-components/EmptyState.tsx

@@ -5,14 +5,23 @@ import { Inbox } from 'lucide-react';
 
 export interface EmptyStateProps {
     message?: string;
+    title?: string;
+    description?: string;
     icon?: React.ReactNode;
 }
 
-export const EmptyState = ({ message = "No records found.", icon }: EmptyStateProps) => {
+export const EmptyState = ({ message = "No records found.", title, description, icon }: EmptyStateProps) => {
     return (
-        <div className="flex flex-col items-center justify-center opacity-40">
+        <div className="flex flex-col items-center justify-center opacity-40 text-center">
             {icon || <Inbox size={42} strokeWidth={1.5} className="mb-3 text-foreground-disabled" />}
-            <p className="text-[14px] font-medium text-foreground-disabled">{message}</p>
+            {title ? (
+                <>
+                    <h3 className="text-[16px] font-semibold text-foreground-disabled mb-1">{title}</h3>
+                    {description && <p className="text-[14px] font-medium text-foreground-disabled">{description}</p>}
+                </>
+            ) : (
+                <p className="text-[14px] font-medium text-foreground-disabled">{message}</p>
+            )}
         </div>
     );
 };

package/src/base-components/PopConfirm.tsx

@@ -16,7 +16,7 @@ export interface PopConfirmProps {
   onConfirm: (callback: () => void, setLoading: (loading: boolean) => void) => void | Promise<any>;
 
   /** Called when user cancels. Call callback() to close. */
-  onCancel: (callback: () => void) => void;
+  onCancel?: (callback: () => void) => void;
 
   /** Text for the confirm button (default: 'Confirm') */
   confirmText?: string;
@@ -92,7 +92,11 @@ export const PopConfirm = ({
   }, [onConfirm, close]);
 
   const handleCancel = useCallback(() => {
-    onCancel(close);
+    if (onCancel) {
+      onCancel(close);
+    } else {
+      close();
+    }
   }, [onCancel, close]);
 
   const handleTriggerClick = useCallback(

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

@@ -22,11 +22,13 @@ interface MetadataPanelProps {
   warehouseId: number | null;
   warehouseName?: string | null;
   transactionDate?: string;
+  expectedDeliveryDate?: string;
   notes: string;
   payments: PaymentEntry[];
   onPartyChange: (id: number | null, party?: PartyLookup) => void;
   onWarehouseChange: (id: number | null, name?: string) => void;
   onDateChange?: (date: string) => void;
+  onExpectedDeliveryDateChange?: (date: string) => void;
   onNotesChange: (v: string) => void;
   onPaymentsChange: (payments: PaymentEntry[]) => void;
   onSubmit: () => void;
@@ -35,8 +37,8 @@ interface MetadataPanelProps {
 }
 
 export function MetadataPanel({
-  config, lineItems, partyId, partyName, warehouseId, warehouseName, transactionDate, notes, payments,
-  onPartyChange, onWarehouseChange, onDateChange, onNotesChange, onPaymentsChange, onSubmit, isSubmitting,
+  config, lineItems, partyId, partyName, warehouseId, warehouseName, transactionDate, expectedDeliveryDate, notes, payments,
+  onPartyChange, onWarehouseChange, onDateChange, onExpectedDeliveryDateChange, onNotesChange, onPaymentsChange, onSubmit, isSubmitting,
   renderExtraMeta,
 }: MetadataPanelProps) {
   const [paymentModes, setPaymentModes] = useState<PaymentMode[]>([]);
@@ -150,6 +152,7 @@ export function MetadataPanel({
             onChange={(p) => onPartyChange(p?.id ?? null, p ? { id: p.id, name: p.name, code: p.code, type: p.type } : undefined)}
             label={config.partyLabel}
             partyType={config.partyType}
+            isRequired
           />
         )
       )}
@@ -180,6 +183,21 @@ export function MetadataPanel({
         </Section>
       )}
 
+      {/* ── Expected Delivery Date ── */}
+      {config.showExpectedDeliveryDate && onExpectedDeliveryDateChange && (
+        <Section label="Expected Delivery">
+          <div className="relative">
+            <Calendar size={15} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-foreground-disabled pointer-events-none" />
+            <input
+              type="date"
+              value={expectedDeliveryDate || ''}
+              onChange={(e) => onExpectedDeliveryDateChange(e.target.value)}
+              className="w-full bg-surface-0 border-[1.5px] border-border-subtle rounded-[10px] pl-10 pr-3.5 py-3 text-[13.5px] text-foreground-1 outline-none transition-all hover:border-gray-300 focus:border-primary/40"
+            />
+          </div>
+        </Section>
+      )}
+
       {/* ── Notes ── */}
       {config.showNotes && (
         <Section label="Notes">

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

@@ -0,0 +1,149 @@
+import React, { useState, useEffect } from "react";
+import { Modal, ModalFooter } from "../../base-components/Modal";
+import { Button } from "../../base-components/Button";
+import { Table, THeader, TBody, TRow, TCell } from "../../base-components/Table";
+import { TransactionLineItem } from "./types";
+import { cn } from "@apptimate/core-lib";
+
+interface ParentLineSelectionModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  lineItems: TransactionLineItem[];
+  selectedUids?: string[];
+  onSelect: (uids: string[]) => void;
+}
+
+export function ParentLineSelectionModal({
+  isOpen,
+  onClose,
+  lineItems,
+  selectedUids = [],
+  onSelect,
+}: ParentLineSelectionModalProps) {
+  const [selected, setSelected] = useState<string[]>([]);
+
+  useEffect(() => {
+    if (isOpen) {
+      setSelected(selectedUids || []);
+    }
+  }, [isOpen, selectedUids]);
+
+  const formatCurrency = (v: number | string) =>
+    Number(v).toLocaleString("en-US", {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+    });
+
+  const handleToggle = (uid: string) => {
+    setSelected((prev) =>
+      prev.includes(uid) ? prev.filter((id) => id !== uid) : [...prev, uid]
+    );
+  };
+
+  const handleSave = () => {
+    onSelect(selected);
+    onClose();
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      title="Select Parent Lines"
+      size="xl"
+    >
+      <div className="p-4 max-h-[60vh] overflow-y-auto custom-scrollbar">
+        {lineItems.length === 0 ? (
+          <div className="text-center text-sm text-foreground-disabled py-8">
+            No parent lines available.
+          </div>
+        ) : (
+          <Table>
+            <THeader>
+              <TRow>
+                <TCell isHeader className="w-10 text-center"></TCell>
+                <TCell isHeader>Item</TCell>
+                <TCell isHeader>Qty</TCell>
+                <TCell isHeader>Unit</TCell>
+                <TCell isHeader>Rate</TCell>
+                <TCell isHeader className="text-right">
+                  Total
+                </TCell>
+              </TRow>
+            </THeader>
+            <TBody>
+              {lineItems.map((line) => {
+                const isSelected = selected.includes(line.uid);
+                return (
+                  <TRow
+                    key={line.uid}
+                    onClick={() => handleToggle(line.uid)}
+                    className={cn(
+                      "cursor-pointer hover:bg-surface-hover transition-colors",
+                      isSelected ? "bg-primary/5" : ""
+                    )}
+                  >
+                    <TCell className="text-center">
+                      <input
+                        type="checkbox"
+                        checked={isSelected}
+                        readOnly
+                        className="rounded border-border-subtle text-primary focus:ring-primary h-4 w-4 mt-1 cursor-pointer"
+                      />
+                    </TCell>
+                    <TCell label="Item">
+                      <div className="font-medium text-[13px] text-foreground-1">
+                        {line.item.name}
+                      </div>
+                      {line.variant_id && (
+                        <div className="text-[11px] text-foreground-subtle font-mono mt-0.5">
+                          {line.item.variants?.find((v) => v.id === line.variant_id)
+                            ?.variant_name || ""}{" "}
+                          •{" "}
+                          {line.item.variants?.find((v) => v.id === line.variant_id)
+                            ?.sku || ""}
+                        </div>
+                      )}
+                    </TCell>
+                    <TCell label="Qty">
+                      <span className="text-[13px] font-medium">
+                        {line.quantity}
+                      </span>
+                    </TCell>
+                    <TCell label="Unit">
+                      <span className="text-[13px] text-foreground-subtle">
+                        {line.item.uom?.uom_group?.uoms?.find((u: any) => String(u.id) === String(line.uom_id))?.abbreviation || 
+                         line.item.uom?.abbreviation || 
+                         "pcs"}
+                      </span>
+                    </TCell>
+                    <TCell label="Rate">
+                      <span className="text-[13px] text-foreground-subtle">
+                        {formatCurrency(line.unit_price)}
+                      </span>
+                    </TCell>
+                    <TCell label="Total" className="text-right">
+                      <span className="text-[13px] font-semibold text-foreground-1">
+                        {formatCurrency(line.line_total)}
+                      </span>
+                    </TCell>
+                  </TRow>
+                );
+              })}
+            </TBody>
+          </Table>
+        )}
+      </div>
+      <ModalFooter>
+        <div className="flex justify-end gap-3 w-full">
+          <Button variant="flat" color="secondary" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button variant="solid" color="primary" onClick={handleSave}>
+            Save Selections
+          </Button>
+        </div>
+      </ModalFooter>
+    </Modal>
+  );
+}

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

@@ -11,7 +11,9 @@ 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 { ParentLineSelectionModal } from "./ParentLineSelectionModal";
 import { HintIcon } from '../../base-components/HintIcon';
+
 interface ProductSelectionPanelProps {
   config: TransactionScreenConfig;
   warehouseId?: number;
@@ -43,6 +45,7 @@ export function ProductSelectionPanel({
   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 [activeParentLineUidFor, setActiveParentLineUidFor] = useState<string | null>(null);
   const [autoAddEnabled, setAutoAddEnabled] = useState(true);
   const searchTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
   const panelRef = React.useRef<HTMLDivElement>(null);
@@ -110,9 +113,9 @@ export function ProductSelectionPanel({
       setSearchResults([]);
       setShowResults(false);
 
-      if (item.tracking_type === 'batch') {
+      if (!config.disableTrackingSelection && item.tracking_type === 'batch') {
         setActiveBatchItem({ item, variant });
-      } else if (item.tracking_type === 'serial') {
+      } else if (!config.disableTrackingSelection && item.tracking_type === 'serial') {
         setActiveSerialItem({ item, variant });
       } else {
         onAddItem(item, variant);
@@ -134,28 +137,10 @@ export function ProductSelectionPanel({
     const totalQty = batchesData.reduce((sum, b) => sum + b.quantity, 0);
 
     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
-      );
-
-      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
-        });
-      }
+      onAddItem(activeBatchItem.item, activeBatchItem.variant, { 
+        batches: batchesData,
+        quantity: totalQty > 0 ? totalQty : 1
+      });
       setActiveBatchItem(null);
     }
   };
@@ -163,25 +148,7 @@ export function ProductSelectionPanel({
   const handleSerialConfirm = (serials: string[]) => {
     if (!activeSerialItem) return;
 
-    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 });
-    }
+    onAddItem(activeSerialItem.item, activeSerialItem.variant, { serial_numbers: serials, quantity: serials.length });
     setActiveSerialItem(null);
   };
 
@@ -273,13 +240,34 @@ 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) });
+      const newUomId = Number(value);
+      const uoms = line.item.uom?.uom_group?.uoms || [];
+      
+      const oldUom = uoms.find((u: any) => u.id === (line.uom_id || line.item.uom_id));
+      const newUom = uoms.find((u: any) => u.id === newUomId);
+      
+      let newPrice = line.unit_price;
+      
+      if (oldUom && newUom) {
+        const oldFactor = Number(oldUom.conversion_factor) || 1;
+        const newFactor = Number(newUom.conversion_factor) || 1;
+        
+        // Calculate the base price then multiply by the new factor
+        const basePrice = line.unit_price / oldFactor;
+        newPrice = basePrice * newFactor;
+      }
+      
+      const newDiscAmt = (newPrice * line.quantity * line.discount_percent) / 100;
+      
+      setEditingRates(prev => ({ ...prev, [uid]: newPrice.toFixed(2) }));
+      
+      onUpdateLine(uid, { 
+        uom_id: newUomId,
+        unit_price: newPrice,
+        discount_amount: newDiscAmt,
+        line_total: (newPrice * line.quantity) - newDiscAmt
+      });
       return;
     }
 
@@ -291,6 +279,36 @@ export function ProductSelectionPanel({
     });
   };
 
+  const handleToggleFreeQty = (uid: string, isFree: boolean) => {
+    const line = lineItems.find(l => l.uid === uid);
+    if (!line) return;
+    
+    let newPrice = 0;
+    if (!isFree) {
+      const variantPriceField = config.priceField === 'default_cost_price' ? 'cost_price' : 'sale_price';
+      const actualVariant = line.variant_id ? line.item.variants?.find(v => v.id === line.variant_id) : (line.item.variants?.[0] || null);
+      newPrice = actualVariant ? Number(actualVariant[variantPriceField] || 0) : 0;
+    }
+
+    const discAmt = (newPrice * line.quantity * line.discount_percent) / 100;
+    onUpdateLine(uid, {
+      is_free_qty: isFree,
+      unit_price: newPrice,
+      discount_amount: discAmt,
+      line_total: newPrice * line.quantity - discAmt,
+      parent_line_uids: isFree ? line.parent_line_uids : undefined,
+    });
+
+    if (isFree) {
+      lineItems.forEach(l => {
+        if (l.parent_line_uids?.includes(uid)) {
+          const newUids = l.parent_line_uids.filter(id => id !== uid);
+          onUpdateLine(l.uid, { parent_line_uids: newUids.length > 0 ? newUids : undefined });
+        }
+      });
+    }
+  };
+
   return (
     <div className="flex flex-col h-full">
       {/* ── Search Bar ── */}
@@ -513,7 +531,6 @@ export function ProductSelectionPanel({
                 <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>
@@ -538,7 +555,7 @@ 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>
-                        {((line.batches && line.batches.length > 0) || (line.serial_numbers && line.serial_numbers.length > 0)) && (
+                        {!config.disableTrackingSelection && (line.item.tracking_type === 'batch' || line.item.tracking_type === 'serial') && (
                           <div className="flex flex-wrap gap-1 mt-1.5">
                             {line.item.tracking_type === 'batch' && (() => {
                               const batchesCount = line.batches?.length || 0;
@@ -593,6 +610,50 @@ export function ProductSelectionPanel({
                             })()}
                           </div>
                         )}
+                        {(config.type === 'purchase' || config.type === 'grn') && line.unit_price === 0 && (
+                          <div className="mt-2 flex items-center gap-2">
+                            <label className="flex items-center gap-1.5 cursor-pointer">
+                              <input 
+                                type="checkbox" 
+                                checked={line.is_free_qty || false}
+                                onChange={(e) => handleToggleFreeQty(line.uid, e.target.checked)}
+                                className="rounded border-border-subtle text-primary focus:ring-primary h-3 w-3"
+                              />
+                              <span className="text-[11.5px] font-medium text-foreground-subtle hover:text-foreground-1 transition-colors">Free Quantity</span>
+                            </label>
+
+                            {line.is_free_qty && (
+                              <div className="flex items-center">
+                                <button
+                                  onClick={() => setActiveParentLineUidFor(line.uid)}
+                                  className="h-6 text-[11.5px] bg-surface-1 border border-border-subtle hover:bg-surface-hover rounded-md px-2 ml-2 min-w-[120px] max-w-[180px] text-left truncate transition-colors focus:border-primary/50 focus:outline-none flex justify-between items-center"
+                                >
+                                  <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]);
+                                            return p
+                                              ? `${p.item.name} ${
+                                                  p.variant_id
+                                                    ? `(${
+                                                        p.item.variants?.find((v) => v.id === p.variant_id)?.variant_name
+                                                      })`
+                                                    : ""
+                                                }`
+                                              : "Select Parent Line...";
+                                          } else {
+                                            return `${line.parent_line_uids.length} Parents Selected`;
+                                          }
+                                        })()
+                                      : "Select Parent Line..."}
+                                  </span>
+                                </button>
+                                <HintIcon text="Select the original line item that this free quantity is associated with." />
+                              </div>
+                            )}
+                          </div>
+                        )}
                       </div>
                     </div>
                   </TCell>
@@ -622,19 +683,6 @@ export function ProductSelectionPanel({
                     </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
@@ -654,10 +702,10 @@ export function ProductSelectionPanel({
                             return next;
                           });
                         }}
-                        disabled={!config.allowEditPrice}
+                        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 && "opacity-60 cursor-not-allowed bg-surface-hover border-transparent"
+                          (!config.allowEditPrice || line.is_free_qty) && "opacity-60 cursor-not-allowed bg-surface-hover border-transparent"
                         )}
                       />
                     </TCell>
@@ -750,19 +798,9 @@ export function ProductSelectionPanel({
             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] : [];
-            
+            const existingBatches: any[] = [];
             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 });
-              }
+              existingBatches.push({ ...activeBatchItem.preSelectedBatch, batch_id: activeBatchItem.preSelectedBatch.id, quantity: 1 });
             }
             return existingBatches;
           }
@@ -804,12 +842,24 @@ export function ProductSelectionPanel({
         variant={activeSerialItem?.variant || null}
         warehouseId={warehouseId}
         allowCreate={config.allowCreateBatchAndSerial}
-        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 || []
+        initialSerials={[]}
+        onConfirm={handleSerialConfirm}
+      />
+
+      <ParentLineSelectionModal
+        isOpen={!!activeParentLineUidFor}
+        onClose={() => setActiveParentLineUidFor(null)}
+        lineItems={lineItems.filter((l) => l.uid !== activeParentLineUidFor && !l.is_free_qty)}
+        selectedUids={
+          activeParentLineUidFor
+            ? lineItems.find((l) => l.uid === activeParentLineUidFor)?.parent_line_uids || []
             : []
         }
-        onConfirm={handleSerialConfirm}
+        onSelect={(uids) => {
+          if (activeParentLineUidFor) {
+            onUpdateLine(activeParentLineUidFor, { parent_line_uids: uids.length > 0 ? uids : undefined });
+          }
+        }}
       />
     </div>
   );

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

@@ -35,6 +35,7 @@ export function ProductTransactionScreen({
   const [transactionDate, setTransactionDate] = useState<string>(() => {
     return new Date().toISOString().split('T')[0];
   });
+  const [expectedDeliveryDate, setExpectedDeliveryDate] = useState<string>('');
   const [notes, setNotes] = useState('');
   const [payments, setPayments] = useState<PaymentEntry[]>([]);
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -62,51 +63,6 @@ export function ProductTransactionScreen({
           }
         }
 
-        // 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;
-        }
-
         const variantPriceField = config.priceField === 'default_cost_price' ? 'cost_price' : 'sale_price';
         const unitPrice = actualVariant ? Number(actualVariant[variantPriceField] || 0) : 0;
         const qty = extra?.quantity || 1;
@@ -164,6 +120,7 @@ export function ProductTransactionScreen({
       party_id: partyId,
       warehouse_id: warehouseId!,
       transaction_date: transactionDate,
+      expected_delivery_date: expectedDeliveryDate || undefined,
       notes: notes || undefined,
       lines: lineItems.flatMap((l): TransactionPayload['lines'] => {
         if (l.batches && l.batches.length > 0) {
@@ -178,7 +135,9 @@ export function ProductTransactionScreen({
             selling_price: b.selling_price,
             serial_numbers: undefined,
             quantity: b.quantity,
-            free_qty: l.free_qty,
+            uid: l.uid,
+            is_free_qty: l.is_free_qty,
+            parent_line_uids: l.parent_line_uids,
             uom_id: l.uom_id,
             unit_price: l.unit_price,
             discount_percent: l.discount_percent,
@@ -197,7 +156,9 @@ export function ProductTransactionScreen({
           selling_price: undefined,
           serial_numbers: l.serial_numbers,
           quantity: l.quantity,
-          free_qty: l.free_qty,
+          uid: l.uid,
+          is_free_qty: l.is_free_qty,
+          parent_line_uids: l.parent_line_uids,
           uom_id: l.uom_id,
           unit_price: l.unit_price,
           discount_percent: l.discount_percent,
@@ -219,6 +180,7 @@ export function ProductTransactionScreen({
       setPayments([]);
       setNotes('');
       setTransactionDate(new Date().toISOString().split('T')[0]);
+      setExpectedDeliveryDate('');
       if (!defaultWarehouseId) { setWarehouseId(null); setWarehouseName(null); }
     } catch (error) {
       // The parent usually displays a toast error. We catch it here
@@ -228,7 +190,7 @@ export function ProductTransactionScreen({
     } finally {
       setIsSubmitting(false);
     }
-  }, [lineItems, config, partyId, warehouseId, transactionDate, notes, payments, subtotal, discountTotal, grandTotal, onSubmit, defaultWarehouseId]);
+  }, [lineItems, config, partyId, warehouseId, transactionDate, expectedDeliveryDate, notes, payments, subtotal, discountTotal, grandTotal, onSubmit, defaultWarehouseId]);
 
   return (
     <div className="flex flex-col h-full">
@@ -260,11 +222,13 @@ export function ProductTransactionScreen({
             warehouseId={warehouseId}
             warehouseName={warehouseName}
             transactionDate={transactionDate}
+            expectedDeliveryDate={expectedDeliveryDate}
             notes={notes}
             payments={payments}
             onPartyChange={(id, party) => { setPartyId(id); setPartyName(party?.name ?? null); }}
             onWarehouseChange={(id, name) => { setWarehouseId(id); setWarehouseName(name ?? null); }}
             onDateChange={setTransactionDate}
+            onExpectedDeliveryDateChange={setExpectedDeliveryDate}
             onNotesChange={setNotes}
             onPaymentsChange={setPayments}
             onSubmit={handleSubmit}

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

@@ -25,7 +25,7 @@ export interface TransactionItem {
     abbreviation: string;
     uom_group?: {
       id: number;
-      uoms: { id: number; name: string; abbreviation: string; base_uom_id?: number | null }[];
+      uoms: { id: number; name: string; abbreviation: string; base_uom_id?: number | null; conversion_factor: number }[];
     };
   };
   variants?: TransactionItemVariant[];
@@ -74,7 +74,8 @@ export interface TransactionLineItem {
   batches?: TransactionLineBatch[];
   serial_numbers?: string[];
   quantity: number;
-  free_qty?: number;
+  is_free_qty?: boolean;
+  parent_line_uids?: string[];
   uom_id?: number;
   unit_price: number;
   discount_percent: number;
@@ -144,10 +145,12 @@ 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;
+  /** Show expected delivery date */
+  showExpectedDeliveryDate?: boolean;
+  /** Disable batch/serial selection completely (e.g. for Purchase Orders and Quotations) */
+  disableTrackingSelection?: boolean;
 }
 
 // ── Module Presets ──
@@ -184,6 +187,7 @@ export const TRANSACTION_PRESETS: Record<TransactionType, TransactionScreenConfi
     allowCreateBatchAndSerial: false,
     allowEditPrice: false,
     showStock: true,
+    disableTrackingSelection: true,
   },
   purchase: {
     type: 'purchase',
@@ -200,6 +204,8 @@ export const TRANSACTION_PRESETS: Record<TransactionType, TransactionScreenConfi
     allowCreateBatchAndSerial: true,
     allowEditPrice: true,
     showStock: true,
+    showExpectedDeliveryDate: true,
+    disableTrackingSelection: true,
   },
   transfer: {
     type: 'transfer',
@@ -290,6 +296,7 @@ export interface TransactionPayload {
   party_id?: number | null;
   warehouse_id: number;
   transaction_date?: string;
+  expected_delivery_date?: string;
   notes?: string;
   lines: Array<{
     item_id: number;
@@ -302,7 +309,9 @@ export interface TransactionPayload {
     selling_price?: number;
     serial_numbers?: string[];
     quantity: number;
-    free_qty?: number;
+    uid: string;
+    is_free_qty?: boolean;
+    parent_line_uids?: string[];
     uom_id?: number;
     unit_price: number;
     discount_percent: number;

package/src/index.tsx

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