feat: book detail

books/templates/book_detail.html

+{% extends "layout.html" %} {% block dashboard %}
+<div style="max-width: 80vw" class="w-100 p-4">
+  <div class="d-flex justify-content-between pb-4">
+    <div class="d-flex gap-2 pb-4">
+      <a class="btn btn-success" href="/dashboard/books/{{ book.id }}/update">
+        <i class="bi bi-pencil-square"></i> Edit
+      </a>
+      <a class="btn btn-danger" href="/dashboard/books/{{ book.id }}/delete/">
+        <i class="bi bi-trash3-fill"></i> Delete
+      </a>
+    </div>
+  </div>
+  {% if book.cover_image %}
+  <div class="d-flex gap-5">
+    <img
+      class="object-fit-contain"
+      height="360"
+      src="{{ book.cover_image.url }}"
+      alt="{{ book.title }}"
+    />
+    <div class="col">
+      <h1 class="h2 row">{{ book.title }}</h1>
+      <p class="h5 row">{{ book.description }}</p>
+      <p class="h5 row">Stock: {{ book.stock }}</p>
+      <p class="row badge text-bg-secondary">{{ book.category.name }}</p>
+      <time datetime="{{ book.created_at }}" class="row fs-6"
+        >Created at: {{ book.created_at }}</time
+      >
+      <time datetime="{{ book.updated_at }}" class="row fs-6"
+        >Updated at: {{ book.updated_at }}</time
+      >
+    </div>
+  </div>
+  {% endif %}
+</div>
+{% endblock dashboard %}

books/templates/book_table_data.html

 <table class="table table-hover">
   <thead>
     <tr class="table-primary">
-      <th scope="col">Cover</th>
       <th scope="col">Title</th>
       <th scope="col">Category</th>
       <th scope="col">Stock</th>
@@ -14,17 +13,7 @@
   <tbody>
     {% if object_list %} {% for book in object_list %}
     <tr>
-      <td>
-        {% if book.cover_image %}
-        <img
-          style="object-fit: contain"
-          width="100"
-          height="100"
-          src="{{ book.cover_image.url }}"
-        />
-        {% endif %}
-      </td>
-      <td>{{ book.title }}</td>
+      <td><a href="/dashboard/books/{{ book.id }}/">{{ book.title }}</a></td>
       <td>{{ book.category.name }}</td>
       <td>{{ book.stock }}</td>
       <td>{{ book.description }}</td>
@@ -32,7 +21,10 @@
       <td>{{ book.updated_at }}</td>
       <td>
         <div class="d-flex gap-2">
-          <a class="btn btn-success" href="/dashboard/books/{{ book.id }}/">
+          <a
+            class="btn btn-success"
+            href="/dashboard/books/{{ book.id }}/update"
+          >
             <i class="bi bi-pencil-square"></i>
           </a>
           <a
@@ -55,7 +47,6 @@
       <td></td>
       <td></td>
       <td></td>
-      <td></td>
     </tr>
     {% endif %}
   </tbody>

books/urls.py

 from django.urls import path
-from books.views import BookListView, BookCreateView, BookUpdateView, BookDeleteView
+from books.views import (
+    BookListView,
+    BookDetailView,
+    BookCreateView,
+    BookUpdateView,
+    BookDeleteView,
+)
 
 urlpatterns = [
     path("", BookListView.as_view(), name="book_list"),
-    path("add/", BookCreateView.as_view(), name="book_update"),
-    path("<int:pk>/", BookUpdateView.as_view(), name="book_update"),
+    path("add/", BookCreateView.as_view(), name="book_add"),
+    path("<int:pk>/", BookDetailView.as_view(), name="book_detail"),
+    path("<int:pk>/update/", BookUpdateView.as_view(), name="book_update"),
     path("<int:pk>/delete/", BookDeleteView.as_view(), name="book_delete"),
 ]

books/views.py

@@ -30,6 +30,12 @@ class BookListView(generic.ListView):
         return queryset.order_by("-updated_at")
 
 
+class BookDetailView(generic.DeleteView):
+    model = Book
+    template_name = "book_detail.html"
+    context_object_name = "book"
+
+
 class BookCreateView(generic.edit.CreateView):
     model = Book
     form_class = BookForm