From 68f3f0f3810e1e1b17f804fb0ae830628d95af6a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tran=20Van=20Dung/=28Tran=20Van=20Dung=29/=ED=98=84?=
 =?UTF-8?q?=EC=9E=A5=EB=8C=80=EB=A6=AC=EC=9D=B8/SK?= <20074470@skcc.com>
Date: Wed, 13 Aug 2025 08:18:27 +0700
Subject: [PATCH 1/4] fix bugs

---
 assets/scss/common.scss                |  23 ++-
 components/icons/anticonAppStore.vue   |   7 +
 components/icons/anticonBulb.vue       |   6 +
 components/icons/anticonDesktop.vue    |   6 +
 components/icons/anticonDrag.vue       |   6 +
 components/icons/anticonFileText.vue   |   6 +
 components/icons/anticonLineChart.vue  |   6 +
 components/icons/anticonMessage.vue    |   6 +
 components/icons/anticonNoteExpand.vue |   6 +
 components/icons/anticonPieChart.vue   |   6 +
 components/icons/anticonSearch.vue     |   6 +
 components/icons/anticonSetting.vue    |   6 +
 layouts/default.vue                    | 197 ++++++++++++++++++++++---
 plugins/vuetify.js                     |  32 ++++
 14 files changed, 295 insertions(+), 24 deletions(-)
 create mode 100644 components/icons/anticonAppStore.vue
 create mode 100644 components/icons/anticonBulb.vue
 create mode 100644 components/icons/anticonDesktop.vue
 create mode 100644 components/icons/anticonDrag.vue
 create mode 100644 components/icons/anticonFileText.vue
 create mode 100644 components/icons/anticonLineChart.vue
 create mode 100644 components/icons/anticonMessage.vue
 create mode 100644 components/icons/anticonNoteExpand.vue
 create mode 100644 components/icons/anticonPieChart.vue
 create mode 100644 components/icons/anticonSearch.vue
 create mode 100644 components/icons/anticonSetting.vue

diff --git a/assets/scss/common.scss b/assets/scss/common.scss
index ae9b134..7c26c91 100644
--- a/assets/scss/common.scss
+++ b/assets/scss/common.scss
@@ -309,6 +309,7 @@ a {
       & .v-icon.mdi-chevron-down {
         margin-left: auto;
         animation-duration: 0.5s;
+        font-size: 12px;
       }
     }
   }
