From 7b8f85752a631b2b498037fcce33018d023d5e08 Mon Sep 17 00:00:00 2001
From: Ikhsan Satriadi <ikhsansatriadi175@gmail.com>
Date: Mon, 8 Jul 2024 14:56:11 +0700
Subject: [PATCH] fix table overflow on mobile view

---
 app/Views/books/index.php      | 116 ++++++++++++-------------
 app/Views/categories/index.php |  78 ++++++++---------
 app/Views/fines/index.php      | 132 ++++++++++++++--------------
 app/Views/fines/return.php     | 111 ++++++++++++------------
 app/Views/loans/book.php       | 150 ++++++++++++++++----------------
 app/Views/loans/index.php      | 141 +++++++++++++++---------------
 app/Views/loans/member.php     |  74 ++++++++--------
 app/Views/loans/result.php     | 111 ++++++++++++------------
 app/Views/members/index.php    |  94 ++++++++++----------
 app/Views/racks/index.php      |  90 +++++++++----------
 app/Views/returns/index.php    | 152 +++++++++++++++++----------------
 app/Views/returns/loan.php     | 134 +++++++++++++++--------------
 app/Views/users/index.php      | 116 ++++++++++++-------------
 13 files changed, 764 insertions(+), 735 deletions(-)

diff --git a/app/Views/books/index.php b/app/Views/books/index.php
index b233dd9..7af5b75 100644
--- a/app/Views/books/index.php
+++ b/app/Views/books/index.php
@@ -47,65 +47,67 @@
         </div>
       </div>
     </div>
-    <table class="table table-hover table-striped">
-      <thead class="table-light">
-        <tr>
-          <th scope="col">#</th>
-          <th scope="col">Sampul</th>
-          <th scope="col">Judul</th>
-          <th scope="col">Kategori</th>
-          <th scope="col">Rak</th>
-          <th scope="col">Jumlah</th>
-          <th scope="col" class="text-center">Aksi</th>
-        </tr>
-      </thead>
-      <tbody class="table-group-divider">
-        <?php $i = 1 + ($itemPerPage * ($currentPage - 1)) ?>
-        <?php if (empty($books)) : ?>
+    <div class="overflow-x-scroll">
+      <table class="table table-hover table-striped">
+        <thead class="table-light">
           <tr>
-            <td class="text-center" colspan="7"><b>Tidak ada data</b></td>
+            <th scope="col">#</th>
+            <th scope="col">Sampul</th>
+            <th scope="col">Judul</th>
+            <th scope="col">Kategori</th>
+            <th scope="col">Rak</th>
+            <th scope="col">Jumlah</th>
+            <th scope="col" class="text-center">Aksi</th>
           </tr>
-        <?php endif; ?>
-        <?php foreach ($books as $book) : ?>
-          <tr>
-            <th scope="row"><?= $i++; ?></th>
-            <td>
-              <a href="<?= base_url("admin/books/{$book['slug']}"); ?>">
-                <div class="d-flex justify-content-center" style="max-width: 150px; height: 120px;">
-                  <?php
-                  $coverImageFilePath = BOOK_COVER_URI . $book['book_cover'];
-                  ?>
-                  <img class="mx-auto mh-100" src="<?= base_url((!empty($book['book_cover']) && file_exists($coverImageFilePath)) ? $coverImageFilePath : BOOK_COVER_URI . DEFAULT_BOOK_COVER); ?>" alt="<?= $book['title']; ?>">
-                </div>
-              </a>
-            </td>
-            <td>
-              <a href="<?= base_url("admin/books/{$book['slug']}"); ?>">
-                <p class="text-primary-emphasis text-decoration-underline"><b><?= "{$book['title']} ({$book['year']})"; ?></b></p>
-                <p class="text-body"><?= "Author: {$book['author']}"; ?></p>
-              </a>
-            </td>
-            <td><?= $book['category']; ?></td>
-            <td><?= $book['rack']; ?></td>
-            <td><?= $book['quantity']; ?></td>
-            <td>
-              <a href="<?= base_url("admin/books/{$book['slug']}/edit"); ?>" class="d-block btn btn-primary w-100 mb-2">
-                <i class="ti ti-edit"></i>
-                Edit
-              </a>
-              <form action="<?= base_url("admin/books/{$book['slug']}"); ?>" method="post">
-                <?= csrf_field(); ?>
-                <input type="hidden" name="_method" value="DELETE">
-                <button type="submit" class="btn btn-danger w-100" onclick="return confirm('Are you sure?');">
-                  <i class="ti ti-trash"></i>
-                  Delete
-                </button>
-              </form>
-            </td>
-          </tr>
-        <?php endforeach; ?>
-      </tbody>
-    </table>
+        </thead>
+        <tbody class="table-group-divider">
+          <?php $i = 1 + ($itemPerPage * ($currentPage - 1)) ?>
+          <?php if (empty($books)) : ?>
+            <tr>
+              <td class="text-center" colspan="7"><b>Tidak ada data</b></td>
+            </tr>
+          <?php endif; ?>
+          <?php foreach ($books as $book) : ?>
+            <tr>
+              <th scope="row"><?= $i++; ?></th>
+              <td>
+                <a href="<?= base_url("admin/books/{$book['slug']}"); ?>">
+                  <div class="d-flex justify-content-center" style="max-width: 150px; height: 120px;">
+                    <?php
+                    $coverImageFilePath = BOOK_COVER_URI . $book['book_cover'];
+                    ?>
+                    <img class="mx-auto mh-100" src="<?= base_url((!empty($book['book_cover']) && file_exists($coverImageFilePath)) ? $coverImageFilePath : BOOK_COVER_URI . DEFAULT_BOOK_COVER); ?>" alt="<?= $book['title']; ?>">
+                  </div>
+                </a>
+              </td>
+              <td>
+                <a href="<?= base_url("admin/books/{$book['slug']}"); ?>">
+                  <p class="text-primary-emphasis text-decoration-underline"><b><?= "{$book['title']} ({$book['year']})"; ?></b></p>
+                  <p class="text-body"><?= "Author: {$book['author']}"; ?></p>
+                </a>
+              </td>
+              <td><?= $book['category']; ?></td>
+              <td><?= $book['rack']; ?></td>
+              <td><?= $book['quantity']; ?></td>
+              <td>
+                <a href="<?= base_url("admin/books/{$book['slug']}/edit"); ?>" class="d-block btn btn-primary w-100 mb-2">
+                  <i class="ti ti-edit"></i>
+                  Edit
+                </a>
+                <form action="<?= base_url("admin/books/{$book['slug']}"); ?>" method="post">
+                  <?= csrf_field(); ?>
+                  <input type="hidden" name="_method" value="DELETE">
+                  <button type="submit" class="btn btn-danger w-100" onclick="return confirm('Are you sure?');">
+                    <i class="ti ti-trash"></i>
+                    Delete
+                  </button>
+                </form>
+              </td>
+            </tr>
+          <?php endforeach; ?>
+        </tbody>
+      </table>
+    </div>
     <?= $pager->links('books', 'my_pager'); ?>
   </div>
 </div>
diff --git a/app/Views/categories/index.php b/app/Views/categories/index.php
index 76793ab..19253d3 100644
--- a/app/Views/categories/index.php
+++ b/app/Views/categories/index.php
@@ -25,46 +25,48 @@
         </a>
       </div>
     </div>
-    <table class="table table-hover table-striped">
-      <thead class="table-light">
-        <tr>
-          <th scope="col">#</th>
-          <th scope="col">Kategori</th>
-          <th scope="col" class="text-center">Jumlah buku</th>
-          <th scope="col" class="text-center">Aksi</th>
-        </tr>
-      </thead>
-      <tbody class="table-group-divider">
-        <?php $i = 1 + ($itemPerPage * ($currentPage - 1)) ?>
-        <?php foreach ($categories as $key => $category) : ?>
+    <div class="overflow-x-scroll">
+      <table class="table table-hover table-striped">
+        <thead class="table-light">
           <tr>
-            <th scope="row"><?= $i++; ?></th>
-            <td>
-              <a href="<?= base_url("admin/categories/{$category['id']}"); ?>" class="text-primary-emphasis text-decoration-underline">
-                <b><?= $category['name']; ?></b>
-              </a>
-            </td>
-            <td class="text-center"><?= $bookCountInCategories[$key]; ?></td>
-            <td>
-              <div class="d-flex justify-content-center gap-2">
-                <a href="<?= base_url("admin/categories/{$category['id']}/edit"); ?>" class="btn btn-primary mb-2">
-                  <i class="ti ti-edit"></i>
-                  Edit
-                </a>
-                <form action="<?= base_url("admin/categories/{$category['id']}"); ?>" method="post">
-                  <?= csrf_field(); ?>
-                  <input type="hidden" name="_method" value="DELETE">
-                  <button type="submit" class="btn btn-danger" onclick="return confirm('Are you sure?');">
-                    <i class="ti ti-trash"></i>
-                    Delete
-                  </button>
-                </form>
-              </div>
-            </td>
+            <th scope="col">#</th>
+            <th scope="col">Kategori</th>
+            <th scope="col" class="text-center">Jumlah buku</th>
+            <th scope="col" class="text-center">Aksi</th>
           </tr>
