From 0d24a3b730198581e112c9ee7479e6ce2f1be026 Mon Sep 17 00:00:00 2001
From: KarolChang <super000999888@gmail.com>
Date: Sat, 16 Apr 2022 13:37:36 +0800
Subject: [PATCH] add include Role

---
 deploy.sh                                     |   1 -
 package-lock.json                             |  11 +-
 package.json                                  |   3 +-
 .../Category/CreateCategoryModalButton.vue    |   3 +-
 .../Category/EditCategoryModalButton.vue      |   3 +-
 .../Expense/CreateExpenseModalButton.vue      |  32 ++--
 .../Expense/EditExpenseModalButton.vue        |  31 ++--
 .../CreatePermissionModalButton.vue           |   3 +-
 .../Permission/EditPermissionModalButton.vue  |   3 +-
 .../Record/CreateRecordModalButton.vue        |  28 ++--
 .../Record/EditRecordModalButton.vue          |  30 ++--
 .../Role/CreateRoleModalButton.vue            |   3 +-
 .../ModalButton/Role/EditRoleModalButton.vue  |   3 +-
 src/components/Sidebar.vue                    |   1 +
 src/components/global.ts                      |   2 +-
 src/firebase/auth.ts                          |   2 +-
 src/firebase/config.ts                        |   6 +-
 src/main.ts                                   |   3 +-
 src/models/Category.ts                        |   2 +-
 src/router/index.ts                           | 145 ++++++++----------
 src/store/index.ts                            |   4 +-
 src/utils/swal.ts                             |   5 +-
 src/{ => views}/App.vue                       |   4 +-
 src/views/Expense.vue                         |   2 +-
 src/views/Role.vue                            |   4 +-
 vite.config.js                                |   3 +
 26 files changed, 179 insertions(+), 158 deletions(-)
 rename src/{ => views}/App.vue (96%)

diff --git a/deploy.sh b/deploy.sh
index b098d43..b9bd1f7 100755
--- a/deploy.sh
+++ b/deploy.sh
@@ -21,7 +21,6 @@ git commit -m 'deploy'
 
 # if you are deploying to https://<USERNAME>.Github.io/<REPO>
 # git push -f https://github.com/<USERNAME>/<REPO>.git master:gh-pages
-git push origin master
 git push -f https://github.com/KarolChang/jm-expense-vue-ts.git master:gh-pages
 
 cd -
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 6bc6ca7..c28419a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -661,6 +661,11 @@
         "fastq": "^1.6.0"
       }
     },
+    "@popperjs/core": {
+      "version": "2.11.5",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz",
+      "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw=="
+    },
     "@protobufjs/aspromise": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz",
