@apptimate/ui 1.4.0 → 1.6.0

package/package.json

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

package/src/base-components/ActionModal.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import React from 'react';
+import { Modal } from './Modal';
+
+export interface ActionModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title?: string | React.ReactNode;
+    children: React.ReactNode;
+    onConfirm?: () => void;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    isLoading?: boolean;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
+    /** Variant controls the confirm button colour */
+    variant?: 'primary' | 'danger';
+    className?: string;
+    /** Override z-index layer (default 50). Increase for nested modals. */
+    zIndex?: number;
+}
+
+/**
+ * ActionModal — a convenience wrapper around `Modal` that renders a
+ * standard Cancel / Confirm footer.  Use this for quick confirm-style
+ * dialogs (deposits, withdrawals, delete confirmations, etc.).
+ */
+export const ActionModal = ({
+    isOpen,
+    onClose,
+    title,
+    children,
+    onConfirm,
+    confirmLabel = "Confirm",
+    cancelLabel = "Cancel",
+    isLoading = false,
+    size = 'sm',
+    variant = 'primary',
+    className,
+    zIndex,
+}: ActionModalProps) => {
+    const confirmBtnClass =
+        variant === 'danger'
+            ? "px-4 py-2 rounded-lg text-sm font-bold bg-red-600 text-white hover:bg-red-700 disabled:opacity-50 transition-colors"
+            : "px-4 py-2 rounded-lg text-sm font-bold bg-[#2D3142] text-white hover:bg-[#3d4156] disabled:opacity-50 transition-colors";
+
+    return (
+        <Modal
+            isOpen={isOpen}
+            onClose={onClose}
+            title={title}
+            size={size}
+            className={className}
+            zIndex={zIndex}
+            footer={
+                <>
+                    <button
+                        onClick={onClose}
+                        className="px-4 py-2 rounded-lg text-sm font-bold text-gray-600 bg-gray-100 hover:bg-gray-200 transition-colors"
+                        disabled={isLoading}
+                    >
+                        {cancelLabel}
+                    </button>
+                    {onConfirm && (
+                        <button
+                            onClick={onConfirm}
+                            className={confirmBtnClass}
+                            disabled={isLoading}
+                        >
+                            {isLoading ? (
+                                <span className="inline-flex items-center gap-2">
+                                    <span className="w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+                                    {confirmLabel}
+                                </span>
+                            ) : (
+                                confirmLabel
+                            )}
+                        </button>
+                    )}
+                </>
+            }
+        >
+            {children}
+        </Modal>
+    );
+};

package/src/base-components/AmountComponent.tsx

