76 lines
4.4 KiB
HTML
76 lines
4.4 KiB
HTML
<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.
|