@apptimate/ui 5.6.0 → 5.8.0

package/package.json

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

package/src/base-components/Button.tsx

@@ -63,6 +63,9 @@ export interface ButtonProps {
 
   /** Test ID for testing */
   testId?: string;
+
+  /** Tooltip text on hover */
+  title?: string;
 }
 
 const iconSizeMap = {
@@ -219,6 +222,7 @@ export const Button = ({
   prefix = 'aceui',
   testId,
   disableWave = false,
+  title,
 }: ButtonProps) => {
   const isIconOnly = Boolean(!children && icon);
   const isActuallyDisabled = isDisabled || isLoading;
@@ -334,6 +338,7 @@ export const Button = ({
       aria-label={ariaLabel}
       aria-busy={isLoading ? 'true' : undefined}
       data-testid={testId}
+      title={title}
     >
       {wave && (
         <motion.span

package/src/base-components/DesktopFilterPopover.tsx

@@ -33,11 +33,13 @@ export const DesktopFilterPopover = ({
                     <div className="relative">
                         <Button
                             variant="soft"
-                            color="default"
-                            className={cn("!p-0 text-gray-500", triggerClassName)}
+                            color={hasActiveFilter ? 'primary' : 'default'}
+                            className={cn(triggerClassName)}
                             icon={<SlidersHorizontal size={18} strokeWidth={2} />}
                             ariaLabel={label}
-                        />
+                        >
+                            {label}
+                        </Button>
                         {hasActiveFilter && (
                             <span className="absolute -top-0.5 -right-0.5 w-2 h-2 bg-primary-500 rounded-full ring-2 ring-white" />
                         )}

package/src/common-components/DashboardLayout.tsx

@@ -73,7 +73,9 @@ export function DashboardLayout({
 
   // 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 fullPath = (basePath && pathname.startsWith(basePath))
+    ? pathname
+    : basePath + (pathname === "/" && basePath ? "" : pathname);
   const currentMainMenu = (() => {
     let bestMenu = menus[0];
     let bestScore = -1;
@@ -211,15 +213,18 @@ export function DashboardLayout({
                     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]"
+                className={`flex flex-col items-center justify-center gap-1.5 cursor-pointer transition-all duration-200 w-full px-1 py-1 relative ${isActive ? "text-indigo-600" : "text-gray-400 hover:text-[#2D3142]"
                   }`}
               >
+                {isActive && (
+                  <span className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 bg-indigo-600 rounded-r-full" />
+                )}
                 {/* Clone the icon to dynamically apply styling based on active state */}
                 {React.cloneElement(menu.icon as React.ReactElement<any>, {
                   size: 22,
                   className: isActive ? "stroke-[2.5]" : "stroke-[2]"
                 })}
-                <span className={`text-[11px] text-center leading-tight truncate block w-full max-w-[70px] ${isActive ? "font-bold" : "font-medium"}`}>{menu.label}</span>
+                <span className={`text-[11px] text-center leading-tight truncate block w-full max-w-[70px] ${isActive ? "font-bold text-indigo-700" : "font-medium"}`}>{menu.label}</span>
               </div>
             );
           })}
@@ -286,9 +291,9 @@ export function DashboardLayout({
                       : !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 className = `pl-3 pr-4 py-2 rounded-r-lg rounded-l-none text-sm transition-all duration-200 flex items-center justify-between border-l-4 ${isItemActive
+                      ? "bg-indigo-50/70 border-indigo-600 text-indigo-950 font-bold"
+                      : "border-transparent text-gray-500 font-medium hover:bg-gray-50/50"
                       }`;
 
                     const content = (

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

@@ -1,10 +1,11 @@
 "use client";
 
-import React, { useState, useCallback, useEffect } from "react";
+import React, { useState, useCallback, useEffect, useRef } from "react";
 import { Button } from '../../base-components/Button';
 import { Input } from '../../base-components/Input';
 import { Modal } from '../../base-components/Modal';
 import { ModalFooter } from '../../base-components/Modal';
+import { AsyncSearchableSelect } from '../../base-components/SearchableSelect';
 
 import { Plus, User } from "lucide-react";
 import {
@@ -12,13 +13,13 @@ import {
   PickerItem,
   PickerTrigger,
 } from "./EntityPickerModal";
-import { lookupParties, createParty } from "@apptimate/core-lib";
+import { lookupParties, createParty, sendRequest } from "@apptimate/core-lib";
 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;
@@ -52,9 +53,45 @@ export function PartyPicker({
   const [quickAddSecondaryContact, setQuickAddSecondaryContact] = useState("");
   const [quickAddGender, setQuickAddGender] = useState("");
   const [quickAddDOB, setQuickAddDOB] = useState("");
+  const [quickAddCurrencyId, setQuickAddCurrencyId] = useState<string | number | undefined>(undefined);
+  const [quickAddCurrencyDisplay, setQuickAddCurrencyDisplay] = useState<any>(null);
   const [errors, setErrors] = useState<Record<string, string[]>>({});
   const [isCreating, setIsCreating] = useState(false);
 
+  const hasInitializedQuickAddCurrency = useRef(false);
+
+  useEffect(() => {
+    if (isQuickAddOpen && !hasInitializedQuickAddCurrency.current) {
+      hasInitializedQuickAddCurrency.current = true;
+      sendRequest({ url: `${process.env.NEXT_PUBLIC_API_URL}/api/settings`, method: 'GET' })
+        .then((res: any) => {
+          if (res.responseData?.is_success && res.responseData?.result) {
+            const configs = Array.isArray(res.responseData.result) ? res.responseData.result : res.responseData.result.data;
+            const baseConfig = configs?.find((c: any) => c.key === 'base_currency');
+            if (baseConfig?.resolved_item) {
+              const currency = baseConfig.resolved_item;
+              setQuickAddCurrencyId(currency.id);
+              setQuickAddCurrencyDisplay({ id: currency.id, code: currency.code, displayLabel: `${currency.code} — ${currency.name}` });
+            } else if (baseConfig?.value) {
+              // Fallback just in case
+              const baseId = baseConfig.value;
+              sendRequest({ url: `${process.env.NEXT_PUBLIC_API_URL}/api/currencies`, method: 'GET', params: { search: '' } })
+                .then((cRes: any) => {
+                  if (cRes.responseData?.is_success && cRes.responseData?.result?.data) {
+                    const cData = Array.isArray(cRes.responseData.result.data) ? cRes.responseData.result.data : cRes.responseData.result;
+                    const baseCurrency = cData.find((c: any) => String(c.id) === String(baseId));
+                    if (baseCurrency) {
+                      setQuickAddCurrencyId(baseCurrency.id);
+                      setQuickAddCurrencyDisplay({ id: baseCurrency.id, code: baseCurrency.code, displayLabel: `${baseCurrency.code} — ${baseCurrency.name}` });
+                    }
+                  }
+                });
+            }
+          }
+        });
+    }
+  }, [isQuickAddOpen]);
+
   const fetchData = useCallback(async (query: string = "") => {
     setIsLoading(true);
     try {
@@ -83,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);
   };
 
@@ -104,6 +148,7 @@ export function PartyPicker({
         secondary_contact: quickAddSecondaryContact.trim() || undefined,
         gender: quickAddGender || undefined,
         date_of_birth: quickAddDOB || undefined,
+        default_currency_id: quickAddCurrencyId || undefined,
         type: [partyType === "all" ? "customer" : partyType],
         status: "active"
       };
@@ -112,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("");
@@ -268,20 +325,52 @@ export function PartyPicker({
               error={errors.date_of_birth?.[0]}
             />
           </div>
-          <div className="space-y-1">
-            <label className="text-sm font-semibold text-gray-700">Gender</label>
-            <select
-              value={quickAddGender}
-              onChange={(e) => setQuickAddGender(e.target.value)}
-              className="w-full rounded-lg border border-gray-200 px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white"
-            >
-              <option value="">Select gender</option>
-              <option value="male">Male</option>
-              <option value="female">Female</option>
-              <option value="other">Other</option>
-              <option value="prefer_not_to_say">Prefer not to say</option>
-            </select>
-            {errors.gender?.[0] && <p className="text-xs text-red-500">{errors.gender[0]}</p>}
+          <div className="grid grid-cols-2 gap-3">
+            <div className="space-y-1">
+              <label className="text-sm font-semibold text-gray-700">Gender</label>
+              <select
+                value={quickAddGender}
+                onChange={(e) => setQuickAddGender(e.target.value)}
+                className="w-full rounded-lg border border-gray-200 px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white"
+              >
+                <option value="">Select gender</option>
+                <option value="male">Male</option>
+                <option value="female">Female</option>
+                <option value="other">Other</option>
+                <option value="prefer_not_to_say">Prefer not to say</option>
+              </select>
+              {errors.gender?.[0] && <p className="text-xs text-red-500">{errors.gender[0]}</p>}
+            </div>
+            {(partyType === "all" || partyType === "customer" || partyType === "supplier") && (
+              <AsyncSearchableSelect
+                label="Default Currency"
+                placeholder="Search currency..."
+                loadOptions={async (search, page) => {
+                  try {
+                    const res: any = await sendRequest({ 
+                      url: `${process.env.NEXT_PUBLIC_API_URL}/api/currencies`, 
+                      method: 'GET', 
+                      params: { search, page, per_page: 20 } 
+                    });
+                    if (res.responseData?.is_success && res.responseData?.result?.data) {
+                      return res.responseData.result.data.map((c: any) => ({
+                        ...c,
+                        displayLabel: `${c.code} — ${c.name}`
+                      }));
+                    }
+                    return [];
+                  } catch { return []; }
+                }}
+                option={{ label: "displayLabel", value: "id", keysToSearch: ["name", "code"] }}
+                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]}
+              />
+            )}
           </div>
           <ModalFooter>
             <Button

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';