@apptimate/ui 4.7.0 → 4.9.0

package/package.json

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

package/src/common-components/DashboardLayout.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import React, { useState } from 'react';
-import { Briefcase, CreditCard, Settings, Menu, X, LogOut, User as UserIcon, Building2, ChevronRight, Check } from 'lucide-react';
+import { Briefcase, CreditCard, Settings, Menu, X, LogOut, User as UserIcon, Building2, ChevronRight, Check, PanelLeftClose, PanelLeftOpen } from 'lucide-react';
 import { Dropdown, DropdownItem } from '../base-components/Dropdown';
 
 import Link from 'next/link';
@@ -67,6 +67,7 @@ export function DashboardLayout({
 }) {
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   const [isOrgModalOpen, setIsOrgModalOpen] = useState(false);
+  const [isSubSidebarOpen, setIsSubSidebarOpen] = useState(true);
   const pathname = usePathname() || "";
   const router = useRouter();
 
@@ -140,11 +141,22 @@ export function DashboardLayout({
   return (
     <div className="flex h-screen bg-[#F4F5F7] overflow-hidden font-sans print:h-auto print:overflow-visible print:bg-white">
       {/* Desktop Global Sidebar */}
-      <aside className="hidden md:flex print:hidden w-[80px] bg-white border-r border-gray-200 flex-col items-center py-6 shrink-0 z-20">
+      <aside className="hidden md:flex print:hidden w-[80px] bg-white border-r border-gray-200 flex-col items-center py-6 shrink-0 z-30 relative group">
         <div className="w-12 h-12 flex items-center justify-center mb-8">
           {logo}
         </div>
 
+        {/* Floating Open Button when Sub-sidebar is closed */}
+        {!isSubSidebarOpen && activeMenu && activeMenu.groups.length > 0 && (
+          <button
+            onClick={() => setIsSubSidebarOpen(true)}
+            className="hidden md:flex absolute -right-4 top-6 z-40 w-8 h-8 bg-white border border-gray-200 rounded-full shadow-sm items-center justify-center text-gray-500 hover:text-[#2D3142] hover:bg-gray-50 transition-all outline-none opacity-0 group-hover:opacity-100 cursor-pointer"
+            title="Expand Sidebar"
+          >
+            <PanelLeftOpen size={16} />
+          </button>
+        )}
+
         <style dangerouslySetInnerHTML={{
           __html: `
           .sidebar-scroll {
@@ -179,7 +191,10 @@ export function DashboardLayout({
             return (
               <div
                 key={menu.id}
-                onClick={() => setActiveMenuId(menu.id)}
+                onClick={() => {
+                  setActiveMenuId(menu.id);
+                  setIsSubSidebarOpen(true);
+                }}
                 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]"
                   }`}
               >
@@ -226,8 +241,17 @@ export function DashboardLayout({
 
       {/* Desktop Secondary Sidebar */}
       {activeMenu && activeMenu.groups.length > 0 && (
-        <aside className="hidden md:flex print:hidden w-[210px] bg-white border-gray-200 flex-col py-8 shrink-0 z-10">
-          <h2 className="px-6 text-xl font-bold text-[#2D3142]/80 mb-6">{activeMenu.label}</h2>
+        <>
+          <aside className={cn(
+            "hidden md:flex print:hidden bg-white border-gray-200 flex-col py-8 shrink-0 z-10 transition-all duration-300 overflow-hidden group",
+            isSubSidebarOpen ? "w-[210px]" : "w-0 opacity-0 px-0"
+          )}>
+            <div className="flex items-center justify-between px-6 mb-6 w-[210px]">
+              <h2 className="text-xl font-bold text-[#2D3142]/80 truncate">{activeMenu.label}</h2>
+              <button onClick={() => setIsSubSidebarOpen(false)} className="text-gray-400 hover:text-[#2D3142] transition-colors flex-shrink-0 outline-none opacity-0 group-hover:opacity-100 cursor-pointer">
+                <PanelLeftClose size={18} />
+              </button>
+            </div>
           <div className="flex-1 overflow-y-auto px-4 space-y-6">
             {activeMenu.groups.map((group) => (
               <div key={group.id}>
@@ -296,6 +320,8 @@ export function DashboardLayout({
             </div>
           )}
         </aside>
+
+        </>
       )}
 
       {/* Main Content Area & Mobile Header */}

package/src/common-components/pickers/modals/SerialSelectionModal.tsx

@@ -14,7 +14,7 @@ interface SerialSelectionModalProps {
   allowCreate?: boolean;
   initialSerials?: string[];
   warehouseId?: number;
-  onConfirm: (serials: string[]) => void;
+  onConfirm: (serials: string[], serialObjects?: {id: number, serial_number: string}[]) => void;
 }
 
 export function SerialSelectionModal({
@@ -119,7 +119,15 @@ export function SerialSelectionModal({
       toast.error("Please add at least one serial number.");
       return;
     }
-    onConfirm(serials);
+    
+    if (!allowCreate) {
+      const serialObjects = availableSerials
+        .filter(s => serials.includes(s.serial_number))
+        .map(s => ({ id: s.id, serial_number: s.serial_number }));
+      onConfirm(serials, serialObjects);
+    } else {
+      onConfirm(serials);
+    }
   };
 
   // Display available serials from backend

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

@@ -20,7 +20,7 @@ interface ProductSelectionPanelProps {
   warehouseId?: number;
   partyId?: number | null;
   lineItems: TransactionLineItem[];
-  onAddItem: (item: TransactionItem, variant?: any, extraData?: { quantity?: number; batches?: any[]; serial_numbers?: string[] }) => void;
+  onAddItem: (item: TransactionItem, variant?: any, extraData?: { quantity?: number; batches?: any[]; serial_numbers?: string[]; serial_number_objects?: {id: number, serial_number: string}[] }) => void;
   onUpdateLine: (uid: string, updates: Partial<TransactionLineItem>) => void;
   onRemoveLine: (uid: string) => void;
   onToggleExpand: (uid: string) => void;
@@ -96,7 +96,7 @@ export function ProductSelectionPanel({
                 onAddItem(entity.item, entity.variant, { serial_numbers: [entity.serial_number], quantity: 1 });
               } else if (matchType === 'batch') {
                 const batchVariant = entity.variant || (entity.variant_id && entity.item?.variants ? entity.item.variants.find((v: any) => v.id === entity.variant_id) : null);
-                if (['sales', 'quotation'].includes(config.type)) {
+                if (['sales', 'quotation', 'pos'].includes(config.type)) {
                   onAddItem(entity.item, batchVariant, { 
                     batches: [{ batch_id: entity.id, batch_number: entity.batch_number, selling_price: entity.selling_price, quantity: 1 }], 
                     quantity: 1 
@@ -132,7 +132,7 @@ export function ProductSelectionPanel({
       setShowResults(false);
 
       if (!config.disableTrackingSelection && item.tracking_type === 'batch') {
-        if (['sales', 'quotation'].includes(config.type)) {
+        if (['sales', 'quotation', 'pos'].includes(config.type)) {
           onAddItem(item, variant);
         } else {
           setActiveBatchItem({ item, variant });
@@ -167,10 +167,10 @@ export function ProductSelectionPanel({
     }
   };
 
-  const handleSerialConfirm = (serials: string[]) => {
+  const handleSerialConfirm = (serials: string[], serialObjects?: {id: number, serial_number: string}[]) => {
     if (!activeSerialItem) return;
 
-    onAddItem(activeSerialItem.item, activeSerialItem.variant, { serial_numbers: serials, quantity: serials.length });
+    onAddItem(activeSerialItem.item, activeSerialItem.variant, { serial_numbers: serials, serial_number_objects: serialObjects, quantity: serials.length });
     setActiveSerialItem(null);
   };
 
@@ -582,7 +582,7 @@ export function ProductSelectionPanel({
             </THeader>
             <TBody>
               {lineItems.map((line) => {
-                const isBatchPending = ['sales', 'quotation'].includes(config.type) && line.item.tracking_type === 'batch' && (!line.batches || line.batches.length === 0);
+                const isBatchPending = ['sales', 'quotation', 'pos'].includes(config.type) && line.item.tracking_type === 'batch' && (!line.batches || line.batches.length === 0);
                 return (
                 <TRow key={line.uid}>
                   <TCell label="Item" className="py-2.5">
@@ -604,14 +604,20 @@ export function ProductSelectionPanel({
                           )}
                         </span>
                         <span className="text-[11px] text-foreground-subtle font-mono mt-0.5 break-words">
-                          {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}
+                          {(() => {
+                            if (line.item.has_variants && line.variant_id) {
+                              const variant = line.variant || line.item.variants?.find(v => v.id === line.variant_id);
+                              if (variant) {
+                                return `${variant.variant_name} • ${variant.sku}`;
+                              }
+                            }
+                            return line.item.sku || '';
+                          })()}
                         </span>
-                        {((!config.disableTrackingSelection && (line.item.tracking_type === 'batch' || line.item.tracking_type === 'serial')) || (line.item.tracking_type === 'batch' && ['sales', 'quotation'].includes(config.type))) && (
+                        {((!config.disableTrackingSelection && (line.item.tracking_type === 'batch' || line.item.tracking_type === 'serial')) || (line.item.tracking_type === 'batch' && ['sales', 'quotation', 'pos'].includes(config.type))) && (
                           <div className="flex flex-wrap gap-1 mt-1.5">
                             {line.item.tracking_type === 'batch' && (() => {
-                              if (['sales', 'quotation'].includes(config.type)) {
+                              if (['sales', 'quotation', 'pos'].includes(config.type)) {
                                 return (
                                   <div className="mt-1.5 flex items-center gap-2" onClick={(e) => e.stopPropagation()}>
                                     {(!line.batches || line.batches.length === 0) && (
@@ -746,11 +752,16 @@ export function ProductSelectionPanel({
                                       ? (() => {
                                           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...";
+                                            if (p) {
+                                              if (p.item.has_variants && p.variant_id) {
+                                                const pVariant = p.variant || p.item.variants?.find((v) => v.id === p.variant_id);
+                                                if (pVariant && pVariant.variant_name) {
+                                                  return `${p.item.name} (${pVariant.variant_name})`;
+                                                }
+                                              }
+                                              return p.item.name;
+                                            }
+                                            return "Select Parent Line...";
                                           } else {
                                             return `${line.parent_line_uids.length} Parents Selected`;
                                           }
@@ -799,7 +810,7 @@ export function ProductSelectionPanel({
                           const variantPriceField = config.priceField === 'default_cost_price' ? 'cost_price' : 'sale_price';
                           const actualVariant = line.variant_id ? line.item.variants?.find((v: any) => v.id === line.variant_id) : (line.item.variants?.[0] || null);
                           const batchPriceField = config.priceField === 'default_cost_price' ? 'cost_price' : 'selling_price';
-                          const batchPrice = ['sales', 'quotation'].includes(config.type) && line.batches?.[0] ? (line.batches[0] as any)[batchPriceField] : undefined;
+                          const batchPrice = ['sales', 'quotation', 'pos'].includes(config.type) && line.batches?.[0] ? (line.batches[0] as any)[batchPriceField] : undefined;
                           const basePrice = (batchPrice !== undefined && batchPrice !== null)
                             ? Number(batchPrice)
                             : (actualVariant 
@@ -920,7 +931,7 @@ export function ProductSelectionPanel({
           warehouseId={warehouseId}
           allowCreate={config.allowCreateBatchAndSerial}
           initialSerials={lineItems.find(l => l.uid === activeSerialLineUid)?.serial_numbers || []}
-          onConfirm={(serials) => {
+          onConfirm={(serials, serialObjects) => {
             const line = lineItems.find(l => l.uid === activeSerialLineUid);
             if (!line) return;
             
@@ -929,6 +940,7 @@ export function ProductSelectionPanel({
             
             onUpdateLine(line.uid, {
               serial_numbers: serials,
+              serial_number_objects: serialObjects,
               quantity: newQty,
               discount_amount: discAmt,
               line_total: line.unit_price * newQty - discAmt,

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

@@ -57,24 +57,24 @@ export function ProductTransactionScreen({
     setLineItems(prev => prev.map(l => {
       if (l.is_free_qty || !l.variant_id || !evaluatedRules[l.variant_id]) return l;
       const rules = evaluatedRules[l.variant_id];
-      
+
       const variantPriceField = config.priceField === 'default_cost_price' ? 'cost_price' : 'sale_price';
       const actualVariant = l.item.variants?.find((v: any) => v.id === l.variant_id);
       const batchPriceField = config.priceField === 'default_cost_price' ? 'cost_price' : 'selling_price';
       const batchPrice = ['sales', 'quotation'].includes(config.type) && l.batches?.[0] ? (l.batches[0] as any)[batchPriceField] : undefined;
       const basePrice = (batchPrice !== undefined && batchPrice !== null)
         ? Number(batchPrice)
-        : (actualVariant 
-          ? Number(actualVariant[variantPriceField] || l.item[config.priceField] || 0) 
+        : (actualVariant
+          ? Number(actualVariant[variantPriceField] || l.item[config.priceField] || 0)
           : Number(l.item[config.priceField] || 0));
-      
+
       const uoms = l.item.uom?.uom_group?.uoms || [];
       const currentUom = uoms.find((u: any) => u.id === (l.uom_id || l.item.uom_id));
       const factor = Number(currentUom?.conversion_factor) || 1;
       const effectiveQty = l.quantity * factor;
 
       const priceDetails = PriceCalculationService.calculatePriceDetails(basePrice, effectiveQty, rules, l.batches?.[0]?.batch_id);
-      
+
       return {
         ...l,
         pricing_rules: rules,
@@ -111,6 +111,13 @@ export function ProductTransactionScreen({
         setWarehouseId(initialData.warehouse_id);
         if (initialData.warehouse?.name) setWarehouseName(initialData.warehouse.name);
       }
+      if (initialData.transaction_date || initialData.order_date || initialData.quotation_date || initialData.date) {
+        setTransactionDate(initialData.transaction_date || initialData.order_date || initialData.quotation_date || initialData.date);
+      }
+      if (initialData.expected_delivery_date || initialData.expected_delivery) {
+        setExpectedDeliveryDate(initialData.expected_delivery_date || initialData.expected_delivery);
+      }
+
       if (initialData.lines && Array.isArray(initialData.lines)) {
         setLineItems(
           initialData.lines.map((l: any) => {
@@ -120,6 +127,7 @@ export function ProductTransactionScreen({
               uid: l.uid || Math.random().toString(36).slice(2, 7),
               item: l.item,
               variant_id: l.variant_id || null,
+              variant: l.variant || null,
               batches: l.batches || [],
               serial_numbers: l.serial_numbers || [],
               quantity: qty,
@@ -135,7 +143,7 @@ export function ProductTransactionScreen({
             };
           })
         );
-        
+
         // Populate pricing rules for existing items if party is selected
         if (initialData.party_id && ['sales', 'pos', 'quotation'].includes(config.type)) {
           evaluatePriceLists({
@@ -152,7 +160,7 @@ export function ProductTransactionScreen({
                 return line;
               }));
             }
-          }).catch(() => {});
+          }).catch(() => { });
         }
       }
     }
@@ -186,7 +194,7 @@ export function ProductTransactionScreen({
           ? Number(batchPrice)
           : (actualVariant ? Number(actualVariant[variantPriceField] || itemWithVariants[config.priceField] || 0) : Number(itemWithVariants[config.priceField] || 0));
         const qty = extra?.quantity || 1;
-        
+
         const uomId = itemWithVariants.uom_id;
         const uoms = itemWithVariants.uom?.uom_group?.uoms || [];
         const currentUom = uoms.find((u: any) => u.id === uomId);
@@ -206,7 +214,7 @@ export function ProductTransactionScreen({
           discountAmt = priceDetails.discountAmount * factor;
           appliedRule = priceDetails.appliedRule;
         }
-        
+
         const newLine: TransactionLineItem = {
           uid: `${itemWithVariants.id}-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`,
           item: itemWithVariants,
@@ -253,14 +261,14 @@ export function ProductTransactionScreen({
           const batchPrice = ['sales', 'quotation'].includes(config.type) && updatedLine.batches?.[0] ? (updatedLine.batches[0] as any)[batchPriceField] : undefined;
           const basePrice = (batchPrice !== undefined && batchPrice !== null)
             ? Number(batchPrice)
-            : (actualVariant 
-              ? Number(actualVariant[variantPriceField] || updatedLine.item[config.priceField] || 0) 
+            : (actualVariant
+              ? Number(actualVariant[variantPriceField] || updatedLine.item[config.priceField] || 0)
               : Number(updatedLine.item[config.priceField] || 0));
-          
+
           const uoms = updatedLine.item.uom?.uom_group?.uoms || [];
           const currentUom = uoms.find((u: any) => u.id === (updatedLine.uom_id || updatedLine.item.uom_id));
           const factor = Number(currentUom?.conversion_factor) || 1;
-          
+
           const effectiveQty = updatedLine.quantity * factor;
 
           console.log("DEBUG: handleUpdateLine rules -> ", {
@@ -275,7 +283,7 @@ export function ProductTransactionScreen({
           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;
@@ -286,6 +294,14 @@ export function ProductTransactionScreen({
           updatedLine.batches[0].quantity = updatedLine.quantity;
         }
 
+        if (updatedLine.is_free_qty) {
+          updatedLine.unit_price = 0;
+          updatedLine.discount_amount = 0;
+          updatedLine.discount_percent = 0;
+          updatedLine.line_total = 0;
+          updatedLine.applied_price_rule = undefined;
+        }
+
         return updatedLine;
       })
     );
@@ -397,7 +413,9 @@ export function ProductTransactionScreen({
           expiry_date: undefined,
           supplier_reference: undefined,
           selling_price: undefined,
-          serial_numbers: l.serial_numbers,
+          serial_numbers: l.serial_number_objects && l.serial_number_objects.length > 0 
+            ? l.serial_number_objects.map(o => o.id) 
+            : l.serial_numbers,
           quantity: l.quantity,
           uid: l.uid,
           is_free_qty: l.is_free_qty,
@@ -470,7 +488,7 @@ export function ProductTransactionScreen({
             expectedDeliveryDate={expectedDeliveryDate}
             notes={notes}
             payments={payments}
-            onPartyChange={async (id, party) => { 
+            onPartyChange={async (id, party) => {
               if (partyId !== id && lineItems.length > 0 && ['sales', 'pos', 'quotation'].includes(config.type)) {
                 if (hasActivePriceLists) {
                   toast.loading('Checking price changes...', { id: 'price-calc' });
@@ -480,12 +498,12 @@ export function ProductTransactionScreen({
                       transaction_type: config.type,
                       items: lineItems.filter(l => l.variant_id && !l.is_free_qty).map(l => ({ variant_id: l.variant_id! }))
                     });
-                    
+
                     toast.dismiss('price-calc');
-                    
+
                     if (res.is_success && res.result) {
                       const evaluatedRules = res.result as Record<number, any[]>;
-                      
+
                       let hasActualPriceChanges = false;
                       for (const l of lineItems) {
                         if (!l.is_free_qty && l.variant_id && evaluatedRules[l.variant_id]) {
@@ -496,24 +514,24 @@ export function ProductTransactionScreen({
                           const batchPrice = ['sales', 'quotation'].includes(config.type) && l.batches?.[0] ? (l.batches[0] as any)[batchPriceField] : undefined;
                           const basePrice = (batchPrice !== undefined && batchPrice !== null)
                             ? Number(batchPrice)
-                            : (actualVariant 
-                              ? Number(actualVariant[variantPriceField] || l.item[config.priceField] || 0) 
+                            : (actualVariant
+                              ? Number(actualVariant[variantPriceField] || l.item[config.priceField] || 0)
                               : Number(l.item[config.priceField] || 0));
-                          
+
                           const uoms = l.item.uom?.uom_group?.uoms || [];
                           const currentUom = uoms.find((u: any) => u.id === (l.uom_id || l.item.uom_id));
                           const factor = Number(currentUom?.conversion_factor) || 1;
                           const effectiveQty = l.quantity * factor;
 
                           const priceDetails = PriceCalculationService.calculatePriceDetails(basePrice, effectiveQty, rules, l.batches?.[0]?.batch_id);
-                          
+
                           if (Math.abs((priceDetails.unitPrice * factor) - l.unit_price) > 0.001) {
                             hasActualPriceChanges = true;
                             break;
                           }
                         }
                       }
-                      
+
                       if (hasActualPriceChanges) {
                         const previousRulesApplied = lineItems.some(l => l.applied_price_rule);
                         setPriceEvaluationModal({
@@ -542,8 +560,8 @@ export function ProductTransactionScreen({
                   }
                 }
               }
-              setPartyId(id); 
-              setPartyName(party?.name ?? null); 
+              setPartyId(id);
+              setPartyName(party?.name ?? null);
             }}
             onWarehouseChange={(id, name) => { setWarehouseId(id); setWarehouseName(name ?? null); }}
             onDateChange={setTransactionDate}
@@ -574,15 +592,15 @@ export function ProductTransactionScreen({
           size="sm"
         >
           <div className="text-[14px] text-foreground-1 leading-relaxed">
-            {priceEvaluationModal.type === 'confirm' 
+            {priceEvaluationModal.type === 'confirm'
               ? "A few items have price changes based on the price list. Do you want to apply them?"
               : "Prices need to be changed based on the party selection."}
           </div>
           <ModalFooter>
             {priceEvaluationModal.type === 'confirm' && (
-              <Button 
-                variant="flat" 
-                color="secondary" 
+              <Button
+                variant="flat"
+                color="secondary"
                 onClick={() => {
                   setPartyId(priceEvaluationModal.pendingPartyId);
                   setPartyName(priceEvaluationModal.pendingParty?.name ?? null);
@@ -592,8 +610,8 @@ export function ProductTransactionScreen({
                 No
               </Button>
             )}
-            <Button 
-              color="primary" 
+            <Button
+              color="primary"
               onClick={() => {
                 applyEvaluatedPrices(priceEvaluationModal.evaluatedRules);
                 setPartyId(priceEvaluationModal.pendingPartyId);

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

@@ -72,8 +72,10 @@ export interface TransactionLineItem {
   uid: string;                // Client-side unique key for React
   item: TransactionItem;
   variant_id?: number | null;
+  variant?: TransactionItemVariant | null;
   batches?: TransactionLineBatch[];
   serial_numbers?: string[];
+  serial_number_objects?: {id: number, serial_number: string}[];
   quantity: number;
   is_free_qty?: boolean;
   parent_line_uids?: string[];
@@ -333,7 +335,7 @@ export interface TransactionPayload {
     expiry_date?: string;
     supplier_reference?: string;
     selling_price?: number;
-    serial_numbers?: string[];
+    serial_numbers?: string[] | number[];
     quantity: number;
     uid: string;
     is_free_qty?: boolean;

package/src/finance-components/PaymentForm.tsx

@@ -0,0 +1,142 @@
+"use client";
+
+import React, { useState } from "react";
+import { Button, Input, ModalFooter } from "../index";
+import { PaymentSection, PaymentEntry } from "../common-components/PaymentSection";
+import toast from "react-hot-toast";
+
+interface PaymentFormProps {
+  invoice: any;
+  onSuccess: () => void;
+  onCancel: () => void;
+  onRecordPayment: (payload: any) => Promise<{ is_success: boolean; message?: string }>;
+  fetchPaymentModes: () => Promise<any>;
+  fetchBankAccounts: () => Promise<any>;
+  fetchChequeLeaves?: (query: string, page?: number) => Promise<any>;
+}
+
+export function PaymentForm({
+  invoice,
+  onSuccess,
+  onCancel,
+  onRecordPayment,
+  fetchPaymentModes,
+  fetchBankAccounts,
+  fetchChequeLeaves,
+}: PaymentFormProps) {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const outstanding = Math.abs(Number(invoice.amount_due || 0) - Number(invoice.amount_settled || invoice.amount_received || 0));
+
+  const [paymentDate, setPaymentDate] = useState(new Date().toISOString().split("T")[0]);
+  const [reference, setReference] = useState("");
+  const [remarks, setRemarks] = useState("");
+  const [payments, setPayments] = useState<PaymentEntry[]>([]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (payments.length === 0) {
+      toast.error("Please add at least one payment");
+      return;
+    }
+
+    const totalToPay = payments.reduce((sum, p) => sum + (Number(p.amount) || 0), 0);
+    if (totalToPay > outstanding + 0.01) {
+      toast.error(`Payment amount exceeds outstanding balance (${outstanding.toFixed(2)})`);
+      return;
+    }
+
+    setIsSubmitting(true);
+    let successCount = 0;
+
+    try {
+      for (const p of payments) {
+        if (Number(p.amount) <= 0) continue;
+        const payload: any = {
+          invoice_id: invoice.id,
+          payment_date: paymentDate,
+          payment_amount: p.amount,
+          payment_method: p.mode_code,
+          payment_mode_id: p.mode_id,
+          remarks: remarks || null,
+          reference: reference || null,
+        };
+
+        if (p.metadata) {
+          if (p.metadata.reference) payload.reference = p.metadata.reference;
+          if (p.metadata.bank_account_id) payload.bank_account_id = p.metadata.bank_account_id;
+          payload.mode_metadata = p.metadata;
+        }
+
+        const res = await onRecordPayment(payload);
+        if (res.is_success) successCount++;
+        else toast.error(`Failed for ${p.mode_name}: ${res.message}`);
+      }
+
+      if (successCount > 0) {
+        toast.success("Payment recorded successfully");
+        onSuccess();
+      }
+    } catch (e: any) {
+      toast.error(e.message || "Error recording payment");
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <div className="flex flex-col gap-1.5">
+        <label className="text-[11px] font-bold text-gray-500 uppercase tracking-wider">Payment Date *</label>
+        <Input
+          type="date"
+          value={paymentDate}
+          onChange={(e) => setPaymentDate(e.target.value)}
+        />
+      </div>
+
+      <PaymentSection
+        totalAmount={outstanding}
+        payments={payments}
+        onPaymentsChange={setPayments}
+        fetchPaymentModes={async () => {
+          const res = await fetchPaymentModes();
+          if (res.is_success && Array.isArray(res.result)) {
+            res.result = res.result.filter((m: any) => {
+              const code = m.code?.toLowerCase();
+              return code !== "credit" && code !== "credit-metal";
+            });
+          }
+          return res;
+        }}
+        fetchBankAccounts={fetchBankAccounts}
+        fetchChequeLeaves={fetchChequeLeaves}
+      />
+
+      <div className="flex flex-col gap-4 mt-2">
+        <div className="flex flex-col gap-1.5">
+          <label className="text-[11px] font-bold text-gray-500 uppercase tracking-wider">Reference No</label>
+          <Input
+            value={reference}
+            onChange={(e) => setReference(e.target.value)}
+            placeholder="Leave blank to auto-generate"
+          />
+        </div>
+        <div className="flex flex-col gap-1.5">
+          <label className="text-[11px] font-bold text-gray-500 uppercase tracking-wider">Remarks</label>
+          <textarea
+            value={remarks}
+            onChange={(e) => setRemarks(e.target.value)}
+            rows={2}
+            placeholder="Optional notes..."
+            className="w-full bg-white border-[1.5px] border-gray-200 rounded-[10px] px-3.5 py-2.5 text-[13px] text-gray-800 outline-none transition-all hover:border-gray-300 focus:border-primary/50 resize-none"
+          />
+        </div>
+      </div>
+
+      <ModalFooter>
+        <Button type="button" variant="flat" color="default" onClick={onCancel}>Cancel</Button>
+        <Button type="submit" color="primary" isLoading={isSubmitting}>Record Payment</Button>
+      </ModalFooter>
+    </form>
+  );
+}

package/src/index.tsx

@@ -56,3 +56,4 @@ export * from './common-components/item-wizard/SkuConfigModal';
 
 // Transaction
 export * from './common-components/transaction';
+export * from './finance-components/PaymentForm';