feat: UI premium Hak Akses Role
- Per group: card terpisah dengan gradient header + icon - Role columns: badge dengan icon (crown untuk admin) - Checkbox: toggle button blue modern dengan ikon check - Hover: gradient biru tipis di baris + icon group berubah warna - Save section: gradient card dengan shadow - Transisi mulus semua interaksi
This commit is contained in:
Bro
@@ -3,77 +3,155 @@
|
||||
@section('title', 'Hak Akses Role')
|
||||
|
||||
@section('content')
|
||||
<div class="max-w-5xl mx-auto">
|
||||
<div class="max-w-6xl mx-auto">
|
||||
{{-- Header --}}
|
||||
<div class="mb-6">
|
||||
<h1 class="text-2xl font-bold text-gray-900">Hak Akses Role</h1>
|
||||
<h1 class="text-2xl font-bold text-gray-900 tracking-tight">Hak Akses Role</h1>
|
||||
<p class="text-sm text-gray-500 mt-1">Atur permission/fitur apa saja yang bisa diakses oleh setiap role pengguna.</p>
|
||||
</div>
|
||||
|
||||
@if (session('success'))
|
||||
<div class="mb-4 p-4 bg-green-50 border border-green-200 rounded-lg text-sm text-green-700">{{ session('success') }}</div>
|
||||
<div class="mb-5 rounded-2xl bg-emerald-50 border border-emerald-200 shadow-sm p-4">
|
||||
<div class="flex items-center gap-3 text-sm font-medium text-emerald-700">
|
||||
<div class="w-7 h-7 rounded-lg bg-emerald-100 flex items-center justify-center">
|
||||
<i class="fa-solid fa-check text-emerald-500 text-xs"></i>
|
||||
</div>
|
||||
{{ session('success') }}
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<form method="POST" action="{{ route('settings.permissions.update') }}">
|
||||
@csrf
|
||||
|
||||
<div class="overflow-x-auto bg-white rounded-xl shadow-sm border border-gray-200">
|
||||
<table class="w-full text-sm">
|
||||
<thead>
|
||||
<tr class="bg-gray-50 border-b border-gray-200">
|
||||
<th class="text-left px-4 py-3 font-semibold text-gray-700">Permission</th>
|
||||
@foreach ($roles as $role)
|
||||
@php
|
||||
$label = [
|
||||
'admin' => 'Admin',
|
||||
'bk' => 'BK',
|
||||
'wali_kelas' => 'Wali Kelas',
|
||||
'staff' => 'Staff',
|
||||
'other' => 'Other (Guest)',
|
||||
][$role] ?? ucfirst($role);
|
||||
@endphp
|
||||
<th class="text-center px-3 py-3 font-semibold text-gray-700">{{ $label }}</th>
|
||||
@endforeach
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach ($permissions as $group => $groupPermissions)
|
||||
<tr class="bg-gray-100 border-b border-gray-200">
|
||||
<td colspan="{{ count($roles) + 1 }}" class="px-4 py-2 font-bold text-gray-700 uppercase text-xs tracking-wider">
|
||||
{{ $group === 'master-data' ? 'Master Data' : ($group === 'administrasi' ? 'Administrasi' : $group) }}
|
||||
</td>
|
||||
</tr>
|
||||
@foreach ($groupPermissions as $perm)
|
||||
<tr class="border-b border-gray-100 hover:bg-gray-50">
|
||||
<td class="px-4 py-3">
|
||||
<div class="font-medium text-gray-800">{{ $perm->label }}</div>
|
||||
<div class="text-xs text-gray-400 font-mono">{{ $perm->key }}</div>
|
||||
</td>
|
||||
@foreach ($roles as $role)
|
||||
<div class="space-y-6">
|
||||
@foreach ($permissions as $group => $groupPermissions)
|
||||
@php
|
||||
$groupLabels = [
|
||||
'akses' => ['Akses Umum', 'fa-door-open', 'blue'],
|
||||
'pelanggaran' => ['Pelanggaran', 'fa-triangle-exclamation', 'red'],
|
||||
'data' => ['Data Master', 'fa-database', 'violet'],
|
||||
'presensi' => ['Presensi', 'fa-clipboard-check', 'emerald'],
|
||||
'master-data' => ['Master Data', 'fa-gear', 'slate'],
|
||||
'administrasi' => ['Administrasi', 'fa-shield-halved', 'amber'],
|
||||
];
|
||||
$gl = $groupLabels[$group] ?? [ucfirst($group), 'fa-circle', 'gray'];
|
||||
@endphp
|
||||
<div class="rounded-2xl bg-white border border-gray-200 shadow-sm overflow-hidden transition-all duration-200 hover:shadow-md">
|
||||
{{-- Group header --}}
|
||||
<div class="px-5 py-3.5 bg-gradient-to-r from-{{ $gl[2] }}-50 to-white border-b border-gray-100">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<div class="w-8 h-8 rounded-xl bg-gradient-to-br from-{{ $gl[2] }}-500 to-{{ $gl[2] }}-600 flex items-center justify-center shadow-sm">
|
||||
<i class="fa-solid {{ $gl[1] }} text-white text-xs"></i>
|
||||
</div>
|
||||
<span class="text-sm font-bold text-gray-800">{{ $gl[0] }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Table --}}
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-sm">
|
||||
<thead>
|
||||
<tr class="bg-gray-50/80 border-b border-gray-100">
|
||||
<th class="text-left px-5 py-3 text-[11px] font-bold text-gray-400 uppercase tracking-wider min-w-[200px]">Permission</th>
|
||||
@foreach ($roles as $role)
|
||||
@php
|
||||
$roleLabels = [
|
||||
'admin' => ['Admin', 'blue'],
|
||||
'bk' => ['BK', 'indigo'],
|
||||
'wali_kelas' => ['Wali Kelas', 'emerald'],
|
||||
'staff' => ['Staff', 'amber'],
|
||||
'other' => ['Guest', 'gray'],
|
||||
];
|
||||
$rl = $roleLabels[$role] ?? [ucfirst($role), 'gray'];
|
||||
@endphp
|
||||
<th class="text-center px-3 py-3 min-w-[100px]">
|
||||
<div class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-{{ $rl[1] }}-50 border border-{{ $rl[1] }}-200 shadow-sm">
|
||||
@if($role === 'admin')
|
||||
<i class="fa-solid fa-crown text-[10px] text-{{ $rl[1] }}-500"></i>
|
||||
@else
|
||||
<i class="fa-solid fa-user text-[10px] text-{{ $rl[1] }}-500"></i>
|
||||
@endif
|
||||
<span class="text-[11px] font-bold text-{{ $rl[1] }}-700 whitespace-nowrap">{{ $rl[0] }}</span>
|
||||
</div>
|
||||
</th>
|
||||
@endforeach
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-50">
|
||||
@foreach ($groupPermissions as $perm)
|
||||
@php
|
||||
$checked = in_array($perm->id, $rolePermissions[$role] ?? []);
|
||||
$disabled = ($role === 'admin');
|
||||
$allChecked = true;
|
||||
foreach ($roles as $role) {
|
||||
if ($role !== 'admin' && !in_array($perm->id, $rolePermissions[$role] ?? [])) {
|
||||
$allChecked = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
@endphp
|
||||
<td class="text-center px-3 py-3">
|
||||
<input type="checkbox"
|
||||
name="permissions[{{ $role }}][]"
|
||||
value="{{ $perm->id }}"
|
||||
{{ $checked ? 'checked' : '' }}
|
||||
{{ $disabled ? 'disabled' : '' }}
|
||||
class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500 cursor-pointer">
|
||||
</td>
|
||||
<tr class="hover:bg-gradient-to-r hover:from-blue-50/30 hover:to-white transition-all duration-100 group">
|
||||
<td class="px-5 py-3.5">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded-lg bg-gray-100 flex items-center justify-center group-hover:bg-blue-100 transition-all duration-200">
|
||||
<i class="fa-solid fa-check text-xs text-gray-400 group-hover:text-blue-500 transition-colors"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm font-semibold text-gray-800">{{ $perm->label }}</div>
|
||||
<div class="text-[10px] text-gray-400 font-mono mt-0.5">{{ $perm->key }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
@foreach ($roles as $role)
|
||||
@php
|
||||
$checked = in_array($perm->id, $rolePermissions[$role] ?? []);
|
||||
$disabled = ($role === 'admin');
|
||||
@endphp
|
||||
<td class="text-center px-3 py-3.5">
|
||||
@if($disabled)
|
||||
<div class="inline-flex items-center justify-center w-9 h-9 rounded-lg bg-blue-50 border border-blue-200">
|
||||
<i class="fa-solid fa-lock text-xs text-blue-400"></i>
|
||||
</div>
|
||||
@else
|
||||
<label class="relative inline-flex items-center justify-center w-9 h-9 rounded-lg border-2 transition-all duration-150 cursor-pointer
|
||||
{{ $checked ? 'bg-blue-500 border-blue-500 shadow-sm shadow-blue-200' : 'bg-white border-gray-200 hover:border-blue-300 hover:bg-blue-50' }}"
|
||||
onclick="this.querySelector('input').click(); return false;">
|
||||
<input type="checkbox"
|
||||
name="permissions[{{ $role }}][]"
|
||||
value="{{ $perm->id }}"
|
||||
{{ $checked ? 'checked' : '' }}
|
||||
onchange="this.parentElement.className = 'relative inline-flex items-center justify-center w-9 h-9 rounded-lg border-2 transition-all duration-150 cursor-pointer ' + (this.checked ? 'bg-blue-500 border-blue-500 shadow-sm shadow-blue-200' : 'bg-white border-gray-200 hover:border-blue-300 hover:bg-blue-50');"
|
||||
class="sr-only">
|
||||
@if($checked)
|
||||
<i class="fa-solid fa-check text-white text-xs"></i>
|
||||
@endif
|
||||
</label>
|
||||
@endif
|
||||
</td>
|
||||
@endforeach
|
||||
</tr>
|
||||
@endforeach
|
||||
</tr>
|
||||
@endforeach
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<div class="mt-6 flex items-center justify-between">
|
||||
<p class="text-xs text-gray-400">Role <strong>Admin</strong> selalu memiliki semua hak akses (tidak bisa diubah).</p>
|
||||
<button type="submit" class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition font-medium">
|
||||
Simpan Hak Akses
|
||||
</button>
|
||||
{{-- Bottom bar --}}
|
||||
<div class="mt-8 rounded-2xl bg-gradient-to-br from-white to-gray-50/50 border border-gray-200 shadow-sm p-5">
|
||||
<div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
|
||||
<div class="flex items-center gap-3 text-xs text-gray-400">
|
||||
<div class="w-8 h-8 rounded-lg bg-blue-50 border border-blue-200 flex items-center justify-center">
|
||||
<i class="fa-solid fa-crown text-xs text-blue-500"></i>
|
||||
</div>
|
||||
<span>Role <strong class="text-gray-600">Admin</strong> selalu memiliki semua hak akses <span class="text-gray-300">(tidak bisa diubah)</span>.</span>
|
||||
</div>
|
||||
<button type="submit"
|
||||
class="inline-flex items-center gap-2 px-6 py-3 text-sm font-bold text-white bg-gradient-to-r from-blue-600 to-blue-700 rounded-xl hover:from-blue-700 hover:to-blue-800 transition-all duration-200 shadow-md hover:shadow-lg">
|
||||
<i class="fa-solid fa-floppy-disk text-xs"></i>
|
||||
Simpan Hak Akses
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user