Magang-2025/Undangan
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Update sidebar & kategori_fitur]

Browse Source
This commit is contained in:
Arief Dwi Wicaksono 2025-09-18 09:00:15 +07:00
parent 642601da4c
commit 35d514749e
5 changed files with 273 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
backend/resources/views/admin/fitur/index.blade.php
View File

@ -6,7 +6,7 @@
<div class="container mx-auto py-4">
<!-- Header -->
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-bold">Manajemen Fitur</h3>
<h3 class="text-xl font-bold">Daftar Fitur</h3>
<button id="openTambahModal" class="bg-blue-600 text-white px-3 py-2.5 rounded flex items-center">
<i class="bi bi-plus-lg mr-1"></i> Tambah Fitur
</button>

4
backend/resources/views/admin/kategori_fitur/create.blade.php
View File

@ -1,4 +1,4 @@
@extends('layouts.app')
{{-- @extends('layouts.app')
@section('title', 'Tambah Kategori Fitur')
@ -15,4 +15,4 @@
<a href="{{ route('admin.kategori_fitur.index') }}" class="ml-2 text-gray-600">Batal</a>
</form>
</div>
@endsection
@endsection --}}

4
backend/resources/views/admin/kategori_fitur/edit.blade.php
View File

@ -1,4 +1,4 @@
@extends('layouts.app')
{{-- @extends('layouts.app')
@section('title', 'Edit Kategori Fitur')
@ -16,4 +16,4 @@
<a href="{{ route('admin.kategori_fitur.index') }}" class="ml-2 text-gray-600">Batal</a>
</form>
</div>
@endsection
@endsection --}}

245
backend/resources/views/admin/kategori_fitur/index.blade.php
View File

