FIx desain

This commit is contained in:
Muzakki Parsaoran Siregar 2025-09-04 10:03:10 +07:00
parent ead36a80de
commit 5c59fffc5c
4 changed files with 266 additions and 218 deletions

View File

@ -15,23 +15,23 @@
<!-- Tabel Fitur --> <!-- Tabel Fitur -->
<div class="bg-white rounded-lg shadow-sm"> <div class="bg-white rounded-lg shadow-sm">
<div class="p-4"> <div class="p-4">
<table class="w-full table-auto text-left"> <table class="w-full table-fixed border border-gray-300 text-left">
<thead class="bg-gray-100"> <thead class="bg-gray-100">
<tr> <tr>
<th class=" p-2">No</th> <th class="w-[10%] p-2 border border-gray-300">Nomor</th>
<th class="p-2">Nama Fitur</th> <th class="w-[70%] p-2 border border-gray-300">Fitur</th>
<th class="p-2 text-center">Aksi</th> <th class="w-[20%] p-2 border border-gray-300 text-center">Aksi</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@forelse ($fiturs as $key => $fitur) @forelse ($fiturs as $key => $fitur)
<tr class="border-t"> <tr class="hover:bg-gray-50">
<td class="p-2">{{ $key + 1 }}</td> <td class="p-2 border border-gray-300">{{ $key + 1 }}</td>
<td class="p-2">{{ $fitur->nama_fitur }}</td> <td class="p-2 border border-gray-300 truncate whitespace-nowrap">{{ $fitur->nama_fitur }}</td>
<td class="p-2 text-center"> <td class="p-2 border border-gray-300 text-center">
<div class="flex justify-center space-x-2"> <div class="flex justify-center space-x-2">
<button class="text-blue-600 pr-4 hover:underline flex items-center" data-bs-toggle="modal" data-bs-target="#modalEdit{{ $fitur->id }}"> <button class="text-blue-600 flex items-center pr-4" data-bs-toggle="modal" data-bs-target="#modalEdit{{ $fitur->id }}">
<i class="bi bi-pencil mr-1"></i> Edit <i class="bi bi-pencil mr-1"></i> Ubah
</button> </button>
<form action="{{ route('admin.fitur.destroy', $fitur->id) }}" <form action="{{ route('admin.fitur.destroy', $fitur->id) }}"
method="POST" method="POST"
@ -39,7 +39,7 @@
onsubmit="return confirm('Yakin mau hapus fitur ini?')"> onsubmit="return confirm('Yakin mau hapus fitur ini?')">
@csrf @csrf
@method('DELETE') @method('DELETE')
<button class="text-red-600 hover:underline flex items-center"> <button class="text-red-600 flex items-center">
<i class="bi bi-trash mr-1"></i> Hapus <i class="bi bi-trash mr-1"></i> Hapus
</button> </button>
</form> </form>
@ -53,6 +53,7 @@
@endforelse @endforelse
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </div>
</div> </div>

View File

