@dasidev/dasi-ui 1.0.0

package/src/components/notif/NotifItem.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { LucideBell } from "lucide-vue-next";
+import BtnOutline from "@/components/button/BtnOutline.vue";
+import moment from "moment";
+
+moment.updateLocale("en", {
+  relativeTime: {
+    future: "in %s",
+    past: "%s ago",
+    s: "1s",
+    ss: "%ds",
+    m: "1m",
+    mm: "%dm",
+    h: "1h",
+    hh: "%dh",
+    d: "1d",
+    dd: "%dd",
+    w: "1w",
+    ww: "%dw",
+    M: "1Mo",
+    MM: "%dMo",
+    y: "1y",
+    yy: "%dy"
+  }
+});
+
+const props = defineProps(["item"]);
+</script>
+
+<template>
+  <main class="relative mb-1 cursor-pointer rounded-sm py-3 pl-[60px] pr-4 text-gray-700 transition hover:bg-hover_main" :class="{ 'bg-slate-50': props.item.isRead }">
+    <div class="absolute left-2 top-3 flex h-9 w-9 items-center justify-center rounded-full bg-slate-100">
+      <LucideBell :size="19" class="text-primary_main"></LucideBell>
+      <div class="absolute right-0 top-0 z-2 size-3 rounded-full border-2 border-white bg-primary_main" v-if="props.item.isRead"></div>
+    </div>
+    <h4 class="text-sm font-semibold leading-tight text-gray-600">{{ props.item.name }}</h4>
+    <div class="pb-[2px] pt-[3px] text-[12px] text-gray-500 opacity-70">{{ moment(props.item.createdAt).utc().subtract(7, "hour").calendar() }}</div>
+    <p class="whitespace-pre-wrap text-xs leading-snug text-gray-500">{{ props.item.message }}</p>
+    <!-- <BtnOutline class="text-[13px] py-1 px-3 rounded-full border-[1px] mt-2">Notification Action</BtnOutline> -->
+  </main>
+</template>

package/src/components/pages/Header.vue

