From 722fcc0c3f04db004b902d8791f7d316ecd45675 Mon Sep 17 00:00:00 2001
From: Efraim Munthe <efrayanglain@gmail.com>
Date: Fri, 30 Aug 2024 21:54:19 +0700
Subject: [PATCH 01/17] change dialog for toast

---
 components/signIn/SignInForm.vue | 31 ++++++++++++++++++++-----------
 1 file changed, 20 insertions(+), 11 deletions(-)

diff --git a/components/signIn/SignInForm.vue b/components/signIn/SignInForm.vue
index afebbf02..82d4be96 100644
--- a/components/signIn/SignInForm.vue
+++ b/components/signIn/SignInForm.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { useDialog } from "@/composables"
 import { AuthError } from "@supabase/supabase-js"
 
 const isSigningIn = ref(false)
@@ -24,19 +23,25 @@ const data = ref({
   confirmPassword: "",
 })
 
-const { dialog } = useDialog()
-
 const authStore = useAuthStore()
 const router = useRouter()
 
+const toast = useToast()
 async function handleSignIn() {
   try {
     const error = await authStore.handleSignIn(data.value.email, data.value.password)
     if (error) throw error
     router.push("/")
   } catch (err) {
-    if (err instanceof AuthError) dialog.value.open(err.message)
-    else console.error((err as Error).message)
+    console.error(err)
+
+    if (err instanceof AuthError) {
+      toast.add({
+        severity: "error",
+        summary: "Gagal masuk!",
+        detail: "Ada sebuah kesalahan saat masuk. Silahkan coba lagi",
+      })
+    }
   }
 }
 
@@ -52,7 +57,15 @@ async function handleSignUp() {
     await authStore.handleSignUp(email, password)
     alert("Cek email lu ya buat verifikasi email!")
   } catch (err) {
-    if (err instanceof AuthError) dialog.value.open(err.message)
+    console.error(err)
+
+    if (err instanceof AuthError) {
+      toast.add({
+        severity: "error",
+        summary: "Gagal mendaftar!",
+        detail: "Ada sebuah kesalahan saat mendaftar. Silahkan coba lagi",
+      })
+    }
   }
 }
 </script>
