@apptimate/ui 4.5.0 → 4.6.0

package/package.json

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

package/src/common-components/PaymentSection.tsx

@@ -11,9 +11,10 @@ import { AsyncSearchableSelect } from "../base-components/SearchableSelect";
 export interface PaymentModeField {
   key: string;
   label: string;
-  type: "text" | "number" | "date" | "bank_account_select" | "material_type_select";
+  type: "text" | "number" | "date" | "bank_account_select" | "material_type_select" | "select" | "multi_select";
   required: boolean;
   readonly?: boolean;
+  options?: { label: string; value: string }[];
 }
 
 export interface PaymentMode {
@@ -65,11 +66,13 @@ export interface PaymentSectionProps {
   allowedSpecialModes?: string[];
   /** Fetcher for cheque leaves (for auto-complete) */
   fetchChequeLeaves?: (query: string, page: number) => Promise<{ is_success: boolean; result?: any[] }>;
+  /** UI Variant */
+  variant?: "default" | "advance";
 }
 
 /* ── Component ── */
 
-export function PaymentSection({ totalAmount, payments, onPaymentsChange, compact, fetchPaymentModes, fetchBankAccounts, materialTypes = [], allowedSpecialModes = [], fetchChequeLeaves }: PaymentSectionProps) {
+export function PaymentSection({ totalAmount, payments, onPaymentsChange, compact, fetchPaymentModes, fetchBankAccounts, materialTypes = [], allowedSpecialModes = [], fetchChequeLeaves, variant = "default" }: PaymentSectionProps) {
   const [paymentModes, setPaymentModes] = useState<PaymentMode[]>([]);
   const [bankAccounts, setBankAccounts] = useState<BankAccount[]>([]);
   const [isLoading, setIsLoading] = useState(false);
@@ -280,14 +283,14 @@ export function PaymentSection({ totalAmount, payments, onPaymentsChange, compac
       {/* ── Totals ── */}
       {payments.length > 0 && (
         <div className="bg-surface-0 rounded-[12px] border border-border-subtle p-4 space-y-2">
-          <TotalRow label="Amount to Pay" value={formatCurrency(totalAmount)} bold />
+          <TotalRow label={variant === "advance" ? "Target Amount" : "Amount to Pay"} value={formatCurrency(totalAmount)} bold />
           <div className="border-t border-border-subtle my-2" />
           <TotalRow label="Total Paid" value={formatCurrency(totalPaid)} />
           {creditAmount > 0.01 && (
             <TotalRow label="Credit Amount" value={formatCurrency(creditAmount)} className="text-amber-600" />
           )}
           <TotalRow
-            label={balance > 0.01 ? "Outstanding Balance" : balance < -0.01 ? "Change Due" : "Settled"}
+            label={balance > 0.01 ? "Outstanding Balance" : balance < -0.01 ? "Change Due" : (variant === "advance" ? "Matched" : "Settled")}
             value={formatCurrency(Math.abs(balance))}
             className={balance > 0.01 ? "text-danger-alt" : "text-green-600"}
             bold
@@ -299,7 +302,7 @@ export function PaymentSection({ totalAmount, payments, onPaymentsChange, compac
           )}
           {Math.abs(balance) < 0.01 && creditAmount <= 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>
+              <Check size={12} /><span>{variant === "advance" ? "Amount matched" : "Fully paid"}</span>
             </div>
           )}
         </div>
@@ -365,8 +368,8 @@ function PaymentEntryRow({ entry, mode, bankAccounts, materialTypes = [], onUpda
       <div className="flex flex-col gap-1">
         <label className="text-[11px] text-foreground-subtle font-bold uppercase tracking-wider">Amount</label>
         <input type="number" value={entry.amount || ""} onChange={(e) => onUpdate({ amount: Number(e.target.value) || 0 })}
-          className="w-full bg-surface-1 border-[1.5px] border-border-subtle rounded-[8px] px-3 py-2.5 text-[13px] font-medium text-foreground-1 outline-none focus:border-primary/40 transition-all [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
-          step="0.01" min={0} />
+          className="w-full bg-surface-1 border-[1.5px] border-border-subtle rounded-[8px] px-3 py-2.5 text-[13px] font-medium text-foreground-1 outline-none focus:border-primary/40 transition-all [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none disabled:opacity-50 disabled:cursor-not-allowed"
+          step="0.01" min={0} disabled={entry.mode_code === "advance"} />
       </div>
 
       {/* Dynamic sub-fields from field_config */}
@@ -414,6 +417,37 @@ function PaymentEntryRow({ entry, mode, bankAccounts, materialTypes = [], onUpda
                   <option value="">Select Material...</option>
                   {materialTypes.map((m) => (<option key={m.id} value={m.id}>{m.name}</option>))}
                 </select>
+              ) : field.type === "select" ? (
+                <select value={entry.metadata[field.key] || ""}
+                  onChange={(e) => onUpdate({ metadata: { ...entry.metadata, [field.key]: e.target.value } })}
+                  disabled={field.readonly}
+                  className="w-full bg-surface-1 border-[1.5px] border-border-subtle rounded-[8px] px-2.5 py-2.5 text-[12px] text-foreground-1 outline-none focus:border-primary/40 transition-all disabled:opacity-50 disabled:cursor-not-allowed">
+                  <option value="">Select...</option>
+                  {field.options?.map((o) => (<option key={o.value} value={o.value}>{o.label}</option>))}
+                </select>
+              ) : field.type === "multi_select" as any ? (
+                <AsyncSearchableSelect
+                  multiple
+                  option={{ label: 'label', value: 'value' }}
+                  defaultValue={
+                    Array.isArray(entry.metadata[field.key])
+                      ? (field.options || []).filter(o => (entry.metadata[field.key] as any).includes(o.value))
+                      : []
+                  }
+                  onChange={(val, selectedObjs: any) => {
+                    const sum = Array.isArray(selectedObjs) 
+                      ? selectedObjs.reduce((acc, curr) => acc + (curr.unapplied_amount || 0), 0)
+                      : 0;
+                    
+                    onUpdate({ 
+                      amount: sum, 
+                      metadata: { ...entry.metadata, [field.key]: val as any } 
+                    });
+                  }}
+                  disabled={field.readonly}
+                  placeholder="Select..."
+                  loadOptions={async () => field.options || []}
+                />
               ) : field.key === "cheque_number" && fetchChequeLeaves ? (
                 <>
                   <AsyncSearchableSelect

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

@@ -187,7 +187,7 @@ export function MetadataPanel({
 
       {/* ── Expected Delivery Date ── */}
       {config.showExpectedDeliveryDate && onExpectedDeliveryDateChange && (
-        <Section label="Expected Delivery">
+        <Section label={config.expectedDeliveryDateLabel || "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

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

@@ -4,7 +4,7 @@ import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import { cn } from '@apptimate/core-lib';
 import {
   Search, ScanBarcode, X, ShoppingCart, Package, Loader2,
-  Trash2, ChevronDown, ChevronRight, AlertTriangle
+  Trash2, ChevronDown, ChevronRight, AlertTriangle, Tag
 } from 'lucide-react';
 import { Badge } from '../../base-components/Badge';
 import { Table, THeader, TBody, TRow, TCell } from '../../base-components/Table';
@@ -17,6 +17,7 @@ import { HintIcon } from '../../base-components/HintIcon';
 interface ProductSelectionPanelProps {
   config: TransactionScreenConfig;
   warehouseId?: number;
+  partyId?: number | null;
   lineItems: TransactionLineItem[];
   onAddItem: (item: TransactionItem, variant?: any, extraData?: { quantity?: number; batches?: any[]; serial_numbers?: string[] }) => void;
   onUpdateLine: (uid: string, updates: Partial<TransactionLineItem>) => void;
@@ -27,6 +28,7 @@ interface ProductSelectionPanelProps {
 export function ProductSelectionPanel({
   config,
   warehouseId,
+  partyId,
   lineItems,
   onAddItem,
   onUpdateLine,
@@ -40,7 +42,7 @@ export function ProductSelectionPanel({
   const [expandedItemIds, setExpandedItemIds] = useState<number[]>([]);
   const [editingRates, setEditingRates] = useState<Record<string, string>>({});
   const [focusedIndex, setFocusedIndex] = useState<number>(-1);
-
+  const [discountTypes, setDiscountTypes] = useState<Record<string, 'amount' | 'percent'>>({});
   const [activeBatchItem, setActiveBatchItem] = useState<{ item: TransactionItem; variant?: any; preSelectedBatch?: any } | null>(null);
   const [activeBatchLineUid, setActiveBatchLineUid] = useState<string | null>(null);
   const [activeSerialItem, setActiveSerialItem] = useState<{ item: TransactionItem; variant?: any } | null>(null);
@@ -51,6 +53,7 @@ export function ProductSelectionPanel({
   const panelRef = React.useRef<HTMLDivElement>(null);
   const inputRef = React.useRef<HTMLInputElement>(null);
 
+  const showDiscountCol = config.showPrices && ['sales', 'quotation', 'pos'].includes(config.type);
 
   // ── Search handler ──
   const handleSearch = useCallback(
@@ -69,6 +72,13 @@ export function ProductSelectionPanel({
         try {
           const params: Record<string, string | number> = { search: value, limit: 20, type: config.type };
           if (warehouseId) params.warehouse_id = warehouseId;
+          
+          if (['sales', 'quotation', 'pos'].includes(config.type)) {
+            params.apply_sales_prices = 1;
+            params.transaction_type = config.type;
+            if (partyId) params.party_id = partyId;
+          }
+
           const res = await transactionLookup(params);
           if (res.is_success && res.result) {
             const payload = res.result as any;
@@ -227,18 +237,29 @@ export function ProductSelectionPanel({
     }
   };
 
-  const updateLineInput = (uid: string, field: 'quantity' | 'unit_price' | 'free_qty' | 'uom_id', value: string) => {
+  const updateLineInput = (uid: string, field: 'quantity' | 'unit_price' | 'free_qty' | 'uom_id' | 'discount_amount' | 'discount_percent', value: string | number) => {
     const num = value === '' ? 0 : Number(value);
     const line = lineItems.find(l => l.uid === uid);
     if (!line) return;
     
     let qty = line.quantity;
     let price = line.unit_price;
+    let discAmt = line.discount_amount;
+    let discPercent = line.discount_percent;
     
     if (field === 'quantity') qty = Math.max(0.001, num);
     if (field === 'unit_price') price = Math.max(0, num);
-    
-    const discAmt = (price * qty * line.discount_percent) / 100;
+    if (field === 'discount_amount') {
+      const unitDiscount = Math.max(0, num);
+      discAmt = unitDiscount * qty;
+      discPercent = (price * qty) > 0 ? (discAmt * 100) / (price * qty) : 0;
+    } else if (field === 'discount_percent') {
+      discPercent = Math.max(0, num);
+      discAmt = (price * qty * discPercent) / 100;
+    } else {
+      // If price or qty changes, recalculate discAmt from discPercent
+      discAmt = (price * qty * discPercent) / 100;
+    }
     
     if (field === 'uom_id') {
       const newUomId = Number(value);
@@ -260,8 +281,6 @@ export function ProductSelectionPanel({
       
       const newDiscAmt = (newPrice * line.quantity * line.discount_percent) / 100;
       
-      setEditingRates(prev => ({ ...prev, [uid]: newPrice.toFixed(2) }));
-      
       onUpdateLine(uid, { 
         uom_id: newUomId,
         unit_price: newPrice,
@@ -275,6 +294,7 @@ export function ProductSelectionPanel({
       quantity: qty,
       unit_price: price,
       discount_amount: discAmt,
+      discount_percent: discPercent,
       line_total: price * qty - discAmt,
     });
   };
@@ -531,9 +551,10 @@ export function ProductSelectionPanel({
             <THeader>
               <TRow>
                 <TCell isHeader className="w-[45%]">Item</TCell>
-                <TCell isHeader>Qty</TCell>
-                {config.enablePurchaseUnit && <TCell isHeader>Unit</TCell>}
-                {config.showPrices && <TCell isHeader>Rate</TCell>}
+                <TCell isHeader className="text-center">Qty</TCell>
+                {(config.enablePurchaseUnit || config.enableSalesUnit) && <TCell isHeader>Unit</TCell>}
+                {config.showPrices && <TCell isHeader className="text-right">Rate</TCell>}
+                {showDiscountCol && <TCell isHeader className="text-right">Disc.</TCell>}
                 {config.showPrices && <TCell isHeader className="text-right">Total</TCell>}
                 <TCell isHeader className="w-10 text-center"></TCell>
               </TRow>
@@ -675,8 +696,7 @@ export function ProductSelectionPanel({
                       </div>
                     </div>
                   </TCell>
-                  
-                  <TCell label="Qty" className="py-2.5">
+                  <TCell label="Qty" className="py-2.5 text-center">
                     <input
                       type="number"
                       value={line.quantity}
@@ -687,7 +707,7 @@ export function ProductSelectionPanel({
                     />
                   </TCell>
 
-                  {config.enablePurchaseUnit && (
+                  {(config.enablePurchaseUnit || config.enableSalesUnit) && (
                     <TCell label="Unit" className="py-2.5">
                       <select
                         value={line.uom_id || line.item.uom_id || ''}
@@ -703,30 +723,75 @@ export function ProductSelectionPanel({
                   )}
 
                   {config.showPrices && (
-                    <TCell label="Rate" className="py-2.5">
-                      <input
-                        type="text"
-                        value={editingRates[line.uid] ?? Number(line.unit_price || 0).toFixed(2)}
-                        onChange={(e) => {
-                          const val = e.target.value;
-                          if (/^\d*\.?\d{0,2}$/.test(val)) {
-                            setEditingRates(prev => ({ ...prev, [line.uid]: val }));
-                            updateLineInput(line.uid, 'unit_price', val);
-                          }
-                        }}
-                        onBlur={() => {
-                          setEditingRates(prev => {
-                            const next = { ...prev };
-                            delete next[line.uid];
-                            return next;
-                          });
-                        }}
-                        disabled={!config.allowEditPrice || line.is_free_qty}
-                        className={cn(
-                          "w-24 h-8 px-2 text-[13px] text-right font-medium bg-surface-1 border border-border-subtle rounded-md focus:border-primary/50 focus:outline-none transition-colors",
-                          (!config.allowEditPrice || line.is_free_qty) && "opacity-60 cursor-not-allowed bg-surface-hover border-transparent"
+                    <TCell label="Rate" className="py-2.5 text-right relative">
+                      <div className="flex items-center justify-end w-full gap-2">
+                        {line.applied_price_rule?.price_list_name && (
+                          <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" />}
+                          />
                         )}
-                      />
+                        <input
+                          type="text"
+                          value={editingRates[line.uid] ?? Number(line.unit_price || 0).toFixed(2)}
+                          onChange={(e) => {
+                            const val = e.target.value;
+                            if (/^\d*\.?\d{0,2}$/.test(val)) {
+                              setEditingRates(prev => ({ ...prev, [line.uid]: val }));
+                              updateLineInput(line.uid, 'unit_price', val);
+                            }
+                          }}
+                          onBlur={() => {
+                            setEditingRates(prev => {
+                              const next = { ...prev };
+                              delete next[line.uid];
+                              return next;
+                            });
+                          }}
+                          disabled={!config.allowEditPrice || line.is_free_qty || !line.item.is_discountable}
+                          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"
+                          )}
+                        />
+                      </div>
+                    </TCell>
+                  )}
+
+                  {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"
+                      )}>
+                        <select 
+                          className="h-full bg-surface-hover text-[11px] font-medium text-foreground-subtle border-r border-border-subtle pl-1.5 pr-0.5 focus:outline-none cursor-pointer disabled:cursor-not-allowed"
+                          value={discountTypes[line.uid] || 'amount'}
+                          onChange={(e) => {
+                            setDiscountTypes(prev => ({ ...prev, [line.uid]: e.target.value as 'amount' | 'percent' }));
+                          }}
+                          disabled={!config.allowEditPrice || line.is_free_qty || !line.item.is_discountable}
+                        >
+                          <option value="amount">Amt</option>
+                          <option value="percent">%</option>
+                        </select>
+                        <input
+                          type="number"
+                          value={(discountTypes[line.uid] === 'percent' ? line.discount_percent : (line.quantity > 0 ? Number((line.discount_amount / line.quantity).toFixed(2)) : 0)) || ''}
+                          placeholder="0.00"
+                          onChange={(e) => {
+                            const val = e.target.value;
+                            updateLineInput(line.uid, discountTypes[line.uid] === 'percent' ? 'discount_percent' : 'discount_amount', val ? Number(val) : 0);
+                          }}
+                          disabled={!config.allowEditPrice || line.is_free_qty || !line.item.is_discountable}
+                          className="flex-1 w-full min-w-0 h-full px-2 text-[13px] text-right font-medium bg-transparent focus:outline-none disabled:cursor-not-allowed"
+                          min={0}
+                          step="any"
+                        />
+                      </div>
                     </TCell>
                   )}
 
@@ -788,7 +853,12 @@ export function ProductSelectionPanel({
       {lineItems.length > 0 && (
         <div className="mt-3 pt-3 border-t border-border-subtle">
           <div className="flex items-center justify-between text-[12px] text-foreground-subtle">
-            <span>{lineItems.length} item{lineItems.length > 1 ? 's' : ''} · {lineItems.reduce((s, l) => s + l.quantity, 0)} units</span>
+            <span>{lineItems.length} item{lineItems.length > 1 ? 's' : ''} · {lineItems.reduce((s, l) => {
+              const uoms = l.item.uom?.uom_group?.uoms || [];
+              const currentUom = uoms.find((u: any) => u.id === (l.uom_id || l.item.uom_id));
+              const factor = Number(currentUom?.conversion_factor) || 1;
+              return s + (l.quantity * factor);
+            }, 0)} units</span>
             {config.showPrices && (
               <span className="text-[15px] font-bold text-foreground-0">
                 {formatCurrency(lineItems.reduce((s, l) => s + l.line_total, 0))}

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

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useState, useCallback, useMemo, useEffect } from 'react';
-import { cn } from '@apptimate/core-lib';
+import { cn, PriceCalculationService, evaluatePriceLists } from '@apptimate/core-lib';
 import toast from 'react-hot-toast';
 import { ProductSelectionPanel } from './ProductSelectionPanel';
 import { MetadataPanel } from './MetadataPanel';
@@ -104,9 +104,28 @@ export function ProductTransactionScreen({
         }
 
         const variantPriceField = config.priceField === 'default_cost_price' ? 'cost_price' : 'sale_price';
-        const unitPrice = actualVariant ? Number(actualVariant[variantPriceField] || 0) : 0;
+        const basePrice = actualVariant ? Number(actualVariant[variantPriceField] || 0) : 0;
         const qty = extra?.quantity || 1;
-        const discountAmt = 0; // Initial discount
+        
+        const uomId = itemWithVariants.uom_id;
+        const uoms = itemWithVariants.uom?.uom_group?.uoms || [];
+        const currentUom = uoms.find((u: any) => u.id === uomId);
+        const factor = Number(currentUom?.conversion_factor) || 1;
+
+        let unitPrice = basePrice * factor;
+        let discountPercent = 0;
+        let discountAmt = 0;
+
+        let appliedRule = undefined;
+
+        if (actualVariant && actualVariant.pricing_rules) {
+          const effectiveQty = qty * factor;
+          const priceDetails = PriceCalculationService.calculatePriceDetails(basePrice, effectiveQty, actualVariant.pricing_rules);
+          unitPrice = priceDetails.unitPrice * factor;
+          discountPercent = priceDetails.discountPercent;
+          discountAmt = priceDetails.discountAmount * factor;
+          appliedRule = priceDetails.appliedRule;
+        }
         
         const newLine: TransactionLineItem = {
           uid: `${itemWithVariants.id}-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`,
@@ -116,11 +135,13 @@ export function ProductTransactionScreen({
           serial_numbers: extra?.serial_numbers || [],
           quantity: qty,
           unit_price: unitPrice,
-          discount_percent: 0,
+          discount_percent: discountPercent,
           discount_amount: discountAmt,
-          line_total: unitPrice * qty - discountAmt,
+          line_total: (unitPrice * qty) - discountAmt,
           expanded: false,
           uom_id: itemWithVariants.uom_id,
+          pricing_rules: actualVariant?.pricing_rules,
+          applied_price_rule: appliedRule,
         };
         return [...prevLineItems, newLine];
       });
@@ -131,9 +152,48 @@ export function ProductTransactionScreen({
   // ── Update line ──
   const handleUpdateLine = useCallback((uid: string, updates: Partial<TransactionLineItem>) => {
     setLineItems((prev) =>
-      prev.map((l) => (l.uid === uid ? { ...l, ...updates } : l))
+      prev.map((l) => {
+        if (l.uid !== uid) return l;
+
+        const updatedLine = { ...l, ...updates };
+
+        const isQtyChanged = 'quantity' in updates && updates.quantity !== l.quantity;
+        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 isQtyOrUomChanged = isQtyChanged || isUomChanged;
+
+        if (isQtyOrUomChanged && updatedLine.pricing_rules && updatedLine.pricing_rules.length > 0) {
+          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 uoms = updatedLine.item.uom?.uom_group?.uoms || [];
+          const currentUom = uoms.find((u: any) => u.id === (updatedLine.uom_id || updatedLine.item.uom_id));
+          const factor = Number(currentUom?.conversion_factor) || 1;
+          
+          const effectiveQty = updatedLine.quantity * factor;
+
+          const priceDetails = PriceCalculationService.calculatePriceDetails(basePrice, effectiveQty, updatedLine.pricing_rules);
+          updatedLine.unit_price = priceDetails.unitPrice * factor;
+          updatedLine.discount_percent = priceDetails.discountPercent;
+          updatedLine.discount_amount = priceDetails.discountAmount * factor;
+          updatedLine.applied_price_rule = priceDetails.appliedRule;
+          updatedLine.line_total = (updatedLine.unit_price * updatedLine.quantity) - updatedLine.discount_amount;
+        } else if (isQtyChanged || isUomChanged || isPriceChanged || isDiscountChanged) {
+          updatedLine.line_total = (updatedLine.unit_price * updatedLine.quantity) - updatedLine.discount_amount;
+          
+          const isManualPriceOverride = isPriceChanged && !isUomChanged;
+          if (isManualPriceOverride) {
+            updatedLine.applied_price_rule = undefined;
+          }
+        }
+
+        return updatedLine;
+      })
     );
-  }, []);
+  }, [config.priceField]);
 
   // ── Remove line ──
   const handleRemoveLine = useCallback((uid: string) => {
@@ -210,7 +270,7 @@ export function ProductTransactionScreen({
             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,
+            unit_discount: l.discount_amount / l.quantity,
             line_total: (l.line_total / l.quantity) * b.quantity,
           }));
         }
@@ -232,7 +292,7 @@ export function ProductTransactionScreen({
           purchase_order_line_id: l.purchase_order_line_id,
           unit_price: l.unit_price,
           discount_percent: l.discount_percent,
-          discount_amount: l.discount_amount,
+          unit_discount: l.discount_amount / l.quantity,
           line_total: l.line_total,
         }];
       }),
@@ -295,7 +355,46 @@ export function ProductTransactionScreen({
             expectedDeliveryDate={expectedDeliveryDate}
             notes={notes}
             payments={payments}
-            onPartyChange={(id, party) => { setPartyId(id); setPartyName(party?.name ?? null); }}
+            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];
+                      
+                      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);
+                      
+                      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' });
+                  }
+                } catch (e) {
+                  toast.error('Failed to recalculate prices', { id: 'price-calc' });
+                }
+              }
+              setPartyId(id); 
+              setPartyName(party?.name ?? null); 
+            }}
             onWarehouseChange={(id, name) => { setWarehouseId(id); setWarehouseName(name ?? null); }}
             onDateChange={setTransactionDate}
             onExpectedDeliveryDateChange={setExpectedDeliveryDate}

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

@@ -19,9 +19,9 @@ export interface TransactionItem {
   is_discountable: boolean;
   category?: { id: number; name: string };
   brand?: { id: number; name: string };
-  uom?: { 
-    id: number; 
-    name: string; 
+  uom?: {
+    id: number;
+    name: string;
     abbreviation: string;
     uom_group?: {
       id: number;
@@ -41,6 +41,7 @@ export interface TransactionItemVariant {
   cost_price?: number;
   sale_price?: number;
   additional_price?: number;
+  pricing_rules?: any[];
 }
 
 export interface TransactionBatch {
@@ -84,6 +85,8 @@ export interface TransactionLineItem {
   line_total: number;
   notes?: string;
   expanded?: boolean;         // Whether the detail row is expanded
+  pricing_rules?: any[];
+  applied_price_rule?: any;
 }
 
 import type { PaymentModeField, PaymentMode, PaymentEntry, BankAccount } from '../PaymentSection';
@@ -150,8 +153,12 @@ export interface TransactionScreenConfig {
   showStock?: boolean;
   /** Enable purchase unit selection (dynamic setting) */
   enablePurchaseUnit?: boolean;
+  /** Enable sales unit selection (dynamic setting) */
+  enableSalesUnit?: boolean;
   /** Show expected delivery date */
   showExpectedDeliveryDate?: boolean;
+  /** Label for the expected delivery date field */
+  expectedDeliveryDateLabel?: string;
   /** 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 */
@@ -174,7 +181,7 @@ export const TRANSACTION_PRESETS: Record<TransactionType, TransactionScreenConfi
     submitLabel: 'Create Sales Order',
     title: 'New Sale',
     allowCreateBatchAndSerial: false,
-    allowEditPrice: false,
+    allowEditPrice: true,
     showStock: true,
   },
   quotation: {
@@ -190,8 +197,10 @@ export const TRANSACTION_PRESETS: Record<TransactionType, TransactionScreenConfi
     submitLabel: 'Create Quotation',
     title: 'New Quotation',
     allowCreateBatchAndSerial: false,
-    allowEditPrice: false,
+    allowEditPrice: true,
     showStock: true,
+    showExpectedDeliveryDate: true,
+    expectedDeliveryDateLabel: 'Valid Until',
     disableTrackingSelection: true,
   },
   purchase: {
@@ -243,7 +252,7 @@ export const TRANSACTION_PRESETS: Record<TransactionType, TransactionScreenConfi
     submitLabel: 'Complete Sale',
     title: 'POS Checkout',
     allowCreateBatchAndSerial: false,
-    allowEditPrice: false,
+    allowEditPrice: true,
     showStock: true,
   },
   opening_stock: {
@@ -326,7 +335,7 @@ export interface TransactionPayload {
     purchase_order_line_id?: number | null;
     unit_price: number;
     discount_percent: number;
-    discount_amount: number;
+    unit_discount: number;
     line_total: number;
   }>;
   payments?: PaymentEntry[];