[tab].vue

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useKeycloakStore } from '@/@core/stores/keycloakStore'
import UserJadwal from '@/components/beranda/UserJadwal.vue'
import UserLib from '@/components/beranda/UserLib.vue'
import UserLog from '@/components/beranda/UserLog.vue'
import UserRiwayat from '@/components/beranda/UserRiwayat.vue'

import UserKeamanan from '@/views/dstipro/beranda/keamanan/index.vue'
import UserPeta from '@/views/dstipro/beranda/peta/index.vue'
import UserProfile from '@/views/dstipro/beranda/profile/index.vue'
import UserProfileHeader from '@/views/dstipro/beranda/UserProfileHeader.vue'

const keycloakStore = useKeycloakStore()

definePageMeta({
  navActiveLink: 'tab',
  key: 'tab',

})

const route = useRoute('tab')
const router = useRouter()

// Pastikan activeTab bertipe string agar tidak ada error TypeScript
// const activeTab = computed(() => String(route.params.tab))
const activeTab = computed({
  get: () => route.params.tab,
  set: () => route.params.tab,
})

// Semua tab
const tabs = [
  { title: 'Profil', icon: 'ri-user-line', tab: 'profile' },
  { title: 'Keamanan', icon: 'ri-lock-line', tab: 'keamanan' },

  // { title: 'Berita', icon: 'ri-news-line', tab: 'berita' },
  { title: 'Riwayat', icon: 'ri-file-history-line', tab: 'riwayat' },
  { 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' },

]

// Filter tab berdasarkan civitas
const tabsByCivitas: Record<string, string[]> = {
  staf: ['profile', 'keamanan', 'log', 'peta', 'lib'],
  dosen: ['profile', 'keamanan', 'jadwal', 'log', 'peta', 'lib'],
  mahasiswa: ['profile', 'keamanan', 'riwayat', 'peta', 'lib'],
}

// Compute allowed tabs for the current user
const allowedTabs = computed(() => {
  const civitas = keycloakStore.civitas

  return tabsByCivitas[civitas] ?? []
})

// Filter tabs based on the allowlist
const filteredTabs = computed(() =>
  tabs.filter(tab => allowedTabs.value.includes(tab.tab)),
)

// Fungsi untuk navigasi tab
const navigateTab = (tab: string) => {
  router.push(`${tab}`)
}
</script>

<template>
  <UserProfileHeader class="mb-5" />
  <!--
    <div class="mb-10">
    <h1>Welcome, {{ keycloakStore.name }}</h1>
    </div>
  -->
  <div>
    <VTabs
      v-model="activeTab"
      class="v-tabs-pill"
    >
      <VTab
        v-for="item in filteredTabs"
        :key="item.icon"
        :value="item.tab"
        :to="{ name: 'tab', params: { tab: item.tab } }"
      >
        <VIcon
          start
          :icon="item.icon"
        />
        {{ item.title }}
      </VTab>
    </VTabs>

    <VWindow
      v-model="activeTab"
      class="mt-5 disable-tab-transition"
      :touch="false"
    >
      <!-- Profile -->
      <VWindowItem value="profile">
        <UserProfile />
      </VWindowItem>

      <!-- Keamanan -->
      <VWindowItem value="keamanan">
        <UserKeamanan />
      </VWindowItem>

      <!-- Berita -->
      <!--
        <VWindowItem value="berita">
        <UserBerita />
        </VWindowItem>
      -->
      <!-- <div> -->

      <!-- Riwayat -->
      <VWindowItem value="riwayat">
        <UserRiwayat />
      </VWindowItem>

      <!-- Jadwal -->
      <VWindowItem value="jadwal">
        <UserJadwal />
      </VWindowItem>

      <!-- Log Absen -->
      <VWindowItem value="log">
        <UserLog />
      </VWindowItem>

      <!-- Peta UI -->
      <VWindowItem value="peta">
        <UserPeta />
      </VWindowItem>

      <VWindowItem value="lib">
        <UserLib />
      </VWindowItem>
    </vwindow>
  </div>
</template>