@apptimate/ui 5.7.0 → 5.8.0

package/package.json

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

package/src/common-components/pickers/CurrencyPicker.tsx

@@ -0,0 +1,155 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useRef } from "react";
+import { Coins } from "lucide-react";
+import {
+  EntityPickerModal,
+  PickerItem,
+  PickerTrigger,
+} from "./EntityPickerModal";
+
+interface CurrencyPickerProps {
+  /** Currently selected currency id */
+  value?: number | string | null;
+  /** Display label for the currently selected currency (e.g. "USD — US Dollar") */
+  displayValue?: string | null;
+  /** Callback when a currency is selected */
+  onChange: (currency: { id: number; code: string; name: string; symbol: string } | null) => void;
+  /** Label shown above the trigger */
+  label?: string;
+  /** Placeholder text when no currency is selected */
+  placeholder?: string;
+  /** Whether the field is required */
+  isRequired?: boolean;
+  /** Whether the picker is disabled */
+  disabled?: boolean;
+  /** Fetch function for loading currencies. Should accept { search, page, per_page } and return IApiResponse with data array. */
+  fetchCurrencies: (params: Record<string, string | number>) => Promise<any>;
+  /** Optional custom trigger renderer */
+  customTrigger?: (onClick: () => void) => React.ReactNode;
+}
+
+export function CurrencyPicker({
+  value,
+  displayValue,
+  onChange,
+  label = "Currency",
+  placeholder = "Select currency…",
+  isRequired = false,
+  disabled = false,
+  fetchCurrencies,
+  customTrigger,
+}: CurrencyPickerProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const [currencies, setCurrencies] = useState<any[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const searchTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const loadCurrencies = useCallback(
+    async (query: string) => {
+      setIsLoading(true);
+      try {
+        const res = await fetchCurrencies({ search: query, page: 1, per_page: 50 });
+        const data = res?.result?.data || res?.result || [];
+        setCurrencies(Array.isArray(data) ? data : []);
+      } catch (e) {
+        console.error("Failed to load currencies", e);
+        setCurrencies([]);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [fetchCurrencies]
+  );
+
+  // Load currencies when modal opens
+  useEffect(() => {
+    if (isOpen) {
+      loadCurrencies("");
+    }
+  }, [isOpen, loadCurrencies]);
+
+  // Debounced search
+  useEffect(() => {
+    if (!isOpen) return;
+    if (searchTimeoutRef.current) clearTimeout(searchTimeoutRef.current);
+    searchTimeoutRef.current = setTimeout(() => {
+      loadCurrencies(search);
+    }, 300);
+    return () => {
+      if (searchTimeoutRef.current) clearTimeout(searchTimeoutRef.current);
+    };
+  }, [search, isOpen, loadCurrencies]);
+
+  const handleSelect = (currency: any) => {
+    onChange({
+      id: currency.id,
+      code: currency.code,
+      name: currency.name,
+      symbol: currency.symbol || currency.code,
+    });
+    setIsOpen(false);
+    setSearch("");
+  };
+
+  const handleClear = () => {
+    onChange(null);
+  };
+
+  return (
+    <>
+      {customTrigger ? (
+        customTrigger(() => setIsOpen(true))
+      ) : (
+        <PickerTrigger
+          label={label}
+          value={displayValue || undefined}
+          placeholder={placeholder}
+          isRequired={isRequired}
+          disabled={disabled}
+          onClick={() => setIsOpen(true)}
+          onClear={value ? handleClear : undefined}
+        />
+      )}
+
+      <EntityPickerModal
+        isOpen={isOpen}
+        onClose={() => { setIsOpen(false); setSearch(""); }}
+        title="Select Currency"
+        search={search}
+        onSearchChange={setSearch}
+        searchPlaceholder="Search by code or name…"
+        selectedId={value}
+        size="sm"
+        zIndex={210}
+      >
+        {isLoading ? (
+          <div className="py-8 text-center">
+            <div className="inline-block w-5 h-5 border-2 border-gray-300 border-t-gray-600 rounded-full animate-spin" />
+            <p className="text-xs text-gray-400 mt-2">Loading currencies…</p>
+          </div>
+        ) : currencies.length === 0 ? (
+          <div className="py-8 text-center">
+            <Coins size={28} className="mx-auto text-gray-300 mb-2" />
+            <p className="text-sm text-gray-400 font-medium">
+              {search ? "No currencies match your search" : "No currencies available"}
+            </p>
+          </div>
+        ) : (
+          <div className="flex flex-col gap-0.5">
+            {currencies.map((c) => (
+              <PickerItem
+                key={c.id}
+                label={`${c.code}${c.symbol && c.symbol !== c.code ? ` (${c.symbol})` : ''}`}
+                sublabel={c.name}
+                isSelected={String(c.id) === String(value)}
+                onClick={() => handleSelect(c)}
+              />
+            ))}
+          </div>
+        )}
+      </EntityPickerModal>
+    </>
+  );
+}

package/src/common-components/pickers/PartyPicker.tsx

@@ -19,7 +19,7 @@ import toast from "react-hot-toast";
 interface PartyPickerProps {
   value?: number | string | null;
   displayValue?: string | null;
-  onChange: (party: { id: number; name: string; code?: string; type?: string } | null) => void;
+  onChange: (party: { id: number; name: string; code?: string; type?: string; default_currency_id?: number | null; default_currency?: { id: number; code: string; name: string; symbol: string } | null } | null) => void;
   label?: string;
   placeholder?: string;
   isRequired?: boolean;
@@ -120,7 +120,14 @@ export function PartyPicker({
   };
 
   const handleSelect = (party: any) => {
-    onChange({ id: party.id, name: party.name, code: party.code, type: party.type });
+    onChange({
+      id: party.id,
+      name: party.name,
+      code: party.code,
+      type: party.type,
+      default_currency_id: party.default_currency_id,
+      default_currency: party.default_currency,
+    });
     setIsOpen(false);
   };
 
@@ -150,7 +157,19 @@ export function PartyPicker({
         toast.success("Party created");
         const party = res.result;
         const partyName = party.name || party.full_name || [party.first_name, party.last_name].filter(Boolean).join(" ");
-        onChange({ id: party.id, name: partyName, code: party.code, type: party.type });
+        onChange({
+          id: party.id,
+          name: partyName,
+          code: party.code,
+          type: party.type,
+          default_currency_id: quickAddCurrencyDisplay?.id,
+          default_currency: quickAddCurrencyDisplay ? {
+            id: quickAddCurrencyDisplay.id,
+            code: quickAddCurrencyDisplay.code,
+            name: quickAddCurrencyDisplay.name,
+            symbol: quickAddCurrencyDisplay.symbol
+          } : undefined
+        });
         setIsQuickAddOpen(false);
         setQuickAddFirstName("");
         setQuickAddLastName("");
@@ -343,7 +362,10 @@ export function PartyPicker({
                   } catch { return []; }
                 }}
                 option={{ label: "displayLabel", value: "id", keysToSearch: ["name", "code"] }}
-                onChange={(val) => setQuickAddCurrencyId(val as string | number)}
+                onChange={(val, selectedObj: any) => {
+                  setQuickAddCurrencyId(val as string | number);
+                  setQuickAddCurrencyDisplay(selectedObj);
+                }}
                 key={quickAddCurrencyDisplay ? quickAddCurrencyDisplay.code : 'empty'}
                 defaultValue={quickAddCurrencyDisplay || undefined}
                 error={errors.default_currency_id?.[0]}

package/src/common-components/pickers/index.ts

@@ -1,5 +1,6 @@
 export * from './BrandPicker';
 export * from './CategoryPicker';
+export * from './CurrencyPicker';
 export * from './EntityPickerModal';
 export * from './UomGroupPicker';
 export * from './UomPicker';

package/src/finance-components/PaymentForm.tsx

@@ -13,6 +13,14 @@ interface PaymentFormProps {
   fetchPaymentModes: () => Promise<any>;
   fetchBankAccounts: () => Promise<any>;
   fetchChequeLeaves?: (query: string, page?: number) => Promise<any>;
+  /** Currency code of the invoice (e.g. 'USD'). If not provided, no multi-currency UI. */
+  currencyCode?: string;
+  /** Exchange rate used when the invoice was created */
+  invoiceExchangeRate?: number;
+  /** Whether this is a multi-currency (foreign currency) invoice */
+  isMultiCurrency?: boolean;
+  /** Base currency code (e.g. 'LKR') */
+  baseCurrencyCode?: string;
 }
 
 export function PaymentForm({
@@ -23,6 +31,10 @@ export function PaymentForm({
   fetchPaymentModes,
   fetchBankAccounts,
   fetchChequeLeaves,
+  currencyCode,
+  invoiceExchangeRate = 1,
+  isMultiCurrency = false,
+  baseCurrencyCode = 'LKR',
 }: PaymentFormProps) {
   const [isSubmitting, setIsSubmitting] = useState(false);
   const outstanding = Math.abs(Number(invoice.amount_due || 0) - Number(invoice.amount_settled || invoice.amount_received || 0));
@@ -32,6 +44,25 @@ export function PaymentForm({
   const [remarks, setRemarks] = useState("");
   const [payments, setPayments] = useState<PaymentEntry[]>([]);
 
+  // Exchange rate state (only used for multi-currency invoices)
+  const [exchangeRate, setExchangeRate] = useState<string>(String(invoiceExchangeRate));
+
+  const currentRate = Number(exchangeRate) || 0;
+  const totalPaymentAmount = payments.reduce((sum, p) => sum + (Number(p.amount) || 0), 0);
+
+  // Compute exchange difference for display
+  const exchangeDifference = isMultiCurrency && currentRate > 0
+    ? (totalPaymentAmount * currentRate) - (totalPaymentAmount * invoiceExchangeRate)
+    : 0;
+  
+  // For AP (Payables), paying less in base currency is a GAIN.
+  // For AR (Receivables), receiving less in base currency is a LOSS.
+  const isAP = invoice?.type === 'ap';
+  const isExchangeGain = isAP ? exchangeDifference < 0 : exchangeDifference > 0;
+  const absExchangeDiff = Math.abs(exchangeDifference);
+
+  const fmt = (n: number) => n.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     if (payments.length === 0) {
@@ -45,6 +76,11 @@ export function PaymentForm({
       return;
     }
 
+    if (isMultiCurrency && (!exchangeRate || currentRate <= 0)) {
+      toast.error("Please enter a valid exchange rate");
+      return;
+    }
+
     setIsSubmitting(true);
     let successCount = 0;
 
@@ -61,6 +97,11 @@ export function PaymentForm({
           reference: reference || null,
         };
 
+        // Include exchange rate for multi-currency invoices
+        if (isMultiCurrency) {
+          payload.exchange_rate = currentRate;
+        }
+
         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;
@@ -94,6 +135,49 @@ export function PaymentForm({
         />
       </div>
 
+      {/* Exchange Rate Section — only for multi-currency invoices */}
+      {isMultiCurrency && (
+        <div className="space-y-3">
+          <div className="bg-gray-50 rounded-lg p-3 border border-gray-100">
+            <p className="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-1">Invoice Rate</p>
+            <p className="text-sm font-medium text-gray-700">1 {currencyCode} = {invoiceExchangeRate.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 6 })} {baseCurrencyCode}</p>
+          </div>
+          <div className="flex flex-col gap-1.5">
+            <label className="text-[11px] font-bold text-gray-500 uppercase tracking-wider">
+              Current Exchange Rate (1 {currencyCode} = ? {baseCurrencyCode}) *
+            </label>
+            <Input
+              type="number"
+              step="any"
+              placeholder="0.000000"
+              value={exchangeRate}
+              onChange={(e) => setExchangeRate(e.target.value)}
+            />
+          </div>
+          {/* Live calculation */}
+          {totalPaymentAmount > 0 && currentRate > 0 && (
+            <div className="bg-gray-50 rounded-lg p-3 border border-gray-100 space-y-2">
+              <div className="flex items-center justify-between">
+                <p className="text-[10px] font-bold text-gray-400 uppercase tracking-wider">Base Currency Amount</p>
+                <p className="text-sm font-bold text-gray-800">
+                  {baseCurrencyCode} {fmt(totalPaymentAmount * currentRate)}
+                </p>
+              </div>
+              {absExchangeDiff >= 0.01 && (
+                <div className={`flex items-center justify-between px-2 py-1.5 rounded-md ${isExchangeGain ? 'bg-green-50 border border-green-100' : 'bg-red-50 border border-red-100'}`}>
+                  <span className={`text-[10px] font-bold uppercase tracking-wider ${isExchangeGain ? 'text-green-600' : 'text-red-600'}`}>
+                    Exchange {isExchangeGain ? 'Gain' : 'Loss'}
+                  </span>
+                  <span className={`text-xs font-bold ${isExchangeGain ? 'text-green-700' : 'text-red-700'}`}>
+                    {baseCurrencyCode} {fmt(absExchangeDiff)}
+                  </span>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+
       <PaymentSection
         totalAmount={outstanding}
         payments={payments}

package/src/index.tsx

@@ -43,6 +43,7 @@ export * from './base-components/WizardModal';
 // Pickers
 export * from './common-components/pickers/BrandPicker';
 export * from './common-components/pickers/CategoryPicker';
+export * from './common-components/pickers/CurrencyPicker';
 export * from './common-components/pickers/EmployeePicker';
 export * from './common-components/pickers/EntityPickerModal';
 export * from './common-components/pickers/UomGroupPicker';