/** * Transaction Pipeline Component * Kanban-style pipeline board for real estate transactions with columns for each * TransactionStage, drag-friendly cards, pipeline value summary, and transaction editing */ "use client"; import { useState, useEffect, useCallback } from "react"; import type { Lang } from "@/lib/config"; import { fetchWithCSRF } from "@/lib/csrf-client"; import { Plus, Loader2, RefreshCw, User, Building2, DollarSign, Clock, ChevronDown, ChevronUp, X, Edit3, Phone, Mail, } from "lucide-react"; // --------------------------------------------------------------------------- // Types // --------------------------------------------------------------------------- interface Transaction { id: string; clientName: string; clientPhone?: string; clientEmail?: string; propertyId: string; propertyTitle: string; stage: string; offerAmount?: number; currency: string; daysInStage: number; notes?: string; createdAt: string; updatedAt: string; } interface TransactionPipelineProps { lang: Lang; } // --------------------------------------------------------------------------- // Constants // --------------------------------------------------------------------------- const STAGES = [ { key: "INQUIRY", label: "Inquiry", color: "bg-slate-500", borderColor: "border-slate-300", bgColor: "bg-slate-50", }, { key: "QUALIFIED", label: "Qualified", color: "bg-blue-500", borderColor: "border-blue-300", bgColor: "bg-blue-50", }, { key: "VIEWING_SCHEDULED", label: "Viewing Scheduled", color: "bg-indigo-500", borderColor: "border-indigo-300", bgColor: "bg-indigo-50", }, { key: "VIEWING_COMPLETED", label: "Viewing Done", color: "bg-violet-500", borderColor: "border-violet-300", bgColor: "bg-violet-50", }, { key: "INTERESTED", label: "Interested", color: "bg-purple-500", borderColor: "border-purple-300", bgColor: "bg-purple-50", }, { key: "OFFER_MADE", label: "Offer Made", color: "bg-amber-500", borderColor: "border-amber-300", bgColor: "bg-amber-50", }, { key: "NEGOTIATION", label: "Negotiation", color: "bg-orange-500", borderColor: "border-orange-300", bgColor: "bg-orange-50", }, { key: "OFFER_ACCEPTED", label: "Offer Accepted", color: "bg-lime-500", borderColor: "border-lime-300", bgColor: "bg-lime-50", }, { key: "DEPOSIT_PAID", label: "Deposit Paid", color: "bg-teal-500", borderColor: "border-teal-300", bgColor: "bg-teal-50", }, { key: "CONTRACT_SIGNED", label: "Contract Signed", color: "bg-cyan-500", borderColor: "border-cyan-300", bgColor: "bg-cyan-50", }, { key: "PAYMENT_PROCESSING", label: "Payment Processing", color: "bg-sky-500", borderColor: "border-sky-300", bgColor: "bg-sky-50", }, { key: "TX_COMPLETED", label: "Completed", color: "bg-emerald-500", borderColor: "border-emerald-300", bgColor: "bg-emerald-50", }, { key: "LOST", label: "Lost", color: "bg-red-500", borderColor: "border-red-300", bgColor: "bg-red-50", }, ]; // --------------------------------------------------------------------------- // Helpers // --------------------------------------------------------------------------- function showToast( type: "success" | "error" | "info" | "warning", title: string, message: string, ) { const event = new CustomEvent("showToast", { detail: { type, title, message }, }); window.dispatchEvent(event); } function formatCurrency(amount: number, currency: string) { return ( new Intl.NumberFormat("en-US", { style: "decimal", maximumFractionDigits: 0, }).format(amount) + ` ${currency}` ); } // --------------------------------------------------------------------------- // Component // --------------------------------------------------------------------------- export default function TransactionPipeline({ lang, }: TransactionPipelineProps) { const isAr = lang === "ar"; const [transactions, setTransactions] = useState([]); const [loading, setLoading] = useState(true); const [isRefreshing, setIsRefreshing] = useState(false); // New Transaction form const [showNewForm, setShowNewForm] = useState(false); const [newFormData, setNewFormData] = useState({ clientName: "", clientPhone: "", clientEmail: "", propertyId: "", propertyTitle: "", stage: "INQUIRY", offerAmount: "", currency: "QAR", notes: "", }); const [isSaving, setIsSaving] = useState(false); // Edit const [editingTransaction, setEditingTransaction] = useState(null); const [editStage, setEditStage] = useState(""); // Collapsed columns const [collapsedCols, setCollapsedCols] = useState>(new Set()); const fetchTransactions = useCallback(async () => { try { setLoading(true); const res = await fetch("/api/real-estate/transactions"); const data = await res.json(); if (data.success) { setTransactions(data.transactions || []); } } catch (error) { console.error("Failed to fetch transactions:", error); } finally { setLoading(false); } }, []); useEffect(() => { fetchTransactions(); }, [fetchTransactions]); const handleRefresh = async () => { setIsRefreshing(true); await fetchTransactions(); setTimeout(() => setIsRefreshing(false), 500); }; // Group by stage const byStage: Record = {}; STAGES.forEach((s) => { byStage[s.key] = []; }); transactions.forEach((t) => { if (byStage[t.stage]) { byStage[t.stage].push(t); } else { byStage["INQUIRY"].push(t); } }); // Pipeline summary const totalValue = transactions .filter((t) => t.offerAmount && t.stage !== "LOST") .reduce((sum, t) => sum + (t.offerAmount || 0), 0); const activeCount = transactions.filter( (t) => t.stage !== "TX_COMPLETED" && t.stage !== "LOST", ).length; const completedCount = transactions.filter( (t) => t.stage === "TX_COMPLETED", ).length; const lostCount = transactions.filter((t) => t.stage === "LOST").length; const toggleColumn = (key: string) => { setCollapsedCols((prev) => { const next = new Set(prev); if (next.has(key)) { next.delete(key); } else { next.add(key); } return next; }); }; // Move transaction to a different stage const moveTransaction = async (txId: string, newStage: string) => { try { const res = await fetchWithCSRF( `/api/real-estate/transactions/${txId}/stage`, { method: "PATCH", body: JSON.stringify({ stage: newStage }), }, ); const data = await res.json(); if (data.success) { setTransactions((prev) => prev.map((t) => t.id === txId ? { ...t, stage: newStage, daysInStage: 0 } : t, ), ); showToast( "success", "Stage Updated", `Transaction moved to ${STAGES.find((s) => s.key === newStage)?.label || newStage}`, ); } else { showToast("error", "Error", data.error || "Failed to move transaction"); } } catch (error) { console.error("Failed to move transaction:", error); showToast("error", "Error", "An error occurred"); } }; // Save new transaction const handleCreateTransaction = async () => { if (!newFormData.clientName.trim()) return; setIsSaving(true); try { const body = { clientName: newFormData.clientName.trim(), clientPhone: newFormData.clientPhone.trim() || null, clientEmail: newFormData.clientEmail.trim() || null, propertyId: newFormData.propertyId || null, stage: newFormData.stage, offerAmount: newFormData.offerAmount ? parseFloat(newFormData.offerAmount) : null, currency: newFormData.currency, notes: newFormData.notes.trim() || null, }; const res = await fetchWithCSRF("/api/real-estate/transactions", { method: "POST", body: JSON.stringify(body), }); const data = await res.json(); if (data.success) { showToast( "success", "Transaction Created", "New transaction added to pipeline", ); setShowNewForm(false); setNewFormData({ clientName: "", clientPhone: "", clientEmail: "", propertyId: "", propertyTitle: "", stage: "INQUIRY", offerAmount: "", currency: "QAR", notes: "", }); fetchTransactions(); } else { showToast( "error", "Error", data.error || "Failed to create transaction", ); } } catch (error) { console.error("Failed to create transaction:", error); } finally { setIsSaving(false); } }; return (
{/* Header */}