@@ -680,15 +681,18 @@ a {
             background-color: map-deep-get($config, #{$theme}, "v-calendar-weekday-border-color" );
           }
           .v-treeview-node__content {
+            .v-icon,
             .v-treeview-node__label {
               color: map-deep-get($config, #{$theme}, "tui-grid-title-color");
             }
+            
+            .anticon.anticon-down {
+              color: map-deep-get($config, #{$theme}, "icon-datepicker-color");
+            }
           }
-
         }
 
         &[aria-expanded="true"]{
-
           // Level 1
           &>.v-treeview-node__root {
             background-color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-bg" );
@@ -705,9 +709,11 @@ a {
               }
 
               .v-icon:first-child,
-              .v-icon:first-child::before {
+              .v-icon:first-child::before,
+              .anticon.anticon-down {
                 color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border" );
               }
+              
             }
           }
 
@@ -715,10 +721,19 @@ a {
             // Level 2
             .v-treeview-node__root {
               color: map-deep-get($config, #{$theme}, "v-treeview-node-root-label-color");
+
               &:hover {
                 background-color: map-deep-get($config, #{$theme}, "v-calendar-weekday-backgroundColor");
               }
+              
+              .v-treeview-node__content {
+                .v-icon,
+                .v-icon::before {
+                  color: map-deep-get($config, #{$theme}, "icon-datepicker-color");
+                }
+              }
             }
+
             &>[aria-expanded="true"] >.v-treeview-node__root,
             .v-treeview-node__root.v-treeview-node--active {
               background-color: map-deep-get($config, #{$theme}, "v-calendar-day-in-not-month-color" );
@@ -729,7 +744,7 @@ a {
 
                 .v-icon,
                 .v-icon::before,
-                .anticon {
+                .anticon.anticon-down {
                   color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border" );
                 }
               }
diff --git a/components/icons/anticonAppStore.vue b/components/icons/anticonAppStore.vue
new file mode 100644
index 0000000..a60300f
--- /dev/null
+++ b/components/icons/anticonAppStore.vue
@@ -0,0 +1,7 @@
+<template>
+    <!-- Custom SVG icon -->
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M7.143 1.42969H1.71443C1.55728 1.42969 1.42871 1.55826 1.42871 1.7154V7.14397C1.42871 7.30112 1.55728 7.42969 1.71443 7.42969H7.143C7.30014 7.42969 7.42871 7.30112 7.42871 7.14397V1.7154C7.42871 1.55826 7.30014 1.42969 7.143 1.42969ZM6.21443 6.2154H2.643V2.64397H6.21443V6.2154ZM14.2859 1.42969H8.85728C8.70014 1.42969 8.57157 1.55826 8.57157 1.7154V7.14397C8.57157 7.30112 8.70014 7.42969 8.85728 7.42969H14.2859C14.443 7.42969 14.5716 7.30112 14.5716 7.14397V1.7154C14.5716 1.55826 14.443 1.42969 14.2859 1.42969ZM13.3573 6.2154H9.78586V2.64397H13.3573V6.2154ZM7.143 8.57255H1.71443C1.55728 8.57255 1.42871 8.70112 1.42871 8.85826V14.2868C1.42871 14.444 1.55728 14.5725 1.71443 14.5725H7.143C7.30014 14.5725 7.42871 14.444 7.42871 14.2868V8.85826C7.42871 8.70112 7.30014 8.57255 7.143 8.57255ZM6.21443 13.3583H2.643V9.78683H6.21443V13.3583ZM14.2859 8.57255H8.85728C8.70014 8.57255 8.57157 8.70112 8.57157 8.85826V14.2868C8.57157 14.444 8.70014 14.5725 8.85728 14.5725H14.2859C14.443 14.5725 14.5716 14.444 14.5716 14.2868V8.85826C14.5716 8.70112 14.443 8.57255 14.2859 8.57255ZM13.3573 13.3583H9.78586V9.78683H13.3573V13.3583Z" 
+            fill="currentColor" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/components/icons/anticonBulb.vue b/components/icons/anticonBulb.vue
new file mode 100644
index 0000000..be7c129
--- /dev/null
+++ b/components/icons/anticonBulb.vue
@@ -0,0 +1,6 @@
+<template>
+    <!-- Custom SVG icon -->
+    <svg width="12" height="16" viewBox="0 0 12 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M8.14258 14.7143H3.85686C3.77829 14.7143 3.71401 14.7786 3.71401 14.8571V15.4286C3.71401 15.7446 3.96936 16 4.28544 16H7.71401C8.03008 16 8.28544 15.7446 8.28544 15.4286V14.8571C8.28544 14.7786 8.22115 14.7143 8.14258 14.7143ZM5.99972 0C2.76579 0 0.142578 2.62321 0.142578 5.85714C0.142578 8.025 1.32115 9.91786 3.07115 10.9304V13C3.07115 13.3161 3.32651 13.5714 3.64258 13.5714H8.35686C8.67294 13.5714 8.92829 13.3161 8.92829 13V10.9304C10.6783 9.91786 11.8569 8.025 11.8569 5.85714C11.8569 2.62321 9.23365 0 5.99972 0ZM8.28365 9.81786L7.64258 10.1893V12.2857H4.35686V10.1893L3.71579 9.81786C2.31044 9.00536 1.42829 7.50893 1.42829 5.85714C1.42829 3.33214 3.47472 1.28571 5.99972 1.28571C8.52472 1.28571 10.5711 3.33214 10.5711 5.85714C10.5711 7.50893 9.68901 9.00536 8.28365 9.81786Z" fill="currentColor" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/components/icons/anticonDesktop.vue b/components/icons/anticonDesktop.vue
new file mode 100644
index 0000000..8434eae
--- /dev/null
+++ b/components/icons/anticonDesktop.vue
@@ -0,0 +1,6 @@
+<template>
+    <!-- Custom SVG icon -->
+    <svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M15.4286 0.359253H0.571429C0.255357 0.359253 0 0.61461 0 0.930682V9.78782C0 10.1039 0.255357 10.3593 0.571429 10.3593H7.35714V12.3593H4.28571C4.12857 12.3593 4 12.4878 4 12.645V13.5021C4 13.5807 4.06429 13.645 4.14286 13.645H11.8571C11.9357 13.645 12 13.5807 12 13.5021V12.645C12 12.4878 11.8714 12.3593 11.7143 12.3593H8.64286V10.3593H15.4286C15.7446 10.3593 16 10.1039 16 9.78782V0.930682C16 0.61461 15.7446 0.359253 15.4286 0.359253ZM14.7143 9.07354H1.28571V1.64497H14.7143V9.07354Z" fill="currentColor" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/components/icons/anticonDrag.vue b/components/icons/anticonDrag.vue
new file mode 100644
index 0000000..bcc46cc
--- /dev/null
+++ b/components/icons/anticonDrag.vue
@@ -0,0 +1,6 @@
+<template>
+    <!-- Custom SVG icon -->
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M15.0943 7.89787L12.8157 6.09966C12.7967 6.08466 12.7738 6.07534 12.7496 6.07276C12.7255 6.07018 12.7012 6.07444 12.6794 6.08507C12.6576 6.09569 12.6392 6.11224 12.6264 6.13282C12.6135 6.15341 12.6067 6.17719 12.6068 6.20144V7.3568H8.64251V3.39251H9.79966C9.9068 3.39251 9.96751 3.26751 9.90144 3.18359L8.10144 0.905014C8.08953 0.889595 8.07424 0.877112 8.05675 0.868523C8.03926 0.859935 8.02003 0.855469 8.00055 0.855469C7.98106 0.855469 7.96184 0.859935 7.94435 0.868523C7.92686 0.877112 7.91157 0.889595 7.89966 0.905014L6.09966 3.18359C6.08466 3.20265 6.07534 3.22555 6.07276 3.24967C6.07018 3.27379 6.07444 3.29815 6.08507 3.31995C6.09569 3.34176 6.11224 3.36013 6.13282 3.37296C6.15341 3.3858 6.17719 3.39257 6.20144 3.39251H7.3568V7.3568H3.39251V6.19966C3.39251 6.09252 3.26751 6.0318 3.18359 6.09787L0.905014 7.89787C0.889595 7.90979 0.877112 7.92508 0.868523 7.94256C0.859935 7.96005 0.855469 7.97928 0.855469 7.99877C0.855469 8.01825 0.859935 8.03748 0.868523 8.05497C0.877112 8.07246 0.889595 8.08774 0.905014 8.09966L3.1818 9.89966C3.26573 9.96573 3.39073 9.9068 3.39073 9.79787V8.64252H7.35501V12.6068H6.19787C6.09073 12.6068 6.03001 12.7318 6.09609 12.8157L7.89609 15.0925C7.94787 15.1586 8.04787 15.1586 8.09787 15.0925L9.89787 12.8157C9.96394 12.7318 9.90501 12.6068 9.79608 12.6068H8.64251V8.64252H12.6068V9.79966C12.6068 9.9068 12.7318 9.96752 12.8157 9.90144L15.0925 8.10144C15.1079 8.08937 15.1203 8.07398 15.129 8.05644C15.1376 8.03889 15.1422 8.01964 15.1423 8.00009C15.1425 7.98054 15.1383 7.9612 15.13 7.94351C15.1216 7.92582 15.1095 7.91022 15.0943 7.89787Z" fill="currentColor"/>
+    </svg>
+</template>
\ No newline at end of file
diff --git a/components/icons/anticonFileText.vue b/components/icons/anticonFileText.vue
new file mode 100644
index 0000000..3de4609
--- /dev/null
+++ b/components/icons/anticonFileText.vue
@@ -0,0 +1,6 @@
+<template>
+    <!-- Custom SVG icon -->
+    <svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M13.1174 4.01071L9.27458 0.167857C9.16744 0.0607143 9.0228 0 8.87101 0H1.2853C0.969224 0 0.713867 0.255357 0.713867 0.571429V15.4286C0.713867 15.7446 0.969224 16 1.2853 16H12.7139C13.0299 16 13.2853 15.7446 13.2853 15.4286V4.41607C13.2853 4.26429 13.2246 4.11786 13.1174 4.01071ZM11.9674 4.67857H8.60673V1.31786L11.9674 4.67857ZM11.9996 14.7143H1.99958V1.28571H7.39244V5.14286C7.39244 5.34177 7.47146 5.53254 7.61211 5.67319C7.75276 5.81384 7.94353 5.89286 8.14244 5.89286H11.9996V14.7143ZM6.85673 9.89286H3.57101C3.49244 9.89286 3.42815 9.95714 3.42815 10.0357V10.8929C3.42815 10.9714 3.49244 11.0357 3.57101 11.0357H6.85673C6.9353 11.0357 6.99958 10.9714 6.99958 10.8929V10.0357C6.99958 9.95714 6.9353 9.89286 6.85673 9.89286ZM3.42815 7.60714V8.46429C3.42815 8.54286 3.49244 8.60714 3.57101 8.60714H10.4282C10.5067 8.60714 10.571 8.54286 10.571 8.46429V7.60714C10.571 7.52857 10.5067 7.46429 10.4282 7.46429H3.57101C3.49244 7.46429 3.42815 7.52857 3.42815 7.60714Z" fill="currentColor" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/components/icons/anticonLineChart.vue b/components/icons/anticonLineChart.vue
new file mode 100644
index 0000000..f74ac70
--- /dev/null
+++ b/components/icons/anticonLineChart.vue
@@ -0,0 +1,6 @@
+<template>
+    <!-- Custom SVG icon -->
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M13.714 12.0006H1.42829V0.857701C1.42829 0.779129 1.36401 0.714844 1.28544 0.714844H0.285435C0.206864 0.714844 0.142578 0.779129 0.142578 0.857701V13.1434C0.142578 13.222 0.206864 13.2863 0.285435 13.2863H13.714C13.7926 13.2863 13.8569 13.222 13.8569 13.1434V12.1434C13.8569 12.0648 13.7926 12.0006 13.714 12.0006ZM3.31758 9.2452C3.37294 9.30056 3.46222 9.30056 3.51936 9.2452L5.98901 6.78806L8.26758 9.08092C8.32294 9.13627 8.41401 9.13627 8.46937 9.08092L13.3872 4.16484C13.4426 4.10949 13.4426 4.01842 13.3872 3.96306L12.6801 3.25592C12.6532 3.22933 12.617 3.21442 12.5792 3.21442C12.5414 3.21442 12.5051 3.22933 12.4783 3.25592L8.37115 7.36127L6.09615 5.07199C6.0693 5.0454 6.03304 5.03049 5.99526 5.03049C5.95747 5.03049 5.92122 5.0454 5.89437 5.07199L2.61222 8.33449C2.58564 8.36134 2.57072 8.39759 2.57072 8.43538C2.57072 8.47316 2.58564 8.50942 2.61222 8.53627L3.31758 9.2452Z" fill="currentColor" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/components/icons/anticonMessage.vue b/components/icons/anticonMessage.vue
new file mode 100644
index 0000000..a2bd9fa
--- /dev/null
+++ b/components/icons/anticonMessage.vue
@@ -0,0 +1,6 @@
+<template>
+    <!-- Custom SVG icon -->
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M7.14296 8C7.14296 8.22733 7.23326 8.44535 7.39401 8.60609C7.55475 8.76684 7.77277 8.85714 8.0001 8.85714C8.22743 8.85714 8.44545 8.76684 8.60619 8.60609C8.76694 8.44535 8.85724 8.22733 8.85724 8C8.85724 7.77267 8.76694 7.55465 8.60619 7.39391C8.44545 7.23316 8.22743 7.14286 8.0001 7.14286C7.77277 7.14286 7.55475 7.23316 7.39401 7.39391C7.23326 7.55465 7.14296 7.77267 7.14296 8ZM10.7144 8C10.7144 8.22733 10.8047 8.44535 10.9654 8.60609C11.1262 8.76684 11.3442 8.85714 11.5715 8.85714C11.7989 8.85714 12.0169 8.76684 12.1776 8.60609C12.3384 8.44535 12.4287 8.22733 12.4287 8C12.4287 7.77267 12.3384 7.55465 12.1776 7.39391C12.0169 7.23316 11.7989 7.14286 11.5715 7.14286C11.3442 7.14286 11.1262 7.23316 10.9654 7.39391C10.8047 7.55465 10.7144 7.77267 10.7144 8ZM3.57153 8C3.57153 8.22733 3.66184 8.44535 3.82258 8.60609C3.98333 8.76684 4.20134 8.85714 4.42867 8.85714C4.656 8.85714 4.87402 8.76684 5.03476 8.60609C5.19551 8.44535 5.28582 8.22733 5.28582 8C5.28582 7.77267 5.19551 7.55465 5.03476 7.39391C4.87402 7.23316 4.656 7.14286 4.42867 7.14286C4.20134 7.14286 3.98333 7.23316 3.82258 7.39391C3.66184 7.55465 3.57153 7.77267 3.57153 8ZM15.3787 4.9C14.9751 3.94107 14.3965 3.08036 13.659 2.34107C12.9267 1.60607 12.0573 1.02182 11.1001 0.621429C10.118 0.208929 9.0751 0 8.0001 0H7.96439C6.88224 0.00535714 5.83403 0.219643 4.84832 0.641071C3.89931 1.04557 3.03807 1.63085 2.3126 2.36429C1.58224 3.10179 1.00903 3.95893 0.612601 4.91429C0.201887 5.90357 -0.00525583 6.95536 0.000101308 8.0375C0.00616068 9.27763 0.299551 10.4995 0.857244 11.6071V14.3214C0.857244 14.5393 0.943787 14.7482 1.09783 14.9023C1.25188 15.0563 1.46082 15.1429 1.67867 15.1429H4.39474C5.50241 15.7006 6.72426 15.9939 7.96439 16H8.00189C9.07153 16 10.109 15.7929 11.0858 15.3875C12.0382 14.9919 12.9043 14.4144 13.6358 13.6875C14.3733 12.9571 14.9537 12.1036 15.359 11.1518C15.7805 10.1661 15.9947 9.11786 16.0001 8.03572C16.0055 6.94821 15.7947 5.89286 15.3787 4.9ZM12.6805 12.7214C11.4287 13.9607 9.76796 14.6429 8.0001 14.6429H7.96974C6.89296 14.6375 5.82332 14.3696 4.87867 13.8661L4.72867 13.7857H2.21439V11.2714L2.13403 11.1214C1.63046 10.1768 1.3626 9.10714 1.35724 8.03036C1.3501 6.25 2.03046 4.57857 3.27867 3.31964C4.5251 2.06071 6.19117 1.36429 7.97153 1.35714H8.00189C8.89474 1.35714 9.76081 1.53036 10.5769 1.87321C11.3733 2.20714 12.0876 2.6875 12.7019 3.30179C13.3144 3.91429 13.7965 4.63036 14.1305 5.42679C14.4769 6.25179 14.6501 7.12679 14.6465 8.03036C14.6358 9.80893 13.9376 11.475 12.6805 12.7214Z" fill="currentColor" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/components/icons/anticonNoteExpand.vue b/components/icons/anticonNoteExpand.vue
new file mode 100644
index 0000000..e5ba547
--- /dev/null
+++ b/components/icons/anticonNoteExpand.vue
@@ -0,0 +1,6 @@
+<template>
+    <!-- Custom SVG icon -->
+    <svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M15.8571 8.78318C15.9357 8.78318 16 8.71889 16 8.64032V7.64032C16 7.56175 15.9357 7.49746 15.8571 7.49746H4.17857C4.05067 7.18077 3.83102 6.90955 3.54782 6.71864C3.26463 6.52772 2.93082 6.42582 2.58929 6.42603C1.64286 6.42603 0.875 7.19389 0.875 8.14032C0.875 9.08675 1.64286 9.8546 2.58929 9.8546C3.30893 9.8546 3.925 9.41175 4.17857 8.78318H6.8625V11.4975C6.8625 12.4832 7.6625 13.2832 8.64821 13.2832H15.8571C15.9357 13.2832 16 13.2189 16 13.1403V12.1403C16 12.0617 15.9357 11.9975 15.8571 11.9975H8.64821C8.37143 11.9975 8.14821 11.7742 8.14821 11.4975V8.78318H15.8571ZM7 3.99746H11.7143V5.75103C11.7143 5.89568 11.8839 5.9796 11.9964 5.88853L15.0768 3.45639C15.1661 3.38675 15.1661 3.25282 15.0768 3.18318L11.9964 0.749247C11.8821 0.658175 11.7143 0.740318 11.7143 0.886747V2.64032H7C6.92143 2.64032 6.85714 2.7046 6.85714 2.78318V3.8546C6.85714 3.93318 6.92143 3.99746 7 3.99746Z" fill="currentColor" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/components/icons/anticonPieChart.vue b/components/icons/anticonPieChart.vue
new file mode 100644
index 0000000..168c95e
--- /dev/null
+++ b/components/icons/anticonPieChart.vue
@@ -0,0 +1,6 @@
+<template>
+    <!-- Custom SVG icon -->
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M14.2854 8.10545H7.89259V1.7126C7.89259 1.63402 7.8283 1.56974 7.74973 1.56974H7.28545C6.34741 1.5682 5.41833 1.75216 4.55165 2.11103C3.68497 2.4699 2.89781 2.99659 2.23545 3.66081C1.58314 4.3111 1.06339 5.08193 0.705089 5.93045C0.332241 6.81052 0.140919 7.75681 0.142589 8.7126C0.141053 9.65063 0.32501 10.5797 0.683878 11.4464C1.04275 12.3131 1.56944 13.1002 2.23366 13.7626C2.88902 14.418 3.6533 14.934 4.5033 15.293C5.38337 15.6658 6.32966 15.8571 7.28545 15.8555C8.22348 15.857 9.15257 15.673 10.0192 15.3142C10.8859 14.9553 11.6731 14.4286 12.3354 13.7644C12.9908 13.109 13.5069 12.3447 13.8658 11.4947C14.2387 10.6147 14.43 9.66838 14.4283 8.7126V8.24831C14.4283 8.16974 14.364 8.10545 14.2854 8.10545ZM11.4587 12.9233C10.9057 13.472 10.2499 13.9061 9.52892 14.2009C8.80791 14.4957 8.03581 14.6453 7.25688 14.6412C5.68366 14.634 4.20509 14.018 3.09259 12.9055C1.97295 11.7858 1.35687 10.2965 1.35687 8.7126C1.35687 7.12867 1.97295 5.63938 3.09259 4.51974C4.06759 3.54474 5.32295 2.9501 6.6783 2.81438V9.31974H13.1837C13.0462 10.6822 12.4462 11.9447 11.4587 12.9233ZM15.8569 7.1126L15.8104 6.60903C15.6587 4.96438 14.9283 3.4126 13.7533 2.24117C12.5775 1.06759 11.0289 0.341284 9.37473 0.187596L8.86938 0.141167C8.78545 0.134025 8.71402 0.19831 8.71402 0.282239V7.14117C8.71402 7.21974 8.7783 7.28402 8.85688 7.28402L15.714 7.26617C15.7979 7.26617 15.864 7.19474 15.8569 7.1126ZM9.92473 6.07331V1.49117C11.0496 1.72661 12.0819 2.2837 12.8962 3.09474C13.7122 3.90902 14.2712 4.94474 14.5033 6.06081L9.92473 6.07331Z" fill="currentColor" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/components/icons/anticonSearch.vue b/components/icons/anticonSearch.vue
new file mode 100644
index 0000000..6f24fc9
--- /dev/null
+++ b/components/icons/anticonSearch.vue
@@ -0,0 +1,6 @@
+<template>
+    <!-- Custom SVG icon -->
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M15.1003 14.1183L10.4628 9.4808C11.1824 8.55045 11.5717 7.41295 11.5717 6.21652C11.5717 4.78438 11.0128 3.44152 10.0021 2.42902C8.99135 1.41652 7.64492 0.859375 6.21456 0.859375C4.78421 0.859375 3.43778 1.4183 2.42706 2.42902C1.41456 3.43973 0.857422 4.78438 0.857422 6.21652C0.857422 7.64688 1.41635 8.9933 2.42706 10.004C3.43778 11.0165 4.78242 11.5737 6.21456 11.5737C7.41099 11.5737 8.54671 11.1844 9.47707 10.4665L14.1146 15.1022C14.1282 15.1158 14.1443 15.1266 14.1621 15.134C14.1799 15.1414 14.1989 15.1452 14.2181 15.1452C14.2374 15.1452 14.2564 15.1414 14.2742 15.134C14.292 15.1266 14.3081 15.1158 14.3217 15.1022L15.1003 14.3254C15.1139 14.3118 15.1247 14.2957 15.132 14.2779C15.1394 14.2602 15.1432 14.2411 15.1432 14.2219C15.1432 14.2026 15.1394 14.1836 15.132 14.1658C15.1247 14.148 15.1139 14.1319 15.1003 14.1183ZM9.04314 9.04509C8.28599 9.80045 7.28242 10.2165 6.21456 10.2165C5.14671 10.2165 4.14314 9.80045 3.38599 9.04509C2.63064 8.28795 2.21456 7.28438 2.21456 6.21652C2.21456 5.14866 2.63064 4.1433 3.38599 3.38795C4.14314 2.63259 5.14671 2.21652 6.21456 2.21652C7.28242 2.21652 8.28778 2.6308 9.04314 3.38795C9.79849 4.14509 10.2146 5.14866 10.2146 6.21652C10.2146 7.28438 9.79849 8.28973 9.04314 9.04509Z" fill="currentColor" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/components/icons/anticonSetting.vue b/components/icons/anticonSetting.vue
new file mode 100644
index 0000000..13cd331
--- /dev/null
+++ b/components/icons/anticonSetting.vue
@@ -0,0 +1,6 @@
+<template>
+    <!-- Custom SVG icon -->
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M15.3712 10.033L14.2016 9.03304C14.257 8.69375 14.2855 8.34732 14.2855 8.00089C14.2855 7.65446 14.257 7.30804 14.2016 6.96875L15.3712 5.96875C15.4595 5.89323 15.5226 5.79264 15.5523 5.68035C15.5819 5.56807 15.5767 5.44942 15.5373 5.34018L15.5212 5.29375C15.1992 4.3938 14.7171 3.55953 14.098 2.83125L14.0659 2.79375C13.9908 2.70545 13.8907 2.64198 13.7788 2.61169C13.6669 2.58141 13.5485 2.58574 13.4391 2.62411L11.9873 3.14018C11.4516 2.70089 10.8534 2.35446 10.207 2.11161L9.92659 0.59375C9.90544 0.47954 9.85004 0.374469 9.76775 0.292496C9.68546 0.210524 9.58017 0.15553 9.46588 0.134821L9.41767 0.125893C8.48731 -0.0419643 7.50874 -0.0419643 6.57838 0.125893L6.53017 0.134821C6.41587 0.15553 6.31059 0.210524 6.2283 0.292496C6.146 0.374469 6.0906 0.47954 6.06945 0.59375L5.78731 2.11875C5.14604 2.36166 4.54886 2.7079 4.01945 3.14375L2.55695 2.62411C2.4476 2.58543 2.32908 2.58095 2.21712 2.61125C2.10516 2.64155 2.00508 2.7052 1.93017 2.79375L1.89802 2.83125C1.27971 3.56004 0.797622 4.39417 0.474808 5.29375L0.458737 5.34018C0.37838 5.56339 0.444451 5.81339 0.624808 5.96875L1.80874 6.97946C1.75338 7.31518 1.72659 7.65804 1.72659 7.99911C1.72659 8.34196 1.75338 8.68482 1.80874 9.01875L0.624808 10.0295C0.536586 10.105 0.473445 10.2056 0.44378 10.3179C0.414115 10.4301 0.419331 10.5488 0.458737 10.658L0.474808 10.7045C0.798023 11.6045 1.27659 12.4348 1.89802 13.167L1.93017 13.2045C2.00526 13.2928 2.10535 13.3562 2.21724 13.3865C2.32913 13.4168 2.44757 13.4125 2.55695 13.3741L4.01945 12.8545C4.55159 13.292 5.14624 13.6384 5.78731 13.8795L6.06945 15.4045C6.0906 15.5187 6.146 15.6237 6.2283 15.7057C6.31059 15.7877 6.41587 15.8427 6.53017 15.8634L6.57838 15.8723C7.51728 16.0411 8.47876 16.0411 9.41767 15.8723L9.46588 15.8634C9.58017 15.8427 9.68546 15.7877 9.76775 15.7057C9.85004 15.6237 9.90544 15.5187 9.92659 15.4045L10.207 13.8866C10.8531 13.6444 11.4547 13.2968 11.9873 12.858L13.4391 13.3741C13.5484 13.4128 13.667 13.4173 13.7789 13.387C13.8909 13.3567 13.991 13.293 14.0659 13.2045L14.098 13.167C14.7194 12.433 15.198 11.6045 15.5212 10.7045L15.5373 10.658C15.6177 10.4384 15.5516 10.1884 15.3712 10.033ZM12.9337 7.17946C12.9784 7.44911 13.0016 7.72589 13.0016 8.00268C13.0016 8.27946 12.9784 8.55625 12.9337 8.82589L12.8159 9.54197L14.1498 10.683C13.9476 11.1489 13.6923 11.5899 13.3891 11.9973L11.732 11.4098L11.1712 11.8705C10.7444 12.2205 10.2695 12.4955 9.75516 12.6884L9.07481 12.9438L8.75516 14.6759C8.25083 14.733 7.74165 14.733 7.23731 14.6759L6.91767 12.9402L6.24267 12.6813C5.73374 12.4884 5.26052 12.2134 4.83731 11.8652L4.27659 11.4027L2.60874 11.9955C2.30517 11.5866 2.05159 11.1455 1.84802 10.6813L3.19624 9.52946L3.08017 8.81518C3.03731 8.54911 3.01409 8.27411 3.01409 8.00268C3.01409 7.72946 3.03552 7.45625 3.08017 7.19018L3.19624 6.47589L1.84802 5.32411C2.04981 4.85804 2.30517 4.41875 2.60874 4.00982L4.27659 4.60268L4.83731 4.14018C5.26052 3.79196 5.73374 3.51696 6.24267 3.32411L6.91945 3.06875L7.23909 1.33304C7.74088 1.27589 8.25338 1.27589 8.75695 1.33304L9.07659 3.06518L9.75695 3.32054C10.2695 3.51339 10.7462 3.78839 11.173 4.13839L11.7337 4.59911L13.3909 4.01161C13.6945 4.42054 13.948 4.86161 14.1516 5.32589L12.8177 6.46696L12.9337 7.17946ZM7.99981 4.68125C6.26409 4.68125 4.85695 6.08839 4.85695 7.82411C4.85695 9.55982 6.26409 10.967 7.99981 10.967C9.73552 10.967 11.1427 9.55982 11.1427 7.82411C11.1427 6.08839 9.73552 4.68125 7.99981 4.68125ZM9.41409 9.23839C9.2286 9.42442 9.00815 9.57194 8.76543 9.67246C8.52271 9.77298 8.26252 9.82452 7.99981 9.82411C7.46588 9.82411 6.96409 9.61518 6.58552 9.23839C6.39949 9.0529 6.25198 8.83245 6.15146 8.58973C6.05094 8.34701 5.9994 8.08682 5.99981 7.82411C5.99981 7.29018 6.20874 6.78839 6.58552 6.40982C6.96409 6.03125 7.46588 5.82411 7.99981 5.82411C8.53374 5.82411 9.03552 6.03125 9.41409 6.40982C9.60012 6.59532 9.74764 6.81577 9.84816 7.05848C9.94868 7.3012 10.0002 7.5614 9.99981 7.82411C9.99981 8.35804 9.79088 8.85982 9.41409 9.23839Z" fill="currentColor" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/layouts/default.vue b/layouts/default.vue
index f803b26..644c9b9 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -98,15 +98,26 @@
                   :items="treevieItems" activatable hoverable color="#3896ff" open-on-click @update:open="openNode">
                   <template slot="label" slot-scope="{ item }">
                     <button :class="{ 'justify-center': miniVariant }" @mouseover="doMouseOver">
-                      <v-icon v-if="item.lvl === 1 && menuIconKeys.includes(item.menuId)"
-                        v-text="menuIconById[item.menuId]" :class="{ 'mr-2': !miniVariant }" size="20"></v-icon>
-                      <v-icon v-else-if="item.lvl === 1 && !menuIconKeys.includes(item.menuId)"
-                        :class="{ 'mr-2': !miniVariant }" size="20">mdi-package-variant-closed</v-icon>
-                      <v-icon v-else-if="item.lvl === 2" :class="{ 'mr-2': !miniVariant }" size="10">
+                      
+                      <v-icon 
+                        v-if="item.lvl === 1 && menuIconKeys.includes(item.menuId)"
+                        :class="{ 'mr-2': !miniVariant }" 
+                        size="14"
+                        v-text="menuIconById[item.menuId]"
+                      ></v-icon>
+                      <v-icon 
+                        v-else-if="item.lvl === 1 && !menuIconKeys.includes(item.menuId)"
+                        :class="{ 'mr-2': !miniVariant }" 
+                        size="14">mdi-package-variant-closed</v-icon>
+                      <v-icon 
+                        v-else-if="item.lvl === 2" :class="{ 'mr-2': !miniVariant }" 
+                        size="8">
                         mdi-checkbox-blank
                       </v-icon>
-                      <v-icon v-else-if="item.lvl >= 3 && item.childeVo.length === 0 && item.url"
-                        :class="miniVariant === false ? 'mr-2' : ''" size="9">
+                      <v-icon 
+                        v-else-if="item.lvl >= 3 && item.childeVo.length === 0 && item.url"
+                        :class="miniVariant === false ? 'mr-2' : ''" 
+                        size="8">
                         $depth3rdBulletDark
                       </v-icon>
                       <span v-if="item.url">
@@ -298,6 +309,7 @@ import ThemeSwitch from "@/components/common/ThemeSwitch";
 import AdminMenu from "@/components/common/AdminMenu";
 import FadeLoader from "vue-spinner/src/FadeLoader.vue";
 import ChangePswdPop from "~/components/common/modal/ChangePswdPop";
+
 export default {
   components: {
     ThemeSwitch,
@@ -318,19 +330,17 @@ export default {
       myPrgmId: null,
       treeValue: [],
       menuIconById: {
-        // MNU0003: 'mdi-chart-line',
-        // MNU0004: 'mdi-alarm-light',
-        // MNU0005: 'mdi-pencil-box-outline',
-        // MNU0006: 'mdi-cog-outline',
-        MNU0002: "mdi-monitor",
-        MNU0091: "mdi-chart-box",
-        MNU0102: "mdi-human-male-board-poll",
-        MNU0103: "mdi-file-chart-outline",
-        MNU0104: "mdi-chart-sankey-variant",
-        MNU0106: "mdi-database-edit-outline",
-        MNU0105: "mdi-chart-bell-curve",
-        MNU0006: "mdi-bulletin-board",
-        MNU0007: "mdi-cog",
+        MNU0110: "$anticonAppStore",
+        MNU0002: "$anticonDesktop",
+        MNU0003: "$anticonDrag",
+        MNU0091: "$anticonLineChart",
+        MNU0102: "$anticonBulb",
+        MNU0103: "$anticonFileText",
+        MNU0104: "$anticonNoteExpand",
+        MNU0106: "$anticonPieChart",
+        MNU0105: "$anticonSearch",
+        MNU0006: "$anticonMessage",
+        MNU0007: "$anticonSetting",
       },
       isLoading: false,
       loadingStackCnt: 0,
@@ -846,4 +856,151 @@ export default {
   top: 50%;
   left: 50%;
 }
+
+// @each $theme in dark, light {
+//   @include theme($theme);
+//   .v-application.#{$theme}-mode {
+//     ::v-deep {
+
+//       .v-treeview {
+//         .v-treeview-node+.v-treeview-node {
+//           margin-top: 2px;
+//         }
+  
+//         .v-treeview-node__root+.v-treeview-node__children {
+//           margin-top: 2px;
+//         }
+  
+//         &>.v-treeview-node {
+//           .v-treeview-node__root {
+//             border-radius: 8px;
+//             &:hover {
+//               background-color: map-deep-get($config, #{$theme}, "v-calendar-weekday-border-color" );
+//             }
+//             .v-treeview-node__content {
+//               .v-icon,
+//               .v-treeview-node__label {
+//                 color: map-deep-get($config, #{$theme}, "tui-grid-title-color");
+//               }
+              
+//               .anticon.anticon-down {
+//                 color: map-deep-get($config, #{$theme}, "icon-datepicker-color");
+//               }
+//             }
+//           }
+  
+//           &[aria-expanded="true"]{
+//             // Level 1
+//             &>.v-treeview-node__root {
+//               background-color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-bg" );
+//               border: 1px solid map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border" );
+//               color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border");
+  
+//               &:before {
+//                 background-color: map-deep-get($config, #{$theme}, "v-treeview-node-subroot-backgroundColor");
+//               }
+  
+//               .v-treeview-node__content {
+//                 .v-treeview-node__label {
+//                   color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border");
+//                 }
+  
+//                 .v-icon:first-child,
+//                 .v-icon:first-child::before,
+//                 .anticon.anticon-down {
+//                   color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border" );
+//                 }
+                
+//               }
+//             }
+  
+//             &>.v-treeview-node__children {
+//               // Level 2
+//               .v-treeview-node__root {
+//                 color: map-deep-get($config, #{$theme}, "v-treeview-node-root-label-color");
+
+//                 &:hover {
+//                   background-color: map-deep-get($config, #{$theme}, "v-calendar-weekday-backgroundColor");
+//                 }
+                
+//                 .v-treeview-node__content {
+//                   .v-icon,
+//                   .v-icon::before {
+//                     color: map-deep-get($config, #{$theme}, "icon-datepicker-color");
+//                   }
+//                 }
+//               }
+
+//               &>[aria-expanded="true"] >.v-treeview-node__root,
+//               .v-treeview-node__root.v-treeview-node--active {
+//                 background-color: map-deep-get($config, #{$theme}, "v-calendar-day-in-not-month-color" );
+//                 .v-treeview-node__content {
+//                   .v-treeview-node__label {
+//                     color: map-deep-get($config, #{$theme}, "card-title-color");
+//                   }
+  
+//                   .v-icon,
+//                   .v-icon::before,
+//                   .anticon.anticon-down {
+//                     color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border" );
+//                   }
+//                 }
+//               }
+              
+//               // Level 3
+//               .v-treeview-node__children {
+//                 .v-treeview-node {
+//                   >.v-treeview-node__root {
+//                     .v-treeview-node__content {
+//                       .v-treeview-node__label {
+//                         color: map-deep-get($config, #{$theme}, "card-default-color");
+//                       }
+//                     }
+  
+//                     *:hover,
+//                     :hover {
+//                       border-width: 0;
+//                     }
+  
+//                     &:hover {
+//                       border: 1px solid  map-deep-get($config, #{$theme}, "v-input-textarea-border");
+//                       border-radius: 8px;
+//                       background-color: rgba(0, 0, 0, 0);
+//                       .v-treeview-node__content {
+//                         .v-treeview-node__label {
+//                           color: map-deep-get($config, #{$theme}, "tui-grid-title-color");
+//                         }
+//                       }
+  
+//                     }
+  
+//                     &.v-treeview-node--active {
+//                       // color: map-deep-get($config, #{$theme}, "card-title-color");
+//                       background-color: rgba(0, 0, 0, 0);
+//                       .v-treeview-node__content {
+//                         .v-treeview-node__label {
+//                           color: map-deep-get($config, #{$theme}, "tui-grid-title-color");
+//                         }
+        
+//                         .v-icon,
+//                         .v-icon::before,
+//                         .anticon {
+//                           color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border" );
+//                         }
+//                       }
+//                     }
+  
+//                   }
+//                 }
+  
+//               }
+  
+//             }
+//           }
+//         }
+//       }
+
+//     }
+//   }
+// }
 </style>
diff --git a/plugins/vuetify.js b/plugins/vuetify.js
index 408442c..b6cdc06 100644
--- a/plugins/vuetify.js
+++ b/plugins/vuetify.js
@@ -16,7 +16,38 @@ import 'material-design-icons-iconfont/dist/material-design-icons.css';
 import Vue from 'vue';
 import Vuetify from 'vuetify/lib';
 
+import anticonAppStore from '~/components/icons/anticonAppStore';
+import anticonBulb from '~/components/icons/anticonBulb';
+import anticonDesktop from '~/components/icons/anticonDesktop';
+import anticonDrag from '~/components/icons/anticonDrag';
+import anticonFileText from '~/components/icons/anticonFileText';
+import anticonLineChart from '~/components/icons/anticonLineChart';
+import anticonMessage from '~/components/icons/anticonMessage';
+import anticonNoteExpand from '~/components/icons/anticonNoteExpand';
+import anticonPieChart from '~/components/icons/anticonPieChart';
+import anticonSearch from '~/components/icons/anticonSearch';
+import anticonSetting from '~/components/icons/anticonSetting';
 
+const anticons = {
+	anticonAppStore,
+	anticonBulb,
+	anticonDesktop,
+	anticonDrag,
+	anticonFileText,
+	anticonLineChart,
+	anticonMessage,
+	anticonNoteExpand,
+	anticonPieChart,
+	anticonSearch,
+	anticonSetting,
+};
+
+const anticonVal = {};
+Object.keys(anticons).forEach(key => {
+	anticonVal[`${key}`] = {
+		component: anticons[key]
+	}
+});
 
 Vue.use(Vuetify);
 
@@ -77,6 +108,7 @@ export default new Vuetify({
 			icoExpandAlt: {
 				component: icoExpandAlt,
 			},
+			...anticonVal,
 		},
 	},
 });
-- 
2.50.1.windows.1


From de99b30485620ff1d5cbd5b71fcbd6dccce76954 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tran=20Van=20Dung/=28Tran=20Van=20Dung=29/=ED=98=84?=
 =?UTF-8?q?=EC=9E=A5=EB=8C=80=EB=A6=AC=EC=9D=B8/SK?= <20074470@skcc.com>
Date: Wed, 13 Aug 2025 11:43:43 +0700
Subject: [PATCH 2/4] fix bugs css menu

---
 assets/scss/common.scss | 403 +------------------------------------
 assets/scss/layout.scss | 433 ++++++++++++++++++++++++++++++++++++++++
 layouts/default.vue     | 174 +---------------
 3 files changed, 446 insertions(+), 564 deletions(-)
 create mode 100644 assets/scss/layout.scss

diff --git a/assets/scss/common.scss b/assets/scss/common.scss
index 7c26c91..6cd1e26 100644
--- a/assets/scss/common.scss
+++ b/assets/scss/common.scss
@@ -128,220 +128,6 @@ a {
   background: #383f5d;
 }
 
-// router-tab header
-.router-tab {
-  height: 100%;
-
-  &__header {
-    align-items: flex-end;
-    height: 52px;
-    margin: -5px -5px 0;
-    padding: 0 20px;
-    box-sizing: border-box;
-    border-bottom: none !important;
-  }
-
-  &-page {
-    height: 100%;
-  }
-
-  & .router-tab__container {
-    overflow-y: auto;
-    height: calc(100vh - 105px);
-    max-height: calc(100vh - 105px);
-    padding: 20px;
-  }
-
-  .router-tab__slot-end {
-    align-self: center;
-    display: flex;
-    align-items: center;
-
-    >* {
-      flex: none;
-      margin-right: 6px;
-
-      &:last-child {
-        margin-right: 0;
-      }
-    }
-
-    .v-menu+.v-btn {
-      padding: 0 3px;
-    }
-
-    .v-btn {
-      border-radius: 4px;
-    }
-  }
-
-  .router-tab__nav {
-    padding-left: 0;
-  }
-
-  .router-tab__scroll {
-    height: 46px;
-  }
-
-  .router-tab__item {
-    height: 46px;
-    padding: 0 !important;
-
-    &:first-child {
-      border-left: none
-    }
-
-    &>span {
-      font-size: 14px;
-    }
-
-    &.is-active {
-      border-bottom: 2px solid;
-
-      &>span {
-        font-weight: 400;
-      }
-    }
-
-    &+.router-tab__item {
-      margin-left: 16px;
-    }
-
-    border:none;
-  }
-
-}
-
-// v-navigation-drawer (sidebar)
-.v-navigation-drawer {
-  box-shadow: none; // 0 0 10px 0 rgba(0, 0, 0, 0.15);
-
-  &--fixed {
-    z-index: 20;
-  }
-
-  .home {
-    display: block;
-    line-height: 0;
-  }
-
-  &__border {
-    display: none;
-  }
-
-  &__append {
-    padding: 0 17px;
-    margin: 0 0 26px;
-
-    >p {
-      margin-bottom: 0;
-    }
-  }
-
-  .v-treeview {
-    padding: 0 10px;
-    box-sizing: border-box;
-
-    .v-treeview-node__level {
-      width: 9px;
-    }
-
-    >.v-treeview-node {
-      margin-top: 10px;
-
-      &:first-child {
-        margin-top: 0;
-      }
-
-      >.v-treeview-node__root {
-        min-height: 44px !important;
-      }
-    }
-
-    .v-treeview-node {
-      .v-treeview-node__toggle {
-        display: none !important;
-      }
-
-      &>.v-treeview-node__root:before {
-        border-radius: 6px;
-        z-index: -1;
-      }
-
-      &>.v-treeview-node__root:hover:before {
-        opacity: 0 !important;
-      }
-
-      .v-treeview-node__children {
-        .v-treeview-node__label {
-          >button>span {
-            font-size: 0.875rem;
-          }
-        }
-      }
-    }
-
-    .v-treeview-node--click[aria-expanded="true"] {
-      &>.v-treeview-node__root:before {
-        opacity: 0 !important;
-      }
-    }
-
-    .v-treeview-node[aria-expanded="true"] {
-      &>.v-treeview-node__root>.v-treeview-node__content
-      >.v-treeview-node__label>button {
-        >.anticon,
-        >.v-icon.mdi-chevron-down {
-          transform: rotate(-180deg);
-        }
-      }
-    }
-
-    .v-treeview-node__label {
-      &>button {
-        width: 100%;
-        display: flex;
-        align-items: center;
-        // justify-content: center;
-      }
-
-      & .anticon,
-      & .v-icon.mdi-chevron-down {
-        margin-left: auto;
-        animation-duration: 0.5s;
-        font-size: 12px;
-      }
-    }
-  }
-
-  .v-treeview-node--active {
-    &:before {
-      opacity: 0 !important;
-    }
-  }
-
-  &.v-navigation-drawer--mini-variant {
-    .home {
-      display: none;
-    }
-
-    .v-treeview-node__content {
-      margin-left: 0;
-    }
-
-    .v-treeview-node__content span:not(.v-icon),
-    .v-treeview-node__root>button,
-    .v-treeview-node__level,
-    .v-treeview-node__content .v-icon.mdi-chevron-down,
-    .v-treeview-node__content .anticon {
-      display: none;
-    }
-
-    .v-navigation-drawer__append {
-      display: none;
-    }
-  }
-}
 
 .chart {
   height: 100%;
@@ -453,10 +239,6 @@ a {
       gap: 8px;
     }
 
-    .v-navigation-drawer {
-      background: map-deep-get($config, #{$theme}, "menu-bg-color");
-    }
-
     .v-window__container {
       background: map-deep-get($config, #{$theme}, "card-default-backgroundColor");
     }
@@ -467,51 +249,19 @@ a {
       }
     }
 
-    ::-webkit-scrollbar {
-      width: 4px;
-      border-radius: 3px;
-    }
-
-    ::-webkit-scrollbar-track {
-      background-color: map-deep-get($config, #{$theme}, "scrollbar-track");
-    }
-
-    ::-webkit-scrollbar-thumb {
-      width: 4px;
-      border-radius: 3px;
-      background-color: map-deep-get($config, #{$theme}, "scrollbar-thumb");
-      background-clip: content-box;
-    }
-
     .search-box-label {
       color: map-deep-get($config, #{$theme}, "v-select-label-color");
     }
 
-    .header {
-      background-color: map-deep-get($config, #{$theme}, "header-backgroud");
-      border-bottom: 1px solid map-deep-get($config, #{$theme}, "v-header-border");
-    }
+    // .header {
+    //   background-color: map-deep-get($config, #{$theme}, "header-backgroud");
+    //   border-bottom: 1px solid map-deep-get($config, #{$theme}, "v-header-border");
+    // }
 
     .custom-chart{
       border: 1px solid map-deep-get($config, #{$theme}, "v-chart-border");
     }
 
-    .btn-header {
-      background-color: map-deep-get($config, #{$theme}, "v-btn-header-background");
-      border:1px solid map-deep-get($config, #{$theme}, "v-btn-header-border");
-      color: map-deep-get($config, #{$theme}, "v-btn-header-text");
-    }
-
-    .container--fluid {
-      background-color: map-deep-get($config, #{$theme}, "container-fluid");
-
-      .menu-container {
-        height:calc(100vh - 60px);
-        overflow-y: auto;
-        border-right: 1px solid map-deep-get($config, #{$theme}, "v-sidebar-border") ;
-      }
-    }
-
     .v-icon {
       &.icon-orange {
         svg {
@@ -533,7 +283,6 @@ a {
 
       }
 
-
       &.custom-chevron-down {
 
         fill:map-deep-get($config,
@@ -623,12 +372,6 @@ a {
       }
     }
 
-    .v-navigation-drawer__append {
-      >p {
-        color: map-deep-get($config, #{$theme}, "v-banner-border-color" ) !important;
-      }
-    }
-
     .border-bottom-1 {
       border-bottom: 1px solid map-deep-get($config, #{$theme}, "border-color");
     }
@@ -665,144 +408,6 @@ a {
       height: 282px;
     }
 
-    .v-treeview {
-      .v-treeview-node+.v-treeview-node {
-        margin-top: 2px;
-      }
-
-      .v-treeview-node__root+.v-treeview-node__children {
-        margin-top: 2px;
-      }
-
-      &>.v-treeview-node {
-        .v-treeview-node__root {
-          border-radius: 8px;
-          &:hover {
-            background-color: map-deep-get($config, #{$theme}, "v-calendar-weekday-border-color" );
-          }
-          .v-treeview-node__content {
-            .v-icon,
-            .v-treeview-node__label {
-              color: map-deep-get($config, #{$theme}, "tui-grid-title-color");
-            }
-            
-            .anticon.anticon-down {
-              color: map-deep-get($config, #{$theme}, "icon-datepicker-color");
-            }
-          }
-        }
-
-        &[aria-expanded="true"]{
-          // Level 1
-          &>.v-treeview-node__root {
-            background-color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-bg" );
-            border: 1px solid map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border" );
-            color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border");
-
-            &:before {
-              background-color: map-deep-get($config, #{$theme}, "v-treeview-node-subroot-backgroundColor");
-            }
-
-            .v-treeview-node__content {
-              .v-treeview-node__label {
-                color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border");
-              }
-
-              .v-icon:first-child,
-              .v-icon:first-child::before,
-              .anticon.anticon-down {
-                color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border" );
-              }
-              
-            }
-          }
-
-          &>.v-treeview-node__children {
-            // Level 2
-            .v-treeview-node__root {
-              color: map-deep-get($config, #{$theme}, "v-treeview-node-root-label-color");
-
-              &:hover {
-                background-color: map-deep-get($config, #{$theme}, "v-calendar-weekday-backgroundColor");
-              }
-              
-              .v-treeview-node__content {
-                .v-icon,
-                .v-icon::before {
-                  color: map-deep-get($config, #{$theme}, "icon-datepicker-color");
-                }
-              }
-            }
-
-            &>[aria-expanded="true"] >.v-treeview-node__root,
-            .v-treeview-node__root.v-treeview-node--active {
-              background-color: map-deep-get($config, #{$theme}, "v-calendar-day-in-not-month-color" );
-              .v-treeview-node__content {
-                .v-treeview-node__label {
-                  color: map-deep-get($config, #{$theme}, "card-title-color");
-                }
-
-                .v-icon,
-                .v-icon::before,
-                .anticon.anticon-down {
-                  color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border" );
-                }
-              }
-            }
-            
-            // Level 3
-            .v-treeview-node__children {
-              .v-treeview-node {
-                >.v-treeview-node__root {
-                  .v-treeview-node__content {
-                    .v-treeview-node__label {
-                      color: map-deep-get($config, #{$theme}, "card-default-color");
-                    }
-                  }
-
-                  *:hover,
-                  :hover {
-                    border-width: 0;
-                  }
-
-                  &:hover {
-                    border: 1px solid  map-deep-get($config, #{$theme}, "v-input-textarea-border");
-                    border-radius: 8px;
-                    background-color: rgba(0, 0, 0, 0);
-                    .v-treeview-node__content {
-                      .v-treeview-node__label {
-                        color: map-deep-get($config, #{$theme}, "tui-grid-title-color");
-                      }
-                    }
-
-                  }
-
-                  &.v-treeview-node--active {
-                    // color: map-deep-get($config, #{$theme}, "card-title-color");
-                    background-color: rgba(0, 0, 0, 0);
-                    .v-treeview-node__content {
-                      .v-treeview-node__label {
-                        color: map-deep-get($config, #{$theme}, "tui-grid-title-color");
-                      }
-      
-                      .v-icon,
-                      .v-icon::before,
-                      .anticon {
-                        color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border" );
-                      }
-                    }
-                  }
-
-                }
-              }
-
-            }
-
-          }
-        }
-      }
-    }
-
     .vc-weeks {
       >.vc-weekday {
         background-color: map-deep-get($config,
diff --git a/assets/scss/layout.scss b/assets/scss/layout.scss
new file mode 100644
index 0000000..affee74
--- /dev/null
+++ b/assets/scss/layout.scss
@@ -0,0 +1,433 @@
+.loading {
+  z-index: 99;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  height: 100%;
+  transform: translate(-50%, -50%);
+  background-color: rgba(0, 0, 0, 0.4);
+  //box-shadow: rgba(68, 67, 67, 0.9) 0 0 0 9999px;
+}
+
+.v-spinner {
+  top: 50%;
+  left: 50%;
+}
+
+::v-deep {
+  .container--fluid {
+    .menu-container {
+      height:calc(100vh - 60px);
+      overflow-y: auto;
+      min-width: 200px;
+      
+      // v-navigation-drawer (sidebar)
+      .v-navigation-drawer {
+        box-shadow: none; // 0 0 10px 0 rgba(0, 0, 0, 0.15);
+        min-width: 200px !important;
+        // transform: none !important;
+        // visibility: visible !important;
+    
+        &--fixed {
+          z-index: 20;
+        }
+    
+        .home {
+          display: block;
+          line-height: 0;
+        }
+    
+        &__border {
+          display: none;
+        }
+    
+        &__append {
+          padding: 0 17px;
+          margin: 0 0 26px;
+    
+          >p {
+            margin-bottom: 0;
+          }
+        }
+    
+        .v-treeview {
+          padding: 0 10px;
+          box-sizing: border-box;
+    
+          .v-treeview-node__level {
+            width: 9px;
+          }
+    
+          >.v-treeview-node {
+            margin-top: 10px;
+    
+            &:first-child {
+              margin-top: 0;
+            }
+    
+            >.v-treeview-node__root {
+              min-height: 44px !important;
+            }
+          }
+    
+          .v-treeview-node {
+            .v-treeview-node__toggle {
+              display: none !important;
+            }
+    
+            &>.v-treeview-node__root:before {
+              border-radius: 6px;
+              z-index: -1;
+            }
+    
+            &>.v-treeview-node__root:hover:before {
+              opacity: 0 !important;
+            }
+    
+            .v-treeview-node__children {
+              .v-treeview-node__label {
+                >button>span {
+                  font-size: 0.875rem;
+                }
+              }
+            }
+          }
+    
+          .v-treeview-node--click[aria-expanded="true"] {
+            &>.v-treeview-node__root:before {
+              opacity: 0 !important;
+            }
+          }
+    
+          .v-treeview-node[aria-expanded="true"] {
+            &>.v-treeview-node__root>.v-treeview-node__content
+            >.v-treeview-node__label>button {
+              >.anticon,
+              >.v-icon.mdi-chevron-down {
+                transform: rotate(-180deg);
+              }
+            }
+          }
+    
+          .v-treeview-node__label {
+            &>button {
+              width: 100%;
+              display: flex;
+              align-items: center;
+              // justify-content: center;
+            }
+    
+            & .anticon,
+            & .v-icon.mdi-chevron-down {
+              margin-left: auto;
+              animation-duration: 0.5s;
+              font-size: 12px;
+            }
+          }
+        }
+    
+        .v-treeview-node--active {
+          &:before {
+            opacity: 0 !important;
+          }
+        }
+    
+        &.v-navigation-drawer--mini-variant {
+          .home {
+            display: none;
+          }
+    
+          .v-treeview-node__content {
+            margin-left: 0;
+          }
+    
+          .v-treeview-node__content span:not(.v-icon),
+          .v-treeview-node__root>button,
+          .v-treeview-node__level,
+          .v-treeview-node__content .v-icon.mdi-chevron-down,
+          .v-treeview-node__content .anticon {
+            display: none;
+          }
+    
+          .v-navigation-drawer__append {
+            display: none;
+          }
+        }
+      }
+     }
+  }
+
+  // router-tab header
+  .router-tab {
+    height: 100%;
+
+    &__header {
+      align-items: flex-end;
+      height: 52px;
+      margin: -5px -5px 0;
+      padding: 0 20px;
+      box-sizing: border-box;
+      border-bottom: none !important;
+    }
+
+    &-page {
+      height: 100%;
+    }
+
+    & .router-tab__container {
+      overflow-y: auto;
+      height: calc(100vh - 110px);
+      max-height: calc(100vh - 115px);
+      padding: 20px;
+    }
+
+    .router-tab__slot-end {
+      align-self: center;
+      display: flex;
+      align-items: center;
+
+      >* {
+        flex: none;
+        margin-right: 6px;
+
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+
+      .v-menu+.v-btn {
+        padding: 0 3px;
+      }
+
+      .v-btn {
+        border-radius: 4px;
+      }
+    }
+
+    .router-tab__nav {
+      padding-left: 0;
+    }
+
+    .router-tab__scroll {
+      height: 46px;
+    }
+
+    .router-tab__item {
+      height: 46px;
+      padding: 0 !important;
+
+      &:first-child {
+        border-left: none
+      }
+
+      &>span {
+        font-size: 14px;
+      }
+
+      &.is-active {
+        border-bottom: 2px solid;
+        &>span {
+          font-weight: 400;
+        }
+      }
+
+      &+.router-tab__item {
+        margin-left: 16px;
+      }
+      border:none;
+    }
+
+  }
+}
+
+@each $theme in dark, light {
+  @include theme($theme);
+  
+  .v-application.#{$theme}-mode {
+    ::v-deep {
+
+      ::-webkit-scrollbar {
+        width: 4px;
+        border-radius: 3px;
+      }
+  
+      ::-webkit-scrollbar-track {
+        background-color: map-deep-get($config, #{$theme}, "scrollbar-track");
+      }
+  
+      ::-webkit-scrollbar-thumb {
+        width: 4px;
+        border-radius: 3px;
+        background-color: map-deep-get($config, #{$theme}, "scrollbar-thumb");
+        background-clip: content-box;
+      }
+
+      .header {
+        background-color: map-deep-get($config, #{$theme}, "header-backgroud");
+        border-bottom: 1px solid map-deep-get($config, #{$theme}, "v-header-border");
+      }
+
+      .btn-header {
+        background-color: map-deep-get($config, #{$theme}, "v-btn-header-background");
+        border:1px solid map-deep-get($config, #{$theme}, "v-btn-header-border");
+        color: map-deep-get($config, #{$theme}, "v-btn-header-text");
+      }
+
+      .container--fluid {
+        background-color: map-deep-get($config, #{$theme}, "container-fluid");
+        .menu-container {
+          border-right: 1px solid map-deep-get($config, #{$theme}, "v-sidebar-border") ;
+          .v-navigation-drawer__append {
+            >p {
+              color: map-deep-get($config, #{$theme}, "v-banner-border-color" ) !important;
+            }
+          }
+        }
+      }
+  
+      .v-navigation-drawer {
+        background: map-deep-get($config, #{$theme}, "menu-bg-color");
+      }
+
+      .v-treeview {
+        .v-treeview-node+.v-treeview-node {
+          margin-top: 2px;
+        }
+  
+        .v-treeview-node__root+.v-treeview-node__children {
+          margin-top: 2px;
+        }
+  
+        &>.v-treeview-node {
+          .v-treeview-node__root {
+            border-radius: 8px;
+            &:hover {
+              background-color: map-deep-get($config, #{$theme}, "v-calendar-weekday-border-color" );
+            }
+            .v-treeview-node__content {
+              .v-icon,
+              .v-treeview-node__label {
+                color: map-deep-get($config, #{$theme}, "tui-grid-title-color");
+              }
+              
+              .anticon.anticon-down {
+                color: map-deep-get($config, #{$theme}, "icon-datepicker-color");
+              }
+            }
+          }
+  
+          &[aria-expanded="true"]{
+            // Level 1
+            &>.v-treeview-node__root {
+              background-color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-bg" );
+              border: 1px solid map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border" );
+              color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border");
+  
+              &:before {
+                background-color: map-deep-get($config, #{$theme}, "v-treeview-node-subroot-backgroundColor");
+              }
+  
+              .v-treeview-node__content {
+                .v-treeview-node__label {
+                  color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border");
+                }
+  
+                .v-icon:first-child,
+                .v-icon:first-child::before,
+                .anticon.anticon-down {
+                  color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border" );
+                }
+                
+              }
+            }
+  
+            &>.v-treeview-node__children {
+              // Level 2
+              .v-treeview-node__root {
+                color: map-deep-get($config, #{$theme}, "v-treeview-node-root-label-color");
+  
+                &:hover {
+                  background-color: map-deep-get($config, #{$theme}, "v-calendar-weekday-backgroundColor");
+                }
+                
+                .v-treeview-node__content {
+                  .v-icon,
+                  .v-icon::before {
+                    color: map-deep-get($config, #{$theme}, "icon-datepicker-color");
+                  }
+                }
+              }
+  
+              &>[aria-expanded="true"] >.v-treeview-node__root,
+              .v-treeview-node__root.v-treeview-node--active {
+                background-color: map-deep-get($config, #{$theme}, "v-calendar-day-in-not-month-color" );
+                .v-treeview-node__content {
+                  .v-treeview-node__label {
+                    color: map-deep-get($config, #{$theme}, "card-title-color");
+                  }
+  
+                  .v-icon,
+                  .v-icon::before,
+                  .anticon.anticon-down {
+                    color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border" );
+                  }
+                }
+              }
+              
+              // Level 3
+              .v-treeview-node__children {
+                .v-treeview-node {
+                  >.v-treeview-node__root {
+                    .v-treeview-node__content {
+                      .v-treeview-node__label {
+                        color: map-deep-get($config, #{$theme}, "card-default-color");
+                      }
+                    }
+  
+                    *:hover,
+                    :hover {
+                      border-width: 0;
+                    }
+  
+                    &:hover {
+                      border: 1px solid  map-deep-get($config, #{$theme}, "v-input-textarea-border");
+                      border-radius: 8px;
+                      background-color: rgba(0, 0, 0, 0);
+                      .v-treeview-node__content {
+                        .v-treeview-node__label {
+                          color: map-deep-get($config, #{$theme}, "tui-grid-title-color");
+                        }
+                      }
+  
+                    }
+  
+                    &.v-treeview-node--active {
+                      // color: map-deep-get($config, #{$theme}, "card-title-color");
+                      background-color: rgba(0, 0, 0, 0);
+                      .v-treeview-node__content {
+                        .v-treeview-node__label {
+                          color: map-deep-get($config, #{$theme}, "tui-grid-title-color");
+                        }
+        
+                        .v-icon,
+                        .v-icon::before,
+                        .anticon {
+                          color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border" );
+                        }
+                      }
+                    }
+  
+                  }
+                }
+  
+              }
+  
+            }
+          }
+        }
+      }
+
+    }
+  }
+}
diff --git a/layouts/default.vue b/layouts/default.vue
index 644c9b9..838b321 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -90,8 +90,14 @@
         <v-container fluid>
           <v-row class="flex-nowrap">
             <div class="menu-container">
-              <v-navigation-drawer ref="navigationdrawer" :value="drawer" :mini-variant="miniVariant" :clipped="clipped"
-                :absolute="false" mini-variant-width="60">
+              <v-navigation-drawer ref="navigationdrawer"
+                class="pt-2" 
+                :clipped="clipped"
+                :absolute="false" 
+                :mini-variant="miniVariant"
+                :value="drawer"  
+                mini-variant-width="260"
+              >
 
                 <component ref="changePswdPop" :is="'ChangePswdPop'" v-show="false" :comId="this.userInfo.comId" />
                 <v-treeview ref="treeview" :active.sync="activeTree" active-class="v-treeview-node--active"
@@ -839,168 +845,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-// @import '@/assets/scss/common.scss';
-.loading {
-  z-index: 99;
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  width: 100%;
-  height: 100%;
-  transform: translate(-50%, -50%);
-  background-color: rgba(0, 0, 0, 0.4);
-  //box-shadow: rgba(68, 67, 67, 0.9) 0 0 0 9999px;
-}
+@import '@/assets/scss/layout.scss';
 
-.v-spinner {
-  top: 50%;
-  left: 50%;
-}
-
-// @each $theme in dark, light {
-//   @include theme($theme);
-//   .v-application.#{$theme}-mode {
-//     ::v-deep {
-
-//       .v-treeview {
-//         .v-treeview-node+.v-treeview-node {
-//           margin-top: 2px;
-//         }
-  
-//         .v-treeview-node__root+.v-treeview-node__children {
-//           margin-top: 2px;
-//         }
-  
-//         &>.v-treeview-node {
-//           .v-treeview-node__root {
-//             border-radius: 8px;
-//             &:hover {
-//               background-color: map-deep-get($config, #{$theme}, "v-calendar-weekday-border-color" );
-//             }
-//             .v-treeview-node__content {
-//               .v-icon,
-//               .v-treeview-node__label {
-//                 color: map-deep-get($config, #{$theme}, "tui-grid-title-color");
-//               }
-              
-//               .anticon.anticon-down {
-//                 color: map-deep-get($config, #{$theme}, "icon-datepicker-color");
-//               }
-//             }
-//           }
-  
-//           &[aria-expanded="true"]{
-//             // Level 1
-//             &>.v-treeview-node__root {
-//               background-color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-bg" );
-//               border: 1px solid map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border" );
-//               color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border");
-  
-//               &:before {
-//                 background-color: map-deep-get($config, #{$theme}, "v-treeview-node-subroot-backgroundColor");
-//               }
-  
-//               .v-treeview-node__content {
-//                 .v-treeview-node__label {
-//                   color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border");
-//                 }
-  
-//                 .v-icon:first-child,
-//                 .v-icon:first-child::before,
-//                 .anticon.anticon-down {
-//                   color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border" );
-//                 }
-                
-//               }
-//             }
-  
-//             &>.v-treeview-node__children {
-//               // Level 2
-//               .v-treeview-node__root {
-//                 color: map-deep-get($config, #{$theme}, "v-treeview-node-root-label-color");
-
-//                 &:hover {
-//                   background-color: map-deep-get($config, #{$theme}, "v-calendar-weekday-backgroundColor");
-//                 }
-                
-//                 .v-treeview-node__content {
-//                   .v-icon,
-//                   .v-icon::before {
-//                     color: map-deep-get($config, #{$theme}, "icon-datepicker-color");
-//                   }
-//                 }
-//               }
-
-//               &>[aria-expanded="true"] >.v-treeview-node__root,
-//               .v-treeview-node__root.v-treeview-node--active {
-//                 background-color: map-deep-get($config, #{$theme}, "v-calendar-day-in-not-month-color" );
-//                 .v-treeview-node__content {
-//                   .v-treeview-node__label {
-//                     color: map-deep-get($config, #{$theme}, "card-title-color");
-//                   }
-  
-//                   .v-icon,
-//                   .v-icon::before,
-//                   .anticon.anticon-down {
-//                     color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border" );
-//                   }
-//                 }
-//               }
-              
-//               // Level 3
-//               .v-treeview-node__children {
-//                 .v-treeview-node {
-//                   >.v-treeview-node__root {
-//                     .v-treeview-node__content {
-//                       .v-treeview-node__label {
-//                         color: map-deep-get($config, #{$theme}, "card-default-color");
-//                       }
-//                     }
-  
-//                     *:hover,
-//                     :hover {
-//                       border-width: 0;
-//                     }
-  
-//                     &:hover {
-//                       border: 1px solid  map-deep-get($config, #{$theme}, "v-input-textarea-border");
-//                       border-radius: 8px;
-//                       background-color: rgba(0, 0, 0, 0);
-//                       .v-treeview-node__content {
-//                         .v-treeview-node__label {
-//                           color: map-deep-get($config, #{$theme}, "tui-grid-title-color");
-//                         }
-//                       }
-  
-//                     }
-  
-//                     &.v-treeview-node--active {
-//                       // color: map-deep-get($config, #{$theme}, "card-title-color");
-//                       background-color: rgba(0, 0, 0, 0);
-//                       .v-treeview-node__content {
-//                         .v-treeview-node__label {
-//                           color: map-deep-get($config, #{$theme}, "tui-grid-title-color");
-//                         }
-        
-//                         .v-icon,
-//                         .v-icon::before,
-//                         .anticon {
-//                           color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border" );
-//                         }
-//                       }
-//                     }
-  
-//                   }
-//                 }
-  
-//               }
-  
-//             }
-//           }
-//         }
-//       }
-
-//     }
-//   }
-// }
 </style>
-- 
2.50.1.windows.1


From 24882a21a5f7534acbb7ed7a1f616f83f77db8d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tran=20Van=20Dung/=28Tran=20Van=20Dung=29/=ED=98=84?=
 =?UTF-8?q?=EC=9E=A5=EB=8C=80=EB=A6=AC=EC=9D=B8/SK?= <20074470@skcc.com>
Date: Wed, 13 Aug 2025 13:20:58 +0700
Subject: [PATCH 3/4] fix bugs style button delete

---
 assets/scss/common.scss            |  6 +-----
 assets/scss/common/button.scss     |  7 ++++---
 assets/scss/var.scss               |  2 +-
 components/icons/icoSend.vue       |  2 +-
 pages/comm/base/NoticeMngPage.vue  | 24 ++++++++++++++++--------
 pages/ems/effc/EnrgReptMngPage.vue |  2 +-
 6 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/assets/scss/common.scss b/assets/scss/common.scss
index a1b3167..8af5310 100644
--- a/assets/scss/common.scss
+++ b/assets/scss/common.scss
@@ -253,16 +253,12 @@ a {
       color: map-deep-get($config, #{$theme}, "v-select-label-color");
     }
 
-    // .header {
-    //   background-color: map-deep-get($config, #{$theme}, "header-backgroud");
-    //   border-bottom: 1px solid map-deep-get($config, #{$theme}, "v-header-border");
-    // }
-
     .custom-chart{
       border: 1px solid map-deep-get($config, #{$theme}, "v-chart-border");
     }
 
     .v-icon {
+      color: currentColor;
       &.icon-orange {
         svg {
           fill:map-deep-get($config,
diff --git a/assets/scss/common/button.scss b/assets/scss/common/button.scss
index 0466fdc..b300118 100644
--- a/assets/scss/common/button.scss
+++ b/assets/scss/common/button.scss
@@ -144,10 +144,11 @@
       }
 
       &.ant-btn-danger {
+
         &.ant-btn-background-ghost {
-          color:map-deep-get($config, #{$theme}, "ant-btn-danger-color");
-          border-color:map-deep-get($config, #{$theme}, "ant-btn-danger-border");
-          background: map-deep-get($config, #{$theme}, "ant-btn-danger-bg") !important;
+          color: map-deep-get($config, #{$theme}, "ant-btn-danger-color");
+          border-color: map-deep-get($config, #{$theme}, "ant-btn-danger-color");
+          // background: map-deep-get($config, #{$theme}, "ant-btn-danger-color") !important;
         }
       }
 
diff --git a/assets/scss/var.scss b/assets/scss/var.scss
index 4663d67..84c7cfa 100644
--- a/assets/scss/var.scss
+++ b/assets/scss/var.scss
@@ -166,7 +166,7 @@ $config: (
     ant-btn-primary-color: #212224,
     ant-btn-danger-bg:#D32029,
     ant-btn-danger-border:#D32029,
-    ant-btn-danger-color:#212224,
+    ant-btn-danger-color:#D32029,
     ant-btn-default-border:#FFFFFF2E,
     ant-btn-default-bg:#FFFFFF2E,
     ant-btn-default-color:#FFFFFFD9,
diff --git a/components/icons/icoSend.vue b/components/icons/icoSend.vue
index d7ac958..70591f0 100644
--- a/components/icons/icoSend.vue
+++ b/components/icons/icoSend.vue
@@ -1,5 +1,5 @@
 <template>
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M15.4899 7.76897L0.552358 0.279682C0.491643 0.249325 0.422 0.242182 0.355929 0.258253C0.282599 0.276381 0.219441 0.322828 0.180282 0.387423C0.141124 0.452017 0.129156 0.529497 0.147 0.602896L1.68629 6.89218C1.7095 6.98682 1.77914 7.06361 1.872 7.09397L4.5095 7.99932L1.87379 8.90468C1.78093 8.93682 1.71129 9.01182 1.68986 9.10647L0.147 15.4047C0.130929 15.4708 0.138072 15.5404 0.168429 15.5993C0.238072 15.7404 0.4095 15.7975 0.552358 15.7279L15.4899 8.28147C15.5452 8.25468 15.5899 8.20825 15.6184 8.15468C15.6881 8.01182 15.6309 7.8404 15.4899 7.76897ZM1.90771 13.6154L2.80593 9.94397L8.07736 8.13504C8.11843 8.12075 8.15236 8.08861 8.16664 8.04575C8.19164 7.97075 8.15236 7.8904 8.07736 7.86361L2.80593 6.05647L1.91129 2.39932L13.1256 8.02254L1.90771 13.6154Z" fill="white"/>
+  <path d="M15.4899 7.76897L0.552358 0.279682C0.491643 0.249325 0.422 0.242182 0.355929 0.258253C0.282599 0.276381 0.219441 0.322828 0.180282 0.387423C0.141124 0.452017 0.129156 0.529497 0.147 0.602896L1.68629 6.89218C1.7095 6.98682 1.77914 7.06361 1.872 7.09397L4.5095 7.99932L1.87379 8.90468C1.78093 8.93682 1.71129 9.01182 1.68986 9.10647L0.147 15.4047C0.130929 15.4708 0.138072 15.5404 0.168429 15.5993C0.238072 15.7404 0.4095 15.7975 0.552358 15.7279L15.4899 8.28147C15.5452 8.25468 15.5899 8.20825 15.6184 8.15468C15.6881 8.01182 15.6309 7.8404 15.4899 7.76897ZM1.90771 13.6154L2.80593 9.94397L8.07736 8.13504C8.11843 8.12075 8.15236 8.08861 8.16664 8.04575C8.19164 7.97075 8.15236 7.8904 8.07736 7.86361L2.80593 6.05647L1.91129 2.39932L13.1256 8.02254L1.90771 13.6154Z" fill="currentColor"/>
 </svg>
 </template>
\ No newline at end of file
diff --git a/pages/comm/base/NoticeMngPage.vue b/pages/comm/base/NoticeMngPage.vue
index 468f026..55fcb86 100644
--- a/pages/comm/base/NoticeMngPage.vue
+++ b/pages/comm/base/NoticeMngPage.vue
@@ -37,7 +37,7 @@
 								class="mr-1" icon="unordered-list">목록</a-button>
 							<a-button @click="viewPageButtonGroupClickEvent('reply')" type="primary" :ripple="false"
 								class="mr-1" icon="send-outlined">
-								<v-icon small :class="['mr-2']">$icoSend</v-icon>
+								<v-icon small :class="['mr-2']" >$icoSend</v-icon>
 								답글
 							</a-button>
 							<a-button @click="viewPageButtonGroupClickEvent('update')" type="primary" :ripple="false"
@@ -105,15 +105,17 @@
 										@click="writeActionData.업로드fileData.splice(index, 1)" />
 								</div>
 							</div>
-							<a-button class="mt-2" icon="upload" @click="$refs.writeInputFile.$refs.input.click()">
+							<a-button class="ant-btn-popup-default mt-3" color="primary" icon="upload" @click="$refs.writeInputFile.$refs.input.click()">
 								업로드
 							</a-button>
 							<v-file-input ref="writeInputFile" v-model="writeActionData.fileData" multiple outlined
 								hide-input class="d-none" prepend-icon="mdi-tray-arrow-up"></v-file-input>
 						</v-col>
 						<v-col :cols="12" class="text-right">
-							<a-button @click="writePageButtonGroupClickEvent('cancel')" :ripple="false"
-								class="mr-2">취소</a-button>
+							<a-button @click="writePageButtonGroupClickEvent('cancel')" 
+								:ripple="false"
+								class="ant-btn-popup-default mr-2" 
+								color="primary" >취소</a-button>
 							<a-button @click="writePageButtonGroupClickEvent('write')" :ripple="false"
 								type="primary">등록</a-button>
 						</v-col>
@@ -151,7 +153,7 @@
 									@click="replyActionData.fileData.splice(index, 1)" />
 							</div>
 						</div>
-						<a-button class="mt-3" icon="upload" @click="$refs.replyInputFile.$refs.input.click()">
+						<a-button class="ant-btn-popup-default mt-3" color="primary" icon="upload" @click="$refs.replyInputFile.$refs.input.click()">
 							업로드
 						</a-button>
 						<v-file-input ref="replyInputFile" multiple show-size v-model="replyActionData.fileData"
@@ -159,7 +161,10 @@
 						</v-file-input>
 					</v-col>
 					<v-col :cols="12" class="text-right">
-						<a-button @click="replyPageButtonGroupClickEvent('cancel')" :ripple="false">취소</a-button>
+						<a-button @click="replyPageButtonGroupClickEvent('cancel')" 
+							class="ant-btn-popup-default mr-2" 
+							color="primary"
+							:ripple="false">취소</a-button>
 						<a-button @click="replyPageButtonGroupClickEvent('reply')" :ripple="false"
 							type="primary">등록</a-button>
 					</v-col>
@@ -212,7 +217,7 @@
 										@click="addFileToDeleteFileList(fileData)" />
 								</div>
 							</div>
-							<a-button class="mt-2" icon="upload" @click="$refs.updateInputFile.$refs.input.click()">
+							<a-button class="ant-btn-popup-default mt-2" color="primary" icon="upload" @click="$refs.updateInputFile.$refs.input.click()">
 								업로드
 							</a-button>
 							<v-file-input ref="updateInputFile" multiple show-size v-model="updateActionData.fileData"
@@ -220,7 +225,10 @@
 							</v-file-input>
 						</v-col>
 						<v-col :cols="12" class="text-right">
-							<a-button @click="updatePageButtonGroupClickEvent('cancel')">취소</a-button>
+							<a-button @click="updatePageButtonGroupClickEvent('cancel')" 
+								class="ant-btn-popup-default mr-2" 
+								color="primary"
+							>취소</a-button>
 							<a-button @click="updatePageButtonGroupClickEvent('update')" type="primary">등록</a-button>
 						</v-col>
 					</v-row>
diff --git a/pages/ems/effc/EnrgReptMngPage.vue b/pages/ems/effc/EnrgReptMngPage.vue
index 09c5c8a..41ffa8c 100644
--- a/pages/ems/effc/EnrgReptMngPage.vue
+++ b/pages/ems/effc/EnrgReptMngPage.vue
@@ -35,7 +35,7 @@
 						</v-col>
 						<v-col :cols="6.5" class="text-right d-flex align-end justify-end align-self-end">
 							<!-- 조회버튼 -->
-							<a-button icon="file-excel" class="d-inline-flex-1 mr-1" size="large" @click="createExcel()">엑셀</a-button>
+							<a-button type="default" icon="file-excel" class="d-inline-flex-1 mr-1" size="large" @click="createExcel()">엑셀</a-button>
 							<BtnSearch @click="search" size="large"  />
 						</v-col>
 					</v-row>
-- 
2.50.1.windows.1


From f6c071bdf0c4f55f903352798976f01dd0de14ec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tran=20Van=20Dung/=28Tran=20Van=20Dung=29/=ED=98=84?=
 =?UTF-8?q?=EC=9E=A5=EB=8C=80=EB=A6=AC=EC=9D=B8/SK?= <20074470@skcc.com>
Date: Wed, 13 Aug 2025 13:37:51 +0700
Subject: [PATCH 4/4] fix menu item:hover style

---
 assets/scss/layout.scss | 24 ++++++++++++++++--------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/assets/scss/layout.scss b/assets/scss/layout.scss
index affee74..d5dc948 100644
--- a/assets/scss/layout.scss
+++ b/assets/scss/layout.scss
@@ -79,6 +79,8 @@
             &>.v-treeview-node__root:before {
               border-radius: 6px;
               z-index: -1;
+              background-color: rgba(0, 0, 0, 0);
+              transition-duration: 0s;
             }
     
             &>.v-treeview-node__root:hover:before {
@@ -379,21 +381,21 @@
               .v-treeview-node__children {
                 .v-treeview-node {
                   >.v-treeview-node__root {
-                    .v-treeview-node__content {
-                      .v-treeview-node__label {
-                        color: map-deep-get($config, #{$theme}, "card-default-color");
-                      }
-                    }
-  
+                    
                     *:hover,
                     :hover {
                       border-width: 0;
                     }
   
                     &:hover {
-                      border: 1px solid  map-deep-get($config, #{$theme}, "v-input-textarea-border");
-                      border-radius: 8px;
                       background-color: rgba(0, 0, 0, 0);
+                      
+                      &:before {
+                        opacity: 1 !important;
+                        border: 1px solid  map-deep-get($config, #{$theme}, "v-input-textarea-border");
+                        border-radius: 8px;
+                      }
+
                       .v-treeview-node__content {
                         .v-treeview-node__label {
                           color: map-deep-get($config, #{$theme}, "tui-grid-title-color");
@@ -418,6 +420,12 @@
                       }
                     }
   
+                    .v-treeview-node__content {
+                      .v-treeview-node__label {
+                        color: map-deep-get($config, #{$theme}, "card-default-color");
+                      }
+                    }
+
                   }
                 }
   
-- 
2.50.1.windows.1