@@ -127,11 +140,7 @@ async function handleSignUp() {
 
     <CTA :label="buttonLabel" text @click="handleSwitchForm" />
   </div>
-
-  <TheDialog :is-open="dialog.isOpen" @dialog-close="dialog.close()">
-    <h2>Error!</h2>
-    {{ dialog.message }}
-  </TheDialog>
+    <Toast />
 </template>
 
 <style>

From 1e4b29a151f3a92bc1a019be9fa96389c8c351e2 Mon Sep 17 00:00:00 2001
From: Efraim Munthe <efrayanglain@gmail.com>
Date: Fri, 30 Aug 2024 22:09:16 +0700
Subject: [PATCH 02/17] redesign form page

---
 components/signIn/SignInForm.vue | 68 +++++++++++---------------------
 pages/login.vue                  | 11 +-----
 2 files changed, 24 insertions(+), 55 deletions(-)

diff --git a/components/signIn/SignInForm.vue b/components/signIn/SignInForm.vue
index 82d4be96..24d8a3f0 100644
--- a/components/signIn/SignInForm.vue
+++ b/components/signIn/SignInForm.vue
@@ -71,17 +71,26 @@ async function handleSignUp() {
 </script>
 
 <template>
-  <div class="signin">
-    <h1 v-if="isSigningIn">
-      <span>Masuk</span>
-      <p>Masuk ke akun Metschoo Library yang sudah anda miliki!</p>
-    </h1>
-    <h1 v-else>
-      <span>Daftar</span>
-      <p>Buat akun Metschoo Library yang baru!</p>
-    </h1>
-
-    <div v-if="isSigningIn" class="form-container log-in">
+  <section
+    class="flex flex-col gap-4 flex-auto max-w-xl p-8 rounded-lg bg-surface-300 dark:bg-surface-700"
+  >
+    <header>
+      <template v-if="isSigningIn">
+        <h1 v-if="isSigningIn" class="text-center">
+          <span>Masuk</span>
+        </h1>
+        <p class="text-center m-0">Masuk ke akun Metschoo Library yang sudah anda miliki!</p>
+      </template>
+
+      <template v-else>
+        <h1 class="text-center">
+          <span>Daftar</span>
+        </h1>
+        <p class="text-center m-0">Buat akun Metschoo Library yang baru!</p>
+      </template>
+    </header>
+
+    <div v-if="isSigningIn" class="flex-1">
       <form class="flex flex-col gap-2" @submit.prevent="handleSignIn">
         <label for="login-email">Email</label>
         <InputText
@@ -104,7 +113,7 @@ async function handleSignUp() {
       </form>
     </div>
 
-    <div v-else class="form-container sign-up">
+    <div v-else class="flex-1">
       <form class="flex flex-col gap-2" @submit.prevent="handleSignUp">
         <label for="nama">Nama</label>
         <InputText id="nama" type="text" name="nama" placeholder="Siapa namamu?" required />
@@ -139,39 +148,6 @@ async function handleSignUp() {
     </div>
 
     <CTA :label="buttonLabel" text @click="handleSwitchForm" />
-  </div>
     <Toast />
+  </section>
 </template>
-
-<style>
-.signin {
-  /* background-color: #a4c5c5; */
-  flex-basis: 60ch;
-  max-width: 60ch;
-  padding: 2rem;
-  outline: 2px solid #ddd;
-  border-radius: 0.5rem;
-
-  display: flex;
-  flex-direction: column;
-}
-
-.form-container {
-  flex-grow: 1;
-}
-
-.signin h1 {
-  text-align: center;
-}
-
-.signin p {
-  font-weight: 300;
-  font-size: large;
-}
-
-.signin .btn {
-  width: 100%;
-  text-align: center;
-  margin-block-start: 2rem;
-}
-</style>
diff --git a/pages/login.vue b/pages/login.vue
index 5e50af91..5023f137 100644
--- a/pages/login.vue
+++ b/pages/login.vue
@@ -12,14 +12,7 @@ definePageMeta({
 })
 </script>
 <template>
-  <main>
+  <div class="flex justify-center min-h-[70vh]">
     <SignInForm />
-  </main>
+  </div>
 </template>
-
-<style scoped>
-main {
-  display: flex;
-  justify-content: center;
-}
-</style>

From e6f5f38021047ef02b6730ac074648f50101b144 Mon Sep 17 00:00:00 2001
From: Efraim Munthe <efrayanglain@gmail.com>
Date: Fri, 30 Aug 2024 22:47:10 +0700
Subject: [PATCH 03/17] change layout bugs

---
 pages/buku/[isbn].vue  | 6 ++++--
 pages/profil/index.vue | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/pages/buku/[isbn].vue b/pages/buku/[isbn].vue
index d74e880b..ebca07e2 100644
--- a/pages/buku/[isbn].vue
+++ b/pages/buku/[isbn].vue
@@ -271,7 +271,9 @@ onMounted(() => (isClient.value = true))
     v-else-if="buku && isClient"
     class="main-section grid grid-cols-1 md:grid-cols-6 md:grid-rows-2 gap-4 justify-items-start"
   >
-    <figure class="col-span-1 md:col-span-2 md:row-span-2 place-self-center">
+    <figure
+      class="col-span-1 md:col-span-2 md:row-span-2 place-self-center relative dark:brightness-75 z-0"
+    >
       <img class="buku__gambar" :src="imgURL" alt="" width="400" height="600" />
       <img
         class="buku__gambar buku__gambar--bayangan"
@@ -423,7 +425,7 @@ onMounted(() => (isClient.value = true))
   bottom: -10px;
   left: 10px;
   opacity: 80%;
-  z-index: -2;
+  z-index: -1;
   filter: blur(10px);
 }
 
diff --git a/pages/profil/index.vue b/pages/profil/index.vue
index d64ebadc..0c3902db 100644
--- a/pages/profil/index.vue
+++ b/pages/profil/index.vue
@@ -67,7 +67,7 @@ onMounted(async () => {
 
 <template>
   <div class="grid gap-4 grid-cols-1 lg:grid-cols-12 lg:grid-flow-dense max-w-screen-2xl mx-auto">
-    <PageHeader heading="Profil" class="col-span-full lg:col-span-9">
+    <PageHeader heading="Profil" class="col-span-full">
       <p>Selamat Datang di Profil kamu</p>
     </PageHeader>
 

From 42fccb5d2b956ac7e04e3445181458539ccddd48 Mon Sep 17 00:00:00 2001
From: Efraim Munthe <efrayanglain@gmail.com>
Date: Sat, 31 Aug 2024 11:14:28 +0700
Subject: [PATCH 04/17] colors part 1

---
 app.vue                  | 2 +-
 assets/base.css          | 8 ++++----
 assets/main.css          | 5 ++++-
 components/TheFooter.vue | 2 +-
 4 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/app.vue b/app.vue
index a1c271ac..cd79df20 100644
--- a/app.vue
+++ b/app.vue
@@ -23,7 +23,7 @@ useHead({
     },
   ],
   bodyAttrs: {
-    class: "dark:bg-surface-900 dark:text-gray-300",
+    class: "bg-surface-200/80 dark:bg-surface-900 dark:text-gray-300",
   },
 })
 </script>
diff --git a/assets/base.css b/assets/base.css
index da645e8c..f76624d1 100644
--- a/assets/base.css
+++ b/assets/base.css
@@ -51,10 +51,10 @@
   --p-surface-400: #94a3b8;
   --p-surface-500: #64748b;
   --p-surface-600: #475569;
-  --p-surface-700: #23514e;
-  --p-surface-800: #121d31;
-  --p-surface-900: #0f172a;
-  --p-surface-950: #030e0d;
+  --p-surface-700: hsl(219 35% 17%);
+  --p-surface-800: hsl(219 46% 13%);
+  --p-surface-900: hsl(222 47% 11%);
+  --p-surface-950: hsl(175 65% 3%);
 
   --p-content-border-radius: 0.5rem;
 }
diff --git a/assets/main.css b/assets/main.css
index e54447ba..a740c37e 100644
--- a/assets/main.css
+++ b/assets/main.css
@@ -14,6 +14,9 @@ input {
 label {
   display: block;
   padding-block-start: 0.75rem;
+  line-height: 1;
+
+  @apply dark:text-gray-300;
 }
 
 button:disabled {
@@ -54,7 +57,7 @@ a {
 }
 
 .main-section {
-  @apply p-4 bg-slate-200 dark:bg-surface-800/70 rounded-lg;
+  @apply p-6 bg-slate-100 dark:bg-surface-800/70 rounded-lg;
 }
 
 table {
diff --git a/components/TheFooter.vue b/components/TheFooter.vue
index 69c0227b..3e56f0ac 100644
--- a/components/TheFooter.vue
+++ b/components/TheFooter.vue
@@ -1,5 +1,5 @@
 <template>
-  <footer class="dark:bg-surface-800">
+  <footer class="dark:bg-surface-700">
     <p>Klrfl, 2023.</p>
     <a class="block" href="https://github.com/pplg-smkmetland/metschoo-library">
       This website on Github

From a5fe1b8ac09b0686380b41ce600f96e4b0f2a8df Mon Sep 17 00:00:00 2001
From: Efraim Munthe <efrayanglain@gmail.com>
Date: Sat, 31 Aug 2024 17:32:05 +0700
Subject: [PATCH 05/17] change admin layout; use main section in admin pages

---
 layouts/admin.vue           |   7 +-
 pages/admin/buku/tambah.vue |   2 +-
 pages/admin/peminjaman.vue  | 183 ++++++++++++++++++------------------
 3 files changed, 96 insertions(+), 96 deletions(-)

diff --git a/layouts/admin.vue b/layouts/admin.vue
index eb76b55a..d02dfd1e 100644
--- a/layouts/admin.vue
+++ b/layouts/admin.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="wrapper">
+  <div class="grid flex-1 wrapper">
     <TheNavbar />
     <AdminSidebar />
-    <main class="dark:bg-surface-900 dark:text-white flex flex-col align-stretch gap-4">
+    <main class="flex flex-col align-stretch gap-4 mx-auto">
       <slot />
     </main>
   </div>
@@ -10,16 +10,15 @@
 
 <style scoped>
 .wrapper {
-  display: grid;
   grid-template-areas:
     "navbar navbar"
     "sidebar content";
   grid-template-columns: 25ch minmax(0, 1fr);
   grid-template-rows: min-content auto;
-  flex: 1;
 }
 
 main {
   grid-area: content;
+  width: min(150ch, 100%);
 }
 </style>
diff --git a/pages/admin/buku/tambah.vue b/pages/admin/buku/tambah.vue
index 7867c1d6..beb5e16b 100644
--- a/pages/admin/buku/tambah.vue
+++ b/pages/admin/buku/tambah.vue
@@ -96,7 +96,7 @@ const router = useRouter()
     <p>Ada kesalahan saat mengambil data buku. Silahkan coba lagi</p>
   </section>
 
-  <section v-else class="grid gap-8 buku-container">
+  <section v-else class="grid gap-8 buku-container main-section">
     <figure
       class="outline outline-2 outline-gray-300 dark:outline-gray-700 rounded-lg overflow-hidden"
     >
diff --git a/pages/admin/peminjaman.vue b/pages/admin/peminjaman.vue
index 4c327ce0..acb7a283 100644
--- a/pages/admin/peminjaman.vue
+++ b/pages/admin/peminjaman.vue
@@ -54,105 +54,106 @@ const lateClass = (data: Peminjaman) => {
 <template>
   <PageHeader heading="Data peminjaman" />
 
-  <DataTable :value="borrowPending" scrollable :loading="isLoading" striped-rows>
-    <template #header>
-      <h2>Belum dikonfirmasi</h2>
-    </template>
-
-    <template #empty>
-      <p>Belum ada yang meminjam</p>
-    </template>
-
-    <template #loading>
-      <LoadingSpinner />
-    </template>
-
-    <Column field="pengguna.nama" header="Peminjam" />
-    <Column field="buku.judul" header="Judul buku" />
-    <Column field="no_isbn" header="ISBN" />
-    <Column field="tgl_pinjam" header="Tanggal pinjam">
-      <template #body="slotProps">
-        {{ formatDate(new Date(slotProps.data.tgl_pinjam)) }}
-      </template>
-    </Column>
-    <Column field="tenggat_waktu" header="Tenggat waktu">
-      <template #body="slotProps">
-        {{ formatDate(new Date(slotProps.data.tenggat_waktu)) }}
-      </template>
-    </Column>
-  </DataTable>
-
-  <DataTable :value="returnPending" scrollable>
-    <template #header>
-      <h2>Mau dikembalikan</h2>
-      <p>Buku yang mau dikembalikan</p>
-    </template>
-    <template #empty>
-      <p>Tidak ada data</p>
-    </template>
-
-    <Column field="pengguna.nama" header="Peminjam" />
-    <Column field="buku.judul" header="Judul buku" />
-    <Column field="tgl_pinjam" header="Tanggal pinjam" />
-  </DataTable>
-
-  <DataTable
-    :value="peminjamanDataWeek"
-    sort-field="tenggat_waktu"
-    :sort-order="-1"
-    scrollable
-    :row-class="lateClass"
-  >
-    <template #header>
-      <h2>Data peminjaman Seminggu terakhir</h2>
-    </template>
-
-    <template #empty>
-      <p>Tidak peminjaman selama seminggu terakhir.</p>
-    </template>
-
-    <Column field="pengguna.nama" header="Peminjam">
-      <template #body="slotProps">
-        <p>
-          <span>
-            {{ slotProps.data.pengguna.nama }}
-          </span>
-          -
-          <span>
-            {{ slotProps.data.pengguna.kelas }}
-            {{ slotProps.data.pengguna.jurusan }}
-          </span>
-        </p>
-      </template>
-    </Column>
+  <section class="main-section">
+    <h2>Belum dikonfirmasi</h2>
 
-    <Column field="buku.judul" header="Judul">
-      <template #body="slotProps">
-        <NuxtLink :to="`/admin/buku/${slotProps.data.no_isbn}`">
-          {{ slotProps.data.buku.judul }}
-        </NuxtLink>
+    <DataTable :value="borrowPending" scrollable :loading="isLoading" striped-rows>
+      <template #empty>
+        <p>Belum ada yang meminjam</p>
       </template>
-    </Column>
-    <Column field="no_isbn" header="ISBN" />
 
-    <Column field="tgl_pinjam" header="Tanggal Pinjam" sortable>
-      <template #body="slotProps">
-        {{ formatDate(new Date(slotProps.data.tgl_pinjam)) }}
+      <template #loading>
+        <LoadingSpinner />
       </template>
-    </Column>
 
-    <Column field="tenggat_waktu" header="Tenggat Waktu" :sortable="true">
-      <template #body="slotProps">
-        {{ formatDate(new Date(slotProps.data.tenggat_waktu)) }}
+      <Column field="pengguna.nama" header="Peminjam" />
+      <Column field="buku.judul" header="Judul buku" />
+      <Column field="no_isbn" header="ISBN" />
+      <Column field="tgl_pinjam" header="Tanggal pinjam">
+        <template #body="slotProps">
+          {{ formatDate(new Date(slotProps.data.tgl_pinjam)) }}
+        </template>
+      </Column>
+      <Column field="tenggat_waktu" header="Tenggat waktu">
+        <template #body="slotProps">
+          {{ formatDate(new Date(slotProps.data.tenggat_waktu)) }}
+        </template>
+      </Column>
+    </DataTable>
+  </section>
+
+  <section class="main-section">
+    <h2>Mau dikembalikan</h2>
+    <p>Buku yang mau dikembalikan</p>
+
+    <DataTable :value="returnPending" scrollable>
+      <template #empty>
+        <p>Tidak ada data</p>
       </template>
-    </Column>
 
-    <Column field="tgl_kembali" header="Tanggal Kembali" sortable>
-      <template #body="slotProps">
-        {{ slotProps.data.tgl_kembali ? formatDate(new Date(slotProps.data.tgl_kembali)) : "-" }}
+      <Column field="pengguna.nama" header="Peminjam" />
+      <Column field="buku.judul" header="Judul buku" />
+      <Column field="tgl_pinjam" header="Tanggal pinjam" />
+    </DataTable>
+  </section>
+
+  <section class="main-section">
+    <h2>Data peminjaman Seminggu terakhir</h2>
+
+    <DataTable
+      :value="peminjamanDataWeek"
+      sort-field="tenggat_waktu"
+      :sort-order="-1"
+      scrollable
+      :row-class="lateClass"
+    >
+      <template #empty>
+        <p>Tidak peminjaman selama seminggu terakhir.</p>
       </template>
-    </Column>
-  </DataTable>
+
+      <Column field="pengguna.nama" header="Peminjam">
+        <template #body="slotProps">
+          <p>
+            <span>
+              {{ slotProps.data.pengguna.nama }}
+            </span>
+            -
+            <span>
+              {{ slotProps.data.pengguna.kelas }}
+              {{ slotProps.data.pengguna.jurusan }}
+            </span>
+          </p>
+        </template>
+      </Column>
+
+      <Column field="buku.judul" header="Judul">
+        <template #body="slotProps">
+          <NuxtLink :to="`/admin/buku/${slotProps.data.no_isbn}`">
+            {{ slotProps.data.buku.judul }}
+          </NuxtLink>
+        </template>
+      </Column>
+      <Column field="no_isbn" header="ISBN" />
+
+      <Column field="tgl_pinjam" header="Tanggal Pinjam" sortable>
+        <template #body="slotProps">
+          {{ formatDate(new Date(slotProps.data.tgl_pinjam)) }}
+        </template>
+      </Column>
+
+      <Column field="tenggat_waktu" header="Tenggat Waktu" :sortable="true">
+        <template #body="slotProps">
+          {{ formatDate(new Date(slotProps.data.tenggat_waktu)) }}
+        </template>
+      </Column>
+
+      <Column field="tgl_kembali" header="Tanggal Kembali" sortable>
+        <template #body="slotProps">
+          {{ slotProps.data.tgl_kembali ? formatDate(new Date(slotProps.data.tgl_kembali)) : "-" }}
+        </template>
+      </Column>
+    </DataTable>
+  </section>
 </template>
 
 <style>

From 25fc8411c97501ee41c5f8cf41316158abaf5c06 Mon Sep 17 00:00:00 2001
From: Efraim Munthe <efrayanglain@gmail.com>
Date: Sat, 31 Aug 2024 17:41:59 +0700
Subject: [PATCH 06/17] change surface colors to hsl from hex

---
 assets/base.css | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/assets/base.css b/assets/base.css
index f76624d1..858b0121 100644
--- a/assets/base.css
+++ b/assets/base.css
@@ -43,14 +43,14 @@
   --p-primary-700: #23514e;
   --p-primary-900: #1c4240;
 
-  --p-surface-0: #ffffff;
-  --p-surface-50: #f8fafc;
-  --p-surface-100: #f1f5f9;
-  --p-surface-200: #e2e8f0;
-  --p-surface-300: #cbd5e1;
-  --p-surface-400: #94a3b8;
-  --p-surface-500: #64748b;
-  --p-surface-600: #475569;
+  --p-surface-0: hsl(0 0% 100%);
+  --p-surface-50: hsl(210 40% 98%);
+  --p-surface-100: hsl(210 32% 91%);
+  --p-surface-200: hsl(210 35% 80%);
+  --p-surface-300: hsl(213 27% 84%);
+  --p-surface-400: hsl(215 20% 65%);
+  --p-surface-500: hsl(215 16% 47%);
+  --p-surface-600: hsl(215 19% 35%);
   --p-surface-700: hsl(219 35% 17%);
   --p-surface-800: hsl(219 46% 13%);
   --p-surface-900: hsl(222 47% 11%);

From 34ba4c533cae5e18527e6ae3f1fa65d0d5c1ff6e Mon Sep 17 00:00:00 2001
From: Efraim Munthe <efrayanglain@gmail.com>
Date: Sun, 1 Sep 2024 10:01:59 +0700
Subject: [PATCH 07/17] add icons to navbar and change background on dark mode

---
 components/TheNavbar.vue | 128 ++++++++++++---------------------------
 1 file changed, 40 insertions(+), 88 deletions(-)

diff --git a/components/TheNavbar.vue b/components/TheNavbar.vue
index 72cad1a8..c29b6c47 100644
--- a/components/TheNavbar.vue
+++ b/components/TheNavbar.vue
@@ -1,14 +1,19 @@
 <script setup lang="ts">
+import MdiHamburgerMenu from "~icons/mdi/hamburger-menu"
+import MdiClose from "~icons/mdi/close"
+
 const openNavBtn = ref(null)
 const closeNavBtn = ref(null)
 const navlinks = ref<HTMLUListElement | null>(null)
 
 function openNav() {
-  navlinks.value?.classList.add("active")
+  navlinks.value?.classList.remove("-translate-y-full")
+  navlinks.value?.classList.add("-translate-y-0")
 }
 
 function closeNav() {
-  navlinks.value?.classList.remove("active")
+  navlinks.value?.classList.add("-translate-y-full")
+  navlinks.value?.classList.remove("-translate-y-0")
 }
 
 const user = useSupabaseUser()
@@ -18,20 +23,25 @@ const isAdmin = computed(() =>
 </script>
 
 <template>
-  <nav class="bg-primary text-primary-contrast z-10 navbar shadow-md">
+  <nav
+    class="flex justify-between items-center sticky top-0 bg-primary dark:bg-surface-700/90 text-primary-contrast z-10 shadow-md navbar"
+  >
     <div class="logo">
-      <img src="/logo.svg" alt="Logo Metschoo Library" />
+      <img src="/logo.svg" alt="Logo Metschoo Library" class="h-14" />
     </div>
 
-    <ul ref="navlinks" class="nav-links">
-      <li class="nav-links__header">
+    <ul
+      ref="navlinks"
+      class="flex flex-col absolute top-0 left-0 -translate-y-full w-full md:flex-row md:relative md:translate-y-0 md:w-auto bg-inherit dark:bg-surface-700 transition-transform z-10"
+    >
+      <li class="flex justify-between md:hidden md:appearance-none">
         <div class="logo">
           <NuxtLink to="/">
-            <img src="/logo.svg" alt="Logo Metschoo Library" />
+            <img src="/logo.svg" alt="Logo Metschoo Library" height="50" class="w-16" />
           </NuxtLink>
         </div>
-        <button ref="closeNavBtn" class="nav-btn close" @click="closeNav">
-          <i class="fa-solid fa-xmark" />
+        <button ref="closeNavBtn" class="nav-btn" @click="closeNav">
+          <MdiClose />
         </button>
       </li>
       <li>
@@ -43,21 +53,22 @@ const isAdmin = computed(() =>
       <li>
         <NuxtLink class="nav-link" to="/wishlist"> Wishlist </NuxtLink>
       </li>
+
       <template v-if="user">
         <li v-if="!isAdmin">
-          <NuxtLink to="/profil" class="nav-link nav-link--cta"> Profil </NuxtLink>
+          <NuxtLink to="/profil" class="nav-link bg-primary-700"> Profil </NuxtLink>
         </li>
         <li v-else>
-          <NuxtLink to="/admin" class="nav-link nav-link--cta"> Admin </NuxtLink>
+          <NuxtLink to="/admin" class="nav-link bg-primary-700"> Admin </NuxtLink>
         </li>
       </template>
       <li v-else>
-        <NuxtLink to="/login" class="nav-link nav-link--cta"> Masuk </NuxtLink>
+        <NuxtLink to="/login" class="nav-link bg-primary-700"> Masuk </NuxtLink>
       </li>
     </ul>
 
-    <button ref="openNavBtn" class="nav-btn open" @click="openNav">
-      <i class="fa-solid fa-bars" />
+    <button ref="openNavBtn" class="nav-btn" @click="openNav">
+      <MdiHamburgerMenu />
     </button>
   </nav>
 </template>
@@ -65,94 +76,35 @@ const isAdmin = computed(() =>
 <style scoped>
 .navbar {
   grid-area: navbar;
-
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  position: sticky;
-  top: 0;
-}
-
-.logo img {
-  height: 3.5rem;
-}
-
-.nav-links {
-  background: inherit;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  width: 100%;
-
-  display: flex;
-  flex-direction: column;
-  position: absolute;
-  top: 0;
-  left: 0;
-  translate: 0 -100%;
-  transition: translate 200ms ease;
-}
-
-.nav-links.active {
-  translate: 0 0;
-  z-index: 10;
-}
-
-.nav-links__header {
-  padding-inline: 0.5rem;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
 }
 
 .nav-link,
 .nav-btn {
-  color: inherit;
-  text-decoration: none;
-  padding: 1rem;
-  display: block;
-  position: relative;
+  @apply text-gray-300/90 hover:text-gray-100 dark:hover:bg-surface-800 transition-colors p-4 block relative;
 }
 
-.nav-link--cta {
-  background: var(--primary-200);
+.nav-btn {
+  @apply md:hidden;
 }
 
-.nav-link.active::before {
+.nav-link::before {
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
-  height: 100%;
-  width: 0.4rem;
-  background: var(--nav-link-active);
-}
-
-@media (hover: hover) {
-  .nav-links a:hover {
-    background: var(--primary-200);
+  width: 100%;
+  height: 0.2rem;
+  transition: opacity 200ms ease;
+  opacity: 0;
+  background: var(--p-primary-700);
+
+  @media screen and (max-width: 50em) {
+    width: 0.2rem;
+    height: 100%;
   }
 }
 
-@media screen and (min-width: 50em) {
-  .nav-link.active::before {
-    height: 0.4rem;
-    width: 100%;
-  }
-
-  .nav-links {
-    flex-direction: row;
-    position: relative;
-    translate: 0;
-    width: auto;
-  }
-
-  .nav-links__header {
-    display: none;
-  }
-
-  .nav-btn {
-    display: none;
-  }
+.nav-link.router-link-active::before {
+  opacity: 1;
 }
 </style>

From 76b45f877d150333fabb7b81311af1d1c061f091 Mon Sep 17 00:00:00 2001
From: Efraim Munthe <efrayanglain@gmail.com>
Date: Mon, 2 Sep 2024 20:48:20 +0700
Subject: [PATCH 08/17] display pengguna in table

---
 pages/admin/pengguna.vue | 63 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 63 insertions(+)

diff --git a/pages/admin/pengguna.vue b/pages/admin/pengguna.vue
index ddc7741a..8acb0137 100644
--- a/pages/admin/pengguna.vue
+++ b/pages/admin/pengguna.vue
@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import type { Pengguna } from "~/types"
+import type { Database } from "~/types/database.types"
+
 useHead({
   title: "Pengguna",
 })
@@ -6,10 +9,70 @@ useHead({
 definePageMeta({
   layout: "admin",
 })
+
+const supabase = useSupabaseClient<Database>()
+
+const toast = useToast()
+const penggunas = ref<Pengguna[] | null>([])
+const isLoading = ref(false)
+
+onMounted(async () => {
+  isLoading.value = true
+
+  const { data, error } = await supabase.from("pengguna").select("*, pengguna_roles(name)")
+  if (error) {
+    toast.add({
+      severity: "error",
+      summary: "Gagal mengambil data",
+      detail: "Gagal mengambil data pengguna, silahkan coba lagi.",
+    })
+  }
+
+  penggunas.value = data
+
+  isLoading.value = false
+})
 </script>
 
 <template>
   <PageHeader heading="Manajemen pengguna">
     <p>Temukan pengguna dan kelola data mereka</p>
   </PageHeader>
+
+  <LoadingSpinner v-if="isLoading" />
+
+  <section v-if="!penggunas">
+    <p>Tidak ada pengguna di sini.</p>
+  </section>
+
+  <section v-else class="main-section">
+    <DataTable :value="penggunas" striped-rows>
+      <template #header>
+        <p>Menampilkan {{ penggunas.length }} pengguna.</p>
+      </template>
+
+      <Column header="No">
+        <template #body="slotProps">
+          {{ penggunas.indexOf(slotProps.data) + 1 }}
+        </template>
+      </Column>
+
+      <Column header="Nama" field="nama" sortable />
+      <Column header="Kelas" field="kelas" sortable />
+      <Column header="Jurusan" field="jurusan" />
+      <Column header="Role">
+        <template #body="slotProps">
+          {{ slotProps.data.pengguna_roles.name }}
+        </template>
+      </Column>
+
+      <Column header="Aksi">
+        <template #body="slotProps">
+          <NuxtLink :to="`/admin/pengguna/${slotProps.data.user_id}`">
+            <CTA label="edit" link />
+          </NuxtLink>
+        </template>
+      </Column>
+    </DataTable>
+  </section>
 </template>

From e43794078ff7c40c5df3b1371fcde3f677cdd25b Mon Sep 17 00:00:00 2001
From: Efraim Munthe <efrayanglain@gmail.com>
Date: Mon, 2 Sep 2024 21:29:46 +0700
Subject: [PATCH 09/17] rename to index to prepare for another pengguna page

---
 pages/admin/{pengguna.vue => pengguna/index.vue} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename pages/admin/{pengguna.vue => pengguna/index.vue} (100%)

diff --git a/pages/admin/pengguna.vue b/pages/admin/pengguna/index.vue
similarity index 100%
rename from pages/admin/pengguna.vue
rename to pages/admin/pengguna/index.vue

From 01e5e71ccbd9ba560573f7037569167fc6271886 Mon Sep 17 00:00:00 2001
From: Efraim Munthe <efrayanglain@gmail.com>
Date: Mon, 2 Sep 2024 21:29:54 +0700
Subject: [PATCH 10/17] add page for each user

---
 pages/admin/pengguna/[id].vue | 105 ++++++++++++++++++++++++++++++++++
 1 file changed, 105 insertions(+)
 create mode 100644 pages/admin/pengguna/[id].vue

diff --git a/pages/admin/pengguna/[id].vue b/pages/admin/pengguna/[id].vue
new file mode 100644
index 00000000..1931a926
--- /dev/null
+++ b/pages/admin/pengguna/[id].vue
@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { formatDate } from "#imports"
+import type { Peminjaman, Pengguna } from "~/types"
+import type { Database } from "~/types/database.types"
+
+definePageMeta({
+  layout: "default",
+})
+
+const route = useRoute()
+
+const supabase = useSupabaseClient<Database>()
+
+const isLoading = ref(false)
+const pengguna = ref<Pengguna | null>(null)
+const peminjaman = ref()
+
+onMounted(async () => {
+  isLoading.value = true
+
+  const { data, error } = await supabase
+    .from("pengguna")
+    .select("*")
+    .eq("user_id", route.params.id)
+    .single()
+  if (error) {
+    console.error(error)
+  }
+
+  pengguna.value = data
+
+  const { data: peminjamanData } = await supabase.from("peminjaman").select("*, buku(judul)")
+  peminjaman.value = peminjamanData
+
+  isLoading.value = false
+})
+</script>
+
+<template>
+  <LoadingSpinner v-if="isLoading" />
+
+  <div v-if="!isLoading && !pengguna" class="max-w-100ch mx-auto">
+    <h1>pengguna tidak ditemukan!</h1>
+  </div>
+
+  <div v-else class="max-w-[100ch] mx-auto">
+    <PageHeader v-if="!pengguna" heading="gagal memuat pengguna!">
+      <p>Silahkan coba lagi.</p>
+    </PageHeader>
+
+    <PageHeader v-else :heading="pengguna.nama">
+      <p>{{ pengguna.kelas ? pengguna.kelas : "tidak ada kelas" }}</p>
+      <p>{{ pengguna.jurusan ? pengguna.jurusan : "tidak ada jurusan" }}</p>
+    </PageHeader>
+
+    <Divider />
+
+    <div class="main-section">
+      <h2>Data peminjaman untuk {{ pengguna.nama }}</h2>
+
+      <DataTable :value="peminjaman">
+        <Column header="Buku">
+          <template #body="slotProps">
+            {{ slotProps.data.buku.judul }}
+          </template>
+        </Column>
+
+        <Column header="tanggal pinjam">
+          <template #body="slotProps">
+            {{ formatDate(new Date(slotProps.data.tgl_pinjam)) }}
+          </template>
+        </Column>
+
+        <Column header="tenggat waktu">
+          <template #body="slotProps">
+            {{ formatDate(new Date(slotProps.data.tenggat_waktu)) }}
+          </template>
+        </Column>
+
+        <Column header="tanggal kembali">
+          <template #body="{ data }">
+            <span
+              v-if="new Date(data.tenggat_waktu).getTime() < new Date(data.tgl_pinjam).getTime()"
+            >
+              terlambat
+            </span>
+            <span v-else>
+              {{ data.tgl_kembali ? formatDate(new Date(data.tgl_kembali)) : "belum dikembalikan" }}
+            </span>
+          </template>
+        </Column>
+      </DataTable>
+    </div>
+
+    <section class="main-section">
+      <h2>Aksi</h2>
+
+      <div class="flex flex-col items-start gap-4">
+        <CTA label="edit" />
+        <CTA label="kirimkan email reset password" />
+        <CTA label="hapus" severity="danger" />
+      </div>
+    </section>
+  </div>
+</template>

From fe1c13f031e3e91115ca80db987257068510b46c Mon Sep 17 00:00:00 2001
From: Efraim Munthe <efrayanglain@gmail.com>
Date: Mon, 2 Sep 2024 21:32:57 +0700
Subject: [PATCH 11/17] change query to also take user id into account

---
 pages/admin/pengguna/[id].vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/pages/admin/pengguna/[id].vue b/pages/admin/pengguna/[id].vue
index 1931a926..8a08f884 100644
--- a/pages/admin/pengguna/[id].vue
+++ b/pages/admin/pengguna/[id].vue
@@ -17,19 +17,19 @@ const peminjaman = ref()
 
 onMounted(async () => {
   isLoading.value = true
+  const userId = route.params.id
 
-  const { data, error } = await supabase
-    .from("pengguna")
-    .select("*")
-    .eq("user_id", route.params.id)
-    .single()
+  const { data, error } = await supabase.from("pengguna").select("*").eq("user_id", userId).single()
   if (error) {
     console.error(error)
   }
 
   pengguna.value = data
 
-  const { data: peminjamanData } = await supabase.from("peminjaman").select("*, buku(judul)")
+  const { data: peminjamanData } = await supabase
+    .from("peminjaman")
+    .select("*, buku(judul)")
+    .eq("user_id", userId)
   peminjaman.value = peminjamanData
 
   isLoading.value = false

From 56ef2332284db8fd10f567dffb15552493d46268 Mon Sep 17 00:00:00 2001
From: Efraim Munthe <efrayanglain@gmail.com>
Date: Sat, 7 Sep 2024 17:29:41 +0700
Subject: [PATCH 12/17] add back link in user page

---
 pages/admin/pengguna/[id].vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/pages/admin/pengguna/[id].vue b/pages/admin/pengguna/[id].vue
index 8a08f884..83fdb6f6 100644
--- a/pages/admin/pengguna/[id].vue
+++ b/pages/admin/pengguna/[id].vue
@@ -49,8 +49,10 @@ onMounted(async () => {
     </PageHeader>
 
     <PageHeader v-else :heading="pengguna.nama">
-      <p>{{ pengguna.kelas ? pengguna.kelas : "tidak ada kelas" }}</p>
-      <p>{{ pengguna.jurusan ? pengguna.jurusan : "tidak ada jurusan" }}</p>
+      <routerLink to="/admin/pengguna">kembali</routerLink>
+
+      <p>kelas: {{ pengguna.kelas ? pengguna.kelas : "tidak ada kelas" }}</p>
+      <p>jurusan: {{ pengguna.jurusan ? pengguna.jurusan : "tidak ada jurusan" }}</p>
     </PageHeader>
 
     <Divider />

From 7cbd555a580b31ef63dec1e3d89d8f8968cc79f7 Mon Sep 17 00:00:00 2001
From: Efraim Munthe <efrayanglain@gmail.com>
Date: Sat, 7 Sep 2024 18:00:07 +0700
Subject: [PATCH 13/17] revert admin role change in migratino file

---
 supabase/migrations/20240619054023_remote_schema.sql | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/supabase/migrations/20240619054023_remote_schema.sql b/supabase/migrations/20240619054023_remote_schema.sql
index ec89f6b4..52a1debe 100644
--- a/supabase/migrations/20240619054023_remote_schema.sql
+++ b/supabase/migrations/20240619054023_remote_schema.sql
@@ -301,6 +301,9 @@ ALTER TABLE ONLY "public"."buku"
 ALTER TABLE ONLY "public"."wishlist"
     ADD CONSTRAINT "wishlist_no_isbn_fkey" FOREIGN KEY ("no_isbn") REFERENCES "public"."buku"("no_isbn") ON UPDATE CASCADE ON DELETE SET NULL;
 
+create role admin;
+grant authenticated to admin;
+
 CREATE POLICY "Enable all actions for admin" ON "public"."kategori_buku" TO "admin" USING (true);
 
 CREATE POLICY "Enable all for admin" ON "public"."buku" TO "admin" USING (true) WITH CHECK (true);

From da7ee6a9c182fad923f529ac5362897719997dbf Mon Sep 17 00:00:00 2001
From: Efraim Munthe <efrayanglain@gmail.com>
Date: Sat, 7 Sep 2024 19:38:42 +0700
Subject: [PATCH 14/17] add migration for pengguna_roles policies

---
 .../20240907110210_remote_schema.sql          | 30 +++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 supabase/migrations/20240907110210_remote_schema.sql

diff --git a/supabase/migrations/20240907110210_remote_schema.sql b/supabase/migrations/20240907110210_remote_schema.sql
new file mode 100644
index 00000000..e581ba86
--- /dev/null
+++ b/supabase/migrations/20240907110210_remote_schema.sql
@@ -0,0 +1,30 @@
+alter table "public"."pengguna" drop constraint "profiles_username_key";
+
+drop index if exists "public"."profiles_username_key";
+
+create policy "authenticated users can see if they can borrow"
+on "public"."peminjaman_state"
+as permissive
+for select
+to authenticated
+using (true);
+
+
+create policy "Allow all for admin"
+on "public"."pengguna_roles"
+as permissive
+for all
+to authenticated
+using (true)
+with check ((( SELECT ((auth.jwt() -> 'app_metadata'::text) -> 'role'::text)) ? 'super-admin'::text));
+
+
+create policy "Allow users to read roles"
+on "public"."pengguna_roles"
+as permissive
+for select
+to authenticated
+using (true);
+
+
+

From 36f68b43d94bd4cdc0d1bda3cef32877109d35d4 Mon Sep 17 00:00:00 2001
From: Efraim Munthe <efrayanglain@gmail.com>
Date: Sat, 7 Sep 2024 19:40:07 +0700
Subject: [PATCH 15/17] change user peminjaman data display

- order by tgl_pinjam
- add keterangan
---
 pages/admin/pengguna/[id].vue | 26 +++++++++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/pages/admin/pengguna/[id].vue b/pages/admin/pengguna/[id].vue
index 83fdb6f6..7fc6d9da 100644
--- a/pages/admin/pengguna/[id].vue
+++ b/pages/admin/pengguna/[id].vue
@@ -29,11 +29,29 @@ onMounted(async () => {
   const { data: peminjamanData } = await supabase
     .from("peminjaman")
     .select("*, buku(judul)")
+    .order("tgl_pinjam", { ascending: true })
     .eq("user_id", userId)
   peminjaman.value = peminjamanData
 
   isLoading.value = false
 })
+
+const keteranganText = (state_id: Peminjaman["state_id"]) => {
+  switch (state_id) {
+    case 1:
+      return "menunggu konfirmasi"
+    case 2:
+      return "sedang dipinjam"
+    case 3:
+      return "dibatalkan"
+    case 4:
+      return "menunggu konfirmasi pengembalian"
+    case 5:
+      return "dikembalikan"
+    case 6:
+      return "terlambat"
+  }
+}
 </script>
 
 <template>
@@ -87,10 +105,16 @@ onMounted(async () => {
               terlambat
             </span>
             <span v-else>
-              {{ data.tgl_kembali ? formatDate(new Date(data.tgl_kembali)) : "belum dikembalikan" }}
+              {{ data.tgl_kembali ? formatDate(new Date(data.tgl_kembali)) : "-" }}
             </span>
           </template>
         </Column>
+
+        <Column header="keterangan">
+          <template #body="slotProps">
+            {{ keteranganText(slotProps.data.state_id) }}
+          </template>
+        </Column>
       </DataTable>
     </div>
 

From ae4308ee833e8eec85d018c4fa1879f5f7cc5a25 Mon Sep 17 00:00:00 2001
From: Efraim Munthe <efrayanglain@gmail.com>
Date: Sat, 7 Sep 2024 21:09:00 +0700
Subject: [PATCH 16/17] change peminjaman table display

---
 lib/peminjaman.ts          |   2 +-
 pages/admin/index.vue      |   2 +-
 pages/admin/peminjaman.vue | 101 +++++--------------------------------
 3 files changed, 14 insertions(+), 91 deletions(-)

diff --git a/lib/peminjaman.ts b/lib/peminjaman.ts
index bc495cf3..b2e9f12a 100644
--- a/lib/peminjaman.ts
+++ b/lib/peminjaman.ts
@@ -7,7 +7,7 @@ export async function getPeminjamanData(): Promise<PeminjamanData> {
   try {
     const { data, error } = await supabase
       .from("peminjaman")
-      .select("*, pengguna(nama, kelas, jurusan), buku(*)")
+      .select("*, peminjaman_state(name), pengguna(nama, kelas, jurusan), buku(*)")
 
     if (error) throw error
     return data as PeminjamanData
diff --git a/pages/admin/index.vue b/pages/admin/index.vue
index ad34b09d..b4ae7498 100644
--- a/pages/admin/index.vue
+++ b/pages/admin/index.vue
@@ -28,7 +28,7 @@ const isLoading = ref(false)
 
 const peminjamanQuery = supabase
   .from("peminjaman")
-  .select("*, pengguna(nama, kelas, jurusan), buku(*)")
+  .select("*, peminjaman_state(name), pengguna(nama, kelas, jurusan), buku(*)")
 export type AdminPeminjamanData = QueryData<typeof peminjamanQuery>
 const peminjamanData = ref<AdminPeminjamanData>([])
 
diff --git a/pages/admin/peminjaman.vue b/pages/admin/peminjaman.vue
index acb7a283..a5a402ea 100644
--- a/pages/admin/peminjaman.vue
+++ b/pages/admin/peminjaman.vue
@@ -15,23 +15,6 @@ definePageMeta({
 })
 
 const peminjamanData = ref<Peminjaman[]>([])
-const peminjamanDataWeek = computed(() => {
-  const now = new Date()
-  const nowAWeekLater = new Date().setDate(now.getDate() + 7)
-  const weekRange = nowAWeekLater - now.getTime()
-
-  return peminjamanData.value.filter(
-    (data) => now.getTime() - new Date(data.tgl_pinjam).getTime() < weekRange
-  )
-})
-
-const borrowPending = computed(() => {
-  return peminjamanData.value.filter(({ state_id }) => state_id === 1)
-})
-
-const returnPending = computed(() => {
-  return peminjamanData.value.filter(({ state_id }) => state_id === 4)
-})
 
 const isLoading = ref(false)
 
@@ -57,7 +40,14 @@ const lateClass = (data: Peminjaman) => {
   <section class="main-section">
     <h2>Belum dikonfirmasi</h2>
 
-    <DataTable :value="borrowPending" scrollable :loading="isLoading" striped-rows>
+    <DataTable
+      :value="peminjamanData"
+      scrollable
+      :loading="isLoading"
+      striped-rows
+      paginator
+      rows="20"
+    >
       <template #empty>
         <p>Belum ada yang meminjam</p>
       </template>
@@ -69,87 +59,20 @@ const lateClass = (data: Peminjaman) => {
       <Column field="pengguna.nama" header="Peminjam" />
       <Column field="buku.judul" header="Judul buku" />
       <Column field="no_isbn" header="ISBN" />
-      <Column field="tgl_pinjam" header="Tanggal pinjam">
-        <template #body="slotProps">
-          {{ formatDate(new Date(slotProps.data.tgl_pinjam)) }}
-        </template>
-      </Column>
-      <Column field="tenggat_waktu" header="Tenggat waktu">
-        <template #body="slotProps">
-          {{ formatDate(new Date(slotProps.data.tenggat_waktu)) }}
-        </template>
-      </Column>
-    </DataTable>
-  </section>
-
-  <section class="main-section">
-    <h2>Mau dikembalikan</h2>
-    <p>Buku yang mau dikembalikan</p>
-
-    <DataTable :value="returnPending" scrollable>
-      <template #empty>
-        <p>Tidak ada data</p>
-      </template>
-
-      <Column field="pengguna.nama" header="Peminjam" />
-      <Column field="buku.judul" header="Judul buku" />
-      <Column field="tgl_pinjam" header="Tanggal pinjam" />
-    </DataTable>
-  </section>
-
-  <section class="main-section">
-    <h2>Data peminjaman Seminggu terakhir</h2>
-
-    <DataTable
-      :value="peminjamanDataWeek"
-      sort-field="tenggat_waktu"
-      :sort-order="-1"
-      scrollable
-      :row-class="lateClass"
-    >
-      <template #empty>
-        <p>Tidak peminjaman selama seminggu terakhir.</p>
-      </template>
-
-      <Column field="pengguna.nama" header="Peminjam">
-        <template #body="slotProps">
-          <p>
-            <span>
-              {{ slotProps.data.pengguna.nama }}
-            </span>
-            -
-            <span>
-              {{ slotProps.data.pengguna.kelas }}
-              {{ slotProps.data.pengguna.jurusan }}
-            </span>
-          </p>
-        </template>
-      </Column>
-
-      <Column field="buku.judul" header="Judul">
-        <template #body="slotProps">
-          <NuxtLink :to="`/admin/buku/${slotProps.data.no_isbn}`">
-            {{ slotProps.data.buku.judul }}
-          </NuxtLink>
-        </template>
-      </Column>
-      <Column field="no_isbn" header="ISBN" />
-
-      <Column field="tgl_pinjam" header="Tanggal Pinjam" sortable>
+      <Column field="tgl_pinjam" header="Tanggal pinjam" sortable>
         <template #body="slotProps">
           {{ formatDate(new Date(slotProps.data.tgl_pinjam)) }}
         </template>
       </Column>
-
-      <Column field="tenggat_waktu" header="Tenggat Waktu" :sortable="true">
+      <Column field="tenggat_waktu" header="Tenggat waktu" sortable>
         <template #body="slotProps">
           {{ formatDate(new Date(slotProps.data.tenggat_waktu)) }}
         </template>
       </Column>
 
-      <Column field="tgl_kembali" header="Tanggal Kembali" sortable>
+      <Column header="keterangan" field="state_id" sortable>
         <template #body="slotProps">
-          {{ slotProps.data.tgl_kembali ? formatDate(new Date(slotProps.data.tgl_kembali)) : "-" }}
+          {{ slotProps.data.peminjaman_state.name }}
         </template>
       </Column>
     </DataTable>

From 721782131e19fb7ea8e1cd5338c225bafa874e4e Mon Sep 17 00:00:00 2001
From: Efraim Munthe <efrayanglain@gmail.com>
Date: Sat, 7 Sep 2024 21:44:12 +0700
Subject: [PATCH 17/17] add date filter to peminjaman

---
 lib/peminjaman.ts          | 21 +++++++++++++++++----
 pages/admin/peminjaman.vue | 34 +++++++++++++++++++++++++++++++---
 2 files changed, 48 insertions(+), 7 deletions(-)

diff --git a/lib/peminjaman.ts b/lib/peminjaman.ts
index b2e9f12a..d59a4505 100644
--- a/lib/peminjaman.ts
+++ b/lib/peminjaman.ts
@@ -2,12 +2,25 @@ import type { PostgrestError } from "@supabase/supabase-js"
 import type { Database } from "@/types/database.types.ts"
 import type { AdminPeminjamanData as PeminjamanData } from "@/pages/admin/index.vue"
 
-export async function getPeminjamanData(): Promise<PeminjamanData> {
+export async function getPeminjamanData(
+  startDate?: Date | null,
+  endDate?: Date | null
+): Promise<PeminjamanData> {
   const supabase = useSupabaseClient<Database>()
+  let query = supabase
+    .from("peminjaman")
+    .select("*, peminjaman_state(name), pengguna(nama, kelas, jurusan), buku(*)")
+
+  if (startDate) {
+    query = query.gte("tgl_pinjam", startDate.toISOString())
+  }
+
+  if (endDate) {
+    query = query.lte("tgl_pinjam", endDate.toISOString())
+  }
+
   try {
-    const { data, error } = await supabase
-      .from("peminjaman")
-      .select("*, peminjaman_state(name), pengguna(nama, kelas, jurusan), buku(*)")
+    const { data, error } = await query
 
     if (error) throw error
     return data as PeminjamanData
diff --git a/pages/admin/peminjaman.vue b/pages/admin/peminjaman.vue
index a5a402ea..b5fb01af 100644
--- a/pages/admin/peminjaman.vue
+++ b/pages/admin/peminjaman.vue
@@ -15,14 +15,20 @@ definePageMeta({
 })
 
 const peminjamanData = ref<Peminjaman[]>([])
+const startDate = ref<Date | null>(null)
+const endDate = ref<Date | null>(null)
 
 const isLoading = ref(false)
 
 onMounted(async () => {
+  handleFilterPeminjaman()
+})
+
+async function handleFilterPeminjaman() {
   isLoading.value = true
-  peminjamanData.value = await getPeminjamanData()
+  peminjamanData.value = await getPeminjamanData(startDate.value, endDate.value)
   isLoading.value = false
-})
+}
 
 const lateClass = (data: Peminjaman) => {
   if (data.tgl_kembali) {
@@ -40,13 +46,35 @@ const lateClass = (data: Peminjaman) => {
   <section class="main-section">
     <h2>Belum dikonfirmasi</h2>
 
+    <form class="pt-8 pb-4 flex gap-4" @submit.prevent="handleFilterPeminjaman">
+      <FloatLabel>
+        <DatePicker
+          v-model="startDate"
+          :invalid="!endDate || !startDate || endDate < startDate"
+          input-id="start-date"
+        />
+        <label for="start-date">Tanggal awal</label>
+      </FloatLabel>
+
+      <FloatLabel>
+        <DatePicker
+          v-model="endDate"
+          :invalid="!endDate || !startDate || startDate < endDate"
+          input-id="end-date"
+        />
+        <label for="end-date">Tanggal akhir</label>
+      </FloatLabel>
+
+      <CTA type="submit" label="filter" class="ml-auto" />
+    </form>
+
     <DataTable
       :value="peminjamanData"
       scrollable
       :loading="isLoading"
       striped-rows
       paginator
-      rows="20"
+      :rows="20"
     >
       <template #empty>
         <p>Belum ada yang meminjam</p>