@ -1,40 +1,241 @@
@extends('layouts.app')
@section('title', 'Kategori Fitur')
@section('title', 'Manajemen Kategori Fitur')
@section('content')
<div class="container mx-auto py-4">
<h3 class="text-xl font-bold mb-4">Daftar Kategori Fitur</h3>
<a href="{{ route('admin.kategori_fitur.create') }}" class="bg-blue-500 text-white px-4 py-2 rounded">+ Tambah</a>
<!-- Header -->
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-bold">Daftar Kategori Fitur</h3>
<button id="openTambahModal" class="bg-blue-600 text-white px-3 py-2.5 rounded flex items-center">
<i class="bi bi-plus-lg mr-1"></i> Tambah Kategori
</button>
</div>
<table class="w-full mt-4 border">
<thead>
<tr class="bg-gray-200">
<th class="border px-4 py-2">ID</th>
<th class="border px-4 py-2">Deskripsi</th>
<th class="border px-4 py-2">Aksi</th>
<!-- Flash Message -->
@if (session('success'))
<div id="toast-success" class="mb-4 p-3 rounded bg-green-100 text-green-800 border border-green-300 shadow">
{{ session('success') }}
</div>
<script>
setTimeout(() => document.getElementById('toast-success')?.remove(), 3000);
</script>
@endif
@if ($errors->any())
<div id="toast-error" class="mb-4 p-3 rounded bg-red-100 text-red-800 border border-red-300 shadow">
<ul class="list-disc ml-5">
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
<script>
setTimeout(() => document.getElementById('toast-error')?.remove(), 5000);
</script>
@endif
<!-- Tabel Kategori -->
<div class="bg-white rounded-lg shadow-sm">
<div class="p-4 overflow-x-auto">
<table class="w-full table-fixed border border-gray-300 text-left">
<thead class="bg-gray-100">
<tr>
<th class="w-[10%] p-2 border border-gray-300 text-center">ID</th>
<th class="w-[60%] p-2 border border-gray-300 text-center">Deskripsi</th>
<th class="w-[30%] p-2 border border-gray-300 text-center">Aksi</th>
</tr>
</thead>
<tbody>
@foreach($kategoriFitur as $item)
<tr>
<td class="border px-4 py-2">{{ $item->id }}</td>
<td class="border px-4 py-2">{{ $item->deskripsi }}</td>
<td class="border px-4 py-2 flex gap-2">
<a href="{{ route('admin.kategori_fitur.edit', $item->id) }}" class="bg-yellow-500 text-white px-2 py-1 rounded">Edit</a>
<form action="{{ route('admin.kategori_fitur.destroy', $item->id) }}" method="POST" onsubmit="return confirm('Yakin hapus?')">
@csrf
@method('DELETE')
<button class="bg-red-500 text-white px-2 py-1 rounded">Hapus</button>
</form>
@forelse ($kategoriFitur as $item)
<tr class="hover:bg-gray-50">
<td class="py-4 px-2 border border-gray-300 text-center">
{{ $item->id }}
</td>
<td class="py-4 px-2 border border-gray-300">
{{ $item->deskripsi }}
</td>
<td class="py-4 px-2 border border-gray-300 text-center">
<div class="flex justify-center space-x-2">
<button class="text-blue-600 flex items-center pr-4 openEditModalBtn"
data-id="{{ $item->id }}">
<i class="bi bi-pencil mr-1"></i> Ubah
</button>
<button class="text-red-600 flex items-center openDeleteModalBtn"
data-id="{{ $item->id }}">
<i class="bi bi-trash mr-1"></i> Hapus
</button>
</div>
</td>
</tr>
@endforeach
@empty
<tr>
<td colspan="3" class="p-2 text-center text-gray-500">Belum ada kategori fitur</td>
</tr>
@endforelse
</tbody>
</table>
</div>
<div class="mt-4">
<!-- Pagination -->
<div class="p-4 flex justify-center">
{{ $kategoriFitur->links() }}
</div>
</div>
</div>
<!-- Modal Tambah -->
<div id="modalTambah" class="fixed inset-0 hidden items-center justify-center z-50">
<div class="absolute inset-0 bg-black opacity-50" id="closeTambahModal"></div>
<div class="bg-white rounded-lg shadow-lg w-full max-w-md z-50 overflow-hidden">
<form action="{{ route('admin.kategori_fitur.store') }}" method="POST">
@csrf
<div class="p-4 border-b">
<h5 class="text-lg font-medium">Tambah Kategori Fitur</h5>
</div>
<div class="p-4 space-y-4">
<div>
<label class="block text-sm font-medium">Deskripsi</label>
<input type="text" name="deskripsi" class="w-full p-2 border rounded" required>
</div>
</div>
<div class="p-4 border-t flex justify-end space-x-2">
<button type="button" id="closeTambahBtn" class="bg-gray-300 text-black px-3 py-1 rounded">Batal</button>
<button class="bg-blue-600 text-white px-3 py-1 rounded">Simpan</button>
</div>
</form>
</div>
</div>
<!-- Modal Edit -->
@foreach ($kategoriFitur as $item)
<div id="modalEdit{{ $item->id }}" class="fixed inset-0 hidden items-center justify-center z-50">
<div class="absolute inset-0 bg-black opacity-50 closeEditOverlay" data-id="{{ $item->id }}"></div>
<div class="bg-white rounded-lg shadow-lg w-full max-w-md z-50 overflow-hidden">
<form action="{{ route('admin.kategori_fitur.update', $item->id) }}" method="POST">
@csrf
@method('PUT')
<div class="p-4 border-b">
<h5 class="text-lg font-medium">Edit Kategori Fitur</h5>
</div>
<div class="p-4 space-y-4">
<div>
<label class="block text-sm font-medium">Deskripsi</label>
<input type="text" name="deskripsi" value="{{ $item->deskripsi }}" class="w-full p-2 border rounded" required>
</div>
</div>
<div class="p-4 border-t flex justify-end space-x-2">
<button type="button" class="bg-gray-300 text-black px-3 py-1 rounded closeEditBtn"
data-id="{{ $item->id }}">Batal</button>
<button class="bg-blue-600 text-white px-3 py-1 rounded">Simpan Perubahan</button>
</div>
</form>
</div>
</div>
@endforeach
<!-- Modal Hapus -->
@foreach ($kategoriFitur as $item)
<div id="modalDelete{{ $item->id }}" class="fixed inset-0 hidden items-center justify-center z-50">
<div class="absolute inset-0 bg-black opacity-50 closeDeleteOverlay" data-id="{{ $item->id }}"></div>
<div class="bg-white rounded-lg shadow-lg w-full max-w-md z-50 overflow-hidden">
<div class="p-4 border-b">
<h5 class="text-lg font-medium">Hapus Kategori Fitur</h5>
</div>
<div class="p-4">
<p>Apakah Anda yakin ingin menghapus kategori <strong>{{ $item->deskripsi }}</strong>?</p>
</div>
<div class="p-4 border-t flex justify-end space-x-2">
<button type="button" class="bg-gray-300 text-black px-3 py-1 rounded closeDeleteBtn"
data-id="{{ $item->id }}">Batal</button>
<form action="{{ route('admin.kategori_fitur.destroy', $item->id) }}" method="POST" class="inline">
@csrf
@method('DELETE')
<button class="bg-red-600 text-white px-3 py-1 rounded">Hapus</button>
</form>
</div>
</div>
</div>
@endforeach
<script>
// Modal Tambah
const openTambahModal = document.getElementById('openTambahModal');
const modalTambah = document.getElementById('modalTambah');
const closeTambahBtn = document.getElementById('closeTambahBtn');
const closeTambahOverlay = document.getElementById('closeTambahModal');
openTambahModal.addEventListener('click', () => {
modalTambah.classList.remove('hidden');
modalTambah.classList.add('flex');
});
closeTambahBtn.addEventListener('click', () => {
modalTambah.classList.add('hidden');
modalTambah.classList.remove('flex');
});
closeTambahOverlay.addEventListener('click', () => {
modalTambah.classList.add('hidden');
modalTambah.classList.remove('flex');
});
// Modal Edit
const openEditBtns = document.querySelectorAll('.openEditModalBtn');
const closeEditBtns = document.querySelectorAll('.closeEditBtn');
const closeEditOverlays = document.querySelectorAll('.closeEditOverlay');
openEditBtns.forEach(btn => {
btn.addEventListener('click', () => {
const id = btn.dataset.id;
const modal = document.getElementById('modalEdit' + id);
modal.classList.remove('hidden');
modal.classList.add('flex');
});
});
closeEditBtns.forEach(btn => {
btn.addEventListener('click', () => {
const id = btn.dataset.id;
const modal = document.getElementById('modalEdit' + id);
modal.classList.add('hidden');
modal.classList.remove('flex');
});
});
closeEditOverlays.forEach(overlay => {
overlay.addEventListener('click', () => {
const id = overlay.dataset.id;
const modal = document.getElementById('modalEdit' + id);
modal.classList.add('hidden');
modal.classList.remove('flex');
});
});
// Modal Delete
const openDeleteBtns = document.querySelectorAll('.openDeleteModalBtn');
const closeDeleteBtns = document.querySelectorAll('.closeDeleteBtn');
const closeDeleteOverlays = document.querySelectorAll('.closeDeleteOverlay');
openDeleteBtns.forEach(btn => {
btn.addEventListener('click', () => {
const id = btn.dataset.id;
const modal = document.getElementById('modalDelete' + id);
modal.classList.remove('hidden');
modal.classList.add('flex');
});
});
closeDeleteBtns.forEach(btn => {
btn.addEventListener('click', () => {
const id = btn.dataset.id;
const modal = document.getElementById('modalDelete' + id);
modal.classList.add('hidden');
modal.classList.remove('flex');
});
});
closeDeleteOverlays.forEach(overlay => {
overlay.addEventListener('click', () => {
const id = overlay.dataset.id;
const modal = document.getElementById('modalDelete' + id);
modal.classList.add('hidden');
modal.classList.remove('flex');
});
});
</script>
@endsection

