init

src/app/features/dashboard/components/dashboard-page/dashboard-page.component.html

@@ -0,0 +1,75 @@
+<main>
+  <div class="grid">
+    <app-kpi-card
+      *ngFor="let kpi of kpiData"
+      [value]="kpi.value"
+      [label]="kpi.label"
+      [color]="kpi.color"
+      [iconName]="kpi.iconName"
+    >
+    </app-kpi-card>
+  </div>
+  <div>
+    <app-orders-table
+      [data]="mockOrders"
+      [itemsPerPage]="5"
+      (view)="handleViewDetails($event)"
+      (edit)="handleEditOrder($event)"
+      (delete)="handleDeleteOrder($event)"
+    >
+    </app-orders-table>
+  </div>
+</main>
+Exzellente Frage! Ein gutes Dashboard ist der Schlüssel zu einem effizienten
+Admin-Panel. Es sollte auf einen Blick die wichtigsten Fragen beantworten: "Wie
+läuft mein Geschäft?" und "Was muss ich jetzt tun?". Basierend auf den
+Endpunkten und Datenmodellen, die in Ihrer Swagger-Datei verfügbar sind
+(insbesondere AdminAnalytics, AdminOrders etc.), hier eine Gliederung der
+Kerninformationen, von der höchsten zur niedrigsten Priorität: Kategorie 1:
+Handlungsbedarf – "Was muss ich jetzt tun?" Diese Sektion ist die wichtigste,
+denn sie treibt die tägliche Arbeit an. Sie sollte prominent platziert sein.
+Offene Bestellungen: Eine Zählung und eine Liste der letzten 3-5 Bestellungen
+mit dem Status Pending oder Processing. Jede Zeile sollte direkt zur Detailseite
+der Bestellung verlinken. Warum? Dies ist die primäre Aufgabe des
+Shop-Betreibers: Bestellungen bearbeiten und versenden. Datenquelle: GET
+/api/v1/admin/AdminOrders (clientseitig filtern). Niedriger Lagerbestand: Eine
+Warnung und eine Liste der Produkte, deren stockQuantity unter einen kritischen
+Schwellenwert gefallen ist. Warum? Verhindert "Out of Stock"-Situationen und
+Umsatzverluste. Ermöglicht rechtzeitige Nachbestellungen. Datenquelle: GET
+/api/v1/admin/AdminAnalytics -> inventoryStatus.productsWithLowStock. Zu
+genehmigende Bewertungen: Eine Zählung der Kundenbewertungen, die auf Freigabe
+warten. Warum? Fördert die Interaktion mit Kunden und stellt die Qualität der
+Inhalte sicher. Datenquelle: GET /api/v1/admin/AdminReviews (clientseitig nach
+isApproved === false filtern). Kategorie 2: Key Performance Indicators (KPIs) –
+"Wie läuft mein Geschäft?" Dies ist der "Auf einen Blick"-Überblick über die
+Gesundheit des Shops. Ideal als große, klare Zahlen am oberen Rand des
+Dashboards. Umsatz (letzte 30 Tage): Die wichtigste Kennzahl. Datenquelle: GET
+/api/v1/admin/AdminAnalytics -> kpiSummary.totalRevenue. Anzahl Bestellungen
+(letzte 30 Tage): Zeigt die allgemeine Aktivität. Datenquelle: GET
+/api/v1/admin/AdminAnalytics -> kpiSummary.totalOrders. Durchschnittlicher
+Bestellwert: Gibt Aufschluss über das Kaufverhalten. Datenquelle: GET
+/api/v1/admin/AdminAnalytics -> kpiSummary.averageOrderValue. Neukunden (letzte
+30 Tage): Eine wichtige Metrik für das Wachstum. Datenquelle: GET
+/api/v1/admin/AdminAnalytics -> kpiSummary.newCustomersThisPeriod. Kategorie 3:
+Jüngste Aktivitäten & Trends – "Was passiert gerade?" Diese Sektion gibt ein
+Gefühl für die aktuelle Dynamik und hilft, Muster zu erkennen. Umsatzverlauf
+(Diagramm): Ein einfaches Linien- oder Balkendiagramm, das den Umsatz der
+letzten 7 oder 30 Tage anzeigt. Warum? Visualisiert Trends, Hochs und Tiefs
+(z.B. an Wochenenden). Datenquelle: GET /api/v1/admin/AdminAnalytics ->
+salesOverTime. Letzte Bestellungen (Feed): Eine kurze, scrollbare Liste der
+letzten 10 Bestellungen (unabhängig vom Status) mit Kundenname und Bestellwert.
+Warum? Gibt dem Dashboard ein "lebendiges" Gefühl. Datenquelle: GET
+/api/v1/admin/AdminOrders. Kategorie 4: Strategische Einblicke – "Was
+funktioniert gut?" Diese Informationen helfen bei Marketing- und
+Bestandsentscheidungen. Top 5 Produkte: Eine einfache Liste der meistverkauften
+Produkte im aktuellen Zeitraum (nach Umsatz oder verkauften Einheiten). Warum?
+Zeigt, welche Produkte beworben werden sollten und wo der Lagerbestand immer
+hoch sein muss. Datenquelle: GET /api/v1/admin/AdminAnalytics ->
+topPerformingProducts. Vorschlag für ein Dashboard-Layout: Ein bewährtes Layout
+könnte so aussehen: Obere Reihe: Die 4 großen KPI-Karten (Umsatz, Bestellungen,
+Ø-Wert, Neukunden). Linke (breitere) Spalte: Ganz oben das
+Umsatzverlauf-Diagramm. Darunter die Liste der "Letzten Bestellungen". Rechte
+(schmalere) Spalte: Ganz oben die "Handlungsbedarf"-Box mit den offenen
+Bestellungen und dem niedrigen Lagerbestand. Darunter die "Top 5
+Produkte"-Liste. Mit dieser Auswahl an Informationen hat der Admin alles
+Wichtige im Blick und kann direkt die notwendigen Aktionen ausführen.