@@ -2687,9 +2692,9 @@
       "dev": true
     },
     "sweetalert2": {
-      "version": "11.3.0",
-      "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.3.0.tgz",
-      "integrity": "sha512-C0TFp0VLxgx+PmhJ0mL8qzx+iYjnCLdDbvQHKY6KAGI+xwawMvLkStPgw2LmJl6itaDhR/qLQStPFIbr1VK9Ow=="
+      "version": "11.4.8",
+      "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.4.8.tgz",
+      "integrity": "sha512-BDS/+E8RwaekGSxCPUbPnsRAyQ439gtXkTF/s98vY2l9DaVEOMjGj1FaQSorfGREKsbbxGSP7UXboibL5vgTMA=="
     },
     "table": {
       "version": "5.4.6",
diff --git a/package.json b/package.json
index 013b6b0..7237d05 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src"
   },
   "dependencies": {
+    "@popperjs/core": "^2.11.5",
     "@vueform/multiselect": "^2.3.1",
     "axios": "^0.24.0",
     "bootstrap": "^5.1.3",
@@ -21,7 +22,7 @@
     "firebase": "^9.6.3",
     "luxon": "^1.0.0",
     "pinia": "^2.0.6",
-    "sweetalert2": "^11.3.0",
+    "sweetalert2": "^11.4.8",
     "vue": "^3.2.29",
     "vue-class-component": "^8.0.0-0",
     "vue-router": "^4.0.0-0",
diff --git a/src/components/ModalButton/Category/CreateCategoryModalButton.vue b/src/components/ModalButton/Category/CreateCategoryModalButton.vue
index f142fba..7bffc73 100644
--- a/src/components/ModalButton/Category/CreateCategoryModalButton.vue
+++ b/src/components/ModalButton/Category/CreateCategoryModalButton.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { inject } from 'vue'
-import Swal from 'sweetalert2'
-import { Toast, ConfirmBox } from '@/utils/swal'
+import { Swal, Toast, ConfirmBox } from '@/utils/swal'
 import expenseAPI from '@/apis/expense'
 import { CategoryInput } from '@/models'
 
diff --git a/src/components/ModalButton/Category/EditCategoryModalButton.vue b/src/components/ModalButton/Category/EditCategoryModalButton.vue
index dcf8d6d..681fddd 100644
--- a/src/components/ModalButton/Category/EditCategoryModalButton.vue
+++ b/src/components/ModalButton/Category/EditCategoryModalButton.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { inject } from 'vue'
-import Swal from 'sweetalert2'
-import { Toast, ConfirmBox } from '@/utils/swal'
+import { Swal, Toast, ConfirmBox } from '@/utils/swal'
 import expenseAPI from '@/apis/expense'
 import { Category, CategoryInput } from '@/models'
 
diff --git a/src/components/ModalButton/Expense/CreateExpenseModalButton.vue b/src/components/ModalButton/Expense/CreateExpenseModalButton.vue
index 571d1b8..ae26538 100644
--- a/src/components/ModalButton/Expense/CreateExpenseModalButton.vue
+++ b/src/components/ModalButton/Expense/CreateExpenseModalButton.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { inject, computed, Ref } from 'vue'
-import Swal from 'sweetalert2'
-import { Toast, ConfirmBox } from '@/utils/swal'
+import { Swal, Toast, ConfirmBox } from '@/utils/swal'
 import expenseAPI from '@/apis/expense'
 import { ExpenseInput, Category } from '@/models'
 import { useStore } from '@/store/index'
@@ -75,19 +74,28 @@ const btnClick = async () => {
         if (!item || !amount || !date) {
           Swal.showValidationMessage('除了[備註]，所有資料都是必填！')
         }
-        return {
-          input: {
-            UserId: store.currentUser?.id,
-            CategoryId: Number(categoryId),
-            item,
-            amount,
-            note,
-            date
-          } as ExpenseInput
+        console.log('store.currentUser', store.currentUser)
+        console.log('store.currentUser?.id', store.currentUser?.id)
+        if (store.currentUser) {
+          return {
+            input: {
+              UserId: store.currentUser.id,
+              CategoryId: Number(categoryId),
+              item,
+              amount,
+              note,
+              date
+            } as ExpenseInput
+          }
+        } else {
+          Toast.fire({
+            icon: 'error',
+            title: '無法取得使用者ID'
+          })
         }
       }
     })
-    if (formValues) {
+    if (formValues?.input) {
       createExpense(formValues)
     }
   } catch (error) {
diff --git a/src/components/ModalButton/Expense/EditExpenseModalButton.vue b/src/components/ModalButton/Expense/EditExpenseModalButton.vue
index 2696cde..4f78d71 100644
--- a/src/components/ModalButton/Expense/EditExpenseModalButton.vue
+++ b/src/components/ModalButton/Expense/EditExpenseModalButton.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed, inject, Ref } from 'vue'
-import Swal from 'sweetalert2'
-import { Toast, ConfirmBox } from '@/utils/swal'
+import { Swal, Toast, ConfirmBox } from '@/utils/swal'
 import expenseAPI from '@/apis/expense'
 import { Expense, ExpenseInput, Category } from '@/models'
 import { useStore } from '@/store/index'
@@ -88,19 +87,27 @@ const btnClick = async () => {
         if (!item || !amount || !date) {
           Swal.showValidationMessage('除了[備註]，所有資料都是必填！')
         }
-        return {
-          input: {
-            UserId: store.currentUser?.id,
-            CategoryId: Number(categoryId),
-            item,
-            amount,
-            note,
-            date
-          } as ExpenseInput
+        if (store.currentUser) {
+          return {
+            input: {
+              UserId: store.currentUser.id,
+              CategoryId: Number(categoryId),
+              item,
+              amount,
+              note,
+              date
+            } as ExpenseInput
+          }
+        } else {
+          Toast.fire({
+            icon: 'error',
+            title: '無法取得使用者ID'
+          })
         }
       }
     })
