Initial commit: Struktur aplikasi ilycats
This commit is contained in:
Dwi F Sukmana
@@ -0,0 +1,159 @@
|
||||
<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">Role Management</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 Role</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 Role --}}
|
||||
<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">System Authority Level</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>
|
||||
Reference in New Issue
Block a user