diff --git a/app/components/Caption.vue b/app/components/Caption.vue
index 6a82524..75fa413 100644
--- a/app/components/Caption.vue
+++ b/app/components/Caption.vue
@@ -1,19 +1,13 @@
 <template>
-  <span :class="`icon-text fsb-${props.size || 17} ${props.type || 'has-text-primary'}`">
-    <span>{{ title }}</span>
-    <SvgIcon
-      id="ignore"
-      v-bind="{
-        name: 'right.svg',
-        type: props.type ? props.type.replace('has-text-', '') : null,
-        size: (props.size >= 30 ? props.size * 0.7 : props.size) || 20,
-        alt: 'Mũi tên chỉ hướng',
-      }"
-    ></SvgIcon>
+  <span :class="`icon-text is-flex-wrap-nowrap font-semibold fs-${props.size || 16} ${props.type || ''}`">
+    <span style="text-wrap: nowrap">{{ title }}</span>
+    <span class="icon">
+      <Icon name="material-symbols:arrow-forward-ios-rounded" />
+    </span>
   </span>
 </template>
 <script setup>
-var props = defineProps({
+const props = defineProps({
   type: String,
   size: Number,
   title: String,
diff --git a/app/components/datatable/ContextMenu.vue b/app/components/datatable/ContextMenu.vue
index afba02c..0902cbf 100644
--- a/app/components/datatable/ContextMenu.vue
+++ b/app/components/datatable/ContextMenu.vue
@@ -1,203 +1,262 @@
 <template>
-  <span class="tooltip">
-    <a
-      class="mr-4"
-      @click="checkFilter() ? false : $emit('modalevent', { name: 'dosort', data: 'az' })"
-    >
-      <SvgIcon
-        v-bind="{
-          name: 'az.svg',
-          type: checkFilter() ? 'grey' : 'primary',
-          size: 22,
-        }"
-      ></SvgIcon>
-    </a>
-    <span
-      class="tooltiptext"
-      style="top: 100%; bottom: unset; min-width: max-content; left: 25px"
-      v-html="'Sắp xếp tăng dần'"
-    ></span>
-  </span>
-  <span class="tooltip">
-    <a
-      class="mr-4"
-      @click="checkFilter() ? false : $emit('modalevent', { name: 'dosort', data: 'za' })"
-    >
-      <SvgIcon
-        v-bind="{
-          name: 'az.svg',
-          type: checkFilter() ? 'grey' : 'primary',
-          size: 22,
-        }"
-      ></SvgIcon>
-    </a>
-    <span
-      class="tooltiptext"
-      style="top: 100%; bottom: unset; min-width: max-content; left: 25px"
-      >Sắp xếp giảm dần</span
-    >
-  </span>
-  <span class="tooltip">
-    <a
-      class="mr-4"
-      @click="moveLeft()"
-    >
-      <SvgIcon v-bind="{ name: 'left5.png', type: 'primary', size: 22 }"></SvgIcon>
-    </a>
-    <span
-      class="tooltiptext"
-      style="top: 100%; bottom: unset; min-width: max-content; left: 25px"
-      >Chuyển cột sang trái</span
-    >
-  </span>
-  <span class="tooltip">
-    <a
-      class="mr-4"
-      @click="moveRight()"
-    >
-      <SvgIcon v-bind="{ name: 'right5.png', type: 'primary', size: 22 }"></SvgIcon>
-    </a>
-    <span
-      class="tooltiptext"
-      style="top: 100%; bottom: unset; min-width: max-content; left: 25px"
-      >Chuyển cột sang phải</span
-    >
-  </span>
-  <span class="tooltip">
-    <a
-      class="mr-4"
-      @click="resizeWidth()"
-    >
-      <SvgIcon v-bind="{ name: 'thick.svg', type: 'primary', size: 22 }"></SvgIcon>
-    </a>
-    <span
-      class="tooltiptext"
-      style="top: 100%; bottom: unset; min-width: max-content; left: 25px"
-      >Tăng độ rộng cột</span
-    >
-  </span>
-  <span class="tooltip">
-    <a
-      class="mr-4"
-      @click="resizeWidth(true)"
-    >
-      <SvgIcon v-bind="{ name: 'thin.svg', type: 'primary', size: 23 }"></SvgIcon>
-    </a>
-    <span
-      class="tooltiptext"
-      style="top: 100%; bottom: unset; min-width: max-content; left: 25px"
-      >Giảm độ rộng cột</span
-    >
-  </span>
-  <span class="tooltip">
-    <a
-      class="mr-4"
-      @click="hideField()"
-    >
-      <SvgIcon v-bind="{ name: 'eye-off.svg', type: 'primary', size: 23 }"></SvgIcon>
-    </a>
-    <span
-      class="tooltiptext"
-      style="top: 100%; bottom: unset; min-width: max-content; left: 25px"
-      >Ẩn cột</span
-    >
-  </span>
-  <!-- <template v-if="store.login ? store.login.is_admin : false"> -->
-  <span class="tooltip">
-    <a
-      class="mr-4"
-      @click="currentField.mandatory ? false : doRemove()"
-    >
-      <SvgIcon v-bind="{ name: 'bin.svg', type: 'primary', size: 23 }"></SvgIcon>
-    </a>
-    <span
-      class="tooltiptext"
-      style="top: 100%; bottom: unset; min-width: max-content; left: 25px"
-      >Xóa cột</span
-    >
-  </span>
-  <span class="tooltip">
-    <a
-      class="mr-4"
-      :class="currentField.format === 'number' ? null : 'has-text-grey-light'"
-      @click="currentField.format === 'number' ? $emit('modalevent', { name: 'copyfield', data: currentField }) : false"
-    >
-      <SvgIcon v-bind="{ name: 'copy.svg', type: 'primary', size: 22 }"></SvgIcon>
-    </a>
-    <span
-      class="tooltiptext"
-      style="top: 100%; bottom: unset; min-width: max-content; left: 25px"
-      >Sao chép cột</span
-    >
-  </span>
-  <span class="tooltip">
-    <a
-      class="mr-4"
-      @click="fieldList()"
-    >
-      <SvgIcon v-bind="{ name: 'menu4.png', type: 'primary', size: 22 }"></SvgIcon>
-    </a>
-    <span
-      class="tooltiptext"
-      style="top: 100%; bottom: unset; min-width: max-content; left: 25px"
-      >Danh sách cột</span
-    >
-  </span>
-  <span class="tooltip">
-    <a
-      class="mr-4"
-      @click="createField()"
-    >
-      <SvgIcon v-bind="{ name: 'add.png', type: 'primary', size: 22 }"></SvgIcon>
-    </a>
-    <span
-      class="tooltiptext"
-      style="top: 100%; bottom: unset; min-width: max-content; left: 25px"
-      >Tạo cột mới</span
-    >
-  </span>
-  <span class="tooltip">
-    <a
-      class="mr-4"
-      @click="tableOption()"
-    >
-      <SvgIcon v-bind="{ name: 'more.svg', type: 'primary', size: 22 }"></SvgIcon>
-    </a>
-    <span
-      class="tooltiptext"
-      style="top: 100%; bottom: unset; min-width: max-content; left: 25px"
-      >Tùy chọn bảng</span
-    >
-  </span>
-  <span class="tooltip">
-    <a
-      class="mr-4"
-      @click="saveSetting()"
-    >
-      <SvgIcon v-bind="{ name: 'save.svg', type: 'primary', size: 22 }"></SvgIcon>
-    </a>
-    <span
-      class="tooltiptext"
-      style="top: 100%; bottom: unset; min-width: max-content; left: 25px"
-      >Lưu thiết lập</span
-    >
-  </span>
-  <!-- </template> -->
-  <div class="panel-tabs mb-2">
-    <a
-      v-for="(v, i) in getMenu().filter((x) =>
-        currentField.format === 'number'
-          ? currentField.formula
-            ? true
-            : x.code !== 'formula'
-          : !['filter', 'formula'].find((y) => y === x.code),
-      )"
-      :key="i"
-      :class="selectTab.code === v.code ? 'is-active' : 'has-text-primary'"
-      @click="changeTab(v)"
-    >
-      {{ v.name }}
-    </a>
+  <div class="field has-addons is-justify-content-center">
+    <p class="control">
+      <button
+        class="button is-light is-primary"
+        @click="checkFilter() ? false : $emit('modalevent', { name: 'dosort', data: 'az' })"
+      >
+        <span class="icon">
+          <Icon
+            name="mdi:sort-alphabetical-ascending"
+            :size="22"
+            :class="checkFilter() && 'has-text-grey-light'"
+          />
+        </span>
+      </button>
+      <span
+        class="tooltiptext"
+        style="top: 110%; bottom: unset; min-width: max-content; left: 25px"
+        >Sắp xếp tăng dần</span
+      >
+    </p>
+    <p class="control">
+      <button
+        class="button is-light is-primary"
+        @click="checkFilter() ? false : $emit('modalevent', { name: 'dosort', data: 'za' })"
+      >
+        <span class="icon">
+          <Icon
+            name="mdi:sort-alphabetical-descending"
+            :size="22"
+            :class="checkFilter() && 'has-text-grey-light'"
+          />
+        </span>
+      </button>
+      <span
+        class="tooltiptext"
+        style="top: 110%; bottom: unset; min-width: max-content; left: 25px"
+        >Sắp xếp giảm dần</span
+      >
+    </p>
+    <p class="control">
+      <button
+        class="button is-light is-primary"
+        @click="moveLeft()"
+      >
+        <span class="icon">
+          <Icon
+            name="material-symbols:arrow-back-rounded"
+            :size="22"
+          />
+        </span>
+      </button>
+      <span
+        class="tooltiptext"
+        style="top: 110%; bottom: unset; min-width: max-content; left: 25px"
+        >Chuyển cột sang trái</span
+      >
+    </p>
+    <p class="control">
+      <button
+        class="button is-light is-primary"
+        @click="moveRight()"
+      >
+        <span class="icon">
+          <Icon
+            name="material-symbols:arrow-forward-rounded"
+            :size="22"
+          />
+        </span>
+      </button>
+      <span
+        class="tooltiptext"
+        style="top: 110%; bottom: unset; min-width: max-content; left: 25px"
+        >Chuyển cột sang phải</span
+      >
+    </p>
+    <p class="control">
+      <button
+        class="button is-light is-primary"
+        @click="resizeWidth()"
+      >
+        <span class="icon">
+          <Icon
+            name="fluent:arrow-fit-16-regular"
+            :size="22"
+          />
+        </span>
+      </button>
+      <span
+        class="tooltiptext"
+        style="top: 110%; bottom: unset; min-width: max-content; left: 25px"
+        >Tăng độ rộng cột</span
+      >
+    </p>
+    <p class="control">
+      <button
+        class="button is-light is-primary"
+        @click="resizeWidth(true)"
+      >
+        <span class="icon">
+          <Icon
+            name="fluent:arrow-fit-in-16-regular"
+            :size="22"
+          />
+        </span>
+      </button>
+      <span
+        class="tooltiptext"
+        style="top: 110%; bottom: unset; min-width: max-content; left: 25px"
+        >Giảm độ rộng cột</span
+      >
+    </p>
+    <p class="control">
+      <button
+        class="button is-light is-primary"
+        @click="hideField()"
+      >
+        <span class="icon">
+          <Icon
+            name="material-symbols:visibility-off-outline-rounded"
+            :size="22"
+          />
+        </span>
+      </button>
+      <span
+        class="tooltiptext"
+        style="top: 110%; bottom: unset; min-width: max-content; left: 25px"
+        >Ẩn cột</span
+      >
+    </p>
+    <p class="control">
+      <button
+        class="button is-light is-primary"
+        @click="currentField.mandatory ? false : doRemove()"
+      >
+        <span class="icon">
+          <Icon
+            name="material-symbols:delete-outline-rounded"
+            :size="22"
+          />
+        </span>
+      </button>
+      <span
+        class="tooltiptext"
+        style="top: 110%; bottom: unset; min-width: max-content; left: 25px"
+        >Xóa cột</span
+      >
+    </p>
+    <p class="control">
+      <button
+        class="button is-light is-primary"
+        :class="currentField.format === 'number' ? null : 'has-text-grey-light'"
+        @click="
+          currentField.format === 'number' ? $emit('modalevent', { name: 'copyfield', data: currentField }) : false
+        "
+      >
+        <span class="icon">
+          <Icon
+            name="material-symbols:content-copy-outline-rounded"
+            :size="22"
+          />
+        </span>
+      </button>
+      <span
+        class="tooltiptext"
+        style="top: 110%; bottom: unset; min-width: max-content; left: 25px"
+        >Sao chép cột</span
+      >
+    </p>
+    <p class="control">
+      <button
+        class="button is-light is-primary"
+        @click="fieldList()"
+      >
+        <span class="icon">
+          <Icon
+            name="material-symbols:menu-rounded"
+            :size="22"
+          />
+        </span>
+      </button>
+      <span
+        class="tooltiptext"
+        style="top: 110%; bottom: unset; min-width: max-content; left: 25px"
+        >Danh sách cột</span
+      >
+    </p>
+    <p class="control">
+      <button
+        class="button is-light is-primary"
+        @click="createField()"
+      >
+        <span class="icon">
+          <Icon
+            name="material-symbols:add-2-rounded"
+            :size="22"
+          />
+        </span>
+      </button>
+      <span
+        class="tooltiptext"
+        style="top: 110%; bottom: unset; min-width: max-content; left: 25px"
+        >Tạo cột mới</span
+      >
+    </p>
+    <p class="control">
+      <button
+        class="button is-light is-primary"
+        @click="tableOption()"
+      >
+        <span class="icon">
+          <Icon
+            name="material-symbols:settings-outline-rounded"
+            :size="22"
+          />
+        </span>
+      </button>
+      <span
+        class="tooltiptext"
+        style="top: 110%; bottom: unset; min-width: max-content; left: -45px"
+        >Tùy chọn bảng</span
+      >
+    </p>
+    <p class="control">
+      <button
+        class="button is-light is-primary"
+        @click="saveSetting()"
+      >
+        <span class="icon">
+          <Icon
+            name="material-symbols:save-outline-rounded"
+            :size="22"
+          />
+        </span>
+      </button>
+      <span
+        class="tooltiptext"
+        style="top: 110%; bottom: unset; min-width: max-content; left: -45px"
+        >Lưu thiết lập</span
+      >
+    </p>
+  </div>
+  <div class="tabs is-toggle">
+    <ul class="is-flex-grow-0 mx-auto">
+      <li
+        v-for="(v, i) in getMenu().filter((x) =>
+          currentField.format === 'number'
+            ? currentField.formula
+              ? true
+              : x.code !== 'formula'
+            : !['filter', 'formula'].find((y) => y === x.code),
+        )"
+        :key="i"
+        :class="selectTab.code === v.code ? 'is-active' : 'has-text-primary'"
+        @click="changeTab(v)"
+      >
+        <a class="px-4 py-1.5">{{ v.name }}</a>
+      </li>
+    </ul>
   </div>
   <div v-if="currentTab === 'detail'">
     <p class="fs-14 mt-3">
