init

src/app/features/dashboard/components/kpi-card/kpi-card.component.css

@@ -0,0 +1,56 @@
+:host {
+  display: block;
+}
+
+/* Die .kpi-card-Regel wird jetzt auf den Host angewendet, da das Template nur den Inhalt enthält */
+:host .kpi-card-content {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 1.5rem;
+}
+
+.kpi-icon {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+}
+
+.kpi-icon app-icon {
+  width: 24px;
+  height: 24px;
+  color: #fff; /* Standardfarbe für das Icon (currentColor) */
+}
+
+/* Farbvarianten für den Hintergrund des Icons */
+.icon-blue {
+  background: linear-gradient(135deg, #3498db, #2980b9);
+}
+.icon-green {
+  background: linear-gradient(135deg, #2ecc71, #27ae60);
+}
+.icon-orange {
+  background: linear-gradient(135deg, #f39c12, #f1c40f);
+}
+.icon-purple {
+  background: linear-gradient(135deg, #9b59b6, #8e44ad);
+}
+
+.kpi-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.kpi-value {
+  font-size: 1.75rem;
+  font-weight: 700;
+  color: var(--color-text);
+}
+
+.kpi-label {
+  font-size: 0.9rem;
+  color: var(--color-text-light);
+}

src/app/features/dashboard/components/kpi-card/kpi-card.component.html

@@ -0,0 +1,19 @@
+<app-card>
+  <div
+    class="kpi-icon"
+    [class.icon-blue]="color === 'blue'"
+    [class.icon-green]="color === 'green'"
+    [class.icon-orange]="color === 'orange'"
+    [class.icon-purple]="color === 'purple'"
+  >
+    <app-icon
+      *ngIf="iconName"
+      [iconName]="iconName"
+      [svgColor]="svgColor"
+    ></app-icon>
+  </div>
+  <div class="kpi-content">
+    <span class="kpi-value">{{ value }}</span>
+    <span class="kpi-label">{{ label }}</span>
+  </div>
+</app-card>

src/app/features/dashboard/components/kpi-card/kpi-card.component.ts

@@ -0,0 +1,21 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IconComponent } from '../../../../shared/components/ui/icon/icon.component';
+import { CardComponent } from '../../../../shared/components/ui/card/card.component';
+
+import { KpiColor } from '../../../../core/types/dashboard';
+
+@Component({
+  selector: 'app-kpi-card',
+  standalone: true,
+  imports: [CommonModule, IconComponent,CardComponent],
+  templateUrl: './kpi-card.component.html',
+  styleUrl: './kpi-card.component.css',
+})
+export class KpiCardComponent {
+  @Input() value: string = '';
+  @Input() label: string = '';
+  @Input() color: KpiColor = 'blue';
+  @Input() iconName: string | null = null;
+  @Input() svgColor: string | null = null;
+}