b2in/resources/views/admin/dashboards/admin.blade.php

<div class="space-y-6">
    {{-- KPI-Karten --}}
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        {{-- Aktive Hubs --}}
        <flux:card>
            <div class="flex items-start justify-between">
                <div>
                    <div class="text-sm text-blue-700 dark:text-blue-300 font-medium">{{ __('Aktive Hubs') }}</div>
                    <div class="text-3xl font-bold text-blue-900 dark:text-blue-100 mt-2">{{ $activeHubs }}</div>
                    <div class="text-xs text-blue-600 dark:text-blue-400 mt-1">{{ $plannedHubs }} {{ __('geplant') }}</div>
                </div>
                @svg('heroicon-o-map-pin', 'w-10 h-10 text-blue-400 dark:text-blue-600')
            </div>
        </flux:card>

        {{-- Partner-Wachstum --}}
        <flux:card>
            <div class="flex items-start justify-between">
                <div>
                    <div class="text-sm text-green-700 dark:text-green-300 font-medium">{{ __('Partner gesamt') }}</div>
                    <div class="text-3xl font-bold text-green-900 dark:text-green-100 mt-2">{{ $totalPartners }}</div>
                    <div class="text-xs text-green-600 dark:text-green-400 mt-1">+{{ $partnersThisMonth }} {{ __('diesen Monat') }}</div>
                </div>
                @svg('heroicon-o-user-group', 'w-10 h-10 text-green-400 dark:text-green-600')
            </div>
        </flux:card>

        {{-- Plattform-Umsatz --}}
        <flux:card>
            <div class="flex items-start justify-between">
                <div>
                    <div class="text-sm text-purple-700 dark:text-purple-400 font-medium">{{ __('Plattform-Umsatz') }}</div>
                    <div class="text-3xl font-bold text-purple-900 dark:text-purple-100 mt-2">{{ number_format($platformRevenue, 0, ',', '.') }} €</div>
                    <div class="text-xs text-purple-600 dark:text-purple-400 mt-1">{{ __('Platzhalter') }}</div>
                </div>
                @svg('heroicon-o-currency-euro', 'w-10 h-10 text-purple-400 dark:text-purple-600')
            </div>
        </flux:card>

        {{-- System-Status --}}
        <flux:card>
            <div class="flex items-start justify-between">
                <div>
                    <div class="text-sm text-emerald-700 dark:text-emerald-300 font-medium">{{ __('System-Status') }}</div>
                    <div class="text-3xl font-bold text-emerald-900 dark:text-emerald-100 mt-2">{{ __('Optimal') }}</div>
                    <div class="flex items-center gap-1 mt-1">
                        <div class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></div>
                        <div class="text-xs text-emerald-600 dark:text-emerald-400">{{ __('Alle Systeme laufen') }}</div>
                    </div>
                </div>
                @svg('heroicon-o-server', 'w-10 h-10 text-emerald-400 dark:text-emerald-600')
            </div>
        </flux:card>
    </div>

    {{-- Widgets --}}
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {{-- Onboarding-Pipeline --}}
        <flux:card>
            <flux:heading size="lg">{{ __('Onboarding-Pipeline') }}</flux:heading>
            <flux:subheading>{{ __('Offene Einladungen') }}</flux:subheading>

            <div class="mt-4 flex items-center justify-center py-8 bg-orange-50 dark:bg-zinc-800 rounded-lg">
                <div class="text-center">
                    <div class="text-5xl font-bold text-sky-600 dark:text-sky-400">{{ $pendingInvitations }}</div>
                    <div class="text-sm text-sky-700 dark:text-sky-300 mt-2">{{ __('Einladungen ohne Registrierung') }}</div>
                    <flux:button href="{{ route('admin.partners.registration-codes') }}" variant="primary" size="sm" class="mt-4">
                        {{ __('Einladungen verwalten') }}
                    </flux:button>
                </div>
            </div>
        </flux:card>

        {{-- Partner-Übersicht --}}
        <flux:card>
            <flux:heading size="lg">{{ __('Partner & Kunden') }}</flux:heading>
            <flux:subheading>{{ __('Übersicht der Plattform-Nutzer') }}</flux:subheading>

            <div class="mt-4 space-y-3">
                <div class="flex items-center justify-between p-3 bg-zinc-50 dark:bg-zinc-800/50 rounded-lg">
                    <div class="flex items-center gap-3">
                        @svg('heroicon-o-user', 'w-6 h-6 text-blue-500')
                        <span class="font-medium">{{ __('Kunden') }}</span>
                    </div>
                    <span class="text-2xl font-bold">{{ $totalCustomers }}</span>
                </div>
                <div class="flex items-center justify-between p-3 bg-zinc-50 dark:bg-zinc-800/50 rounded-lg">
                    <div class="flex items-center gap-3">
                        @svg('heroicon-o-building-storefront', 'w-6 h-6 text-green-500')
                        <span class="font-medium">{{ __('Händler') }}</span>
                    </div>
                    <span class="text-2xl font-bold">{{ \App\Models\Partner::where('type', 'Retailer')->count() }}</span>
                </div>
                <div class="flex items-center justify-between p-3 bg-zinc-50 dark:bg-zinc-800/50 rounded-lg">
                    <div class="flex items-center gap-3">
                        @svg('heroicon-o-building-office', 'w-6 h-6 text-purple-500')
                        <span class="font-medium">{{ __('Hersteller') }}</span>
                    </div>
                    <span class="text-2xl font-bold">{{ \App\Models\Partner::where('type', 'Manufacturer')->count() }}</span>
                </div>
                <div class="flex items-center justify-between p-3 bg-zinc-50 dark:bg-zinc-800/50 rounded-lg">
                    <div class="flex items-center gap-3">
                        @svg('heroicon-o-briefcase', 'w-6 h-6 text-orange-500')
                        <span class="font-medium">{{ __('Makler') }}</span>
                    </div>
                    <span class="text-2xl font-bold">{{ \App\Models\Partner::whereIn('type', ['Broker', 'Estate-Agent'])->count() }}</span>
                </div>
            </div>
        </flux:card>
    </div>
    {{-- Besucher-Statistik Chart --}}
    <flux:card>
        <flux:heading size="lg">{{ __('Besucher-Statistik') }}</flux:heading>
        <flux:subheading>{{ __('Tägliche Besucherzahlen der letzten Tage') }}</flux:subheading>

        <div class="mt-6">
            @if(!empty($data))
                <flux:chart :value="$data" class="aspect-[3/1]">
                    <flux:chart.svg>
                        <flux:chart.line field="visitors" class="text-pink-500 dark:text-pink-400" />

                        <flux:chart.axis axis="x" field="date">
                            <flux:chart.axis.line />
                            <flux:chart.axis.tick />
                        </flux:chart.axis>

                        <flux:chart.axis axis="y">
                            <flux:chart.axis.grid />
                            <flux:chart.axis.tick />
                        </flux:chart.axis>

                        <flux:chart.cursor />
                    </flux:chart.svg>

                    <flux:chart.tooltip>
                        <flux:chart.tooltip.heading field="date" :format="['year' => 'numeric', 'month' => 'numeric', 'day' => 'numeric']" />
                        <flux:chart.tooltip.value field="visitors" label="Besucher" />
                    </flux:chart.tooltip>
                </flux:chart>
            @else
                <div class="text-center py-8 text-zinc-500 dark:text-zinc-400">
                    {{ __('Keine Daten verfügbar') }}
                </div>
            @endif
        </div>
    </flux:card>
</div>