feat(frontend): add dashboard and race calendar views

Implement dashboard metrics and split race lists with BEM-styled cards using the typed races API. Made-with: Cursor
2026-04-06 17:17:08 +03:00
parent 1d89e2bce2
commit a332703e2f
5 changed files with 514 additions and 6 deletions
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -91,3 +91,127 @@ a {
  margin: 0;
  color: var(--color-text-muted);
 }
+
+.page__subtitle--error {
+  color: var(--color-error);
+}
+
+.dashboard-grid {
+  margin-top: var(--space-6);
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--space-4);
+}
+
+.dashboard-card {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: var(--space-5);
+  background: #fcfdff;
+}
+
+.dashboard-card__title {
+  margin: 0 0 var(--space-3);
+  font-size: var(--font-size-body);
+  color: var(--color-text-muted);
+}
+
+.dashboard-card__value {
+  margin: 0;
+  font-size: var(--font-size-h2);
+  font-weight: 700;
+  color: var(--color-text);
+}
+
+.dashboard-card__meta {
+  margin: var(--space-2) 0 0;
+  color: var(--color-text);
+}
+
+.dashboard-card__hint,
+.dashboard-card__empty {
+  margin: var(--space-2) 0 0;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-caption);
+}
+
+.race-lists {
+  margin-top: var(--space-6);
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--space-4);
+}
+
+.race-list {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: var(--space-5);
+  background: #fcfdff;
+}
+
+.race-list__title {
+  margin: 0 0 var(--space-4);
+  font-size: var(--font-size-h2);
+}
+
+.race-list__items {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: grid;
+  gap: var(--space-3);
+}
+
+.race-list__empty {
+  margin: 0;
+  color: var(--color-text-muted);
+}
+
+.race-card {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  padding: var(--space-3);
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-3);
+  background: var(--color-surface);
+}
+
+.race-card__title {
+  margin: 0;
+  font-weight: 600;
+}
+
+.race-card__meta {
+  margin: var(--space-2) 0 0;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-caption);
+}
+
+.race-card__status {
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+  border-radius: 999px;
+  padding: 0.2rem 0.5rem;
+  font-size: var(--font-size-caption);
+  font-weight: 600;
+}
+
+.race-card__status--planned {
+  background: #edf3ff;
+  color: var(--color-accent);
+}
+
+.race-card__status--completed {
+  background: #ecf8f1;
+  color: var(--color-success);
+}
+
+@media (max-width: 900px) {
+  .dashboard-grid,
+  .race-lists {
+    grid-template-columns: 1fr;
+  }
+}