PR G: portal /transactions page + 12-state machine view (#11)
Some checks failed
CI / Frontend Lint (push) Failing after 6s
CI / Frontend Type Check (push) Failing after 6s
CI / Frontend Build (push) Failing after 6s
CI / Frontend E2E Tests (push) Failing after 9s
CI / Orchestrator Build (push) Failing after 6s
CI / Contracts Compile (push) Failing after 6s
CI / Contracts Test (push) Failing after 6s
Security Scan / Dependency Vulnerability Scan (push) Failing after 4s
Security Scan / OWASP ZAP Scan (push) Failing after 4s

This commit was merged in pull request #11.
This commit is contained in:
2026-04-22 17:18:52 +00:00
parent 3ef71332dc
commit b66ec0a78f
7 changed files with 714 additions and 2 deletions

View File

@@ -3851,3 +3851,96 @@ html, body, #root {
border-radius: 4px;
color: var(--accent);
}
/* ================================================================= */
/* /transactions page (PR G — arch step 8) */
/* ================================================================= */
.transactions-page { padding: 24px; display: flex; flex-direction: column; gap: 20px; }
.transactions-page .back-button {
background: none; border: none; color: var(--accent);
cursor: pointer; font-size: 13px; padding: 0; margin-bottom: 8px;
}
.transactions-page .back-button:hover { text-decoration: underline; }
.source-badge {
font-size: 10px; letter-spacing: 0.08em; padding: 2px 8px;
border-radius: 10px; font-weight: 600; text-transform: uppercase;
}
.source-badge--live { background: rgba(34,197,94,0.15); color: #22c55e; }
.source-badge--degraded { background: rgba(239,68,68,0.15); color: #ef4444; }
.source-badge--mocked { background: rgba(148,163,184,0.20); color: #94a3b8; }
.portal-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.portal-table th, .portal-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid rgba(148,163,184,0.12); }
.portal-table th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: #94a3b8; font-weight: 600; }
.portal-table tbody tr { transition: background 0.12s ease; }
.portal-table .portal-table-row { cursor: pointer; }
.portal-table .portal-table-row:hover { background: rgba(99,102,241,0.06); }
.portal-table .mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
.portal-table .truncate { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-table .row-chevron { color: #64748b; }
.state-chip, .role-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 3px 10px; border-radius: 999px; font-size: 11px;
font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
background: rgba(99,102,241,0.14); color: #a5b4fc;
}
.state-chip--committed { background: rgba(34,197,94,0.15); color: #22c55e; }
.state-chip--aborted { background: rgba(239,68,68,0.15); color: #ef4444; }
.state-chip--validating,
.state-chip--executing,
.state-chip--partially_executed { background: rgba(245,158,11,0.15); color: #f59e0b; }
.state-chip--draft { background: rgba(148,163,184,0.18); color: #cbd5e1; }
.state-chip--closed { background: rgba(148,163,184,0.25); color: #e2e8f0; }
.role-chip--submitter { background: rgba(99,102,241,0.14); color: #a5b4fc; }
.role-chip--approver { background: rgba(245,158,11,0.14); color: #f59e0b; }
.role-chip--releaser { background: rgba(14,165,233,0.14); color: #38bdf8; }
.role-chip--validator { background: rgba(168,85,247,0.14); color: #c084fc; }
.role-chip--coordinator{ background: rgba(148,163,184,0.18); color: #cbd5e1; }
.state-machine-view { padding: 12px 8px 4px; }
.state-machine-grid {
display: grid; gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.state-pill {
display: flex; align-items: center; gap: 10px;
padding: 10px 14px; border-radius: 10px;
border: 1px solid rgba(148,163,184,0.18);
background: rgba(15,23,42,0.35); color: #e2e8f0;
font-size: 12px; font-weight: 500; letter-spacing: 0.03em;
}
.state-pill-dot {
width: 10px; height: 10px; border-radius: 50%;
background: rgba(148,163,184,0.45);
}
.state-pill--visited { border-color: rgba(99,102,241,0.35); }
.state-pill--visited .state-pill-dot { background: #818cf8; }
.state-pill--current {
border-color: #22c55e;
box-shadow: 0 0 0 2px rgba(34,197,94,0.18);
background: rgba(34,197,94,0.08);
}
.state-pill--current .state-pill-dot { background: #22c55e; }
.state-pill--pending { opacity: 0.55; }
.state-pill--terminal.state-pill--visited { border-color: #f59e0b; }
.state-machine-legend {
display: flex; gap: 16px; padding: 12px 4px 0;
font-size: 11px; color: #94a3b8;
}
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-item .dot { width: 8px; height: 8px; border-radius: 50%; }
.legend-item .dot--current { background: #22c55e; }
.legend-item .dot--visited { background: #818cf8; }
.legend-item .dot--pending { background: rgba(148,163,184,0.45); }
.loading-row, .empty-row { padding: 20px; color: #94a3b8; text-align: center; font-size: 13px; }
.error-banner {
padding: 10px 14px; border-radius: 8px; font-size: 12px;
background: rgba(239,68,68,0.10); color: #fca5a5;
border: 1px solid rgba(239,68,68,0.25); margin: 8px 0;
}
.muted { color: #94a3b8; }