Admin Dashboard hinzugefügt: Modernes Dashboard für Administratoren mit Statistiken, Verwaltungsmodulen und Schnellzugriffen

2026-03-16 16:51:15 +01:00
parent 2deafd219b
commit 40de46588e
5 changed files with 417 additions and 7 deletions
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -1088,6 +1088,162 @@ a {
  min-height: 88px;
 }

+/* Admin Dashboard Styles */
+.admin-hero {
+  background: linear-gradient(135deg, rgba(90, 123, 168, 0.15) 0%, rgba(74, 124, 89, 0.1) 100%);
+}
+
+.admin-metrics {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+@media (max-width: 1024px) {
+  .admin-metrics {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 640px) {
+  .admin-metrics {
+    grid-template-columns: 1fr;
+  }
+}
+
+.metric-card--primary {
+  background: linear-gradient(135deg, rgba(90, 123, 168, 0.25) 0%, rgba(90, 123, 168, 0.1) 100%);
+  border-color: rgba(90, 123, 168, 0.3);
+}
+
+.metric-card__value--large {
+  font-size: 2.5rem;
+  background: linear-gradient(135deg, var(--text) 0%, #5b7ba8 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.admin-modules-section {
+  margin-top: 8px;
+}
+
+.admin-modules-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 16px;
+  margin-top: 20px;
+}
+
+@media (max-width: 1024px) {
+  .admin-modules-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 640px) {
+  .admin-modules-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.admin-module-card {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 24px;
+  background: rgba(255, 255, 255, 0.7);
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  border-radius: var(--radius-xl);
+  box-shadow: var(--shadow);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  text-align: left;
+  border-left: 4px solid var(--module-color, #5b7ba8);
+}
+
+.admin-module-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
+  background: rgba(255, 255, 255, 0.9);
+}
+
+.admin-module-card__icon {
+  font-size: 2rem;
+  line-height: 1;
+}
+
+.admin-module-card__content {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  flex: 1;
+}
+
+.admin-module-card__content strong {
+  font-size: 1.1rem;
+  color: var(--text);
+}
+
+.admin-module-card__content .muted-text {
+  font-size: 0.85rem;
+}
+
+.admin-module-card__arrow {
+  font-size: 1.5rem;
+  color: var(--muted);
+  opacity: 0.5;
+  transition: opacity 0.2s ease;
+}
+
+.admin-module-card:hover .admin-module-card__arrow {
+  opacity: 1;
+}
+
+.quick-actions-section {
+  margin-top: 8px;
+}
+
+.quick-actions-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+  margin-top: 20px;
+}
+
+@media (max-width: 1024px) {
+  .quick-actions-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 640px) {
+  .quick-actions-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.quick-action-button {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px 20px;
+  background: rgba(255, 255, 255, 0.5);
+  border: 1px solid rgba(255, 255, 255, 0.4);
+  border-radius: var(--radius-lg);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-size: 0.95rem;
+  color: var(--text);
+}
+
+.quick-action-button:hover {
+  background: rgba(255, 255, 255, 0.9);
+  box-shadow: var(--shadow);
+}
+
+.quick-action-button span:first-child {
+  font-size: 1.25rem;
+}
+
 .dialog-backdrop {
  position: fixed;
  inset: 0;