@apptimate/ui 3.5.0 → 3.7.0

package/src/common-components/transaction/MetadataPanel.tsx

@@ -0,0 +1,417 @@
+'use client';
+
+import React, { useState, useEffect, useMemo, useCallback } from 'react';
+import { cn } from '@apptimate/core-lib';
+import { Button } from '../../base-components/Button';
+import {
+  CreditCard, Banknote, Building,
+  Trash2, Loader2, AlertCircle, Check, Calendar,
+} from 'lucide-react';
+import { getPaymentModes, getBankAccountsLookup } from '@apptimate/core-lib';
+import { PartyPicker, WarehousePicker } from '../pickers';
+import type {
+  TransactionScreenConfig, PaymentMode, PaymentEntry, BankAccount,
+  PartyLookup, PaymentModeField, TransactionLineItem,
+} from './types';
+
+interface MetadataPanelProps {
+  config: TransactionScreenConfig;
+  lineItems: TransactionLineItem[];
+  partyId: number | null;
+  partyName?: string | null;
+  warehouseId: number | null;
+  warehouseName?: string | null;
+  transactionDate?: string;
+  notes: string;
+  payments: PaymentEntry[];
+  onPartyChange: (id: number | null, party?: PartyLookup) => void;
+  onWarehouseChange: (id: number | null, name?: string) => void;
+  onDateChange?: (date: string) => void;
+  onNotesChange: (v: string) => void;
+  onPaymentsChange: (payments: PaymentEntry[]) => void;
+  onSubmit: () => void;
+  isSubmitting: boolean;
+  renderExtraMeta?: () => React.ReactNode;
+}
+
+export function MetadataPanel({
+  config, lineItems, partyId, partyName, warehouseId, warehouseName, transactionDate, notes, payments,
+  onPartyChange, onWarehouseChange, onDateChange, onNotesChange, onPaymentsChange, onSubmit, isSubmitting,
+  renderExtraMeta,
+}: MetadataPanelProps) {
+  const [paymentModes, setPaymentModes] = useState<PaymentMode[]>([]);
+  const [bankAccounts, setBankAccounts] = useState<BankAccount[]>([]);
+  const [isLoadingMeta, setIsLoadingMeta] = useState(false);
+
+  // ── Load payment data on mount ──
+  useEffect(() => {
+    if (!config.showPayment) return;
+    const load = async () => {
+      setIsLoadingMeta(true);
+      try {
+        const [modesRes, bankRes] = await Promise.all([
+          getPaymentModes(),
+          getBankAccountsLookup(),
+        ]);
+        if (modesRes.is_success) setPaymentModes(modesRes.result || []);
+        if (bankRes.is_success) setBankAccounts(bankRes.result || []);
+      } finally {
+        setIsLoadingMeta(false);
+      }
+    };
+    load();
+  }, [config.showPayment]);
+
+  // ── Calculations ──
+  const subtotal = useMemo(() => lineItems.reduce((s, l) => s + l.unit_price * l.quantity, 0), [lineItems]);
+  const discountTotal = useMemo(() => lineItems.reduce((s, l) => s + l.discount_amount, 0), [lineItems]);
+  const grandTotal = useMemo(() => subtotal - discountTotal, [subtotal, discountTotal]);
+  const totalPaid = useMemo(() => payments.reduce((s, p) => s + p.amount, 0), [payments]);
+  const balance = useMemo(() => grandTotal - totalPaid, [grandTotal, totalPaid]);
+
+  const formatCurrency = (v: number) => v.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+
+  // ── Payment management ──
+  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 updatePayment = useCallback(
+    (index: number, updates: Partial<PaymentEntry>) => {
+      const next = [...payments];
+      next[index] = { ...next[index], ...updates };
+
+      if (
+        Object.prototype.hasOwnProperty.call(updates, 'amount') &&
+        next[index].mode_code !== 'credit' &&
+        next.length > 1
+      ) {
+        const targetIndex = next.findIndex((payment, paymentIndex) =>
+          paymentIndex !== index &&
+          payment.mode_code !== 'credit' &&
+          Number(payment.amount || 0) <= 0
+        );
+
+        if (targetIndex >= 0) {
+          const paidExceptTarget = next.reduce((sum, payment, paymentIndex) => {
+            if (paymentIndex === targetIndex || payment.mode_code === 'credit') return sum;
+            return sum + Number(payment.amount || 0);
+          }, 0);
+
+          next[targetIndex] = {
+            ...next[targetIndex],
+            amount: Math.max(0, Math.round((grandTotal - paidExceptTarget) * 100) / 100),
+          };
+        }
+      }
+
+      onPaymentsChange(next);
+    },
+    [payments, grandTotal, onPaymentsChange]
+  );
+
+  const removePayment = useCallback(
+    (index: number) => {
+      onPaymentsChange(payments.filter((_, i) => i !== index));
+    },
+    [payments, onPaymentsChange]
+  );
+
+  return (
+    <div className="flex flex-col h-full gap-6">
+      {/* ── Extra Module-Specific Meta (e.g. adjustment type/reason) ── */}
+      {renderExtraMeta && renderExtraMeta()}
+
+      {/* ── Party Selector (picker modal) ── */}
+      {config.showParty !== false && (
+        config.partyIsWarehouse ? (
+          <WarehousePicker
+            value={partyId}
+            displayValue={partyName}
+            onChange={(w) => onPartyChange(w?.id ?? null, w ? { id: w.id, name: w.name } : undefined)}
+            label={config.partyLabel}
+            isRequired
+            fetchFromAllUserOrgs={true}
+          />
+        ) : (
+          <PartyPicker
+            value={partyId}
+            displayValue={partyName}
+            onChange={(p) => onPartyChange(p?.id ?? null, p ? { id: p.id, name: p.name, code: p.code, type: p.type } : undefined)}
+            label={config.partyLabel}
+            partyType={config.partyType}
+          />
+        )
+      )}
+
+      {/* ── Warehouse Selector (picker modal) ── */}
+      {config.showWarehouse && (
+        <WarehousePicker
+          value={warehouseId}
+          displayValue={warehouseName}
+          onChange={(w) => onWarehouseChange(w?.id ?? null, w?.name)}
+          label="Warehouse"
+          isRequired
+        />
+      )}
+
+      {/* ── Transaction Date ── */}
+      {onDateChange && (
+        <Section label="Date">
+          <div className="relative">
+            <Calendar size={15} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-foreground-disabled pointer-events-none" />
+            <input
+              type="date"
+              value={transactionDate || ''}
+              onChange={(e) => onDateChange(e.target.value)}
+              className="w-full bg-surface-0 border-[1.5px] border-border-subtle rounded-[10px] pl-10 pr-3.5 py-3 text-[13.5px] text-foreground-1 outline-none transition-all hover:border-gray-300 focus:border-primary/40"
+            />
+          </div>
+        </Section>
+      )}
+
+      {/* ── Notes ── */}
+      {config.showNotes && (
+        <Section label="Notes">
+          <textarea
+            value={notes}
+            onChange={(e) => onNotesChange(e.target.value)}
+            placeholder="Add transaction notes..."
+            className="w-full bg-surface-0 border-[1.5px] border-border-subtle rounded-[10px] px-3.5 py-3 text-[13px] text-foreground-1 outline-none transition-all hover:border-gray-300 focus:border-primary/40 resize-none"
+            rows={2}
+          />
+        </Section>
+      )}
+
+      {/* ── Totals ── */}
+      {config.showPrices && lineItems.length > 0 && (
+        <div className="bg-surface-0 rounded-[12px] border border-border-subtle p-4 space-y-2">
+          <TotalRow label="Subtotal" value={formatCurrency(subtotal)} />
+          {discountTotal > 0 && (
+            <TotalRow label="Discount" value={`-${formatCurrency(discountTotal)}`} className="text-green-600" />
+          )}
+          <div className="border-t border-border-subtle my-2" />
+          <TotalRow label="Grand Total" value={formatCurrency(grandTotal)} bold />
+        </div>
+      )}
+
+      {/* ── Payment Section ── */}
+      {config.showPayment && (
+        <Section label="Payment">
+          {isLoadingMeta ? (
+            <div className="flex items-center justify-center py-4">
+              <Loader2 size={18} className="animate-spin text-primary" />
+            </div>
+          ) : (
+            <div className="space-y-2.5">
+              {/* Existing payment entries */}
+              {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 payment mode buttons */}
+              {(lineItems.length > 0) && (
+                <div className="flex flex-wrap gap-2 pt-1">
+                  {paymentModes
+                    .filter((m) => m.is_active)
+                    .map((mode) => {
+                      const modeIcon = mode.code === 'cash' ? <Banknote size={14} /> :
+                                       mode.code === 'card' ? <CreditCard size={14} /> :
+                                       mode.code === 'bank_transfer' ? <Building size={14} /> :
+                                       <CreditCard size={14} />;
+                      return (
+                        <button
+                          key={mode.id}
+                          onClick={() => addPayment(mode)}
+                          className="inline-flex items-center gap-2 px-4 py-2 text-[12px] font-semibold rounded-[10px] bg-surface-0 border border-border-subtle text-foreground-1 hover:border-primary/40 hover:bg-primary/5 hover:text-primary transition-all"
+                        >
+                          {modeIcon}
+                          {mode.name}
+                        </button>
+                      );
+                    })}
+                </div>
+              )}
+
+              {/* Balance */}
+              {payments.length > 0 && (
+                <div className="bg-surface-0 rounded-[10px] border border-border-subtle p-3.5 mt-2 space-y-1.5">
+                  <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' : balance < -0.01 ? 'text-amber-600' : '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>
+          )}
+        </Section>
+      )}
+
+      {/* ── Spacer ── */}
+      <div className="flex-1" />
+
+      {/* ── Submit Button ── */}
+      <Button
+        color="primary"
+        onClick={onSubmit}
+        isDisabled={lineItems.length === 0}
+        isLoading={isSubmitting}
+        className="!w-full !py-4 !text-[14px] !font-semibold !rounded-[10px]"
+      >
+        {config.submitLabel}
+      </Button>
+    </div>
+  );
+}
+
+// ── Section wrapper ──
+
+function Section({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="text-[11px] font-bold text-foreground-subtle uppercase tracking-wider">
+        {label}
+      </div>
+      {children}
+    </div>
+  );
+}
+
+// ── Total Row ──
+
+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>
+  );
+}
+
+// ── Payment Entry Row ──
+
+interface PaymentEntryRowProps {
+  entry: PaymentEntry;
+  mode?: PaymentMode;
+  bankAccounts: BankAccount[];
+  onUpdate: (updates: Partial<PaymentEntry>) => void;
+  onRemove: () => void;
+}
+
+function PaymentEntryRow({ entry, mode, bankAccounts, onUpdate, onRemove }: 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>
+        <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>
+  );
+}