File Manager

Editing:attendance.blade.php

<x-app-layout>
    <x-slot name="header">
        <div class="flex items-center justify-between">
            <h2 class="text-xl font-semibold leading-tight text-white">
                {{ __('Attendance Overview') }}
            </h2>
            <span class="inline-flex items-center rounded-full bg-white/10 px-3 py-1 text-sm font-medium text-white">
                {{ \Carbon\Carbon::parse($date)->format('l, F j, Y') }}
            </span>
        </div>
    </x-slot>

{{-- Flash Messages --}}
            @if (session('success'))
                <div class="rounded-lg border border-green-200 bg-green-50 p-4">
                    <div class="flex items-center">
                        <svg class="h-5 w-5 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>
                        <p class="text-sm font-medium text-green-800">{{ session('success') }}</p>
                    </div>
                </div>
            @endif

{{-- ============================================================ --}}
            {{-- Date Filter                                                  --}}
            {{-- ============================================================ --}}
            <div class="overflow-hidden rounded-lg bg-white shadow-sm ring-1 ring-gray-900/5">
                <div class="px-6 py-4">
                    <form action="{{ route('admin.attendance') }}" method="GET" class="flex flex-col gap-4 sm:flex-row sm:items-end">
                        <div class="flex-1 max-w-xs">
                            <label for="date" class="block text-sm font-medium text-navy mb-1.5">Select Date</label>
                            <input type="date" name="date" id="date"
                                value="{{ $date }}"
                                class="block w-full rounded-lg border-gray-300 shadow-sm transition focus:border-orange focus:ring-orange sm:text-sm">
                        </div>
                        <div>
                            <button type="submit"
                                class="inline-flex items-center gap-2 rounded-lg bg-navy px-5 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-navy-dark focus:outline-none focus:ring-2 focus:ring-orange focus:ring-offset-2">
                                <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"/></svg>
                                Filter
                            </button>
                        </div>
                        <div class="sm:ml-2">
                            <a href="{{ route('admin.attendance', ['date' => now()->format('Y-m-d')]) }}"
                                class="inline-flex items-center gap-2 rounded-lg bg-gray-100 px-5 py-2.5 text-sm font-medium text-gray-700 transition hover:bg-gray-200">
                                Today
                            </a>
                        </div>
                    </form>
                </div>
            </div>

{{-- ============================================================ --}}
            {{-- Summary Strip                                                --}}
            {{-- ============================================================ --}}
            <div class="grid grid-cols-1 gap-5 sm:grid-cols-3">
                <div class="overflow-hidden rounded-lg bg-white shadow-sm ring-1 ring-gray-900/5 p-5">
                    <div class="flex items-center">
                        <div class="flex-shrink-0 rounded-lg bg-navy p-3">
                            <svg class="h-6 w-6 text-white" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg>
                        </div>
                        <div class="ml-4">
                            <p class="text-sm font-medium text-gray-500">Total Records</p>
                            <p class="text-2xl font-bold text-navy">{{ $records->count() }}</p>
                        </div>
                    </div>
                </div>

<div class="overflow-hidden rounded-lg bg-white shadow-sm ring-1 ring-gray-900/5 p-5">
                    <div class="flex items-center">
                        <div class="flex-shrink-0 rounded-lg bg-green-600 p-3">
                            <svg class="h-6 w-6 text-white" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        </div>
                        <div class="ml-4">
                            <p class="text-sm font-medium text-gray-500">Clocked Out</p>
                            <p class="text-2xl font-bold text-green-700">{{ $records->whereNotNull('clock_out')->count() }}</p>
                        </div>
                    </div>
                </div>

<div class="overflow-hidden rounded-lg bg-white shadow-sm ring-1 ring-gray-900/5 p-5">
                    <div class="flex items-center">
                        <div class="flex-shrink-0 rounded-lg bg-orange p-3">
                            <svg class="h-6 w-6 text-white" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        </div>
                        <div class="ml-4">
                            <p class="text-sm font-medium text-gray-500">Still Working</p>
                            <p class="text-2xl font-bold text-orange">{{ $records->whereNull('clock_out')->count() }}</p>
                        </div>
                    </div>
                </div>
            </div>