@@ -0,0 +1,431 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref, watch, computed } from "vue";
+import { ChevronDown, Bell, LogOut, Settings, LucideBookOpenText, LucideX, LucidePlusCircle, LucidePin, LucideRotateCw, Sun, Moon } from "lucide-vue-next";
+import Avatar from "@/components/ui/avatar/Avatar.vue";
+import AvatarFallback from "@/components/ui/avatar/AvatarFallback.vue";
+import DropdownMenu from "@/components/ui/dropdown-menu/DropdownMenu.vue";
+import DropdownMenuTrigger from "@/components/ui/dropdown-menu/DropdownMenuTrigger.vue";
+import DropdownMenuContent from "@/components/ui/dropdown-menu/DropdownMenuContent.vue";
+import DropdownMenuSeparator from "@/components/ui/dropdown-menu/DropdownMenuSeparator.vue";
+import DropdownMenuItem from "@/components/ui/dropdown-menu/DropdownMenuItem.vue";
+import DropdownMenuShortcut from "@/components/ui/dropdown-menu/DropdownMenuShortcut.vue";
+import AlertDialog from "@/components/ui/alert-dialog/AlertDialog.vue";
+import AlertDialogContent from "@/components/ui/alert-dialog/AlertDialogContent.vue";
+import AlertDialogHeader from "@/components/ui/alert-dialog/AlertDialogHeader.vue";
+import AlertDialogTitle from "@/components/ui/alert-dialog/AlertDialogTitle.vue";
+import AlertDialogDescription from "@/components/ui/alert-dialog/AlertDialogDescription.vue";
+import AlertDialogFooter from "@/components/ui/alert-dialog/AlertDialogFooter.vue";
+import AlertDialogCancel from "@/components/ui/alert-dialog/AlertDialogCancel.vue";
+import AlertDialogAction from "@/components/ui/alert-dialog/AlertDialogAction.vue";
+import LoadingDialog from "@/components/loadings/LoadingDialog.vue";
+import { useMagicKeys } from "@vueuse/core";
+import Notif from "@/components/notif/Notif.vue";
+import { useRoute, useRouter } from "vue-router";
+import menu, { type Submenu } from "@/menu";
+import ChangePwd from "@/components/helper/ChangePwd.vue";
+import api from "@/api/api";
+import { useTab } from "@/stores/tabs";
+import { useAppConfig } from "@/composables/useAppConfig";
+import {
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger
+} from "@/components/ui/context-menu";
+import { useDarkMode } from "@/composables/useDarkMode";
+
+const keys = useMagicKeys();
+const route = useRoute();
+const router = useRouter();
+const tabStore = useTab();
+
+const { companyName, logo, primaryColor, apiEndpoints, features, enabledFeatures, userKey, isConfigLoaded } = useAppConfig();
+
+const breadcrumbs = ref<{ name: string; uri?: string }[]>([]);
+const logoutConfirmOpen = ref(false);
+const showNotif = ref(false);
+const notifUnread = ref(0);
+const hasWebSocketNotif = ref(false);
+const authUser = ref({ name: "", email: "..." });
+const headerEl: any = ref(null);
+const ddUserOpen = ref(false);
+const tabActive = ref("");
+const { isDark, toggleDarkMode } = useDarkMode();
+
+const emits = defineEmits(["openSearch"]);
+
+const floatingNotifs = ref();
+
+/**
+ * El
+ *
+ */
+const loadingDialogEl: any = ref(null);
+
+function updateBreadcrumbs() {
+  breadcrumbs.value = [];
+  for (const item of menu) {
+    if (item.submenu) {
+      for (const submenu of item.submenu) {
+        if (submenu.url === route.fullPath) {
+          tabStore.addTab(submenu);
+          breadcrumbs.value = [{ name: item.name }, { name: submenu.name, uri: submenu.url }];
+          return;
+        }
+      }
+    }
+  }
+}
+
+function doLogout() {
+  if (loadingDialogEl.value) loadingDialogEl.value.open();
+  tabStore.clearTabs();
+  api
+    .post(apiEndpoints.value.auth.logout)
+    .then(() => {
+      console.log("Logout success!");
+    })
+    .finally(() => {
+      localStorage.clear();
+      window.location.href = "/login";
+    });
+}
+
+function countNotifUnread() {
+  if (!enabledFeatures.value.realTimeNotifications) return;
+
+  api
+    .get(apiEndpoints.value.notifications.unreadCount)
+    .then(r => {
+      notifUnread.value = r.data.total || 0;
+    })
+    .finally(() => {
+      setTimeout(() => {
+        countNotifUnread();
+      }, 3500);
+    });
+}
+
+function fnHover(item: any) {
+  for (const notif of floatingNotifs.value) {
+    notif.visible = false;
+  }
+  item.visible = true;
+}
+
+function fnBlur() {
+  for (const notif of floatingNotifs.value) {
+    notif.visible = true;
+  }
+}
+
+function closeDrodown() {
+  ddUserOpen.value = false;
+}
+
+function closeTab(tab: Submenu) {
+  tabStore.removeTab(tab);
+  if (tab.url === tabActive.value) {
+    const newTab = tabStore.tabs[tabStore.tabs.length - 1];
+    const newUri = newTab ? newTab.url || "/" : "/";
+    router.push(newUri);
+  }
+}
+
+function closeTabOthers(tab: Submenu) {
+  const tabToClose: Submenu[] = [];
+  for (const item of tabStore.tabs) {
+    if (item.url !== tab.url) tabToClose.push(item);
+  }
+  for (const item of tabToClose) {
+    tabStore.removeTab(item);
+  }
+  if (tabActive.value !== tab.url) router.push(tab.url || "/");
+}
+
+function closeTabRight(tab: Submenu) {
+  const tabToClose: Submenu[] = [];
+  let tabFound;
+  for (const item of tabStore.tabs) {
+    if (item.url === tab.url) {
+      tabFound = true;
+      continue;
+    }
+    if (tabFound) tabToClose.push(item);
+  }
+  for (const item of tabToClose) {
+    tabStore.removeTab(item);
+  }
+  if (tabActive.value !== tab.url) router.push(tab.url || "/");
+}
+
+function newTab() {
+  setTimeout(() => {
+    emits("openSearch");
+  });
+}
+
+function handleNotificationClick() {
+  // Clear unread count when notification bell is clicked
+  notifUnread.value = 0;
+  hasWebSocketNotif.value = false;
+  //   showNotif.value = true;
+}
+
+watch(keys["Shift+Cmd+X"], v => {
+  if (v) logoutConfirmOpen.value = !logoutConfirmOpen.value;
+});
+
+watch(route, () => {
+  updateBreadcrumbs();
+  tabActive.value = route.path;
+});
+
+onMounted(() => {
+  const authUserName = localStorage.getItem(userKey.value);
+  authUser.value.name = authUserName ? String(authUserName) : "";
+  api.get(apiEndpoints.value.auth.info).then(r => {
+    authUser.value.email = r.data.data.email;
+  });
+
+  tabActive.value = route.path;
+
+  updateBreadcrumbs();
+});
+</script>
+
+<template>
+  <header class="fixed left-20 right-0 top-0 z-7 flex h-10 items-center border-b bg-white px-4 dark:border-dark_border dark:bg-dark_bg 2xl:h-14 2xl:px-6" ref="headerEl">
+    <div class="mr-auto flex gap-2 text-xs text-gray-500 2xl:text-sm">
+      <RouterLink to="/">Home</RouterLink>
+      <template v-for="(item, i) in breadcrumbs" :key="i">
+        <span>/</span>
+        <RouterLink :to="item.uri" :key="i" v-if="item.uri">{{ item.name }}</RouterLink>
+        <span v-else>{{ item.name }}</span>
+      </template>
+    </div>
+
+    <div class="ml-auto flex items-center">
+      <DropdownMenu v-model:open="showNotif">
+        <DropdownMenuTrigger>
+          <div
+            class="relative ml-2 flex size-7 cursor-pointer items-center justify-center rounded-full text-gray-500 transition hover:bg-hover_main hover:text-primary_main 2xl:size-8"
+            @click="handleNotificationClick">
+            <Bell class="size-[18px] transition 2xl:size-[22px]" />
+            <div class="absolute right-1 top-1 z-2 h-3 w-3 rounded-full border-2 border-white bg-red-600" v-if="notifUnread > 0 || hasWebSocketNotif"></div>
+            <!-- <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="w-10 h-10 absolute -top-1 -left-1">
+              <circle cx="50" cy="50" fill="none" stroke="currentColor" stroke-width="5" r="35" stroke-dasharray="164.93361431346415 56.97787143782138">
+                <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 50 50;360 50 50" keyTimes="0;1"></animateTransform>
+              </circle>
+            </svg> -->
+          </div>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent class="mr-6 w-[400px] border-none p-0">
+          <Notif @close-dropdown="showNotif = false" />
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <button @click="toggleDarkMode" class="relative ml-2 flex h-8 w-8 cursor-pointer items-center justify-center rounded-full text-gray-500 transition hover:bg-hover_main hover:text-primary_main">
+        <Sun v-if="isDark" class="size-[18px] transition 2xl:size-[22px]" />
+        <Moon v-else class="size-[18px] transition 2xl:size-[22px]" />
+      </button>
+      <RouterLink to="/settings" class="relative ml-2 flex h-8 w-8 cursor-pointer items-center justify-center rounded-full text-gray-500 transition hover:bg-hover_main hover:text-primary_main">
+        <Settings class="size-[18px] transition 2xl:size-[22px]" />
+      </RouterLink>
+      <DropdownMenu>
+        <DropdownMenuTrigger>
+          <div class="group ml-3 flex size-7 cursor-pointer items-center justify-center rounded-md bg-gray-100 transition hover:bg-hover_main dark:bg-gray-800 2xl:size-8">
+            <svg width="100" height="100" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" class="size-[14px] fill-gray-400 transition group-hover:fill-primary_main 2xl:size-[16px]">
+              <path
+                d="M1.61539 3.23077C1.29589 3.23077 0.983574 3.13603 0.717926 2.95853C0.452277 2.78103 0.245229 2.52874 0.122965 2.23357C0.000699922 1.93839 -0.0312901 1.61359 0.0310399 1.30024C0.0933699 0.986886 0.24722 0.699052 0.473136 0.473136C0.699052 0.24722 0.986886 0.0933699 1.30024 0.0310399C1.61359 -0.0312901 1.93839 0.000699922 2.23357 0.122965C2.52874 0.245229 2.78103 0.452277 2.95853 0.717926C3.13603 0.983574 3.23077 1.29589 3.23077 1.61539C3.23031 2.04367 3.05997 2.45428 2.75713 2.75713C2.45428 3.05997 2.04367 3.23031 1.61539 3.23077ZM6 3.23077C5.68051 3.23077 5.36819 3.13603 5.10254 2.95853C4.83689 2.78103 4.62984 2.52874 4.50758 2.23357C4.38531 1.93839 4.35333 1.61359 4.41566 1.30024C4.47798 0.986886 4.63184 0.699052 4.85775 0.473136C5.08367 0.24722 5.3715 0.0933699 5.68485 0.0310399C5.99821 -0.0312901 6.32301 0.000699922 6.61818 0.122965C6.91335 0.245229 7.16564 0.452277 7.34314 0.717926C7.52064 0.983574 7.61539 1.29589 7.61539 1.61539C7.61493 2.04367 7.44459 2.45428 7.14174 2.75713C6.8389 3.05997 6.42829 3.23031 6 3.23077ZM10.3846 3.23077C10.0651 3.23077 9.7528 3.13603 9.48716 2.95853C9.22151 2.78103 9.01446 2.52874 8.8922 2.23357C8.76993 1.93839 8.73794 1.61359 8.80027 1.30024C8.8626 0.986886 9.01645 0.699052 9.24237 0.473136C9.46828 0.24722 9.75612 0.0933699 10.0695 0.0310399C10.3828 -0.0312901 10.7076 0.000699922 11.0028 0.122965C11.298 0.245229 11.5503 0.452277 11.7278 0.717926C11.9053 0.983574 12 1.29589 12 1.61539C11.9995 2.04367 11.8292 2.45428 11.5264 2.75713C11.2235 3.05997 10.8129 3.23031 10.3846 3.23077ZM1.61539 7.61539C1.29589 7.61539 0.983574 7.52064 0.717926 7.34314C0.452277 7.16564 0.245229 6.91335 0.122965 6.61818C0.000699922 6.32301 -0.0312901 5.99821 0.0310399 5.68485C0.0933699 5.3715 0.24722 5.08367 0.473136 4.85775C0.699052 4.63184 0.986886 4.47798 1.30024 4.41566C1.61359 4.35333 1.93839 4.38531 2.23357 4.50758C2.52874 4.62984 2.78103 4.83689 2.95853 5.10254C3.13603 5.36819 3.23077 5.68051 3.23077 6C3.23031 6.42829 3.05997 6.8389 2.75713 7.14174C2.45428 7.44459 2.04367 7.61493 1.61539 7.61539ZM6 7.61539C5.68051 7.61539 5.36819 7.52064 5.10254 7.34314C4.83689 7.16564 4.62984 6.91335 4.50758 6.61818C4.38531 6.32301 4.35333 5.99821 4.41566 5.68485C4.47798 5.3715 4.63184 5.08367 4.85775 4.85775C5.08367 4.63184 5.3715 4.47798 5.68485 4.41566C5.99821 4.35333 6.32301 4.38531 6.61818 4.50758C6.91335 4.62984 7.16564 4.83689 7.34314 5.10254C7.52064 5.36819 7.61539 5.68051 7.61539 6C7.61493 6.42829 7.44459 6.8389 7.14174 7.14174C6.8389 7.44459 6.42829 7.61493 6 7.61539ZM10.3846 7.61539C10.0651 7.61539 9.7528 7.52064 9.48716 7.34314C9.22151 7.16564 9.01446 6.91335 8.8922 6.61818C8.76993 6.32301 8.73794 5.99821 8.80027 5.68485C8.8626 5.3715 9.01645 5.08367 9.24237 4.85775C9.46828 4.63184 9.75612 4.47798 10.0695 4.41566C10.3828 4.35333 10.7076 4.38531 11.0028 4.50758C11.298 4.62984 11.5503 4.83689 11.7278 5.10254C11.9053 5.36819 12 5.68051 12 6C11.9995 6.42829 11.8292 6.8389 11.5264 7.14174C11.2235 7.44459 10.8129 7.61493 10.3846 7.61539ZM1.61539 12C1.29589 12 0.983574 11.9053 0.717926 11.7278C0.452277 11.5503 0.245229 11.298 0.122965 11.0028C0.000699922 10.7076 -0.0312901 10.3828 0.0310399 10.0695C0.0933699 9.75612 0.24722 9.46828 0.473136 9.24237C0.699052 9.01645 0.986886 8.8626 1.30024 8.80027C1.61359 8.73794 1.93839 8.76993 2.23357 8.8922C2.52874 9.01446 2.78103 9.22151 2.95853 9.48716C3.13603 9.7528 3.23077 10.0651 3.23077 10.3846C3.23031 10.8129 3.05997 11.2235 2.75713 11.5264C2.45428 11.8292 2.04367 11.9995 1.61539 12ZM6 12C5.68051 12 5.36819 11.9053 5.10254 11.7278C4.83689 11.5503 4.62984 11.298 4.50758 11.0028C4.38531 10.7076 4.35333 10.3828 4.41566 10.0695C4.47798 9.75612 4.63184 9.46828 4.85775 9.24237C5.08367 9.01645 5.3715 8.8626 5.68485 8.80027C5.99821 8.73794 6.32301 8.76993 6.61818 8.8922C6.91335 9.01446 7.16564 9.22151 7.34314 9.48716C7.52064 9.7528 7.61539 10.0651 7.61539 10.3846C7.61493 10.8129 7.44459 11.2235 7.14174 11.5264C6.8389 11.8292 6.42829 11.9995 6 12ZM10.3846 12C10.0651 12 9.7528 11.9053 9.48716 11.7278C9.22151 11.5503 9.01446 11.298 8.8922 11.0028C8.76993 10.7076 8.73794 10.3828 8.80027 10.0695C8.8626 9.75612 9.01645 9.46828 9.24237 9.24237C9.46828 9.01645 9.75612 8.8626 10.0695 8.80027C10.3828 8.73794 10.7076 8.76993 11.0028 8.8922C11.298 9.01446 11.5503 9.22151 11.7278 9.48716C11.9053 9.7528 12 10.0651 12 10.3846C11.9995 10.8129 11.8292 11.2235 11.5264 11.5264C11.2235 11.8292 10.8129 11.9995 10.3846 12Z" />
+            </svg>
+          </div>
+        </DropdownMenuTrigger>
+      </DropdownMenu>
+      <DropdownMenu v-model:open="ddUserOpen">
+        <DropdownMenuTrigger>
+          <div class="ml-4 flex cursor-pointer items-center">
+            <Avatar class="mr-3 size-7 bg-green-300 font-semibold text-green-700 2xl:size-8">
+              <AvatarFallback v-if="authUser.name">
+                {{ authUser.name.substring(0, 1).toUpperCase() }}
+              </AvatarFallback>
+            </Avatar>
+            <div class="2x:text-md mr-3 text-sm">
+              <template v-if="authUser.name">{{ authUser.name }}</template>
+              <i class="font-light text-gray-400" v-else>Unnamed user</i>
+            </div>
+            <div class="flex h-6 w-6 items-center justify-center rounded-full bg-gray-100 transition hover:bg-hover_main hover:text-primary_main dark:bg-gray-800">
+              <ChevronDown class="w-4"></ChevronDown>
+            </div>
+          </div>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent class="mr-6 w-72">
+          <div class="flex items-center px-4 py-3">
+            <Avatar class="mr-3 size-11 bg-green-300 text-lg font-semibold text-green-700">
+              <AvatarFallback v-if="authUser.name">
+                {{ authUser.name.substring(0, 1).toUpperCase() }}
+              </AvatarFallback>
+            </Avatar>
+            <div>
+              <h4 class="mb-[2px] text-base font-medium leading-tight">
+                <template v-if="authUser.name">{{ authUser.name }}</template>
+                <i class="font-light text-gray-400" v-else>Unnamed user</i>
+              </h4>
+              <p class="text-sm leading-none text-gray-500">
+                {{ authUser.email }}
+              </p>
+            </div>
+          </div>
+          <DropdownMenuSeparator class="mb-2" />
+          <ChangePwd class="block w-full cursor-pointer rounded-md border-none bg-none px-5 py-2 text-left text-sm text-primary_main transition hover:bg-hover_main" v-on:finish="closeDrodown">
+            Change Password
+          </ChangePwd>
+          <RouterLink to="/docs" class="flex w-full cursor-pointer items-center rounded-md border-none bg-none px-5 py-2 text-left text-sm transition hover:bg-hover_main">
+            <LucideBookOpenText class="mr-2" :size="18" :stroke-width="1.4" />
+            Documentation
+          </RouterLink>
+          <DropdownMenuSeparator></DropdownMenuSeparator>
+          <DropdownMenuItem class="cursor-pointer rounded-md py-2 pl-5" v-on:click="logoutConfirmOpen = true">
+            <LogOut class="mr-2 h-4 w-4"></LogOut>
+            <span>Logout</span>
+            <DropdownMenuShortcut>⇧⌘X</DropdownMenuShortcut>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  </header>
+  <div class="tab-cnt fixed left-20 right-0 top-10 z-10 flex h-8 overflow-auto border-b bg-white px-1 text-[15px] dark:border-dark_border dark:bg-dark_bg 2xl:top-14 2xl:h-10 2xl:px-3">
+    <ContextMenu v-for="(tab, i) in tabStore.tabs" :key="i">
+      <ContextMenuTrigger>
+        <RouterLink
+          :to="tab.url || '#'"
+          class="group relative flex h-8 cursor-pointer items-center rounded-t-lg py-2 pl-3 pr-1.5 text-gray-500 dark:text-gray-300 2xl:h-10"
+          :class="{ 'bg-slate-50 text-primary_main dark:bg-dark_bg2': tabActive === tab.url }">
+          <div class="overflow-hidden text-ellipsis whitespace-nowrap text-xs font-semibold 2xl:text-sm">
+            {{ tab.name }}
+          </div>
+          <button
+            class="ml-1.5 flex size-5 flex-none items-center justify-center rounded-full opacity-0 transition hover:bg-slate-200 group-hover:opacity-100"
+            :class="{ 'opacity-100': tabActive === tab.url }"
+            v-on:click.prevent="closeTab(tab)">
+            <LucideX class="text-gray-500" :size="15" />
+          </button>
+          <div class="absolute bottom-0 left-0 right-0 h-0.5 rounded-t-full transition group-hover:bg-gray-400" :class="{ '!bg-primary_main': tabActive === tab.url }"></div>
+        </RouterLink>
+      </ContextMenuTrigger>
+      <ContextMenuContent class="w-56">
+        <ContextMenuItem v-on:click.prevent="newTab">
+          <LucidePlusCircle class="mr-[9px]" :size="15" />
+          New Tab
+          <ContextMenuShortcut>⌘⇧T</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuItem>
+          <LucideRotateCw class="mr-[9px]" :size="15" />
+          Reload
+          <ContextMenuShortcut>⌘⇧R</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuSeparator />
+        <ContextMenuItem inset v-on:click.prevent="closeTab(tab)"> Close </ContextMenuItem>
+        <ContextMenuItem inset v-on:click.prevent="closeTabOthers(tab)"> Close Others </ContextMenuItem>
+        <ContextMenuItem inset v-on:click.prevent="closeTabRight(tab)"> Close to the Right </ContextMenuItem>
+        <ContextMenuSeparator />
+        <ContextMenuItem>
+          <LucidePin class="mr-[9px] text-orange-500" :size="15" fill="currentcolor" />
+          Pin
+        </ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+    <button class="ml-2 mt-1 flex size-6 items-center justify-center rounded-full transition hover:bg-slate-200 hover:text-primary_main 2xl:size-8" v-on:click="newTab">
+      <LucidePlusCircle :stroke-width="1.5" class="size-[18px] 2xl:size-[22px]" />
+    </button>
+  </div>
+
+  <AlertDialog v-model:open="logoutConfirmOpen">
+    <AlertDialogContent class="w-96 dark:bg-dark_bg2">
+      <AlertDialogHeader>
+        <AlertDialogTitle>Logout dari {{ companyName }}</AlertDialogTitle>
+        <AlertDialogDescription> Apakah kamu yakin ingin logout dari {{ companyName }}? kamu dapat login kembali kapan aja. </AlertDialogDescription>
+      </AlertDialogHeader>
+      <AlertDialogFooter>
+        <AlertDialogCancel>Batal</AlertDialogCancel>
+        <AlertDialogAction class="bg-red-600 hover:bg-red-500" v-on:click="doLogout">Logout</AlertDialogAction>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>
+
+  <main class="notif-cnt">
+    <section class="fixed right-8 top-14 z-999" v-on:mouseleave="fnBlur">
+      <ul
+        class="notif-ul h-28 overflow-auto p-3 transition-all hover:mt-0 hover:h-auto hover:max-h-[calc(100%-3.5rem)]"
+        v-for="(item, i) in floatingNotifs"
+        :key="i"
+        :class="{
+          '-mt-8': i > 0,
+          '!h-0 scale-0 !p-0 opacity-0': !item.visible
+        }"
+        v-on:mouseenter="fnHover(item)">
+        <li class="mb-2 min-w-[365px] rounded-lg bg-white px-4 py-4 text-[13px]" v-for="i in 20" :key="i" :class="`notif-item-${i > 3 ? 'x' : i}`">
+          <h4 class="font-semibold">Event has been created</h4>
+          <p>Monday, January 3rd at 6:00pm</p>
+        </li>
+      </ul>
+    </section>
+  </main>
+  <LoadingDialog ref="loadingDialogEl" />
+</template>
+
+<style scoped lang="scss">
+.tab-cnt {
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.notif-ul {
+  // background-color: red;
+  max-height: 60vh !important;
+  li {
+    box-shadow: 0 2px 12px rgba($color: #000000, $alpha: 0.14);
+    transition: all 0.36s ease;
+    &.notif-item-x {
+      opacity: 0;
+      transform: scale(0.82) translateY(-400%);
+    }
+    &.notif-item-1 {
+      display: block;
+      position: relative;
+      z-index: 9;
+    }
+    &.notif-item-2 {
+      transform: scale(0.94) translateY(-100%);
+      position: relative;
+      z-index: 8;
+    }
+    &.notif-item-3 {
+      transform: scale(0.88) translateY(-214%);
+      position: relative;
+      z-index: 7;
+    }
+  }
+  &:hover {
+    li {
+      transform: none;
+      opacity: 1;
+      &.notif-item-x {
+        display: block;
+      }
+    }
+  }
+}
+</style>