-        <?php endforeach; ?>
-      </tbody>
-    </table>
+        </thead>
+        <tbody class="table-group-divider">
+          <?php $i = 1 + ($itemPerPage * ($currentPage - 1)) ?>
+          <?php foreach ($categories as $key => $category) : ?>
+            <tr>
+              <th scope="row"><?= $i++; ?></th>
+              <td>
+                <a href="<?= base_url("admin/categories/{$category['id']}"); ?>" class="text-primary-emphasis text-decoration-underline">
+                  <b><?= $category['name']; ?></b>
+                </a>
+              </td>
+              <td class="text-center"><?= $bookCountInCategories[$key]; ?></td>
+              <td>
+                <div class="d-flex justify-content-center gap-2">
+                  <a href="<?= base_url("admin/categories/{$category['id']}/edit"); ?>" class="btn btn-primary mb-2">
+                    <i class="ti ti-edit"></i>
+                    Edit
+                  </a>
+                  <form action="<?= base_url("admin/categories/{$category['id']}"); ?>" method="post">
+                    <?= csrf_field(); ?>
+                    <input type="hidden" name="_method" value="DELETE">
+                    <button type="submit" class="btn btn-danger" onclick="return confirm('Are you sure?');">
+                      <i class="ti ti-trash"></i>
+                      Delete
+                    </button>
+                  </form>
+                </div>
+              </td>
+            </tr>
+          <?php endforeach; ?>
+        </tbody>
+      </table>
+    </div>
     <?= $pager->links('categories', 'my_pager'); ?>
   </div>
 </div>
diff --git a/app/Views/fines/index.php b/app/Views/fines/index.php
index 4f6ef73..2dcfcd7 100644
--- a/app/Views/fines/index.php
+++ b/app/Views/fines/index.php
@@ -59,74 +59,76 @@
         </div>
       </div>
     </div>
-    <table class="table table-hover table-striped">
-      <thead class="table-light">
-        <tr>
-          <th scope="col">#</th>
-          <th scope="col">Nama peminjam</th>
-          <th scope="col">Judul buku</th>
-          <th scope="col">Tgl pengembalian</th>
-          <th scope="col">Denda dibayar</th>
-          <th scope="col">Jumlah denda</th>
-          <th scope="col" class="text-center">Aksi</th>
-        </tr>
-      </thead>
-      <tbody class="table-group-divider">
-        <?php
-        $i = 1 + ($itemPerPage * ($currentPage - 1));
-
-        $now = Time::now(locale: 'id');
-        ?>
-        <?php if (empty($fines)) : ?>
+    <div class="overflow-x-scroll">
+      <table class="table table-hover table-striped">
+        <thead class="table-light">
           <tr>
-            <td class="text-center" colspan="7"><b>Tidak ada data</b></td>
+            <th scope="col">#</th>
+            <th scope="col">Nama peminjam</th>
+            <th scope="col">Judul buku</th>
+            <th scope="col">Tgl pengembalian</th>
+            <th scope="col">Denda dibayar</th>
+            <th scope="col">Jumlah denda</th>
+            <th scope="col" class="text-center">Aksi</th>
           </tr>
-        <?php endif; ?>
-        <?php
-        foreach ($fines as $key => $fine) :
-          $loanReturnDate = Time::parse($fine['return_date'], locale: 'id');
-          $loanDueDate = Time::parse($fine['due_date'], locale: 'id');
-        ?>
-          <tr>
-            <th scope="row"><?= $i++; ?></th>
-            <td>
-              <a href="<?= base_url("admin/members/{$fine['member_uid']}"); ?>" class="text-decoration-underline">
-                <p>
-                  <b><?= "{$fine['first_name']} {$fine['last_name']}"; ?></b>
-                </p>
-              </a>
-            </td>
-            <td>
-              <p><b><?= "{$fine['title']} ({$fine['year']})"; ?></b></p>
-              <p class="text-body"><?= "Jumlah: {$fine['quantity']}"; ?></p>
-            </td>
-            <td class="text-danger-emphasis">
-              <p><b><?= $loanReturnDate->toLocalizedString('dd/MM/y'); ?></b></p>
-              <p class="text-body"><?= "Terlambat: " . abs($loanReturnDate->difference($loanDueDate)->getDays()) . " Hari"; ?></p>
-            </td>
-            <td>
-              <h5>Rp<?= $fine['amount_paid'] ?? 0; ?></h5>
-              <?php if ($paidOffFilter || $fine['amount_paid'] >= $fine['fine_amount']) : ?>
-                <span class="badge bg-success rounded-3 fw-semibold">Lunas</span>
-              <?php endif; ?>
-            </td>
-            <td>
-              <h5>Rp<?= $fine['fine_amount']; ?></h5>
-            </td>
-            <td>
-              <?php if (!$paidOffFilter && $fine['amount_paid'] < $fine['fine_amount']) : ?>
-                <a href="<?= base_url("admin/fines/pay/{$fine['uid']}"); ?>" class="d-block btn btn-warning w-100 mb-2">
-                  Bayar
+        </thead>
+        <tbody class="table-group-divider">
+          <?php
+          $i = 1 + ($itemPerPage * ($currentPage - 1));
+
+          $now = Time::now(locale: 'id');
+          ?>
+          <?php if (empty($fines)) : ?>
+            <tr>
+              <td class="text-center" colspan="7"><b>Tidak ada data</b></td>
+            </tr>
+          <?php endif; ?>
+          <?php
+          foreach ($fines as $key => $fine) :
+            $loanReturnDate = Time::parse($fine['return_date'], locale: 'id');
+            $loanDueDate = Time::parse($fine['due_date'], locale: 'id');
+          ?>
+            <tr>
+              <th scope="row"><?= $i++; ?></th>
+              <td>
+                <a href="<?= base_url("admin/members/{$fine['member_uid']}"); ?>" class="text-decoration-underline">
+                  <p>
+                    <b><?= "{$fine['first_name']} {$fine['last_name']}"; ?></b>
+                  </p>
                 </a>
-              <?php endif; ?>
-              <a href="<?= base_url("admin/returns/{$fine['uid']}"); ?>" class="d-block btn btn-primary w-100 mb-2">
-                Detail
-              </a>
-            </td>
-          </tr>
-        <?php endforeach; ?>
-      </tbody>
-    </table>
+              </td>
+              <td>
+                <p><b><?= "{$fine['title']} ({$fine['year']})"; ?></b></p>
+                <p class="text-body"><?= "Jumlah: {$fine['quantity']}"; ?></p>
+              </td>
+              <td class="text-danger-emphasis">
+                <p><b><?= $loanReturnDate->toLocalizedString('dd/MM/y'); ?></b></p>
+                <p class="text-body"><?= "Terlambat: " . abs($loanReturnDate->difference($loanDueDate)->getDays()) . " Hari"; ?></p>
+              </td>
+              <td>
+                <h5>Rp<?= $fine['amount_paid'] ?? 0; ?></h5>
+                <?php if ($paidOffFilter || $fine['amount_paid'] >= $fine['fine_amount']) : ?>
+                  <span class="badge bg-success rounded-3 fw-semibold">Lunas</span>
+                <?php endif; ?>
+              </td>
+              <td>
+                <h5>Rp<?= $fine['fine_amount']; ?></h5>
+              </td>
+              <td>
+                <?php if (!$paidOffFilter && $fine['amount_paid'] < $fine['fine_amount']) : ?>
+                  <a href="<?= base_url("admin/fines/pay/{$fine['uid']}"); ?>" class="d-block btn btn-warning w-100 mb-2">
+                    Bayar
+                  </a>
+                <?php endif; ?>
+                <a href="<?= base_url("admin/returns/{$fine['uid']}"); ?>" class="d-block btn btn-primary w-100 mb-2">
+                  Detail
+                </a>
+              </td>
+            </tr>
+          <?php endforeach; ?>
+        </tbody>
+      </table>
+    </div>
     <?= $pager->links('fines', 'my_pager'); ?>
   </div>
 </div>
diff --git a/app/Views/fines/return.php b/app/Views/fines/return.php
index d86f55a..19f43a9 100644
--- a/app/Views/fines/return.php
+++ b/app/Views/fines/return.php
@@ -9,60 +9,63 @@
   <p class="text-danger"><?= $msg ?? ''; ?></p>
 <?php else : ?>
   <h5 class="card-title fw-semibold my-4">Hasil pencarian data pengembalian</h5>
-  <table class="table table-hover table-striped">
-    <thead class="table-light">
-      <tr>
-        <th scope="col">#</th>
-        <th scope="col">Nama peminjam</th>
-        <th scope="col">Judul buku</th>
-        <th scope="col" class="text-center">Jumlah</th>
-        <th scope="col">Tgl kembali</th>
-        <th scope="col">Denda dibayar</th>
-        <th scope="col">Jumlah denda</th>
-        <th scope="col" class="text-center">Aksi</th>
-      </tr>
-    </thead>
-    <tbody class="table-group-divider">
-      <?php $i = 1 ?>
-      <?php foreach ($returns as $key => $return) : ?>
+
+  <div class="overflow-x-scroll">
+    <table class="table table-hover table-striped">
+      <thead class="table-light">
         <tr>
