Merge branch 'naput' into 'master'

peminjaman buku

See merge request !8

@core/components/TheCustomizer.vue

 <script setup lang="tsx">
-import { useStorage } from '@vueuse/core'
-import { PerfectScrollbar } from 'vue3-perfect-scrollbar'
-import { useTheme } from 'vuetify'
 import { staticPrimaryColor, staticPrimaryDarkenColor } from '@/plugins/vuetify/theme'
 import { Direction, Layout, Skins, Theme } from '@core/enums'
 import { useConfigStore } from '@core/stores/config'
@@ -9,6 +6,9 @@ import horizontalLight from '@images/customizer-icons/horizontal-light.svg'
 import { AppContentLayoutNav, ContentWidth } from '@layouts/enums'
 import { cookieRef, namespaceConfig } from '@layouts/stores/config'
 import { themeConfig } from '@themeConfig'
+import { useStorage } from '@vueuse/core'
+import { PerfectScrollbar } from 'vue3-perfect-scrollbar'
+import { useTheme } from 'vuetify'
 
 import borderSkin from '@images/customizer-icons/border-light.svg'
 import collapsed from '@images/customizer-icons/collapsed-light.svg'
@@ -488,7 +488,7 @@ const resetCustomizer = async () => {
         <!-- SECTION LAYOUT -->
         <CustomizerSection title="Layout">
           <!-- 👉 Layouts -->
-          <div class="d-flex flex-column gap-3">
+          <!-- <div class="d-flex flex-column gap-3">
             <h6 class="text-base font-weight-medium">
               Layout
             </h6>
@@ -503,7 +503,7 @@ const resetCustomizer = async () => {
                 <span class="text-sm text-medium-emphasis">{{ item.label }}</span>
               </template>
             </CustomRadiosWithImage>
-          </div>
+          </div> -->
 
           <!-- 👉 Content Width -->
           <div class="d-flex flex-column gap-3">
@@ -524,7 +524,7 @@ const resetCustomizer = async () => {
           </div>
 
           <!-- 👉 Direction -->
-          <div class="d-flex flex-column gap-3">
+          <!-- <div class="d-flex flex-column gap-3">
             <h6 class="text-base font-weight-medium">
               Direction
             </h6>
@@ -539,7 +539,7 @@ const resetCustomizer = async () => {
                 <span class="text-sm text-medium-emphasis">{{ item?.label }}</span>
               </template>
             </CustomRadiosWithImage>
-          </div>
+          </div> -->
         </CustomizerSection>
         <!-- !SECTION -->
       </PerfectScrollbar>

@layouts/components/HorizontalNavLayout.vue

 <script lang="ts" setup>
-import { HorizontalNav } from '@layouts/components'
-import type { HorizontalNavItems } from '@layouts/types'
+import type { HorizontalNavItems } from '@layouts/types';
 
 // ℹ️ Using import from `@layouts` causing build to hangup
 // import { useLayouts } from '@layouts'
-import { useLayoutConfigStore } from '@layouts/stores/config'
+import { useLayoutConfigStore } from '@layouts/stores/config';
 
 defineProps<{
   navItems: HorizontalNavItems
@@ -29,11 +28,11 @@ const configStore = useLayoutConfigStore()
         </div>
       </div>
       <!-- 👉 Navigation -->
-      <div class="layout-horizontal-nav">
+      <!-- <div class="layout-horizontal-nav">
         <div class="horizontal-nav-content-container">
           <HorizontalNav :nav-items="navItems" />
         </div>
-      </div>
+      </div> -->
     </div>
 
     <main class="layout-page-content">

@layouts/components/VerticalNav.vue

 <script lang="ts" setup>
-import type { Component } from 'vue'
-import { PerfectScrollbar } from 'vue3-perfect-scrollbar'
-import { VNodeRenderer } from './VNodeRenderer'
 import { layoutConfig } from '@layouts'
 import { VerticalNavGroup, VerticalNavLink, VerticalNavSectionTitle } from '@layouts/components'
 import { useLayoutConfigStore } from '@layouts/stores/config'
 import { injectionKeyIsVerticalNavHovered } from '@layouts/symbols'
 import type { NavGroup, NavLink, NavSectionTitle, VerticalNavItems } from '@layouts/types'
+import type { Component } from 'vue'
 
 interface Props {
   tag?: string | Component
@@ -77,14 +75,16 @@ const hideTitleAndIcon = configStore.isVerticalNavMini(isHovered)
           to="/"
           class="app-logo app-title-wrapper"
         >
-          <VNodeRenderer :nodes="layoutConfig.app.logo" />
+        <img src="@/assets/images/naput/logo-UI.png" alt="Logo UI" width="35" height="auto"/>
+
+          <!-- <VNodeRenderer :nodes="layoutConfig.app.logo" /> -->
 
           <Transition name="vertical-nav-app-title">
             <h1
               v-show="!hideTitleAndIcon"
               class="app-logo-title leading-normal"
             >
-              {{ layoutConfig.app.title }}
+              CIVITAS UI
             </h1>
           </Transition>
         </NuxtLink>
@@ -123,7 +123,7 @@ const hideTitleAndIcon = configStore.isVerticalNavMini(isHovered)
       name="nav-items"
       :update-is-vertical-nav-scrolled="updateIsVerticalNavScrolled"
     >
-      <PerfectScrollbar
+      <!-- <PerfectScrollbar
         :key="configStore.isAppRTL"
         tag="ul"
         class="nav-items"
@@ -136,7 +136,7 @@ const hideTitleAndIcon = configStore.isVerticalNavMini(isHovered)
           :key="index"
           :item="item"
         />
-      </PerfectScrollbar>
+      </PerfectScrollbar> -->
     </slot>
 
     <slot name="after-nav-items" />

components/beranda/UserLib.vue

+<script setup lang="ts">
+import { useKeycloakStore } from "@/@core/stores/keycloakStore";
+import { ref } from "vue";
+
+// Store Keycloak
+const keycloakStore = useKeycloakStore();
+
+// Data dan state
+const items = ref<any[]>([]);
+const loading = ref(false);
+const searchQuery = ref("");
+
+const logHeaders = [
+  { title: "KOLEKSI", key: "koleksi" },
+  { title: "TANGGAL PEMINJAMAN", key: "tglpinjam" },
+  { title: "TANGGAL PENGEMBALIAN", key: "tglkembali" },
+  { title: "DIPINJAM", key: "dipinjam" },
+  { title: "PERPANJANGAN", key: "perpanjangan" },
+  { title: "DENDA", key: "denda" },
+  { title: "DENDA TOTAL", key: "dendatotoal" },
+];
+
+async function getData() {
+  loading.value = true;
+  items.value = [];
+
+  try {
+    const apiEndpoint = "https://api.ui.ac.id/my/lib";
+    const response = await fetch(apiEndpoint, {
+      headers: {
+        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,
+      };
+    });
+  } catch (err) {
+    console.error("Gagal mengambil data:", err);
+  } finally {
+    loading.value = false;
+  }
+}
+
+const filteredItems = computed(() => {
+  if (!searchQuery.value) return items.value;
+
+  const query = searchQuery.value.toLowerCase();
+
+  return items.value.filter((item) =>
+    logHeaders.some(
+      (header) => item[header.key] && String(item[header.key]).toLowerCase().includes(query)
+    )
+  );
+});
+</script>
+
+<template>
+     <VCard title="Status Peminjaman Buku" class="recentnamaHariCard">
+        <div class="search-container mb-4 pl-2 pr-2">
+      <VTextField
+        v-model="searchQuery"
+        label="Search"
+        placeholder="Search ..."
+        append-inner-icon="ri-search-line"
+        clearable
+        single-line
+        hide-details
+        dense
+        outlined
+      />
+    </div>
+    <VDataTable
+      :headers="logHeaders"
+      :items="filteredItems"
+      hide-default-footer
+      fixed-header
+      item-value="tglpinjam"
+      :sort-by="['tglpinjam']"
+      :sort-asc="[true]"
+    ></VDataTable>
+     </VCard>
+</template>

components/beranda/UserLog.vue

@@ -95,6 +95,17 @@ watchEffect(async () => {
   await getData();
 });
 
+const filteredItems = computed(() => {
+  if (!searchQuery.value) return items.value;
+
+  const query = searchQuery.value.toLowerCase();
+
+  return items.value.filter((item) =>
+    logHeaders.some(
+      (header) => item[header.key] && String(item[header.key]).toLowerCase().includes(query)
+    )
+  );
+});
 
 </script>
 
@@ -115,7 +126,7 @@ watchEffect(async () => {
     </div>
     <VDataTable
       :headers="logHeaders"
-      :items="items"
+      :items="filteredItems"
       hide-default-footer
       fixed-header
       item-value="tanggal"

layouts/components/DefaultLayoutWithHorizontalNav.vue

@@ -12,7 +12,6 @@ import NavbarThemeSwitcher from '@/layouts/components/NavbarThemeSwitcher.vue'
 import UserProfile from '@/layouts/components/UserProfile.vue'
 import NavBarI18n from '@core/components/I18n.vue'
 import { HorizontalNavLayout } from '@layouts'
-import { VNodeRenderer } from '@layouts/components/VNodeRenderer'
 </script>
 
 <template>
@@ -23,11 +22,12 @@ import { VNodeRenderer } from '@layouts/components/VNodeRenderer'
         to="/"
         class="d-flex align-start gap-x-4"
       >
-        <VNodeRenderer :nodes="themeConfig.app.logo" />
+        <!-- <VNodeRenderer :nodes="themeConfig.app.logo" /> -->
+        <div style="display: inline-flex; align-items: center; gap: 8px;">
+  <img src="@/assets/images/naput/logo-UI.png" alt="Logo UI" width="35" height="auto" />
+  <h1 style="font-size: 1.25rem; text-transform: uppercase; margin-left: 10px;">CIVITAS UI</h1>
+</div>
 
-        <h1 class="leading-normal text-xl text-uppercase">
-          {{ themeConfig.app.title }}
-        </h1>
       </NuxtLink>
       <VSpacer />
 

pages/login-v6.vue

+
+<script setup lang="ts">
+
+
+import { VForm } from 'vuetify/components/VForm'
+
+import authV2MaskDark from '@images/pages/mask-v2-dark.png'
+import authV2MaskLight from '@images/pages/mask-v2-light.png'
+
+import { useKeycloakStore } from "@/@core/stores/keycloakStore"
+
+import AuthProvider from '@/views/pages/authentication/AuthProvider.vue'
+import authLoginLogo from "/assets/images/naput/illust-login.png"
+import authLoginBg from "/assets/images/naput/rektorat-bg.png"
+
+
+const authThemeImg = authLoginLogo;
+
+const authThemeBg = authLoginBg;
+
+const keycloakStore = useKeycloakStore(); 
+const data = ref<Record<string, any> | null>(null);
+const error = ref<Record<string, any> | null>(null);
+
+const { signIn, data: sessionData } = useAuth()
+
+const authThemeMask = useGenerateImageVariant(authV2MaskLight, authV2MaskDark)
+
+definePageMeta({
+  layout: 'blank',
+  unauthenticatedOnly: true,
+
+})
+
+const isPasswordVisible = ref(false)
+
+const route = useRoute()
+
+const ability = useAbility()
+
+const errors = ref<Record<string, string | undefined>>({
+  email: undefined,
+  password: undefined,
+})
+
+const refVForm = ref<VForm>()
+
+const credentials = ref({
+  email: 'admin@demo.com',
+  password: 'admin',
+})
+
+const rememberMe = ref(false)
+
+</script>
+
+
+
+<template>
+  <div class="container">
+    <div class="left"></div>
+    <div class="right">
+      <img src="/assets/images/naput/logo-ui-hitam.png" alt="Logo UI" class="logo" />
+      <VCol
+                  cols="5"
+                  class="text-center"
+                >
+      <AuthProvider/>
+      </VCol>
+    </div>
+  </div>
+</template>
+
+
+<style scoped>
+.login-button {
+  margin-top: 20px;
+  background-color: #FFD700;
+  padding: 12px 24px;
+  font-size: 18px;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  font-weight: bold;
+  transition: background-color 0.2s;
+  color: white;
+}
+
+.container {
+  display: flex;
+  height: 100vh;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: Arial, sans-serif;
+}
+
+
+/* Left Side */
+.left {
+  flex: 1;
+  background: url(/assets/images/naput/rbg.png) no-repeat center center;
+  background-size: cover;
+}
+
+
+/* Right Side */
+.right {
+  flex: 1;
+  background-color: #FDF8E7;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding-top: 240px;
+  gap: 20px; /* Menambah jarak antar elemen */
+}
+
+
+/* Logo */
+.logo {
+  width: 120px;
+  margin-bottom: 20px;
+}
+
+
+/* Title */
+h1 {
+  font-size: 24px;
+  color: #000;
+  text-align: center;
+}
+
+
+
+.login-button:hover {
+  background-color: #E6C200;
+}
+
+@media (max-width: 768px) {
+  .container {
+    justify-content: center;
+    align-items: center;
+    background: url(/assets/images/naput/rektorat-ipad-bg.png) no-repeat center center;
+    background-size: cover;
+  }
+
+  .left {
+    display: none;
+  }
+
+  .right {
+    background-color: rgba(253, 248, 231, 0.9);
+    padding: 40px;
+    border-radius: 20px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+    max-width: 350px;
+    width: 90%;
+    height: auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
+@media (max-width: 480px) {
+  .container {
+    background: url(/assets/images/naput/rektorat-iphone-bg.png) no-repeat center center;
+    background-size: cover;
+  }
+
+  .right {
+    padding: 30px;
+    max-width: 320px;
+    width: 90%;
+  }
+
+  .logo {
+    width: 90px;
+  }
+}
+</style>
+
+
+

pages/login.vue

@@ -3,7 +3,6 @@ import { useKeycloakStore } from '@/@core/stores/keycloakStore'
 
 import authLoginBg from '/assets/images/naput/bg-blue-yellow.png'
 import authLoginLogo from '/assets/images/naput/illust-login.png'
-
 import AuthProvider from '@/views/pages/authentication/AuthProvider.vue'
 
 const authThemeImg = authLoginLogo
@@ -42,9 +41,6 @@ definePageMeta({
               height="auto"
               class="mb-0"
             >
-            <h4 class="text-h4 mb-1">
-              Welcome 👋🏻 {{ keycloakStore.name }}
-            </h4>
           </VCol>
 
           <VCol cols="12">
@@ -59,4 +55,4 @@ definePageMeta({
 
 <style lang="scss">
 @use "@core/scss/template/pages/page-auth";
-</style>
+</style>
\ No newline at end of file

pages/naputpro/beranda/[tab].vue

@@ -3,6 +3,7 @@ import { computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useKeycloakStore } from '@/@core/stores/keycloakStore'
 import UserBerita from '@/components/beranda/UserBerita.vue'
+import UserLib from '@/components/beranda/UserLib.vue'
 import UserLog from '@/components/beranda/UserLog.vue'
 import UserJadwal from '@/components/beranda/UserJadwal.vue'
 import UserRiwayat from '@/components/beranda/UserRiwayat.vue'
@@ -39,6 +40,8 @@ const tabs = [
   { title: 'Jadwal', icon: 'ri-calendar-line', tab: 'jadwal' },
   { title: 'Log Absen', icon: 'ri-history-line', tab: 'log' },
   { title: 'Peta', icon: 'ri-history-line', tab: 'peta' },
+  
+  { title: 'Peminjaman Buku', icon: 'ri-book-line', tab: 'lib' },
 
 ]
 
@@ -118,6 +121,10 @@ const navigateTab = (tab: string) => {
       <VWindowItem value="peta">
         <UserPeta />
       </VWindowItem>
+
+      <VWindowItem value="lib">
+        <UserLib />
+      </VWindowItem>
     </vwindow>
   </div>
 </template>