From aeb1d56e85becc8335985bd5bf97209b967b4b7a Mon Sep 17 00:00:00 2001
From: ariefabbauftech-ai <arief.abbauftech@gmail.com>
Date: Wed, 3 Sep 2025 10:17:26 +0700
Subject: [PATCH] [Update Kategori]

---
 .../views/admin/kategori/index.blade.php      | 63 ++++++++++---------
 1 file changed, 35 insertions(+), 28 deletions(-)

diff --git a/backend/resources/views/admin/kategori/index.blade.php b/backend/resources/views/admin/kategori/index.blade.php
index a5ce0ad..79f955d 100644
--- a/backend/resources/views/admin/kategori/index.blade.php
+++ b/backend/resources/views/admin/kategori/index.blade.php
@@ -3,45 +3,52 @@
 @section('title', 'Manajemen Kategori')
 
 @section('content')
-<div class="container">
+<div class="container-fluid py-4">
     <!-- Header -->
     <div class="d-flex justify-content-between align-items-center mb-4">
-        <h3 class="fw-bold">Manajemen Kategori</h3>
-        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalTambah">
-            <i class="bi bi-plus-lg"></i> Tambah Kategori
+        <h3 class="fw-bold mb-0">Manajemen Kategori</h3>
+        <button class="btn btn-primary px-3" data-bs-toggle="modal" data-bs-target="#modalTambah">
+            <i class="bi bi-plus-lg me-1"></i> Nambah Kategori
         </button>
     </div>
 
     <!-- Tabel Kategori -->
-    <div class="card shadow-sm border-0">
+    <div class="card border-0 shadow-sm rounded-3">
         <div class="card-body">
-            <table class="table table-hover align-middle">
-                <thead>
+            <table class="table table-borderless align-middle text-nowrap">
+                <thead class="table-light">
                     <tr>
-                        <th width="50">No</th>
+                        <th width="50">Nomor</th>
+                        <th>Nama Kategori</th>
+                        <th>Keterangan</th>
                         <th>Foto</th>
-                        <th>Nama</th>
-                        <th>Deskripsi</th>
-                        <th width="180">Aksi</th>
+                        <th width="150" class="text-center">Aksi</th>
                     </tr>
                 </thead>
                 <tbody>
                     @forelse ($kategori as $key => $item)
-                    <tr>
+                    <tr class="align-middle">
                         <td>{{ $key + 1 }}</td>
+                        <td>{{ $item->nama }}</td>
+                        <td class="text-truncate" style="max-width:300px;">
+                            {{ $item->deskripsi ?? '-' }}
+                        </td>
                         <td>
                             @if($item->foto)
-                                <img src="{{ asset('storage/'.$item->foto) }}" alt="foto" width="50" height="50" style="object-fit:cover; border-radius:6px;">
+                                <img src="{{ asset('storage/'.$item->foto) }}" alt="foto"
+                                    width="50" height="50"
+                                    class="rounded" style="object-fit:cover;">
                             @else
-                                <img src="{{ asset('default-image.png') }}" alt="default" width="50" height="50" style="object-fit:cover; border-radius:6px;">
+                                <img src="{{ asset('default-image.png') }}" alt="default"
+                                    width="50" height="50"
+                                    class="rounded" style="object-fit:cover;">
                             @endif
                         </td>
-                        <td>{{ $item->nama }}</td>
-                        <td>{{ $item->deskripsi ?? '-' }}</td>
-                        <td>
-                            <button class="btn btn-warning btn-sm" data-bs-toggle="modal"
+                        <td class="text-center">
+                            <button class="btn btn-link text-primary p-0 me-2"
+                                data-bs-toggle="modal"
                                 data-bs-target="#modalEdit{{ $item->id }}">
-                                <i class="bi bi-pencil"></i>
+                                <i class="bi bi-pencil me-1"></i> Ubah
                             </button>
                             <form action="{{ route('admin.kategori.destroy', $item->id) }}"
                                   method="POST"
@@ -49,8 +56,8 @@
                                   onsubmit="return confirm('Yakin mau hapus kategori ini?')">
                                 @csrf
                                 @method('DELETE')
-                                <button class="btn btn-danger btn-sm">
-                                    <i class="bi bi-trash"></i>
+                                <button class="btn btn-link text-danger p-0">
+                                    <i class="bi bi-trash me-1"></i> Hapus
                                 </button>
                             </form>
                         </td>
@@ -77,15 +84,15 @@
             </div>
             <div class="modal-body">
                 <div class="mb-3">
-                    <label>Nama</label>
+                    <label class="form-label">Nama</label>
                     <input type="text" name="nama" class="form-control" required>
                 </div>
                 <div class="mb-3">
-                    <label>Deskripsi</label>
+                    <label class="form-label">Deskripsi</label>
                     <textarea name="deskripsi" class="form-control" rows="3"></textarea>
                 </div>
                 <div class="mb-3">
-                    <label>Foto</label>
+                    <label class="form-label">Foto</label>
                     <input type="file" name="foto" class="form-control">
                 </div>
             </div>
@@ -97,7 +104,7 @@
     </div>
 </div>
 
-<!-- Modal Edit (Diletakkan di luar tabel) -->
+<!-- Modal Edit -->
 @foreach ($kategori as $item)
 <div class="modal fade" id="modalEdit{{ $item->id }}" tabindex="-1">
     <div class="modal-dialog">
@@ -110,15 +117,15 @@
             </div>
             <div class="modal-body">
                 <div class="mb-3">
-                    <label>Nama</label>
+                    <label class="form-label">Nama</label>
                     <input type="text" name="nama" value="{{ $item->nama }}" class="form-control" required>
                 </div>
                 <div class="mb-3">
-                    <label>Deskripsi</label>
+                    <label class="form-label">Deskripsi</label>
                     <textarea name="deskripsi" class="form-control" rows="3">{{ $item->deskripsi }}</textarea>
                 </div>
                 <div class="mb-3">
-                    <label>Foto</label>
+                    <label class="form-label">Foto</label>
                     <input type="file" name="foto" class="form-control">
                     @if($item->foto)
                         <small class="text-muted">Foto saat ini:</small><br>