dump

.gitignore

@@ -67,6 +67,7 @@ typings/
 
 # nuxt.js build output
 .nuxt
+.output
 
 # Nuxt generate
 dist

assets/styles/layouts/LoadingSpinerProvider.scss

@@ -0,0 +1,67 @@
+.spiner-enter-active,
+.spiner-leave-active,
+.connErr-enter-active,
+.connErr-leave-active {
+  transition: opacity 0.3s;
+}
+
+.spiner-enter,
+.spiner-leave-to,
+.connErr-enter,
+.connErr-leave-to {
+  opacity: 0;
+}
+
+.spinner1 {
+  color: $color-gray;
+  display: inline-block;
+  width: 50px;
+  height: 50px;
+  vertical-align: -0.125em;
+  border: 0.25em solid;
+  border-right: 0.25em solid transparent;
+  border-radius: 50%;
+  -webkit-animation: spinner 0.75s linear infinite;
+  animation: spinner 0.75s linear infinite;
+}
+
+.spinner2 {
+  color: $color-white;
+  display: inline-block;
+  width: 2rem;
+  height: 2rem;
+  vertical-align: -0.125em;
+  border: 0.25em solid;
+  border-right: 0.25em solid transparent;
+  border-radius: 50%;
+  -webkit-animation: spinner 0.75s linear infinite;
+  animation: spinner 0.75s linear infinite;
+}
+
+@keyframes spinner {
+  to {
+    transform: rotate(1turn);
+  }
+}
+
+.state_wrap {
+  position: absolute;
+  width: 100%;
+}
+
+.state {
+  width: 100%;
+  height: 100px;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+h4 {
+  font-size: 1.1rem;
+  line-height: 1.75rem;
+  padding-top: 1.25rem;
+  color: $color-white;
+}

assets/styles/pages/dashboard/index.scss

@@ -0,0 +1,165 @@
+.cards {
+  @media (max-width: 1500px) {
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  }
+
+  @media (max-width: 660px) {
+    grid-template-columns: 1fr;
+
+    .card .card_content {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+
+      p {
+        margin: 0 !important;
+      }
+
+      svg {
+        width: 20px;
+        height: 20px;
+      }
+    }
+  }
+}
+
+@media (max-width: 660px) {
+  .alert_content {
+    flex-direction: column;
+
+    span {
+      -webkit-line-clamp: 2 !important;
+      margin-bottom: 1rem !important;
+    }
+  }
+}
+
+.alertCenter {
+  background-color: $color-wrap;
+
+  .alert_none {
+    padding-top: 3.5rem;
+    padding-bottom: 3.5rem;
+    margin-left: auto;
+    margin-right: auto;
+    width: fit-content;
+    color: $color-gray;
+    font-size: 0.85rem;
+  }
+
+  .alert {
+    padding: 15px 20px !important;
+    min-width: 0px;
+
+    &.card_emerg {
+      background-color: $color-danger-bg;
+    }
+  }
+
+  .alert_content {
+    min-width: 0px;
+    width: 100%;
+    display: block !important;
+
+    .alert_title {
+      font-weight: 700;
+
+      h4 {
+        overflow: hidden;
+      }
+
+      svg {
+        flex-shrink: 0;
+        margin-right: 0.3rem;
+      }
+
+      &.title_alert {
+        svg {
+          width: 1.5rem;
+          fill: $color-gray;
+        }
+      }
+
+      &.title_success {
+        svg {
+          width: 1.5rem;
+          fill: $color-success;
+        }
+
+        h4 {
+          color: $color-success-text;
+        }
+      }
+
+      &.title_warning {
+        svg {
+          width: 1.6rem;
+          fill: $color-warning;
+        }
+
+        h4 {
+          color: $color-warning-text;
+        }
+      }
+
+      &.title_danger,
+      &.title_emerg {
+        svg {
+          width: 1.6rem;
+          fill: $color-danger;
+          filter: drop-shadow(0px 0px 10px $color-danger);
+        }
+
+        h4 {
+          color: $color-danger-text;
+        }
+      }
+    }
+
+    span {
+      color: $color-gray;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 4;
+      -webkit-box-orient: vertical;
+      word-wrap: break-word;
+      word-break: keep-all;
+      font-size: 1rem;
+      line-height: 1.3em;
+      margin-bottom: 2rem;
+    }
+
+    .alert_btn {
+      font-size: 13px;
+      padding: 10px;
+      background: $color-bg;
+      border-radius: 10px;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+
+      &:hover {
+        background: darken($color-bg, 3%);
+      }
+    }
+  }
+
+  .foldBtn {
+    transition: background 0.06s;
+
+    color: $color-gray;
+    fill: $color-gray;
+
+    &:hover {
+      background: $color-bg;
+    }
+  }
+}
+
+.userGraph {
+  height: 400px;
+  background-color: $color-wrap;
+}

components/AppHeader.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 const { isMobile, isShowNav } = useMediaCheck()
-const { currentPathWithoutLocale, pathWithLocale, isCurrentPathCallback } = usePathUtils()
-const accountStore = useAccountStore()
+const { currentPathWithoutLocale, pathWithLocale, isCallbackPath } = usePathUtils()
 
 const isShowMenu = useState<boolean>('isShowMenu', () => false)
 const userData = useState<UserData>('userData', () => {
@@ -24,7 +23,7 @@ onClickOutside(navEl, closeNav)
 onClickOutside(userEl, closeMenu)
 
 onMounted(async () => {
-  if (isCurrentPathCallback.value || !accountStore.accessToken) return
+  if (isCallbackPath.value || !getAccessToken()) return
 
   try {
     userData.value = await getDiscordAPIUserData()
@@ -129,11 +128,6 @@ onMounted(async () => {
             <NuxtLink :to="`/vi${currentPathWithoutLocale}`" class="dropdownMenu vi" v-if="$i18n.locale != 'vi'">
               Tiếng Việt
             </NuxtLink>
-
-            <!-- <hr class="mx-2.5 my-2 border-zinc-800" />
-            <div class="dropdownMenu">메뉴1</div>
-            <div class="dropdownMenu">메뉴2</div>
-            <div class="dropdownMenu">메뉴3</div> -->
           </div>
         </transition>
       </div>