45
backend/resources/views/layouts/app.blade.php
View File

@ -61,17 +61,34 @@
<i class="bi bi-diagram-3 me-2"></i> Kategori
</a>
<a href="{{ route('admin.kategori_fitur.index') }}"
class="flex items-center py-2 px-3 rounded hover:bg-blue-50 {{ request()->routeIs('admin.kategori_fitur.*') ? 'bg-blue-100 text-blue-600' : 'text-gray-700' }}">
<i class="bi bi-list-task me-2"></i> Kategori Fitur
</a>
<!-- MANAJEMEN FITUR DROPDOWN -->
<li>
<a href="{{ route('admin.fitur.index') }}"
class="flex items-center py-2 px-3 rounded hover:bg-blue-50 {{ request()->is('admin/fitur*') ? 'bg-blue-100 text-blue-600' : 'text-gray-700' }}">
<i class="bi bi-grid me-2"></i> Fitur
@php
$isFiturPage = request()->is('admin/fitur*') || request()->is('admin/kategori_fitur*');
@endphp
<button
class="w-full flex items-center justify-between py-2 px-3 text-gray-700 rounded hover:bg-blue-50 {{ $isFiturPage ? 'bg-blue-100 text-blue-600' : '' }}"
id="manajemenFiturBtn">
<span><i class="bi bi-grid me-2"></i>Manajemen Fitur</span>
<i class="bi bi-chevron-down transition-transform {{ $isFiturPage ? 'rotate-180' : '' }}"
id="manajemenFiturIcon"></i>
</button>
<ul class="submenu pl-6 space-y-1 {{ $isFiturPage ? 'show' : '' }}" id="manajemenFiturSubmenu">
<li>
<a href="{{ route('admin.kategori_fitur.index') }}"
class="block py-2 px-2 rounded {{ request()->is('admin/kategori_fitur*') ? 'bg-blue-100 text-blue-600' : 'text-gray-500 hover:text-blue-600 hover:bg-blue-50' }}">
Kategori Fitur
</a>
</li>
<li>
<a href="{{ route('admin.fitur.index') }}"
class="block py-2 px-2 rounded {{ request()->is('admin/fitur*') ? 'bg-blue-100 text-blue-600' : 'text-gray-500 hover:text-blue-600 hover:bg-blue-50' }}">
Fitur
</a>
</li>
</ul>
</li>
<!-- Dropdown Templat -->
<li>
@php
@ -80,7 +97,7 @@
<button
class="w-full flex items-center justify-between py-2 px-3 text-gray-700 rounded hover:bg-blue-50 {{ $isTemplatePage ? 'bg-blue-100 text-blue-600' : '' }}"
id="templatBtn">
<span><i class="bi bi-card-list me-2"></i> Templat</span>
<span><i class="bi bi-card-list me-2"></i>Manajemen Templat</span>
<i class="bi bi-chevron-down transition-transform {{ $isTemplatePage ? 'rotate-180' : '' }}"
id="templatIcon"></i>
</button>
@ -147,6 +164,16 @@
templatSubmenu.classList.toggle('show');
templatIcon.classList.toggle('rotate-180');
});
// Dropdown Manajemen Fitur
const manajemenFiturBtn = document.getElementById('manajemenFiturBtn');
const manajemenFiturSubmenu = document.getElementById('manajemenFiturSubmenu');
const manajemenFiturIcon = document.getElementById('manajemenFiturIcon');
manajemenFiturBtn.addEventListener('click', () => {
manajemenFiturSubmenu.classList.toggle('show');
manajemenFiturIcon.classList.toggle('rotate-180');
});
</script>
</body>