@apptimate/ui 1.5.0 → 1.6.0

package/package.json

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

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

@@ -32,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';