@@ -210,7 +269,7 @@
           ></SvgIcon>
           <span
             class="tooltiptext"
-            style="top: 100%; bottom: unset; min-width: max-content; left: 25px"
+            style="top: 110%; bottom: unset; min-width: max-content; left: 25px"
             >Copy</span
           >
         </span>
@@ -574,3 +633,12 @@ function resizeWidth(minus) {
   updateFields(currentField);
 }
 </script>
+<style lang="css" scoped>
+p.control {
+  flex-grow: 1;
+
+  > button {
+    width: 100%;
+  }
+}
+</style>
diff --git a/app/components/datatable/DataTable.vue b/app/components/datatable/DataTable.vue
index cd406d1..4033172 100644
--- a/app/components/datatable/DataTable.vue
+++ b/app/components/datatable/DataTable.vue
@@ -64,7 +64,11 @@
               @click="showField(field)"
               :style="field.dropStyle"
             >
-              <a v-if="field.label.indexOf('<') < 0">{{ field.label }}</a>
+              <a
+                v-if="field.label.indexOf('<') < 0"
+                class="has-text-white font-semibold"
+                >{{ field.label }}</a
+              >
               <a v-else>
                 <component
                   :is="dynamicComponent(field.label)"
@@ -156,7 +160,13 @@ var currentPage = 1;
 var displayFields = ref([]);
 var displayData = [];
 var pagedata = store[props.pagename];