{{-- ============================================================ --}}
            {{-- Attendance Table                                             --}}
            {{-- ============================================================ --}}
            <div class="overflow-hidden rounded-lg bg-white shadow-sm ring-1 ring-gray-900/5">
                <div class="border-b border-gray-100 bg-gray-50/50 px-6 py-4">
                    <h3 class="text-base font-semibold text-navy">
                        Attendance for {{ \Carbon\Carbon::parse($date)->format('F j, Y') }}
                    </h3>
                </div>
                <div class="overflow-x-auto">
                    @if($records->count() > 0)
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead>
                                <tr class="bg-gray-50">
                                    <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500">#</th>
                                    <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500">Employee</th>
                                    <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500">Clock In</th>
                                    <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500">Clock Out</th>
                                    <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500">Total Hours</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-100 bg-white">
                                @foreach($records as $index => $record)
                                    <tr class="transition hover:bg-gray-50/50">
                                        <td class="whitespace-nowrap px-6 py-4 text-sm text-gray-400">
                                            {{ $index + 1 }}
                                        </td>
                                        <td class="whitespace-nowrap px-6 py-4">
                                            <div class="flex items-center">
                                                <div class="flex h-9 w-9 items-center justify-center rounded-full bg-navy text-sm font-semibold text-white">
                                                    {{ strtoupper(substr($record->user->name ?? '?', 0, 1)) }}
                                                </div>
                                                <div class="ml-3">
                                                    <p class="text-sm font-medium text-navy">{{ $record->user->name ?? 'Unknown' }}</p>
                                                    <p class="text-xs text-gray-400">{{ $record->user->email ?? '' }}</p>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="whitespace-nowrap px-6 py-4">
                                            <span class="inline-flex items-center gap-1 text-sm text-gray-700">
                                                <svg class="h-4 w-4 text-green-500" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9"/></svg>
                                                {{ $record->clock_in ? \Carbon\Carbon::parse($record->clock_in)->format('h:i A') : '—' }}
                                            </span>
                                        </td>
                                        <td class="whitespace-nowrap px-6 py-4">
                                            @if($record->clock_out)
                                                <span class="inline-flex items-center gap-1 text-sm text-gray-700">
                                                    <svg class="h-4 w-4 text-red-500" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75"/></svg>
                                                    {{ \Carbon\Carbon::parse($record->clock_out)->format('h:i A') }}
                                                </span>
                                            @else
                                                <span class="inline-flex items-center rounded-full bg-orange-light/20 px-2.5 py-0.5 text-xs font-semibold text-orange">
                                                    <svg class="mr-1 h-3 w-3 animate-pulse" fill="currentColor" viewBox="0 0 8 8"><circle cx="4" cy="4" r="3"/></svg>
                                                    Working
                                                </span>
                                            @endif
                                        </td>
                                        <td class="whitespace-nowrap px-6 py-4">
                                            @if($record->total_hours)
                                                <span class="inline-flex items-center rounded-full bg-navy/5 px-2.5 py-0.5 text-sm font-semibold text-navy">
                                                    {{ number_format($record->total_hours, 2) }} hrs
                                                </span>
                                            @elseif($record->clock_in && !$record->clock_out)
                                                @php
                                                    $elapsed = \Carbon\Carbon::parse($record->clock_in)->diffInMinutes(now()) / 60;
                                                @endphp
                                                <span class="inline-flex items-center rounded-full bg-orange-light/20 px-2.5 py-0.5 text-sm font-medium text-orange">
                                                    ~{{ number_format($elapsed, 1) }} hrs
                                                </span>
                                            @else
                                                <span class="text-sm text-gray-400">—</span>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    @else
                        <div class="flex flex-col items-center justify-center py-16 text-center">
                            <svg class="h-16 w-16 text-gray-300 mb-4" fill="none" stroke="currentColor" stroke-width="1" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5"/></svg>
                            <h3 class="text-sm font-semibold text-gray-900 mb-1">No attendance records</h3>
                            <p class="text-sm text-gray-500">No one has clocked in for {{ \Carbon\Carbon::parse($date)->format('F j, Y') }}.</p>
                        </div>
                    @endif
                </div>
            </div>

</div>
    </div>
</x-app-layout>

Cancel

🤩 File Manager - Mr.X

Editing:attendance.blade.php