From 58b76aa26c0cb9c6c4a29e9082a94da2a6e3d82d Mon Sep 17 00:00:00 2001
From: Andijohan <117697844+Andijohan@users.noreply.github.com>
Date: Mon, 13 Jan 2025 12:09:35 +0700
Subject: [PATCH 01/11] membuat halaman form request

---
 pages/request.vue | 44 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 pages/request.vue

diff --git a/pages/request.vue b/pages/request.vue
new file mode 100644
index 0000000..f36c30a
--- /dev/null
+++ b/pages/request.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import Kategori from "./admin/buku/kategori.vue"
+
+const { data, error } = await useAsyncData(() => getAllAvailableCategories())
+
+const requestData = ref({
+  judul: "",
+  isbn: "",
+  kategori: "",
+})
+</script>
+
+<template>
+  <section class="max-w-xl m-auto">
+    <header class="mb-4">
+    <h1 class="font-bold">Form request buku</h1>
+    <p>
+      Isi form berikut untuk mengbuat request buku baru yang akan ditambahkan ke metscoo library.
+    </p>
+    <p>kamu hanya bisa merequest satu buku perbulan dan request kamu akan diproses selama 14 hari kerja.</p>
+    </header>
+    <form class="flex flex-col gap-2 main-section">
+      <label for="judul"> Judul </label>
+      <InputText type="text" v-model="requestData.judul" placeholder="judul" required id="judul" />
+
+      <label for="isbn"> ISBN </label>
+
+      <InputText type="text" v-model="requestData.isbn" placeholder="isbn" required id="isbn" />
+
+      <label for="Kategori"> kategori </label>
+      <Select
+        v-if="data"
+        v-model="requestData.kategori"
+        :options="data"
+        option-label="kategori"
+        variant="filled"
+        placeholder="Pilih kategori"
+        class="w-full"
+      ></Select>
+
+      <Button> Request </Button>
+    </form>
+  </section>
+</template>

From 6b935386b6c5090af62da4766de263ca4a227b7d Mon Sep 17 00:00:00 2001
From: jonsganteng <135809897+jonsganteng@users.noreply.github.com>
Date: Tue, 14 Jan 2025 08:59:45 +0000
Subject: [PATCH 02/11] Nampilin data request di table tapi belom selesai

---
 pages/admin/request.vue | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 pages/admin/request.vue

diff --git a/pages/admin/request.vue b/pages/admin/request.vue
new file mode 100644
index 0000000..3135251
--- /dev/null
+++ b/pages/admin/request.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { Database } from "~/types/database.types"
+
+useHead({
+  title: "request",
+})
+definePageMeta({
+  layout: "admin",
+})
+
+const { data } = await useAsyncData(async () => {
+  const supabase = useSupabaseClient()
+  let query = supabase.from("book_requests").select()
+
+  const { data, error } = await query
+  return data
+})
+</script>
+
+<template>
+  <h1>request</h1>
+
+  <DataTable :value="data">
+    <Column header="Tanggal request">
+      <template #body="{ data }">
+        <!-- {{ formatDate(data.created_at) }} -->
+      </template>
+    </Column>
+    <Column field="isbn" header="ISBN" />
+    <Column field="title" header="Judul" />
+  </DataTable>
+</template>

From 98e26035fc2c4feda63c351eeab3036b4de766db Mon Sep 17 00:00:00 2001
From: Efraim Munthe <efrayanglain@gmail.com>
Date: Thu, 16 Jan 2025 07:32:11 +0700
Subject: [PATCH 03/11] chore: gen types

---
 types/database.types.ts | 41 ++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 40 insertions(+), 1 deletion(-)

