367 lines
12 KiB
Vue
Executable File
367 lines
12 KiB
Vue
Executable File
<script setup lang="ts">
|
|
/*Call Components*/
|
|
import RevenueCard from "@/components/dashboard/RevenueCard.vue";
|
|
import NewCustomer from "@/components/dashboard/NewCustomer.vue";
|
|
import Totalincome from "@/components/dashboard/TotalIncome.vue";
|
|
import RevenueProduct from "@/components/dashboard/RevenueProducts.vue";
|
|
import DailyActivities from "@/components/dashboard/DailyActivities.vue";
|
|
import BlogCards from "@/components/dashboard/BlogCards.vue";
|
|
|
|
definePageMeta({
|
|
//middleware: ["auth-menu"],
|
|
//middleware : ['sidebase-auth']
|
|
auth: "required",
|
|
//auth: "guest",
|
|
});
|
|
|
|
// const { status } = useAuth();
|
|
// if (status.value === "unauthenticated") {
|
|
// console.log("status", status.value);
|
|
// } else {
|
|
// console.log("status", status.value);
|
|
// }
|
|
|
|
|
|
import { useUserInfo } from "~/composables/useUserInfo";
|
|
import { computed } from "vue";
|
|
import type { ExtendedUser } from "~/types/auth";
|
|
|
|
const userInfo = useUserInfo();
|
|
|
|
const userName = computed(() => {
|
|
const user = userInfo.user.value as ExtendedUser | null;
|
|
return user && user.name ? user.name : "N/A";
|
|
});
|
|
|
|
const userEmail = computed(() => {
|
|
const user = userInfo.user.value as ExtendedUser | null;
|
|
return user && user.email ? user.email : "N/A";
|
|
});
|
|
|
|
const userRoles = computed(() => {
|
|
const user = userInfo.user.value as ExtendedUser | null;
|
|
return user && user.roles ? user.roles : "N/A";
|
|
});
|
|
console.log("user object:",userInfo);
|
|
|
|
// Extract roles from accessTokenPayload for "nuxtsim-pendaftaran"
|
|
const filteredRoles = computed(() => {
|
|
const accessTokenPayload = userInfo.accessTokenPayload.value;
|
|
if (
|
|
accessTokenPayload &&
|
|
accessTokenPayload.resource_access &&
|
|
accessTokenPayload.resource_access["nuxtsim-pendaftaran"] &&
|
|
Array.isArray(
|
|
accessTokenPayload.resource_access["nuxtsim-pendaftaran"].roles
|
|
)
|
|
) {
|
|
return accessTokenPayload.resource_access["nuxtsim-pendaftaran"].roles.join(
|
|
", "
|
|
);
|
|
}
|
|
return "N/A";
|
|
});
|
|
|
|
// Computed properties untuk semua data session dari [...].ts
|
|
const sessionData = computed(() => {
|
|
return {
|
|
idToken: userInfo.idToken.value,
|
|
accessToken: userInfo.accessToken.value,
|
|
refreshToken: userInfo.refreshToken.value,
|
|
accessTokenPayload: userInfo.accessTokenPayload.value,
|
|
expiresAt: userInfo.expiresAt.value,
|
|
sessionScope: userInfo.sessionScope.value,
|
|
jwtToken: userInfo.jwtToken.value,
|
|
sessionExpires: userInfo.sessionExpires.value,
|
|
fullSessionData: userInfo.data.value
|
|
};
|
|
});
|
|
|
|
// Helper function untuk format date
|
|
const formatDate = (timestamp: number | null) => {
|
|
if (!timestamp) return "N/A";
|
|
return new Date(timestamp * 1000).toLocaleString();
|
|
};
|
|
|
|
// Helper function untuk format JSON
|
|
const formatJSON = (obj: any) => {
|
|
if (!obj) return "N/A";
|
|
return JSON.stringify(obj, null, 2);
|
|
};
|
|
</script>
|
|
|
|
<!-- <template>
|
|
<v-row>
|
|
<v-col cols="12" lg="8"><RevenueCard /></v-col>
|
|
<v-col cols="12" lg="4"
|
|
><NewCustomer class="mb-6" />
|
|
<Totalincome />
|
|
</v-col>
|
|
<v-col cols="12" lg="8"><RevenueProduct /></v-col>
|
|
<v-col cols="12" lg="4"><DailyActivities /> </v-col>
|
|
<v-col cols="12"><BlogCards /></v-col>
|
|
</v-row>
|
|
</template> -->
|
|
|
|
<template>
|
|
<v-row>
|
|
<!-- Complete Session Information Card -->
|
|
<v-col cols="12" class="mb-4">
|
|
<v-card>
|
|
<v-card-title class="text-h5"
|
|
>Complete Session Data dari [...].ts</v-card-title
|
|
>
|
|
<v-card-text>
|
|
<div v-if="userInfo.isAuthenticated.value">
|
|
<!-- Basic User Info -->
|
|
<v-divider class="mb-4"></v-divider>
|
|
<h3 class="mb-3">Basic User Information</h3>
|
|
<v-row>
|
|
<v-col cols="12" md="6">
|
|
<p><strong>Name:</strong> {{ userName }}</p>
|
|
<p><strong>Email:</strong> {{ userEmail }}</p>
|
|
<p><strong>Roles:</strong> {{ userRoles }}</p>
|
|
<p><strong>Status:</strong> {{ userInfo.status.value }}</p>
|
|
</v-col>
|
|
<v-col cols="12" md="6">
|
|
<p>
|
|
<strong>Session Expires:</strong>
|
|
{{ sessionData.sessionExpires || "N/A" }}
|
|
</p>
|
|
<p>
|
|
<strong>Token Expires At:</strong>
|
|
{{ formatDate(sessionData.expiresAt) }}
|
|
</p>
|
|
<p>
|
|
<strong>Session Scope:</strong>
|
|
{{ sessionData.sessionScope || "N/A" }}
|
|
</p>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<!-- Token Information dari [...].ts -->
|
|
<v-divider class="mb-4 mt-4"></v-divider>
|
|
<h3 class="mb-3">Token Information (dari callbacks [...].ts)</h3>
|
|
<v-expansion-panels multiple>
|
|
<!-- ID Token -->
|
|
<v-expansion-panel>
|
|
<v-expansion-panel-title>
|
|
<strong>ID Token (session.id_token)</strong>
|
|
</v-expansion-panel-title>
|
|
<v-expansion-panel-text>
|
|
<pre
|
|
style="
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
"
|
|
>{{ sessionData.idToken || "Not Available" }}</pre
|
|
>
|
|
</v-expansion-panel-text>
|
|
</v-expansion-panel>
|
|
|
|
<!-- Access Token -->
|
|
<v-expansion-panel>
|
|
<v-expansion-panel-title>
|
|
<strong>Access Token (session.access_token)</strong>
|
|
</v-expansion-panel-title>
|
|
<v-expansion-panel-text>
|
|
<pre
|
|
style="
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
"
|
|
>{{ sessionData.accessToken || "Not Available" }}</pre
|
|
>
|
|
</v-expansion-panel-text>
|
|
</v-expansion-panel>
|
|
|
|
<!-- JWT Token -->
|
|
<v-expansion-panel>
|
|
<v-expansion-panel-title>
|
|
<strong>JWT Token (session.jwt)</strong>
|
|
</v-expansion-panel-title>
|
|
<v-expansion-panel-text>
|
|
<pre
|
|
style="
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
"
|
|
>{{ sessionData.jwtToken || "Not Available" }}</pre
|
|
>
|
|
</v-expansion-panel-text>
|
|
</v-expansion-panel>
|
|
|
|
<!-- Refresh Token -->
|
|
<v-expansion-panel>
|
|
<v-expansion-panel-title>
|
|
<strong>Refresh Token (session.refresh_token)</strong>
|
|
</v-expansion-panel-title>
|
|
<v-expansion-panel-text>
|
|
<pre
|
|
style="
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
"
|
|
>{{ sessionData.refreshToken || "Not Available" }}</pre
|
|
>
|
|
</v-expansion-panel-text>
|
|
</v-expansion-panel>
|
|
</v-expansion-panels>
|
|
|
|
<!-- Access Token Payload -->
|
|
<v-divider class="mb-4 mt-4"></v-divider>
|
|
<h3 class="mb-3">Access Token Payload (Parsed dari [...].ts)</h3>
|
|
<v-expansion-panels>
|
|
<v-expansion-panel>
|
|
<v-expansion-panel-title>
|
|
<strong
|
|
>Access Token Payload (session.access_token_payload)</strong
|
|
>
|
|
</v-expansion-panel-title>
|
|
<v-expansion-panel-text>
|
|
<pre
|
|
style="
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
"
|
|
>{{ formatJSON(sessionData.accessTokenPayload) }}</pre
|
|
>
|
|
</v-expansion-panel-text>
|
|
</v-expansion-panel>
|
|
</v-expansion-panels>
|
|
|
|
<!-- User Object dari Session -->
|
|
<v-divider class="mb-4 mt-4"></v-divider>
|
|
<h3 class="mb-3">User Object (session.user)</h3>
|
|
<v-expansion-panels>
|
|
<v-expansion-panel>
|
|
<v-expansion-panel-title>
|
|
<strong>User Data dari Session Callback</strong>
|
|
</v-expansion-panel-title>
|
|
<v-expansion-panel-text>
|
|
<pre
|
|
style="
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
"
|
|
>{{ formatJSON(userInfo.user.value) }}</pre
|
|
>
|
|
</v-expansion-panel-text>
|
|
</v-expansion-panel>
|
|
</v-expansion-panels>
|
|
|
|
<!-- Complete Raw Session Data -->
|
|
<v-divider class="mb-4 mt-4"></v-divider>
|
|
<h3 class="mb-3">Complete Raw Session Data</h3>
|
|
<v-expansion-panels>
|
|
<v-expansion-panel>
|
|
<v-expansion-panel-title>
|
|
<strong>Full Session Object (Debug)</strong>
|
|
</v-expansion-panel-title>
|
|
<v-expansion-panel-text>
|
|
<pre
|
|
style="
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
max-height: 500px;
|
|
overflow-y: auto;
|
|
font-size: 12px;
|
|
"
|
|
>{{ formatJSON(sessionData.fullSessionData) }}</pre
|
|
>
|
|
</v-expansion-panel-text>
|
|
</v-expansion-panel>
|
|
</v-expansion-panels>
|
|
|
|
<!-- Session Timeline -->
|
|
<v-divider class="mb-4 mt-4"></v-divider>
|
|
<h3 class="mb-3">Session Timeline</h3>
|
|
<v-timeline density="compact">
|
|
<v-timeline-item size="small">
|
|
<strong>Session Created:</strong>
|
|
{{
|
|
formatDate(
|
|
sessionData.expiresAt ? sessionData.expiresAt - 3600 : null
|
|
)
|
|
}}
|
|
</v-timeline-item>
|
|
<v-timeline-item size="small">
|
|
<strong>Current Time:</strong> {{ new Date().toLocaleString() }}
|
|
</v-timeline-item>
|
|
<v-timeline-item size="small">
|
|
<strong>Session Expires:</strong>
|
|
{{ formatDate(sessionData.expiresAt) }}
|
|
</v-timeline-item>
|
|
</v-timeline>
|
|
</div>
|
|
<div v-else>
|
|
<v-alert type="warning" class="mb-4">
|
|
User is not authenticated. Please log in to view session
|
|
information.
|
|
</v-alert>
|
|
</div>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-col>
|
|
|
|
<!-- Dashboard Components (Optional) -->
|
|
<v-col cols="12">
|
|
<v-row>
|
|
<!-- Sales overview -->
|
|
<v-col cols="12" lg="8">
|
|
<!-- <SalesOverview /> -->
|
|
</v-col>
|
|
<!-- Yearly Breakup / Monthly Earnings -->
|
|
<v-col cols="12" lg="4">
|
|
<div class="mb-6">
|
|
<!-- <YearlyBreakup /> -->
|
|
</div>
|
|
<div>
|
|
<!-- <MonthlyEarning /> -->
|
|
</div>
|
|
</v-col>
|
|
<!-- Recent transaction -->
|
|
<v-col cols="12" lg="4">
|
|
<!-- <RecentTransaction /> -->
|
|
</v-col>
|
|
<!-- Product performence -->
|
|
<v-col cols="12" lg="8">
|
|
<!-- <ProductPerformance /> -->
|
|
</v-col>
|
|
<!-- Product Cards -->
|
|
<v-col cols="12">
|
|
<!-- <ProductCards /> -->
|
|
</v-col>
|
|
</v-row>
|
|
</v-col>
|
|
|
|
<!-- Footer -->
|
|
<v-col class="text-center mt-2">
|
|
<p class="text-muted">
|
|
Design and Developed by
|
|
<a
|
|
flat
|
|
variant="text"
|
|
href="https://adminmart.com/"
|
|
target="_blank"
|
|
class="pl-1 text-primary"
|
|
>AdminMart.com</a
|
|
>
|
|
</p>
|
|
</v-col>
|
|
</v-row>
|
|
</template>
|
|
|