-var tablesetting = $copy(pagedata.tablesetting || store.tablesetting);
+console.log("props.pagename", props.pagename);
+console.log("store", toRaw(store));
+console.log("store[props.pagename]", toRaw(store[props.pagename]));
+console.log("pagedata.tablesetting", toRaw(pagedata.tablesetting)); // table-font-size is 13
+console.log("store.tablesetting", toRaw(store.tablesetting)); // table-font-size is 12
+// var tablesetting = $copy(pagedata.tablesetting || store.tablesetting);
+var tablesetting = $copy(store.tablesetting);
 var perPage = Number($find(tablesetting, { code: "per-page" }, "detail")) || 20;
 var filters = $copy(pagedata.filters || []);
 var currentField;
diff --git a/app/components/datatable/ScrollBox.vue b/app/components/datatable/ScrollBox.vue
index c408d47..504a8da 100644
--- a/app/components/datatable/ScrollBox.vue
+++ b/app/components/datatable/ScrollBox.vue
@@ -6,7 +6,10 @@
     <div
       v-for="(v, i) in rows"
       :key="i"
-      :class="['field is-grouped py-1 my-0', i !== rows.length - 1 && 'border-bottom']"
+      class="field is-grouped py-1 my-0"
+      :style="{
+        borderBottom: i !== rows.length - 1 && '1px solid red',
+      }"
     >
       <p
         class="control is-expanded py-0 fs-14 hyperlink"