@@ -0,0 +1,157 @@
+"use client";
+
+import React from 'react';
+import { cn } from '@apptimate/core-lib';
+import { Label } from './Label';
+
+// ── Types ────────────────────────────────────────────────────────────────
+
+export type AmountDisplayMode = 'label' | 'input';
+
+export interface AmountComponentProps {
+  /** The numeric amount value */
+  value: number | string;
+  /** Display mode: 'label' (read-only text) or 'input' (editable field). Default: 'label' */
+  mode?: AmountDisplayMode;
+  /** Currency symbol. Default: 'Rs.' */
+  currency?: string;
+  /** Text color class (e.g. 'text-green-600', 'text-red-500'). Applied to the rendered amount. */
+  color?: string;
+  /** Label text shown above the amount (only when mode='label'). */
+  label?: string;
+  /** If true, shows the required asterisk on the label */
+  isRequired?: boolean;
+  /** Font size class override. Default: 'text-sm' for label, 'text-[13.5px]' for input */
+  fontSize?: string;
+  /** Font weight class override. Default: 'font-semibold' */
+  fontWeight?: string;
+  /** Additional className for the root wrapper */
+  className?: string;
+  /** Number of decimal places. Default: 2 */
+  decimals?: number;
+
+  // ── Input mode props ──────────────────────────────────────────────────
+  /** Callback when value changes (input mode only) */
+  onChange?: (value: number) => void;
+  /** Placeholder text (input mode only). Default: '0.00' */
+  placeholder?: string;
+  /** Disable the input (input mode only) */
+  disabled?: boolean;
+  /** Error message (input mode only) */
+  error?: string;
+  /** Min value (input mode only) */
+  min?: number;
+  /** Max value (input mode only) */
+  max?: number;
+  /** Step value (input mode only). Default: '0.01' */
+  step?: string;
+  /** Name attribute (input mode only) */
+  name?: string;
+}
+
+// ── Helpers ──────────────────────────────────────────────────────────────
+
+function formatAmount(value: number | string, decimals: number): string {
+  const num = typeof value === 'string' ? parseFloat(value) : value;
+  if (isNaN(num)) return '0.' + '0'.repeat(decimals);
+  return num.toLocaleString('en-US', {
+    minimumFractionDigits: decimals,
+    maximumFractionDigits: decimals,
+  });
+}
+
+// ── Component ────────────────────────────────────────────────────────────
+
+export const AmountComponent = React.forwardRef<HTMLInputElement, AmountComponentProps>(
+  (
+    {
+      value,
+      mode = 'label',
+      currency = 'Rs.',
+      color,
+      label,
+      isRequired,
+      fontSize,
+      fontWeight = 'font-semibold',
+      className,
+      decimals = 2,
+      // Input mode props
+      onChange,
+      placeholder = '0.00',
+      disabled = false,
+      error,
+      min,
+      max,
+      step = '0.01',
+      name,
+    },
+    ref
+  ) => {
+    // ── Label Mode ────────────────────────────────────────────────────────
+    if (mode === 'label') {
+      const resolvedFontSize = fontSize || 'text-sm';
+      const resolvedColor = color || 'text-foreground-1';
+
+      return (
+        <div className={cn('flex flex-col gap-1', className)}>
+          {label && (
+            <Label isRequired={isRequired}>{label}</Label>
+          )}
+          <span className={cn(resolvedFontSize, fontWeight, resolvedColor)}>
+            {currency} {formatAmount(value, decimals)}
+          </span>
+        </div>
+      );
+    }
+
+    // ── Input Mode ────────────────────────────────────────────────────────
+    const resolvedFontSize = fontSize || 'text-[13.5px]';
+    const resolvedColor = color || 'text-foreground-1';
+
+    return (
+      <div className={cn('flex flex-col gap-1.5 w-full', className)}>
+        {label && (
+          <Label isRequired={isRequired}>{label}</Label>
+        )}
+        <div className="relative group">
+          {/* Currency prefix */}
+          <span
+            className={cn(
+              'absolute left-3 top-1/2 -translate-y-1/2 text-[12px] font-medium text-gray-400 pointer-events-none select-none'
+            )}
+          >
+            {currency}
+          </span>
+          <input
+            ref={ref}
+            type="number"
+            name={name}
+            value={value}
+            onChange={(e) => onChange?.(parseFloat(e.target.value) || 0)}
+            disabled={disabled}
+            min={min}
+            max={max}
+            step={step}
+            placeholder={placeholder}
+            className={cn(
+              'w-full bg-surface-0 border-[1.5px] border-border-subtle rounded-[10px] pl-10 pr-3.5 py-2.5 text-right outline-none transition-all',
+              'hover:border-gray-300 focus:border-gray-300 focus:bg-surface-1',
+              'placeholder:text-foreground-disabled',
+              '[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',
+              resolvedFontSize,
+              fontWeight,
+              resolvedColor,
+              disabled && 'opacity-60 cursor-not-allowed',
+              error && 'border-danger-alt focus:border-danger-alt hover:border-danger-alt'
+            )}
+          />
+        </div>
+        {error && (
+          <span className="text-[11px] text-danger-alt font-medium">{error}</span>
+        )}
+      </div>
+    );
+  }
+);
+
+AmountComponent.displayName = 'AmountComponent';

package/src/common-components/PaymentSection.tsx

@@ -0,0 +1,335 @@
+"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>
+  );
+}

package/src/index.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 export * from './base-components/Accordion';
+export * from './base-components/AmountComponent';
 export * from './base-components/Badge';
 export * from './base-components/Button';
 export * from './base-components/ButtonGroup';
@@ -20,6 +21,7 @@ export * from './base-components/DesktopFilterPopover';
 export * from './base-components/Input';
 export * from './base-components/Label';
 export * from './base-components/Modal';
+export * from './base-components/ActionModal';
 export * from './base-components/Pagination';
 export * from './base-components/PopConfirm';
 export * from './base-components/SearchableSelect';
@@ -30,3 +32,4 @@ export { default as ImageUploadComponent } from './components/shared/ImageUpload
 export type { ImageUploadComponentProps, ItemImage } from './components/shared/ImageUploadComponent';
 export * from './common-components/DashboardLayout';
 export * from './common-components/charts';
+export * from './common-components/PaymentSection';