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
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:
@@ -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; }
|
||||
|
||||
Reference in New Issue
Block a user