79 lines
3.8 KiB
HTML
79 lines
3.8 KiB
HTML
@if (isLoading()) {
|
|
<div class="flex justify-center items-center py-12">
|
|
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-emerald-600"></div>
|
|
<span class="ml-3 text-slate-500">Lade Daten...</span>
|
|
</div>
|
|
} @else if (error()) {
|
|
<div class="bg-red-50 border border-red-200 rounded-lg p-6 text-center">
|
|
<p class="text-red-600">{{ error() }}</p>
|
|
</div>
|
|
} @else if (role === 'ADMIN' && adminStats(); as stats) {
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
<div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-6">
|
|
<p class="text-sm text-slate-500">Energiegemeinschaften</p>
|
|
<p class="text-3xl font-bold text-slate-800 mt-2">{{ stats.totalCommunities }}</p>
|
|
</div>
|
|
<div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-6">
|
|
<p class="text-sm text-slate-500">Ausstehende Freischaltungen</p>
|
|
<p class="text-3xl font-bold text-slate-800 mt-2">{{ stats.pendingUsers }}</p>
|
|
</div>
|
|
<div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-6">
|
|
<p class="text-sm text-slate-500">Offene Mitgliedsanträge</p>
|
|
<p class="text-3xl font-bold text-slate-800 mt-2">{{ stats.pendingMemberships }}</p>
|
|
</div>
|
|
<div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-6">
|
|
<p class="text-sm text-slate-500">Aktive Mitgliedschaften</p>
|
|
<p class="text-3xl font-bold text-slate-800 mt-2">{{ stats.totalActiveMemberships }}</p>
|
|
</div>
|
|
</div>
|
|
} @else if (userStats(); as stats) {
|
|
<div class="space-y-6">
|
|
<div class="grid grid-cols-1 sm:grid-cols-3 gap-6">
|
|
<div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-6">
|
|
<p class="text-sm text-slate-500">Meine Zählpunkte</p>
|
|
<p class="text-3xl font-bold text-slate-800 mt-2">{{ stats.totalMeteringPoints }}</p>
|
|
</div>
|
|
<div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-6">
|
|
<p class="text-sm text-slate-500">Aktive Mitgliedschaften</p>
|
|
<p class="text-3xl font-bold text-slate-800 mt-2">{{ stats.activeMemberships }}</p>
|
|
</div>
|
|
<div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-6">
|
|
<p class="text-sm text-slate-500">Offene Anfragen</p>
|
|
<p class="text-3xl font-bold text-slate-800 mt-2">{{ stats.pendingMemberships }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
@if (meteringData(); as data) {
|
|
@if (data.meteringPoints.length > 0) {
|
|
<div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-6">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h2 class="text-lg font-semibold text-slate-800">Verbrauch & Erzeugung</h2>
|
|
<div class="flex gap-2">
|
|
<button
|
|
(click)="setRange(7)"
|
|
[class]="selectedDays() === 7 ? 'px-3 py-2 text-sm rounded-lg bg-emerald-600 text-white' : 'px-3 py-2 text-sm rounded-lg border border-slate-300 hover:bg-slate-50'">
|
|
7 Tage
|
|
</button>
|
|
<button
|
|
(click)="setRange(30)"
|
|
[class]="selectedDays() === 30 ? 'px-3 py-2 text-sm rounded-lg bg-emerald-600 text-white' : 'px-3 py-2 text-sm rounded-lg border border-slate-300 hover:bg-slate-50'">
|
|
30 Tage
|
|
</button>
|
|
<button
|
|
(click)="setRange(90)"
|
|
[class]="selectedDays() === 90 ? 'px-3 py-2 text-sm rounded-lg bg-emerald-600 text-white' : 'px-3 py-2 text-sm rounded-lg border border-slate-300 hover:bg-slate-50'">
|
|
90 Tage
|
|
</button>
|
|
</div>
|
|
</div>
|
|
@if (chartOptions()) {
|
|
<div echarts [options]="chartOptions()" class="h-[400px]"></div>
|
|
} @else {
|
|
<p class="text-slate-500 text-center py-8">Keine Daten im ausgewählten Zeitraum vorhanden.</p>
|
|
}
|
|
</div>
|
|
}
|
|
}
|
|
</div>
|
|
}
|