@@ -18,6 +21,10 @@
           v-if="checked[i] && notick !== true"
         >
           <SvgIcon v-bind="{ name: 'tick.svg', type: 'primary', size: 15 }"></SvgIcon>
+          <Icon
+            name="material-symbols:check-rounded"
+            :size="15"
+          />
         </span>
       </p>
       <p
diff --git a/app/components/datatable/TimeOption.vue b/app/components/datatable/TimeOption.vue
index ba23ef0..862bd9f 100644
--- a/app/components/datatable/TimeOption.vue
+++ b/app/components/datatable/TimeOption.vue
@@ -1,147 +1,144 @@
 <template>
   <div
-    class="pb-1"
-    style="border-bottom: 2px solid #3c5b63"
     v-if="array || !enableTime"
+    class="has-text-primary fixed-grid has-12-cols"
+    style="border-bottom: 2px solid var(--bulma-grey-80)"
   >
-    <div class="columns mx-0 mb-0">
+    <div class="grid mb-3">
       <div
-        class="column is-8 px-0 pb-0"
         v-if="enableTime"
+        class="cell is-col-span-7 is-flex is-align-items-center is-flex-wrap-wrap"
+        style="row-gap: 0.5rem; column-gap: 1rem"
       >
-        <div class="field is-grouped is-grouped-multiline mb-0">
-          <div class="control mb-0">
-            <Caption
-              v-bind="{
-                title: lang === 'vi' ? 'Thời gian' : 'Time',
-                type: 'has-text-warning',
-              }"
-            />
-          </div>
-          <div
-            class="control mb-0"
-            v-for="v in array"
-            :key="v.code"
-          >
-            <span
-              class="icon-text fsb-16 has-text-warning px-1"
-              v-if="v.code === current"
-            >
-              <SvgIcon v-bind="{ name: 'tick.png', size: 20 }"></SvgIcon>
-              <span>{{ v.name }}</span>
-            </span>
-            <span
-              class="icon-text has-text-grey hyperlink px-1 fsb-16"
-              @click="changeOption(v)"
-              v-else
-              >{{ v.name }}</span
-            >
-          </div>
+        <Caption
+          :title="lang === 'vi' ? 'Thời gian' : 'Time'"
+          type="has-text-orange"
+        />
+        <div
+          v-for="v in array"
+          :key="v.code"
+        >
           <span
