feat: layout reports using card

dashboards/templates/dashboard/index.html

 {% extends "layout.html" %} {% block dashboard %}
-<div style="max-width: 80vw" class="w-100 p-4">
+<div style="max-width: 80vw" class="w-100 p-4 d-flex flex-column gap-4">
   <h1 class="h2">Reports</h1>
-  <div class="row container pt-5">{% include "dashboard/summary.html" %}</div>
-  <div class="row container pt-5">
-    {% include "dashboard/overdue_loan.html" %}
-  </div>
-  <div class="row container pt-5">
-    {% include "dashboard/near_overdue_loan.html" %}
-  </div>
-  <div class="row container pt-5">
-    {% include "dashboard/login_history.html" %}
-  </div>
+  <div class="row card">{% include "dashboard/summary.html" %}</div>
+  <div class="row card">{% include "dashboard/overdue_loan.html" %}</div>
+  <div class="row card">{% include "dashboard/near_overdue_loan.html" %}</div>
+  <div class="row card">{% include "dashboard/login_history.html" %}</div>
 </div>
 {% endblock dashboard %}

dashboards/templates/dashboard/login_history.html

-<table class="table">
-  <legend class="h3">Librarian Login History</legend>
-  <thead>
-    <tr>
-      <th scope="col">Name</th>
-      <th scope="col">Login At</th>
-    </tr>
-  </thead>
-  <tbody>
-    {% for histori in login_histories %}
-    <tr>
-      <td>{{ histori.librarian.name }}</td>
-      <td>{{ histori.login_at }}</td>
-    </tr>
-    {% endfor %}
-  </tbody>
-</table>
+<div class="card-header">
+  <h2 class="h4">Librarian Login History</h2>
+</div>
+<div class="card-body">
+  <table class="table table-striped">
+    <thead>
+      <tr class="table-primary">
+        <th scope="col">Name</th>
+        <th scope="col">Login At</th>
+      </tr>
+    </thead>
+    <tbody>
+      {% for histori in login_histories %}
+      <tr>
+        <td>{{ histori.librarian.name }}</td>
+        <td>{{ histori.login_at }}</td>
+      </tr>
+      {% endfor %}
+    </tbody>
+  </table>
+</div>

dashboards/templates/dashboard/near_overdue_loan.html

-<table class="table">
-  <legend class="h3">Near Overdue Book Loan</legend>
-  <thead>
-    <tr>
-      <th scope="col">Book Title</th>
-      <th scope="col">Due Date</th>
-      <th scope="col">Loan Date</th>
-    </tr>
-  </thead>
-  <tbody>
-    {% for loan in near_overdue_loans %}
-    <tr>
-      <td>{{ loan.book.title }}</td>
-      <td>{{ loan.due_date }}</td>
-      <td>{{ loan.loan_date }}</td>
-    </tr>
-    {% endfor %}
-  </tbody>
-</table>
+<div class="card-header">
+  <h2 class="h4">Near Overdue Book Loan</h2>
+</div>
+<div class="card-body">
+  <table class="table table-striped">
+    <legend class="h3"></legend>
+    <thead>
+      <tr class="table-primary">
+        <th scope="col">Book Title</th>
+        <th scope="col">Due Date</th>
+        <th scope="col">Loan Date</th>
+      </tr>
+    </thead>
+    <tbody>
+      {% for loan in near_overdue_loans %}
+      <tr>
+        <td>{{ loan.book.title }}</td>
+        <td>{{ loan.due_date }}</td>
+        <td>{{ loan.loan_date }}</td>
+      </tr>
+      {% endfor %}
+    </tbody>
+  </table>
+</div>

dashboards/templates/dashboard/overdue_loan.html

-<table class="table">
-  <legend class="h3">Overdue Book Loan</legend>
-  <thead>
-    <tr>
-      <th scope="col">Book Title</th>
-      <th scope="col">Due Date</th>
-    </tr>
-  </thead>
-  <tbody>
-    {% for loan in overdue_loans %}
-    <tr>
-      <td>{{ loan.book.title }}</td>
-      <td>{{ loan.due_date }}</td>
-    </tr>
-    {% endfor %}
-  </tbody>
-</table>
+<div class="card-header">
+  <h2 class="h4">Overdue Book Loan</h2>
+</div>
+<div class="card-body">
+  <table class="table table-striped">
+    <thead>
+      <tr class="table-primary">
+        <th scope="col">Book Title</th>
+        <th scope="col">Due Date</th>
+      </tr>
+    </thead>
+    <tbody>
+      {% for loan in overdue_loans %}
+      <tr>
+        <td>{{ loan.book.title }}</td>
+        <td>{{ loan.due_date }}</td>
+      </tr>
+      {% endfor %}
+    </tbody>
+  </table>
+</div>

dashboards/templates/dashboard/summary.html

-<h3 class="h3">At a Glance</h3>
-<div class="row container text-center">
+<div class="card-header">
+  <h3 class="h4">At a Glance</h3>
+</div>
+<div class="card-body row container text-center">
   <div class="col">
     <div class="card h-100 d-flex flex-column">
-      <div class="card-body">
+      <div class="card-body row align-content-center">
         <h5 class="card-title"><i class="bi bi-book-half"></i> Total Book</h5>
         <p class="h1">{{ total_book }}</p>
       </div>
@@ -15,7 +17,7 @@
   </div>
   <div class="col">
     <div class="card h-100">
-      <div class="card-body">
+      <div class="card-body row align-content-center">
         <h5 class="card-title">
           <i class="bi bi-person-vcard"></i> Total Member
         </h5>
@@ -30,11 +32,11 @@
   </div>
   <div class="col">
     <div class="card h-100">
-      <div class="card-body">
+      <div class="card-body row align-content-center">
         <h5 class="card-title">
           <i class="bi bi-calendar-week"></i> Book Loan
         </h5>
-        <div class="d-flex justify-content-center">
+        <div class="d-flex justify-content-center gap-2">
           <div class="card">
             <div class="card-header">Total</div>
             <p class="h1">{{ total_book_loans }}</p>