Initial commit: Struktur aplikasi ilycats
This commit is contained in:
Dwi F Sukmana
@@ -0,0 +1,55 @@
|
||||
<x-app-layout>
|
||||
<div class="py-12">
|
||||
<div class="max-w-3xl mx-auto sm:px-6 lg:px-8">
|
||||
<div class="bg-white shadow-xl rounded-[2rem] overflow-hidden border border-slate-100">
|
||||
|
||||
{{-- Header --}}
|
||||
<div class="p-8 border-b border-slate-100 flex justify-between items-center bg-slate-50/50">
|
||||
<div>
|
||||
<h2 class="text-2xl font-black text-slate-900 tracking-tight">Tambah Role Baru</h2>
|
||||
<p class="text-slate-500 font-medium">Definisikan tingkat otoritas pengguna baru.</p>
|
||||
</div>
|
||||
<a href="{{ route('admin.roles.index') }}" class="text-xs font-bold text-slate-400 hover:text-slate-600 transition-colors uppercase tracking-widest italic">Batal</a>
|
||||
</div>
|
||||
|
||||
<form action="{{ route('admin.roles.store') }}" method="POST" class="p-8 space-y-6">
|
||||
@csrf
|
||||
|
||||
{{-- Nama Role --}}
|
||||
<div class="space-y-2">
|
||||
<label for="name" class="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] ml-1">Nama Role</label>
|
||||
<input type="text" name="name" id="name" required placeholder="Contoh: Manager Operasional"
|
||||
class="block w-full px-5 py-4 bg-slate-50 border border-slate-200 rounded-2xl text-slate-900 font-semibold focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500/20 transition-all">
|
||||
<x-input-error :messages="$errors->get('name')" class="mt-1" />
|
||||
</div>
|
||||
|
||||
{{-- Slug Role --}}
|
||||
<div class="space-y-2">
|
||||
<label for="slug" class="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] ml-1">Slug (ID Sistem)</label>
|
||||
<input type="text" name="slug" id="slug" required placeholder="contoh: manager-ops"
|
||||
class="block w-full px-5 py-4 bg-slate-50 border border-slate-200 rounded-2xl text-slate-400 font-mono text-sm focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500/20 transition-all">
|
||||
<p class="text-[10px] text-slate-400 italic ml-1">*Slug digunakan sistem untuk identifikasi rute dan middleware.</p>
|
||||
<x-input-error :messages="$errors->get('slug')" class="mt-1" />
|
||||
</div>
|
||||
|
||||
<div class="pt-4">
|
||||
<button type="submit" class="w-full py-4 bg-slate-900 text-white rounded-2xl font-black text-xs uppercase tracking-[0.3em] hover:bg-indigo-700 shadow-2xl shadow-indigo-600/20 transition-all active:scale-[0.98]">
|
||||
<i class="fas fa-plus-circle mr-2"></i> Buat & Lanjut Atur Izin
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Script Sederhana untuk Auto-Slug --}}
|
||||
<script>
|
||||
const nameInput = document.getElementById('name');
|
||||
const slugInput = document.getElementById('slug');
|
||||
|
||||
nameInput.addEventListener('keyup', function() {
|
||||
let text = this.value;
|
||||
slugInput.value = text.toLowerCase().replace(/ /g, '-').replace(/[^\w-]+/g, '');
|
||||
});
|
||||
</script>
|
||||
</x-app-layout>
|
||||
@@ -0,0 +1,71 @@
|
||||
<x-app-layout>
|
||||
<div class="py-12">
|
||||
{{-- Lebar kontainer ditingkatkan ke 6xl agar tabel memiliki ruang lebih --}}
|
||||
<div class="max-w-6xl mx-auto sm:px-6 lg:px-8">
|
||||
<div class="bg-white shadow-xl rounded-[2rem] overflow-hidden border border-slate-100">
|
||||
|
||||
{{-- Header Card --}}
|
||||
<div class="p-6 md:p-8 border-b border-slate-100 flex flex-col md:flex-row justify-between items-start md:items-center bg-slate-50/50 gap-4">
|
||||
<div>
|
||||
<h2 class="text-2xl font-black text-slate-900 tracking-tight">Konfigurasi Hak Akses</h2>
|
||||
<p class="text-slate-500 font-medium text-sm">
|
||||
Role: <span class="text-indigo-600 font-bold uppercase tracking-widest">{{ $role->name }}</span>
|
||||
</p>
|
||||
</div>
|
||||
<a href="{{ route('admin.roles.index') }}" class="text-xs font-bold text-slate-400 hover:text-slate-600 transition-colors uppercase tracking-widest italic flex items-center">
|
||||
<i class="fas fa-arrow-left mr-2"></i> Kembali
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<form action="{{ route('admin.roles.update', $role->id) }}" method="POST" class="p-6 md:p-8">
|
||||
@csrf
|
||||
|
||||
{{-- Wrapper untuk Horizontal Scroll agar tidak terpotong di Mobile --}}
|
||||
<div class="overflow-x-auto rounded-2xl border border-slate-200 shadow-sm mb-8">
|
||||
<table class="w-full text-sm text-left border-collapse min-w-[600px]">
|
||||
<thead class="bg-slate-900 text-white uppercase text-xs font-black tracking-widest">
|
||||
<tr>
|
||||
{{-- Padding disesuaikan (py-4 px-6) agar seimbang --}}
|
||||
<th class="py-4 px-6 whitespace-nowrap">Modul Sistem</th>
|
||||
<th class="py-4 px-6 text-center whitespace-nowrap">Read</th>
|
||||
<th class="py-4 px-6 text-center whitespace-nowrap">Create</th>
|
||||
<th class="py-4 px-6 text-center whitespace-nowrap">Update</th>
|
||||
<th class="py-4 px-6 text-center whitespace-nowrap">Delete</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-slate-100">
|
||||
@foreach($modules as $slug => $label)
|
||||
<tr class="group hover:bg-indigo-50/40 transition-all">
|
||||
<td class="py-4 px-6">
|
||||
<span class="font-bold text-slate-700 block">{{ $label }}</span>
|
||||
<span class="text-[10px] text-slate-400 font-mono uppercase">{{ $slug }}</span>
|
||||
</td>
|
||||
|
||||
@foreach(['read', 'create', 'update', 'delete'] as $action)
|
||||
<td class="py-4 px-6 text-center">
|
||||
<div class="flex justify-center">
|
||||
<input type="checkbox"
|
||||
name="perms[{{ $slug }}][{{ $action }}]"
|
||||
value="1"
|
||||
class="w-5 h-5 rounded-lg border-slate-300 text-indigo-600 shadow-sm focus:ring-4 focus:ring-indigo-500/10 cursor-pointer transition-all"
|
||||
{{ $role->hasPermission($slug, 'can_'.$action) ? 'checked' : '' }}>
|
||||
</div>
|
||||
</td>
|
||||
@endforeach
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{{-- Tombol Simpan --}}
|
||||
<div class="flex justify-end pt-4 border-t border-slate-100">
|
||||
<button type="submit" class="w-full sm:w-auto px-12 py-4 bg-slate-900 text-white rounded-2xl font-black text-xs uppercase tracking-[0.2em] hover:bg-indigo-700 shadow-xl shadow-indigo-600/20 transition-all active:scale-95 flex items-center justify-center">
|
||||
<i class="fas fa-save mr-3"></i> Simpan Perubahan Izin
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
@@ -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