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

<x-app-layout title="Reception Dashboard">
    @php
        $cards = [
            [
                'label' => 'Visitors Today',
                'value' => number_format($stats['visitors_today']),
                'meta' => number_format($stats['contractors_today']).' contractor'.($stats['contractors_today'] === 1 ? '' : 's'),
                'href' => route('frontdesk.visits.index'),
            ],
            ['label' => 'Currently Inside', 'value' => number_format($stats['currently_inside']), 'href' => route('frontdesk.visits.index', ['status' => 'checked_in'])],
            ['label' => 'Expected Arrivals', 'value' => number_format($stats['expected_arrivals']), 'href' => route('frontdesk.visits.index', ['status' => 'expected'])],
            ['label' => 'Waiting', 'value' => number_format($stats['waiting']), 'href' => route('frontdesk.visits.index', ['status' => 'waiting'])],
            ['label' => 'Overdue', 'value' => number_format($stats['overdue']), 'href' => route('frontdesk.visits.index', ['status' => 'overdue'])],
            ['label' => 'Pending Approval', 'value' => number_format($stats['pending_approvals']), 'href' => route('frontdesk.visits.index', ['status' => 'waiting'])],
            ['label' => 'Checked Out', 'value' => number_format($stats['checked_out_today']), 'href' => route('frontdesk.visits.index', ['status' => 'checked_out'])],
            ['label' => 'Deliveries', 'value' => number_format($stats['deliveries_today']), 'href' => route('frontdesk.visits.index')],
        ];
    @endphp

    <div class="mb-6">
        {{-- Mobile: org name with inline action icons --}}
        <div class="flex items-center justify-between gap-3 lg:hidden">
            <h1 class="min-w-0 flex-1 truncate text-lg font-semibold tracking-tight text-slate-900">{{ $organization->name }}</h1>
            <div class="flex shrink-0 items-center gap-2">
                <a href="{{ route('frontdesk.visits.schedule') }}"
                   aria-label="Pre-register visitor"
                   title="Pre-register visitor"
                   class="inline-flex h-10 w-10 items-center justify-center rounded-full border border-slate-200 bg-white text-slate-700 shadow-sm transition hover:border-slate-300 hover:bg-slate-50">
                    <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('frontdesk.visits.create') }}"
                   aria-label="Check in visitor"
                   title="Check in visitor"
                   class="btn-fab h-10 w-10">
                    <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2.5" 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>
            </div>
        </div>

        {{-- Desktop --}}
        <div class="hidden items-center justify-between lg:flex">
            <div>
                <h1 class="text-xl font-semibold text-slate-900">{{ $organization->name }}</h1>
                <p class="text-sm text-slate-500">Reception dashboard</p>
            </div>
            <div class="flex shrink-0 gap-2">
                <a href="{{ route('frontdesk.visits.schedule') }}" class="inline-flex items-center rounded-lg border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">
                    Pre-register
                </a>
                <a href="{{ route('frontdesk.visits.create') }}" class="btn-primary whitespace-nowrap">
                    Check in visitor
                </a>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-2 gap-4 lg:grid-cols-4">
        @foreach ($cards as $card)
            <a href="{{ $card['href'] }}" class="rounded-2xl border border-slate-200 bg-white p-5 transition hover:border-indigo-300 hover:shadow-sm">
                <p class="text-xs font-medium uppercase tracking-wide text-slate-500">{{ $card['label'] }}</p>
                <p class="mt-2 text-2xl font-semibold text-slate-900">{{ $card['value'] }}</p>
                @if (! empty($card['meta']))
                    <p class="mt-1 text-xs text-slate-400">{{ $card['meta'] }}</p>
                @endif
            </a>
        @endforeach
    </div>

    <div class="mt-6 grid gap-6 lg:grid-cols-2">
        <section class="rounded-2xl border border-slate-200 bg-white">
            <div class="flex items-center justify-between border-b border-slate-100 px-5 py-4">
                <h2 class="text-sm font-semibold text-slate-900">Currently inside</h2>
                <a href="{{ route('frontdesk.security.index') }}" class="text-xs font-medium text-indigo-600 hover:text-indigo-700">Security view</a>
            </div>
            @forelse ($currentVisitors as $visit)
                <a href="{{ route('frontdesk.visits.show', $visit) }}" class="flex items-center gap-3 border-b border-slate-50 px-5 py-3 last:border-0 hover:bg-slate-50">
                    <span class="flex h-10 w-10 items-center justify-center rounded-full bg-indigo-50 text-sm font-semibold text-indigo-700">{{ strtoupper(substr($visit->visitor->full_name, 0, 1)) }}</span>
                    <div class="min-w-0 flex-1">
                        <p class="truncate text-sm font-medium text-slate-800">{{ $visit->visitor->full_name }}</p>
                        <p class="truncate text-xs text-slate-400">Host: {{ $visit->host?->name ?? '—' }} · {{ $visit->checked_in_at?->diffForHumans() }}</p>
                    </div>
                </a>
            @empty
                <p class="px-5 py-8 text-center text-sm text-slate-400">No visitors currently inside.</p>
            @endforelse
        </section>

        <section class="rounded-2xl border border-slate-200 bg-white">
            <div class="flex items-center justify-between border-b border-slate-100 px-5 py-4">
                <h2 class="text-sm font-semibold text-slate-900">Expected today</h2>
                <a href="{{ route('frontdesk.visits.calendar') }}" class="text-xs font-medium text-indigo-600 hover:text-indigo-700">Calendar</a>
            </div>
            @forelse ($expectedVisitors as $visit)
                <a href="{{ route('frontdesk.visits.show', $visit) }}" class="flex items-center gap-3 border-b border-slate-50 px-5 py-3 last:border-0 hover:bg-slate-50 @if($visit->status === 'overdue') bg-amber-50/50 @endif">
                    <div class="min-w-0 flex-1">
                        <p class="truncate text-sm font-medium text-slate-800">{{ $visit->visitor->full_name }}</p>
                        <p class="truncate text-xs text-slate-400">{{ $visit->scheduled_at?->format('g:i A') ?? 'TBD' }} · {{ $visit->host?->name }} · {{ str_replace('_', ' ', $visit->status) }}</p>
                    </div>
                </a>
            @empty
                <p class="px-5 py-8 text-center text-sm text-slate-400">No expected arrivals today.</p>
            @endforelse
        </section>

        @if ($pendingApprovals->isNotEmpty())
            <section class="rounded-2xl border border-amber-200 bg-white lg:col-span-2">
                <div class="border-b border-amber-100 px-5 py-4">
                    <h2 class="text-sm font-semibold text-amber-900">Pending approval</h2>
                </div>
                @foreach ($pendingApprovals as $visit)
                    <a href="{{ route('frontdesk.visits.show', $visit) }}" class="flex items-center gap-3 border-b border-slate-50 px-5 py-3 last:border-0 hover:bg-amber-50/50">
                        <div class="min-w-0 flex-1">
                            <p class="truncate text-sm font-medium text-slate-800">{{ $visit->visitor->full_name }}</p>
                            <p class="truncate text-xs text-slate-400">{{ ucfirst(str_replace('_', ' ', $visit->visitor_type)) }} · {{ $visit->host?->name }}</p>
                        </div>
                    </a>
                @endforeach
            </section>
        @endif
    </div>
</x-app-layout>