-          <th scope="row"><?= $i++; ?></th>
-          <td>
-            <b><?= $return['first_name'] . ' ' . $return['last_name']; ?></b>
-          </td>
-          <td>
-            <p><b><?= "{$return['title']} ({$return['year']})"; ?></b></p>
-            <p class="text-body"><?= "Author: {$return['author']}"; ?></p>
-          </td>
-          <td class="text-center"><?= $return['quantity']; ?></td>
-          <td>
-            <b><?= Time::parse($return['return_date'])->toLocalizedString('dd/MM/y'); ?></b><br>
-            <b><?= Time::parse($return['return_date'])->toLocalizedString('HH:mm:ss'); ?></b>
-          </td>
-          <td>
-            <h5>Rp<?= $return['amount_paid'] ?? 0; ?></h5>
-            <?php if ($return['amount_paid'] >= $return['fine_amount']) : ?>
-              <span class="badge bg-success rounded-3 fw-semibold">Lunas</span>
-            <?php endif; ?>
-          </td>
-          <td>
-            <h5>Rp<?= $return['fine_amount']; ?></h5>
-          </td>
-          <td style="width: 120px;" class="text-center">
-            <?php if ($return['amount_paid'] >= $return['fine_amount']) : ?>
-              <button class="btn btn-dark mb-2" disabled>
-                <i class="ti ti-check"></i>
-                Pilih
-              </button>
-            <?php else : ?>
-              <a href="<?= base_url("admin/fines/pay/{$return['uid']}"); ?>" class="btn btn-primary mb-2">
-                <i class="ti ti-check"></i>
-                Pilih
-              </a>
-            <?php endif; ?>
-          </td>
+          <th scope="col">#</th>
+          <th scope="col">Nama peminjam</th>
+          <th scope="col">Judul buku</th>
+          <th scope="col" class="text-center">Jumlah</th>
+          <th scope="col">Tgl kembali</th>
+          <th scope="col">Denda dibayar</th>
+          <th scope="col">Jumlah denda</th>
+          <th scope="col" class="text-center">Aksi</th>
         </tr>
-      <?php endforeach; ?>
-    </tbody>
-  </table>
+      </thead>
+      <tbody class="table-group-divider">
+        <?php $i = 1 ?>
+        <?php foreach ($returns as $key => $return) : ?>
+          <tr>
+            <th scope="row"><?= $i++; ?></th>
+            <td>
+              <b><?= $return['first_name'] . ' ' . $return['last_name']; ?></b>
+            </td>
+            <td>
+              <p><b><?= "{$return['title']} ({$return['year']})"; ?></b></p>
+              <p class="text-body"><?= "Author: {$return['author']}"; ?></p>
+            </td>
+            <td class="text-center"><?= $return['quantity']; ?></td>
+            <td>
+              <b><?= Time::parse($return['return_date'])->toLocalizedString('dd/MM/y'); ?></b><br>
+              <b><?= Time::parse($return['return_date'])->toLocalizedString('HH:mm:ss'); ?></b>
+            </td>
+            <td>
+              <h5>Rp<?= $return['amount_paid'] ?? 0; ?></h5>
+              <?php if ($return['amount_paid'] >= $return['fine_amount']) : ?>
+                <span class="badge bg-success rounded-3 fw-semibold">Lunas</span>
+              <?php endif; ?>
+            </td>
+            <td>
+              <h5>Rp<?= $return['fine_amount']; ?></h5>
+            </td>
+            <td style="width: 120px;" class="text-center">
+              <?php if ($return['amount_paid'] >= $return['fine_amount']) : ?>
+                <button class="btn btn-dark mb-2" disabled>
+                  <i class="ti ti-check"></i>
+                  Pilih
+                </button>
+              <?php else : ?>
+                <a href="<?= base_url("admin/fines/pay/{$return['uid']}"); ?>" class="btn btn-primary mb-2">
+                  <i class="ti ti-check"></i>
+                  Pilih
+                </a>
+              <?php endif; ?>
+            </td>
+          </tr>
+        <?php endforeach; ?>
+      </tbody>
+    </table>
+  </div>
 <?php endif; ?>
\ No newline at end of file
diff --git a/app/Views/loans/book.php b/app/Views/loans/book.php
index 92ac79d..f6ce9b4 100644
--- a/app/Views/loans/book.php
+++ b/app/Views/loans/book.php
@@ -3,85 +3,87 @@
   <p class="text-danger"><?= $msg ?? ''; ?></p>
 <?php else : ?>
   <h5 class="card-title fw-semibold my-4">Hasil pencarian buku</h5>
-  <table class="table table-hover table-striped">
-    <thead class="table-light">
-      <tr>
-        <th scope="col">#</th>
-        <th scope="col">Sampul</th>
-        <th scope="col">Judul</th>
-        <th scope="col">Penerbit</th>
-        <th scope="col">Kategori</th>
-        <th scope="col">Rak</th>
-        <th scope="col">Stok tersisa</th>
-        <th scope="col" class="text-center">Aksi</th>
-      </tr>
-    </thead>
-    <tbody class="table-group-divider">
-      <?php $i = 1; ?>
-      <?php foreach ($books as $book) : ?>
-        <?php if (!$book['deleted_at']) : ?>
-          <tr>
-            <th scope="row"><?= $i++; ?></th>
-            <td>
-              <div class="d-flex justify-content-center" style="max-width: 150px; height: 120px;">
-                <?php
-                $coverImageFilePath = BOOK_COVER_URI . $book['book_cover'];
+  <div class="overflow-x-scroll">
+    <table class="table table-hover table-striped">
+      <thead class="table-light">
+        <tr>
+          <th scope="col">#</th>
+          <th scope="col">Sampul</th>
+          <th scope="col">Judul</th>
+          <th scope="col">Penerbit</th>
+          <th scope="col">Kategori</th>
+          <th scope="col">Rak</th>
+          <th scope="col">Stok tersisa</th>
+          <th scope="col" class="text-center">Aksi</th>
+        </tr>
+      </thead>
+      <tbody class="table-group-divider">
+        <?php $i = 1; ?>
+        <?php foreach ($books as $book) : ?>
+          <?php if (!$book['deleted_at']) : ?>
+            <tr>
+              <th scope="row"><?= $i++; ?></th>
+              <td>
+                <div class="d-flex justify-content-center" style="max-width: 150px; height: 120px;">
+                  <?php
+                  $coverImageFilePath = BOOK_COVER_URI . $book['book_cover'];
 
-                $coverImageUrl = base_url((!empty($book['book_cover']) && file_exists($coverImageFilePath))
-                  ? $coverImageFilePath
-                  : BOOK_COVER_URI . DEFAULT_BOOK_COVER);
+                  $coverImageUrl = base_url((!empty($book['book_cover']) && file_exists($coverImageFilePath))
+                    ? $coverImageFilePath
+                    : BOOK_COVER_URI . DEFAULT_BOOK_COVER);
+                  ?>
+                  <img class="mx-auto mh-100" src="<?= $coverImageUrl; ?>" alt="<?= $book['title']; ?>">
+                </div>
+              </td>
+              <td>
+                <p><b><?= "{$book['title']} ({$book['year']})"; ?></b></p>
+                <p class="text-body"><?= "Author: {$book['author']}"; ?></p>
+              </td>
+              <td><?= $book['publisher']; ?></td>
+              <td><?= $book['category']; ?></td>
+              <td><?= $book['rack']; ?></td>
+              <td><?= $book['stock']; ?></td>
+              <td style="width: 120px;" class="text-center">
+                <?php if (intval($book['stock'] ?? 0) > 0) :
+                  $rndm = md5(rand(0, 10000));
                 ?>
-                <img class="mx-auto mh-100" src="<?= $coverImageUrl; ?>" alt="<?= $book['title']; ?>">
-              </div>
-            </td>
-            <td>
-              <p><b><?= "{$book['title']} ({$book['year']})"; ?></b></p>
-              <p class="text-body"><?= "Author: {$book['author']}"; ?></p>
-            </td>
-            <td><?= $book['publisher']; ?></td>
-            <td><?= $book['category']; ?></td>
-            <td><?= $book['rack']; ?></td>
-            <td><?= $book['stock']; ?></td>
-            <td style="width: 120px;" class="text-center">
-              <?php if (intval($book['stock'] ?? 0) > 0) :
-                $rndm = md5(rand(0, 10000));
-              ?>
-                <script>
-                  let book<?= $book['id'] . $rndm; ?>Element = document.getElementById('book<?= $book['slug']; ?>');
+                  <script>
+                    let book<?= $book['id'] . $rndm; ?>Element = document.getElementById('book<?= $book['slug']; ?>');
 
-                  const book<?= $book['id'] . $rndm; ?> = {
-                    slug: "<?= $book['slug']; ?>",
-                    title: "<?= "{$book['title']} ({$book['year']})"; ?>",
-                    cover: "<?= $book['book_cover']; ?>",
-                    stock: "<?= $book['stock']; ?>"
-                  };
+                    const book<?= $book['id'] . $rndm; ?> = {
+                      slug: "<?= $book['slug']; ?>",
+                      title: "<?= "{$book['title']} ({$book['year']})"; ?>",
+                      cover: "<?= $book['book_cover']; ?>",
+                      stock: "<?= $book['stock']; ?>"
+                    };
 
