edit lib

components/beranda/UserLib.vue

+
 <script setup lang="ts">
 import { useKeycloakStore } from "@/@core/stores/keycloakStore";
-import { ref } from "vue";
+import { ref, computed, onMounted } from "vue";
 
 // Store Keycloak
 const keycloakStore = useKeycloakStore();
@@ -10,6 +11,7 @@ const items = ref<any[]>([]);
 const loading = ref(false);
 const searchQuery = ref("");
 
+// Header tabel
 const logHeaders = [
   { title: "KOLEKSI", key: "koleksi" },
   { title: "TANGGAL PEMINJAMAN", key: "tglpinjam" },
@@ -17,13 +19,12 @@ const logHeaders = [
   { title: "DIPINJAM", key: "dipinjam" },
   { title: "PERPANJANGAN", key: "perpanjangan" },
   { title: "DENDA", key: "denda" },
-  { title: "DENDA TOTAL", key: "dendatotoal" },
+  { title: "DENDA TOTAL", key: "dendatotal" },
 ];
 
+// Fungsi ambil data
 async function getData() {
   loading.value = true;
-  items.value = [];
-
   try {
     const apiEndpoint = "https://api.ui.ac.id/my/lib";
     const response = await fetch(apiEndpoint, {
@@ -31,16 +32,24 @@ async function getData() {
         Authorization: `Bearer ${keycloakStore.accessToken}`,
       },
     });
-
     if (!response.ok) throw new Error("Gagal mengambil data");
     const dataku = await response.json();
 
-    // Tambahkan properti tanggal, namaHari, mulai aktual, dan selesai aktual ke setiap item
-    items.value = dataku.map((item: any) => {
-      return {
-        ...item,
-      };
-    });
+    // dataku adalah array, tiap elemen punya properti root-level
+    const requiredKeys = [
+      "denda",
+      "dendatotal",
+      "dipinjam",
+      "koleksi",
+      "perpanjangan",
+      "tglkembali",
+      "tglpinjam",
+      "username",
+    ];
+    // ambil hanya objek yang memiliki semua key di root
+    items.value = Array.isArray(dataku)
+      ? dataku.filter((r: any) => requiredKeys.every(k => k in r))
+      : [];
   } catch (err) {
     console.error("Gagal mengambil data:", err);
   } finally {
@@ -48,22 +57,32 @@ async function getData() {
   }
 }
 
+// Panggil saat komponen mount
+onMounted(() => {
+  getData();
+});
+
+// Filter hasil pencarian
 const filteredItems = computed(() => {
   if (!searchQuery.value) return items.value;
-
-  const query = searchQuery.value.toLowerCase();
-
-  return items.value.filter((item) =>
+  const q = searchQuery.value.toLowerCase();
+  return items.value.filter(item =>
     logHeaders.some(
-      (header) => item[header.key] && String(item[header.key]).toLowerCase().includes(query)
+      h => item[h.key] && String(item[h.key]).toLowerCase().includes(q)
     )
   );
 });
 </script>
 
 <template>
-     <VCard title="Status Peminjaman Buku" class="recentnamaHariCard">
-        <div class="search-container mb-4 pl-2 pr-2">
+  <AppCardActions
+    :title="`Status Peminjaman Buku`"
+    class="jadwalShift"
+    action-collapsed
+    action-remove
+  >
+    <!-- Search Input -->
+    <div class="search-container mb-4 pl-2 pr-2">
       <VTextField
         v-model="searchQuery"
         label="Search"
@@ -76,6 +95,7 @@ const filteredItems = computed(() => {
         outlined
       />
     </div>
+
     <VDataTable
       :headers="logHeaders"
       :items="filteredItems"
@@ -85,5 +105,52 @@ const filteredItems = computed(() => {
       :sort-by="['tglpinjam']"
       :sort-asc="[true]"
     ></VDataTable>
-     </VCard>
+    
+
+  </AppCardActions>
 </template>
+
+<style lang="scss">
+.jadwalShift {
+  .v-table {
+    &--density-default {
+      .v-table__wrapper {
+        table {
+          thead {
+            th {
+              background-color: #f5f5f5;
+              border-block-end: 2px solid #ddd;
+              color: #2c2c2c;
+              font-weight: 600;
+              padding-block: 12px;
+              padding-inline: 1.5em;
+            }
+          }
+
+          tbody {
+            tr {
+              td {
+                border-block-end: 1px solid #eee;
+                min-block-size: auto;
+                padding-block: 8px;
+                padding-inline: 1em;
+                vertical-align: top;
+
+                &.vti-table__td--Jadwal {
+                  color: #4a4a4a;
+                  font-weight: 500;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.search-container {
+  display: flex;
+  justify-content: flex-end;
+}
+</style>
\ No newline at end of file