@apptimate/ui 1.8.0 → 2.0.0

package/package.json

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

package/src/base-components/DateLabel.tsx

@@ -8,12 +8,39 @@ export interface DateLabelProps {
 export function DateLabel({ date, className = '' }: DateLabelProps) {
   if (!date) return <span className="text-gray-300">-</span>;
 
-  const d = new Date(date);
-  
-  // Format to "2026-05-07 4:35PM"
+  let isDateOnly = false;
+  let parsedDate: string | Date = date;
+
+  if (typeof date === 'string') {
+    if (/^\d{4}-\d{2}-\d{2}$/.test(date)) {
+      isDateOnly = true;
+    } else if (/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/.test(date)) {
+      parsedDate = date.replace(' ', 'T') + 'Z';
+    }
+  }
+
+  let d: Date;
+  if (isDateOnly && typeof date === 'string') {
+    const [y, m, day] = date.split('-');
+    d = new Date(parseInt(y, 10), parseInt(m, 10) - 1, parseInt(day, 10));
+  } else {
+    d = new Date(parsedDate);
+  }
+
+  if (isNaN(d.getTime())) return <span className="text-gray-300">-</span>;
+
   const year = d.getFullYear();
   const month = String(d.getMonth() + 1).padStart(2, '0');
   const day = String(d.getDate()).padStart(2, '0');
+  
+  if (isDateOnly) {
+    return (
+      <div className={`flex flex-col ${className}`}>
+        <span className="text-gray-600 font-medium whitespace-nowrap">{year}-{month}-{day}</span>
+      </div>
+    );
+  }
+
   let hours = d.getHours();
   const minutes = String(d.getMinutes()).padStart(2, '0');
   const ampm = hours >= 12 ? 'PM' : 'AM';

package/src/base-components/DesktopSearchPopover.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Search } from 'lucide-react';
+import { Search, X } from 'lucide-react';
 import { Dropdown } from './Dropdown';
 import { Input } from './Input';
 import { Button } from './Button';
@@ -26,16 +26,33 @@ export const DesktopSearchPopover = ({
                 align="right"
                 contentClassName="w-[300px] p-2"
                 trigger={
-                    <Button
-                        variant="soft"
-                        color="default"
-                        className={cn("!p-0 text-gray-500", triggerClassName)}
-                        icon={<Search size={18} strokeWidth={2} />}
-                        ariaLabel="Search"
-                    />
+                    searchValue ? (
+                        <div className="flex items-center gap-1.5 bg-primary-50 hover:bg-primary-100 transition-colors pl-3 pr-1.5 py-1.5 rounded-full cursor-pointer border border-primary-100">
+                            <Search size={14} className="text-primary-500" />
+                            <span className="text-xs font-bold text-primary-700 max-w-[120px] truncate">{searchValue}</span>
+                            <div 
+                                className="p-1 hover:bg-primary-200 rounded-full text-primary-600 transition-colors"
+                                onClick={(e) => {
+                                    e.stopPropagation();
+                                    onSearchChange("");
+                                }}
+                                title="Clear search"
+                            >
+                                <X size={14} />
+                            </div>
+                        </div>
+                    ) : (
+                        <Button
+                            variant="soft"
+                            color="default"
+                            className={cn("!p-0 text-gray-500", triggerClassName)}
+                            icon={<Search size={18} strokeWidth={2} />}
+                            ariaLabel="Search"
+                        />
+                    )
                 }
             >
-                <div className="p-1">
+                <div className="p-1" onClick={(e) => e.stopPropagation()}>
                     <Input
                         autoFocus
                         placeholder={placeholder}

package/src/common-components/DashboardLayout.tsx

@@ -65,16 +65,31 @@ export function DashboardLayout({
   const [isOrgModalOpen, setIsOrgModalOpen] = useState(false);
   const pathname = usePathname() || "";
 
-  // Find which main menu should be active based on current path, or default to first
+  // Find which main menu should be active based on current path.
+  // When basePath is set, prefer the menu whose items are mostly within basePath.
   const fullPath = basePath + (pathname === "/" && basePath ? "" : pathname);
-
-  const currentMainMenu = menus.find(menu =>
-    menu.groups.some(group => group.items.some(item => 
-      fullPath === item.path || 
-      fullPath.startsWith(item.path + "/") || 
-      item.path.startsWith(fullPath + "/")
-    ))
-  ) || menus[0];
+  const currentMainMenu = (() => {
+    let bestMenu = menus[0];
+    let bestScore = -1;
+    let bestInternalCount = -1;
+    for (const menu of menus) {
+      for (const group of menu.groups) {
+        for (const item of group.items) {
+          if (fullPath === item.path || fullPath.startsWith(item.path + "/")) {
+            const internalCount = basePath
+              ? menu.groups.reduce((sum, g) => sum + g.items.filter(i => i.path.startsWith(basePath)).length, 0)
+              : 0;
+            if (item.path.length > bestScore || (item.path.length === bestScore && internalCount > bestInternalCount)) {
+              bestScore = item.path.length;
+              bestInternalCount = internalCount;
+              bestMenu = menu;
+            }
+          }
+        }
+      }
+    }
+    return bestMenu;
+  })();
 
   const [activeMenuId, setActiveMenuId] = useState(currentMainMenu?.id || "");
 
@@ -120,7 +135,7 @@ export function DashboardLayout({
                   size: 22,
                   className: isActive ? "stroke-[2.5]" : "stroke-[2]"
                 })}
-                <span className={`text-[11px] ${isActive ? "font-bold" : "font-medium"}`}>{menu.label}</span>
+                <span className={`text-[11px] text-center leading-tight px-1 ${isActive ? "font-bold" : "font-medium"}`}>{menu.label}</span>
               </div>
             );
           })}