-    if (formValues) {
+    console.log('formValues', formValues)
+    if (formValues?.input) {
       editExpense(formValues)
     }
   } catch (error) {
diff --git a/src/components/ModalButton/Permission/CreatePermissionModalButton.vue b/src/components/ModalButton/Permission/CreatePermissionModalButton.vue
index e3ea97b..0d452dc 100644
--- a/src/components/ModalButton/Permission/CreatePermissionModalButton.vue
+++ b/src/components/ModalButton/Permission/CreatePermissionModalButton.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { inject, computed } from 'vue'
-import Swal from 'sweetalert2'
-import { Toast, ConfirmBox } from '@/utils/swal'
+import { Swal, Toast, ConfirmBox } from '@/utils/swal'
 import userAPI from '@/apis/user'
 import { PermissionInput, ActionTypePermission } from '@/models'
 const actions: ActionTypePermission[] = ['查看', '新增', '編輯', '刪除', '停用', '操作']
diff --git a/src/components/ModalButton/Permission/EditPermissionModalButton.vue b/src/components/ModalButton/Permission/EditPermissionModalButton.vue
index 26f0cdf..1efa740 100644
--- a/src/components/ModalButton/Permission/EditPermissionModalButton.vue
+++ b/src/components/ModalButton/Permission/EditPermissionModalButton.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { inject, computed } from 'vue'
-import Swal from 'sweetalert2'
-import { Toast, ConfirmBox } from '@/utils/swal'
+import { Swal, Toast, ConfirmBox } from '@/utils/swal'
 import userAPI from '@/apis/user'
 import { Permission, PermissionInput, ActionTypePermission } from '@/models'
 const actions: ActionTypePermission[] = ['查看', '新增', '編輯', '刪除', '停用', '操作']
diff --git a/src/components/ModalButton/Record/CreateRecordModalButton.vue b/src/components/ModalButton/Record/CreateRecordModalButton.vue
index fc43bfa..917e72b 100644
--- a/src/components/ModalButton/Record/CreateRecordModalButton.vue
+++ b/src/components/ModalButton/Record/CreateRecordModalButton.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { inject } from 'vue'
-import Swal from 'sweetalert2'
-import { Toast, ConfirmBox } from '@/utils/swal'
+import { Swal, Toast, ConfirmBox } from '@/utils/swal'
 import recordAPI from '@/apis/record'
 import { pushMsgToBoth } from '@/utils/lineBotMsg'
 import { RecordInput } from '@/models'
@@ -66,18 +65,25 @@ const btnClick = async () => {
         if (!item || !merchant || !amount || !date) {
           Swal.showValidationMessage('所有資料都是必填！若紀錄者為空，請登入~')
         }
-        return {
-          input: {
-            item,
-            merchant,
-            amount,
-            date,
-            UserId: store.currentUser?.id
-          } as RecordInput
+        if (store.currentUser) {
+          return {
+            input: {
+              item,
+              merchant,
+              amount,
+              date,
+              UserId: store.currentUser?.id
+            } as RecordInput
+          }
+        } else {
+          Toast.fire({
+            icon: 'error',
+            title: '無法取得使用者ID'
+          })
         }
       }
     })
-    if (formValues) {
+    if (formValues?.input) {
       createRecord(formValues)
     }
   } catch (error) {
diff --git a/src/components/ModalButton/Record/EditRecordModalButton.vue b/src/components/ModalButton/Record/EditRecordModalButton.vue
index 6b830b0..ba0b87c 100644
--- a/src/components/ModalButton/Record/EditRecordModalButton.vue
+++ b/src/components/ModalButton/Record/EditRecordModalButton.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { inject } from 'vue'
-import Swal from 'sweetalert2'
-import { Toast, ConfirmBox } from '@/utils/swal'
+import { Swal, Toast, ConfirmBox } from '@/utils/swal'
 import recordAPI from '@/apis/record'
 import { pushMsgToBoth } from '@/utils/lineBotMsg'
 import { Record, RecordInput } from '@/models'
@@ -65,19 +64,26 @@ const btnClick = async () => {
         if (!item || !merchant || !amount || !date) {
           Swal.showValidationMessage('所有資料都是必填！若編輯者為空，請登入~')
         }
-        return {
-          id: record.id as number,
-          input: {
-            item,
-            merchant,
-            amount,
-            date,
-            UserId: store.currentUser?.id
-          } as RecordInput
+        if (store.currentUser) {
+          return {
+            id: record.id as number,
+            input: {
+              item,
+              merchant,
+              amount,
+              date,
+              UserId: store.currentUser.id
+            } as RecordInput
+          }
+        } else {
+          Toast.fire({
+            icon: 'error',
+            title: '無法取得使用者ID'
+          })
         }
       }
     })