@ -7,15 +7,14 @@
<!-- Header --> <!-- Header -->
<div class="flex justify-between items-center mb-4"> <div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-bold">Manajemen Kategori</h3> <h3 class="text-xl font-bold">Manajemen Kategori</h3>
<button class="bg-blue-600 text-white px-3 py-1 rounded" data-bs-toggle="modal" data-bs-target="#modalTambah"> <button class="bg-blue-600 text-white px-3 py-2.5 rounded" data-bs-toggle="modal" data-bs-target="#modalTambah">
<i class="bi bi-plus-lg mr-1"></i> Nambah Kategori <i class="bi bi-plus-lg mr-1"></i> Nambah Kategori
</button> </button>
</div> </div>
<!-- Flash Message --> <!-- Flash Message -->
@if (session('success')) @if (session('success'))
<div id="toast-success" <div id="toast-success" class="mb-4 p-3 rounded bg-green-100 text-green-800 border border-green-300 shadow">
class="mb-4 p-3 rounded bg-green-100 text-green-800 border border-green-300 shadow">
{{ session('success') }} {{ session('success') }}
</div> </div>
<script> <script>
@ -26,8 +25,7 @@
@endif @endif
@if ($errors->any()) @if ($errors->any())
<div id="toast-error" <div id="toast-error" class="mb-4 p-3 rounded bg-red-100 text-red-800 border border-red-300 shadow">
class="mb-4 p-3 rounded bg-red-100 text-red-800 border border-red-300 shadow">
<ul class="list-disc ml-5"> <ul class="list-disc ml-5">
@foreach ($errors->all() as $error) @foreach ($errors->all() as $error)
<li>{{ $error }}</li> <li>{{ $error }}</li>
@ -44,44 +42,44 @@
<!-- Tabel Kategori --> <!-- Tabel Kategori -->
<div class="bg-white rounded-lg shadow-sm"> <div class="bg-white rounded-lg shadow-sm">
<div class="p-4"> <div class="p-4">
<table class="w-full table-auto text-left"> <table class="w-full table-fixed text-left border border-gray-300 border-collapse">
<thead class="bg-gray-100"> <thead class="bg-gray-100">
<tr> <tr>
<th class="p-2">No</th> <th class="p-2 border border-gray-300 w-[50px] text-center">No</th>
<th class="p-2">Nama Kategori</th> <th class="p-2 border border-gray-300 w-[150px]">Nama Kategori</th>
<th class="p-2">Keterangan</th> <th class="p-2 border border-gray-300 w-[300px]">Keterangan</th>
<th class="p-2">Foto</th> <th class="p-2 border border-gray-300 w-[90px] text-center">Foto</th>
<th class="p-2 text-center">Aksi</th> <th class="p-2 border border-gray-300 w-[110px] text-center">Aksi</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@forelse ($kategori as $key => $item) @forelse ($kategori as $key => $item)
<tr class="border-t"> <tr>
<td class="p-2">{{ $key + 1 }}</td> <td class="p-2 border border-gray-300 text-center truncate">{{ $key + 1 }}</td>
<td class="p-2">{{ $item->nama }}</td> <td class="p-2 border border-gray-300 truncate">{{ $item->nama }}</td>
<td class="p-2 text-ellipsis overflow-hidden max-w-xs">{{ $item->deskripsi ?? '-' }}</td> <td class="p-2 border border-gray-300 truncate">
<td class="p-2"> {{ $item->deskripsi ?? '-' }}
</td>
<td class="p-2 border border-gray-300 text-center">
<div
class="w-12 h-12 overflow-hidden rounded bg-gray-100 flex items-center justify-center mx-auto">
@if ($item->foto) @if ($item->foto)
<div class="w-12 h-12 overflow-hidden rounded bg-gray-100 flex items-center justify-center">
<img src="{{ asset('storage/' . $item->foto) }}" alt="foto" <img src="{{ asset('storage/' . $item->foto) }}" alt="foto"
class="max-w-full max-h-full object-contain"> class="max-w-full max-h-full object-contain">
</div>
@else @else
<div class="w-12 h-12 overflow-hidden rounded bg-gray-100 flex items-center justify-center">
<img src="{{ asset('default-image.png') }}" alt="default" <img src="{{ asset('default-image.png') }}" alt="default"
class="max-w-full max-h-full object-contain"> class="max-w-full max-h-full object-contain">
</div>
@endif @endif
</div>
</td> </td>
<td class="p-2 text-center"> <td class="p-2 border border-gray-300 text-center">
<div class="flex justify-center space-x-2"> <div class="flex justify-center space-x-2">
<button class="text-blue-600 pr-4 hover:underline flex items-center" data-bs-toggle="modal" data-bs-target="#modalEdit{{ $item->id }}"> <button class="text-blue-600 hover:underline flex items-center pr-4"
data-bs-toggle="modal" data-bs-target="#modalEdit{{ $item->id }}">
<i class="bi bi-pencil mr-1"></i> Ubah <i class="bi bi-pencil mr-1"></i> Ubah
</button> </button>
<form action="{{ route('admin.kategori.destroy', $item->id) }}" <form action="{{ route('admin.kategori.destroy', $item->id) }}" method="POST"
method="POST" class="inline" onsubmit="return confirm('Yakin mau hapus kategori ini?')">
class="inline"
onsubmit="return confirm('Yakin mau hapus kategori ini?')">
@csrf @csrf
@method('DELETE') @method('DELETE')
<button class="text-red-600 hover:underline flex items-center"> <button class="text-red-600 hover:underline flex items-center">
@ -93,20 +91,55 @@
</tr> </tr>
@empty @empty
<tr> <tr>
<td colspan="5" class="p-2 text-center text-gray-500">Belum ada kategori</td> <td colspan="5" class="p-2 text-center text-gray-500 border border-gray-300">Belum ada
kategori</td>
</tr> </tr>
@endforelse @endforelse
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </div>
<div class="modal fade" id="modalTambah" tabindex="-1">
<div class="modal-dialog">
<form action="{{ route('admin.kategori.store') }}" method="POST" enctype="multipart/form-data"
class="modal-content">
@csrf
<div class="modal-header">
<h5 class="modal-title text-lg font-medium">Tambah Kategori</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<div class="mb-4">
<label class="block text-sm font-medium">Nama</label>
<input type="text" name="nama" class="w-full p-2 border rounded" required>
</div>
<div class="mb-4">
<label class="block text-sm font-medium">Deskripsi</label>
<textarea name="deskripsi" class="w-full p-2 border rounded" rows="3"></textarea>
</div>
<div class="mb-4">
<label class="block text-sm font-medium">Foto</label>
<input type="file" name="foto" class="w-full p-2 border rounded" accept="image/*">
<small class="text-gray-500">Format yang didukung: JPG, PNG, GIF. Maksimal 5MB.</small>
</div>
</div>
<div class="modal-footer">
<button class="bg-gray-300 text-black px-3 py-1 rounded" data-bs-dismiss="modal">Batal</button>
<button class="bg-blue-600 text-white px-3 py-1 rounded">Simpan</button>
</div>
</form>
</div>
</div> </div>
<!-- Modal Edit --> <!-- Modal Edit -->
@foreach ($kategori as $item) @foreach ($kategori as $item)
<div class="modal fade" id="modalEdit{{ $item->id }}" tabindex="-1"> <div class="modal fade" id="modalEdit{{ $item->id }}" tabindex="-1">
<div class="modal-dialog"> <div class="modal-dialog">
<form action="{{ route('admin.kategori.update', $item->id) }}" method="POST" enctype="multipart/form-data" class="modal-content"> <form action="{{ route('admin.kategori.update', $item->id) }}" method="POST"
enctype="multipart/form-data" class="modal-content">
@csrf @csrf
@method('PUT') @method('PUT')
<div class="modal-header"> <div class="modal-header">
@ -116,7 +149,8 @@
<div class="modal-body"> <div class="modal-body">
<div class="mb-4"> <div class="mb-4">
<label class="block text-sm font-medium">Nama</label> <label class="block text-sm font-medium">Nama</label>
<input type="text" name="nama" value="{{ $item->nama }}" class="w-full p-2 border rounded" required> <input type="text" name="nama" value="{{ $item->nama }}"
class="w-full p-2 border rounded" required>
</div> </div>
<div class="mb-4"> <div class="mb-4">
<label class="block text-sm font-medium">Deskripsi</label> <label class="block text-sm font-medium">Deskripsi</label>
@ -129,7 +163,8 @@
@if ($item->foto) @if ($item->foto)
<div class="mt-2"> <div class="mt-2">
<small class="text-gray-500">Foto saat ini:</small><br> <small class="text-gray-500">Foto saat ini:</small><br>
<div class="w-20 h-20 mt-1 overflow-hidden rounded bg-gray-100 flex items-center justify-center border"> <div
class="w-20 h-20 mt-1 overflow-hidden rounded bg-gray-100 flex items-center justify-center border">
<img src="{{ asset('storage/' . $item->foto) }}" alt="foto" <img src="{{ asset('storage/' . $item->foto) }}" alt="foto"
class="max-w-full max-h-full object-contain"> class="max-w-full max-h-full object-contain">
</div> </div>
@ -138,7 +173,8 @@
</div> </div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button class="bg-gray-300 text-black px-3 py-1 rounded" data-bs-dismiss="modal">Batal</button> <button class="bg-gray-300 text-black px-3 py-1 rounded"
data-bs-dismiss="modal">Batal</button>
<button class="bg-blue-600 text-white px-3 py-1 rounded">Simpan Perubahan</button> <button class="bg-blue-600 text-white px-3 py-1 rounded">Simpan Perubahan</button>
</div> </div>
</form> </form>

