krao/fourge-portal
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: finance page overhaul — pie charts, month nav, tab improvements

Browse Source 
- Overview tab: 3 donut pie charts (expenses by category, sub payments, invoiced) each with independent month navigation arrows
- Expenses tab: big red total in category sidebar, left-aligned category column, white text
- Subcontractors tab: big gold total in sidebar, pending/paid breakdown with gold highlight
- Invoices tab: big green total in companies sidebar, dashboard-inline-link for invoice# and company, StatusBadge with Invoiced/Paid labels, column widths tuned
- StatusBadge: add optional label prop for custom display text
- Layout/style polish across tabs

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Krao Hasanee
2026-06-01 20:14:14 -04:00
parent ac3f08122d
commit 986d831186
13 changed files with 604 additions and 305 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/index.css
+73 -7
View File
@@ -1081,12 +1081,16 @@ textarea {
/* Badges */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 4px; font-size: 11px; font-weight: 400; white-space: nowrap; letter-spacing: 0.3px; }
.badge-status {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 78px;
height: 20px;
justify-content: center;
padding: 0 8px;
font-size: 10px;
line-height: 1;
line-height: 1.05;
box-sizing: border-box;
padding-top: 1px; /* optical center correction for Fourge font metrics */
}
.badge-not_started { background: #222; color: #888; border: 1px solid #333; }
.badge-in_progress { background: rgba(37,99,235,0.15); color: #60a5fa; border: 1px solid rgba(37,99,235,0.3); }
@@ -1138,14 +1142,29 @@ tr:hover td { background: rgba(255,255,255,0.02); }
color: inherit;
text-decoration: none;
font-weight: 400;
transition: color 0.15s;
transition: color 0.15s, opacity 0.15s;
cursor: pointer;
display: inline-block;
}
.table-link:hover,
.table-link:focus-visible {
color: var(--accent) !important;
opacity: 1;
text-decoration: none;
outline: none;
}
a.table-link:hover,
span.table-link:hover,
button.table-link:hover,
a.table-link:focus-visible,
span.table-link:focus-visible,
button.table-link:focus-visible {
color: var(--accent) !important;
text-decoration: none !important;
}
tbody tr:hover .table-link {
color: var(--accent) !important;
}
.table-sticky-head thead th {
position: sticky;
@@ -1207,13 +1226,22 @@ tr:hover td { background: rgba(255,255,255,0.02); }
text-align: inherit;
cursor: pointer;
text-decoration: none;
transition: color 0.15s;
transition: color 0.15s, opacity 0.15s;
}
.dashboard-inline-link:hover,
.dashboard-inline-link:focus-visible {
color: var(--accent) !important;
opacity: 1;
text-decoration: none;
outline: none;
}
button.dashboard-inline-link:hover,
a.dashboard-inline-link:hover,
button.dashboard-inline-link:focus-visible,
a.dashboard-inline-link:focus-visible {
color: var(--accent) !important;
text-decoration: none !important;
}
/* Forms */
.form-group { margin-bottom: 18px; }
@@ -1668,6 +1696,38 @@ select option { background: #222; color: #fff; }
.tab-btn:hover { border-color: var(--interactive-hover-border); color: var(--text-secondary); }
.tab-btn.active { background: var(--accent); border-color: var(--accent); color: #000; font-weight: 400; }
/* Shared section tabs (Tasks / Projects / Finances / Detail tabs) */
.section-tab-btn {
font-family: 'Fourge', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.2px;
padding: 2px 0 5px;
margin: 0 8px;
border-radius: 0;
border: none;
border-bottom: 2px solid transparent;
cursor: pointer;
background: transparent;
color: var(--text-secondary);
transition: all 160ms;
}
.section-tab-btn:hover,
.section-tab-btn:focus-visible {
color: var(--accent);
border-bottom-color: var(--accent);
outline: none;
}
button.section-tab-btn:hover,
button.section-tab-btn:focus-visible {
color: var(--accent) !important;
border-bottom-color: var(--accent) !important;
}
.section-tab-btn.is-active {
color: var(--text-primary);
border-bottom-color: var(--accent);
}
/* Rebuilt hover system (single source of truth) */
.sidebar-link:hover {
background-color: #1f1f1f;
@@ -1682,6 +1742,14 @@ select option { background: #222; color: #fff; }
.site-header-avatar-item:hover {
color: var(--accent);
}
[data-theme="dark"] .site-header-avatar-item:hover {
background-color: rgba(255,255,255,0.08);
border-color: rgba(255,255,255,0.12);
}
[data-theme="light"] .site-header-avatar-item:hover {
background-color: rgba(0,0,0,0.06);
border-color: rgba(0,0,0,0.1);
}
[data-theme="dark"] .sidebar-link:hover {
background-color: #1f1f1f;
border-color: rgba(255,255,255,0.08);
@@ -1700,6 +1768,4 @@ select option { background: #222; color: #fff; }
border-color: rgba(0,0,0,0.18);
color: #0d0d0d;
}
[data-theme="light"] .site-header-avatar-item:hover {
color: var(--accent);
}
[data-theme="light"] .site-header-avatar-item:hover { color: var(--accent); }