fix: crash bugs in TeamInvoices + faster load
Bug fixes: - TeamInvoices: add useAuth import/currentUser (invoice-create crash) - TeamInvoices: setChartYear -> setExportYear (year-dropdown crash) - TeamDashboard: drop redundant setState-in-effect (cascading renders) - Companies: delete dead _UnusedClientCompanies (illegal hook calls) - annotate intentional empty PDF-fallback catches Load speed: - preconnect/dns-prefetch to Supabase origin - lazy-load heic-to in Converters: page chunk 2737KB -> 9KB - split recharts into its own 'charts' vendor chunk Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Krao Hasanee
@@ -0,0 +1,339 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Fourge Portal Finance Summary</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg: #ffffff;
|
||||
--text: #161616;
|
||||
--muted: #5e5e5e;
|
||||
--accent: #f5a523;
|
||||
--border: #e5dccf;
|
||||
--surface: #faf7f2;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
color: var(--text);
|
||||
background: var(--bg);
|
||||
line-height: 1.45;
|
||||
}
|
||||
.page {
|
||||
width: 100%;
|
||||
max-width: 920px;
|
||||
margin: 0 auto;
|
||||
padding: 44px 40px 56px;
|
||||
}
|
||||
.hero {
|
||||
border: 1px solid var(--border);
|
||||
background: linear-gradient(135deg, #fffaf2 0%, #ffffff 55%, #fff5e2 100%);
|
||||
border-radius: 16px;
|
||||
padding: 28px 30px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
h1 {
|
||||
margin: 0 0 8px;
|
||||
font-size: 30px;
|
||||
line-height: 1.1;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.03em;
|
||||
}
|
||||
.sub {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
font-size: 14px;
|
||||
}
|
||||
h2 {
|
||||
margin: 28px 0 10px;
|
||||
font-size: 19px;
|
||||
line-height: 1.15;
|
||||
}
|
||||
h3 {
|
||||
margin: 0 0 8px;
|
||||
font-size: 15px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: #7d6d58;
|
||||
}
|
||||
p { margin: 0 0 12px; }
|
||||
ul {
|
||||
margin: 0;
|
||||
padding-left: 18px;
|
||||
}
|
||||
li { margin: 0 0 6px; }
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
.card {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 14px;
|
||||
background: var(--surface);
|
||||
padding: 16px 16px 14px;
|
||||
}
|
||||
.card p:last-child,
|
||||
.flow-box p:last-child { margin-bottom: 0; }
|
||||
.flow {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
.flow-box {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 14px 16px;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
}
|
||||
.flow-box + .flow-box::before {
|
||||
content: "↓";
|
||||
position: absolute;
|
||||
top: -18px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
color: var(--accent);
|
||||
font-weight: 700;
|
||||
}
|
||||
.pill {
|
||||
display: inline-block;
|
||||
padding: 4px 8px;
|
||||
border-radius: 999px;
|
||||
background: #fff4dd;
|
||||
border: 1px solid #f3d194;
|
||||
font-size: 12px;
|
||||
margin: 0 6px 6px 0;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 10px;
|
||||
font-size: 13px;
|
||||
}
|
||||
th, td {
|
||||
text-align: left;
|
||||
padding: 10px 8px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
vertical-align: top;
|
||||
}
|
||||
th {
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--muted);
|
||||
font-weight: 700;
|
||||
}
|
||||
.code {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
font-size: 12px;
|
||||
background: #fff;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
padding: 12px 14px;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.footer {
|
||||
margin-top: 28px;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
@media print {
|
||||
.page { padding: 24px 24px 36px; }
|
||||
.hero, .card, .flow-box { break-inside: avoid; }
|
||||
h2, h3 { break-after: avoid; }
|
||||
table { break-inside: avoid; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="page">
|
||||
<section class="hero">
|
||||
<h1>Fourge Portal Finance Summary</h1>
|
||||
<p class="sub">Role cheat sheet, finance lanes, and data flow for team, client, and subcontractor users.</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>1. Executive Summary</h2>
|
||||
<p>The finance area is not one shared page for all roles. It is split into three lanes with different permissions and different page sets.</p>
|
||||
<div class="grid">
|
||||
<article class="card">
|
||||
<h3>Team</h3>
|
||||
<p>Full finance hub at <strong>/invoices</strong>.</p>
|
||||
<p>Handles client invoices, expenses, subcontractor invoices, and subcontractor purchase orders.</p>
|
||||
</article>
|
||||
<article class="card">
|
||||
<h3>Client</h3>
|
||||
<p>Invoice-only lane at <strong>/my-invoices</strong>.</p>
|
||||
<p>Clients can view invoices, filter by company, and download PDFs.</p>
|
||||
</article>
|
||||
<article class="card">
|
||||
<h3>Subcontractor</h3>
|
||||
<p>Two finance lanes: <strong>/my-invoices-sub</strong> and <strong>/my-purchase-orders</strong>.</p>
|
||||
<p>They can submit invoices to Fourge and approve POs sent by Fourge.</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>2. Role-by-Role Cheat Sheet</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Role</th>
|
||||
<th>Main Routes</th>
|
||||
<th>Can Do</th>
|
||||
<th>Cannot Do</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><strong>Team</strong></td>
|
||||
<td>/invoices</td>
|
||||
<td>Create/send client invoices, track expenses, create POs, review subcontractor invoices, mark paid, export/send PDFs</td>
|
||||
<td>Not limited in finance UI</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Client</strong></td>
|
||||
<td>/my-invoices</td>
|
||||
<td>View invoices, filter by company, download invoice PDFs</td>
|
||||
<td>No expenses, no invoice editing, no POs, no subcontractor finance tools</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Subcontractor / External</strong></td>
|
||||
<td>/my-invoices-sub<br>/my-purchase-orders</td>
|
||||
<td>Create/submit invoices to Fourge, view status, download receipts after payment, approve POs</td>
|
||||
<td>No team finance overview, no client invoice management, no internal expenses</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>3. Core Data Models</h2>
|
||||
<div class="card">
|
||||
<div class="pill">invoices</div>
|
||||
<div class="pill">invoice_items</div>
|
||||
<div class="pill">expenses</div>
|
||||
<div class="pill">subcontractor_invoices</div>
|
||||
<div class="pill">subcontractor_invoice_items</div>
|
||||
<div class="pill">subcontractor_payments</div>
|
||||
<div class="pill">subcontractor_po_items</div>
|
||||
<div class="pill">tasks</div>
|
||||
<div class="pill">submissions</div>
|
||||
<div class="pill">companies</div>
|
||||
<div class="pill">profiles</div>
|
||||
<p style="margin-top:10px;">Simple mental model: <strong>invoices</strong> bill clients, <strong>expenses</strong> track internal costs, <strong>subcontractor_invoices</strong> let subcontractors bill Fourge, and <strong>subcontractor_payments</strong> are POs Fourge sends to subcontractors.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>4. System Flow</h2>
|
||||
<div class="flow">
|
||||
<div class="flow-box">
|
||||
<h3>Client Billing Flow</h3>
|
||||
<p>Approved client work reaches <strong>tasks.status = client_approved</strong>.</p>
|
||||
<p>Team finance loads uninvoiced tasks and revisions, builds line items, saves an invoice, and emails the PDF to the client.</p>
|
||||
<p>Later, team marks the invoice paid.</p>
|
||||
</div>
|
||||
<div class="flow-box">
|
||||
<h3>Expense Flow</h3>
|
||||
<p>Team logs expenses, optionally with receipt files.</p>
|
||||
<p>Expenses feed overview charts, yearly summaries, and profit calculations.</p>
|
||||
</div>
|
||||
<div class="flow-box">
|
||||
<h3>Subcontractor Invoice Flow</h3>
|
||||
<p>Subcontractor creates an invoice from completed approved tasks assigned to them.</p>
|
||||
<p>Fourge reviews it, then marks it paid and sends a receipt PDF back.</p>
|
||||
</div>
|
||||
<div class="flow-box">
|
||||
<h3>Purchase Order Flow</h3>
|
||||
<p>Team creates a PO for a subcontractor, optionally tied to project tasks.</p>
|
||||
<p>Subcontractor reviews the PO and can approve it from their own portal view.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>5. Status Logic</h2>
|
||||
<div class="grid">
|
||||
<article class="card">
|
||||
<h3>Client Invoice</h3>
|
||||
<p><strong>draft</strong> → <strong>sent</strong> → <strong>paid</strong></p>
|
||||
</article>
|
||||
<article class="card">
|
||||
<h3>Subcontractor Invoice</h3>
|
||||
<p><strong>draft</strong> → <strong>submitted</strong> → <strong>paid</strong></p>
|
||||
</article>
|
||||
<article class="card">
|
||||
<h3>Purchase Order</h3>
|
||||
<p><strong>draft</strong> → <strong>sent</strong> → <strong>approved</strong> → <strong>ready_to_pay</strong> → <strong>paid</strong></p>
|
||||
<p><strong>cancelled</strong> is exit state.</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>6. Key Business Rules</h2>
|
||||
<ul>
|
||||
<li>Client invoices only pull approved, uninvoiced work.</li>
|
||||
<li>Tasks and revisions are marked invoiced after invoice creation.</li>
|
||||
<li>Deleting a team invoice rolls linked invoice flags back.</li>
|
||||
<li>Team invoice status changes also push task status changes.</li>
|
||||
<li>Revision billing rule: <strong>R00 = new work</strong>, <strong>R01 = free</strong>, <strong>R02+ = billable increments</strong>.</li>
|
||||
<li>Subcontractor invoices are created by the external user and then reviewed/paid by team.</li>
|
||||
<li>POs are created by team and approved by the subcontractor.</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>7. Database Relationship Chart</h2>
|
||||
<div class="code">COMPANIES
|
||||
└─ invoices
|
||||
└─ invoice_items
|
||||
├─ task_id → tasks
|
||||
└─ submission_id → submissions
|
||||
|
||||
PROJECTS
|
||||
└─ tasks
|
||||
└─ submissions
|
||||
|
||||
PROFILES (external)
|
||||
├─ subcontractor_invoices
|
||||
│ └─ subcontractor_invoice_items
|
||||
│ └─ task_id → tasks
|
||||
└─ subcontractor_payments (POs)
|
||||
└─ subcontractor_po_items
|
||||
└─ task_id → tasks
|
||||
|
||||
EXPENSES
|
||||
└─ standalone internal finance records</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>8. Quick Route Map</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Surface</th>
|
||||
<th>Route</th>
|
||||
<th>User</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>Finance Hub</td><td>/invoices</td><td>Team</td></tr>
|
||||
<tr><td>Client Invoices</td><td>/my-invoices</td><td>Client</td></tr>
|
||||
<tr><td>Subcontractor Invoices</td><td>/my-invoices-sub</td><td>External</td></tr>
|
||||
<tr><td>Create Subcontractor Invoice</td><td>/my-invoices-sub/new</td><td>External</td></tr>
|
||||
<tr><td>Purchase Orders</td><td>/my-purchase-orders</td><td>External</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<p class="footer">Generated from current portal codebase summary on June 3, 2026.</p>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user