Initial commit: Struktur aplikasi ilycats
This commit is contained in:
Dwi F Sukmana
@@ -0,0 +1,153 @@
|
||||
<x-app-layout>
|
||||
<div class="space-y-6 pb-12">
|
||||
{{-- SECTION 1: Header --}}
|
||||
<div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
|
||||
<div>
|
||||
<h2 class="text-3xl font-black text-slate-800 tracking-tight leading-none mb-1 text-uppercase">Audit Trail</h2>
|
||||
<p class="text-sm text-slate-500 font-medium italic uppercase tracking-tighter">Rekaman Aktivitas Staf & Keamanan Sistem</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center gap-3">
|
||||
{{-- Statistik --}}
|
||||
<span class="px-4 py-2 bg-white border border-slate-200 rounded-xl text-[10px] font-black text-slate-400">
|
||||
TOTAL: {{ $logs->total() }} LOGS
|
||||
</span>
|
||||
|
||||
{{-- Export: Font Putih (text-white) --}}
|
||||
<a href="{{ route('admin.logs.export') }}" class="inline-flex items-center px-6 py-4 bg-emerald-50 text-emerald-900 border-2 border-emerald-200 text-[10px] font-black rounded-2xl shadow-sm hover:bg-emerald-600 hover:text-white transition-all uppercase tracking-widest">
|
||||
<i class="fas fa-file-excel mr-2 text-sm text-emerald-600 group-hover:text-white"></i> Export XLSX
|
||||
</a>
|
||||
|
||||
{{-- Reset --}}
|
||||
<form id="clear-logs-form" action="{{ route('admin.logs.clear') }}" method="POST" class="inline">
|
||||
@csrf @method('DELETE')
|
||||
<button type="button" onclick="confirmClearLogs()" class="inline-flex items-center px-5 py-3 bg-rose-50 text-rose-600 border border-rose-100 text-[10px] font-black rounded-2xl hover:bg-rose-100 transition-all uppercase tracking-widest">
|
||||
<i class="fas fa-trash-alt mr-2 text-sm"></i> Clear Data
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- SECTION 2: Filter --}}
|
||||
<div class="bg-white p-5 border border-slate-200 rounded-[2rem] shadow-sm">
|
||||
<form action="{{ route('admin.logs.index') }}" method="GET" class="flex flex-col md:flex-row gap-4">
|
||||
<div class="flex-1 relative">
|
||||
<i class="fas fa-search absolute left-4 top-1/2 -translate-y-1/2 text-slate-400"></i>
|
||||
<input type="text" name="search" value="{{ request('search') }}" placeholder="Cari deskripsi atau nama staf..."
|
||||
class="w-full pl-11 pr-4 py-3.5 bg-slate-50 border border-slate-100 rounded-xl text-xs font-bold text-slate-700 focus:ring-2 focus:ring-indigo-100 transition-all">
|
||||
</div>
|
||||
|
||||
{{-- Opsi Filter --}}
|
||||
<select name="action" class="bg-slate-50 border border-slate-100 rounded-xl text-xs font-bold text-slate-700 px-5 py-3.5 focus:ring-2 focus:ring-indigo-100 transition-all">
|
||||
<option value="">SEMUA AKSI</option>
|
||||
<option value="CREATE" {{ request('action') == 'CREATE' ? 'selected' : '' }}>CREATE (Tambah)</option>
|
||||
<option value="UPDATE" {{ request('action') == 'UPDATE' ? 'selected' : '' }}>UPDATE (Ubah)</option>
|
||||
<option value="DELETE" {{ request('action') == 'DELETE' ? 'selected' : '' }}>DELETE (Hapus)</option>
|
||||
<option value="LOGIN" {{ request('action') == 'LOGIN' ? 'selected' : '' }}>LOGIN</option>
|
||||
</select>
|
||||
|
||||
<button type="submit" class="px-8 py-3.5 bg-slate-900 text-white text-[10px] font-black rounded-xl uppercase hover:bg-black transition-all">Filter</button>
|
||||
@if(request()->anyFilled(['search', 'action']))
|
||||
<a href="{{ route('admin.logs') }}" class="px-4 py-3.5 text-slate-400 hover:text-rose-600 text-[10px] font-black flex items-center transition-all uppercase">Reset</a>
|
||||
@endif
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{{-- SECTION 3: Tabel --}}
|
||||
<div class="bg-white border border-slate-200 rounded-[2.5rem] overflow-hidden shadow-sm">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-left border-collapse">
|
||||
<thead class="bg-slate-50 text-[10px] font-black text-slate-400 uppercase tracking-widest border-b border-slate-100">
|
||||
<tr>
|
||||
<th class="px-6 py-4">Waktu</th>
|
||||
<th class="px-6 py-4">Staf Pelaksana</th>
|
||||
<th class="px-6 py-4 text-center">Aksi</th>
|
||||
<th class="px-6 py-4">Deskripsi Aktivitas</th>
|
||||
<th class="px-6 py-4 text-right">Teknis</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-slate-100 font-medium text-slate-700">
|
||||
@forelse($logs as $log)
|
||||
<tr class="hover:bg-slate-50/50 transition-all group">
|
||||
<td class="px-6 py-4">
|
||||
<p class="text-xs font-black text-slate-800">{{ $log->created_at->format('d/m/Y') }}</p>
|
||||
<p class="text-[10px] text-slate-400 font-bold tracking-tight">{{ $log->created_at->format('H:i:s') }}</p>
|
||||
</td>
|
||||
|
||||
{{-- Inisial: Font Gelap (text-slate-900) di Box Putih --}}
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-xl bg-white border border-slate-200 text-slate-900 flex items-center justify-center font-black text-sm shadow-sm uppercase">
|
||||
{{ substr($log->user->name ?? 'S', 0, 1) }}
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs font-black text-slate-700">{{ $log->user->name ?? 'System' }}</p>
|
||||
<p class="text-[9px] text-slate-400 font-bold uppercase tracking-widest">{{ $log->user->role ?? '-' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td class="px-6 py-4 text-center">
|
||||
@php
|
||||
$action = strtoupper($log->action);
|
||||
$style = 'text-slate-500 bg-slate-50 border-slate-100';
|
||||
if(str_contains($action, 'CREATE')) $style = 'text-emerald-600 bg-emerald-50 border-emerald-100';
|
||||
if(str_contains($action, 'UPDATE')) $style = 'text-blue-600 bg-blue-50 border-blue-100';
|
||||
if(str_contains($action, 'DELETE')) $style = 'text-rose-600 bg-rose-50 border-rose-100';
|
||||
if(str_contains($action, 'LOGIN')) $style = 'text-amber-600 bg-amber-50 border-amber-100';
|
||||
@endphp
|
||||
<span class="px-3 py-1 rounded-lg text-[9px] font-black border uppercase {{ $style }}">
|
||||
{{ $log->action }}
|
||||
</span>
|
||||
</td>
|
||||
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-xs font-bold text-slate-600 leading-relaxed">{{ $log->description }}</span>
|
||||
<span class="text-[9px] text-slate-400 italic">Target: {{ class_basename($log->model) }} (ID: {{ $log->model_id }})</span>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td class="px-6 py-4 text-right">
|
||||
<span class="text-[10px] font-mono font-bold text-slate-500 bg-slate-50 px-2 py-0.5 rounded border border-slate-100">
|
||||
{{ $log->ip_address }}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="5" class="px-6 py-20 text-center text-slate-400 uppercase text-[10px] font-black tracking-widest">
|
||||
Tidak ada log ditemukan
|
||||
</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="p-6 border-t border-slate-100 bg-slate-50/30">
|
||||
{{ $logs->appends(request()->query())->links() }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Script SweetAlert (Tanpa perubahan layout) --}}
|
||||
@push('scripts')
|
||||
<script>
|
||||
function confirmClearLogs() {
|
||||
Swal.fire({
|
||||
title: 'RESET DATA LOG?',
|
||||
html: "Anda akan menghapus <b class='text-rose-600'>SEMUA</b> riwayat aktivitas. Data tidak bisa dikembalikan!",
|
||||
icon: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: '#e11d48',
|
||||
confirmButtonText: 'YA, BERSIHKAN',
|
||||
cancelButtonText: 'BATAL',
|
||||
reverseButtons: true,
|
||||
customClass: { popup: 'rounded-[2.5rem] p-10' }
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) document.getElementById('clear-logs-form').submit();
|
||||
});
|
||||
}
|
||||
</script>
|
||||
@endpush
|
||||
</x-app-layout>
|
||||
@@ -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>
|
||||
@@ -0,0 +1,196 @@
|
||||
<x-app-layout>
|
||||
<div class="max-w-5xl mx-auto space-y-8 pb-12">
|
||||
{{-- Header --}}
|
||||
<div class="px-2 flex justify-between items-end">
|
||||
<div>
|
||||
<h2 class="text-2xl font-black text-slate-800 tracking-tight leading-none mb-1">Pengaturan Identitas</h2>
|
||||
<p class="text-sm text-slate-500 font-medium italic">Personalisasi branding & konfigurasi sistem.</p>
|
||||
</div>
|
||||
<div class="hidden md:block">
|
||||
<span class="px-4 py-2 bg-white border border-slate-100 rounded-2xl text-[10px] font-black text-slate-400 uppercase tracking-widest shadow-sm">
|
||||
Server Time: {{ now()->format('H:i') }} WIB
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form action="{{ route('admin.settings.update') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
|
||||
@csrf
|
||||
|
||||
{{-- Card 1: Visual Branding --}}
|
||||
<div class="bg-white rounded-[2.5rem] border border-slate-100 shadow-sm p-8 md:p-10">
|
||||
<div class="flex items-center gap-4 mb-10">
|
||||
<div class="w-12 h-12 bg-indigo-50 text-indigo-600 rounded-2xl flex items-center justify-center shadow-sm">
|
||||
<i class="fas fa-paint-brush text-xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-sm font-black text-slate-800 uppercase tracking-wider">Visual Branding</h3>
|
||||
<p class="text-[10px] text-slate-400 font-bold italic">Logo utama dan ikon browser (Favicon).</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-10">
|
||||
{{-- Logo --}}
|
||||
<div class="space-y-4" x-data="{ photoName: null, photoPreview: null }">
|
||||
<label class="block text-[10px] font-black text-slate-400 uppercase tracking-widest ms-4">Logo Utama (512x512)</label>
|
||||
<div class="flex items-center gap-6 bg-slate-50 p-4 rounded-[2rem] border border-slate-100 transition-all hover:border-indigo-100">
|
||||
<div class="w-20 h-20 bg-white rounded-2xl shadow-sm flex items-center justify-center overflow-hidden shrink-0 border border-slate-100">
|
||||
<template x-if="!photoPreview">
|
||||
@if(isset($settings['app_logo']))
|
||||
<img src="{{ Storage::url($settings['app_logo']) }}" class="w-full h-full object-cover">
|
||||
@else
|
||||
<i class="fas fa-image text-slate-200 text-2xl"></i>
|
||||
@endif
|
||||
</template>
|
||||
<template x-if="photoPreview">
|
||||
<img :src="photoPreview" class="w-full h-full object-cover">
|
||||
</template>
|
||||
</div>
|
||||
<div class="flex-grow">
|
||||
<input type="file" name="app_logo" class="hidden" x-ref="logoInput"
|
||||
@change="
|
||||
photoName = $refs.logoInput.files[0].name;
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => { photoPreview = e.target.result; };
|
||||
reader.readAsDataURL($refs.logoInput.files[0]);
|
||||
">
|
||||
<button type="button" @click="$refs.logoInput.click()" class="text-[10px] font-black bg-white border border-slate-200 text-slate-600 px-4 py-2 rounded-full hover:bg-slate-100 transition-all">
|
||||
GANTI LOGO
|
||||
</button>
|
||||
@error('app_logo') <p class="text-[9px] text-rose-500 mt-2 font-bold uppercase tracking-tighter">{{ $message }}</p> @enderror
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Favicon --}}
|
||||
<div class="space-y-4" x-data="{ favName: null, favPreview: null }">
|
||||
<label class="block text-[10px] font-black text-slate-400 uppercase tracking-widest ms-4">Favicon (128x128)</label>
|
||||
<div class="flex items-center gap-6 bg-slate-50 p-4 rounded-[2rem] border border-slate-100 transition-all hover:border-indigo-100">
|
||||
<div class="w-20 h-20 bg-white rounded-2xl shadow-sm flex items-center justify-center overflow-hidden shrink-0 border border-slate-100">
|
||||
<template x-if="!favPreview">
|
||||
@if(isset($settings['app_favicon']))
|
||||
<img src="{{ Storage::url($settings['app_favicon']) }}" class="w-full h-full object-cover">
|
||||
@else
|
||||
<i class="fas fa-cat text-slate-200 text-2xl"></i>
|
||||
@endif
|
||||
</template>
|
||||
<template x-if="favPreview">
|
||||
<img :src="favPreview" class="w-full h-full object-cover">
|
||||
</template>
|
||||
</div>
|
||||
<div class="flex-grow">
|
||||
<input type="file" name="app_favicon" class="hidden" x-ref="favInput"
|
||||
@change="
|
||||
favName = $refs.favInput.files[0].name;
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => { favPreview = e.target.result; };
|
||||
reader.readAsDataURL($refs.favInput.files[0]);
|
||||
">
|
||||
<button type="button" @click="$refs.favInput.click()" class="text-[10px] font-black bg-white border border-slate-200 text-slate-600 px-4 py-2 rounded-full hover:bg-slate-100 transition-all">
|
||||
GANTI FAVICON
|
||||
</button>
|
||||
@error('app_favicon') <p class="text-[9px] text-rose-500 mt-2 font-bold uppercase tracking-tighter">{{ $message }}</p> @enderror
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Card 2: Informasi Aplikasi --}}
|
||||
<div class="bg-white rounded-[2.5rem] border border-slate-100 shadow-sm p-8 md:p-10">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div class="md:col-span-1">
|
||||
<label class="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 ms-4">Nama Brand</label>
|
||||
<input type="text" name="app_name" value="{{ $settings['app_name'] ?? 'Ily Cattery' }}"
|
||||
class="w-full bg-slate-50 border-none rounded-full px-8 py-4 text-sm font-bold text-slate-700 focus:ring-2 focus:ring-indigo-100 shadow-inner">
|
||||
@error('app_name') <p class="text-[9px] text-rose-500 mt-1 ms-4 font-bold uppercase">{{ $message }}</p> @enderror
|
||||
</div>
|
||||
<div class="md:col-span-1">
|
||||
<label class="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 ms-4">Versi Sistem</label>
|
||||
<input type="text" name="app_version" value="{{ $settings['app_version'] ?? '1.0.0' }}"
|
||||
class="w-full bg-slate-50 border-none rounded-full px-8 py-4 text-sm font-bold text-slate-700 focus:ring-2 focus:ring-indigo-100 shadow-inner">
|
||||
@error('app_version') <p class="text-[9px] text-rose-500 mt-1 ms-4 font-bold uppercase">{{ $message }}</p> @enderror
|
||||
</div>
|
||||
<div class="md:col-span-1">
|
||||
<label class="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 ms-4">Slogan</label>
|
||||
<input type="text" name="app_slogan" value="{{ $settings['app_slogan'] ?? '' }}"
|
||||
class="w-full bg-slate-50 border-none rounded-full px-8 py-4 text-sm font-bold text-slate-700 focus:ring-2 focus:ring-indigo-100 shadow-inner" placeholder="E.g: Premium Quality">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Card 3: Status Layanan --}}
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{{-- WA Status --}}
|
||||
<div class="bg-white rounded-[2rem] border border-slate-100 shadow-sm p-6 flex items-center justify-between group hover:border-emerald-100 transition-all">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-12 h-12 {{ $waStatus['active'] ? 'bg-emerald-50 text-emerald-600' : 'bg-rose-50 text-rose-600' }} rounded-2xl flex items-center justify-center transition-transform group-hover:scale-110">
|
||||
<i class="fab fa-whatsapp text-xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-[10px] font-black text-slate-400 uppercase tracking-widest">WhatsApp Gateway</h4>
|
||||
<p class="text-xs font-black {{ $waStatus['active'] ? 'text-emerald-700' : 'text-rose-700' }}">
|
||||
{{ $waStatus['active'] ? 'Terhubung (Kuota: '.$waStatus['quota'].')' : 'Terputus' }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@if(!$waStatus['active']) <i class="fas fa-exclamation-circle text-rose-300 animate-pulse"></i> @endif
|
||||
</div>
|
||||
|
||||
{{-- Email Status --}}
|
||||
<div class="bg-white rounded-[2rem] border border-slate-100 shadow-sm p-6 flex items-center justify-between group hover:border-indigo-100 transition-all">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-12 h-12 {{ $emailStatus['active'] ? 'bg-indigo-50 text-indigo-600' : 'bg-rose-50 text-rose-600' }} rounded-2xl flex items-center justify-center transition-transform group-hover:scale-110">
|
||||
<i class="fas fa-envelope text-xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-[10px] font-black text-slate-400 uppercase tracking-widest">SMTP Email</h4>
|
||||
<p class="text-xs font-black {{ $emailStatus['active'] ? 'text-indigo-700' : 'text-rose-700' }}">
|
||||
{{ $emailStatus['active'] ? 'Service Online' : 'Konfigurasi Salah' }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end pt-4">
|
||||
<button type="submit" class="bg-slate-900 hover:bg-indigo-600 text-white font-black py-5 px-14 rounded-full text-[11px] uppercase tracking-[0.3em] shadow-xl shadow-slate-200 transition-all active:scale-95 flex items-center gap-3">
|
||||
<i class="fas fa-save text-sm"></i>
|
||||
Simpan Perubahan
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{{-- Log Aktivitas --}}
|
||||
<div class="bg-white rounded-[2.5rem] border border-slate-100 shadow-sm overflow-hidden">
|
||||
<div class="px-10 py-6 border-b border-slate-50 bg-slate-50/50 flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<i class="fas fa-history text-indigo-400 text-xs"></i>
|
||||
<h3 class="text-[10px] font-black text-slate-600 uppercase tracking-widest">Jejak Perubahan</h3>
|
||||
</div>
|
||||
<span class="text-[9px] font-bold text-slate-400 uppercase">Limit: 5 History</span>
|
||||
</div>
|
||||
<div class="divide-y divide-slate-50 px-6">
|
||||
@forelse($logs as $log)
|
||||
<div class="py-5 px-4 flex items-center justify-between hover:bg-slate-50/50 transition-all rounded-2xl">
|
||||
<div class="flex items-center gap-5">
|
||||
<div class="w-1.5 h-1.5 rounded-full bg-indigo-400 shadow-[0_0_8px_rgba(129,140,248,0.8)]"></div>
|
||||
<div>
|
||||
<p class="text-[11px] font-bold text-slate-600">
|
||||
<span class="text-slate-900 uppercase tracking-tight">{{ $log->user->name }}</span>
|
||||
<span class="mx-1 text-slate-400">—</span>
|
||||
<span class="italic text-slate-500 font-medium">{{ $log->description }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-[9px] font-black text-slate-300 uppercase tracking-tighter">{{ $log->created_at->diffForHumans() }}</span>
|
||||
</div>
|
||||
@empty
|
||||
<div class="py-16 text-center">
|
||||
<i class="fas fa-clipboard-list text-slate-100 text-4xl mb-4"></i>
|
||||
<p class="text-[10px] font-black text-slate-300 uppercase tracking-widest">Belum ada catatan aktivitas</p>
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
Reference in New Issue
Block a user