-                  function onChange<?= $book['id'] . $rndm; ?>() {
-                    check(book<?= $book['id'] . $rndm; ?>Element);
-                    select(book<?= $book['id'] . $rndm; ?>Element.checked, book<?= $book['id'] . $rndm; ?>);
-                  }
+                    function onChange<?= $book['id'] . $rndm; ?>() {
+                      check(book<?= $book['id'] . $rndm; ?>Element);
+                      select(book<?= $book['id'] . $rndm; ?>Element.checked, book<?= $book['id'] . $rndm; ?>);
+                    }
 
-                  book<?= $book['id'] . $rndm; ?>Element.checked = bookSelection.has('<?= $book['slug']; ?>');
-                </script>
-                <button type="button" class="btn btn-secondary" onclick="onChange<?= $book['id'] . $rndm; ?>()">
-                  <div class="form-check">
-                    <input class="form-check-input" type="checkbox" id="book<?= $book['slug']; ?>" onchange="onChange<?= $book['id'] . $rndm; ?>()">
-                    <label class="form-check-label">
-                      Pilih
-                    </label>
-                  </div>
-                </button>
-              <?php else : ?>
-                <button class="d-block btn btn-dark w-100 mb-2" disabled>
-                  Stok habis
-                </button>
-              <?php endif; ?>
-            </td>
-          </tr>
-        <?php endif; ?>
-      <?php endforeach; ?>
-    </tbody>
-  </table>
+                    book<?= $book['id'] . $rndm; ?>Element.checked = bookSelection.has('<?= $book['slug']; ?>');
+                  </script>
+                  <button type="button" class="btn btn-secondary" onclick="onChange<?= $book['id'] . $rndm; ?>()">
+                    <div class="form-check">
+                      <input class="form-check-input" type="checkbox" id="book<?= $book['slug']; ?>" onchange="onChange<?= $book['id'] . $rndm; ?>()">
+                      <label class="form-check-label">
+                        Pilih
+                      </label>
+                    </div>
+                  </button>
+                <?php else : ?>
+                  <button class="d-block btn btn-dark w-100 mb-2" disabled>
+                    Stok habis
+                  </button>
+                <?php endif; ?>
+              </td>
+            </tr>
+          <?php endif; ?>
+        <?php endforeach; ?>
+      </tbody>
+    </table>
+  </div>
   <script>
     function check(element) {
       element.checked = !element.checked;
diff --git a/app/Views/loans/index.php b/app/Views/loans/index.php
index d335d57..1d61386 100644
--- a/app/Views/loans/index.php
+++ b/app/Views/loans/index.php
@@ -44,79 +44,82 @@
         </div>
       </div>
     </div>
-    <table class="table table-hover table-striped">
-      <thead class="table-light">
-        <tr>
-          <th scope="col">#</th>
-          <th scope="col">Nama peminjam</th>
-          <th scope="col">Judul buku</th>
-          <th scope="col" class="text-center">Jumlah</th>
-          <th scope="col">Tgl pinjam</th>
-          <th scope="col">Tenggat</th>
-          <th scope="col" class="text-center">Status</th>
-          <th scope="col" class="text-center">Aksi</th>
-        </tr>
-      </thead>
-      <tbody class="table-group-divider">
-        <?php
-        $i = 1 + ($itemPerPage * ($currentPage - 1));
 
-        $now = Time::now(locale: 'id');
-        ?>
-        <?php if (empty($loans)) : ?>
+    <div class="overflow-x-scroll">
+      <table class="table table-hover table-striped">
+        <thead class="table-light">
           <tr>
-            <td class="text-center" colspan="8"><b>Tidak ada data</b></td>
+            <th scope="col">#</th>
+            <th scope="col">Nama peminjam</th>
+            <th scope="col">Judul buku</th>
+            <th scope="col" class="text-center">Jumlah</th>
+            <th scope="col">Tgl pinjam</th>
+            <th scope="col">Tenggat</th>
+            <th scope="col" class="text-center">Status</th>
+            <th scope="col" class="text-center">Aksi</th>
           </tr>
-        <?php endif; ?>
-        <?php
-        foreach ($loans as $key => $loan) :
-          $loanCreateDate = Time::parse($loan['loan_date'], locale: 'id');
-          $loanDueDate = Time::parse($loan['due_date'], locale: 'id');
+        </thead>
+        <tbody class="table-group-divider">
+          <?php
+          $i = 1 + ($itemPerPage * ($currentPage - 1));
 
-          $isLate = $now->isAfter($loanDueDate);
-          $isDueDate = $now->today()->difference($loanDueDate)->getDays() == 0;
-        ?>
-          <tr>
-            <th scope="row"><?= $i++; ?></th>
-            <td>
-              <a href="<?= base_url("admin/members/{$loan['member_uid']}"); ?>" class="text-primary-emphasis text-decoration-underline">
-                <p>
-                  <b><?= "{$loan['first_name']} {$loan['last_name']}"; ?></b>
-                </p>
-              </a>
-            </td>
-            <td>
-              <a href="<?= base_url("admin/books/{$loan['slug']}"); ?>">
-                <p class="text-primary-emphasis text-decoration-underline"><b><?= "{$loan['title']} ({$loan['year']})"; ?></b></p>
-                <p class="text-body"><?= "Author: {$loan['author']}"; ?></p>
-              </a>
-            </td>
-            <td class="text-center"><?= $loan['quantity']; ?></td>
-            <td>
-              <b><?= $loanCreateDate->toLocalizedString('dd/MM/y'); ?></b><br>
-              <b><?= $loanCreateDate->toLocalizedString('HH:mm:ss'); ?></b>
-            </td>
-            <td>
-              <b><?= $loanDueDate->toLocalizedString('dd/MM/y'); ?></b>
-            </td>
-            <td class="text-center">
-              <?php if ($now->isBefore($loanDueDate)) : ?>
-                <span class="badge bg-success rounded-3 fw-semibold">Normal</span>
-              <?php elseif ($now->today()->equals($loanDueDate)) : ?>
-                <span class="badge bg-warning rounded-3 fw-semibold">Jatuh tempo</span>
-              <?php else : ?>
-                <span class="badge bg-danger rounded-3 fw-semibold">Terlambat</span>
-              <?php endif; ?>
-            </td>
-            <td>
-              <a href="<?= base_url("admin/loans/{$loan['uid']}"); ?>" class="d-block btn btn-primary w-100 mb-2">
-                Detail
-              </a>
-            </td>
-          </tr>
-        <?php endforeach; ?>
-      </tbody>
-    </table>
+          $now = Time::now(locale: 'id');
+          ?>
+          <?php if (empty($loans)) : ?>
+            <tr>
+              <td class="text-center" colspan="8"><b>Tidak ada data</b></td>
+            </tr>
+          <?php endif; ?>
+          <?php
+          foreach ($loans as $key => $loan) :
+            $loanCreateDate = Time::parse($loan['loan_date'], locale: 'id');
+            $loanDueDate = Time::parse($loan['due_date'], locale: 'id');
+
+            $isLate = $now->isAfter($loanDueDate);
+            $isDueDate = $now->today()->difference($loanDueDate)->getDays() == 0;
+          ?>
+            <tr>
+              <th scope="row"><?= $i++; ?></th>
+              <td>
+                <a href="<?= base_url("admin/members/{$loan['member_uid']}"); ?>" class="text-primary-emphasis text-decoration-underline">
+                  <p>
+                    <b><?= "{$loan['first_name']} {$loan['last_name']}"; ?></b>
+                  </p>
+                </a>
+              </td>
+              <td>
+                <a href="<?= base_url("admin/books/{$loan['slug']}"); ?>">
+                  <p class="text-primary-emphasis text-decoration-underline"><b><?= "{$loan['title']} ({$loan['year']})"; ?></b></p>
+                  <p class="text-body"><?= "Author: {$loan['author']}"; ?></p>
+                </a>
+              </td>
+              <td class="text-center"><?= $loan['quantity']; ?></td>
+              <td>
+                <b><?= $loanCreateDate->toLocalizedString('dd/MM/y'); ?></b><br>
+                <b><?= $loanCreateDate->toLocalizedString('HH:mm:ss'); ?></b>
+              </td>
+              <td>
+                <b><?= $loanDueDate->toLocalizedString('dd/MM/y'); ?></b>
+              </td>
+              <td class="text-center">
+                <?php if ($now->isBefore($loanDueDate)) : ?>
+                  <span class="badge bg-success rounded-3 fw-semibold">Normal</span>
+                <?php elseif ($now->today()->equals($loanDueDate)) : ?>
+                  <span class="badge bg-warning rounded-3 fw-semibold">Jatuh tempo</span>
+                <?php else : ?>
+                  <span class="badge bg-danger rounded-3 fw-semibold">Terlambat</span>
+                <?php endif; ?>
+              </td>
+              <td>
+                <a href="<?= base_url("admin/loans/{$loan['uid']}"); ?>" class="d-block btn btn-primary w-100 mb-2">
+                  Detail
+                </a>
+              </td>
+            </tr>
+          <?php endforeach; ?>
+        </tbody>
+      </table>
+    </div>
     <?= $pager->links('loans', 'my_pager'); ?>
   </div>
 </div>
diff --git a/app/Views/loans/member.php b/app/Views/loans/member.php
index 9887f58..920a36f 100644
--- a/app/Views/loans/member.php
+++ b/app/Views/loans/member.php
@@ -3,40 +3,42 @@
   <p class="text-danger"><?= $msg ?? ''; ?></p>
 <?php else : ?>
   <h5 class="card-title fw-semibold my-4">Hasil pencarian anggota</h5>
-  <table class="table table-hover table-striped">
-    <thead class="table-light">
-      <tr>
-        <th scope="col">#</th>
-        <th scope="col">Nama lengkap</th>
-        <th scope="col">Email</th>
-        <th scope="col">Phone</th>
-        <th scope="col">Alamat</th>
-        <th scope="col">Jenis kelamin</th>
-        <th scope="col" class="text-center">Aksi</th>
-      </tr>
-    </thead>
-    <tbody class="table-group-divider">
-      <?php $i = 1 ?>
-      <?php foreach ($members as $key => $member) : ?>
-        <?php if (!$member['deleted_at']) : ?>
-          <tr>
-            <th scope="row"><?= $i++; ?></th>
-            <td>
-              <b><?= $member['first_name'] . ' ' . $member['last_name']; ?></b>
-            </td>
-            <td><?= $member['email']; ?></td>
-            <td><?= $member['phone']; ?></td>
-            <td><?= $member['address']; ?></td>
-            <td><?= $member['gender']; ?></td>
-            <td style="width: 120px;" class="text-center">
-              <a href="<?= base_url("admin/loans/new/books/search?member-uid={$member['uid']}"); ?>" class="btn btn-primary mb-2">
-                <i class="ti ti-check"></i>
-                Pilih
-              </a>
-            </td>
-          </tr>
-        <?php endif; ?>
-      <?php endforeach; ?>
-    </tbody>
-  </table>
+  <div class="overflow-x-scroll">
+    <table class="table table-hover table-striped">
+      <thead class="table-light">
+        <tr>
+          <th scope="col">#</th>
+          <th scope="col">Nama lengkap</th>
+          <th scope="col">Email</th>
+          <th scope="col">Phone</th>
+          <th scope="col">Alamat</th>
+          <th scope="col">Jenis kelamin</th>
+          <th scope="col" class="text-center">Aksi</th>
+        </tr>
+      </thead>
+      <tbody class="table-group-divider">
+        <?php $i = 1 ?>
+        <?php foreach ($members as $key => $member) : ?>
+          <?php if (!$member['deleted_at']) : ?>
+            <tr>
+              <th scope="row"><?= $i++; ?></th>
+              <td>
+                <b><?= $member['first_name'] . ' ' . $member['last_name']; ?></b>
+              </td>
+              <td><?= $member['email']; ?></td>
+              <td><?= $member['phone']; ?></td>
+              <td><?= $member['address']; ?></td>
+              <td><?= $member['gender']; ?></td>
+              <td style="width: 120px;" class="text-center">
+                <a href="<?= base_url("admin/loans/new/books/search?member-uid={$member['uid']}"); ?>" class="btn btn-primary mb-2">
+                  <i class="ti ti-check"></i>
+                  Pilih
+                </a>
+              </td>
+            </tr>
+          <?php endif; ?>
+        <?php endforeach; ?>
+      </tbody>
+    </table>
+  </div>
 <?php endif; ?>
\ No newline at end of file
diff --git a/app/Views/loans/result.php b/app/Views/loans/result.php
index 1c48478..15c01a3 100644
--- a/app/Views/loans/result.php
+++ b/app/Views/loans/result.php
@@ -26,62 +26,65 @@
 <div class="card">
   <div class="card-body">
     <h5 class="card-title fw-semibold mb-4">Peminjaman Buku Berhasil</h5>
-    <table class="table table-hover table-striped">
-      <thead class="table-light">
-        <tr>
-          <th scope="col">#</th>
-          <th scope="col">Nama peminjam</th>
-          <th scope="col">Judul buku</th>
-          <th scope="col" class="text-center">Jumlah</th>
-          <th scope="col">Tgl pinjam</th>
-          <th scope="col">Tgl pengembalian</th>
-          <th scope="col" class="text-center">Aksi</th>
-        </tr>
-      </thead>
-      <tbody class="table-group-divider">
-        <?php
-        $i = 1;
-        foreach ($newLoans as $loan) : ?>
+
+    <div class="overflow-x-scroll">
+      <table class="table table-hover table-striped">
+        <thead class="table-light">
           <tr>
-            <th scope="row"><?= $i++; ?></th>
-            <td>
-              <a href="<?= base_url("admin/members/{$loan['member_uid']}"); ?>" class="text-primary-emphasis text-decoration-underline">
-                <p>
-                  <b><?= "{$loan['first_name']} {$loan['last_name']}"; ?></b>
-                </p>
-              </a>
-            </td>
-            <td>
-              <a href="<?= base_url("admin/books/{$loan['slug']}"); ?>">
-                <p class="text-primary-emphasis text-decoration-underline"><b><?= "{$loan['title']} ({$loan['year']})"; ?></b></p>
-                <p class="text-body"><?= "Author: {$loan['author']}"; ?></p>
-              </a>
-            </td>
-            <td class="text-center"><b><?= $loan['quantity']; ?></b></td>
-            <td><b><?= Time::parse($loan['loan_date'])->toLocalizedString('d/M/y'); ?></b></td>
-            <td>
-              <b><?= Time::parse($loan['due_date'])->toLocalizedString('d/M/y'); ?></b>
-            </td>
-            <td class="text-center">
-              <div class="d-flex justify-content-center gap-2">
-                <a href="<?= base_url("admin/loans/{$loan['uid']}"); ?>" class="btn btn-primary mb-2">
-                  <i class="ti ti-eye"></i>
-                  Detail
-                </a>
-                <form action="<?= base_url("admin/loans/{$loan['uid']}"); ?>" method="post">
-                  <?= csrf_field(); ?>
-                  <input type="hidden" name="_method" value="DELETE">
-                  <button type="submit" class="btn btn-danger mb-2" onclick="return confirm('Are you sure?');">
-                    <i class="ti ti-x"></i>
-                    Batalkan
-                  </button>
-                </form>
-              </div>
-            </td>
+            <th scope="col">#</th>
+            <th scope="col">Nama peminjam</th>
+            <th scope="col">Judul buku</th>
+            <th scope="col" class="text-center">Jumlah</th>
+            <th scope="col">Tgl pinjam</th>
+            <th scope="col">Tgl pengembalian</th>
+            <th scope="col" class="text-center">Aksi</th>
           </tr>
-        <?php endforeach; ?>
-      </tbody>
-    </table>
+        </thead>
+        <tbody class="table-group-divider">
+          <?php
+          $i = 1;
+          foreach ($newLoans as $loan) : ?>
+            <tr>
+              <th scope="row"><?= $i++; ?></th>
+              <td>
+                <a href="<?= base_url("admin/members/{$loan['member_uid']}"); ?>" class="text-primary-emphasis text-decoration-underline">
+                  <p>
+                    <b><?= "{$loan['first_name']} {$loan['last_name']}"; ?></b>
+                  </p>
+                </a>
+              </td>
+              <td>
+                <a href="<?= base_url("admin/books/{$loan['slug']}"); ?>">
+                  <p class="text-primary-emphasis text-decoration-underline"><b><?= "{$loan['title']} ({$loan['year']})"; ?></b></p>
+                  <p class="text-body"><?= "Author: {$loan['author']}"; ?></p>
+                </a>
+              </td>
+              <td class="text-center"><b><?= $loan['quantity']; ?></b></td>
+              <td><b><?= Time::parse($loan['loan_date'])->toLocalizedString('d/M/y'); ?></b></td>
+              <td>
+                <b><?= Time::parse($loan['due_date'])->toLocalizedString('d/M/y'); ?></b>
+              </td>
+              <td class="text-center">
+                <div class="d-flex justify-content-center gap-2">
+                  <a href="<?= base_url("admin/loans/{$loan['uid']}"); ?>" class="btn btn-primary mb-2">
+                    <i class="ti ti-eye"></i>
+                    Detail
+                  </a>
+                  <form action="<?= base_url("admin/loans/{$loan['uid']}"); ?>" method="post">
+                    <?= csrf_field(); ?>
+                    <input type="hidden" name="_method" value="DELETE">
+                    <button type="submit" class="btn btn-danger mb-2" onclick="return confirm('Are you sure?');">
+                      <i class="ti ti-x"></i>
+                      Batalkan
+                    </button>
+                  </form>
+                </div>
+              </td>
+            </tr>
+          <?php endforeach; ?>
+        </tbody>
+      </table>
+    </div>
   </div>
 </div>
 <?= $this->endSection() ?>
\ No newline at end of file
diff --git a/app/Views/members/index.php b/app/Views/members/index.php
index 6425036..2c05afe 100644
--- a/app/Views/members/index.php
+++ b/app/Views/members/index.php
@@ -39,55 +39,57 @@
         </div>
       </div>
     </div>
-    <table class="table table-hover table-striped">
-      <thead class="table-light">
-        <tr>
-          <th scope="col">#</th>
-          <th scope="col">Nama lengkap</th>
-          <th scope="col">Email</th>
-          <th scope="col">Phone</th>
-          <th scope="col">Alamat</th>
-          <th scope="col">Jenis kelamin</th>
-          <th scope="col" class="text-center">Aksi</th>
-        </tr>
-      </thead>
-      <tbody class="table-group-divider">
-        <?php $i = 1 + ($itemPerPage * ($currentPage - 1)) ?>
-        <?php if (empty($members)) : ?>
+    <div class="overflow-x-scroll">
+      <table class="table table-hover table-striped">
+        <thead class="table-light">
           <tr>
-            <td class="text-center" colspan="7"><b>Tidak ada data</b></td>
+            <th scope="col">#</th>
+            <th scope="col">Nama lengkap</th>
+            <th scope="col">Email</th>
+            <th scope="col">Phone</th>
+            <th scope="col">Alamat</th>
+            <th scope="col">Jenis kelamin</th>
+            <th scope="col" class="text-center">Aksi</th>
           </tr>
-        <?php endif; ?>
-        <?php foreach ($members as $key => $member) : ?>
-          <tr>
-            <th scope="row"><?= $i++; ?></th>
-            <td>
-              <a href="<?= base_url("admin/members/{$member['uid']}"); ?>" class="text-primary-emphasis text-decoration-underline">
-                <b><?= $member['first_name'] . ' ' . $member['last_name']; ?></b>
-              </a>
-            </td>
-            <td><?= $member['email']; ?></td>
-            <td><?= $member['phone']; ?></td>
-            <td><?= $member['address']; ?></td>
-            <td><?= $member['gender']; ?></td>
-            <td>
-              <div class="d-flex justify-content-center gap-2">
-                <a href="<?= base_url("admin/members/{$member['uid']}/edit"); ?>" class="btn btn-primary mb-2">
-                  Edit
+        </thead>
+        <tbody class="table-group-divider">
+          <?php $i = 1 + ($itemPerPage * ($currentPage - 1)) ?>
+          <?php if (empty($members)) : ?>
+            <tr>
+              <td class="text-center" colspan="7"><b>Tidak ada data</b></td>
+            </tr>
+          <?php endif; ?>
+          <?php foreach ($members as $key => $member) : ?>
+            <tr>
+              <th scope="row"><?= $i++; ?></th>
+              <td>
+                <a href="<?= base_url("admin/members/{$member['uid']}"); ?>" class="text-primary-emphasis text-decoration-underline">
+                  <b><?= $member['first_name'] . ' ' . $member['last_name']; ?></b>
                 </a>
-                <form action="<?= base_url("admin/members/{$member['uid']}"); ?>" method="post">
-                  <?= csrf_field(); ?>
-                  <input type="hidden" name="_method" value="DELETE">
-                  <button type="submit" class="btn btn-danger" onclick="return confirm('Are you sure?');">
-                    Delete
-                  </button>
-                </form>
-              </div>
-            </td>
-          </tr>
-        <?php endforeach; ?>
-      </tbody>
-    </table>
+              </td>
+              <td><?= $member['email']; ?></td>
+              <td><?= $member['phone']; ?></td>
+              <td><?= $member['address']; ?></td>
+              <td><?= $member['gender']; ?></td>
+              <td>
+                <div class="d-flex justify-content-center gap-2">
+                  <a href="<?= base_url("admin/members/{$member['uid']}/edit"); ?>" class="btn btn-primary mb-2">
+                    Edit
+                  </a>
+                  <form action="<?= base_url("admin/members/{$member['uid']}"); ?>" method="post">
+                    <?= csrf_field(); ?>
+                    <input type="hidden" name="_method" value="DELETE">
+                    <button type="submit" class="btn btn-danger" onclick="return confirm('Are you sure?');">
+                      Delete
+                    </button>
+                  </form>
+                </div>
+              </td>
+            </tr>
+          <?php endforeach; ?>
+        </tbody>
+      </table>
+    </div>
     <?= $pager->links('members', 'my_pager'); ?>
   </div>
 </div>
diff --git a/app/Views/racks/index.php b/app/Views/racks/index.php
index ac320bd..148d347 100644
--- a/app/Views/racks/index.php
+++ b/app/Views/racks/index.php
@@ -25,52 +25,54 @@
         </a>
       </div>
     </div>
-    <table class="table table-hover table-striped">
-      <thead class="table-light">
-        <tr>
-          <th scope="col">#</th>
-          <th scope="col">Rak</th>
-          <th scope="col" class="text-center">Lantai</th>
-          <th scope="col" class="text-center">Jumlah buku</th>
-          <th scope="col" class="text-center">Aksi</th>
-        </tr>
-      </thead>
-      <tbody class="table-group-divider">
-        <?php $i = 1 + ($itemPerPage * ($currentPage - 1)) ?>
-        <?php foreach ($racks as $key => $rack) : ?>
+    <div class="overflow-x-scroll">
+      <table class="table table-hover table-striped">
+        <thead class="table-light">
           <tr>
-            <th scope="row"><?= $i++; ?></th>
-            <td>
-              <a href="<?= base_url("admin/racks/{$rack['id']}"); ?>" class="text-primary-emphasis text-decoration-underline">
-                <b><?= $rack['name']; ?></b>
-              </a>
-            </td>
-            <td class="text-center">
-              <?= $rack['floor']; ?>
-            </td>
-            <td class="text-center">
-              <?= $bookCountInRacks[$key]; ?>
-            </td>
-            <td>
-              <div class="d-flex justify-content-center gap-2">
-                <a href="<?= base_url("admin/racks/{$rack['id']}/edit"); ?>" class="btn btn-primary mb-2">
-                  <i class="ti ti-edit"></i>
-                  Edit
-                </a>
-                <form action="<?= base_url("admin/racks/{$rack['id']}"); ?>" method="post">
-                  <?= csrf_field(); ?>
-                  <input type="hidden" name="_method" value="DELETE">
-                  <button type="submit" class="btn btn-danger" onclick="return confirm('Are you sure?');">
-                    <i class="ti ti-trash"></i>
-                    Delete
-                  </button>
-                </form>
-              </div>
-            </td>
+            <th scope="col">#</th>
+            <th scope="col">Rak</th>
+            <th scope="col" class="text-center">Lantai</th>
+            <th scope="col" class="text-center">Jumlah buku</th>
+            <th scope="col" class="text-center">Aksi</th>
           </tr>
-        <?php endforeach; ?>
-      </tbody>
-    </table>
+        </thead>
+        <tbody class="table-group-divider">
+          <?php $i = 1 + ($itemPerPage * ($currentPage - 1)) ?>
+          <?php foreach ($racks as $key => $rack) : ?>
+            <tr>
+              <th scope="row"><?= $i++; ?></th>
+              <td>
+                <a href="<?= base_url("admin/racks/{$rack['id']}"); ?>" class="text-primary-emphasis text-decoration-underline">
+                  <b><?= $rack['name']; ?></b>
+                </a>
+              </td>
+              <td class="text-center">
+                <?= $rack['floor']; ?>
+              </td>
+              <td class="text-center">
+                <?= $bookCountInRacks[$key]; ?>
+              </td>
+              <td>
+                <div class="d-flex justify-content-center gap-2">
+                  <a href="<?= base_url("admin/racks/{$rack['id']}/edit"); ?>" class="btn btn-primary mb-2">
+                    <i class="ti ti-edit"></i>
+                    Edit
+                  </a>
+                  <form action="<?= base_url("admin/racks/{$rack['id']}"); ?>" method="post">
+                    <?= csrf_field(); ?>
+                    <input type="hidden" name="_method" value="DELETE">
+                    <button type="submit" class="btn btn-danger" onclick="return confirm('Are you sure?');">
+                      <i class="ti ti-trash"></i>
+                      Delete
+                    </button>
+                  </form>
+                </div>
+              </td>
+            </tr>
+          <?php endforeach; ?>
+        </tbody>
+      </table>
+    </div>
     <?= $pager->links('racks', 'my_pager'); ?>
   </div>
 </div>
diff --git a/app/Views/returns/index.php b/app/Views/returns/index.php
index aca1633..166b1c0 100644
--- a/app/Views/returns/index.php
+++ b/app/Views/returns/index.php
@@ -43,85 +43,87 @@
         </div>
       </div>
     </div>
-    <table class="table table-hover table-striped">
-      <thead class="table-light">
-        <tr>
-          <th scope="col">#</th>
-          <th scope="col">Nama peminjam</th>
-          <th scope="col">Judul buku</th>
-          <th scope="col" class="text-center">Jumlah</th>
-          <th scope="col">Tgl pinjam</th>
-          <th scope="col">Tenggat</th>
-          <th scope="col">Tgl pengembalian</th>
-          <th scope="col" class="text-center">Status</th>
-          <th scope="col" class="text-center">Aksi</th>
-        </tr>
-      </thead>
-      <tbody class="table-group-divider">
-        <?php
-        $i = 1 + ($itemPerPage * ($currentPage - 1));
-
-        $now = Time::now(locale: 'id');
-        ?>
-        <?php if (empty($loans)) : ?>
+    <div class="overflow-x-scroll">
+      <table class="table table-hover table-striped">
+        <thead class="table-light">
           <tr>
-            <td class="text-center" colspan="9"><b>Tidak ada data</b></td>
+            <th scope="col">#</th>
+            <th scope="col">Nama peminjam</th>
+            <th scope="col">Judul buku</th>
+            <th scope="col" class="text-center">Jumlah</th>
+            <th scope="col">Tgl pinjam</th>
+            <th scope="col">Tenggat</th>
+            <th scope="col">Tgl pengembalian</th>
+            <th scope="col" class="text-center">Status</th>
+            <th scope="col" class="text-center">Aksi</th>
           </tr>
-        <?php endif; ?>
-        <?php
-        foreach ($loans as $key => $loan) :
-          $loanCreateDate = Time::parse($loan['loan_date'], locale: 'id');
-          $loanDueDate = Time::parse($loan['due_date'], locale: 'id');
-          $loanReturnDate = Time::parse($loan['return_date'], locale: 'id');
+        </thead>
+        <tbody class="table-group-divider">
+          <?php
+          $i = 1 + ($itemPerPage * ($currentPage - 1));
 
-          $isFined = $loan['fine_id'] != null;
-          $isFinePaid = $isFined ? (($loan['amount_paid'] ?? 0) >= $loan['fine_amount']) : true;
+          $now = Time::now(locale: 'id');
+          ?>
+          <?php if (empty($loans)) : ?>
+            <tr>
+              <td class="text-center" colspan="9"><b>Tidak ada data</b></td>
+            </tr>
+          <?php endif; ?>
+          <?php
+          foreach ($loans as $key => $loan) :
+            $loanCreateDate = Time::parse($loan['loan_date'], locale: 'id');
+            $loanDueDate = Time::parse($loan['due_date'], locale: 'id');
+            $loanReturnDate = Time::parse($loan['return_date'], locale: 'id');
 
-          $isLate = $now->isAfter($loanDueDate);
-        ?>
-          <tr>
-            <th scope="row"><?= $i++; ?></th>
-            <td>
-              <a href="<?= base_url("admin/members/{$loan['member_uid']}"); ?>" class="text-primary-emphasis text-decoration-underline">
-                <p>
-                  <b><?= "{$loan['first_name']} {$loan['last_name']}"; ?></b>
-                </p>
-              </a>
-            </td>
-            <td>
-              <a href="<?= base_url("admin/books/{$loan['slug']}"); ?>">
-                <p class="text-primary-emphasis text-decoration-underline"><b><?= "{$loan['title']} ({$loan['year']})"; ?></b></p>
-                <p class="text-body"><?= "Author: {$loan['author']}"; ?></p>
-              </a>
-            </td>
-            <td class="text-center"><?= $loan['quantity']; ?></td>
-            <td>
-              <b><?= $loanCreateDate->toLocalizedString('dd/MM/y'); ?></b><br>
-              <b><?= $loanCreateDate->toLocalizedString('HH:mm:ss'); ?></b>
-            </td>
-            <td>
-              <b><?= $loanDueDate->toLocalizedString('dd/MM/y'); ?></b>
-            </td>
-            <td class="<?= $isLate ? 'text-danger-emphasis' : ''; ?>">
-              <b><?= $loanReturnDate->toLocalizedString('dd/MM/y'); ?></b><br>
-              <b><?= $loanReturnDate->toLocalizedString('HH:mm:ss'); ?></b>
-            </td>
-            <td class="text-center">
-              <?php if ($isFinePaid) : ?>
-                <span class="badge bg-success rounded-3 fw-semibold"><?= $isFined ? 'Lunas' : 'Selesai'; ?></span>
-              <?php else : ?>
-                <span class="badge bg-danger rounded-3 fw-semibold">Menunggak</span>
-              <?php endif; ?>
-            </td>
-            <td>
-              <a href="<?= base_url("admin/returns/{$loan['uid']}"); ?>" class="d-block btn btn-primary w-100 mb-2">
-                Detail
-              </a>
-            </td>
-          </tr>
-        <?php endforeach; ?>
-      </tbody>
-    </table>
+            $isFined = $loan['fine_id'] != null;
+            $isFinePaid = $isFined ? (($loan['amount_paid'] ?? 0) >= $loan['fine_amount']) : true;
+
+            $isLate = $now->isAfter($loanDueDate);
+          ?>
+            <tr>
+              <th scope="row"><?= $i++; ?></th>
+              <td>
+                <a href="<?= base_url("admin/members/{$loan['member_uid']}"); ?>" class="text-primary-emphasis text-decoration-underline">
+                  <p>
+                    <b><?= "{$loan['first_name']} {$loan['last_name']}"; ?></b>
+                  </p>
+                </a>
+              </td>
+              <td>
+                <a href="<?= base_url("admin/books/{$loan['slug']}"); ?>">
+                  <p class="text-primary-emphasis text-decoration-underline"><b><?= "{$loan['title']} ({$loan['year']})"; ?></b></p>
+                  <p class="text-body"><?= "Author: {$loan['author']}"; ?></p>
+                </a>
+              </td>
+              <td class="text-center"><?= $loan['quantity']; ?></td>
+              <td>
+                <b><?= $loanCreateDate->toLocalizedString('dd/MM/y'); ?></b><br>
+                <b><?= $loanCreateDate->toLocalizedString('HH:mm:ss'); ?></b>
+              </td>
+              <td>
+                <b><?= $loanDueDate->toLocalizedString('dd/MM/y'); ?></b>
+              </td>
+              <td class="<?= $isLate ? 'text-danger-emphasis' : ''; ?>">
+                <b><?= $loanReturnDate->toLocalizedString('dd/MM/y'); ?></b><br>
+                <b><?= $loanReturnDate->toLocalizedString('HH:mm:ss'); ?></b>
+              </td>
+              <td class="text-center">
+                <?php if ($isFinePaid) : ?>
+                  <span class="badge bg-success rounded-3 fw-semibold"><?= $isFined ? 'Lunas' : 'Selesai'; ?></span>
+                <?php else : ?>
+                  <span class="badge bg-danger rounded-3 fw-semibold">Menunggak</span>
+                <?php endif; ?>
+              </td>
+              <td>
+                <a href="<?= base_url("admin/returns/{$loan['uid']}"); ?>" class="d-block btn btn-primary w-100 mb-2">
+                  Detail
+                </a>
+              </td>
+            </tr>
+          <?php endforeach; ?>
+        </tbody>
+      </table>
+    </div>
     <?= $pager->links('returns', 'my_pager'); ?>
   </div>
 </div>
diff --git a/app/Views/returns/loan.php b/app/Views/returns/loan.php
index a53362c..8a113d6 100644
--- a/app/Views/returns/loan.php
+++ b/app/Views/returns/loan.php
@@ -9,72 +9,74 @@
   <p class="text-danger"><?= $msg ?? ''; ?></p>
 <?php else : ?>
   <h5 class="card-title fw-semibold my-4">Hasil pencarian data peminjaman</h5>
-  <table class="table table-hover table-striped">
-    <thead class="table-light">
-      <tr>
-        <th scope="col">#</th>
-        <th scope="col">Nama lengkap</th>
-        <th scope="col">Judul buku</th>
-        <th scope="col" class="text-center">Jumlah</th>
-        <th scope="col">Tgl pinjam</th>
-        <th scope="col">Tenggat</th>
-        <th scope="col" class="text-center">Status</th>
-        <th scope="col" class="text-center">Aksi</th>
-      </tr>
-    </thead>
-    <tbody class="table-group-divider">
-      <?php $i = 1 ?>
-      <?php foreach ($loans as $key => $loan) :
-        $loanCreateDate = Time::parse($loan['loan_date'], locale: 'id');
-        $loanDueDate = Time::parse($loan['due_date'], locale: 'id');
+  <div class="overflow-x-scroll">
+    <table class="table table-hover table-striped">
+      <thead class="table-light">
+        <tr>
+          <th scope="col">#</th>
+          <th scope="col">Nama lengkap</th>
+          <th scope="col">Judul buku</th>
+          <th scope="col" class="text-center">Jumlah</th>
+          <th scope="col">Tgl pinjam</th>
+          <th scope="col">Tenggat</th>
+          <th scope="col" class="text-center">Status</th>
+          <th scope="col" class="text-center">Aksi</th>
+        </tr>
+      </thead>
+      <tbody class="table-group-divider">
+        <?php $i = 1 ?>
+        <?php foreach ($loans as $key => $loan) :
+          $loanCreateDate = Time::parse($loan['loan_date'], locale: 'id');
+          $loanDueDate = Time::parse($loan['due_date'], locale: 'id');
 
-        $isLate = $now->isAfter($loanDueDate);
-        $isDueDate = $now->today()->difference($loanDueDate)->getDays() == 0;
+          $isLate = $now->isAfter($loanDueDate);
+          $isDueDate = $now->today()->difference($loanDueDate)->getDays() == 0;
 
-        if ($now->isBefore($loanDueDate)) {
-          $status = 'Normal';
-        } else if ($now->today()->equals($loanDueDate)) {
-          $status = 'Jatuh tempo';
-        } else {
-          $status = 'Terlambat';
-        }
-      ?>
-        <?php if (!$loan['deleted_at']) : ?>
-          <tr>
-            <th scope="row"><?= $i++; ?></th>
-            <td>
-              <b><?= $loan['first_name'] . ' ' . $loan['last_name']; ?></b>
-            </td>
-            <td>
-              <p><b><?= "{$loan['title']} ({$loan['year']})"; ?></b></p>
-              <p class="text-body"><?= "Author: {$loan['author']}"; ?></p>
-            </td>
-            <td class="text-center"><?= $loan['quantity']; ?></td>
-            <td>
-              <b><?= $loanCreateDate->toLocalizedString('dd/MM/y'); ?></b><br>
-              <b><?= $loanCreateDate->toLocalizedString('HH:mm:ss'); ?></b>
-            </td>
-            <td>
-              <b><?= $loanDueDate->toLocalizedString('dd/MM/y'); ?></b>
-            </td>
-            <td class="text-center">
-              <?php if ($now->isBefore($loanDueDate)) : ?>
-                <span class="badge bg-success rounded-3 fw-semibold">Normal</span>
-              <?php elseif ($now->today()->equals($loanDueDate)) : ?>
-                <span class="badge bg-warning rounded-3 fw-semibold">Jatuh tempo</span>
-              <?php else : ?>
-                <span class="badge bg-danger rounded-3 fw-semibold">Terlambat</span>
-              <?php endif; ?>
-            </td>
-            <td style="width: 120px;" class="text-center">
-              <a href="<?= base_url("admin/returns/new?loan-uid={$loan['uid']}"); ?>" class="btn btn-primary mb-2">
-                <i class="ti ti-check"></i>
-                Pilih
-              </a>
-            </td>
-          </tr>
-        <?php endif; ?>
-      <?php endforeach; ?>
-    </tbody>
-  </table>
+          if ($now->isBefore($loanDueDate)) {
+            $status = 'Normal';
+          } else if ($now->today()->equals($loanDueDate)) {
+            $status = 'Jatuh tempo';
+          } else {
+            $status = 'Terlambat';
+          }
+        ?>
+          <?php if (!$loan['deleted_at']) : ?>
+            <tr>
+              <th scope="row"><?= $i++; ?></th>
+              <td>
+                <b><?= $loan['first_name'] . ' ' . $loan['last_name']; ?></b>
+              </td>
+              <td>
+                <p><b><?= "{$loan['title']} ({$loan['year']})"; ?></b></p>
+                <p class="text-body"><?= "Author: {$loan['author']}"; ?></p>
+              </td>
+              <td class="text-center"><?= $loan['quantity']; ?></td>
+              <td>
+                <b><?= $loanCreateDate->toLocalizedString('dd/MM/y'); ?></b><br>
+                <b><?= $loanCreateDate->toLocalizedString('HH:mm:ss'); ?></b>
+              </td>
+              <td>
+                <b><?= $loanDueDate->toLocalizedString('dd/MM/y'); ?></b>
+              </td>
+              <td class="text-center">
+                <?php if ($now->isBefore($loanDueDate)) : ?>
+                  <span class="badge bg-success rounded-3 fw-semibold">Normal</span>
+                <?php elseif ($now->today()->equals($loanDueDate)) : ?>
+                  <span class="badge bg-warning rounded-3 fw-semibold">Jatuh tempo</span>
+                <?php else : ?>
+                  <span class="badge bg-danger rounded-3 fw-semibold">Terlambat</span>
+                <?php endif; ?>
+              </td>
+              <td style="width: 120px;" class="text-center">
+                <a href="<?= base_url("admin/returns/new?loan-uid={$loan['uid']}"); ?>" class="btn btn-primary mb-2">
+                  <i class="ti ti-check"></i>
+                  Pilih
+                </a>
+              </td>
+            </tr>
+          <?php endif; ?>
+        <?php endforeach; ?>
+      </tbody>
+    </table>
+  </div>
 <?php endif; ?>
\ No newline at end of file
diff --git a/app/Views/users/index.php b/app/Views/users/index.php
index 387597a..b72969e 100644
--- a/app/Views/users/index.php
+++ b/app/Views/users/index.php
@@ -25,65 +25,67 @@
         </a>
       </div>
     </div>
-    <table class="table table-hover table-striped">
-      <thead class="table-light">
-        <tr>
-          <th scope="col">#</th>
-          <th scope="col">Username</th>
-          <th scope="col">Email</th>
-          <th scope="col">Tanggal dibuat</th>
-          <th scope="col" class="text-center">Group</th>
-          <th scope="col" class="text-center">Aksi</th>
-        </tr>
-      </thead>
-      <tbody class="table-group-divider">
-        <?php $i = 1 + ($itemPerPage * ($currentPage - 1)) ?>
-        <?php foreach ($users as $user) : ?>
-          <?php
-          $userAttributes = $user->toArray();
-          $userIdentities = $user->identities[0]->toArray();
-          $userGroup = $user->getGroups()[0];
-          ?>
+    <div class="overflow-x-scroll">
+      <table class="table table-hover table-striped">
+        <thead class="table-light">
           <tr>
-            <th scope="row"><?= $i++; ?></th>
-            <td>
-              <b><?= $userAttributes['username']; ?></b>
-            </td>
-            <td>
-              <b><?= $userIdentities['secret']; ?></b>
-            </td>
-            <td>
-              <?= $userAttributes['created_at']; ?>
-            </td>
-            <td class="text-center">
-              <?php if ($userGroup === 'superadmin') : ?>
-                <span class="badge bg-success rounded-3 fw-semibold text-black"><?= $userGroup; ?></span>
-              <?php elseif ($userGroup === 'admin') : ?>
-                <span class="badge bg-primary rounded-3 fw-semibold"><?= $userGroup; ?></span>
-              <?php else : ?>
-                <span class="badge bg-black rounded-3 fw-semibold"><?= $userGroup; ?></span>
-              <?php endif; ?>
-            </td>
-            <td>
-              <div class="d-flex justify-content-center gap-2">
-                <a href="<?= base_url("admin/users/{$userAttributes['id']}/edit"); ?>" class="btn btn-primary mb-2">
-                  <i class="ti ti-edit"></i>
-                  Edit
-                </a>
-                <form action="<?= base_url("admin/users/{$userAttributes['id']}"); ?>" method="post">
-                  <?= csrf_field(); ?>
-                  <input type="hidden" name="_method" value="DELETE">
-                  <button type="submit" class="btn btn-danger" onclick="return confirm('Are you sure?');">
-                    <i class="ti ti-trash"></i>
-                    Delete
-                  </button>
-                </form>
-              </div>
-            </td>
+            <th scope="col">#</th>
+            <th scope="col">Username</th>
+            <th scope="col">Email</th>
+            <th scope="col">Tanggal dibuat</th>
+            <th scope="col" class="text-center">Group</th>
+            <th scope="col" class="text-center">Aksi</th>
           </tr>
-        <?php endforeach; ?>
-      </tbody>
-    </table>
+        </thead>
+        <tbody class="table-group-divider">
+          <?php $i = 1 + ($itemPerPage * ($currentPage - 1)) ?>
+          <?php foreach ($users as $user) : ?>
+            <?php
+            $userAttributes = $user->toArray();
+            $userIdentities = $user->identities[0]->toArray();
+            $userGroup = $user->getGroups()[0];
+            ?>
+            <tr>
+              <th scope="row"><?= $i++; ?></th>
+              <td>
+                <b><?= $userAttributes['username']; ?></b>
+              </td>
+              <td>
+                <b><?= $userIdentities['secret']; ?></b>
+              </td>
+              <td>
+                <?= $userAttributes['created_at']; ?>
+              </td>
+              <td class="text-center">
+                <?php if ($userGroup === 'superadmin') : ?>
+                  <span class="badge bg-success rounded-3 fw-semibold text-black"><?= $userGroup; ?></span>
+                <?php elseif ($userGroup === 'admin') : ?>
+                  <span class="badge bg-primary rounded-3 fw-semibold"><?= $userGroup; ?></span>
+                <?php else : ?>
+                  <span class="badge bg-black rounded-3 fw-semibold"><?= $userGroup; ?></span>
+                <?php endif; ?>
+              </td>
+              <td>
+                <div class="d-flex justify-content-center gap-2">
+                  <a href="<?= base_url("admin/users/{$userAttributes['id']}/edit"); ?>" class="btn btn-primary mb-2">
+                    <i class="ti ti-edit"></i>
+                    Edit
+                  </a>
+                  <form action="<?= base_url("admin/users/{$userAttributes['id']}"); ?>" method="post">
+                    <?= csrf_field(); ?>
+                    <input type="hidden" name="_method" value="DELETE">
+                    <button type="submit" class="btn btn-danger" onclick="return confirm('Are you sure?');">
+                      <i class="ti ti-trash"></i>
+                      Delete
+                    </button>
+                  </form>
+                </div>
+              </td>
+            </tr>
+          <?php endforeach; ?>
+        </tbody>
+      </table>
+    </div>
     <?= $pager->links('users', 'my_pager'); ?>
   </div>
 </div>