feat: dashboard is added
This commit is contained in:
parent
8b790b7601
commit
09fc5dc367
5 changed files with 892 additions and 1 deletions
|
|
@ -1575,3 +1575,397 @@ button { font-family: inherit; cursor: pointer; }
|
|||
background: var(--paper);
|
||||
}
|
||||
.entity-radio-item:hover { background: var(--paper); }
|
||||
|
||||
/* =========================================================================
|
||||
DASHBOARD / OVERVIEW SCREEN
|
||||
========================================================================= */
|
||||
.dashboard-screen {
|
||||
padding: 24px;
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
}
|
||||
.screen-eyebrow {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.16em;
|
||||
color: var(--fg-subtle);
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
/* ---- KPI row -------------------------------------------------------- */
|
||||
.dash-stat-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.dash-stat {
|
||||
background: var(--paper);
|
||||
border: 1px solid var(--rule);
|
||||
border-radius: var(--r-md);
|
||||
padding: 14px 16px 12px;
|
||||
display: flex; flex-direction: column;
|
||||
gap: 10px;
|
||||
min-height: 116px;
|
||||
}
|
||||
.dash-stat-eyebrow {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 9.5px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.16em;
|
||||
color: var(--fg-subtle);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.dash-stat-value-row {
|
||||
display: flex; align-items: flex-end; justify-content: space-between;
|
||||
gap: 8px;
|
||||
}
|
||||
.dash-stat-value {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 26px;
|
||||
font-weight: 500;
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: var(--fg-strong);
|
||||
line-height: 1;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
.dash-stat-unit {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: var(--fg-subtle);
|
||||
margin-left: 4px;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.dash-stat-foot {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10.5px;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--fg-muted);
|
||||
margin-top: auto;
|
||||
padding-top: 4px;
|
||||
border-top: 1px dashed var(--rule);
|
||||
}
|
||||
.dash-delta {
|
||||
display: inline-flex; align-items: center; gap: 3px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.dash-delta.up { color: var(--conf-rules); }
|
||||
.dash-delta.down { color: var(--conf-low); }
|
||||
.dash-delta.flat { color: var(--fg-muted); }
|
||||
.dash-delta .arrow { font-weight: 600; }
|
||||
.dash-stat-foot-note {
|
||||
color: var(--fg-subtle);
|
||||
margin-left: auto;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.spark { display: block; }
|
||||
|
||||
/* ---- Generic dash card --------------------------------------------- */
|
||||
.dash-card {
|
||||
background: var(--paper);
|
||||
border: 1px solid var(--rule);
|
||||
border-radius: var(--r-md);
|
||||
padding: 16px 20px;
|
||||
display: flex; flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
.dash-card-tall { min-height: 360px; }
|
||||
|
||||
.dash-card-head {
|
||||
display: flex; align-items: flex-start; justify-content: space-between;
|
||||
gap: 16px;
|
||||
}
|
||||
.dash-card-eyebrow {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 9.5px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.16em;
|
||||
color: var(--fg-subtle);
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.dash-card-title {
|
||||
font-family: var(--font-sans);
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: var(--fg-strong);
|
||||
letter-spacing: -0.005em;
|
||||
}
|
||||
.dash-card-title .pos { color: var(--conf-rules); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
|
||||
.dash-card-title .neg { color: var(--fg-strong); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
|
||||
.dash-card-title .ccy { color: var(--fg-subtle); font-weight: 400; font-size: 12px; }
|
||||
.dash-card-title .ccy:not(:first-child) { margin-left: 2px; }
|
||||
.dash-card-legend {
|
||||
display: flex; align-items: center; gap: 6px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 9.5px;
|
||||
letter-spacing: 0.16em;
|
||||
color: var(--fg-subtle);
|
||||
}
|
||||
.dash-card-legend .lg-dot {
|
||||
display: inline-block;
|
||||
width: 8px; height: 8px;
|
||||
border-radius: 1px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
.dash-card-action {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.14em;
|
||||
color: var(--fg-muted);
|
||||
}
|
||||
.dash-card-action:hover { color: var(--fg-strong); }
|
||||
|
||||
/* ---- Cashflow chart ------------------------------------------------- */
|
||||
.dash-chart-wrap {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
min-height: 200px;
|
||||
}
|
||||
.chart-svg {
|
||||
width: 100%;
|
||||
height: 240px;
|
||||
display: block;
|
||||
overflow: visible;
|
||||
}
|
||||
.axis-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 9.5px;
|
||||
fill: var(--fg-subtle);
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
.dash-card-foot {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 12px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid var(--rule);
|
||||
}
|
||||
.dash-foot-cell { display: flex; flex-direction: column; gap: 4px; }
|
||||
.dash-foot-lbl {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 9.5px;
|
||||
letter-spacing: 0.16em;
|
||||
color: var(--fg-subtle);
|
||||
}
|
||||
.dash-foot-val {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: var(--fg-strong);
|
||||
}
|
||||
.dash-foot-val.pos { color: var(--conf-rules); }
|
||||
.dash-foot-val .ccy { color: var(--fg-subtle); font-weight: 400; font-size: 11px; margin-left: 2px; }
|
||||
|
||||
/* ---- Donut ---------------------------------------------------------- */
|
||||
.dash-donut-wrap {
|
||||
display: flex; align-items: center; gap: 24px;
|
||||
flex: 1;
|
||||
padding: 8px 0;
|
||||
}
|
||||
.donut { flex-shrink: 0; }
|
||||
.donut-num {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
fill: var(--fg-strong);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.donut-lbl {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 8px;
|
||||
letter-spacing: 0.18em;
|
||||
fill: var(--fg-subtle);
|
||||
}
|
||||
.dash-donut-legend {
|
||||
flex: 1;
|
||||
display: flex; flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
.dash-legend-row {
|
||||
display: grid;
|
||||
grid-template-columns: 56px 1fr auto;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 4px 0;
|
||||
border-bottom: 1px dashed var(--rule);
|
||||
}
|
||||
.dash-legend-row:last-child { border-bottom: none; }
|
||||
.dash-legend-lbl {
|
||||
font-family: var(--font-sans);
|
||||
font-size: 12.5px;
|
||||
color: var(--fg);
|
||||
}
|
||||
.dash-legend-num {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: var(--fg-strong);
|
||||
}
|
||||
|
||||
/* ---- Two-column grids ---------------------------------------------- */
|
||||
.dash-grid-main {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.dash-grid-secondary {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* ---- Category bars -------------------------------------------------- */
|
||||
.dash-bars {
|
||||
display: flex; flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
.dash-bar-row {
|
||||
display: grid;
|
||||
grid-template-columns: 140px 1fr 140px 44px;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 7px 0;
|
||||
border-bottom: 1px solid var(--rule);
|
||||
}
|
||||
.dash-bar-row:last-child { border-bottom: none; }
|
||||
.dash-bar-lbl {
|
||||
font-family: var(--font-sans);
|
||||
font-size: 12.5px;
|
||||
color: var(--fg);
|
||||
}
|
||||
.dash-bar-track {
|
||||
position: relative;
|
||||
height: 8px;
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--rule);
|
||||
border-radius: 1px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.dash-bar-fill {
|
||||
height: 100%;
|
||||
background: var(--fg-strong);
|
||||
transition: width var(--dur-slow) var(--ease);
|
||||
}
|
||||
.dash-bar-amt {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: var(--fg);
|
||||
text-align: right;
|
||||
}
|
||||
.dash-bar-amt .ccy { color: var(--fg-subtle); }
|
||||
.dash-bar-pct {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: var(--fg-subtle);
|
||||
text-align: right;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
/* ---- Entity stacked --------------------------------------------- */
|
||||
.dash-stacked {
|
||||
display: flex;
|
||||
height: 28px;
|
||||
width: 100%;
|
||||
border: 1px solid var(--rule);
|
||||
border-radius: var(--r-sm);
|
||||
overflow: hidden;
|
||||
}
|
||||
.dash-stacked-seg {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.14em;
|
||||
color: var(--bg);
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
border-right: 1px solid rgba(255,255,255,0.18);
|
||||
}
|
||||
.dash-stacked-seg:last-child { border-right: none; }
|
||||
.dash-stacked-lbl { padding: 0 8px; }
|
||||
|
||||
.dash-entity-table {
|
||||
display: flex; flex-direction: column;
|
||||
gap: 0;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.dash-entity-head,
|
||||
.dash-entity-row {
|
||||
display: grid;
|
||||
grid-template-columns: 110px 1fr 1fr 1fr 50px;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
padding: 8px 0;
|
||||
}
|
||||
.dash-entity-head {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 9.5px;
|
||||
letter-spacing: 0.16em;
|
||||
color: var(--fg-subtle);
|
||||
border-bottom: 1px solid var(--rule);
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
.dash-entity-head > span:not(:first-child) { text-align: right; }
|
||||
.dash-entity-row {
|
||||
border-bottom: 1px solid var(--rule);
|
||||
}
|
||||
.dash-entity-row:last-child { border-bottom: none; }
|
||||
.dash-entity-row .amount { text-align: right; }
|
||||
.dash-entity-row .amount.pos { color: var(--conf-rules); }
|
||||
.dash-tx-count {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 13px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
text-align: right;
|
||||
color: var(--fg-strong);
|
||||
}
|
||||
|
||||
/* ---- Pipeline log card --------------------------------------------- */
|
||||
.dash-log {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--rule-ink);
|
||||
border-radius: var(--r-sm);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
color: var(--fg-on-ink);
|
||||
padding: 4px 0;
|
||||
}
|
||||
.dash-log-row {
|
||||
display: grid;
|
||||
grid-template-columns: 14px 56px 220px 84px 1fr;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 8px 16px;
|
||||
border-bottom: 1px dashed var(--rule-ink);
|
||||
}
|
||||
.dash-log-row:last-child { border-bottom: none; }
|
||||
.dash-log-dot {
|
||||
width: 7px; height: 7px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.dash-log-dot.dash-ok { background: var(--conf-rules); }
|
||||
.dash-log-dot.dash-warn { background: var(--conf-mid); }
|
||||
.dash-log-dot.dash-fail { background: var(--conf-low); }
|
||||
.dash-log-time { color: var(--fg-on-ink-muted); letter-spacing: 0.06em; }
|
||||
.dash-log-src { color: var(--fg-on-ink); font-family: var(--font-sans-kr); }
|
||||
.dash-log-rows { color: var(--fg-on-ink-muted); font-variant-numeric: tabular-nums; }
|
||||
.dash-log-msg { color: var(--fg-on-ink-muted); }
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue