@apptimate/ui 4.0.0 → 4.2.0

package/package.json

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

package/src/common-components/DashboardLayout.tsx

@@ -5,7 +5,7 @@ import { Briefcase, CreditCard, Settings, Menu, X, LogOut, User as UserIcon, Bui
 import { Dropdown, DropdownItem } from '../base-components/Dropdown';
 
 import Link from 'next/link';
-import { usePathname } from 'next/navigation';
+import { usePathname, useRouter } from 'next/navigation';
 import { cn } from '@apptimate/core-lib';
 
 export type DashboardMenuConfig = {
@@ -68,6 +68,7 @@ export function DashboardLayout({
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   const [isOrgModalOpen, setIsOrgModalOpen] = useState(false);
   const pathname = usePathname() || "";
+  const router = useRouter();
 
   // Find which main menu should be active based on current path.
   // When basePath is set, prefer the menu whose items are mostly within basePath.
@@ -106,6 +107,26 @@ export function DashboardLayout({
 
   const activeMenu = menus.find(m => m.id === activeMenuId) || menus[0];
 
+  const handleMainMenuSelect = (menu: DashboardMenuConfig) => {
+    setActiveMenuId(menu.id);
+
+    const firstItem = menu.groups.flatMap(group => group.items)[0];
+    if (!firstItem) return;
+
+    const isInternal = basePath
+      ? firstItem.path.startsWith(basePath)
+      : !externalPaths.some(path => firstItem.path.startsWith(path));
+    const href = basePath && isInternal
+      ? firstItem.path.replace(basePath, "") || "/"
+      : firstItem.path;
+
+    if (isInternal) {
+      router.push(href);
+    } else {
+      window.location.href = href;
+    }
+  };
+
   const handleSelectOrg = (org: OrganizationConfig) => {
     onOrganizationChange?.(org);
     setIsOrgModalOpen(false);
@@ -158,7 +179,7 @@ export function DashboardLayout({
             return (
               <div
                 key={menu.id}
-                onClick={() => setActiveMenuId(menu.id)}
+                onClick={() => handleMainMenuSelect(menu)}
                 className={`flex flex-col items-center justify-center gap-1.5 cursor-pointer transition-colors w-full px-1 ${isActive ? "text-[#2D3142]" : "text-gray-400 hover:text-[#2D3142]"
                   }`}
               >

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

@@ -9,6 +9,7 @@ import {
 } from 'lucide-react';
 import { getPaymentModes, getBankAccountsLookup } from '@apptimate/core-lib';
 import { PartyPicker, WarehousePicker } from '../pickers';
+import { PaymentSection } from '../PaymentSection';
 import type {
   TransactionScreenConfig, PaymentMode, PaymentEntry, BankAccount,
   PartyLookup, PaymentModeField, TransactionLineItem,
@@ -22,22 +23,25 @@ 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;
   isSubmitting: boolean;
   renderExtraMeta?: () => React.ReactNode;
+  fetchChequeLeaves?: (query: string, page: number) => Promise<{ is_success: boolean; result?: any[] }>;
 }
 
 export function MetadataPanel({
-  config, lineItems, partyId, partyName, warehouseId, warehouseName, transactionDate, notes, payments,
-  onPartyChange, onWarehouseChange, onDateChange, onNotesChange, onPaymentsChange, onSubmit, isSubmitting,
-  renderExtraMeta,
+  config, lineItems, partyId, partyName, warehouseId, warehouseName, transactionDate, expectedDeliveryDate, notes, payments,
+  onPartyChange, onWarehouseChange, onDateChange, onExpectedDeliveryDateChange, onNotesChange, onPaymentsChange, onSubmit, isSubmitting,
+  renderExtraMeta, fetchChequeLeaves,
 }: MetadataPanelProps) {
   const [paymentModes, setPaymentModes] = useState<PaymentMode[]>([]);
   const [bankAccounts, setBankAccounts] = useState<BankAccount[]>([]);
@@ -150,6 +154,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 +185,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">
@@ -208,77 +228,15 @@ export function MetadataPanel({
       {/* ── Payment Section ── */}
       {config.showPayment && (
         <Section label="Payment">
-          {isLoadingMeta ? (
-            <div className="flex items-center justify-center py-4">
-              <Loader2 size={18} className="animate-spin text-primary" />
-            </div>
-          ) : (
-            <div className="space-y-2.5">
-              {/* Existing payment entries */}
-              {payments.map((entry, idx) => {
-                const mode = paymentModes.find((m) => m.id === entry.mode_id);
-                return (
-                  <PaymentEntryRow
-                    key={idx}
-                    entry={entry}
-                    mode={mode}
-                    bankAccounts={bankAccounts}
-                    onUpdate={(updates) => updatePayment(idx, updates)}
-                    onRemove={() => removePayment(idx)}
-                  />
-                );
-              })}
-
-              {/* Add payment mode buttons */}
-              {(lineItems.length > 0) && (
-                <div className="flex flex-wrap gap-2 pt-1">
-                  {paymentModes
-                    .filter((m) => m.is_active)
-                    .map((mode) => {
-                      const modeIcon = mode.code === 'cash' ? <Banknote size={14} /> :
-                                       mode.code === 'card' ? <CreditCard size={14} /> :
-                                       mode.code === 'bank_transfer' ? <Building size={14} /> :
-                                       <CreditCard size={14} />;
-                      return (
-                        <button
-                          key={mode.id}
-                          onClick={() => addPayment(mode)}
-                          className="inline-flex items-center gap-2 px-4 py-2 text-[12px] font-semibold rounded-[10px] bg-surface-0 border border-border-subtle text-foreground-1 hover:border-primary/40 hover:bg-primary/5 hover:text-primary transition-all"
-                        >
-                          {modeIcon}
-                          {mode.name}
-                        </button>
-                      );
-                    })}
-                </div>
-              )}
-
-              {/* Balance */}
-              {payments.length > 0 && (
-                <div className="bg-surface-0 rounded-[10px] border border-border-subtle p-3.5 mt-2 space-y-1.5">
-                  <TotalRow label="Total Paid" value={formatCurrency(totalPaid)} />
-                  <TotalRow
-                    label={balance > 0.01 ? "Balance Due" : balance < -0.01 ? "Change Due" : "Settled"}
-                    value={formatCurrency(Math.abs(balance))}
-                    className={balance > 0.01 ? 'text-danger-alt' : balance < -0.01 ? 'text-amber-600' : 'text-green-600'}
-                    bold
-                  />
-                  {balance < -0.01 && (
-                    <div className="flex items-center gap-1.5 mt-1 text-[11px] text-amber-600 font-medium">
-                      <AlertCircle size={12} />
-                      <span>Change: {formatCurrency(Math.abs(balance))}</span>
-                    </div>
-                  )}
-                  {Math.abs(balance) < 0.01 && (
-                    <div className="flex items-center gap-1.5 mt-1 text-[11px] text-green-600 font-medium">
-                      <Check size={12} />
-                      <span>Fully paid</span>
-                    </div>
-                  )}
-                </div>
-              )}
-            </div>
-          )}
+          <PaymentSection
+            totalAmount={grandTotal}
+            payments={payments}
+            onPaymentsChange={onPaymentsChange}
+            fetchPaymentModes={getPaymentModes}
+            fetchBankAccounts={getBankAccountsLookup}
+            fetchChequeLeaves={fetchChequeLeaves}
+            compact={true}
+          />
         </Section>
       )}
 

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,12 +279,43 @@ 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 ── */}
-      <div ref={panelRef} className="relative mb-4">
-        <div className="flex items-center gap-2 bg-surface-0 border-[1.5px] border-border-subtle rounded-[12px] px-4 py-2.5 focus-within:border-primary/50 transition-all">
-          <Search size={18} className="text-foreground-disabled shrink-0" />
+      {!config.disableItemSelection && (
+        <div ref={panelRef} className="relative mb-4">
+          <div className="flex items-center gap-2 bg-surface-0 border-[1.5px] border-border-subtle rounded-[12px] px-4 py-2.5 focus-within:border-primary/50 transition-all">
+            <Search size={18} className="text-foreground-disabled shrink-0" />
           <input
             ref={inputRef}
             type="text"
@@ -495,6 +514,7 @@ export function ProductSelectionPanel({
           </div>
         )}
       </div>
+      )}
 
       {/* ── Selected Items Table ── */}
       <div className="flex-1 overflow-y-auto custom-scrollbar w-full">
@@ -513,7 +533,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>
@@ -532,13 +551,20 @@ export function ProductSelectionPanel({
                         )}
                       </div>
                       <div className="flex flex-col flex-1 min-w-0">
-                        <span className="text-[13px] font-semibold text-foreground-1 leading-tight break-words">{line.item.name}</span>
+                        <span className="text-[13px] font-semibold text-foreground-1 leading-tight break-words">
+                          {line.item.name}
+                          {line.is_free_qty && (
+                            <span className="ml-2 inline-flex items-center px-1.5 py-0.5 rounded text-[9px] font-bold bg-green-100 text-green-700 uppercase tracking-wider align-middle">
+                              Free
+                            </span>
+                          )}
+                        </span>
                         <span className="text-[11px] text-foreground-subtle font-mono mt-0.5 break-words">
-                          {line.variant_id && line.item.variants?.find(v => v.id === line.variant_id)
+                          {line.item.has_variants && line.variant_id && line.item.variants?.find(v => v.id === line.variant_id)
                             ? `${line.item.variants.find(v => v.id === line.variant_id)?.variant_name} • ${line.item.variants.find(v => v.id === line.variant_id)?.sku}`
                             : line.item.sku}
                         </span>
-                        {((line.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 +619,59 @@ export function ProductSelectionPanel({
                             })()}
                           </div>
                         )}
+                        {(config.type === 'purchase' || config.type === 'grn') && 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")}>
+                              <input 
+                                type="checkbox" 
+                                checked={line.is_free_qty || false}
+                                onChange={(e) => handleToggleFreeQty(line.uid, e.target.checked)}
+                                disabled={!!line.purchase_order_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"
+                                )}
+                              />
+                              <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"
+                              )}>
+                                Free Quantity
+                              </span>
+                            </label>
+
+                            {line.is_free_qty && (
+                              <div className="flex items-center">
+                                <button
+                                  onClick={() => setActiveParentLineUidFor(line.uid)}
+                                  disabled={!!line.purchase_order_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"
+                                  )}
+                                >
+                                  <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.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})`
+                                                : p.item.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>
@@ -613,7 +692,8 @@ export function ProductSelectionPanel({
                       <select
                         value={line.uom_id || line.item.uom_id || ''}
                         onChange={(e) => updateLineInput(line.uid, 'uom_id', e.target.value)}
-                        className="h-8 px-2 text-[13px] font-medium bg-surface-1 border border-border-subtle rounded-md focus:border-primary/50 focus:outline-none transition-colors min-w-[80px]"
+                        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"
                       >
                         {line.item.uom?.uom_group?.uoms?.map((uom: any) => (
                           <option key={uom.id} value={uom.id}>{uom.abbreviation}</option>
@@ -622,24 +702,11 @@ 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
                         type="text"
-                        value={editingRates[line.uid] ?? line.unit_price.toFixed(2)}
+                        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)) {
@@ -654,10 +721,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 +817,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 +861,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

@@ -1,7 +1,8 @@
 'use client';
 
-import React, { useState, useCallback, useMemo } from 'react';
+import React, { useState, useCallback, useMemo, useEffect } from 'react';
 import { cn } from '@apptimate/core-lib';
+import toast from 'react-hot-toast';
 import { ProductSelectionPanel } from './ProductSelectionPanel';
 import { MetadataPanel } from './MetadataPanel';
 import type {
@@ -25,6 +26,8 @@ export function ProductTransactionScreen({
   onSubmit,
   isSubmitting: externalSubmitting,
   renderExtraMeta,
+  fetchChequeLeaves,
+  initialData,
 }: ProductTransactionScreenProps) {
   // ── State ──
   const [lineItems, setLineItems] = useState<TransactionLineItem[]>([]);
@@ -35,12 +38,50 @@ 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);
 
   const submitting = externalSubmitting ?? isSubmitting;
 
+  useEffect(() => {
+    if (initialData) {
+      if (initialData.party_id) {
+        setPartyId(initialData.party_id);
+        if (initialData.party?.name) setPartyName(initialData.party.name);
+      }
+      if (initialData.warehouse_id) {
+        setWarehouseId(initialData.warehouse_id);
+      }
+      if (initialData.lines && Array.isArray(initialData.lines)) {
+        setLineItems(
+          initialData.lines.map((l: any) => {
+            const qty = l.quantity || 1;
+            const unitPrice = 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: [],
+              quantity: qty,
+              unit_price: unitPrice,
+              discount_percent: 0,
+              discount_amount: 0,
+              line_total: unitPrice * qty,
+              expanded: false,
+              is_free_qty: l.is_free_qty,
+              parent_line_uids: l.parent_line_uids,
+              uom_id: l.uom_id,
+              purchase_order_line_id: l.purchase_order_line_id,
+            };
+          })
+        );
+      }
+    }
+  }, [initialData]);
+
   // ── Add item to line items ──
   const handleAddItem = useCallback(
     (
@@ -62,51 +103,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;
@@ -124,6 +120,7 @@ export function ProductTransactionScreen({
           discount_amount: discountAmt,
           line_total: unitPrice * qty - discountAmt,
           expanded: false,
+          uom_id: itemWithVariants.uom_id,
         };
         return [...prevLineItems, newLine];
       });
@@ -159,11 +156,39 @@ export function ProductTransactionScreen({
   const handleSubmit = useCallback(async () => {
     if (lineItems.length === 0) return;
 
+    if (config.requireFullPayment) {
+      const totalPayments = payments.reduce((sum, p) => sum + (Number(p.amount) || 0), 0);
+      if (Math.abs(totalPayments - grandTotal) > 0.01) {
+        toast.error('Total payments must equal the Grand Total (Use Credit mode to pay later).');
+        return;
+      }
+    }
+
+    if (!config.disableTrackingSelection) {
+      for (const line of lineItems) {
+        if (line.item.tracking_type === 'batch') {
+          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') {
+          const selectedCount = line.serial_numbers?.length || 0;
+          if (selectedCount !== line.quantity) {
+            toast.error(`Please select exactly ${line.quantity} serial numbers for ${line.item.name}.`);
+            return;
+          }
+        }
+      }
+    }
+
     const payload: TransactionPayload = {
       type: config.type,
       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,8 +203,11 @@ 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,
+            purchase_order_line_id: l.purchase_order_line_id,
             unit_price: l.unit_price,
             discount_percent: l.discount_percent,
             discount_amount: (l.discount_amount / l.quantity) * b.quantity,
@@ -197,8 +225,11 @@ 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,
+          purchase_order_line_id: l.purchase_order_line_id,
           unit_price: l.unit_price,
           discount_percent: l.discount_percent,
           discount_amount: l.discount_amount,
@@ -219,6 +250,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 +260,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,16 +292,19 @@ 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}
             isSubmitting={submitting}
             renderExtraMeta={renderExtraMeta}
+            fetchChequeLeaves={fetchChequeLeaves}
           />
         </div>
       </div>

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,8 +74,10 @@ export interface TransactionLineItem {
   batches?: TransactionLineBatch[];
   serial_numbers?: string[];
   quantity: number;
-  free_qty?: number;
+  is_free_qty?: boolean;
+  parent_line_uids?: string[];
   uom_id?: number;
+  purchase_order_line_id?: number | null;
   unit_price: number;
   discount_percent: number;
   discount_amount: number;
@@ -136,6 +138,8 @@ export interface TransactionScreenConfig {
   partyIsWarehouse?: boolean;
   /** Whether to show the party selector at all (defaults to true) */
   showParty?: boolean;
+  /** Disable the search bar (useful for PO to GRN conversions where items are fixed) */
+  disableItemSelection?: boolean;
   /** Allow creating new batches and serials during selection */
   allowCreateBatchAndSerial?: boolean;
   /** If true, user must select a warehouse before searching/adding items */
@@ -144,10 +148,14 @@ 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;
+  /** Enforce that the sum of payments equals the grand total before allowing submission */
+  requireFullPayment?: boolean;
 }
 
 // ── Module Presets ──
@@ -184,6 +192,7 @@ export const TRANSACTION_PRESETS: Record<TransactionType, TransactionScreenConfi
     allowCreateBatchAndSerial: false,
     allowEditPrice: false,
     showStock: true,
+    disableTrackingSelection: true,
   },
   purchase: {
     type: 'purchase',
@@ -200,6 +209,8 @@ export const TRANSACTION_PRESETS: Record<TransactionType, TransactionScreenConfi
     allowCreateBatchAndSerial: true,
     allowEditPrice: true,
     showStock: true,
+    showExpectedDeliveryDate: true,
+    disableTrackingSelection: true,
   },
   transfer: {
     type: 'transfer',
@@ -257,7 +268,7 @@ export const TRANSACTION_PRESETS: Record<TransactionType, TransactionScreenConfi
     priceField: 'default_cost_price',
     showPrices: true,
     allowDiscount: true,
-    showPayment: false,
+    showPayment: true,
     partyLabel: 'Supplier',
     partyType: 'supplier',
     showWarehouse: true,
@@ -267,6 +278,7 @@ export const TRANSACTION_PRESETS: Record<TransactionType, TransactionScreenConfi
     allowCreateBatchAndSerial: true,
     allowEditPrice: true,
     showStock: true,
+    requireFullPayment: true,
   },
 };
 
@@ -283,6 +295,10 @@ export interface ProductTransactionScreenProps {
   isSubmitting?: boolean;
   /** Optional extra content rendered at the top of the metadata (right) panel */
   renderExtraMeta?: () => React.ReactNode;
+  /** Fetcher for cheque leaves (for auto-complete) */
+  fetchChequeLeaves?: (query: string, page: number) => Promise<{ is_success: boolean; result?: any[] }>;
+  /** Initial data for populating the transaction screen (e.g., from a PO) */
+  initialData?: any;
 }
 
 export interface TransactionPayload {
@@ -290,6 +306,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,8 +319,11 @@ 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;
+    purchase_order_line_id?: number | null;
     unit_price: number;
     discount_percent: number;
     discount_amount: number;