@apptimate/ui 7.2.0 → 7.3.0

package/package.json

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

package/src/base-components/FormattedNumberInput.tsx

@@ -0,0 +1,118 @@
+"use client";
+
+import React, { useState, useEffect } from 'react';
+import { cn } from '@apptimate/core-lib';
+
+export interface FormattedNumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'type'> {
+    value?: number | string | "";
+    onChange?: (value: number | "") => void;
+    decimals?: number;
+}
+
+export const FormattedNumberInput = React.forwardRef<HTMLInputElement, FormattedNumberInputProps>(
+    ({ value, onChange, decimals = 2, className, ...props }, ref) => {
+        const [displayValue, setDisplayValue] = useState("");
+
+        const formatNumber = (val: number | string | undefined) => {
+            if (val === "" || val === null || val === undefined) return "";
+            const num = Number(val);
+            if (isNaN(num)) return "";
+            return num.toLocaleString('en-US', { maximumFractionDigits: decimals });
+        };
+
+        useEffect(() => {
+            if (value === "" || value === null || value === undefined) {
+                setDisplayValue("");
+                return;
+            }
+            
+            // Check if user is typing something that evaluates to the same number (like "20." or "20.0")
+            // If they are, don't overwrite displayValue to preserve their cursor/typing state
+            const currentRaw = displayValue.replace(/,/g, '');
+            if (Number(value) !== Number(currentRaw)) {
+                setDisplayValue(formatNumber(value));
+            }
+        }, [value, decimals, displayValue]);
+
+        const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+            let val = e.target.value;
+
+            // Handle empty
+            if (val === "") {
+                setDisplayValue("");
+                onChange?.("");
+                return;
+            }
+
+            // Remove non-numeric characters except period and minus sign
+            const isNegative = val.startsWith('-');
+            val = val.replace(/[^0-9.]/g, '');
+            
+            // Prevent multiple periods
+            const parts = val.split('.');
+            if (parts.length > 2) {
+                val = parts[0] + '.' + parts.slice(1).join('');
+            }
+
+            // Limit decimal places
+            if (parts.length > 1 && parts[1].length > decimals) {
+                val = parts[0] + '.' + parts[1].substring(0, decimals);
+            }
+
+            if (isNegative) val = '-' + val;
+
+            // Update display value with comma formatting for the integer part
+            let formatted = val;
+            const currentParts = val.split('.');
+            const integerPart = currentParts[0];
+            
+            if (integerPart && integerPart !== '-' && integerPart !== '-0') {
+                const numInt = parseInt(integerPart, 10);
+                if (!isNaN(numInt)) {
+                   const formattedInt = numInt.toLocaleString('en-US');
+                   formatted = (isNegative && numInt > 0) ? '-' + formattedInt : formattedInt;
+                   // Re-attach decimal part if it exists
+                   if (currentParts.length > 1) {
+                       formatted += '.' + currentParts[1];
+                   }
+                }
+            } else if (integerPart === '-0') {
+                formatted = '-0' + (currentParts.length > 1 ? '.' + currentParts[1] : '');
+            } else if (integerPart === '-') {
+                formatted = '-';
+            }
+
+            setDisplayValue(formatted);
+
+            if (val === "-" || val === "-0") {
+                onChange?.("");
+            } else {
+                const numericValue = parseFloat(val);
+                if (!isNaN(numericValue)) {
+                    onChange?.(numericValue);
+                } else if (val === ".") {
+                    onChange?.("");
+                }
+            }
+        };
+
+        const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+            setDisplayValue(formatNumber(value));
+            props.onBlur?.(e);
+        };
+
+        return (
+            <input
+                ref={ref}
+                type="text"
+                value={displayValue}
+                onChange={handleChange}
+                onBlur={handleBlur}
+                className={cn('outline-none', className)}
+                {...props}
+            />
+        );
+    }
+);
+
+FormattedNumberInput.displayName = 'FormattedNumberInput';

package/src/base-components/Select.tsx

@@ -6,7 +6,7 @@ import React from 'react';
 import { Label } from './Label';
 
 export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
