{/* Header */}
ERP Transactions
Synced 14m ago · QuickBooks · Sage Intacct · Procore
All financial and operational transactions linked to this project via the Project Dimension.
{/* Summary cards */}
t.type==="invoice").length} invoices`} />
["bill","labor","sub","inventory"].includes(t.type)).length} entries`} />
t.type==="po"&&t.status==="Approved").length} open POs`} />
["Open","Pending"].includes(t.status)&&TX_TYPES[t.type].flow==="cost").length} bills awaiting`} />
=0?"revenue":"cost"} delta={`${marginPct}%`} deltaTone={marginPct>=15?"success":"warning"} icon="dollar" sub="Revenue − Cost" highlight />
{/* Toolbar — type multiselect + secondary filters + search */}
$500k"]} onChange={setAmountFilter} icon="dollar" />
{(activeTypes.length > 1 || (!activeTypes.includes("all") && activeTypes.length === 1) || statusFilter !== "All" || partyFilter !== "All" || amountFilter !== "All") && (
)}
setSearch(e.target.value)} placeholder="Search ID, vendor, description…" style={{
width: "100%", boxSizing: "border-box", paddingLeft: 30, paddingRight: 10, height: 30, borderRadius: 9999,
border: "1px solid rgb(213,219,225)", fontSize: 13, fontFamily: "inherit", outline: "none", background: "#fff"
}} />
{/* Result count */}
{filtered.length} of {ERP_TX.length} transactions
Revenue
Cost
Commitment
{/* Table */}
{filtered.length === 0 ? (
{ setActiveTypes(["all"]); setStatusFilter("All"); setPartyFilter("All"); setAmountFilter("All"); setSearch(""); }} />
) : (
Type / Number
Date
Vendor / Customer
Description
Amount
Status
By
{filtered.map((t, i) => {
const ty = TX_TYPES[t.type];
const isSel = selectedTx?.id === t.id;
return (
setSelectedTx(t)} style={{
display: "grid",
gridTemplateColumns: "170px 86px minmax(0, 1fr) minmax(0, 1.3fr) 110px 90px 36px 36px",
padding: "12px 16px", gap: 12, alignItems: "center",
borderBottom: i < filtered.length - 1 ? "1px solid rgb(239,240,242)" : "none",
fontSize: 13, cursor: "pointer", transition: "background 120ms",
background: isSel ? "rgb(248,248,251)" : "#fff",
borderLeft: isSel ? "3px solid rgb(83,74,255)" : "3px solid transparent",
paddingLeft: isSel ? 13 : 16
}}
onMouseEnter={e => { if (!isSel) e.currentTarget.style.background = "rgb(252,252,253)"; }}
onMouseLeave={e => { if (!isSel) e.currentTarget.style.background = "#fff"; }}>
{formatShortDate(t.date)}
{t.party}
{t.description}
{t.scope &&
{t.scope}
}
{flowSign(ty.flow)}{fmtMoney(t.amount)}
{t.status}
{open && (
Filter by type
{!allActive && (
)}
onToggle("all")}
icon={null} label="All transactions" count={counts.all} />
{Object.entries(TX_TYPES).map(([id, t]) => (
onToggle(id)}
icon={t.icon} iconColor={t.color}
label={t.label} count={counts[id] || 0} />
))}
)}
);
};
const TypeRow = ({ checked, onClick, icon, iconColor, label, count }) => (
e.stopPropagation()} style={{
width: 560, maxWidth: "100vw", height: "100%", background: "#fff",
boxShadow: "-12px 0 40px rgba(15,23,42,.16)",
display: "flex", flexDirection: "column", overflow: "hidden",
animation: "slideIn 240ms cubic-bezier(.2,.6,.2,1)"
}}>
{/* Header */}
{tx.status}
{formatShortDate(tx.date)}
via {tx.erp}
{/* Body */}
{/* Amount banner */}
{ty.flow === "revenue" ? "Revenue" : ty.flow === "cost" ? "Cost" : ty.flow === "commit" ? "Commitment" : "Amount"}
{flowSign(ty.flow)}{fmtMoney(tx.amount)}
{/* Detail grid */}
{/* Description */}
Description
{tx.description}
{/* Line items */}
{lineItems.length > 0 && (
Line items ({lineItems.length})
{lineItems.map((li, i) => (
{li.desc}
{li.qty}
{fmtMoney(li.unit)}
{fmtMoney(li.total)}
))}
)}
{/* Linked records */}
Linked records
{linkedFor(tx).map((l, i) => (
))}
{/* Activity timeline */}
Activity
{timeline.map((ev, i) => (
{i < timeline.length - 1 &&
}
))}
{/* Footer */}
Synced from {tx.erp}
);
};
const DetailField = ({ label, value, icon, mono, avatar }) => (