adds subcontractor project history and payments table a amount column

This commit is contained in:
Satyam Rastogi
2026-05-20 19:32:55 +05:30
parent 6838d6c38e
commit ad39848b0f
@@ -258,6 +258,8 @@ const SubContractorDashboard = () => {
const status = t.paymentStatus === 'Paid'
? 'Paid'
: (requestedAt ? 'Requested' : 'Pending');
const expenses = (t.expenses || []).reduce((s, e) => s + (Number(e.amount) || 0), 0);
const fees = (t.fees || []).reduce((s, f) => s + (Number(f.amount) || 0), 0);
return {
id: t.id,
projectId: t.projectId || null,
@@ -265,6 +267,7 @@ const SubContractorDashboard = () => {
projectAddress: project?.address || t.location || '',
requestedAt,
receivedAt,
amount: expenses + fees,
note: t.title || '',
description: t.description || '',
status,
@@ -488,7 +491,7 @@ const SubContractorDashboard = () => {
</div>
) : (
<div className="overflow-x-auto rounded-xl border border-zinc-200 dark:border-white/5">
<table className="w-full text-left min-w-[840px]">
<table className="w-full text-left min-w-[940px]">
<thead>
<tr className="border-b border-zinc-200 dark:border-white/5 bg-zinc-50 dark:bg-white/[0.02]">
<th className="px-4 py-2.5 text-[10px] font-mono font-bold text-zinc-500 uppercase tracking-widest">Project ID</th>
@@ -505,6 +508,7 @@ const SubContractorDashboard = () => {
</button>
</th>
<th className="px-4 py-2.5 text-[10px] font-mono font-bold text-zinc-500 uppercase tracking-widest">Received</th>
<th className="px-4 py-2.5 text-[10px] font-mono font-bold text-zinc-500 uppercase tracking-widest text-right">Amount</th>
<th className="px-4 py-2.5 text-[10px] font-mono font-bold text-zinc-500 uppercase tracking-widest">Note</th>
<th className="px-4 py-2.5 text-[10px] font-mono font-bold text-zinc-500 uppercase tracking-widest">Status</th>
</tr>
@@ -554,6 +558,11 @@ const SubContractorDashboard = () => {
{row.receivedAt ? new Date(row.receivedAt).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }) : 'Not received'}
</span>
</td>
<td className="px-4 py-3 text-right">
<span className={`font-mono text-xs font-bold whitespace-nowrap ${row.amount > 0 ? (row.status === 'Paid' ? 'text-emerald-600 dark:text-emerald-400' : 'text-amber-600 dark:text-amber-400') : 'text-zinc-400 dark:text-zinc-500'}`}>
{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }).format(row.amount)}
</span>
</td>
<td className="px-4 py-3">
<button
type="button"
@@ -633,7 +642,7 @@ const SubContractorDashboard = () => {
<div className="text-xs text-zinc-500 dark:text-zinc-400 mt-0.5">{noteModal.projectAddress}</div>
)}
</div>
<div className="grid grid-cols-2 gap-3 text-sm">
<div className="grid grid-cols-3 gap-3 text-sm">
<div className="p-3 rounded-xl bg-zinc-50 dark:bg-white/5 border border-zinc-200 dark:border-white/5">
<div className="text-[10px] uppercase font-bold tracking-wider text-zinc-500 mb-1">Requested</div>
<div className="font-mono text-zinc-900 dark:text-white">
@@ -646,6 +655,12 @@ const SubContractorDashboard = () => {
{noteModal.receivedAt ? new Date(noteModal.receivedAt).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }) : 'Not received'}
</div>
</div>
<div className="p-3 rounded-xl bg-zinc-50 dark:bg-white/5 border border-zinc-200 dark:border-white/5">
<div className="text-[10px] uppercase font-bold tracking-wider text-zinc-500 mb-1">Amount</div>
<div className={`font-mono font-bold ${noteModal.amount > 0 ? (noteModal.status === 'Paid' ? 'text-emerald-600 dark:text-emerald-400' : 'text-amber-600 dark:text-amber-400') : 'text-zinc-400'}`}>
{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }).format(noteModal.amount || 0)}
</div>
</div>
</div>
<div>
<div className="text-[10px] uppercase font-bold tracking-wider text-zinc-500 mb-1">Note</div>