-            v-if="newDataAvailable"
-            class="has-text-danger is-italic is-size-6 ml-2"
-            >Có dữ liệu mới, vui lòng làm mới.</span
+            v-if="v.code === current"
+            class="icon-text is-flex-wrap-nowrap font-semibold has-text-orange"
           >
+            <span class="icon">
+              <Icon
+                name="material-symbols:check-rounded"
+                :size="22"
+              />
+            </span>
+            <span style="text-wrap: nowrap">{{ v.name }}</span>
+          </span>
+          <span
+            v-else
+            class="icon-text font-semibold has-text-grey is-clickable"
+            style="text-wrap: nowrap"
+            @click="changeOption(v)"
+          >
+            {{ v.name }}
+          </span>
         </div>
+        <span
+          v-if="newDataAvailable"
+          class="has-text-danger is-italic is-size-6 ml-2"
+          >Có dữ liệu mới, vui lòng làm mới.</span
+        >
       </div>
-      <div class="column is-4 px-0">
-        <div class="field is-grouped is-grouped-multiline mb-0">
-          <div class="control mb-0">
-            <Caption
-              v-bind="{
-                type: 'has-text-warning',
-                title: lang === 'vi' ? `Tìm ${viewport === 1 ? '' : 'kiếm'}` : 'Search',
-              }"
-            />
-          </div>
-          <div class="control mb-0">
-            <input
-              class="input is-small"
-              type="text"
-              v-model="text"
-              :style="`${viewport === 1 ? 'width:150px;' : ''} border: 1px solid #BEBEBE;`"
-              @keyup="startSearch"
-              id="input"
-              :placeholder="lang === 'vi' ? 'Nhập từ khóa...' : 'Enter keyword...'"
-            />
-          </div>
-          <div class="control mb-0">
-            <span
-              class="tooltip"
-              v-if="importdata && $getEditRights()"
-            >
-              <a
-                class="mr-2"
-                @click="openImport()"
-              >
-                <SvgIcon
-                  v-bind="{
-                    name: 'upload.svg',
-                    type: 'findata',
-                    size: 22,
-                  }"
-                ></SvgIcon>
-              </a>
-              <span
-                class="tooltiptext"
-                style="min-width: max-content"
-              >
-                {{ lang === "vi" ? "Nhập dữ liệu" : "Import data" }}
-              </span>
-            </span>
-            <span
-              class="tooltip"
-              v-if="enableAdd && $getEditRights()"
-            >
-              <a
-                class="mr-2"
-                @click="$emit('add')"
-              >
-                <SvgIcon v-bind="{ name: 'add1.png', type: 'findata', size: 22 }"></SvgIcon>
-              </a>
-              <span
-                class="tooltiptext"
-                style="min-width: max-content"
-                >{{ lang === "vi" ? "Thêm mới" : "Add new" }}</span
-              >
-            </span>
-            <span class="tooltip">
-              <a
-                class="mr-2"
-                @click="$emit('excel')"
-              >
-                <SvgIcon v-bind="{ name: 'excel.png', type: 'findata', size: 22 }"></SvgIcon>
-              </a>
-              <span
-                class="tooltiptext"
-                style="min-width: max-content"
-                >{{ lang === "vi" ? "Xuất excel" : "Export excel" }}</span
-              >
-            </span>
-
-            <span class="tooltip">
-              <a @click="$emit('refresh-data')">
-                <SvgIcon v-bind="{ name: 'refresh.svg', type: 'findata', size: 22 }"></SvgIcon>
-              </a>
-              <span
-                class="tooltiptext"
-                style="min-width: max-content"
-                >{{ lang === "vi" ? "Làm mới" : "Refresh" }}</span
-              >
-            </span>
+      <div class="cell is-col-span-5 is-flex is-align-items-center is-gap-1 is-flex-wrap-wrap">
+        <Caption
+          :title="lang === 'vi' ? `Tìm ${viewport === 1 ? '' : 'kiếm'}` : 'Search'"
+          type="has-text-orange"
+        />
+        <input
+          class="input is-small is-orange"
+          type="text"
+          v-model="text"
+          :style="`${viewport === 1 ? 'width:150px;' : ''} border: 1px solid var(--bulma-grey-80); max-width: 160px`"
+          @keyup="startSearch"
+          id="input"
+          :placeholder="lang === 'vi' ? 'Nhập từ khóa...' : 'Enter keyword...'"
+        />
+        <div class="field has-addons is-flex is-flex-wrap-wrap is-gap-0 is-align-items-center">
+          <span
+            class="tooltip"
+            v-if="importdata && $getEditRights()"
+          >
             <a