{isAr ? "خط أنابيب المعاملات" : "Transaction Pipeline"}

{isAr ? "تتبع الصفقات من الاستفسار إلى الإغلاق" : "Track deals from inquiry to closing"}

{/* Summary Stats */}

{isAr ? "قيمة خط الأنابيب" : "Pipeline Value"}

{formatCurrency(totalValue, "QAR")}

{isAr ? "صفقات نشطة" : "Active Deals"}

{activeCount}

{isAr ? "مكتملة" : "Completed"}

{completedCount}

{isAr ? "خسائر" : "Lost"}

{lostCount}

{/* Pipeline Content */}
{loading ? (
) : (
{STAGES.map((stage) => { const items = byStage[stage.key] || []; const stageValue = items .filter((t) => t.offerAmount) .reduce((s, t) => s + (t.offerAmount || 0), 0); const isCollapsed = collapsedCols.has(stage.key); return (
{/* Column Header */}
toggleColumn(stage.key)} > {isCollapsed ? (
{stage.label} {items.length}
) : (
{stage.label} {items.length}
{isCollapsed ? ( ) : ( )}
)} {!isCollapsed && stageValue > 0 && (

{formatCurrency(stageValue, "QAR")}

)}
{/* Column Body */} {!isCollapsed && (
{items.length === 0 ? (

{isAr ? "لا صفقات" : "No deals"}

) : ( items.map((tx) => (
{ setEditingTransaction(tx); setEditStage(tx.stage); }} >

{tx.clientName}

{tx.daysInStage}d

{tx.propertyTitle}

{tx.offerAmount != null && tx.offerAmount > 0 && (

{formatCurrency(tx.offerAmount, tx.currency)}

)}
)) )}
)}
); })}
)}
{/* New Transaction Modal */} {showNewForm && (
setShowNewForm(false)} >
e.stopPropagation()} >

{isAr ? "معاملة جديدة" : "New Transaction"}

setNewFormData((p) => ({ ...p, clientName: e.target.value, })) } placeholder="Enter client name" className="w-full h-11 px-4 rounded-xl border-2 border-slate-200 bg-slate-50/50 text-sm focus:border-brand-green focus:ring-4 focus:ring-brand-green/20 focus:outline-none transition-all" />
setNewFormData((p) => ({ ...p, clientPhone: e.target.value, })) } placeholder="+974 XXXX XXXX" className="w-full h-11 px-4 rounded-xl border-2 border-slate-200 bg-slate-50/50 text-sm focus:border-brand-green focus:ring-4 focus:ring-brand-green/20 focus:outline-none transition-all" dir="ltr" />
setNewFormData((p) => ({ ...p, clientEmail: e.target.value, })) } className="w-full h-11 px-4 rounded-xl border-2 border-slate-200 bg-slate-50/50 text-sm focus:border-brand-green focus:ring-4 focus:ring-brand-green/20 focus:outline-none transition-all" dir="ltr" />
setNewFormData((p) => ({ ...p, offerAmount: e.target.value, })) } placeholder="0" min="0" className="w-full h-11 px-4 rounded-xl border-2 border-slate-200 bg-slate-50/50 text-sm focus:border-brand-green focus:ring-4 focus:ring-brand-green/20 focus:outline-none transition-all" dir="ltr" />