addnew payments table
This commit is contained in:
Satyam-Rastogi
@@ -12,7 +12,7 @@ import {
|
||||
ArrowLeft, CheckCircle, Clock, AlertTriangle, PauseCircle, ShieldAlert,
|
||||
FileText, DollarSign, GitPullRequest, AlertCircle, Activity, Milestone,
|
||||
Shield, ChevronRight, Phone, MessageSquare, Mail, AlertOctagon, TrendingUp, Key, Zap, Camera, Plus, Map, User, Crosshair, Image as ImageIcon, MapPin,
|
||||
Upload, Trash2, Eye, Pencil, X as XIcon, FolderOpen, Download, File, StickyNote
|
||||
Upload, Trash2, Eye, Pencil, X as XIcon, FolderOpen, Download, File, StickyNote, Banknote, ChevronLeft, ChevronDown as ChevronDownIcon
|
||||
} from 'lucide-react';
|
||||
import ChangeOrderDrawer from '../../components/owner/ChangeOrderDrawer';
|
||||
import InvoiceDetailModal from '../../components/owner/InvoiceDetailModal';
|
||||
@@ -67,6 +67,7 @@ const tabs = [
|
||||
{ id: 'rfis', label: 'RFIs', icon: FileText },
|
||||
{ id: 'milestones', label: 'Milestones', icon: Milestone },
|
||||
{ id: 'invoices', label: 'Invoices', icon: DollarSign },
|
||||
{ id: 'payments', label: 'Payments', icon: Banknote },
|
||||
{ id: 'risks', label: 'Risk & Issues', icon: AlertCircle },
|
||||
{ id: 'activity', label: 'Activity', icon: Clock },
|
||||
{ id: 'docs', label: 'Docs', icon: FolderOpen },
|
||||
@@ -105,6 +106,21 @@ function seedDocsMock(projectId) {
|
||||
return all.slice(0, 4 + seed);
|
||||
}
|
||||
|
||||
function seedPaymentsMock(projectId) {
|
||||
const all = [
|
||||
{ id: 'pay_001', from: 'State Farm Insurance', method: 'ACH', amount: 18500, date: '2026-01-28', refNumber: 'ACH-2026-4411', memo: 'Initial claim payout — roof replacement' },
|
||||
{ id: 'pay_002', from: 'Justin Johnson', method: 'Check', amount: 2500, date: '2026-02-05', refNumber: 'CHK-8832', memo: 'Homeowner deductible payment' },
|
||||
{ id: 'pay_003', from: 'State Farm Insurance', method: 'ACH', amount: 6200, date: '2026-02-18', refNumber: 'ACH-2026-4499', memo: 'Supplement approval — additional scope' },
|
||||
{ id: 'pay_004', from: 'Justin Johnson', method: 'Credit Card', amount: 1800.50, date: '2026-03-01', refNumber: 'CC-9901', memo: 'Upgrade — premium underlayment' },
|
||||
{ id: 'pay_005', from: 'State Farm Insurance', method: 'Check', amount: 4100, date: '2026-03-12', refNumber: 'CHK-7761', memo: 'Final supplement payout' },
|
||||
{ id: 'pay_006', from: 'Justin Johnson', method: 'Cash', amount: 500, date: '2026-03-20', refNumber: '', memo: 'Gutter guard add-on' },
|
||||
];
|
||||
const seed = projectId.charCodeAt(projectId.length - 1) % 3;
|
||||
return all.slice(0, 3 + seed);
|
||||
}
|
||||
|
||||
const PAYMENTS_PER_PAGE = 5;
|
||||
|
||||
const OwnerProjectDetail = () => {
|
||||
const { projectId } = useParams();
|
||||
const { user } = useAuth();
|
||||
@@ -115,6 +131,11 @@ const OwnerProjectDetail = () => {
|
||||
const [selectedInvoice, setSelectedInvoice] = useState(null);
|
||||
const [createModalConfig, setCreateModalConfig] = useState(null);
|
||||
|
||||
// ── Payments state ─────────────────────────────────────────────────────────
|
||||
const [payments, setPayments] = useState(() => seedPaymentsMock(projectId));
|
||||
const [paymentSort, setPaymentSort] = useState({ field: 'date', dir: 'desc' });
|
||||
const [paymentPage, setPaymentPage] = useState(0);
|
||||
|
||||
// ── Docs state ────────────────────────────────────────────────────────────
|
||||
const [docs, setDocs] = useState(() => seedDocsMock(projectId));
|
||||
const [viewDoc, setViewDoc] = useState(null); // doc object being viewed
|
||||
@@ -160,6 +181,41 @@ const OwnerProjectDetail = () => {
|
||||
alert("Action successful! (Mock interface)");
|
||||
};
|
||||
|
||||
// ── Payment handlers ────────────────────────────────────────────────────
|
||||
const handleAddPayment = (data) => {
|
||||
const newPayment = {
|
||||
id: `pay_${Date.now()}`,
|
||||
from: data.from || '',
|
||||
method: data.method || 'Cash',
|
||||
amount: parseFloat(data.amount) || 0,
|
||||
date: data.date || new Date().toISOString().split('T')[0],
|
||||
refNumber: data.refNumber || '',
|
||||
memo: data.memo || '',
|
||||
};
|
||||
setPayments(prev => [newPayment, ...prev]);
|
||||
setPaymentPage(0);
|
||||
};
|
||||
|
||||
const togglePaymentSort = (field) => {
|
||||
setPaymentSort(prev => prev.field === field ? { field, dir: prev.dir === 'asc' ? 'desc' : 'asc' } : { field, dir: 'desc' });
|
||||
setPaymentPage(0);
|
||||
};
|
||||
|
||||
const sortedPayments = useMemo(() => {
|
||||
return [...payments].sort((a, b) => {
|
||||
if (paymentSort.field === 'amount') return paymentSort.dir === 'asc' ? a.amount - b.amount : b.amount - a.amount;
|
||||
if (paymentSort.field === 'date') return paymentSort.dir === 'asc' ? a.date.localeCompare(b.date) : b.date.localeCompare(a.date);
|
||||
return 0;
|
||||
});
|
||||
}, [payments, paymentSort]);
|
||||
|
||||
// Pagination logic for payments
|
||||
const paginatedPayments = sortedPayments.slice(paymentPage * PAYMENTS_PER_PAGE, (paymentPage + 1) * PAYMENTS_PER_PAGE);
|
||||
// Calculate total number of pages for pagination
|
||||
const totalPaymentPages = Math.ceil(sortedPayments.length / PAYMENTS_PER_PAGE);
|
||||
// Calculate total received payments
|
||||
const totalReceived = payments.reduce((sum, p) => sum + p.amount, 0);
|
||||
|
||||
const project = useMemo(() =>
|
||||
projects.find(p => p.id === projectId && p.ownerId === user?.id)
|
||||
, [projects, projectId, user]);
|
||||
@@ -846,6 +902,180 @@ const OwnerProjectDetail = () => {
|
||||
</NeoCard>
|
||||
)}
|
||||
|
||||
{/* PAYMENTS TAB */}
|
||||
{activeTab === 'payments' && (
|
||||
<div className="space-y-6 max-w-7xl mx-auto">
|
||||
{/* Summary Row */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
||||
<SpotlightCard className="p-4">
|
||||
<div className={`text-xl font-extrabold ${NEON_GREEN}`}>{formatCurrency(totalReceived)}</div>
|
||||
<div className="text-[10px] uppercase font-bold tracking-wider text-zinc-500 mt-1">Total Received</div>
|
||||
</SpotlightCard>
|
||||
<SpotlightCard className="p-4">
|
||||
<div className="text-xl font-extrabold text-zinc-900 dark:text-white">{payments.length}</div>
|
||||
<div className="text-[10px] uppercase font-bold tracking-wider text-zinc-500 mt-1">Payments</div>
|
||||
</SpotlightCard>
|
||||
<SpotlightCard className="p-4">
|
||||
<div className="text-xl font-extrabold text-zinc-900 dark:text-white font-mono">
|
||||
{payments.length > 0 ? [...payments].sort((a, b) => b.date.localeCompare(a.date))[0].date : '—'}
|
||||
</div>
|
||||
<div className="text-[10px] uppercase font-bold tracking-wider text-zinc-500 mt-1">Latest Payment</div>
|
||||
</SpotlightCard>
|
||||
</div>
|
||||
|
||||
{/* Payments Table */}
|
||||
<NeoCard spotlightColor="rgba(57, 255, 20, 0.1)" innerClassName="p-0 lg:p-0">
|
||||
<div className="p-5 border-b border-zinc-200 dark:border-white/5 flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<Banknote className={NEON_GREEN} size={20} />
|
||||
<h3 className="text-lg font-bold text-zinc-900 dark:text-white tracking-widest uppercase">Payments Received</h3>
|
||||
<span className="text-xs font-bold bg-zinc-100 dark:bg-white/5 border border-zinc-200 dark:border-white/5 px-2 py-0.5 rounded-full text-zinc-500 dark:text-zinc-400">
|
||||
{payments.length}
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setCreateModalConfig({
|
||||
title: 'Record Payment', icon: Banknote, iconColor: 'text-[#39ff14]', iconBg: 'bg-[#39ff14]/10',
|
||||
submitLabel: 'Save Payment', submitColor: 'bg-[#39ff14]/20 text-[#39ff14] border-[#39ff14]/30',
|
||||
fields: [
|
||||
{ name: 'from', label: 'From / Payer Name', type: 'text', required: true, placeholder: 'e.g. State Farm Insurance' },
|
||||
{ name: 'method', label: 'Payment Method', type: 'select', options: [{ label: 'Cash', value: 'Cash' }, { label: 'Check', value: 'Check' }, { label: 'ACH', value: 'ACH' }, { label: 'Credit Card', value: 'Credit Card' }, { label: 'Wire Transfer', value: 'Wire Transfer' }], required: true },
|
||||
{ name: 'amount', label: 'Amount ($)', type: 'number', required: true },
|
||||
{ name: 'date', label: 'Payment Date', type: 'date', required: true },
|
||||
{ name: 'refNumber', label: 'Check No. / Reference', type: 'text', placeholder: 'e.g. CHK-1234' },
|
||||
{ name: 'memo', label: 'Memo / Notes', type: 'textarea' },
|
||||
],
|
||||
onSubmit: handleAddPayment
|
||||
})}
|
||||
className="bg-[#39ff14]/10 hover:bg-[#39ff14]/20 text-green-600 dark:text-[#39ff14] border border-[#39ff14]/30 px-4 py-2 rounded-lg text-xs font-bold transition flex items-center gap-2"
|
||||
>
|
||||
<Plus size={14} /> Record Payment
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{payments.length > 0 ? (
|
||||
<>
|
||||
{/* Desktop Table */}
|
||||
<div className="overflow-x-auto w-full hidden md:block">
|
||||
<table className="w-full text-left border-collapse min-w-[800px]">
|
||||
<thead className="bg-zinc-100 dark:bg-[#18181b]/80 border-b border-zinc-200 dark:border-white/10">
|
||||
<tr>
|
||||
<th className="px-5 py-4 text-xs font-bold uppercase tracking-wider text-zinc-500 dark:text-zinc-400">From / Method</th>
|
||||
<th
|
||||
className="px-5 py-4 text-xs font-bold uppercase tracking-wider text-zinc-500 dark:text-zinc-400 text-right cursor-pointer hover:text-zinc-700 dark:hover:text-zinc-200 transition-colors select-none"
|
||||
onClick={() => togglePaymentSort('amount')}
|
||||
>
|
||||
Amount {paymentSort.field === 'amount' ? (paymentSort.dir === 'asc' ? '↑' : '↓') : ''}
|
||||
</th>
|
||||
<th
|
||||
className="px-5 py-4 text-xs font-bold uppercase tracking-wider text-zinc-500 dark:text-zinc-400 cursor-pointer hover:text-zinc-700 dark:hover:text-zinc-200 transition-colors select-none"
|
||||
onClick={() => togglePaymentSort('date')}
|
||||
>
|
||||
Date {paymentSort.field === 'date' ? (paymentSort.dir === 'asc' ? '↑' : '↓') : ''}
|
||||
</th>
|
||||
<th className="px-5 py-4 text-xs font-bold uppercase tracking-wider text-zinc-500 dark:text-zinc-400">Check No. / Ref</th>
|
||||
<th className="px-5 py-4 text-xs font-bold uppercase tracking-wider text-zinc-500 dark:text-zinc-400">Memo</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-zinc-100 dark:divide-white/5">
|
||||
{paginatedPayments.map((pay) => (
|
||||
<tr key={pay.id} className="hover:bg-zinc-50 dark:hover:bg-white/5 transition-colors">
|
||||
<td className="px-5 py-4">
|
||||
<div className="font-bold text-sm text-zinc-900 dark:text-white">{pay.from}</div>
|
||||
<span className={`inline-block mt-1 px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-widest ${
|
||||
pay.method === 'ACH' ? 'text-sky-600 dark:text-[#00f0ff] bg-sky-50 dark:bg-blue-500/10 border border-sky-200 dark:border-blue-500/20' :
|
||||
pay.method === 'Check' ? 'text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-500/10 border border-amber-200 dark:border-amber-500/20' :
|
||||
pay.method === 'Credit Card' ? 'text-purple-600 dark:text-purple-400 bg-purple-50 dark:bg-purple-500/10 border border-purple-200 dark:border-purple-500/20' :
|
||||
pay.method === 'Wire Transfer' ? 'text-emerald-600 dark:text-emerald-400 bg-emerald-50 dark:bg-emerald-500/10 border border-emerald-200 dark:border-emerald-500/20' :
|
||||
'text-zinc-600 dark:text-zinc-400 bg-zinc-100 dark:bg-white/5 border border-zinc-200 dark:border-white/10'
|
||||
}`}>
|
||||
{pay.method}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-5 py-4 text-right font-mono text-sm font-bold text-green-600 dark:text-[#39ff14]">
|
||||
{formatCurrency(pay.amount)}
|
||||
</td>
|
||||
<td className="px-5 py-4 text-sm text-zinc-500 dark:text-zinc-400 font-mono">{pay.date}</td>
|
||||
<td className="px-5 py-4 font-mono text-xs text-zinc-500 dark:text-zinc-400">{pay.refNumber || '—'}</td>
|
||||
<td className="px-5 py-4 text-xs text-zinc-500 dark:text-zinc-400 max-w-[200px] truncate">{pay.memo || '—'}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Mobile Card View */}
|
||||
<div className="md:hidden p-4 space-y-3">
|
||||
{paginatedPayments.map((pay) => (
|
||||
<div key={pay.id} className="bg-zinc-50 dark:bg-white/[0.03] border border-zinc-100 dark:border-white/[0.06] rounded-2xl p-4 space-y-3">
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<p className="font-bold text-sm text-zinc-900 dark:text-white">{pay.from}</p>
|
||||
<span className={`inline-block mt-1 px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-widest ${
|
||||
pay.method === 'ACH' ? 'text-sky-600 dark:text-[#00f0ff] bg-sky-50 dark:bg-blue-500/10 border border-sky-200 dark:border-blue-500/20' :
|
||||
pay.method === 'Check' ? 'text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-500/10 border border-amber-200 dark:border-amber-500/20' :
|
||||
pay.method === 'Credit Card' ? 'text-purple-600 dark:text-purple-400 bg-purple-50 dark:bg-purple-500/10 border border-purple-200 dark:border-purple-500/20' :
|
||||
pay.method === 'Wire Transfer' ? 'text-emerald-600 dark:text-emerald-400 bg-emerald-50 dark:bg-emerald-500/10 border border-emerald-200 dark:border-emerald-500/20' :
|
||||
'text-zinc-600 dark:text-zinc-400 bg-zinc-100 dark:bg-white/5 border border-zinc-200 dark:border-white/10'
|
||||
}`}>
|
||||
{pay.method}
|
||||
</span>
|
||||
</div>
|
||||
<span className="font-mono text-lg font-black text-green-600 dark:text-[#39ff14]">{formatCurrency(pay.amount)}</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-2 text-xs">
|
||||
<div>
|
||||
<span className="text-zinc-500 dark:text-zinc-500">Date</span>
|
||||
<p className="font-mono text-zinc-700 dark:text-zinc-300">{pay.date}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-zinc-500 dark:text-zinc-500">Ref #</span>
|
||||
<p className="font-mono text-zinc-700 dark:text-zinc-300">{pay.refNumber || '—'}</p>
|
||||
</div>
|
||||
</div>
|
||||
{pay.memo && (
|
||||
<p className="text-xs text-zinc-500 dark:text-zinc-400 border-t border-zinc-100 dark:border-white/5 pt-2">{pay.memo}</p>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Pagination */}
|
||||
{totalPaymentPages > 1 && (
|
||||
<div className="px-5 py-4 border-t border-zinc-200 dark:border-white/5 flex items-center justify-between">
|
||||
<p className="text-xs text-zinc-500 dark:text-zinc-400 font-mono">
|
||||
{paymentPage * PAYMENTS_PER_PAGE + 1}–{Math.min((paymentPage + 1) * PAYMENTS_PER_PAGE, sortedPayments.length)} of {sortedPayments.length}
|
||||
</p>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => setPaymentPage(p => Math.max(0, p - 1))}
|
||||
disabled={paymentPage === 0}
|
||||
className="p-2 rounded-lg bg-zinc-100 dark:bg-white/5 border border-zinc-200 dark:border-white/10 text-zinc-500 dark:text-zinc-400 hover:bg-zinc-200 dark:hover:bg-white/10 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
<ChevronLeft size={14} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setPaymentPage(p => Math.min(totalPaymentPages - 1, p + 1))}
|
||||
disabled={paymentPage >= totalPaymentPages - 1}
|
||||
className="p-2 rounded-lg bg-zinc-100 dark:bg-white/5 border border-zinc-200 dark:border-white/10 text-zinc-500 dark:text-zinc-400 hover:bg-zinc-200 dark:hover:bg-white/10 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
<ChevronRight size={14} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<div className="p-16 text-center text-zinc-500">
|
||||
<Banknote size={48} className="mx-auto mb-4 text-zinc-400 dark:text-zinc-600" />
|
||||
<p className="font-bold text-lg text-zinc-900 dark:text-white">No payments recorded yet.</p>
|
||||
<p className="text-sm mt-2 text-zinc-400">Record your first payment to start tracking.</p>
|
||||
</div>
|
||||
)}
|
||||
</NeoCard>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* RISK & ISSUES TAB */}
|
||||
{activeTab === 'risks' && (
|
||||
<div className="space-y-6">
|
||||
|
||||
Reference in New Issue
Block a user