@apptimate/ui 1.1.0 → 1.3.0

package/src/components/shared/ImageUploadComponent.tsx

@@ -0,0 +1,228 @@
+"use client";
+import React, { useState, useRef, useCallback } from "react";
+import { Button, Modal, ModalFooter } from "@apptimate/ui";
+import { Upload, X, Star, GripVertical, ImagePlus, Trash2 } from "lucide-react";
+import toast from "react-hot-toast";
+import { sendRequest } from "@apptimate/core-lib";
+
+export interface ItemImage {
+  id: number;
+  file_path: string;
+  file_url?: string;
+  is_primary: boolean;
+  sort_order: number;
+  original_name?: string;
+}
+
+export interface ImageUploadComponentProps {
+  /** API base URL — defaults to process.env.NEXT_PUBLIC_API_URL */
+  apiBase?: string;
+  /** Item/entity ID for the image upload endpoint */
+  entityId: number;
+  /** API path template — {id} will be replaced. Default: /api/inventory/items/{id}/images */
+  apiPath?: string;
+  /** API path for single image delete. {imageId} will be replaced. Default: /api/inventory/images/{imageId} */
+  deletePath?: string;
+  /** API path for set primary. {imageId} will be replaced. Default: /api/inventory/images/{imageId}/primary */
+  primaryPath?: string;
+  /** Existing images loaded from API */
+  images: ItemImage[];
+  /** Callback after any mutation */
+  onRefresh: () => void;
+  /** Max images allowed. Default: 10 */
+  maxImages?: number;
+  /** Accepted MIME types. Default: image/* */
+  accept?: string;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Label text */
+  label?: string;
+  /** Extra fields to append to upload FormData (e.g. { line_id: "123" }) */
+  extraFormData?: Record<string, string>;
+}
+
+export default function ImageUploadComponent({
+  apiBase = process.env.NEXT_PUBLIC_API_URL || "",
+  entityId,
+  apiPath = "/api/inventory/items/{id}/images",
+  deletePath = "/api/inventory/images/{imageId}",
+  primaryPath = "/api/inventory/images/{imageId}/primary",
+  images = [],
+  onRefresh,
+  maxImages = 10,
+  accept = "image/*",
+  disabled = false,
+  label = "Images",
+  extraFormData = {},
+}: ImageUploadComponentProps) {
+  const [uploading, setUploading] = useState(false);
+  const [dragOver, setDragOver] = useState(false);
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  // Build URL through the Next.js proxy (same as sendRequest does)
+  const buildProxyUrl = (path: string) => {
+    if (typeof window === "undefined") return `${apiBase}${path}`;
+    try {
+      const raw = `${apiBase}${path}`;
+      const parsed = new URL(raw, window.location.origin);
+      if (parsed.origin === window.location.origin) return parsed.toString();
+      const proxyPath = parsed.pathname.replace(/^\/+/, "");
+      return `/api/proxy/${proxyPath}${parsed.search}`;
+    } catch {
+      return `${apiBase}${path}`;
+    }
+  };
+
+  const uploadUrl = buildProxyUrl(apiPath.replace("{id}", String(entityId)));
+  const multipleUploadUrl = `${uploadUrl}/multiple`;
+
+  const getAuthHeaders = (): Record<string, string> => {
+    const headers: Record<string, string> = {};
+    // Add org header
+    try {
+      const orgRaw = typeof window !== "undefined" ? localStorage.getItem("selected_organization") : null;
+      if (orgRaw) {
+        const org = JSON.parse(orgRaw);
+        if (org?.id) headers["X-Organization-Id"] = String(org.id);
+      }
+    } catch { /* ignore */ }
+    return headers;
+  };
+
+  const handleFiles = async (files: FileList | File[]) => {
+    if (disabled) return;
+    const fileArray = Array.from(files);
+    if (fileArray.length === 0) return;
+    if (images.length + fileArray.length > maxImages) {
+      toast.error(`Max ${maxImages} images allowed`);
+      return;
+    }
+
+    setUploading(true);
+    try {
+      if (fileArray.length === 1) {
+        const formData = new FormData();
+        formData.append("image", fileArray[0]);
+        if (images.length === 0) formData.append("is_primary", "1");
+        Object.entries(extraFormData).forEach(([k, v]) => formData.append(k, v));
+        const resp = await fetch(uploadUrl, { method: "POST", headers: getAuthHeaders(), body: formData });
+        const data = await resp.json();
+        if (data.is_success) { toast.success("Image uploaded"); onRefresh(); } else toast.error(data.message || "Upload failed");
+      } else {
+        const formData = new FormData();
+        fileArray.forEach(f => formData.append("images[]", f));
+        Object.entries(extraFormData).forEach(([k, v]) => formData.append(k, v));
+        const resp = await fetch(multipleUploadUrl, { method: "POST", headers: getAuthHeaders(), body: formData });
+        const data = await resp.json();
+        if (data.is_success) { toast.success(`${fileArray.length} images uploaded`); onRefresh(); } else toast.error(data.message || "Upload failed");
+      }
+    } catch (e: any) {
+      toast.error(e.message || "Upload error");
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  const handleDelete = async (imageId: number) => {
+    try {
+      const url = buildProxyUrl(deletePath.replace("{id}", String(entityId)).replace("{imageId}", String(imageId)));
+      const resp = await fetch(url, { method: "DELETE", headers: { ...getAuthHeaders(), "Content-Type": "application/json" } });
+      const data = await resp.json();
+      if (data.is_success) { toast.success("Image deleted"); onRefresh(); } else toast.error(data.message || "Delete failed");
+    } catch (e: any) { toast.error(e.message); }
+  };
+
+  const handleSetPrimary = async (imageId: number) => {
+    try {
+      const url = buildProxyUrl(primaryPath.replace("{imageId}", String(imageId)));
+      const resp = await fetch(url, { method: "POST", headers: { ...getAuthHeaders(), "Content-Type": "application/json" } });
+      const data = await resp.json();
+      if (data.is_success) { toast.success("Primary image set"); onRefresh(); } else toast.error(data.message || "Failed");
+    } catch (e: any) { toast.error(e.message); }
+  };
+
+  const onDrop = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    setDragOver(false);
+    handleFiles(e.dataTransfer.files);
+  }, [images.length]);
+
+  const sorted = [...images].sort((a, b) => a.sort_order - b.sort_order);
+
+  return (
+    <div>
+      <label className="text-xs font-bold text-gray-500 uppercase mb-2 block">{label} ({images.length}/{maxImages})</label>
+
+      {/* Image Grid */}
+      {sorted.length > 0 && (
+        <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-2 mb-3">
+          {sorted.map((img) => (
+            <div key={img.id} className="rounded-xl overflow-hidden border border-gray-200 bg-gray-50">
+              <div className="relative group aspect-square">
+                <img
+                  src={img.file_url || img.file_path}
+                  alt={img.original_name || "Image"}
+                  className="w-full h-full object-cover cursor-pointer"
+                  onClick={() => setPreviewUrl(img.file_url || img.file_path)}
+                />
+                {img.is_primary && (
+                  <div className="absolute top-1 left-1 bg-yellow-400 text-white rounded-full p-0.5"><Star size={12} fill="white" /></div>
+                )}
+                <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-1.5">
+                  {!img.is_primary && !disabled && (
+                    <button onClick={() => handleSetPrimary(img.id)} className="p-1.5 bg-white rounded-lg hover:bg-yellow-50 transition-colors" title="Set as primary">
+                      <Star size={14} className="text-yellow-500" />
+                    </button>
+                  )}
+                  {!disabled && (
+                    <button onClick={() => handleDelete(img.id)} className="p-1.5 bg-white rounded-lg hover:bg-red-50 transition-colors" title="Delete">
+                      <Trash2 size={14} className="text-red-500" />
+                    </button>
+                  )}
+                </div>
+              </div>
+              {img.original_name && (
+                <div className="px-2 py-1.5 bg-white border-t border-gray-100">
+                  <p className="text-[11px] font-semibold text-gray-700 truncate" title={img.original_name}>{img.original_name}</p>
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Upload Zone */}
+      {!disabled && images.length < maxImages && (
+        <div
+          onDragOver={e => { e.preventDefault(); setDragOver(true); }}
+          onDragLeave={() => setDragOver(false)}
+          onDrop={onDrop}
+          onClick={() => fileInputRef.current?.click()}
+          className={`flex flex-col items-center justify-center border-2 border-dashed rounded-xl p-6 cursor-pointer transition-all ${
+            dragOver ? "border-blue-400 bg-blue-50" : "border-gray-200 hover:border-blue-300 hover:bg-blue-50/50"
+          } ${uploading ? "opacity-50 pointer-events-none" : ""}`}
+        >
+          {uploading ? (
+            <div className="flex items-center gap-2 text-blue-600"><div className="w-5 h-5 border-2 border-blue-400 border-t-transparent rounded-full animate-spin" /><span className="text-sm font-medium">Uploading...</span></div>
+          ) : (
+            <>
+              <ImagePlus size={28} className="text-gray-400 mb-2" />
+              <p className="text-sm text-gray-500 font-medium">Drop images here or click to browse</p>
+              <p className="text-xs text-gray-400 mt-1">Max {maxImages} images • JPG, PNG, WebP</p>
+            </>
+          )}
+          <input ref={fileInputRef} type="file" multiple accept={accept} className="hidden" onChange={e => e.target.files && handleFiles(e.target.files)} />
+        </div>
+      )}
+
+      {/* Image Preview Modal */}
+      <Modal isOpen={!!previewUrl} onClose={() => setPreviewUrl(null)} title="Image Preview" size="lg">
+        <div className="flex items-center justify-center p-4">
+          {previewUrl && <img src={previewUrl} alt="Preview" className="max-w-full max-h-[60vh] object-contain rounded-xl" />}
+        </div>
+        <ModalFooter><Button variant="soft" color="default" onClick={() => setPreviewUrl(null)}>Close</Button></ModalFooter>
+      </Modal>
+    </div>
+  );
+}

package/src/components/shared/PaymentModeComponent.tsx

@@ -0,0 +1,421 @@
+"use client";
+
+import React, { useState, useEffect, useCallback } from "react";
+import { Input, Modal, ModalFooter, Button, Badge } from "@apptimate/ui";
+import { Banknote, CreditCard, Building2, Smartphone, FileText, Plus, X, Search, ArrowRight, AlertTriangle, Clock } from "lucide-react";
+
+// ── Types ────────────────────────────────────────────────────────────────
+
+export interface PaymentEntry {
+  payment_method: PaymentMethod;
+  amount: number | string;
+  bank_account_id?: number | null;
+  bank_account_name?: string;
+  cheque_no?: string;
+  cheque_bank_name?: string;
+  cheque_branch?: string;
+  cheque_due_date?: string;
+  cheque_direction?: "issued" | "received";
+  card_type?: string;
+  card_last_4?: string;
+  auth_code?: string;
+  external_reference?: string;
+  notes?: string;
+}
+
+export type PaymentMethod = "cash" | "card" | "bank_transfer" | "wallet" | "cheque";
+
+export interface BankAccount {
+  id: number;
+  code: string;
+  name: string;
+  bank_name: string;
+  account_number: string;
+  book_balance: number;
+}
+
+export interface PaymentModeProps {
+  /** Total amount to be collected */
+  totalAmount: number;
+  /** Currency symbol */
+  currency?: string;
+  /** Initial payment entries (for editing) */
+  initialPayments?: PaymentEntry[];
+  /** Callback fired whenever payments change */
+  onChange: (payments: PaymentEntry[]) => void;
+  /** Which payment methods are enabled (default: all) */
+  enabledMethods?: PaymentMethod[];
+  /** Default cheque direction for this context */
+  chequeDirection?: "issued" | "received";
+  /** Show cash change calculation */
+  showChange?: boolean;
+  /** Bank accounts list — fetched from API by parent */
+  bankAccounts?: BankAccount[];
+  /** Layout style: full (multi-row) or compact (single-row POS) */
+  layout?: "full" | "compact";
+  /** Whether to auto-fill amount for single payment */
+  autoFillAmount?: boolean;
+  /** Disable editing (read-only mode) */
+  disabled?: boolean;
+  /** Label override */
+  label?: string;
+}
+
+// ── Payment Method Config ────────────────────────────────────────────────
+
+const METHODS: Record<PaymentMethod, { label: string; icon: typeof Banknote; color: string; bgColor: string; needsBank: boolean; needsCheque: boolean; needsCardDetails: boolean }> = {
+  cash:          { label: "Cash",          icon: Banknote,    color: "text-emerald-600", bgColor: "bg-emerald-50 border-emerald-200 hover:border-emerald-400", needsBank: false, needsCheque: false, needsCardDetails: false },
+  card:          { label: "Card",          icon: CreditCard,  color: "text-violet-600",  bgColor: "bg-violet-50 border-violet-200 hover:border-violet-400",   needsBank: true,  needsCheque: false, needsCardDetails: true },
+  bank_transfer: { label: "Bank Transfer", icon: Building2,   color: "text-blue-600",    bgColor: "bg-blue-50 border-blue-200 hover:border-blue-400",         needsBank: true,  needsCheque: false, needsCardDetails: false },
+  wallet:        { label: "Wallet",        icon: Smartphone,  color: "text-amber-600",   bgColor: "bg-amber-50 border-amber-200 hover:border-amber-400",      needsBank: true,  needsCheque: false, needsCardDetails: false },
+  cheque:        { label: "Cheque",        icon: FileText,    color: "text-orange-600",  bgColor: "bg-orange-50 border-orange-200 hover:border-orange-400",    needsBank: false, needsCheque: true,  needsCardDetails: false },
+};
+
+// ── Component ────────────────────────────────────────────────────────────
+
+export default function PaymentModeComponent({
+  totalAmount,
+  currency = "Rs.",
+  initialPayments,
+  onChange,
+  enabledMethods = ["cash", "card", "bank_transfer", "wallet", "cheque"],
+  chequeDirection = "received",
+  showChange = true,
+  bankAccounts = [],
+  layout = "full",
+  autoFillAmount = true,
+  disabled = false,
+  label = "Payment",
+}: PaymentModeProps) {
+  const [payments, setPayments] = useState<PaymentEntry[]>(
+    initialPayments || [{ payment_method: "cash", amount: autoFillAmount ? totalAmount : "" }]
+  );
+  const [expandedIndex, setExpandedIndex] = useState<number | null>(null);
+  const [bankSelectorOpen, setBankSelectorOpen] = useState<{ index: number } | null>(null);
+  const [bankSearch, setBankSearch] = useState("");
+
+  // Sync when totalAmount changes (for POS where total updates dynamically)
+  useEffect(() => {
+    if (autoFillAmount && payments.length === 1 && payments[0].payment_method === "cash") {
+      const updated = [{ ...payments[0], amount: totalAmount }];
+      setPayments(updated);
+      onChange(updated);
+    }
+  }, [totalAmount]);
+
+  const fireChange = useCallback((updated: PaymentEntry[]) => {
+    setPayments(updated);
+    onChange(updated);
+  }, [onChange]);
+
+  // ── Actions ──────────────────────────────────────────────────────────
+
+  const addPayment = () => {
+    const remaining = totalAmount - getTotalPaid(payments);
+    const nextMethod = enabledMethods.find(m => !payments.some(p => p.payment_method === m)) || enabledMethods[0];
+    fireChange([...payments, { payment_method: nextMethod, amount: remaining > 0 ? remaining : "" }]);
+  };
+
+  const removePayment = (index: number) => {
+    if (payments.length <= 1) return;
+    const updated = payments.filter((_, i) => i !== index);
+    fireChange(updated);
+    if (expandedIndex === index) setExpandedIndex(null);
+  };
+
+  const updatePayment = (index: number, field: string, value: any) => {
+    const updated = [...payments];
+    updated[index] = { ...updated[index], [field]: value };
+
+    // When changing method, reset method-specific fields
+    if (field === "payment_method") {
+      updated[index].bank_account_id = null;
+      updated[index].bank_account_name = undefined;
+      updated[index].cheque_no = undefined;
+      updated[index].cheque_bank_name = undefined;
+      updated[index].cheque_branch = undefined;
+      updated[index].cheque_due_date = undefined;
+      updated[index].card_type = undefined;
+      updated[index].card_last_4 = undefined;
+      updated[index].auth_code = undefined;
+      updated[index].external_reference = undefined;
+    }
+
+    fireChange(updated);
+  };
+
+  const selectBank = (index: number, bank: BankAccount) => {
+    const updated = [...payments];
+    updated[index] = { ...updated[index], bank_account_id: bank.id, bank_account_name: `${bank.name} (${bank.account_number})` };
+    fireChange(updated);
+    setBankSelectorOpen(null);
+    setBankSearch("");
+  };
+
+  // ── Calculations ─────────────────────────────────────────────────────
+
+  const getTotalPaid = (p: PaymentEntry[]) => p.reduce((s, e) => s + (parseFloat(String(e.amount)) || 0), 0);
+  const totalPaid = getTotalPaid(payments);
+  const remaining = Math.max(0, totalAmount - totalPaid);
+  const changeAmount = Math.max(0, totalPaid - totalAmount);
+  const isFullyPaid = totalPaid >= totalAmount;
+
+  // ── Filter bank accounts ─────────────────────────────────────────────
+
+  const filteredBanks = bankAccounts.filter(b =>
+    !bankSearch || b.name.toLowerCase().includes(bankSearch.toLowerCase()) ||
+    b.account_number.includes(bankSearch) || b.bank_name.toLowerCase().includes(bankSearch.toLowerCase())
+  );
+
+  // ── Render ───────────────────────────────────────────────────────────
+
+  return (
+    <div className="space-y-3">
+      {label && (
+        <div className="flex items-center justify-between">
+          <label className="text-xs font-bold text-gray-500 uppercase tracking-wider">{label}</label>
+          <div className="flex items-center gap-2">
+            <span className={`text-xs font-bold ${isFullyPaid ? "text-emerald-600" : "text-red-500"}`}>
+              {currency} {totalPaid.toLocaleString("en", { minimumFractionDigits: 2 })} / {currency} {totalAmount.toLocaleString("en", { minimumFractionDigits: 2 })}
+            </span>
+          </div>
+        </div>
+      )}
+
+      {/* Payment Rows */}
+      {payments.map((p, i) => {
+        const method = METHODS[p.payment_method];
+        const Icon = method.icon;
+        const isExpanded = expandedIndex === i;
+        const needsExtra = method.needsBank || method.needsCheque || method.needsCardDetails;
+
+        return (
+          <div key={i} className={`rounded-xl border-2 transition-all ${method.bgColor} ${disabled ? "opacity-60" : ""}`}>
+            {/* Main Row */}
+            <div className="flex items-center gap-3 p-3">
+              {/* Method Selector (visual tabs) */}
+              <div className="flex gap-1">
+                {enabledMethods.map(m => {
+                  const M = METHODS[m];
+                  const MIcon = M.icon;
+                  const isActive = p.payment_method === m;
+                  return (
+                    <button key={m} type="button" disabled={disabled}
+                      onClick={() => updatePayment(i, "payment_method", m)}
+                      title={M.label}
+                      className={`h-9 w-9 rounded-lg flex items-center justify-center transition-all ${
+                        isActive
+                          ? `${M.color} bg-white shadow-sm ring-1 ring-gray-200`
+                          : "text-gray-400 hover:text-gray-600 hover:bg-white/50"
+                      }`}>
+                      <MIcon size={16} />
+                    </button>
+                  );
+                })}
+              </div>
+
+              {/* Method Label */}
+              <div className="flex-shrink-0">
+                <span className={`text-xs font-bold ${method.color}`}>{method.label}</span>
+              </div>
+
+              {/* Amount */}
+              <div className="flex-1">
+                <input type="number" disabled={disabled}
+                  value={p.amount} onChange={e => updatePayment(i, "amount", e.target.value)}
+                  className="w-full px-3 py-2 bg-white border border-gray-200 rounded-lg text-sm font-bold text-right focus:outline-none focus:ring-2 focus:ring-primary-300 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                  placeholder="0.00"
+                />
+              </div>
+
+              {/* Expand / Remove buttons */}
+              <div className="flex items-center gap-1">
+                {needsExtra && (
+                  <button type="button" onClick={() => setExpandedIndex(isExpanded ? null : i)}
+                    className={`h-7 w-7 rounded-lg flex items-center justify-center transition-colors ${isExpanded ? "bg-white shadow-sm text-gray-700" : "text-gray-400 hover:text-gray-600 hover:bg-white/50"}`}
+                    title="Additional details">
+                    <ArrowRight size={14} className={`transition-transform ${isExpanded ? "rotate-90" : ""}`} />
+                  </button>
+                )}
+                {payments.length > 1 && !disabled && (
+                  <button type="button" onClick={() => removePayment(i)}
+                    className="h-7 w-7 rounded-lg flex items-center justify-center text-red-400 hover:bg-red-50 hover:text-red-600 transition-colors">
+                    <X size={14} />
+                  </button>
+                )}
+              </div>
+            </div>
+
+            {/* Expanded Details */}
+            {isExpanded && needsExtra && (
+              <div className="px-3 pb-3 space-y-2 border-t border-gray-100 pt-2">
+                {/* Bank Account Selector (for card, bank_transfer, wallet) */}
+                {method.needsBank && (
+                  <div>
+                    <label className="text-[10px] font-bold text-gray-500 uppercase mb-0.5 block">Bank Account</label>
+                    <button type="button" disabled={disabled}
+                      onClick={() => setBankSelectorOpen({ index: i })}
+                      className="w-full flex items-center gap-2 px-3 py-2 bg-white border border-gray-200 rounded-lg text-left text-sm hover:border-gray-300 transition-colors">
+                      {p.bank_account_id ? (
+                        <>
+                          <Building2 size={14} className="text-blue-500 flex-shrink-0" />
+                          <span className="font-medium text-gray-900 truncate">{p.bank_account_name}</span>
+                        </>
+                      ) : (
+                        <span className="text-gray-400">Select bank account...</span>
+                      )}
+                    </button>
+                  </div>
+                )}
+
+                {/* Card Details */}
+                {method.needsCardDetails && (
+                  <div className="grid grid-cols-3 gap-2">
+                    <div>
+                      <label className="text-[10px] font-bold text-gray-500 uppercase mb-0.5 block">Card Type</label>
+                      <select disabled={disabled} value={p.card_type || ""} onChange={e => updatePayment(i, "card_type", e.target.value)}
+                        className="w-full px-2 py-1.5 bg-white border border-gray-200 rounded-lg text-xs">
+                        <option value="">Select</option>
+                        <option value="visa">Visa</option>
+                        <option value="mastercard">Mastercard</option>
+                        <option value="amex">Amex</option>
+                        <option value="other">Other</option>
+                      </select>
+                    </div>
+                    <div>
+                      <label className="text-[10px] font-bold text-gray-500 uppercase mb-0.5 block">Last 4</label>
+                      <input disabled={disabled} value={p.card_last_4 || ""} onChange={e => updatePayment(i, "card_last_4", e.target.value)}
+                        maxLength={4} className="w-full px-2 py-1.5 bg-white border border-gray-200 rounded-lg text-xs" placeholder="0000" />
+                    </div>
+                    <div>
+                      <label className="text-[10px] font-bold text-gray-500 uppercase mb-0.5 block">Auth Code</label>
+                      <input disabled={disabled} value={p.auth_code || ""} onChange={e => updatePayment(i, "auth_code", e.target.value)}
+                        className="w-full px-2 py-1.5 bg-white border border-gray-200 rounded-lg text-xs" placeholder="—" />
+                    </div>
+                  </div>
+                )}
+
+                {/* Cheque Details */}
+                {method.needsCheque && (
+                  <div className="space-y-2">
+                    <div className="grid grid-cols-2 gap-2">
+                      <div>
+                        <label className="text-[10px] font-bold text-gray-500 uppercase mb-0.5 block">Cheque No</label>
+                        <input disabled={disabled} value={p.cheque_no || ""} onChange={e => updatePayment(i, "cheque_no", e.target.value)}
+                          className="w-full px-2 py-1.5 bg-white border border-gray-200 rounded-lg text-xs font-bold" placeholder="CHQ-001" />
+                      </div>
+                      <div>
+                        <label className="text-[10px] font-bold text-gray-500 uppercase mb-0.5 block">Due Date</label>
+                        <input disabled={disabled} type="date" value={p.cheque_due_date || ""} onChange={e => updatePayment(i, "cheque_due_date", e.target.value)}
+                          className="w-full px-2 py-1.5 bg-white border border-gray-200 rounded-lg text-xs" />
+                      </div>
+                    </div>
+                    <div className="grid grid-cols-2 gap-2">
+                      <div>
+                        <label className="text-[10px] font-bold text-gray-500 uppercase mb-0.5 block">Bank Name</label>
+                        <input disabled={disabled} value={p.cheque_bank_name || ""} onChange={e => updatePayment(i, "cheque_bank_name", e.target.value)}
+                          className="w-full px-2 py-1.5 bg-white border border-gray-200 rounded-lg text-xs" placeholder="Bank name" />
+                      </div>
+                      <div>
+                        <label className="text-[10px] font-bold text-gray-500 uppercase mb-0.5 block">Branch</label>
+                        <input disabled={disabled} value={p.cheque_branch || ""} onChange={e => updatePayment(i, "cheque_branch", e.target.value)}
+                          className="w-full px-2 py-1.5 bg-white border border-gray-200 rounded-lg text-xs" placeholder="Branch" />
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-2 px-2 py-1.5 bg-orange-100/50 rounded-lg">
+                      <AlertTriangle size={12} className="text-orange-500 flex-shrink-0" />
+                      <span className="text-[10px] text-orange-700 font-medium">Cheque payments do not affect bank balance until cleared</span>
+                    </div>
+                  </div>
+                )}
+
+                {/* Reference for all non-cash methods */}
+                {p.payment_method !== "cash" && !method.needsCheque && (
+                  <div>
+                    <label className="text-[10px] font-bold text-gray-500 uppercase mb-0.5 block">Reference / Transaction ID</label>
+                    <input disabled={disabled} value={p.external_reference || ""} onChange={e => updatePayment(i, "external_reference", e.target.value)}
+                      className="w-full px-2 py-1.5 bg-white border border-gray-200 rounded-lg text-xs" placeholder="Transaction reference..." />
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        );
+      })}
+
+      {/* Add Payment Row */}
+      {!disabled && payments.length < enabledMethods.length && (
+        <button type="button" onClick={addPayment}
+          className="w-full flex items-center justify-center gap-1.5 px-3 py-2 border-2 border-dashed border-gray-200 rounded-xl text-sm font-semibold text-gray-400 hover:text-primary-600 hover:border-primary-300 transition-colors">
+          <Plus size={14} /> Split Payment
+        </button>
+      )}
+
+      {/* Summary */}
+      <div className="bg-gray-50 rounded-xl p-3 space-y-1">
+        <div className="flex justify-between text-xs text-gray-500">
+          <span>Total Payable</span>
+          <span className="font-bold">{currency} {totalAmount.toLocaleString("en", { minimumFractionDigits: 2 })}</span>
+        </div>
+        <div className="flex justify-between text-xs text-gray-500">
+          <span>Paid</span>
+          <span className="font-bold">{currency} {totalPaid.toLocaleString("en", { minimumFractionDigits: 2 })}</span>
+        </div>
+        {remaining > 0 && (
+          <div className="flex justify-between text-xs">
+            <span className="text-red-500 font-medium">Remaining</span>
+            <span className="font-bold text-red-600">{currency} {remaining.toLocaleString("en", { minimumFractionDigits: 2 })}</span>
+          </div>
+        )}
+        {showChange && changeAmount > 0 && (
+          <div className="flex justify-between text-sm pt-1 border-t border-gray-200">
+            <span className="text-blue-600 font-bold">Change</span>
+            <span className="font-bold text-blue-700 text-base">{currency} {changeAmount.toLocaleString("en", { minimumFractionDigits: 2 })}</span>
+          </div>
+        )}
+      </div>
+
+      {/* Bank Account Selector Modal */}
+      <Modal isOpen={!!bankSelectorOpen} onClose={() => { setBankSelectorOpen(null); setBankSearch(""); }} title="Select Bank Account" size="md">
+        <div className="space-y-3 p-1">
+          <div className="relative">
+            <Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
+            <input value={bankSearch} onChange={e => setBankSearch(e.target.value)} autoFocus
+              className="w-full pl-8 pr-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary-300"
+              placeholder="Search by name, number, bank..." />
+          </div>
+          <div className="max-h-[300px] overflow-y-auto space-y-1">
+            {filteredBanks.length === 0 && <p className="text-xs text-gray-400 text-center py-4">No bank accounts found.</p>}
+            {filteredBanks.map(bank => (
+              <button key={bank.id} type="button"
+                onClick={() => bankSelectorOpen && selectBank(bankSelectorOpen.index, bank)}
+                className="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-gray-50 transition-colors text-left group">
+                <div className="h-9 w-9 rounded-lg bg-blue-50 flex items-center justify-center flex-shrink-0">
+                  <Building2 size={16} className="text-blue-600" />
+                </div>
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm font-bold text-gray-900 truncate">{bank.name}</span>
+                    <span className="text-[10px] text-gray-400 font-medium">{bank.code}</span>
+                  </div>
+                  <div className="flex items-center gap-2 mt-0.5">
+                    <span className="text-[10px] text-gray-400 font-bold">{bank.bank_name}</span>
+                    <span className="text-[10px] text-gray-400">···{bank.account_number.slice(-4)}</span>
+                  </div>
+                </div>
+                <div className="text-right flex-shrink-0">
+                  <span className={`text-xs font-bold ${bank.book_balance >= 0 ? "text-emerald-600" : "text-red-600"}`}>
+                    {currency} {Number(bank.book_balance).toLocaleString("en", { minimumFractionDigits: 2 })}
+                  </span>
+                </div>
+              </button>
+            ))}
+          </div>
+        </div>
+        <ModalFooter>
+          <Button variant="soft" color="default" onClick={() => { setBankSelectorOpen(null); setBankSearch(""); }}>Cancel</Button>
+        </ModalFooter>
+      </Modal>
+    </div>
+  );
+}

package/src/components/shared/ProcurementManagerSelector.tsx

@@ -0,0 +1,5 @@
+/**
+ * Re-export from procurement-ui — this is the canonical source.
+ * @see apps/common-ui/procurement-ui/components/shared/ProcurementManagerSelector.tsx
+ */
+export { default } from '../../../procurement-ui/components/shared/ProcurementManagerSelector';