diff --git a/app/components/common/InputNumber.vue b/app/components/common/InputNumber.vue
index d95ea60..0f65798 100644
--- a/app/components/common/InputNumber.vue
+++ b/app/components/common/InputNumber.vue
@@ -47,7 +47,7 @@ export default {
     }
   },
   watch: {
-    record: function (newVal) {
+    record() {
       this.value = this.$numtoString(this.record[this.attr]);
     },
   },
diff --git a/app/components/common/NoteInfo.vue b/app/components/common/NoteInfo.vue
index a678899..d63fb63 100644
--- a/app/components/common/NoteInfo.vue
+++ b/app/components/common/NoteInfo.vue
@@ -99,10 +99,10 @@ export default {
   },
   computed: {
     login: {
-      get: function () {
+      get() {
         return this.$store.login;
       },
-      set: function (val) {
+      set(val) {
         this.$store.commit("updateLogin", { login: val });
       },
     },
diff --git a/app/components/datatable/CreateTemplate.vue b/app/components/datatable/CreateTemplate.vue
index 1895c47..910a6a4 100644
--- a/app/components/datatable/CreateTemplate.vue
+++ b/app/components/datatable/CreateTemplate.vue
@@ -517,11 +517,11 @@ const initData = function () {
   condition = conditions.find((v) => v.code === "no");
 };
 /*watch: {
-    expression: function(newVal) {
+    expression(newVal) {
       if($empty(newVal)) return
       elsecheckExpression()
     },
-    tab: function(newVal, oldVal) {
+    tab(newVal, oldVal) {
       if(oldVal===undefined) return
       if(newVal.code==='template') {
         let value = '<div>'
diff --git a/app/components/datatable/DataTable.vue b/app/components/datatable/DataTable.vue
index eae0a35..7ce9448 100644
--- a/app/components/datatable/DataTable.vue
+++ b/app/components/datatable/DataTable.vue
@@ -110,17 +110,17 @@
       </tbody>
     </table>
     <DatatablePagination
-      v-bind="{ data: data, perPage: perPage }"
-      @changepage="changePage"
       v-if="showPaging"
-    ></DatatablePagination>
+      v-bind="{ data, perPage }"
+      @changepage="changePage"
+    />
   </div>
   <Modal
+    v-if="showmodal"
+    v-bind="showmodal"
     @close="close"
     @selected="doSelect"
     @confirm="confirmRemove"
-    v-bind="showmodal"
-    v-if="showmodal"
   />
 </template>
 <script setup>
diff --git a/app/components/datatable/FilterOption.vue b/app/components/datatable/FilterOption.vue
index 5445a1b..8f4f79d 100644
--- a/app/components/datatable/FilterOption.vue
+++ b/app/components/datatable/FilterOption.vue
@@ -169,33 +169,33 @@ export default {
       this.tagsField.push(this.pageData.fields.find((v) => v.name === this.field.name));
   },
   watch: {
-    expression: function (newVal) {
+    expression(newVal) {
       if (this.$empty(newVal)) return;
       else this.changeStyle();
     },
   },
   computed: {
     colorscheme: {
-      get: function () {
-        return this.$store.state.colorscheme;
+      get() {
+        return this.$store.colorscheme;
       },
-      set: function (val) {
+      set(val) {
         this.$store.commit("updateColorScheme", { colorscheme: val });
       },
     },
     pageData: {
-      get: function () {
-        return this.$store.state[this.pagename];
+      get() {
+        return this.$store[this.pagename];
       },
-      set: function (val) {
+      set(val) {
         this.$store.commit("updateStore", { name: this.pagename, data: val });
       },
     },
     colorchoice: {
-      get: function () {
-        return this.$store.state.colorchoice;
+      get() {
+        return this.$store.colorchoice;
       },
-      set: function (val) {
+      set(val) {
         this.$store.commit("updateColorChoice", { colorchoice: val });
       },
     },
diff --git a/app/components/datatable/TimeOption.vue b/app/components/datatable/TimeOption.vue
index 87e850f..1dbafed 100644
--- a/app/components/datatable/TimeOption.vue
+++ b/app/components/datatable/TimeOption.vue
@@ -295,7 +295,7 @@ export default {
   },
 
   computed: {
-    lang: function () {
+    lang() {
       return this.store.lang;
     },
   },
diff --git a/app/components/datepicker/EventDetail.vue b/app/components/datepicker/EventDetail.vue
index 6f51a2f..310b660 100644
--- a/app/components/datepicker/EventDetail.vue
+++ b/app/components/datepicker/EventDetail.vue
@@ -133,13 +133,13 @@ export default {
     this.showDate();
   },
   watch: {
-    date: function (newVal) {
+    date(newVal) {
       if (newVal) this.showDate();
     },
-    vmonth: function (newVal) {
+    vmonth() {
       this.showDate();
     },
-    events: function (newVal) {
+    events() {
       this.showDate();
     },
   },
diff --git a/app/components/datepicker/EventSummary.vue b/app/components/datepicker/EventSummary.vue
index 3d48d64..f2e542e 100644
--- a/app/components/datepicker/EventSummary.vue
+++ b/app/components/datepicker/EventSummary.vue
@@ -142,10 +142,10 @@ export default {
     this.showDate();
   },
   watch: {
-    date: function (newVal) {
+    date(newVal) {
       if (newVal) this.showDate();
     },
-    events: function (newVal) {
+    events(newVal) {
       this.showDate();
     },
   },
diff --git a/app/components/dialog/ApprovalCode.vue b/app/components/dialog/ApprovalCode.vue
index dbbab87..25eb8d1 100644
--- a/app/components/dialog/ApprovalCode.vue
+++ b/app/components/dialog/ApprovalCode.vue
@@ -46,10 +46,10 @@ export default {
   },
   computed: {
     approvalcode: {
-      get: function () {
+      get() {
         return this.$store.state["approvalcode"];
       },
-      set: function (val) {
+      set(val) {
         this.$store.commit("updateStore", { name: "approvalcode", data: val });
       },
     },
diff --git a/app/components/dialog/Delete.vue b/app/components/dialog/Delete.vue
index 23889cd..2fc0490 100644
--- a/app/components/dialog/Delete.vue
+++ b/app/components/dialog/Delete.vue
@@ -1,20 +1,21 @@
 <template>
   <div>
-    <p v-html="content"></p>
-    <p class="border-bottom mt-4 mb-5"></p>
-    <div class="field is-grouped">
-      <div class="control is-expanded">
+    <div class="block">
+      <p v-html="content"></p>
+    </div>
+    <div class="is-flex">
+      <div class="buttons mb-0">
         <button
           class="button is-danger"
-          @click="remove()"
+          @click="remove"
         >
           Đồng ý
         </button>
         <button
-          class="button is-dark ml-5"
-          @click="cancel()"
+          class="button is-white"
+          @click="cancel"
         >
-          Hủy bỏ
+          Hủy
         </button>
       </div>
       <div
@@ -22,9 +23,9 @@
         v-if="duration"
       >
         <CountDown
-          v-bind="{ duration: duration }"
-          @close="cancel()"
-        ></CountDown>
+          :duration="duration"
+          @close="cancel"
+        />
       </div>
     </div>
   </div>
@@ -38,7 +39,7 @@ export default {
     },
     async remove() {
       let pagename = this.vbind.pagename;
-      let pagedata = this.$store.state[pagename];
+      let pagedata = this.$store[pagename];
       let name = pagedata.origin_api.name || this.vbind.api;
       let id = this.vbind.row.id;
       let result;
@@ -50,7 +51,7 @@ export default {
       if (result === "error") return this.$dialog("Đã xảy ra lỗi, xóa dữ liệu thất bại", "Lỗi", "Error");
       this.$snackbar("Dữ liệu đã được xoá khỏi hệ thống", "Success");
       let arr = Array.isArray(id) ? id : [{ id: id }];
-      let copy = this.$copy(this.$store.state[pagename].data);
+      let copy = this.$copy(this.$store[pagename].data);
       arr.map((x) => {
         let index = copy.findIndex((v) => v.id === x.id);
         index >= 0 ? this.$delete(copy, index) : false;
diff --git a/app/components/media/FileList.vue b/app/components/media/FileList.vue
index 2dc74e4..f60d072 100644
--- a/app/components/media/FileList.vue
+++ b/app/components/media/FileList.vue
@@ -40,10 +40,10 @@ export default {
   },
   computed: {
     pagedata: {
-      get: function () {
+      get() {
         return this.$store.state[this.pagename1];
       },
-      set: function (val) {
+      set(val) {
         this.$store.commit("updateStore", { name: this.pagename1, data: val });
       },
     },
diff --git a/app/components/media/ImageShow.vue b/app/components/media/ImageShow.vue
index 49e73d7..5f7b4f1 100644
--- a/app/components/media/ImageShow.vue
+++ b/app/components/media/ImageShow.vue
@@ -72,10 +72,10 @@ export default {
   },
   computed: {
     viewport: {
-      get: function () {
-        return this.$store.state.viewport;
+      get() {
+        return this.$store.viewport;
       },
-      set: function (val) {
+      set(val) {
         this.$store.commit("updateViewPort", { viewport: val });
       },
     },
diff --git a/app/components/media/Imagebox.vue b/app/components/media/Imagebox.vue
index e06b198..6313934 100644
--- a/app/components/media/Imagebox.vue
+++ b/app/components/media/Imagebox.vue
@@ -295,7 +295,7 @@ export default {
         { name: "image", icon: "material-symbols:grid-view-outline-rounded" },
       ],
       timer: undefined,
-      vbind: { api: "file", setting: "image-fields" },
+      vbind: { api: "file", setting: "image-fields", pagename: "image-fields" },
       dataFiles: [],
       files: [],
       docid: this.$id(),
@@ -314,7 +314,7 @@ export default {
     this.data = result[0].data.rows;
   },
   watch: {
-    data: function () {
+    data() {
       this.group = [];
       for (let index = 0; index < this.data.length / (this.type === "video" ? 4 : 5); index++) {
         this.group.push(index);
@@ -323,18 +323,18 @@ export default {
   },
   computed: {
     login: {
-      get: function () {
+      get() {
         return this.$store.login;
       },
-      set: function (val) {
+      set(val) {
         this.$store.commit("updateLogin", { login: val });
       },
     },
     media: {
-      get: function () {
+      get() {
         return this.$store.media;
       },
-      set: function (val) {
+      set(val) {
         this.$store.commit("updateMedia", { media: val });
       },
     },
diff --git a/app/components/menu/MenuFile.vue b/app/components/menu/MenuFile.vue
index 8856b77..4c7297a 100644
--- a/app/components/menu/MenuFile.vue
+++ b/app/components/menu/MenuFile.vue
@@ -1,71 +1,84 @@
 <template>
   <div>
-    <b-tooltip
-      label="Mở file"
-      position="is-left"
-      type="is-link"
+    <button
+      @click="openFile(row)"
+      class="button is-small is-ghost"
     >
-      <a
-        class="mr-3"
-        @click="openFile(row)"
-      >
-        <SvgIcon v-bind="{ name: 'open.svg', type: 'dark', size: 16 }"></SvgIcon>
-      </a>
-    </b-tooltip>
-    <!-- <b-tooltip label="Tải xuống" position="is-left" type="is-link">
-      <a class="mr-3" @click="download(row)">
-        <SvgIcon v-bind="{name: 'download1.svg', type: 'dark', size: 16}"></SvgIcon>
-      </a>
-    </b-tooltip> -->
-    <b-tooltip
-      label="Xóa"
-      position="is-left"
-      type="is-danger"
-      v-if="disable ? !disable.delete : true"
+      <span class="icon">
+        <Icon
+          name="material-symbols:open-in-new-rounded"
+          :size="18"
+        />
+      </span>
+    </button>
+    <button
+      @click="download(row)"
+      class="button is-small is-ghost"
     >
-      <a @click="remove()">
-        <SvgIcon v-bind="{ name: 'bin1.svg', type: 'dark', size: 16 }"></SvgIcon>
-      </a>
-    </b-tooltip>
+      <span class="icon">
+        <Icon
+          name="material-symbols:download-rounded"
+          :size="18"
+        />
+      </span>
+    </button>
+    <button
+      @click="remove"
+      class="button is-small is-ghost"
+    >
+      <span class="icon">
+        <Icon
+          name="material-symbols:delete-outline-rounded"
+          :size="18"
+          class="has-text-danger"
+        />
+      </span>
+    </button>
+    <Modal
+      v-if="showModal"
+      v-bind="showModal"
+      @close="showModal = undefined"
+    />
   </div>
 </template>
-<script>
-export default {
-  props: ["api", "pagename", "row", "disable"],
-  methods: {
-    async openFile(row) {
-      const url = `${this.$getpath()}static/files/${row.file__file || row.file}`;
-      window.open(url, "_blank");
+<script setup>
+import Modal from "~/components/Modal.vue";
+
+const { $getpath } = useNuxtApp();
+
+const showModal = ref();
+const props = defineProps(["api", "pagename", "row", "disable"]);
+const emit = defineEmits(["open"]);
+
+async function openFile(row) {
+  const url = `${$getpath()}static/files/${row.file__file || row.file}`;
+  window.open(url, "_blank");
+}
+
+async function download(row) {
+  const url = `${$getpath()}static/files/${row.file__file || row.file}`;
+  const link = document.createElement("a");
+  link.href = url;
+  link.target = "_blank";
+  link.setAttribute("download", row.file);
+  link.click();
+}
+
+function remove() {
+  showModal.value = {
+    component: "dialog/Delete",
+    title: "Xóa file",
+    width: "500px",
+    height: "auto",
+    vbind: {
+      content: `Bạn có muốn xóa file <b>${props.row.name}</b> không?`,
+      duration: 10,
+      vbind: {
+        row: props.row,
+        api: props.api,
+        pagename: props.pagename,
+      },
     },
-    async downloadFile(url, fileName) {
-      // const response = await fetch(url, { method: "GET" });
-      // const blob = await response.blob();
-      const urlDownload = url; //window.URL.createObjectURL(blob);
-      const link = document.createElement("a");
-      link.href = urlDownload;
-      link.setAttribute("download", fileName);
-      link.click();
-    },
-    async download(row) {
-      let url = `${this.$getpath()}static/files/${row.file__file || row.file}`;
-      await this.downloadFile(url, row.file__file || row.file);
-    },
-    remove() {
-      let text = "Bạn có muốn xóa file <b>#file</b> không?";
-      text = text.replace("#file", this.row.file__name);
-      let obj = {
-        component: "dialog/Delete",
-        title: this.$store.lang === "en" ? "Delete file" : "Xóa file",
-        width: "500px",
-        height: "100px",
-        vbind: {
-          content: text,
-          duration: 10,
-          vbind: { row: this.row, api: this.api, pagename: this.pagename },
-        },
-      };
-      this.$emit("open", { name: "dataevent", data: { modal: obj } });
-    },
-  },
-};
+  };
+}
 </script>
diff --git a/app/components/parameter/ImportData.vue b/app/components/parameter/ImportData.vue
index fc65410..c5ade7f 100644
--- a/app/components/parameter/ImportData.vue
+++ b/app/components/parameter/ImportData.vue
@@ -180,10 +180,10 @@ export default {
   },
   computed: {
     pagedata: {
-      get: function () {
+      get() {
         return this.$store[this.pagename];
       },
-      set: function (val) {
+      set(val) {
         this.$store.commit(this.pagename, val);
       },
     },
diff --git a/app/components/parameter/ImportSetting.vue b/app/components/parameter/ImportSetting.vue
index 16e6d53..c7dd451 100644
--- a/app/components/parameter/ImportSetting.vue
+++ b/app/components/parameter/ImportSetting.vue
@@ -102,26 +102,26 @@ export default {
   },
   computed: {
     pagedata1: {
-      get: function () {
+      get() {
         return this.$store[this.pagename1];
       },
-      set: function (val) {
+      set(val) {
         this.$store.commit(this.pagename1, val);
       },
     },
     pagedata2: {
-      get: function () {
+      get() {
         return this.$store[this.pagename2];
       },
-      set: function (val) {
+      set(val) {
         this.$store.commit(this.pagename2, val);
       },
     },
     pagedata3: {
-      get: function () {
+      get() {
         return this.$store[this.pagename3];
       },
-      set: function (val) {
+      set(val) {
         this.$store.commit(this.pagename3, val);
       },
     },
diff --git a/app/components/user/NewUser.vue b/app/components/user/NewUser.vue
index 0d33f57..ee95773 100644
--- a/app/components/user/NewUser.vue
+++ b/app/components/user/NewUser.vue
@@ -187,50 +187,50 @@ export default {
   },
   computed: {
     common: {
-      get: function () {
-        return this.$store.state.common;
+      get() {
+        return this.$store.common;
       },
-      set: function (val) {
+      set(val) {
         this.$store.commit("updateCommon", { common: val });
       },
     },
     registermethod: {
-      get: function () {
-        return this.$store.state.registermethod;
+      get() {
+        return this.$store.registermethod;
       },
-      set: function (val) {
+      set(val) {
         this.$store.commit("updateRegisterMethod", { registermethod: val });
       },
     },
     authmethod: {
-      get: function () {
-        return this.$store.state.authmethod;
+      get() {
+        return this.$store.authmethod;
       },
-      set: function (val) {
+      set(val) {
         this.$store.commit("updateAuthMethod", { authmethod: val });
       },
     },
     authstatus: {
-      get: function () {
-        return this.$store.state.authstatus;
+      get() {
+        return this.$store.authstatus;
       },
-      set: function (val) {
+      set(val) {
         this.$store.commit("updateAuthStatus", { authstatus: val });
       },
     },
     usertype: {
-      get: function () {
-        return this.$store.state.usertype;
+      get() {
+        return this.$store.usertype;
       },
-      set: function (val) {
+      set(val) {
         this.$store.commit("updateUserType", { usertype: val });
       },
     },
     dialog: {
-      get: function () {
-        return this.$store.state["dialog"];
+      get() {
+        return this.$store.dialog;
       },
-      set: function (val) {
+      set(val) {
         this.$store.commit("updateStore", { name: "dialog", data: val });
       },
     },
diff --git a/app/plugins/01-common.js b/app/plugins/01-common.js
index 3d72428..823a266 100644
--- a/app/plugins/01-common.js
+++ b/app/plugins/01-common.js
@@ -18,6 +18,7 @@ dayjs.locale("vi");
 export default defineNuxtPlugin((nuxtApp) => {
   const route = useRoute();
   const { $id, $empty, $store } = nuxtApp;
+
   const dialog = function (content, title, type, duration, width, height, vbind) {
     content = typeof content === "string" ? content : JSON.stringify(content);
     const vtitle =