-              class="button is-primary is-loading is-small ml-3"
-              v-if="loading"
-            ></a>
-          </div>
+              class="mr-2"
+              @click="openImport()"
+            >
+              <SvgIcon
+                v-bind="{
+                  name: 'upload.svg',
+                  type: 'findata',
+                  size: 22,
+                }"
+              ></SvgIcon>
+            </a>
+            <span
+              class="tooltiptext"
+              style="min-width: max-content"
+            >
+              {{ lang === "vi" ? "Nhập dữ liệu" : "Import data" }}
+            </span>
+          </span>
+          <span
+            class="tooltip"
+            v-if="enableAdd && $getEditRights()"
+          >
+            <a
+              class="mr-2"
+              @click="$emit('add')"
+            >
+              <SvgIcon v-bind="{ name: 'add1.png', type: 'findata', size: 22 }"></SvgIcon>
+            </a>
+            <span
+              class="tooltiptext"
+              style="min-width: max-content"
+              >{{ lang === "vi" ? "Thêm mới" : "Add new" }}</span
+            >
+          </span>
+          <p class="control">
+            <button
+              class="button is-ghost has-text-orange fs-14"
+              @click="$emit('excel')"
+            >
+              <span class="icon">
+                <Icon
+                  name="mdi:microsoft-excel"
+                  :size="22"
+                />
+              </span>
+              <span>Xuất excel</span>
+            </button>
+          </p>
+          <p class="control">
+            <button
+              class="button is-ghost has-text-orange fs-14"
+              @click="$emit('refresh-data')"
+            >
+              <span class="icon">
+                <Icon
+                  name="material-symbols:refresh-rounded"
+                  :size="22"
+                />
+              </span>
+              <span>Làm mới</span>
+            </button>
+          </p>
+          <Icon
+            v-if="loading"
+            name="svg-spinners:90-ring"
+            :size="22"
+          />
         </div>
       </div>
     </div>
     <Modal
-      @close="showmodal = undefined"
       v-bind="showmodal"
-      v-if="showmodal"
-    ></Modal>
+      @close="showmodal = undefined"
+    />
   </div>
 </template>
 
diff --git a/app/components/media/FileUpload.vue b/app/components/media/FileUpload.vue
index 4a8381b..06faab6 100644
--- a/app/components/media/FileUpload.vue
+++ b/app/components/media/FileUpload.vue
@@ -98,7 +98,6 @@ function doChange() {
     dataFiles.value.push(file);
   });
 
-  console.log("dataFiles.value", dataFiles.value);
   showmodal.value = {
     component: "media/UploadProgress",
     title: "Upload files",
diff --git a/app/plugins/00-datatable.js b/app/plugins/00-datatable.js
index 46570e4..583e326 100644
--- a/app/plugins/00-datatable.js
+++ b/app/plugins/00-datatable.js
@@ -36,6 +36,12 @@ export default defineNuxtPlugin(() => {
 
   const filter = function (arr, obj, attr) {
     const keys = Object.keys(obj);
+
+    if (!arr) {
+      console.error(`$filter: arr is ${arr}`);
+      return [];
+    }
+
     let rows = arr.filter((v) => {
       let valid = true;
       keys.map((key) => {