View File

@ -21,36 +21,41 @@
<!-- Tabel Ulasan --> <!-- Tabel Ulasan -->
<div class="bg-white rounded-lg shadow-sm"> <div class="bg-white rounded-lg shadow-sm">
<div class="p-4"> <div class="p-4 overflow-x-auto">
<table class="w-full table-auto text-left"> <table class="w-full table-fixed text-left border border-gray-300 border-collapse">
<thead class="bg-gray-100"> <thead class="bg-gray-100">
<tr> <tr>
<th class="p-2">No</th> <th class="p-2 border border-gray-300 w-[50px] text-center">No</th>
<th class="p-2">Nama</th> <th class="p-2 border border-gray-300 w-[150px]">Nama</th>
<th class="p-2">Kota</th> <th class="p-2 border border-gray-300 w-[120px]">Kota</th>
<th class="p-2">Rating</th> <th class="p-2 border border-gray-300 w-[120px] text-center">Rating</th>
<th class="p-2">Pesan</th> <th class="p-2 border border-gray-300 w-[350px]">Pesan</th>
<th class="p-2 text-center">Aksi</th> <th class="p-2 border border-gray-300 w-[120px] text-center">Aksi</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@forelse ($reviews as $key => $review) @forelse ($reviews as $key => $review)
<tr class="border-t"> <tr>
<td class="p-2">{{ $key + 1 }}</td> <td class="p-2 border border-gray-300 text-center truncate">{{ $key + 1 }}</td>
<td class="p-2">{{ $review->name }}</td> <td class="p-2 border border-gray-300 truncate">{{ $review->name }}</td>
<td class="p-2">{{ $review->city }}</td> <td class="p-2 border border-gray-300 truncate">{{ $review->city }}</td>
<td class="p-2"> <td class="p-2 border border-gray-300 text-center">
@for($s = 1; $s <= 5; $s++) @for($s = 1; $s <= 5; $s++)
<i class="bi {{ $s <= $review->rating ? 'bi-star-fill text-yellow-500' : 'bi-star text-gray-400' }}"></i> <i class="bi {{ $s <= $review->rating ? 'bi-star-fill text-yellow-500' : 'bi-star text-gray-400' }}"></i>
@endfor @endfor
</td> </td>
<td class="p-2">{{ $review->message }}</td> <td class="p-2 border border-gray-300 truncate" title="{{ $review->message }}">
<td class="p-2 text-center"> {{ $review->message }}
</td>
<td class="p-2 border border-gray-300 text-center">
<div class="flex justify-center space-x-2"> <div class="flex justify-center space-x-2">
<button class="text-blue-600 pr-4 hover:underline flex items-center" data-bs-toggle="modal" data-bs-target="#modalEdit{{ $review->id }}"> <button class="text-blue-600 hover:underline flex items-center pr-2.5"
<i class="bi bi-pencil mr-1"></i> Edit data-bs-toggle="modal" data-bs-target="#modalEdit{{ $review->id }}">
<i class="bi bi-pencil mr-1"></i> Ubah
</button> </button>
<button class="text-red-600 hover:underline flex items-center btn-delete" data-action="{{ route('admin.reviews.destroy', $review->id) }}" data-name="{{ $review->name }}"> <button class="text-red-600 hover:underline flex items-center btn-delete"
data-action="{{ route('admin.reviews.destroy', $review->id) }}"
data-name="{{ $review->name }}">
<i class="bi bi-trash mr-1"></i> Hapus <i class="bi bi-trash mr-1"></i> Hapus
</button> </button>
</div> </div>
@ -58,14 +63,15 @@
</tr> </tr>
@empty @empty
<tr> <tr>
<td colspan="6" class="p-2 text-center text-gray-500">Belum ada ulasan</td> <td colspan="6" class="p-2 text-center text-gray-500 border border-gray-300">
Belum ada ulasan
</td>
</tr> </tr>
@endforelse @endforelse
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </div>
</div>
<!-- Modal Tambah --> <!-- Modal Tambah -->
<div class="modal fade" id="modalTambah" tabindex="-1"> <div class="modal fade" id="modalTambah" tabindex="-1">

View File

@ -3,6 +3,11 @@
use Illuminate\Support\Facades\Route; use Illuminate\Support\Facades\Route;
use App\Http\Controllers\AdminAuthController; use App\Http\Controllers\AdminAuthController;
Route::get('/', function () {
return redirect()->route('admin.login');
});
Route::prefix('admin')->name('admin.')->group(function () { Route::prefix('admin')->name('admin.')->group(function () {
Route::middleware('guest:admin')->group(function () { Route::middleware('guest:admin')->group(function () {
Route::get('/login', [AdminAuthController::class, 'showLogin'])->name('login'); Route::get('/login', [AdminAuthController::class, 'showLogin'])->name('login');