Add hero sections to Visits, Hosts, Employees, Devices, Branches, and Team index pages.
Deploy Ladill Frontdesk / deploy (push) Successful in 1m3s
Deploy Ladill Frontdesk / deploy (push) Successful in 1m3s
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
isaacclad
@@ -0,0 +1,39 @@
|
||||
@props([
|
||||
'badge',
|
||||
'title',
|
||||
'description' => null,
|
||||
'stats' => [],
|
||||
])
|
||||
|
||||
<div {{ $attributes->merge(['class' => 'relative overflow-hidden rounded-2xl border border-slate-200 bg-white']) }}>
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-indigo-50/80 via-white to-violet-50/60"></div>
|
||||
<div class="relative px-6 py-8 sm:px-10">
|
||||
<div class="flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
|
||||
<div class="max-w-xl">
|
||||
<div class="inline-flex items-center gap-1.5 rounded-full bg-indigo-100 px-3 py-1 text-xs font-semibold text-indigo-700">
|
||||
{{ $badge }}
|
||||
</div>
|
||||
<h1 class="mt-3 text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl">{{ $title }}</h1>
|
||||
@if ($description)
|
||||
<p class="mt-2 text-sm leading-6 text-slate-600">{{ $description }}</p>
|
||||
@endif
|
||||
@isset($actions)
|
||||
<div class="mt-6 flex flex-wrap items-center gap-2">
|
||||
{{ $actions }}
|
||||
</div>
|
||||
@endisset
|
||||
</div>
|
||||
|
||||
@if (count($stats) > 0)
|
||||
<div class="scrollbar-hide flex snap-x snap-mandatory gap-3 overflow-x-auto pb-2 sm:grid sm:grid-cols-3 sm:overflow-visible sm:pb-0 lg:gap-4" style="-ms-overflow-style:none;scrollbar-width:none;">
|
||||
@foreach ($stats as $stat)
|
||||
<div class="mobile-stats-card shrink-0 snap-start rounded-xl border border-slate-200 bg-white/90 px-4 py-3 text-center backdrop-blur-sm">
|
||||
<p class="whitespace-nowrap text-xl font-bold text-slate-900 sm:text-2xl">{{ $stat['value'] }}</p>
|
||||
<p class="mt-0.5 whitespace-nowrap text-[11px] font-medium text-slate-500">{{ $stat['label'] }}</p>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,25 +1,49 @@
|
||||
<x-app-layout title="Branches">
|
||||
<div class="flex items-center justify-between">
|
||||
<h1 class="text-xl font-semibold text-slate-900">Branches</h1>
|
||||
@if (app(\App\Services\Frontdesk\FrontdeskPermissions::class)->can(auth()->user() ? app(\App\Services\Frontdesk\OrganizationResolver::class)->memberFor(auth()->user(), $organization) : null, 'admin.branches.manage'))
|
||||
<a href="{{ route('frontdesk.branches.create') }}" class="btn-primary">Add branch</a>
|
||||
@endif
|
||||
</div>
|
||||
@php
|
||||
$canManageBranches = app(\App\Services\Frontdesk\FrontdeskPermissions::class)->can(
|
||||
auth()->user() ? app(\App\Services\Frontdesk\OrganizationResolver::class)->memberFor(auth()->user(), $organization) : null,
|
||||
'admin.branches.manage'
|
||||
);
|
||||
@endphp
|
||||
|
||||
<div class="mt-4 space-y-3">
|
||||
@forelse ($branches as $branch)
|
||||
<div class="flex items-center justify-between rounded-2xl border border-slate-200 bg-white p-4">
|
||||
<div>
|
||||
<p class="font-medium text-slate-900">{{ $branch->name }}</p>
|
||||
<p class="text-sm text-slate-500">{{ $branch->address ?? 'No address' }} · {{ $branch->buildings_count }} building(s)</p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<a href="{{ route('frontdesk.buildings.index', $branch) }}" class="text-sm text-indigo-600 hover:text-indigo-700">Buildings</a>
|
||||
<a href="{{ route('frontdesk.branches.edit', $branch) }}" class="text-sm text-slate-600 hover:text-slate-800">Edit</a>
|
||||
</div>
|
||||
<x-app-layout title="Branches">
|
||||
<div class="space-y-6">
|
||||
<x-frontdesk.page-hero
|
||||
badge="Locations · Buildings · Reception desks"
|
||||
title="Branches"
|
||||
description="Organize your sites, buildings, and reception desks so visits and devices stay scoped to the right location."
|
||||
:stats="[
|
||||
['value' => number_format($heroStats['total']), 'label' => 'Branches'],
|
||||
['value' => number_format($heroStats['active']), 'label' => 'Active'],
|
||||
['value' => number_format($heroStats['buildings']), 'label' => 'Buildings'],
|
||||
]">
|
||||
@if ($canManageBranches)
|
||||
<x-slot name="actions">
|
||||
<a href="{{ route('frontdesk.branches.create') }}" class="btn-primary">
|
||||
<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="M12 4.5v15m7.5-7.5h-15"/></svg>
|
||||
Add branch
|
||||
</a>
|
||||
</x-slot>
|
||||
@endif
|
||||
</x-frontdesk.page-hero>
|
||||
|
||||
<div class="overflow-hidden rounded-2xl border border-slate-200 bg-white">
|
||||
<div class="border-b border-slate-100 px-6 py-4">
|
||||
<h2 class="text-sm font-semibold text-slate-900">All branches</h2>
|
||||
</div>
|
||||
@empty
|
||||
<p class="text-sm text-slate-500">No branches yet.</p>
|
||||
@endforelse
|
||||
@forelse ($branches as $branch)
|
||||
<div class="flex items-center justify-between border-b border-slate-50 px-6 py-4 last:border-b-0">
|
||||
<div>
|
||||
<p class="font-medium text-slate-900">{{ $branch->name }}</p>
|
||||
<p class="text-sm text-slate-500">{{ $branch->address ?? 'No address' }} · {{ $branch->buildings_count }} building(s)</p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<a href="{{ route('frontdesk.buildings.index', $branch) }}" class="text-sm text-indigo-600 hover:text-indigo-700">Buildings</a>
|
||||
<a href="{{ route('frontdesk.branches.edit', $branch) }}" class="text-sm text-slate-600 hover:text-slate-800">Edit</a>
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<p class="px-6 py-10 text-center text-sm text-slate-500">No branches yet.</p>
|
||||
@endforelse
|
||||
</div>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
|
||||
@@ -1,36 +1,53 @@
|
||||
<x-app-layout title="Team members">
|
||||
<div class="flex items-center justify-between">
|
||||
<h1 class="text-xl font-semibold text-slate-900">Team members</h1>
|
||||
<a href="{{ route('frontdesk.members.create') }}" class="btn-primary">Add member</a>
|
||||
</div>
|
||||
<x-app-layout title="Team">
|
||||
<div class="space-y-6">
|
||||
<x-frontdesk.page-hero
|
||||
badge="Roles · Access · Branch scope"
|
||||
title="Team"
|
||||
description="Invite colleagues, assign Frontdesk roles, and limit branch access for reception and security staff."
|
||||
:stats="[
|
||||
['value' => number_format($heroStats['total']), 'label' => 'Members'],
|
||||
['value' => number_format($heroStats['admins']), 'label' => 'Administrators'],
|
||||
['value' => number_format($heroStats['branch_scoped']), 'label' => 'Branch-scoped'],
|
||||
]">
|
||||
<x-slot name="actions">
|
||||
<a href="{{ route('frontdesk.members.create') }}" class="btn-primary">
|
||||
<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="M12 4.5v15m7.5-7.5h-15"/></svg>
|
||||
Add member
|
||||
</a>
|
||||
</x-slot>
|
||||
</x-frontdesk.page-hero>
|
||||
|
||||
<div class="mt-4 overflow-hidden rounded-2xl border border-slate-200 bg-white">
|
||||
<table class="min-w-full text-sm">
|
||||
<thead class="bg-slate-50 text-left text-xs uppercase text-slate-500">
|
||||
<tr><th class="px-4 py-3">Member</th><th class="px-4 py-3">Role</th><th class="px-4 py-3">Branch</th><th class="px-4 py-3"></th></tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-slate-50">
|
||||
@foreach ($members as $member)
|
||||
@php
|
||||
$display = str_contains($member->user_ref, '@')
|
||||
? $member->user_ref
|
||||
: (\App\Models\User::where('public_id', $member->user_ref)->value('email') ?? $member->user_ref);
|
||||
@endphp
|
||||
<tr>
|
||||
<td class="px-4 py-3 text-sm">{{ $display }}</td>
|
||||
<td class="px-4 py-3">{{ $roles[$member->role] ?? $member->role }}</td>
|
||||
<td class="px-4 py-3">{{ $member->branch?->name ?? 'All branches' }}</td>
|
||||
<td class="px-4 py-3 text-right">
|
||||
@if ($member->user_ref !== auth()->user()->public_id)
|
||||
<form method="POST" action="{{ route('frontdesk.members.destroy', $member) }}" class="inline" onsubmit="return confirm('Remove this member?')">
|
||||
@csrf @method('DELETE')
|
||||
<button type="submit" class="text-red-600">Remove</button>
|
||||
</form>
|
||||
@endif
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="overflow-hidden rounded-2xl border border-slate-200 bg-white">
|
||||
<div class="border-b border-slate-100 px-6 py-4">
|
||||
<h2 class="text-sm font-semibold text-slate-900">Team members</h2>
|
||||
</div>
|
||||
<table class="min-w-full text-sm">
|
||||
<thead class="bg-slate-50 text-left text-xs uppercase text-slate-500">
|
||||
<tr><th class="px-4 py-3">Member</th><th class="px-4 py-3">Role</th><th class="px-4 py-3">Branch</th><th class="px-4 py-3"></th></tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-slate-50">
|
||||
@foreach ($members as $member)
|
||||
@php
|
||||
$display = str_contains($member->user_ref, '@')
|
||||
? $member->user_ref
|
||||
: (\App\Models\User::where('public_id', $member->user_ref)->value('email') ?? $member->user_ref);
|
||||
@endphp
|
||||
<tr>
|
||||
<td class="px-4 py-3 text-sm">{{ $display }}</td>
|
||||
<td class="px-4 py-3">{{ $roles[$member->role] ?? $member->role }}</td>
|
||||
<td class="px-4 py-3">{{ $member->branch?->name ?? 'All branches' }}</td>
|
||||
<td class="px-4 py-3 text-right">
|
||||
@if ($member->user_ref !== auth()->user()->public_id)
|
||||
<form method="POST" action="{{ route('frontdesk.members.destroy', $member) }}" class="inline" onsubmit="return confirm('Remove this member?')">
|
||||
@csrf @method('DELETE')
|
||||
<button type="submit" class="text-red-600">Remove</button>
|
||||
</form>
|
||||
@endif
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
|
||||
@@ -1,58 +1,73 @@
|
||||
<x-app-layout title="Devices">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 class="text-xl font-semibold text-slate-900">Devices</h1>
|
||||
<p class="text-sm text-slate-500">Kiosks, printers, and reception hardware</p>
|
||||
</div>
|
||||
@if ($canManage)
|
||||
<a href="{{ route('frontdesk.devices.create') }}" class="btn-primary">Add device</a>
|
||||
@endif
|
||||
</div>
|
||||
<div class="space-y-6">
|
||||
<x-frontdesk.page-hero
|
||||
badge="Kiosks · Printers · Reception hardware"
|
||||
title="Devices"
|
||||
description="Register and monitor kiosks, badge printers, and reception hardware across your branches."
|
||||
:stats="[
|
||||
['value' => number_format($heroStats['total']), 'label' => 'Devices'],
|
||||
['value' => number_format($heroStats['online']), 'label' => 'Online'],
|
||||
['value' => number_format($heroStats['kiosks']), 'label' => 'Kiosks'],
|
||||
]">
|
||||
@if ($canManage)
|
||||
<x-slot name="actions">
|
||||
<a href="{{ route('frontdesk.devices.create') }}" class="btn-primary">
|
||||
<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="M12 4.5v15m7.5-7.5h-15"/></svg>
|
||||
Add device
|
||||
</a>
|
||||
</x-slot>
|
||||
@endif
|
||||
</x-frontdesk.page-hero>
|
||||
|
||||
<div class="mt-4 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">Name</th>
|
||||
<th class="px-4 py-3">Type</th>
|
||||
<th class="px-4 py-3">Status</th>
|
||||
<th class="px-4 py-3">Desk / branch</th>
|
||||
<th class="px-4 py-3">Last online</th>
|
||||
<th class="px-4 py-3"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-slate-50">
|
||||
@forelse ($devices as $device)
|
||||
<div class="overflow-hidden rounded-2xl border border-slate-200 bg-white">
|
||||
<div class="border-b border-slate-100 px-6 py-4">
|
||||
<h2 class="text-sm font-semibold text-slate-900">All devices</h2>
|
||||
</div>
|
||||
<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>
|
||||
<td class="px-4 py-3 font-medium">{{ $device->name }}</td>
|
||||
<td class="px-4 py-3 text-slate-600">{{ $deviceTypes[$device->type] ?? $device->type }}</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="inline-flex rounded-full px-2 py-0.5 text-xs font-medium {{ $device->isOnline() ? 'bg-emerald-100 text-emerald-800' : 'bg-slate-100 text-slate-600' }}">
|
||||
{{ $device->isOnline() ? 'Online' : ucfirst($device->status) }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-slate-600">
|
||||
{{ $device->receptionDesk?->name ?? '—' }}
|
||||
@if ($device->branch)
|
||||
<span class="text-slate-400">· {{ $device->branch->name }}</span>
|
||||
@endif
|
||||
</td>
|
||||
<td class="px-4 py-3 text-slate-500">{{ $device->last_online_at?->diffForHumans() ?? 'Never' }}</td>
|
||||
<td class="px-4 py-3 text-right">
|
||||
@if ($canManage)
|
||||
<a href="{{ route('frontdesk.devices.edit', $device) }}" class="text-indigo-700 hover:underline">Edit</a>
|
||||
@endif
|
||||
@if ($device->type === 'kiosk' && $device->device_token)
|
||||
<a href="{{ route('frontdesk.kiosk.device', $device->device_token) }}" target="_blank" class="ml-3 text-indigo-700 hover:underline">Open kiosk</a>
|
||||
@endif
|
||||
</td>
|
||||
<th class="px-4 py-3">Name</th>
|
||||
<th class="px-4 py-3">Type</th>
|
||||
<th class="px-4 py-3">Status</th>
|
||||
<th class="px-4 py-3">Desk / branch</th>
|
||||
<th class="px-4 py-3">Last online</th>
|
||||
<th class="px-4 py-3"></th>
|
||||
</tr>
|
||||
@empty
|
||||
<tr><td colspan="6" class="px-4 py-8 text-center text-slate-500">No devices registered yet.</td></tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-slate-50">
|
||||
@forelse ($devices as $device)
|
||||
<tr>
|
||||
<td class="px-4 py-3 font-medium">{{ $device->name }}</td>
|
||||
<td class="px-4 py-3 text-slate-600">{{ $deviceTypes[$device->type] ?? $device->type }}</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="inline-flex rounded-full px-2 py-0.5 text-xs font-medium {{ $device->isOnline() ? 'bg-emerald-100 text-emerald-800' : 'bg-slate-100 text-slate-600' }}">
|
||||
{{ $device->isOnline() ? 'Online' : ucfirst($device->status) }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-slate-600">
|
||||
{{ $device->receptionDesk?->name ?? '—' }}
|
||||
@if ($device->branch)
|
||||
<span class="text-slate-400">· {{ $device->branch->name }}</span>
|
||||
@endif
|
||||
</td>
|
||||
<td class="px-4 py-3 text-slate-500">{{ $device->last_online_at?->diffForHumans() ?? 'Never' }}</td>
|
||||
<td class="px-4 py-3 text-right">
|
||||
@if ($canManage)
|
||||
<a href="{{ route('frontdesk.devices.edit', $device) }}" class="text-indigo-700 hover:underline">Edit</a>
|
||||
@endif
|
||||
@if ($device->type === 'kiosk' && $device->device_token)
|
||||
<a href="{{ route('frontdesk.kiosk.device', $device->device_token) }}" target="_blank" class="ml-3 text-indigo-700 hover:underline">Open kiosk</a>
|
||||
@endif
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr><td colspan="6" class="px-4 py-8 text-center text-slate-500">No devices registered yet.</td></tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
@if ($devices->hasPages())
|
||||
<div class="border-t border-slate-100 px-5 py-3">{{ $devices->links() }}</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ $devices->links() }}
|
||||
</x-app-layout>
|
||||
|
||||
@@ -1,54 +1,71 @@
|
||||
<x-app-layout title="Employees">
|
||||
<div class="flex flex-wrap items-center justify-between gap-3">
|
||||
<h1 class="text-xl font-semibold text-slate-900">Employees</h1>
|
||||
<div class="flex gap-2">
|
||||
<a href="{{ route('frontdesk.employees.export.attendance') }}" class="rounded-lg border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Export attendance</a>
|
||||
<a href="{{ route('frontdesk.employees.import') }}" class="rounded-lg border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Import CSV</a>
|
||||
<a href="{{ route('frontdesk.employees.create') }}" class="btn-primary">Add employee</a>
|
||||
<div class="space-y-6">
|
||||
<x-frontdesk.page-hero
|
||||
badge="Staff sign-in · Presence · Attendance"
|
||||
title="Employees"
|
||||
description="Register staff who sign in at the kiosk, track on-site presence, and export attendance records."
|
||||
:stats="[
|
||||
['value' => number_format($heroStats['total']), 'label' => 'Employees'],
|
||||
['value' => number_format($heroStats['on_site']), 'label' => 'On site'],
|
||||
['value' => number_format($heroStats['active']), 'label' => 'Active'],
|
||||
]">
|
||||
<x-slot name="actions">
|
||||
<a href="{{ route('frontdesk.employees.export.attendance') }}" class="btn-secondary">Export attendance</a>
|
||||
<a href="{{ route('frontdesk.employees.import') }}" class="btn-secondary">Import CSV</a>
|
||||
<a href="{{ route('frontdesk.employees.create') }}" class="btn-primary">
|
||||
<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="M12 4.5v15m7.5-7.5h-15"/></svg>
|
||||
Add employee
|
||||
</a>
|
||||
</x-slot>
|
||||
</x-frontdesk.page-hero>
|
||||
|
||||
<div class="overflow-hidden rounded-2xl border border-slate-200 bg-white">
|
||||
<div class="border-b border-slate-100 px-6 py-4">
|
||||
<h2 class="text-sm font-semibold text-slate-900">All employees</h2>
|
||||
</div>
|
||||
<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">Name</th>
|
||||
<th class="px-4 py-3">Code</th>
|
||||
<th class="px-4 py-3">Department</th>
|
||||
<th class="px-4 py-3">Status</th>
|
||||
<th class="px-4 py-3"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-slate-50">
|
||||
@forelse ($employees as $employee)
|
||||
@php
|
||||
$presence = $employee->presence;
|
||||
$status = $presence?->status ?? 'off_site';
|
||||
$statusLabel = config('frontdesk.employee_presence_statuses.'.$status, $status);
|
||||
@endphp
|
||||
<tr>
|
||||
<td class="px-4 py-3 font-medium">{{ $employee->full_name }}</td>
|
||||
<td class="px-4 py-3 font-mono text-slate-600">{{ $employee->employee_code }}</td>
|
||||
<td class="px-4 py-3 text-slate-600">{{ $employee->department ?? '—' }}</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="rounded-full px-2.5 py-0.5 text-xs font-medium
|
||||
{{ $status === 'on_site' ? 'bg-emerald-50 text-emerald-700' : ($status === 'stepped_out' ? 'bg-amber-50 text-amber-800' : 'bg-slate-100 text-slate-600') }}">
|
||||
{{ $statusLabel }}
|
||||
</span>
|
||||
@if ($presence?->destination)
|
||||
<span class="mt-0.5 block text-xs text-slate-400">{{ $presence->destination }}</span>
|
||||
@endif
|
||||
</td>
|
||||
<td class="px-4 py-3 text-right">
|
||||
<a href="{{ route('frontdesk.employees.badge', $employee) }}" target="_blank" class="text-sm text-slate-600">Badge</a>
|
||||
<a href="{{ route('frontdesk.employees.edit', $employee) }}" class="ml-3 text-sm text-indigo-600">Edit</a>
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr><td colspan="5" class="px-4 py-8 text-center text-slate-400">No employees yet. Add staff who will sign in at the kiosk.</td></tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
@if ($employees->hasPages())
|
||||
<div class="border-t border-slate-100 px-5 py-3">{{ $employees->links() }}</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 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">Name</th>
|
||||
<th class="px-4 py-3">Code</th>
|
||||
<th class="px-4 py-3">Department</th>
|
||||
<th class="px-4 py-3">Status</th>
|
||||
<th class="px-4 py-3"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-slate-50">
|
||||
@forelse ($employees as $employee)
|
||||
@php
|
||||
$presence = $employee->presence;
|
||||
$status = $presence?->status ?? 'off_site';
|
||||
$statusLabel = config('frontdesk.employee_presence_statuses.'.$status, $status);
|
||||
@endphp
|
||||
<tr>
|
||||
<td class="px-4 py-3 font-medium">{{ $employee->full_name }}</td>
|
||||
<td class="px-4 py-3 font-mono text-slate-600">{{ $employee->employee_code }}</td>
|
||||
<td class="px-4 py-3 text-slate-600">{{ $employee->department ?? '—' }}</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="rounded-full px-2.5 py-0.5 text-xs font-medium
|
||||
{{ $status === 'on_site' ? 'bg-emerald-50 text-emerald-700' : ($status === 'stepped_out' ? 'bg-amber-50 text-amber-800' : 'bg-slate-100 text-slate-600') }}">
|
||||
{{ $statusLabel }}
|
||||
</span>
|
||||
@if ($presence?->destination)
|
||||
<span class="mt-0.5 block text-xs text-slate-400">{{ $presence->destination }}</span>
|
||||
@endif
|
||||
</td>
|
||||
<td class="px-4 py-3 text-right">
|
||||
<a href="{{ route('frontdesk.employees.badge', $employee) }}" target="_blank" class="text-sm text-slate-600">Badge</a>
|
||||
<a href="{{ route('frontdesk.employees.edit', $employee) }}" class="ml-3 text-sm text-indigo-600">Edit</a>
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr><td colspan="5" class="px-4 py-8 text-center text-slate-400">No employees yet. Add staff who will sign in at the kiosk.</td></tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="mt-4">{{ $employees->links() }}</div>
|
||||
</x-app-layout>
|
||||
|
||||
@@ -1,36 +1,55 @@
|
||||
<x-app-layout title="Host directory">
|
||||
<div class="flex items-center justify-between">
|
||||
<h1 class="text-xl font-semibold text-slate-900">Host directory</h1>
|
||||
<a href="{{ route('frontdesk.hosts.create') }}" class="btn-primary">Add host</a>
|
||||
</div>
|
||||
<div class="space-y-6">
|
||||
<x-frontdesk.page-hero
|
||||
badge="Host directory · Notifications · Departments"
|
||||
title="Hosts"
|
||||
description="Manage the people visitors come to see — hosts receive arrival alerts and approve visits."
|
||||
:stats="[
|
||||
['value' => number_format($heroStats['total']), 'label' => 'Hosts'],
|
||||
['value' => number_format($heroStats['available']), 'label' => 'Available'],
|
||||
['value' => number_format($heroStats['departments']), 'label' => 'Departments'],
|
||||
]">
|
||||
<x-slot name="actions">
|
||||
<a href="{{ route('frontdesk.hosts.create') }}" class="btn-primary">
|
||||
<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="M12 4.5v15m7.5-7.5h-15"/></svg>
|
||||
Add host
|
||||
</a>
|
||||
</x-slot>
|
||||
</x-frontdesk.page-hero>
|
||||
|
||||
<div class="mt-4 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">Name</th>
|
||||
<th class="px-4 py-3">Department</th>
|
||||
<th class="px-4 py-3">Office</th>
|
||||
<th class="px-4 py-3">Contact</th>
|
||||
<th class="px-4 py-3"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-slate-50">
|
||||
@forelse ($hosts as $host)
|
||||
<div class="overflow-hidden rounded-2xl border border-slate-200 bg-white">
|
||||
<div class="border-b border-slate-100 px-6 py-4">
|
||||
<h2 class="text-sm font-semibold text-slate-900">All hosts</h2>
|
||||
</div>
|
||||
<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>
|
||||
<td class="px-4 py-3 font-medium">{{ $host->name }}</td>
|
||||
<td class="px-4 py-3 text-slate-600">{{ $host->department ?? '—' }}</td>
|
||||
<td class="px-4 py-3 text-slate-600">{{ $host->office ?? '—' }}</td>
|
||||
<td class="px-4 py-3 text-slate-600">{{ $host->email ?? $host->phone ?? '—' }}</td>
|
||||
<td class="px-4 py-3 text-right">
|
||||
<a href="{{ route('frontdesk.hosts.edit', $host) }}" class="text-sm text-indigo-600">Edit</a>
|
||||
</td>
|
||||
<th class="px-4 py-3">Name</th>
|
||||
<th class="px-4 py-3">Department</th>
|
||||
<th class="px-4 py-3">Office</th>
|
||||
<th class="px-4 py-3">Contact</th>
|
||||
<th class="px-4 py-3"></th>
|
||||
</tr>
|
||||
@empty
|
||||
<tr><td colspan="4" class="px-4 py-8 text-center text-slate-400">No hosts yet. Add your first host to enable visitor notifications.</td></tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-slate-50">
|
||||
@forelse ($hosts as $host)
|
||||
<tr>
|
||||
<td class="px-4 py-3 font-medium">{{ $host->name }}</td>
|
||||
<td class="px-4 py-3 text-slate-600">{{ $host->department ?? '—' }}</td>
|
||||
<td class="px-4 py-3 text-slate-600">{{ $host->office ?? '—' }}</td>
|
||||
<td class="px-4 py-3 text-slate-600">{{ $host->email ?? $host->phone ?? '—' }}</td>
|
||||
<td class="px-4 py-3 text-right">
|
||||
<a href="{{ route('frontdesk.hosts.edit', $host) }}" class="text-sm text-indigo-600">Edit</a>
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr><td colspan="5" class="px-4 py-8 text-center text-slate-400">No hosts yet. Add your first host to enable visitor notifications.</td></tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
@if ($hosts->hasPages())
|
||||
<div class="border-t border-slate-100 px-5 py-3">{{ $hosts->links() }}</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4">{{ $hosts->links() }}</div>
|
||||
</x-app-layout>
|
||||
|
||||
@@ -1,51 +1,65 @@
|
||||
<x-app-layout title="Visit history">
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<h1 class="min-w-0 flex-1 truncate text-lg font-semibold text-slate-900 lg:text-xl">Visits</h1>
|
||||
@include('frontdesk.partials.reception-quick-actions', [
|
||||
'desktopSchedule' => 'Schedule',
|
||||
'desktopCheckIn' => 'Check in',
|
||||
'scheduleLabel' => 'Schedule visit',
|
||||
'checkInLabel' => 'Check in visitor',
|
||||
])
|
||||
</div>
|
||||
<div class="space-y-6">
|
||||
<x-frontdesk.page-hero
|
||||
badge="Check-in · Badges · Visit history"
|
||||
title="Visits"
|
||||
description="Track visitor arrivals, scheduled appointments, and on-site activity across your locations."
|
||||
:stats="[
|
||||
['value' => number_format($heroStats['on_site']), 'label' => 'On site now'],
|
||||
['value' => number_format($heroStats['today']), 'label' => 'Checked in today'],
|
||||
['value' => number_format($heroStats['total']), 'label' => 'All visits'],
|
||||
]">
|
||||
<x-slot name="actions">
|
||||
<a href="{{ route('frontdesk.visits.schedule') }}" class="btn-secondary">Schedule visit</a>
|
||||
<a href="{{ route('frontdesk.visits.create') }}" class="btn-primary">
|
||||
<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="M12 4.5v15m7.5-7.5h-15"/></svg>
|
||||
Check in visitor
|
||||
</a>
|
||||
</x-slot>
|
||||
</x-frontdesk.page-hero>
|
||||
|
||||
<form method="GET" class="mt-4 flex gap-2">
|
||||
<input type="search" name="q" value="{{ request('q') }}" placeholder="Search visitors…" class="rounded-lg border-slate-300 text-sm">
|
||||
<select name="status" class="rounded-lg border-slate-300 text-sm">
|
||||
<option value="">All statuses</option>
|
||||
@foreach (config('frontdesk.visit_statuses') as $key => $label)
|
||||
<option value="{{ $key }}" @selected(request('status') === $key)>{{ $label }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
<button type="submit" class="rounded-lg border border-slate-200 px-4 py-2 text-sm">Filter</button>
|
||||
</form>
|
||||
<form method="GET" class="flex flex-wrap gap-2">
|
||||
<input type="search" name="q" value="{{ request('q') }}" placeholder="Search visitors…" class="rounded-lg border-slate-300 text-sm">
|
||||
<select name="status" class="rounded-lg border-slate-300 text-sm">
|
||||
<option value="">All statuses</option>
|
||||
@foreach (config('frontdesk.visit_statuses') as $key => $label)
|
||||
<option value="{{ $key }}" @selected(request('status') === $key)>{{ $label }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
<button type="submit" class="rounded-lg border border-slate-200 px-4 py-2 text-sm">Filter</button>
|
||||
</form>
|
||||
|
||||
<div class="mt-4 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">Status</th>
|
||||
<th class="px-4 py-3">Time</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-slate-50">
|
||||
@forelse ($visits as $visit)
|
||||
<tr class="hover:bg-slate-50">
|
||||
<td class="px-4 py-3"><a href="{{ route('frontdesk.visits.show', $visit) }}" class="font-medium text-indigo-700">{{ $visit->visitor->full_name }}</a></td>
|
||||
<td class="px-4 py-3 text-slate-600">{{ $visit->host?->name ?? '—' }}</td>
|
||||
<td class="px-4 py-3 capitalize text-slate-600">{{ str_replace('_', ' ', $visit->visitor_type) }}</td>
|
||||
<td class="px-4 py-3 capitalize text-slate-600">{{ str_replace('_', ' ', $visit->status) }}</td>
|
||||
<td class="px-4 py-3 text-slate-500">{{ $visit->checked_in_at?->format('M j, g:i A') ?? $visit->scheduled_at?->format('M j, g:i A') ?? $visit->created_at->format('M j, g:i A') }}</td>
|
||||
<div class="overflow-hidden rounded-2xl border border-slate-200 bg-white">
|
||||
<div class="border-b border-slate-100 px-6 py-4">
|
||||
<h2 class="text-sm font-semibold text-slate-900">Visit history</h2>
|
||||
</div>
|
||||
<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">Status</th>
|
||||
<th class="px-4 py-3">Time</th>
|
||||
</tr>
|
||||
@empty
|
||||
<tr><td colspan="5" class="px-4 py-8 text-center text-slate-400">No visits yet.</td></tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-slate-50">
|
||||
@forelse ($visits as $visit)
|
||||
<tr class="hover:bg-slate-50">
|
||||
<td class="px-4 py-3"><a href="{{ route('frontdesk.visits.show', $visit) }}" class="font-medium text-indigo-700">{{ $visit->visitor->full_name }}</a></td>
|
||||
<td class="px-4 py-3 text-slate-600">{{ $visit->host?->name ?? '—' }}</td>
|
||||
<td class="px-4 py-3 capitalize text-slate-600">{{ str_replace('_', ' ', $visit->visitor_type) }}</td>
|
||||
<td class="px-4 py-3 capitalize text-slate-600">{{ str_replace('_', ' ', $visit->status) }}</td>
|
||||
<td class="px-4 py-3 text-slate-500">{{ $visit->checked_in_at?->format('M j, g:i A') ?? $visit->scheduled_at?->format('M j, g:i A') ?? $visit->created_at->format('M j, g:i A') }}</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr><td colspan="5" class="px-4 py-8 text-center text-slate-400">No visits yet.</td></tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
@if ($visits->hasPages())
|
||||
<div class="border-t border-slate-100 px-5 py-3">{{ $visits->links() }}</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">{{ $visits->links() }}</div>
|
||||
</x-app-layout>
|
||||
|
||||
Reference in New Issue
Block a user