module-farmasi/components/layout/full/vertical-header/ProfileDD.vue

<!-- components/layout/ProfileDD.vue -->
<script setup lang="ts">
import { MailIcon } from "vue-tabler-icons";
import { useAuthSession } from "~/composables/useAuth";
import { computed, onMounted, ref } from "vue";
import DialogConfrim from "~/components/shared/DialogConfrim.vue";

const auth = useAuthSession();

onMounted(async () => {
  if (!auth.isLoggedIn.value) {
    await auth.fetchUserSession();
  }
});

const isLogoutDialogOpen = ref(false);
const isFullLogoutDialogOpen = ref(false);
const isLoggingOut = ref(false);
const isFullLoggingOut = ref(false);

const openLogoutDialog = () => {
  isLogoutDialogOpen.value = true;
};

const openFullLogoutDialog = () => {
  isFullLogoutDialogOpen.value = true;
};

const confirmLogout = async () => {
  if (isLoggingOut.value) return;
  isLoggingOut.value = true;
  try {
    await auth.logout();
    isLogoutDialogOpen.value = false;
  } finally {
    isLoggingOut.value = false;
  }
};

const confirmFullLogout = async () => {
  if (isFullLoggingOut.value) return;
  isFullLoggingOut.value = true;
  try {
    await auth.fullLogout();
    isFullLogoutDialogOpen.value = false;
  } finally {
    isFullLoggingOut.value = false;
  }
};

// Get user display info from session
const getUserDisplayInfo = () => {
  if (!auth.user.value)
    return {
      name: "Guest User",
      email: "guest@example.com",
      role: "Guest"
    };

  const user = auth.user.value || {};
  return {
    name: user.name  || "User",
    email: user.email || "No email",
    role: auth.userRoles.value[0] || user.role || "User",
    provider :user.auth_provider
  };
};

const displayInfo = computed(() => getUserDisplayInfo());
const sessionInfo = computed(() => {
  return {
    isAuthenticated: auth.isLoggedIn.value,
    sessionExpires: auth.sessionData.value?.expiresAt || null,
    hasValidToken: !!auth.sessionData.value?.accessToken
  };
});
</script>

<template>
  <v-menu :close-on-content-click="false">
    <template v-slot:activator="{ props }">
      <v-btn class="custom-hover-primary" variant="text" v-bind="props" icon>
        <v-avatar size="35">
          <img
            src="~/assets/images/profile/user-1.jpg"
            width="35"
            alt="User Avatar"
          />
        </v-avatar>
      </v-btn>
    </template>

    <v-sheet rounded="md" width="360" elevation="10">
      <div class="px-8 pt-6">
        <h6 class="text-h5 font-weight-medium">User Profile</h6>
        <div class="d-flex align-center mt-4 pb-6">
          <v-avatar size="80">
            <img src="~/assets/images/profile/user-1.jpg" width="80" />
          </v-avatar>
          <div class="ml-3">
            <h6 class="text-h6 mb-n1">{{ displayInfo.name }}</h6>
            <!-- <span class="text-subtitle-1 font-weight-regular textSecondary">
              {{ displayInfo.role }}
            </span> -->
            <div class="d-flex align-center mt-2">
              <MailIcon size="18" stroke-width="1.5" />
              <span
                class="text-subtitle-1 font-weight-regular textSecondary ml-2"
              >
                {{ displayInfo.email }}
              </span>
            </div>

            <!-- **TAMBAHAN: Tampilkan status session** -->
            <div class="mt-2">
              <v-chip
                :color="sessionInfo.isAuthenticated ? 'success' : 'error'"
                size="small"
                variant="outlined"
              >
                {{ sessionInfo.isAuthenticated ? "Active" : "Inactive" }}
              </v-chip>
            </div>
          </div>
        </div>
      </div>

      <!-- **DIPERBAIKI: Logout buttons section dengan multiple options** -->
      <div class="pt-0 pb-6 px-8">
        <!-- Regular Logout Button -->
        <v-btn
          color="primary"
          variant="outlined"
          block
          @click="openLogoutDialog"
          prepend-icon="mdi-logout"
          class="mb-2"
        >
          Logout
        </v-btn>

        <!-- **TAMBAHAN: Full Logout Button** -->
        <v-btn
          v-if="displayInfo.provider === 'keycloak'"
          color="error"
          variant="outlined"
          block
          @click="openFullLogoutDialog"
          prepend-icon="mdi-logout-variant"
          class="mb-2"
        >
          Full Logout
        </v-btn>
      </div>

      <DialogConfrim
        v-model="isLogoutDialogOpen"
        title="Logout"
        message="Apakah Anda yakin ingin keluar?"
        confirm-text="Ya"
        cancel-text="Tidak"
        :loading="isLoggingOut"
        :close-on-confirm="false"
        @confirm="confirmLogout"
      />

      <DialogConfrim
        v-model="isFullLogoutDialogOpen"
        title="Full Logout"
        message="Apakah Anda yakin ingin keluar dari semua sesi? Ini akan menghapus semua data lokal dan sesi Keycloak."
        confirm-text="Ya"
        cancel-text="Tidak"
        :loading="isFullLoggingOut"
        :close-on-confirm="false"
        @confirm="confirmFullLogout"
      />
    </v-sheet>
  </v-menu>
</template>