@@ -158,7 +173,7 @@ export function DashboardLayout({
 
       {/* Desktop Secondary Sidebar */}
       {activeMenu && activeMenu.groups.length > 0 && (
-        <aside className="hidden md:flex w-[240px] bg-white border-gray-200 flex-col py-8 shrink-0 z-10">
+        <aside className="hidden md:flex 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>
           <div className="flex-1 overflow-y-auto px-4 space-y-6">
             {activeMenu.groups.map((group) => (

package/src/common-components/PaymentSection.tsx

@@ -1,335 +1,371 @@
-"use client";
-
-import React, { useState, useEffect, useCallback, useMemo } from "react";
-import { cn } from "@apptimate/core-lib";
-import { CreditCard, Banknote, Building, Trash2, Loader2, Split, Check, AlertCircle } from "lucide-react";
-
-/* ── Types (mirroring sales POS types) ── */
-
-export interface PaymentModeField {
-  key: string;
-  label: string;
-  type: "text" | "number" | "date" | "bank_account_select";
-  required: boolean;
-}
-
-export interface PaymentMode {
-  id: number;
-  code: string;
-  name: string;
-  is_active: boolean;
-  requires_reference: boolean;
-  field_config: { fields: PaymentModeField[] };
-  sort_order: number;
-}
-
-export interface PaymentEntry {
-  mode_id: number;
-  mode_code: string;
-  mode_name: string;
-  amount: number;
-  metadata: Record<string, string | number>;
-}
-
-export interface BankAccount {
-  id: number;
-  account_name: string;
-  bank_name: string;
-  branch?: string;
-  account_number: string;
-  account_type: string;
-  currency: string;
-}
-
-/* ── Props ── */
-
-export interface PaymentSectionProps {
-  /** The total amount to collect */
-  totalAmount: number;
-  /** Current payment entries */
-  payments: PaymentEntry[];
-  /** Callback when payments change */
-  onPaymentsChange: (payments: PaymentEntry[]) => void;
-  /** Optional: show compact variant */
-  compact?: boolean;
-  /** Fetcher for payment modes */
-  fetchPaymentModes: () => Promise<{ is_success: boolean; result?: any }>;
-  /** Fetcher for bank accounts */
-  fetchBankAccounts: () => Promise<{ is_success: boolean; result?: any }>;
-}
-
-/* ── Component ── */
-
-export function PaymentSection({ totalAmount, payments, onPaymentsChange, compact, fetchPaymentModes, fetchBankAccounts }: PaymentSectionProps) {
-  const [paymentModes, setPaymentModes] = useState<PaymentMode[]>([]);
-  const [bankAccounts, setBankAccounts] = useState<BankAccount[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
-  const [selectionMode, setSelectionMode] = useState<"single" | "split">("single");
-
-  // ── Load payment modes on mount ──
-  useEffect(() => {
-    const load = async () => {
-      setIsLoading(true);
-      try {
-        const [modesRes, bankRes] = await Promise.all([fetchPaymentModes(), fetchBankAccounts()]);
-        const modes: PaymentMode[] = modesRes.is_success ? (modesRes.result || []) : [];
-        setPaymentModes(modes);
-        if (bankRes.is_success) setBankAccounts(bankRes.result || []);
-
-        // Auto-select cash if no payments yet
-        if (payments.length === 0 && modes.length > 0) {
-          const cashMode = modes.find((m) => m.code === "cash" && m.is_active);
-          if (cashMode) {
-            onPaymentsChange([{
-              mode_id: cashMode.id, mode_code: cashMode.code, mode_name: cashMode.name,
-              amount: totalAmount, metadata: {},
-            }]);
-          }
-        }
-      } finally { setIsLoading(false); }
-    };
-    load();
-  }, []);
-
-  // ── Calculations ──
-  const totalPaid = useMemo(() => payments.reduce((s, p) => s + p.amount, 0), [payments]);
-  const balance = useMemo(() => totalAmount - totalPaid, [totalAmount, totalPaid]);
-  const formatCurrency = (v: number) => v.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
-
-  // ── Mode icon ──
-  const getModeIcon = useCallback((code: string, size = 14) => {
-    switch (code) {
-      case "cash": return <Banknote size={size} />;
-      case "card": return <CreditCard size={size} />;
-      case "bank_transfer": return <Building size={size} />;
-      default: return <CreditCard size={size} />;
-    }
-  }, []);
-
-  // ── Payment management ──
-  const selectSingleMode = useCallback((mode: PaymentMode) => {
-    setSelectionMode("single");
-    onPaymentsChange([{
-      mode_id: mode.id, mode_code: mode.code, mode_name: mode.name,
-      amount: totalAmount, metadata: {},
-    }]);
-  }, [totalAmount, onPaymentsChange]);
-
-  const updatePayment = useCallback((index: number, updates: Partial<PaymentEntry>) => {
-    const next = [...payments];
-    next[index] = { ...next[index], ...updates };
-    onPaymentsChange(next);
-  }, [payments, onPaymentsChange]);
-
-  // ── Auto-sync single mode amount ──
-  useEffect(() => {
-    if (selectionMode === "single" && payments.length === 1 && payments[0].amount !== totalAmount) {
-      updatePayment(0, { amount: totalAmount });
-    }
-  }, [totalAmount, selectionMode, payments, updatePayment]);
-
-  const activateSplitMode = useCallback(() => {
-    setSelectionMode("split");
-    if (payments.length <= 1) onPaymentsChange([]);
-  }, [payments.length, onPaymentsChange]);
-
-  const addPayment = useCallback((mode: PaymentMode) => {
-    const entry: PaymentEntry = {
-      mode_id: mode.id, mode_code: mode.code, mode_name: mode.name,
-      amount: Math.max(0, balance), metadata: {},
-    };
-    onPaymentsChange([...payments, entry]);
-  }, [payments, balance, onPaymentsChange]);
-
-  const removePayment = useCallback((index: number) => {
-    onPaymentsChange(payments.filter((_, i) => i !== index));
-  }, [payments, onPaymentsChange]);
-
-  if (isLoading) {
-    return (
-      <div className="flex items-center justify-center py-4">
-        <Loader2 size={18} className="animate-spin text-primary" />
-      </div>
-    );
-  }
-
-  return (
-    <div className="space-y-3">
-      {/* ── Mode Selection Buttons ── */}
-      <div className="flex flex-wrap gap-2">
-        {paymentModes
-          .filter((m) => m.is_active)
-          .map((mode) => {
-            const isActive = selectionMode === "single" && payments.length === 1 && payments[0].mode_id === mode.id;
-            return (
-              <button key={mode.id} onClick={() => selectSingleMode(mode)}
-                className={cn(
-                  "inline-flex items-center gap-2 px-4 py-2.5 text-[12px] font-semibold rounded-[10px] border transition-all",
-                  isActive
-                    ? "bg-primary text-primary-foreground border-primary shadow-sm"
-                    : "bg-surface-0 border-border-subtle text-foreground-1 hover:border-primary/40 hover:bg-primary/5 hover:text-primary"
-                )}>
-                {getModeIcon(mode.code)}
-                {mode.name}
-              </button>
-            );
-          })}
-        {/* Split Button */}
-        <button onClick={activateSplitMode}
-          className={cn(
-            "inline-flex items-center gap-2 px-4 py-2.5 text-[12px] font-semibold rounded-[10px] border transition-all",
-            selectionMode === "split"
-              ? "bg-primary text-primary-foreground border-primary shadow-sm"
-              : "bg-surface-0 border-border-subtle text-foreground-1 hover:border-primary/40 hover:bg-primary/5 hover:text-primary"
-          )}>
-          <Split size={14} />
-          Multiple Methods
-        </button>
-      </div>
-
-      {/* ── 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} onUpdate={(updates) => updatePayment(0, updates)} onRemove={() => {}} showRemove={false} />
-      )}
-
-      {/* ── Split Mode: Multi-entry UI ── */}
-      {selectionMode === "split" && (
-        <div className="space-y-2.5">
-          {payments.map((entry, idx) => {
-            const mode = paymentModes.find((m) => m.id === entry.mode_id);
-            return (
-              <PaymentEntryRow key={idx} entry={entry} mode={mode} bankAccounts={bankAccounts}
-                onUpdate={(updates) => updatePayment(idx, updates)} onRemove={() => removePayment(idx)} />
-            );
-          })}
-          {/* Add split mode buttons */}
-          <div className="flex flex-wrap gap-1.5 pt-1">
-            {paymentModes
-              .filter((m) => m.is_active && !payments.some(p => p.mode_id === m.id))
-              .map((mode) => (
-                <button key={mode.id} onClick={() => addPayment(mode)}
-                  className="inline-flex items-center gap-1.5 px-3 py-1.5 text-[11px] font-semibold rounded-[8px] bg-surface-0 border border-border-subtle text-foreground-subtle hover:border-primary/40 hover:text-primary transition-all">
-                  {getModeIcon(mode.code, 12)}
-                  + {mode.name}
-                </button>
-              ))}
-          </div>
-        </div>
-      )}
-
-      {/* ── 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 />
-          <div className="border-t border-border-subtle my-2" />
-          <TotalRow label="Total Paid" value={formatCurrency(totalPaid)} />
-          <TotalRow
-            label={balance > 0.01 ? "Balance Due" : balance < -0.01 ? "Change Due" : "Settled"}
-            value={formatCurrency(Math.abs(balance))}
-            className={balance > 0.01 ? "text-danger-alt" : "text-green-600"}
-            bold
-          />
-          {balance < -0.01 && (
-            <div className="flex items-center gap-1.5 mt-1 text-[11px] text-amber-600 font-medium">
-              <AlertCircle size={12} /><span>Change: {formatCurrency(Math.abs(balance))}</span>
-            </div>
-          )}
-          {Math.abs(balance) < 0.01 && (
-            <div className="flex items-center gap-1.5 mt-1 text-[11px] text-green-600 font-medium">
-              <Check size={12} /><span>Fully paid</span>
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  );
-}
-
-/* ── TotalRow ── */
-
-function TotalRow({ label, value, bold, className }: { label: string; value: string; bold?: boolean; className?: string }) {
-  return (
-    <div className="flex items-center justify-between">
-      <span className={cn("text-[12px]", bold ? "font-bold text-foreground-1" : "text-foreground-subtle")}>{label}</span>
-      <span className={cn("text-[12px]", bold ? "font-bold text-foreground-0 text-[14px]" : "text-foreground-1 font-medium", className)}>{value}</span>
-    </div>
-  );
-}
-
-/* ── PaymentEntryRow (mirrors sales POS exactly) ── */
-
-interface PaymentEntryRowProps {
-  entry: PaymentEntry;
-  mode?: PaymentMode;
-  bankAccounts: BankAccount[];
-  onUpdate: (updates: Partial<PaymentEntry>) => void;
-  onRemove: () => void;
-  showRemove?: boolean;
-}
-
-function PaymentEntryRow({ entry, mode, bankAccounts, onUpdate, onRemove, showRemove = true }: PaymentEntryRowProps) {
-  const fields = mode?.field_config?.fields || [];
-
-  const getModeIcon = () => {
-    switch (entry.mode_code) {
-      case "cash": return <Banknote size={13} />;
-      case "card": return <CreditCard size={13} />;
-      case "bank_transfer": return <Building size={13} />;
-      default: return <CreditCard size={13} />;
-    }
-  };
-
-  return (
-    <div className="bg-surface-0 border-[1.5px] border-border-subtle rounded-[10px] p-4 space-y-3">
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-1.5 text-[12px] font-bold text-foreground-1">
-          {getModeIcon()}
-          {entry.mode_name}
-        </div>
-        {showRemove && (
-          <button onClick={onRemove}
-            className="w-7 h-7 rounded-[6px] flex items-center justify-center text-foreground-disabled hover:text-danger-alt hover:bg-danger-alt/10 transition-all">
-            <Trash2 size={13} />
-          </button>
-        )}
-      </div>
-
-      {/* Amount */}
-      <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} />
-      </div>
-
-      {/* Dynamic sub-fields from field_config */}
-      {fields.length > 0 && (
-        <div className="grid grid-cols-2 gap-2.5">
-          {fields.map((field: PaymentModeField) => (
-            <div key={field.key} className="flex flex-col gap-1">
-              <label className="text-[11px] text-foreground-subtle font-bold uppercase tracking-wider">
-                {field.label}
-                {field.required && <span className="text-danger-alt ml-0.5">*</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) : "" } })}
-                  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">
-                  <option value="">Select...</option>
-                  {bankAccounts.map((b) => (<option key={b.id} value={b.id}>{b.bank_name} - {b.account_number}</option>))}
-                </select>
-              ) : (
-                <input type={field.type === "number" ? "number" : field.type === "date" ? "date" : "text"}
-                  value={entry.metadata[field.key] || ""}
-                  onChange={(e) => onUpdate({ metadata: { ...entry.metadata, [field.key]: e.target.value } })}
-                  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 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none" />
-              )}
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { cn } from "@apptimate/core-lib";
+import { CreditCard, Banknote, Building, Trash2, Loader2, Split, Check, AlertCircle } from "lucide-react";
+
+/* ── Types (mirroring sales POS types) ── */
+
+export interface PaymentModeField {
+  key: string;
+  label: string;
+  type: "text" | "number" | "date" | "bank_account_select";
+  required: boolean;
+}
+
+export interface PaymentMode {
+  id: number;
+  code: string;
+  name: string;
+  is_active: boolean;
+  requires_reference: boolean;
+  field_config: { fields: PaymentModeField[] };
+  sort_order: number;
+}
+
+export interface PaymentEntry {
+  mode_id: number;
+  mode_code: string;
+  mode_name: string;
+  amount: number;
+  metadata: Record<string, string | number>;
+}
+
+export interface BankAccount {
+  id: number;
+  account_name: string;
+  bank_name: string;
+  branch?: string;
+  account_number: string;
+  account_type: string;
+  currency: string;
+}
+
+/* ── Props ── */
+
+export interface PaymentSectionProps {
+  /** The total amount to collect */
+  totalAmount: number;
+  /** Current payment entries */
+  payments: PaymentEntry[];
+  /** Callback when payments change */
+  onPaymentsChange: (payments: PaymentEntry[]) => void;
+  /** Optional: show compact variant */
+  compact?: boolean;
+  /** Fetcher for payment modes */
+  fetchPaymentModes: () => Promise<{ is_success: boolean; result?: any }>;
+  /** Fetcher for bank accounts */
+  fetchBankAccounts: () => Promise<{ is_success: boolean; result?: any }>;
+}
+
+/* ── Component ── */
+
+export function PaymentSection({ totalAmount, payments, onPaymentsChange, compact, fetchPaymentModes, fetchBankAccounts }: PaymentSectionProps) {
+  const [paymentModes, setPaymentModes] = useState<PaymentMode[]>([]);
+  const [bankAccounts, setBankAccounts] = useState<BankAccount[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [selectionMode, setSelectionMode] = useState<"single" | "split">("single");
+
+  // ── Load payment modes on mount ──
+  useEffect(() => {
+    const load = async () => {
+      setIsLoading(true);
+      try {
+        const [modesRes, bankRes] = await Promise.all([fetchPaymentModes(), fetchBankAccounts()]);
+        const modes: PaymentMode[] = modesRes.is_success ? (modesRes.result || []) : [];
+        setPaymentModes(modes);
+        if (bankRes.is_success) setBankAccounts(bankRes.result || []);
+
+        // Auto-select cash if no payments yet
+        if (payments.length === 0 && modes.length > 0) {
+          const cashMode = modes.find((m) => m.code === "cash" && m.is_active);
+          if (cashMode) {
+            onPaymentsChange([{
+              mode_id: cashMode.id, mode_code: cashMode.code, mode_name: cashMode.name,
+              amount: totalAmount, metadata: {},
+            }]);
+          }
+        }
+      } finally { setIsLoading(false); }
+    };
+    load();
+  }, []);
+
+  // ── Calculations ──
+  const isCreditPayment = useCallback((payment: PaymentEntry) => payment.mode_code === "credit", []);
+  const totalPaid = useMemo(() => payments.reduce((s, p) => s + (isCreditPayment(p) ? 0 : p.amount), 0), [payments, isCreditPayment]);
+  const creditAmount = useMemo(() => payments.reduce((s, p) => s + (isCreditPayment(p) ? p.amount : 0), 0), [payments, isCreditPayment]);
+  const balance = useMemo(() => totalAmount - totalPaid, [totalAmount, totalPaid]);
+  const formatCurrency = (v: number) => v.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+
+  // ── Mode icon ──
+  const getModeIcon = useCallback((code: string, size = 14) => {
+    switch (code) {
+      case "cash": return <Banknote size={size} />;
+      case "card": return <CreditCard size={size} />;
+      case "bank_transfer": return <Building size={size} />;
+      default: return <CreditCard size={size} />;
+    }
+  }, []);
+
+  // ── Payment management ──
+  const selectSingleMode = useCallback((mode: PaymentMode) => {
+    setSelectionMode("single");
+    onPaymentsChange([{
+      mode_id: mode.id, mode_code: mode.code, mode_name: mode.name,
+      amount: totalAmount, metadata: {},
+    }]);
+  }, [totalAmount, onPaymentsChange]);
+
+  const updatePayment = useCallback((index: number, updates: Partial<PaymentEntry>) => {
+    const next = [...payments];
+    next[index] = { ...next[index], ...updates };
+
+    if (
+      selectionMode === "split" &&
+      Object.prototype.hasOwnProperty.call(updates, "amount") &&
+      !isCreditPayment(next[index]) &&
+      next.length > 1
+    ) {
+      const targetIndex = next.findIndex((payment, paymentIndex) =>
+        paymentIndex !== index &&
+        !isCreditPayment(payment) &&
+        Number(payment.amount || 0) <= 0
+      );
+
+      if (targetIndex >= 0) {
+        const paidExceptTarget = next.reduce((sum, payment, paymentIndex) => {
+          if (paymentIndex === targetIndex || isCreditPayment(payment)) return sum;
+          return sum + Number(payment.amount || 0);
+        }, 0);
+
+        next[targetIndex] = {
+          ...next[targetIndex],
+          amount: Math.max(0, Math.round((totalAmount - paidExceptTarget) * 100) / 100),
+        };
+      }
+    }
+
+    onPaymentsChange(next);
+  }, [payments, selectionMode, totalAmount, isCreditPayment, onPaymentsChange]);
+
+  // ── Auto-sync single mode amount when totalAmount changes ──
+  useEffect(() => {
+    if (selectionMode === "single" && payments.length === 1) {
+      updatePayment(0, { amount: totalAmount });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [totalAmount, selectionMode]); // intentionally omitting `payments` to allow manual partial payments
+
+  const activateSplitMode = useCallback(() => {
+    setSelectionMode("split");
+    if (payments.length <= 1) onPaymentsChange([]);
+  }, [payments.length, onPaymentsChange]);
+
+  const addPayment = useCallback((mode: PaymentMode) => {
+    const entry: PaymentEntry = {
+      mode_id: mode.id, mode_code: mode.code, mode_name: mode.name,
+      amount: Math.max(0, balance), metadata: {},
+    };
+    onPaymentsChange([...payments, entry]);
+  }, [payments, balance, onPaymentsChange]);
+
+  const removePayment = useCallback((index: number) => {
+    onPaymentsChange(payments.filter((_, i) => i !== index));
+  }, [payments, onPaymentsChange]);
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-4">
+        <Loader2 size={18} className="animate-spin text-primary" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-3">
+      {/* ── Mode Selection Buttons ── */}
+      <div className="flex flex-wrap gap-2">
+        {paymentModes
+          .filter((m) => m.is_active)
+          .map((mode) => {
+            const isActive = selectionMode === "single" && payments.length === 1 && payments[0].mode_id === mode.id;
+            return (
+              <button key={mode.id} onClick={() => selectSingleMode(mode)}
+                className={cn(
+                  "inline-flex items-center gap-2 px-4 py-2.5 text-[12px] font-semibold rounded-[10px] border transition-all",
+                  isActive
+                    ? "bg-primary text-primary-foreground border-primary shadow-sm"
+                    : "bg-surface-0 border-border-subtle text-foreground-1 hover:border-primary/40 hover:bg-primary/5 hover:text-primary"
+                )}>
+                {getModeIcon(mode.code)}
+                {mode.name}
+              </button>
+            );
+          })}
+        {/* Split Button */}
+        <button onClick={activateSplitMode}
+          className={cn(
+            "inline-flex items-center gap-2 px-4 py-2.5 text-[12px] font-semibold rounded-[10px] border transition-all",
+            selectionMode === "split"
+              ? "bg-primary text-primary-foreground border-primary shadow-sm"
+              : "bg-surface-0 border-border-subtle text-foreground-1 hover:border-primary/40 hover:bg-primary/5 hover:text-primary"
+          )}>
+          <Split size={14} />
+          Multiple Methods
+        </button>
+      </div>
+
+      {/* ── 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} onUpdate={(updates) => updatePayment(0, updates)} onRemove={() => {}} showRemove={false} />
+      )}
+
+      {/* ── Split Mode: Multi-entry UI ── */}
+      {selectionMode === "split" && (
+        <div className="space-y-2.5">
+          {payments.map((entry, idx) => {
+            const mode = paymentModes.find((m) => m.id === entry.mode_id);
+            return (
+              <PaymentEntryRow key={idx} entry={entry} mode={mode} bankAccounts={bankAccounts}
+                onUpdate={(updates) => updatePayment(idx, updates)} onRemove={() => removePayment(idx)} />
+            );
+          })}
+          {/* Add split mode buttons */}
+          <div className="flex flex-wrap gap-1.5 pt-1">
+            {paymentModes
+              .filter((m) => {
+                if (!m.is_active) return false;
+                const canBeMultiple = ["card", "bank_transfer", "cheque"].includes(m.code);
+                return canBeMultiple || !payments.some(p => p.mode_id === m.id);
+              })
+              .map((mode) => (
+                <button key={mode.id} onClick={() => addPayment(mode)}
+                  className="inline-flex items-center gap-1.5 px-3 py-1.5 text-[11px] font-semibold rounded-[8px] bg-surface-0 border border-border-subtle text-foreground-subtle hover:border-primary/40 hover:text-primary transition-all">
+                  {getModeIcon(mode.code, 12)}
+                  + {mode.name}
+                </button>
+              ))}
+          </div>
+        </div>
+      )}
+
+      {/* ── 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 />
+          <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"}
+            value={formatCurrency(Math.abs(balance))}
+            className={balance > 0.01 ? "text-danger-alt" : "text-green-600"}
+            bold
+          />
+          {balance < -0.01 && (
+            <div className="flex items-center gap-1.5 mt-1 text-[11px] text-amber-600 font-medium">
+              <AlertCircle size={12} /><span>Change: {formatCurrency(Math.abs(balance))}</span>
+            </div>
+          )}
+          {Math.abs(balance) < 0.01 && 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>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/* ── TotalRow ── */
+
+function TotalRow({ label, value, bold, className }: { label: string; value: string; bold?: boolean; className?: string }) {
+  return (
+    <div className="flex items-center justify-between">
+      <span className={cn("text-[12px]", bold ? "font-bold text-foreground-1" : "text-foreground-subtle")}>{label}</span>
+      <span className={cn("text-[12px]", bold ? "font-bold text-foreground-0 text-[14px]" : "text-foreground-1 font-medium", className)}>{value}</span>
+    </div>
+  );
+}
+
+/* ── PaymentEntryRow (mirrors sales POS exactly) ── */
+
+interface PaymentEntryRowProps {
+  entry: PaymentEntry;
+  mode?: PaymentMode;
+  bankAccounts: BankAccount[];
+  onUpdate: (updates: Partial<PaymentEntry>) => void;
+  onRemove: () => void;
+  showRemove?: boolean;
+}
+
+function PaymentEntryRow({ entry, mode, bankAccounts, onUpdate, onRemove, showRemove = true }: PaymentEntryRowProps) {
+  const fields = mode?.field_config?.fields || [];
+
+  const getModeIcon = () => {
+    switch (entry.mode_code) {
+      case "cash": return <Banknote size={13} />;
+      case "card": return <CreditCard size={13} />;
+      case "bank_transfer": return <Building size={13} />;
+      default: return <CreditCard size={13} />;
+    }
+  };
+
+  return (
+    <div className="bg-surface-0 border-[1.5px] border-border-subtle rounded-[10px] p-4 space-y-3">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-1.5 text-[12px] font-bold text-foreground-1">
+          {getModeIcon()}
+          {entry.mode_name}
+        </div>
+        {showRemove && (
+          <button onClick={onRemove}
+            className="w-7 h-7 rounded-[6px] flex items-center justify-center text-foreground-disabled hover:text-danger-alt hover:bg-danger-alt/10 transition-all">
+            <Trash2 size={13} />
+          </button>
+        )}
+      </div>
+
+      {/* Amount */}
+      <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} />
+      </div>
+
+      {/* Dynamic sub-fields from field_config */}
+      {fields.length > 0 && (
+        <div className="grid grid-cols-2 gap-2.5">
+          {fields.map((field: PaymentModeField) => (
+            <div key={field.key} className="flex flex-col gap-1">
+              <label className="text-[11px] text-foreground-subtle font-bold uppercase tracking-wider">
+                {field.label}
+                {field.required && <span className="text-danger-alt ml-0.5">*</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) : "" } })}
+                  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">
+                  <option value="">Select...</option>
+                  {bankAccounts.map((b) => (<option key={b.id} value={b.id}>{b.bank_name} - {b.account_number}</option>))}
+                </select>
+              ) : (
+                <input type={field.type === "number" ? "number" : field.type === "date" ? "date" : "text"}
+                  value={entry.metadata[field.key] || ""}
+                  onChange={(e) => onUpdate({ metadata: { ...entry.metadata, [field.key]: e.target.value } })}
+                  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 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none" />
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}