-    label?: string;
+    label?: React.ReactNode | string;
     error?: string;
     isRequired?: boolean;
     options: { label: string; value: string | number }[];

package/src/common-components/DashboardLayout.tsx

@@ -70,6 +70,13 @@ export function DashboardLayout({
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   const [isOrgModalOpen, setIsOrgModalOpen] = useState(false);
   const [isSubSidebarOpen, setIsSubSidebarOpen] = useState(true);
+  const [isMenusLoading, setIsMenusLoading] = useState(true);
+
+  React.useEffect(() => {
+    if (menus && menus.length > 0) {
+      setIsMenusLoading(false);
+    }
+  }, [menus]);
   const pathname = usePathname() || "";
   const router = useRouter();
 
@@ -247,7 +254,14 @@ export function DashboardLayout({
           }
         `}} />
         <nav className="flex flex-col gap-6 flex-1 w-full sidebar-scroll pb-4">
-          {effectiveMenus.map((menu) => {
+          {isMenusLoading ? (
+            Array.from({ length: 6 }).map((_, i) => (
+              <div key={`skel-${i}`} className="flex flex-col items-center justify-center gap-2 w-full px-1">
+                <div className="w-[22px] h-[22px] bg-gray-200/80 rounded-md animate-pulse" />
+                <div className="w-12 h-2.5 bg-gray-200/80 rounded animate-pulse" />
+              </div>
+            ))
+          ) : effectiveMenus.map((menu) => {
             const isActive = activeMenuId === menu.id;
             return (
               <div
@@ -318,68 +332,91 @@ export function DashboardLayout({
       </aside>
 
       {/* Desktop Secondary Sidebar */}
-      {activeMenu && activeMenu.groups.length > 0 && (
+      {isMenusLoading || (activeMenu && activeMenu.groups.length > 0) ? (
         <>
           <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}>
-                  {group.label && (
-                    <h3 className="px-2 text-xs font-bold text-gray-400 uppercase tracking-wider mb-2 empty:hidden">{group.label}</h3>
-                  )}
-                  <nav className="flex flex-col gap-1">
-                    {group.items.map((item: any) => {
-                      // Find the longest matching path in this group to avoid parent paths being active
-                      const allGroupItems = activeMenu.groups.flatMap(g => g.items);
-                      const matchingItems = allGroupItems.filter(i => fullPath === i.path || fullPath.startsWith(`${i.path}/`));
-                      const longestMatch = matchingItems.sort((a, b) => b.path.length - a.path.length)[0];
-                      const isItemActive = longestMatch?.path === item.path;
-                      const isInternal = basePath
-                        ? item.path.startsWith(basePath)
-                        : !externalPaths.some(ext => item.path.startsWith(ext));
-                      const href = basePath && isInternal ? item.path.replace(basePath, "") || "/" : item.path;
-
-                      const className = `px-3 py-2 rounded-lg text-sm transition-colors flex items-center justify-between ${isItemActive
-                        ? "bg-[#F4F5F7] text-[#2D3142] font-semibold"
-                        : "text-gray-500 font-medium hover:bg-gray-50"
-                        }`;
-
-                      const content = (
-                        <>
-                          <div className="flex items-center gap-3">
-                            {item.icon && <span className={`${isItemActive ? 'text-[#2D3142]' : 'text-gray-400'}`}>{item.icon}</span>}
-                            <span>{item.label}</span>
-                          </div>
-                          {item.badge && <div>{item.badge}</div>}
-                        </>
-                      );
-
-                      return isInternal ? (
-                        <Link key={item.id} href={href} className={className}>
-                          {content}
-                        </Link>
-                      ) : (
-                        <a key={item.id} href={href} className={className}>
-                          {content}
-                        </a>
-                      );
-                    })}
-                  </nav>
+            {isMenusLoading ? (
+              <div className="flex-1 px-4 w-[210px]">
+                <div className="flex items-center px-2 mb-8 mt-1">
+                  <div className="w-24 h-6 bg-gray-200/80 rounded animate-pulse" />
                 </div>
-              ))}
-            </div>
+                <div className="space-y-8">
+                  {Array.from({ length: 3 }).map((_, i) => (
+                    <div key={`skel-group-${i}`} className="space-y-3">
+                      <div className="w-16 h-3 bg-gray-200/80 rounded animate-pulse mx-2 mb-4" />
+                      {Array.from({ length: 4 }).map((_, j) => (
+                        <div key={`skel-item-${j}`} className="flex items-center gap-3 px-2 py-2">
+                          <div className="w-4 h-4 bg-gray-200/80 rounded animate-pulse shrink-0" />
+                          <div className="w-full h-3 bg-gray-200/80 rounded animate-pulse" />
+                        </div>
+                      ))}
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ) : (
+              <>
+                <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}>
+                      {group.label && (
+                        <h3 className="px-2 text-xs font-bold text-gray-400 uppercase tracking-wider mb-2 empty:hidden">{group.label}</h3>
+                      )}
+                      <nav className="flex flex-col gap-1">
+                        {group.items.map((item: any) => {
+                          // Find the longest matching path in this group to avoid parent paths being active
+                          const allGroupItems = activeMenu!.groups.flatMap(g => g.items);
+                          const matchingItems = allGroupItems.filter(i => fullPath === i.path || fullPath.startsWith(`${i.path}/`));
+                          const longestMatch = matchingItems.sort((a, b) => b.path.length - a.path.length)[0];
+                          const isItemActive = longestMatch?.path === item.path;
+                          const isInternal = basePath
+                            ? item.path.startsWith(basePath)
+                            : !externalPaths.some(ext => item.path.startsWith(ext));
+                          const href = basePath && isInternal ? item.path.replace(basePath, "") || "/" : item.path;
+    
+                          const className = `px-3 py-2 rounded-lg text-sm transition-colors flex items-center justify-between ${isItemActive
+                            ? "bg-[#F4F5F7] text-[#2D3142] font-semibold"
+                            : "text-gray-500 font-medium hover:bg-gray-50"
+                            }`;
+    
+                          const content = (
+                            <>
+                              <div className="flex items-center gap-3">
+                                {item.icon && <span className={`${isItemActive ? 'text-[#2D3142]' : 'text-gray-400'}`}>{item.icon}</span>}
+                                <span>{item.label}</span>
+                              </div>
+                              {item.badge && <div>{item.badge}</div>}
+                            </>
+                          );
+    
+                          return isInternal ? (
+                            <Link key={item.id} href={href} className={className}>
+                              {content}
+                            </Link>
+                          ) : (
+                            <a key={item.id} href={href} className={className}>
+                              {content}
+                            </a>
+                          );
+                        })}
+                      </nav>
+                    </div>
+                  ))}
+                </div>
+              </>
+            )}
 
             {/* Organization Selector - Bottom of Secondary Sidebar */}
-            {organizations.length > 0 && (
+            {organizations.length > 0 && !isMenusLoading && (
               <div className="px-4 pt-4 mt-2 border-t border-gray-100">
                 <button
                   id="org-selector-desktop"
@@ -405,7 +442,7 @@ export function DashboardLayout({
           </aside>
 
         </>
-      )}
+      ) : null}
 
       {/* Main Content Area & Mobile Header */}
       <div className="flex-1 flex flex-col min-w-0 overflow-hidden print:overflow-visible">
@@ -481,7 +518,14 @@ export function DashboardLayout({
 
             <div className="flex-1 overflow-y-auto py-6 px-4">
               <nav className="flex flex-col gap-8">
-                {effectiveMenus.map((menu) => (
+                {isMenusLoading ? (
+                  Array.from({ length: 4 }).map((_, i) => (
+                    <div key={`skel-mob-${i}`} className="flex items-center gap-3 mb-3 px-2">
+                      <div className="w-5 h-5 bg-gray-200/80 rounded-md animate-pulse" />
+                      <div className="w-24 h-4 bg-gray-200/80 rounded animate-pulse" />
+                    </div>
+                  ))
+                ) : effectiveMenus.map((menu) => (
                   <div key={menu.id}>
                     <div className="flex items-center gap-3 text-[#2D3142] font-bold mb-3 px-2">
                       {React.cloneElement(menu.icon as React.ReactElement<any>, {

package/src/common-components/PaymentSection.tsx

@@ -183,11 +183,14 @@ export function PaymentSection({ totalAmount, payments, onPaymentsChange, compac
 
   // ── Auto-sync single mode amount when totalAmount changes ──
   useEffect(() => {
-    if (selectionMode === "single" && payments.length === 1) {
-      updatePayment(0, { amount: totalAmount });
+    if (selectionMode === "single" && paymentsRef.current.length === 1 && totalAmount > 0) {
+      const current = paymentsRef.current[0];
+      if (current.amount !== totalAmount) {
+        onPaymentsChange([{ ...current, amount: totalAmount }]);
+      }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [totalAmount, selectionMode]); // intentionally omitting `payments` to allow manual partial payments
+  }, [totalAmount, selectionMode, payments.length]); // payments.length triggers sync after initial cash auto-selection
 
   const activateSplitMode = useCallback(() => {
     setSelectionMode("split");
@@ -289,7 +292,7 @@ export function PaymentSection({ totalAmount, payments, onPaymentsChange, compac
       {/* ── Single Mode: Entry with fields (no delete) ── */}
       {selectionMode === "single" && payments.length === 1 && (
         <PaymentEntryRow entry={payments[0]} mode={paymentModes.find((m) => m.id === payments[0].mode_id)}
-          bankAccounts={bankAccounts} materialTypes={materialTypes} onUpdate={(updates) => updatePayment(0, updates)} onRemove={() => {}} showRemove={false} fetchChequeLeaves={fetchChequeLeaves} />
+          bankAccounts={bankAccounts} materialTypes={materialTypes} onUpdate={(updates) => updatePayment(0, updates)} onRemove={() => { }} showRemove={false} fetchChequeLeaves={fetchChequeLeaves} />
       )}
 
       {/* ── Split Mode: Multi-entry UI ── */}
@@ -422,137 +425,138 @@ function PaymentEntryRow({ entry, mode, bankAccounts, materialTypes = [], onUpda
             }
 
             return (
-            <div key={field.key} className="flex flex-col gap-1">
-              <label className="text-[11px] text-foreground-subtle font-bold uppercase tracking-wider flex items-center">
-                {field.label}
-                {field.required && <span className="text-danger-alt ml-0.5">*</span>}
-                {field.key === "cheque_number" && fetchChequeLeaves && !!entry.metadata[field.key] && (
-                  <span className="ml-1.5 flex items-center">
-                    {entry.metadata.cheque_leaf_id ? (
-                      <HintIcon 
-                        text="Selected from your cheque book. This will be automatically issued."
-                        icon={<CheckCircle size={13} className="text-green-500" />}
-                      />
-                    ) : (
-                      <HintIcon 
-                        text="Not selected from cheque book. This cheque will not be auto-issued."
-                        icon={<AlertTriangle size={13} className="text-amber-500" />}
-                      />
-                    )}
-                  </span>
-                )}
-              </label>
-              {field.type === "bank_account_select" ? (
-                <select value={entry.metadata[field.key] || ""}
-                  onChange={(e) => onUpdate({ metadata: { ...entry.metadata, [field.key]: e.target.value ? Number(e.target.value) : "" } })}
-                  disabled={field.readonly}
-                  required={field.required}
-                  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>
-                  {bankAccounts.map((b) => (<option key={b.id} value={b.id}>{b.bank_name} - {b.account_number}</option>))}
-                </select>
-              ) : field.type === "material_type_select" ? (
-                <select value={entry.metadata[field.key] || ""}
-                  onChange={(e) => onUpdate({ metadata: { ...entry.metadata, [field.key]: e.target.value ? Number(e.target.value) : "" } })}
-                  disabled={field.readonly}
-                  required={field.required}
-                  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 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}
-                  required={field.required}
-                  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}
-                  required={field.required}
-                  placeholder="Select..."
-                  loadOptions={async () => field.options || []}
-                />
-              ) : field.key === "cheque_number" && fetchChequeLeaves ? (
-                <>
+              <div key={field.key} className="flex flex-col gap-1">
+                <label className="text-[11px] text-foreground-subtle font-bold uppercase tracking-wider flex items-center">
+                  {field.label}
+                  {field.required && <span className="text-danger-alt ml-0.5">*</span>}
+                  {field.key === "cheque_number" && fetchChequeLeaves && !!entry.metadata[field.key] && (
+                    <span className="ml-1.5 flex items-center">
+                      {entry.metadata.cheque_leaf_id ? (
+                        <HintIcon
+                          text="Selected from your cheque book. This will be automatically issued."
+                          icon={<CheckCircle size={13} className="text-green-500" />}
+                        />
+                      ) : (
+                        <HintIcon
+                          text="Not selected from cheque book. This cheque will not be auto-issued."
+                          icon={<AlertTriangle size={13} className="text-amber-500" />}
+                        />
+                      )}
+                    </span>
+                  )}
+                </label>
+                {field.type === "bank_account_select" ? (
+                  <select value={entry.metadata[field.key] || ""}
+                    onChange={(e) => onUpdate({ metadata: { ...entry.metadata, [field.key]: e.target.value ? Number(e.target.value) : "" } })}
+                    disabled={field.readonly}
+                    required={field.required}
+                    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>
+                    {bankAccounts.map((b) => (<option key={b.id} value={b.id}>{b.bank_name} - {b.account_number}</option>))}
+                  </select>
+                ) : field.type === "material_type_select" ? (
+                  <select value={entry.metadata[field.key] || ""}
+                    onChange={(e) => onUpdate({ metadata: { ...entry.metadata, [field.key]: e.target.value ? Number(e.target.value) : "" } })}
+                    disabled={field.readonly}
+                    required={field.required}
+                    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 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}
+                    required={field.required}
+                    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
-                    defaultValue={entry.metadata[field.key] ? { cheque_number: entry.metadata[field.key] } : undefined}
-                    onChange={(val, selected: any) => {
-                      const leafObj = Array.isArray(selected) ? selected[0] : selected;
-                      const newMetadata = { ...entry.metadata, [field.key]: val, cheque_leaf_id: leafObj?.id || "" };
-                      if (leafObj?.cheque_book?.bank_account) {
-                        const ba = leafObj.cheque_book.bank_account;
-                        newMetadata.bank_account_id = ba.id;
-                        newMetadata._display_bank_name = ba.bank_name;
-                        newMetadata._display_branch = ba.branch;
-                      } else {
-                        delete newMetadata.bank_account_id;
-                        delete newMetadata._display_bank_name;
-                        delete newMetadata._display_branch;
-                      }
-                      onUpdate({ metadata: newMetadata });
-                    }}
-                    loadOptions={async (search, page) => {
-                      if (!fetchChequeLeaves) return [];
-                      const res = await fetchChequeLeaves(search, page);
-                      return res.is_success && res.result ? res.result : [];
-                    }}
-                    option={{
-                      label: "cheque_number",
-                      value: "cheque_number",
-                      renderOption: (item: any) => (
-                        <div className="flex flex-col">
-                          <span>{item.cheque_number}</span>
-                          {item.cheque_book?.bank_account?.bank_name && (
-                            <span className="text-[11px] text-foreground-subtle mt-0.5">
-                              {item.cheque_book.bank_account.bank_name} {item.cheque_book.bank_account.branch ? `— ${item.cheque_book.bank_account.branch}` : ""}
-                            </span>
-                          )}
-                        </div>
-                      )
+                    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 }
+                      });
                     }}
-                    placeholder="Search cheque number..."
                     disabled={field.readonly}
                     required={field.required}
+                    placeholder="Select..."
+                    loadOptions={async () => field.options || []}
                   />
-                  {entry.metadata._display_bank_name && (
-                    <div className="text-[11px] text-foreground-subtle mt-1 flex items-center gap-1.5 font-medium px-1">
-                      <Building size={12} className="text-foreground-disabled" />
-                      {entry.metadata._display_bank_name} {entry.metadata._display_branch ? `— ${entry.metadata._display_branch}` : ""}
-                    </div>
-                  )}
-                </>
-              ) : (
-                <input type={field.type === "number" ? "number" : field.type === "date" ? "date" : "text"}
-                  {...(field.type === "number" ? { step: "any" } : {})}
-                  value={entry.metadata[field.key] || ""}
-                  onChange={(e) => onUpdate({ metadata: { ...entry.metadata, [field.key]: e.target.value } })}
-                  readOnly={field.readonly}
-                  required={field.required}
-                  className={cn("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 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none", field.readonly && "opacity-60 bg-surface-0 cursor-not-allowed border-border")} />
-              )}
-            </div>
-          )})}
+                ) : field.key === "cheque_number" && fetchChequeLeaves ? (
+                  <>
+                    <AsyncSearchableSelect
+                      defaultValue={entry.metadata[field.key] ? { cheque_number: entry.metadata[field.key] } : undefined}
+                      onChange={(val, selected: any) => {
+                        const leafObj = Array.isArray(selected) ? selected[0] : selected;
+                        const newMetadata = { ...entry.metadata, [field.key]: val, cheque_leaf_id: leafObj?.id || "" };
+                        if (leafObj?.cheque_book?.bank_account) {
+                          const ba = leafObj.cheque_book.bank_account;
+                          newMetadata.bank_account_id = ba.id;
+                          newMetadata._display_bank_name = ba.bank_name;
+                          newMetadata._display_branch = ba.branch;
+                        } else {
+                          delete newMetadata.bank_account_id;
+                          delete newMetadata._display_bank_name;
+                          delete newMetadata._display_branch;
+                        }
+                        onUpdate({ metadata: newMetadata });
+                      }}
+                      loadOptions={async (search, page) => {
+                        if (!fetchChequeLeaves) return [];
+                        const res = await fetchChequeLeaves(search, page);
+                        return res.is_success && res.result ? res.result : [];
+                      }}
+                      option={{
+                        label: "cheque_number",
+                        value: "cheque_number",
+                        renderOption: (item: any) => (
+                          <div className="flex flex-col">
+                            <span>{item.cheque_number}</span>
+                            {item.cheque_book?.bank_account?.bank_name && (
+                              <span className="text-[11px] text-foreground-subtle mt-0.5">
+                                {item.cheque_book.bank_account.bank_name} {item.cheque_book.bank_account.branch ? `— ${item.cheque_book.bank_account.branch}` : ""}
+                              </span>
+                            )}
+                          </div>
+                        )
+                      }}
+                      placeholder="Search cheque number..."
+                      disabled={field.readonly}
+                      required={field.required}
+                    />
+                    {entry.metadata._display_bank_name && (
+                      <div className="text-[11px] text-foreground-subtle mt-1 flex items-center gap-1.5 font-medium px-1">
+                        <Building size={12} className="text-foreground-disabled" />
+                        {entry.metadata._display_bank_name} {entry.metadata._display_branch ? `— ${entry.metadata._display_branch}` : ""}
+                      </div>
+                    )}
+                  </>
+                ) : (
+                  <input type={field.type === "number" ? "number" : field.type === "date" ? "date" : "text"}
+                    {...(field.type === "number" ? { step: "any" } : {})}
+                    value={entry.metadata[field.key] || ""}
+                    onChange={(e) => onUpdate({ metadata: { ...entry.metadata, [field.key]: e.target.value } })}
+                    readOnly={field.readonly}
+                    required={field.required}
+                    className={cn("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 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none", field.readonly && "opacity-60 bg-surface-0 cursor-not-allowed border-border")} />
+                )}
+              </div>
+            )
+          })}
         </div>
       )}
     </div>