ladill-meet/resources/views/meet/dashboard.blade.php

<x-app-layout title="Dashboard">
    <div class="flex flex-wrap items-start justify-between gap-4">
        <div class="min-w-0 flex-1">
            <div class="flex items-center justify-between gap-3 sm:justify-start">
                <h1 class="text-2xl font-semibold text-slate-900">Meetings</h1>
                <div class="flex shrink-0 items-center gap-1.5 sm:hidden">
                    <a href="{{ route('meet.instant') }}"
                       class="btn-fab h-10 w-10"
                       title="Start instant meeting"
                       aria-label="Start instant meeting">
                        <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
                        </svg>
                    </a>
                    <a href="{{ route('meet.personal') }}"
                       class="inline-flex h-10 w-10 items-center justify-center rounded-full border border-slate-300 bg-white text-slate-700 shadow-sm transition hover:bg-slate-50"
                       title="Personal room"
                       aria-label="Personal room">
                        @include('meet.room.partials.meet-icon', ['icon' => 'personal', 'inverted' => false])
                    </a>
                    <a href="{{ route('meet.rooms.create') }}"
                       class="inline-flex h-10 w-10 items-center justify-center rounded-full border border-slate-300 bg-white text-slate-700 shadow-sm transition hover:bg-slate-50"
                       title="Schedule meeting"
                       aria-label="Schedule meeting">
                        @include('meet.room.partials.meet-icon', ['icon' => 'schedule', 'inverted' => false])
                    </a>
                </div>
            </div>
            <p class="mt-1 text-sm text-slate-600">{{ $organization->name }}</p>
        </div>
        <div class="hidden gap-2 sm:flex">
            <a href="{{ route('meet.instant') }}" class="btn-primary">Start instant meeting</a>
            <a href="{{ route('meet.personal') }}" class="rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Personal room</a>
            <a href="{{ route('meet.rooms.create') }}" class="rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Schedule</a>
        </div>
    </div>

    <div class="mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <div class="rounded-2xl border border-slate-200 bg-white p-4">
            <p class="text-xs font-medium uppercase text-slate-500">Live now</p>
            <p class="mt-1 text-2xl font-semibold text-emerald-600">{{ $stats['live_count'] }}</p>
        </div>
        <div class="rounded-2xl border border-slate-200 bg-white p-4">
            <p class="text-xs font-medium uppercase text-slate-500">Upcoming</p>
            <p class="mt-1 text-2xl font-semibold text-slate-900">{{ $stats['upcoming_count'] }}</p>
        </div>
        <div class="rounded-2xl border border-slate-200 bg-white p-4">
            <p class="text-xs font-medium uppercase text-slate-500">Team</p>
            <p class="mt-1 text-2xl font-semibold text-slate-900">{{ $stats['team_members'] }}</p>
        </div>
        <div class="rounded-2xl border border-slate-200 bg-white p-4">
            <p class="text-xs font-medium uppercase text-slate-500">Recordings</p>
            <p class="mt-1 text-2xl font-semibold text-slate-900">{{ $stats['recordings_count'] }}</p>
        </div>
    </div>

    <section class="mt-8">
        <div class="flex items-center justify-between">
            <h2 class="text-lg font-semibold text-slate-900">Last 30 days</h2>
            <a href="{{ route('meet.reports.show', 'summary') }}" class="text-sm text-indigo-600 hover:underline">Full report</a>
        </div>
        <div class="mt-3 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
            <div class="rounded-2xl border border-slate-200 bg-white p-4">
                <p class="text-xs font-medium uppercase text-slate-500">Sessions</p>
                <p class="mt-1 text-2xl font-semibold text-slate-900">{{ $analytics['sessions_held'] }}</p>
            </div>
            <div class="rounded-2xl border border-slate-200 bg-white p-4">
                <p class="text-xs font-medium uppercase text-slate-500">Meeting minutes</p>
                <p class="mt-1 text-2xl font-semibold text-slate-900">{{ number_format($analytics['total_minutes']) }}</p>
            </div>
            <div class="rounded-2xl border border-slate-200 bg-white p-4">
                <p class="text-xs font-medium uppercase text-slate-500">Peak participants</p>
                <p class="mt-1 text-2xl font-semibold text-slate-900">{{ $analytics['peak_participants'] }}</p>
            </div>
            <div class="rounded-2xl border border-slate-200 bg-white p-4">
                <p class="text-xs font-medium uppercase text-slate-500">Completed</p>
                <p class="mt-1 text-2xl font-semibold text-emerald-600">{{ $analytics['meetings_completed'] }}</p>
            </div>
        </div>
    </section>

    @if ($recentRecordings->isNotEmpty())
        <section class="mt-8">
            <div class="flex items-center justify-between">
                <h2 class="text-lg font-semibold text-slate-900">Recent recordings</h2>
                <a href="{{ route('meet.recordings.index') }}" class="text-sm text-indigo-600 hover:underline">View all</a>
            </div>
            <div class="mt-3 space-y-2">
                @foreach ($recentRecordings as $recording)
                    <a href="{{ route('meet.recordings.show', $recording) }}" class="flex items-center justify-between rounded-2xl border border-slate-200 bg-white p-4 hover:border-indigo-200">
                        <span class="font-medium text-slate-900">{{ $recording->session->room->title }}</span>
                        <span class="text-sm text-slate-500">{{ config('meet.recording_statuses')[$recording->status] ?? $recording->status }}</span>
                    </a>
                @endforeach
            </div>
        </section>
    @endif

    @if ($active->isNotEmpty())
        <section class="mt-8">
            <h2 class="text-lg font-semibold text-slate-900">Live meetings</h2>
            <div class="mt-3 space-y-2">
                @foreach ($active as $room)
                    @include('meet.partials.room-card', ['room' => $room])
                @endforeach
            </div>
        </section>
    @endif

    <section class="mt-8">
        <div class="flex items-center justify-between">
            <h2 class="text-lg font-semibold text-slate-900">Upcoming</h2>
            <a href="{{ route('meet.rooms.index') }}" class="text-sm text-indigo-600 hover:underline">View all</a>
        </div>
        <div class="mt-3 space-y-2">
            @forelse ($upcoming as $room)
                @include('meet.partials.room-card', ['room' => $room])
            @empty
                <p class="rounded-2xl border border-dashed border-slate-200 bg-white p-6 text-sm text-slate-500">No upcoming meetings.</p>
            @endforelse
        </div>
    </section>

    <section class="mt-8">
        <h2 class="text-lg font-semibold text-slate-900">Recent</h2>
        <div class="mt-3 space-y-2">
            @forelse ($past as $room)
                @include('meet.partials.room-card', ['room' => $room])
            @empty
                <p class="rounded-2xl border border-dashed border-slate-200 bg-white p-6 text-sm text-slate-500">No past meetings yet.</p>
            @endforelse
        </div>
    </section>
</x-app-layout>