159 lines
9.1 KiB
PHP
159 lines
9.1 KiB
PHP
<x-app-layout>
|
|
{{-- Container utama: Menggunakan max-w-6xl agar lebih lega dan mx-auto untuk center --}}
|
|
<div class="max-w-6xl mx-auto px-6 py-10 space-y-8">
|
|
|
|
{{-- 1. HEADER SECTION: Diberi jarak mt-4 agar tidak menempel ke atas --}}
|
|
<div class="flex flex-col md:flex-row md:items-end justify-between gap-6 px-2 mt-4">
|
|
<div class="space-y-2">
|
|
<div class="inline-flex items-center gap-2 px-3 py-1 bg-indigo-50 text-indigo-600 rounded-full border border-indigo-100">
|
|
<i class="fas fa-shield-alt text-[10px]"></i>
|
|
<span class="text-[9px] font-black uppercase tracking-widest">Security Module</span>
|
|
</div>
|
|
<h2 class="text-3xl font-black text-slate-800 tracking-tighter uppercase leading-none">Pengelolaan Hak Akses</h2>
|
|
<p class="text-sm text-slate-400 font-medium italic">Konfigurasi matriks perizinan dan otoritas sistem ilycats.</p>
|
|
</div>
|
|
|
|
{{-- Tombol Tambah --}}
|
|
@can('check-access', ['roles', 'create'])
|
|
<div class="shrink-0">
|
|
<a href="{{ route('admin.roles.create') }}" class="inline-flex items-center justify-center px-6 py-3.5 bg-indigo-600 hover:bg-indigo-700 text-white text-[10px] font-black rounded-2xl shadow-xl shadow-indigo-100 transition-all active:scale-95 tracking-widest uppercase">
|
|
<i class="fas fa-plus-circle mr-2 text-base"></i> TAMBAH ROLE BARU
|
|
</a>
|
|
</div>
|
|
@endcan
|
|
</div>
|
|
|
|
{{-- 2. TABEL ROLE: Menggunakan Card dengan shadow yang lebih soft --}}
|
|
<div class="bg-white border border-slate-200 rounded-[3rem] shadow-sm overflow-hidden">
|
|
<div class="overflow-x-auto custom-scrollbar">
|
|
<table class="w-full text-left border-collapse min-w-[800px]">
|
|
<thead class="bg-slate-50 border-b border-slate-100">
|
|
<tr>
|
|
<th class="px-10 py-6 text-[10px] font-black text-slate-400 uppercase tracking-widest">Identitas Hak Akses</th>
|
|
<th class="px-10 py-6 text-[10px] font-black text-slate-400 uppercase tracking-widest">Slug Identitas</th>
|
|
<th class="px-10 py-6 text-[10px] font-black text-slate-400 uppercase tracking-widest text-right">Otoritas Matriks</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-slate-50">
|
|
@foreach($roles as $role)
|
|
<tr class="hover:bg-slate-50/50 transition-all group">
|
|
{{-- Nama Hak Akses --}}
|
|
<td class="px-10 py-6">
|
|
<div class="flex items-center gap-4">
|
|
<div class="w-12 h-12 rounded-2xl bg-slate-100 flex items-center justify-center text-slate-400 group-hover:bg-indigo-600 group-hover:text-white border border-slate-200 group-hover:border-indigo-500 transition-all duration-300 shadow-sm">
|
|
<i class="fas fa-user-tag text-sm"></i>
|
|
</div>
|
|
<div>
|
|
<span class="text-sm font-black text-slate-800 uppercase tracking-tight block">{{ $role->name }}</span>
|
|
<span class="text-[9px] text-slate-400 font-bold uppercase tracking-tighter">Tingkat Hak Akses Sistem</span>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
|
|
{{-- Slug --}}
|
|
<td class="px-10 py-6">
|
|
<span class="px-3 py-1.5 bg-slate-100 text-slate-500 text-[9px] font-black rounded-lg border border-slate-200/60 tracking-wider font-mono">
|
|
{{ $role->slug }}
|
|
</span>
|
|
</td>
|
|
|
|
{{-- Aksi --}}
|
|
<td class="px-10 py-6">
|
|
<div class="flex justify-end items-center gap-3">
|
|
|
|
{{-- Configuration --}}
|
|
@can('check-access', ['roles', 'update'])
|
|
<a href="{{ route('admin.roles.edit', $role->id) }}"
|
|
class="inline-flex items-center gap-2 px-5 py-2.5 bg-white text-indigo-600 border-2 border-indigo-50 hover:bg-indigo-600 hover:text-white hover:border-indigo-600 rounded-xl text-[9px] font-black uppercase tracking-widest transition-all shadow-sm active:scale-95 group/btn">
|
|
<i class="fas fa-cog group-hover/btn:rotate-90 transition-transform duration-500"></i> Configuration
|
|
</a>
|
|
@endcan
|
|
|
|
{{-- Delete --}}
|
|
@can('check-access', ['roles', 'delete'])
|
|
@if($role->slug !== 'admin')
|
|
<form id="delete-form-{{ $role->id }}" action="{{ route('admin.roles.destroy', $role->id) }}" method="POST" class="inline">
|
|
@csrf @method('DELETE')
|
|
<button type="button"
|
|
onclick="confirmDeleteRole({{ $role->id }}, '{{ addslashes($role->name) }}')"
|
|
class="w-10 h-10 flex items-center justify-center text-slate-300 hover:text-rose-600 hover:bg-rose-50 rounded-xl transition-all"
|
|
title="Hapus Role">
|
|
<i class="fas fa-trash-alt text-xs"></i>
|
|
</button>
|
|
</form>
|
|
@endif
|
|
@endcan
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 3. FOOTER INFO: Memberikan kesan seimbang di bawah --}}
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div class="p-6 bg-indigo-900 rounded-[2.5rem] text-white shadow-xl shadow-indigo-100 flex items-center gap-5">
|
|
<div class="w-12 h-12 bg-indigo-800 rounded-2xl flex items-center justify-center text-xl shrink-0">
|
|
<i class="fas fa-info-circle"></i>
|
|
</div>
|
|
<div>
|
|
<p class="text-[10px] font-black uppercase tracking-widest opacity-60 mb-1">Pemberitahuan</p>
|
|
<p class="text-xs font-bold leading-relaxed">Perubahan pada matriks izin akan langsung berdampak pada seluruh staf yang terkait.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-6 bg-slate-50 border border-slate-200 rounded-[2.5rem] flex items-center gap-5 italic">
|
|
<div class="w-12 h-12 bg-white border border-slate-200 rounded-2xl flex items-center justify-center text-slate-400 text-xl shrink-0">
|
|
<i class="fas fa-user-lock"></i>
|
|
</div>
|
|
<div>
|
|
<p class="text-[10px] font-black uppercase tracking-widest text-slate-400 mb-1">Keamanan Data</p>
|
|
<p class="text-xs font-bold text-slate-500">Pastikan role Administrator tidak kehilangan akses Read pada modul Hak Akses.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@push('scripts')
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
|
<script>
|
|
function confirmDeleteRole(id, name) {
|
|
Swal.fire({
|
|
title: 'Hapus Role?',
|
|
html: `Konfirmasi penghapusan permanen untuk:<br><b class="text-rose-600 text-lg">${name}</b>`,
|
|
icon: 'warning',
|
|
showCancelButton: true,
|
|
confirmButtonColor: '#f43f5e',
|
|
cancelButtonColor: '#64748b',
|
|
confirmButtonText: 'Ya, Hapus!',
|
|
cancelButtonText: 'Batal',
|
|
customClass: {
|
|
popup: 'rounded-[2.5rem]',
|
|
title: 'font-black text-slate-800 uppercase tracking-tighter'
|
|
}
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
document.getElementById(`delete-form-${id}`).submit();
|
|
}
|
|
});
|
|
}
|
|
|
|
@if(session('success'))
|
|
Swal.fire({
|
|
icon: 'success',
|
|
title: 'BERHASIL',
|
|
text: "{{ session('success') }}",
|
|
showConfirmButton: false,
|
|
timer: 2500,
|
|
toast: true,
|
|
position: 'top-end',
|
|
customClass: { popup: 'rounded-2xl shadow-xl' }
|
|
});
|
|
@endif
|
|
</script>
|
|
@endpush
|
|
</x-app-layout> |