Adds visitor dashboard and related features

2026-06-28 06:41:23 +00:00
parent a7cccbf170
commit 77d1c04d86
35 changed files with 1938 additions and 8 deletions
@@ -0,0 +1,197 @@
+@use '../../styles/variables' as *;
+@use '../../styles/mixins' as *;
+
+.stats-dashboard {
+  padding: $spacing-md;
+}
+
+// ── Controls ──────────────────────────────────────────────
+
+.stats-controls {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: $spacing-md;
+  margin-bottom: $spacing-lg;
+}
+
+.preset-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: $spacing-xs;
+}
+
+.preset-btn {
+  background: $neutral-white;
+  border: 1px solid $neutral-light;
+  border-radius: $radius-md;
+  padding: $spacing-xs $spacing-md;
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: $neutral-dark;
+  cursor: pointer;
+  transition: all $transition-fast;
+
+  &:hover {
+    border-color: $primary-blue-muted;
+    color: $primary-blue;
+  }
+
+  &.active {
+    background: $primary-blue;
+    border-color: $primary-blue;
+    color: $neutral-white;
+  }
+}
+
+.custom-dates {
+  display: flex;
+  gap: $spacing-sm;
+  align-items: center;
+
+  label {
+    font-size: 0.85rem;
+    color: $neutral-medium;
+    display: flex;
+    align-items: center;
+    gap: $spacing-xs;
+  }
+
+  input[type="date"] {
+    padding: $spacing-xs $spacing-sm;
+    border: 1px solid $neutral-light;
+    border-radius: $radius-sm;
+    font-size: 0.85rem;
+  }
+}
+
+.btn-parse {
+  @include button-style($success-green, $neutral-white, darken($success-green, 8%));
+  margin-left: auto;
+}
+
+.parse-progress {
+  background: rgba($info-blue, 0.1);
+  color: $info-blue;
+  padding: $spacing-sm $spacing-md;
+  border-radius: $radius-md;
+  font-size: 0.85rem;
+  margin-bottom: $spacing-md;
+}
+
+.error-message {
+  background: rgba(#d32f2f, 0.1);
+  color: #d32f2f;
+  padding: $spacing-sm $spacing-md;
+  border-radius: $radius-md;
+  font-size: 0.85rem;
+  margin-bottom: $spacing-md;
+}
+
+// ── Summary cards ─────────────────────────────────────────
+
+.stats-summary {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: $spacing-md;
+  margin-bottom: $spacing-lg;
+}
+
+.stat-card {
+  @include card-style;
+  padding: $spacing-lg;
+  text-align: center;
+
+  .stat-value {
+    font-family: $font-heading;
+    font-size: 2rem;
+    color: $primary-blue;
+    margin-bottom: $spacing-xs;
+  }
+
+  .stat-label {
+    font-size: 0.85rem;
+    color: $neutral-medium;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+}
+
+// ── Map ───────────────────────────────────────────────────
+
+.map-section {
+  @include card-style;
+  padding: $spacing-lg;
+  margin-bottom: $spacing-lg;
+
+  h3 {
+    font-family: $font-heading;
+    color: $primary-blue;
+    margin: 0 0 $spacing-md;
+  }
+}
+
+.map-container {
+  height: 400px;
+  border-radius: $radius-md;
+  overflow: hidden;
+  position: relative;
+
+  .map-leaflet {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+// ── Chart ─────────────────────────────────────────────────
+
+.chart-section {
+  @include card-style;
+  padding: $spacing-lg;
+  margin-bottom: $spacing-lg;
+
+  h3 {
+    font-family: $font-heading;
+    color: $primary-blue;
+    margin: 0 0 $spacing-md;
+  }
+}
+
+.chart-container {
+  height: 300px;
+  position: relative;
+}
+
+// ── Geo table ─────────────────────────────────────────────
+
+.geo-table-section {
+  @include card-style;
+  padding: $spacing-lg;
+
+  h3 {
+    font-family: $font-heading;
+    color: $primary-blue;
+    margin: 0 0 $spacing-md;
+  }
+}
+
+// ── Responsive ────────────────────────────────────────────
+
+@include responsive(md) {
+  .stats-controls {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .btn-parse {
+    margin-left: 0;
+  }
+
+  .map-container {
+    height: 280px;
+  }
+
+  .chart-container {
+    height: 220px;
+  }
+}