ladill-frontdesk/resources/views/frontdesk/security/index.blade.php

<x-app-layout title="Security Dashboard">
    <div class="flex flex-wrap items-center justify-between gap-3">
        <div>
            <h1 class="text-xl font-semibold text-slate-900">Security dashboard</h1>
            <p class="text-sm text-slate-500">{{ $occupancy->count() }} visitors · {{ $staffOnSite->where('status', 'on_site')->count() }} staff on site · {{ $staffOnSite->where('status', 'stepped_out')->count() }} stepped out</p>
        </div>
        <div class="flex flex-wrap gap-2">
            <a href="{{ route('frontdesk.security.evacuation') }}" class="rounded-lg border border-red-200 bg-red-50 px-4 py-2 text-sm font-medium text-red-700 hover:bg-red-100">
                Evacuation report
            </a>
            <a href="{{ route('frontdesk.security.verify') }}" class="rounded-lg border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">
                Verify badge
            </a>
        </div>
    </div>

    @if ($expiredBadges->isNotEmpty())
        <div class="mt-4 rounded-xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900">
            {{ $expiredBadges->count() }} visitor(s) have expired badges but are still checked in.
        </div>
    @endif

    <h2 class="mt-6 text-sm font-semibold uppercase tracking-wide text-slate-500">Visitors inside</h2>
    <div class="mt-2 overflow-hidden rounded-2xl border border-slate-200 bg-white">
        <table class="min-w-full divide-y divide-slate-100 text-sm">
            <thead class="bg-slate-50 text-left text-xs uppercase text-slate-500">
                <tr>
                    <th class="px-4 py-3">Visitor</th>
                    <th class="px-4 py-3">Host</th>
                    <th class="px-4 py-3">Type</th>
                    <th class="px-4 py-3">Checked in</th>
                    <th class="px-4 py-3">Badge</th>
                    <th class="px-4 py-3"></th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-50">
                @forelse ($occupancy as $visit)
                    <tr class="{{ $visit->isBadgeExpired() ? 'bg-amber-50' : '' }}">
                        <td class="px-4 py-3 font-medium">{{ $visit->visitor->full_name }}</td>
                        <td class="px-4 py-3">{{ $visit->host?->name ?? '—' }}</td>
                        <td class="px-4 py-3 capitalize">{{ str_replace('_', ' ', $visit->visitor_type) }}</td>
                        <td class="px-4 py-3">{{ $visit->checked_in_at?->format('g:i A') }}</td>
                        <td class="px-4 py-3 font-mono">{{ $visit->badge_code }}</td>
                        <td class="px-4 py-3">
                            @if ($canCheckout)
                                <form method="POST" action="{{ route('frontdesk.security.checkout', $visit) }}">
                                    @csrf
                                    <button type="submit" class="text-sm text-indigo-600 hover:text-indigo-800">Check out</button>
                                </form>
                            @endif
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="6" class="px-4 py-6 text-center text-slate-400">No visitors currently inside.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <h2 class="mt-8 text-sm font-semibold uppercase tracking-wide text-slate-500">Staff on premises</h2>
    <div class="mt-2 overflow-hidden rounded-2xl border border-slate-200 bg-white">
        <table class="min-w-full divide-y divide-slate-100 text-sm">
            <thead class="bg-slate-50 text-left text-xs uppercase text-slate-500">
                <tr>
                    <th class="px-4 py-3">Employee</th>
                    <th class="px-4 py-3">Department</th>
                    <th class="px-4 py-3">Status</th>
                    <th class="px-4 py-3">Destination</th>
                    <th class="px-4 py-3">Since</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-50">
                @forelse ($staffOnSite as $presence)
                    <tr class="{{ $presence->status === 'stepped_out' ? 'bg-amber-50/60' : '' }}">
                        <td class="px-4 py-3 font-medium">{{ $presence->employee->full_name }}</td>
                        <td class="px-4 py-3 text-slate-600">{{ $presence->employee->department ?? '—' }}</td>
                        <td class="px-4 py-3">{{ config('frontdesk.employee_presence_statuses.'.$presence->status, $presence->status) }}</td>
                        <td class="px-4 py-3 text-slate-600">{{ $presence->destination ?? '—' }}</td>
                        <td class="px-4 py-3 text-slate-500">{{ $presence->last_event_at?->format('g:i A') ?? '—' }}</td>
                    </tr>
                @empty
                    <tr><td colspan="5" class="px-4 py-6 text-center text-slate-400">No staff signed in.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</x-app-layout>