-    if (formValues) {
+    if (formValues?.input) {
       editRecord(formValues)
     }
   } catch (error) {
diff --git a/src/components/ModalButton/Role/CreateRoleModalButton.vue b/src/components/ModalButton/Role/CreateRoleModalButton.vue
index 65c09ad..bfc1d14 100644
--- a/src/components/ModalButton/Role/CreateRoleModalButton.vue
+++ b/src/components/ModalButton/Role/CreateRoleModalButton.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { inject } from 'vue'
-import Swal from 'sweetalert2'
-import { Toast, ConfirmBox } from '@/utils/swal'
+import { Swal, Toast, ConfirmBox } from '@/utils/swal'
 import userAPI from '@/apis/user'
 import { RoleInput } from '@/models'
 
diff --git a/src/components/ModalButton/Role/EditRoleModalButton.vue b/src/components/ModalButton/Role/EditRoleModalButton.vue
index 78ad20d..9b6494d 100644
--- a/src/components/ModalButton/Role/EditRoleModalButton.vue
+++ b/src/components/ModalButton/Role/EditRoleModalButton.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { inject } from 'vue'
-import Swal from 'sweetalert2'
-import { Toast, ConfirmBox } from '@/utils/swal'
+import { Swal, Toast, ConfirmBox } from '@/utils/swal'
 import userAPI from '@/apis/user'
 import { Role, RoleInput } from '@/models'
 
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 2ad66bc..194596d 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -114,6 +114,7 @@ const openUserRP = () => {
         </ul>
       </div>
     </div>
+
     <!-- <transition name="slide-right">
       <UserRP v-show="userRPOpen" />
     </transition> -->
diff --git a/src/components/global.ts b/src/components/global.ts
index 9fdbcea..829c6bf 100644
--- a/src/components/global.ts
+++ b/src/components/global.ts
@@ -1,6 +1,6 @@
 // import Vue from 'vue'
 import { createApp } from 'vue'
-import App from '@/App.vue'
+import App from '@/views/App.vue'
 
 function capitalizeFirstLetter(string: string) {
   return string.charAt(0).toUpperCase() + string.slice(1)
diff --git a/src/firebase/auth.ts b/src/firebase/auth.ts
index 729910b..f8dbb16 100644
--- a/src/firebase/auth.ts
+++ b/src/firebase/auth.ts
@@ -20,7 +20,7 @@ export const getFirebaseUser = () => {
       console.log(`[firebase] onAuthStateChanged`)
       if (user) {
         console.log('[auth] Get Firebase User', user)
-        store.login(user)
+        await store.login(user)
       } else {
         store.logout()
       }
diff --git a/src/firebase/config.ts b/src/firebase/config.ts
index afb0394..2539c1f 100644
--- a/src/firebase/config.ts
+++ b/src/firebase/config.ts
@@ -1,6 +1,6 @@
-import { initializeApp } from 'firebase/app'
+import { initializeApp, FirebaseOptions } from 'firebase/app'
 
-const firebaseConfig = {
+const firebaseConfig: FirebaseOptions = {
   apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
   authDomain: import.meta.env.VITE_FIREBASE_AUTO_DOMAIN,
   projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
@@ -8,7 +8,7 @@ const firebaseConfig = {
   messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
   appId: import.meta.env.VITE_FIREBASE_APP_ID,
   measurementId: import.meta.env.VITE_FIREBASE_MEASUREMENT_ID
-}
+} as FirebaseOptions
 
 export const initFirebase = () => {
   initializeApp(firebaseConfig)
diff --git a/src/main.ts b/src/main.ts
index 317e88c..a1b1fd5 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,5 +1,5 @@
 import { createApp } from 'vue'
-import App from './App.vue'
+import App from './views/App.vue'
 import router from './router'
 import { createPinia } from 'pinia'
 import { getFirebaseUser } from '@/firebase/auth'
@@ -8,6 +8,7 @@ import { initFirebase } from '@/firebase/config'
 import Datepicker from 'vue3-date-time-picker'
 import 'vue3-date-time-picker/dist/main.css'
 
+import '@popperjs/core'
 import 'bootstrap'
 import 'bootstrap/dist/css/bootstrap.min.css'
 import 'bootswatch/dist/minty/bootstrap.min.css'
diff --git a/src/models/Category.ts b/src/models/Category.ts
index a2d35fd..20ec709 100644
--- a/src/models/Category.ts
+++ b/src/models/Category.ts
@@ -4,7 +4,7 @@ export class Category {
   id!: number
   name!: string
   icon!: string
-  // photoUrl?: string
+  photoUrl!: string | null
   type!: CategoryType
   deletedAt!: Date | null
   createdAt!: Date
diff --git a/src/router/index.ts b/src/router/index.ts
index 16bb171..d4c490b 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,7 +1,7 @@
 import { Toast } from '@/utils/swal'
 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
 import { useStore } from '../store/index'
-import Default from '@/views/Default.vue'
+import AppLayout from '@/views/App.vue'
 
 const root = '/jm-expense-vue-ts'
 
@@ -73,15 +73,15 @@ export const routes: RouteRecordRaw[] = [
       show: true
     }
   },
-  {
-    path: `${root}/tools`,
-    name: 'Tools',
-    component: () => import('../views/Tools.vue'),
-    meta: {
-      pageTitle: '小工具',
-      show: true
-    }
-  },
+  // {
+  //   path: `${root}/tools`,
+  //   name: 'Tools',
+  //   component: () => import('../views/Tools.vue'),
+  //   meta: {
+  //     pageTitle: '小工具',
+  //     show: true
+  //   }
+  // },
   {
     path: `${root}/game`,
     name: 'Game',
@@ -92,74 +92,63 @@ export const routes: RouteRecordRaw[] = [
       // auth: ['root', 'admin', 'member']
     }
   },
-  {
-    path: `${root}/admin`,
-    name: 'Admin',
-    redirect: { name: 'Admin-Role' },
-    component: Default,
-    meta: {
-      pageTitle: '管理面板',
-      show: true
-    }
-    // children: [
-    //   {
-    //     path: 'role',
-    //     name: 'Admin-Role',
-    //     component: () => import('../views/Role.vue'),
-    //     meta: {
-    //       pageTitle: '角色管理',
-    //       show: true
-    //     }
-    //   },
-    //   {
-    //     path: 'permission',
-    //     name: 'Admin-Permission',
-    //     component: () => import('../views/Permission.vue'),
-    //     meta: {
-    //       pageTitle: '權限管理',
-    //       show: true
-    //     }
-    //   }
-    // ]
-  },
-  {
-    path: '/admin/role',
-    name: 'Admin-Role',
-    component: () => import('@/views/Role.vue'),
-    meta: {
-      pageTitle: '角色管理',
-      show: true
-    }
-    // children: [
-    //   {
-    //     path: ':id/access',
-    //     name: 'Admin-Role-Access',
-    //     component: () => import('@/views/Access.vue'),
-    //     meta: {
-    //       pageTitle: '角色管理 / 設置權限[角色名稱]',
-    //       show: false
-    //     }
-    //   }
-    // ]
-  },
-  {
-    path: '/admin/role/:id/access',
-    name: 'Admin-Role-Access',
-    component: () => import('@/views/Access.vue'),
-    meta: {
-      pageTitle: '角色管理 / 設置權限[角色名稱]',
-      show: false
-    }
-  },
-  {
-    path: '/admin/permission',
-    name: 'Admin-Permission',
-    component: () => import('../views/Permission.vue'),
-    meta: {
-      pageTitle: '權限管理',
-      show: true
-    }
-  },
+  // {
+  //   path: `${root}/admin`,
+  //   name: 'Admin',
+  //   redirect: { name: 'Admin-Role' },
+  //   component: AppLayout,
+  //   meta: {
+  //     pageTitle: '管理面板',
+  //     show: true
+  //   },
+  //   children: [
+  //     {
+  //       path: 'role',
+  //       name: 'Admin-Role',
+  //       component: () => import('../views/Role.vue'),
+  //       meta: {
+  //         pageTitle: '角色管理',
+  //         show: true
+  //       }
+  //     },
+  //     {
+  //       path: 'permission',
+  //       name: 'Admin-Permission',
+  //       component: () => import('../views/Permission.vue'),
+  //       meta: {
+  //         pageTitle: '權限管理',
+  //         show: true
+  //       }
+  //     }
+  //   ]
+  // },
+  // {
+  //   path: `${root}/admin/role`,
+  //   name: 'Admin-Role',
+  //   component: () => import('@/views/Role.vue'),
+  //   meta: {
+  //     pageTitle: '角色管理',
+  //     show: true
+  //   }
+  // },
+  // {
+  //   path: '/admin/role/:id/access',
+  //   name: 'Admin-Role-Access',
+  //   component: () => import('@/views/Access.vue'),
+  //   meta: {
+  //     pageTitle: '角色管理 / 設置權限[角色名稱]',
+  //     show: false
+  //   }
+  // },
+  // {
+  //   path: '/admin/permission',
+  //   name: 'Admin-Permission',
+  //   component: () => import('../views/Permission.vue'),
+  //   meta: {
+  //     pageTitle: '權限管理',
+  //     show: true
+  //   }
+  // },
   {
     path: '/:pathMatch(.*)*',
     name: 'NotFound',
diff --git a/src/store/index.ts b/src/store/index.ts
index 05d22c3..6614b9a 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -43,9 +43,9 @@ export const useStore = defineStore('index', {
         console.error('error')
       }
     },
-    login(user: FirebaseUser) {
+    async login(user: FirebaseUser) {
       this.firebaseUser = user
-      this.getCurrentUser(user.email!)
+      await this.getCurrentUser(user.email!)
     },
     logout() {
       this.firebaseUser = null
diff --git a/src/utils/swal.ts b/src/utils/swal.ts
index baf1d07..e530ef2 100644
--- a/src/utils/swal.ts
+++ b/src/utils/swal.ts
@@ -1,4 +1,5 @@
-import Swal from 'sweetalert2'
+import Swal from 'sweetalert2/dist/sweetalert2.js'
+import 'sweetalert2/dist/sweetalert2.css'
 
 export const Toast = Swal.mixin({
   toast: true,
@@ -11,3 +12,5 @@ export const ConfirmBox = Swal.mixin({
   showConfirmButton: true,
   showCancelButton: true
 })
+
+export { Swal }
diff --git a/src/App.vue b/src/views/App.vue
similarity index 96%
rename from src/App.vue
rename to src/views/App.vue
index 8980d16..3f9e6e9 100644
--- a/src/App.vue
+++ b/src/views/App.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import Navbar from '@/components/Navbar.vue'
-import { onLoad } from './cocos/config'
+import { onLoad } from '../cocos/config'
 import { useRoute } from 'vue-router'
 const route = useRoute()
 
@@ -11,7 +11,6 @@ if (import.meta.env.NODE_ENV === 'production') {
 </script>
 
 <template>
-  <!-- <div> -->
   <Navbar>
     <template #main>
       <router-view v-slot="{ Component }">
@@ -21,7 +20,6 @@ if (import.meta.env.NODE_ENV === 'production') {
       </router-view>
     </template>
   </Navbar>
-  <!-- </div> -->
 </template>
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;700&display=swap');
diff --git a/src/views/Expense.vue b/src/views/Expense.vue
index 9913684..3d292c3 100644
--- a/src/views/Expense.vue
+++ b/src/views/Expense.vue
@@ -127,7 +127,7 @@ provide('categoriesByType', categoriesByType)
     </div>
     <!-- filter -->
     <div class="d-flex mb-4" style="width: 100%">
-      <div class="mt-4" style="width: 50px">
+      <div class="mt-4" style="width: 100px">
         <label for="type" style="float: left; font-size: 0.7em">TYPE</label>
         <select class="form-select" id="type" aria-label="Default select example" v-model="selectedType">
           <option selected>ALL</option>
diff --git a/src/views/Role.vue b/src/views/Role.vue
index d640223..d650ccd 100644
--- a/src/views/Role.vue
+++ b/src/views/Role.vue
@@ -49,13 +49,13 @@ provide('refetchRoles', fetchRoles)
           <td>{{ role.name }}</td>
           <td>{{ role.name_en }}</td>
           <td>{{ role.deletedAt === null ? 'V' : 'X' }}</td>
-          <td>
+          <!-- <td>
             <router-link :to="{ name: 'Admin-Role-Access', params: { id: role.id } }">
               <i class="fa-solid fa-circle-question"></i
             ></router-link>
             <EditRoleModalButton :role="role" class="ms-2" />
             <DeleteRoleModalButton :role="role" class="ms-2" />
-          </td>
+          </td> -->
         </tr>
       </tbody>
     </table>
diff --git a/vite.config.js b/vite.config.js
index dc18bb5..6853f05 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -11,5 +11,8 @@ export default defineConfig({
     alias: {
       '@': path.resolve(__dirname, './src')
     }
+  },
+  server: {
+    port: 8080
   }
 })