diff --git a/types/database.types.ts b/types/database.types.ts
index b8a9959..9aa731c 100755
--- a/types/database.types.ts
+++ b/types/database.types.ts
@@ -10,6 +10,44 @@ export type Json =
 export type Database = {
   public: {
     Tables: {
+      book_requests: {
+        Row: {
+          category: string
+          created_at: string
+          id: number
+          is_accepted: Database["public"]["Enums"]["request status"] | null
+          isbn: string
+          title: string
+          user_id: string | null
+        }
+        Insert: {
+          category?: string
+          created_at?: string
+          id?: number
+          is_accepted?: Database["public"]["Enums"]["request status"] | null
+          isbn: string
+          title: string
+          user_id?: string | null
+        }
+        Update: {
+          category?: string
+          created_at?: string
+          id?: number
+          is_accepted?: Database["public"]["Enums"]["request status"] | null
+          isbn?: string
+          title?: string
+          user_id?: string | null
+        }
+        Relationships: [
+          {
+            foreignKeyName: "book_requests_user_id_fkey"
+            columns: ["user_id"]
+            isOneToOne: false
+            referencedRelation: "pengguna"
+            referencedColumns: ["user_id"]
+          },
+        ]
+      }
       buku: {
         Row: {
           alamat_terbit: string
@@ -328,7 +366,7 @@ export type Database = {
     Functions: {
       check_out_users: {
         Args: Record<PropertyKey, never>
-        Returns: string
+        Returns: boolean
       }
       is_super_admin: {
         Args: Record<PropertyKey, never>
@@ -337,6 +375,7 @@ export type Database = {
     }
     Enums: {
       "event type": "check_in" | "check_out"
+      "request status": "processing" | "accepted" | "rejected"
     }
     CompositeTypes: {
       [_ in never]: never

From c279801553c4a0fa5803c4d612f7c5f1ec855046 Mon Sep 17 00:00:00 2001
From: Andijohan <117697844+Andijohan@users.noreply.github.com>
Date: Thu, 16 Jan 2025 09:01:25 +0700
Subject: [PATCH 04/11] menghubungkan menu request ke data supabase

---
 pages/admin/request.vue |  2 +-
 pages/request.vue       | 49 ++++++++++++++++++++++++++++++-----------
 2 files changed, 37 insertions(+), 14 deletions(-)

diff --git a/pages/admin/request.vue b/pages/admin/request.vue
index 3135251..6ebe3b4 100644
--- a/pages/admin/request.vue
+++ b/pages/admin/request.vue
@@ -10,7 +10,7 @@ definePageMeta({
 
 const { data } = await useAsyncData(async () => {
   const supabase = useSupabaseClient()
-  let query = supabase.from("book_requests").select()
+  const query = supabase.from("book_requests").select()
 
   const { data, error } = await query
   return data
diff --git a/pages/request.vue b/pages/request.vue
index f36c30a..015536c 100644
--- a/pages/request.vue
+++ b/pages/request.vue
@@ -1,36 +1,59 @@
 <script setup lang="ts">
+import type { Database } from "~/types/database.types"
 import Kategori from "./admin/buku/kategori.vue"
 
-const { data, error } = await useAsyncData(() => getAllAvailableCategories())
+const { data } = await useAsyncData(() => getAllAvailableCategories())
 
 const requestData = ref({
-  judul: "",
+  title: "",
   isbn: "",
-  kategori: "",
+  category: "",
 })
+
+async function insertRequest() {
+  const supabase = useSupabaseClient<Database>()
+
+  // console.log({
+  //   title: requestData.value.title,
+  //   isbn: requestData.value.isbn,
+  //   kategori: requestData.value.category.kategori,
+  // })
+
+  const { error } = await supabase.from("book_requests").insert({
+    title: requestData.value.title,
+    isbn: requestData.value.isbn,
+    category: requestData.value.category.kategori,
+  })
+
+  if (error) console.log(error)
+}
 </script>
 
 <template>
   <section class="max-w-xl m-auto">
     <header class="mb-4">
-    <h1 class="font-bold">Form request buku</h1>
-    <p>
-      Isi form berikut untuk mengbuat request buku baru yang akan ditambahkan ke metscoo library.
-    </p>
-    <p>kamu hanya bisa merequest satu buku perbulan dan request kamu akan diproses selama 14 hari kerja.</p>
+      <h1 class="font-bold">Formulir permintaan buku</h1>
+      <p>
+        Isi form berikut untuk mengbuat request buku baru yang akan ditambahkan ke metscoo library.
+      </p>
+      <p>
+        kamu hanya bisa merequest satu buku perbulan dan request kamu akan diproses selama 14 hari
+        kerja.
+      </p>
     </header>
-    <form class="flex flex-col gap-2 main-section">
+
+    <form class="flex flex-col gap-2 main-section" @submit.prevent="insertRequest">
       <label for="judul"> Judul </label>
-      <InputText type="text" v-model="requestData.judul" placeholder="judul" required id="judul" />
+      <InputText id="judul" v-model="requestData.title" type="text" placeholder="judul" required />
 
       <label for="isbn"> ISBN </label>
 
-      <InputText type="text" v-model="requestData.isbn" placeholder="isbn" required id="isbn" />
+      <InputText id="isbn" v-model="requestData.isbn" type="text" placeholder="isbn" required />
 
       <label for="Kategori"> kategori </label>
       <Select
         v-if="data"
-        v-model="requestData.kategori"
+        v-model="requestData.category"
         :options="data"
         option-label="kategori"
         variant="filled"
@@ -38,7 +61,7 @@ const requestData = ref({
         class="w-full"
       ></Select>
 
-      <Button> Request </Button>
+      <Button type="submit"> Request </Button>
     </form>
   </section>
 </template>

From 1d7d57f51cd14ee6ee19a244662367fbd91866d5 Mon Sep 17 00:00:00 2001
From: Andijohan <andijohan1705@gmail.com>
Date: Thu, 16 Jan 2025 09:27:17 +0700
Subject: [PATCH 05/11] melanjutkan fitur request buku

---
 pages/request.vue | 40 ++++++++++++++++++++++++++++------------
 1 file changed, 28 insertions(+), 12 deletions(-)

diff --git a/pages/request.vue b/pages/request.vue
index 015536c..84ab396 100644
--- a/pages/request.vue
+++ b/pages/request.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
+import { Toast } from "primevue"
 import type { Database } from "~/types/database.types"
-import Kategori from "./admin/buku/kategori.vue"
+
+const toast = useToast()
 
 const { data } = await useAsyncData(() => getAllAvailableCategories())
 
@@ -13,19 +15,31 @@ const requestData = ref({
 async function insertRequest() {
   const supabase = useSupabaseClient<Database>()
 
-  // console.log({
-  //   title: requestData.value.title,
-  //   isbn: requestData.value.isbn,
-  //   kategori: requestData.value.category.kategori,
-  // })
+  try {
+    const { error } = await supabase.from("book_requests").insert({
+      title: requestData.value.title,
+      isbn: requestData.value.isbn,
+      category: requestData.value.category.kategori,
+    })
+
+    if (error) throw error
 
-  const { error } = await supabase.from("book_requests").insert({
-    title: requestData.value.title,
-    isbn: requestData.value.isbn,
-    category: requestData.value.category.kategori,
-  })
+    toast.add({
+      severity: "success",
+      summary: "menanbahkan request",
+      detail: "sukses menanbahkan request buku, mohon ditunggu ya",
+      life: 10000,
+    })
+  } catch (error) {
+    console.log(error)
 
-  if (error) console.log(error)
+    toast.add({
+      severity: "error",
+      summary: "gagal menambahkan buku",
+      detail: "gagal menanbahkan request buku, silahkan coba lagi nanti",
+      life: 10000,
+    })
+  }
 }
 </script>
 
@@ -64,4 +78,6 @@ async function insertRequest() {
       <Button type="submit"> Request </Button>
     </form>
   </section>
+
+  <Toast />
 </template>

From 9b09ad54d3de1f1727be1966708cdbcd8d3fa10d Mon Sep 17 00:00:00 2001
From: Andijohan <andijohan1705@gmail.com>
Date: Thu, 16 Jan 2025 10:11:19 +0700
Subject: [PATCH 06/11] lanjutannya

---
 components/TheNavbar.vue   |  7 ++++++-
 components/ThemeToggle.vue | 11 +++++------
 pages/request.vue          |  3 ++-
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/components/TheNavbar.vue b/components/TheNavbar.vue
index 1825899..ce5a661 100644
--- a/components/TheNavbar.vue
+++ b/components/TheNavbar.vue
@@ -46,7 +46,9 @@ const isAdmin = computed(() =>
         </button>
       </li>
       <li>
-        <ThemeToggle class="nav-link text-lg" />
+        <ClientOnly fallback-tag="span" fallback="memuat tema...">
+          <ThemeToggle class="nav-link text-lg block" />
+        </ClientOnly>
       </li>
       <li>
         <NuxtLink class="nav-link" to="/"> Beranda </NuxtLink>
@@ -57,6 +59,9 @@ const isAdmin = computed(() =>
       <li>
         <NuxtLink class="nav-link" to="/wishlist"> Wishlist </NuxtLink>
       </li>
+      <li>
+        <NuxtLink class="nav-link" to="/request"> Request Buku </NuxtLink>
+      </li>
 
       <template v-if="user">
         <li v-if="!isAdmin">
diff --git a/components/ThemeToggle.vue b/components/ThemeToggle.vue
index 1485140..deea4be 100644
--- a/components/ThemeToggle.vue
+++ b/components/ThemeToggle.vue
@@ -11,10 +11,9 @@ function toggleTheme(theme: Theme) {
 </script>
 
 <template>
-  <ClientOnly fallback-tag="span" fallback="memuat tema...">
-    <button :title="`mode ${themeStore.theme}`" @click="toggleTheme(themeStore.theme ?? 'light')">
-      <IconMoonCrescent v-if="themeStore.theme === 'dark'" />
-      <IconSun v-else />
-    </button>
-  </ClientOnly>
+ 
+  <button :title="`mode ${themeStore.theme}`" @click="toggleTheme(themeStore.theme ?? 'light')">
+    <IconMoonCrescent v-if="themeStore.theme === 'dark'" />
+    <IconSun v-else />
+  </button>
 </template>
diff --git a/pages/request.vue b/pages/request.vue
index 84ab396..a1a0fa6 100644
--- a/pages/request.vue
+++ b/pages/request.vue
@@ -19,7 +19,7 @@ async function insertRequest() {
     const { error } = await supabase.from("book_requests").insert({
       title: requestData.value.title,
       isbn: requestData.value.isbn,
-      category: requestData.value.category.kategori,
+      category: requestData.value.category,
     })
 
     if (error) throw error
@@ -70,6 +70,7 @@ async function insertRequest() {
         v-model="requestData.category"
         :options="data"
         option-label="kategori"
+        option-value="kategori"
         variant="filled"
         placeholder="Pilih kategori"
         class="w-full"

From f524b154e10adb8a87fd6d527e492f1759ddc9c9 Mon Sep 17 00:00:00 2001
From: Andijohan <andijohan1705@gmail.com>
Date: Thu, 16 Jan 2025 10:11:19 +0700
Subject: [PATCH 07/11] lanjutannya

---
 components/TheNavbar.vue   |  9 +++++++--
 components/ThemeToggle.vue | 11 +++++------
 pages/request.vue          |  3 ++-
 3 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/components/TheNavbar.vue b/components/TheNavbar.vue
index 1825899..266470f 100644
--- a/components/TheNavbar.vue
+++ b/components/TheNavbar.vue
@@ -24,7 +24,7 @@ const isAdmin = computed(() =>
 
 <template>
   <nav
-    class="flex justify-between items-center sticky top-0 bg-primary dark:bg-surface-700/90 z-10 shadow-md backdrop-blur-md navbar"
+    class="flex justify-between items-center sticky top-0 bg-primary dark:bg-surface-700/90 z-10 shadow-md backdrop-blur-md"
   >
     <div class="logo">
       <img src="/logo.svg" alt="Logo Metschoo Library" class="h-14" />
@@ -46,7 +46,9 @@ const isAdmin = computed(() =>
         </button>
       </li>
       <li>
-        <ThemeToggle class="nav-link text-lg" />
+        <ClientOnly fallback-tag="span" fallback="memuat tema...">
+          <ThemeToggle class="nav-link text-lg block" />
+        </ClientOnly>
       </li>
       <li>
         <NuxtLink class="nav-link" to="/"> Beranda </NuxtLink>
@@ -57,6 +59,9 @@ const isAdmin = computed(() =>
       <li>
         <NuxtLink class="nav-link" to="/wishlist"> Wishlist </NuxtLink>
       </li>
+      <li>
+        <NuxtLink class="nav-link" to="/request"> Request Buku </NuxtLink>
+      </li>
 
       <template v-if="user">
         <li v-if="!isAdmin">
diff --git a/components/ThemeToggle.vue b/components/ThemeToggle.vue
index 1485140..deea4be 100644
--- a/components/ThemeToggle.vue
+++ b/components/ThemeToggle.vue
@@ -11,10 +11,9 @@ function toggleTheme(theme: Theme) {
 </script>
 
 <template>
-  <ClientOnly fallback-tag="span" fallback="memuat tema...">
-    <button :title="`mode ${themeStore.theme}`" @click="toggleTheme(themeStore.theme ?? 'light')">
-      <IconMoonCrescent v-if="themeStore.theme === 'dark'" />
-      <IconSun v-else />
-    </button>
-  </ClientOnly>
+ 
+  <button :title="`mode ${themeStore.theme}`" @click="toggleTheme(themeStore.theme ?? 'light')">
+    <IconMoonCrescent v-if="themeStore.theme === 'dark'" />
+    <IconSun v-else />
+  </button>
 </template>
diff --git a/pages/request.vue b/pages/request.vue
index 84ab396..a1a0fa6 100644
--- a/pages/request.vue
+++ b/pages/request.vue
@@ -19,7 +19,7 @@ async function insertRequest() {
     const { error } = await supabase.from("book_requests").insert({
       title: requestData.value.title,
       isbn: requestData.value.isbn,
-      category: requestData.value.category.kategori,
+      category: requestData.value.category,
     })
 
     if (error) throw error
@@ -70,6 +70,7 @@ async function insertRequest() {
         v-model="requestData.category"
         :options="data"
         option-label="kategori"
+        option-value="kategori"
         variant="filled"
         placeholder="Pilih kategori"
         class="w-full"

From e9001b6d832e55a193e4b376f21eceabbe335fcd Mon Sep 17 00:00:00 2001
From: Andijohan <andijohan1705@gmail.com>
Date: Thu, 16 Jan 2025 11:38:27 +0700
Subject: [PATCH 08/11] melanjutkan limit untuk peminjaman

---
 pages/request.vue | 38 +++++++++++++++++++++++++++++++++++++-
 1 file changed, 37 insertions(+), 1 deletion(-)

diff --git a/pages/request.vue b/pages/request.vue
index a1a0fa6..a6bf687 100644
--- a/pages/request.vue
+++ b/pages/request.vue
@@ -6,6 +6,34 @@ const toast = useToast()
 
 const { data } = await useAsyncData(() => getAllAvailableCategories())
 
+const user = useSupabaseUser()
+
+const { data: latestRequest } = await useAsyncData(async () => {
+  const supabase = useSupabaseClient<Database>()
+
+  const { data, error } = await supabase
+    .from("book_requests")
+    .select("*")
+    .eq("user_id", user.value!.id)
+    .order("created_at", { ascending: false })
+    .limit(1)
+    .single()
+
+  if (error) console.log(error)
+  return data
+})
+
+const canRequest = computed(() => {
+  console.log(latestRequest.value)
+  if (latestRequest.value === null) return true
+
+  const SecondDate = new Date().getTime() - new Date(latestRequest.value.created_at).getTime()
+  const aDayInMs = 24 * 60 * 60 * 1000
+
+  const canRequest = Math.floor(SecondDate / aDayInMs) > 30
+  return canRequest
+})
+
 const requestData = ref({
   title: "",
   isbn: "",
@@ -56,7 +84,11 @@ async function insertRequest() {
       </p>
     </header>
 
-    <form class="flex flex-col gap-2 main-section" @submit.prevent="insertRequest">
+    <form
+      v-if="canRequest"
+      class="flex flex-col gap-2 main-section"
+      @submit.prevent="insertRequest"
+    >
       <label for="judul"> Judul </label>
       <InputText id="judul" v-model="requestData.title" type="text" placeholder="judul" required />
 
@@ -78,6 +110,10 @@ async function insertRequest() {
 
       <Button type="submit"> Request </Button>
     </form>
+
+    <p v-else>
+      Mohon maaf anda belum bisa request buku karena requets kamu dibuat dalam 30 hari terakhir
+    </p>
   </section>
 
   <Toast />

From 280118e88c34c288fa3a4fdfdcbda9b9346d270a Mon Sep 17 00:00:00 2001
From: Efraim Munthe <efrayanglain@gmail.com>
Date: Sat, 18 Jan 2025 12:09:06 +0700
Subject: [PATCH 09/11] fix: navbar style and missing sidebar link

---
 components/TheNavbar.vue          | 2 +-
 components/admin/AdminSidebar.vue | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/components/TheNavbar.vue b/components/TheNavbar.vue
index 266470f..ce5a661 100644
--- a/components/TheNavbar.vue
+++ b/components/TheNavbar.vue
@@ -24,7 +24,7 @@ const isAdmin = computed(() =>
 
 <template>
   <nav
-    class="flex justify-between items-center sticky top-0 bg-primary dark:bg-surface-700/90 z-10 shadow-md backdrop-blur-md"
+    class="flex justify-between items-center sticky top-0 bg-primary dark:bg-surface-700/90 z-10 shadow-md backdrop-blur-md navbar"
   >
     <div class="logo">
       <img src="/logo.svg" alt="Logo Metschoo Library" class="h-14" />
diff --git a/components/admin/AdminSidebar.vue b/components/admin/AdminSidebar.vue
index 69a494f..1d04c01 100644
--- a/components/admin/AdminSidebar.vue
+++ b/components/admin/AdminSidebar.vue
@@ -62,6 +62,10 @@ const sidebarLinks = ref<SidebarLink[]>([
       },
     ],
   },
+  {
+    label: "Request",
+    route: "request",
+  },
 ])
 
 const popover = ref()

From b6d7e01bc4c45219bb2bba9895527d5c0246b2f9 Mon Sep 17 00:00:00 2001
From: Efraim Munthe <efrayanglain@gmail.com>
Date: Sun, 19 Jan 2025 13:23:01 +0700
Subject: [PATCH 10/11] fix: display date in admin request page

---
 pages/admin/request.vue | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/pages/admin/request.vue b/pages/admin/request.vue
index 6ebe3b4..7e99cb0 100644
--- a/pages/admin/request.vue
+++ b/pages/admin/request.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import type { Database } from "~/types/database.types"
-
 useHead({
   title: "request",
 })
@@ -21,11 +19,12 @@ const { data } = await useAsyncData(async () => {
   <h1>request</h1>
 
   <DataTable :value="data">
-    <Column header="Tanggal request">
+    <Column field="created_at" header="Tanggal request" sortable>
       <template #body="{ data }">
-        <!-- {{ formatDate(data.created_at) }} -->
+        {{ formatDate(new Date(data.created_at)) }}
       </template>
     </Column>
+
     <Column field="isbn" header="ISBN" />
     <Column field="title" header="Judul" />
   </DataTable>

From 26288bcbe46db84bdd015965d25bdd2b32aff964 Mon Sep 17 00:00:00 2001
From: Efraim Munthe <efrayanglain@gmail.com>
Date: Sun, 19 Jan 2025 13:26:37 +0700
Subject: [PATCH 11/11] fix(request): handle errors

---
 pages/admin/request.vue | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/pages/admin/request.vue b/pages/admin/request.vue
index 7e99cb0..bb49a31 100644
--- a/pages/admin/request.vue
+++ b/pages/admin/request.vue
@@ -1,18 +1,33 @@
 <script setup lang="ts">
+import Toast from "primevue/toast"
+
 useHead({
   title: "request",
 })
+
 definePageMeta({
   layout: "admin",
 })
 
-const { data } = await useAsyncData(async () => {
+const toast = useToast()
+
+const { data, error } = await useAsyncData(async () => {
   const supabase = useSupabaseClient()
   const query = supabase.from("book_requests").select()
 
   const { data, error } = await query
+  if (error) throw error
   return data
 })
+
+if (error) {
+  toast.add({
+    severity: "error",
+    summary: "gagal mengambil data request!",
+    detail: "gagal mengambil data request, silahkan coba lagi nanti.",
+    life: 10000,
+  })
+}
 </script>
 
 <template>
@@ -28,4 +43,6 @@ const { data } = await useAsyncData(async () => {
     <Column field="isbn" header="ISBN" />
     <Column field="title" header="Judul" />
   </DataTable>
+
+  <Toast />
 </template>