diff --git a/app/assets/styles/utils.scss b/app/assets/styles/utils.scss
index 0d89591..823a24f 100644
--- a/app/assets/styles/utils.scss
+++ b/app/assets/styles/utils.scss
@@ -1,5 +1,9 @@
 @use "sass:list";
 
+.debug {
+  border: 1px solid red !important;
+}
+
 // Font size loops
 @for $i from 10 through 50 {
   .fs-#{$i} {
diff --git a/app/components/datatable/DataTable.vue b/app/components/datatable/DataTable.vue
index 96434a5..11620fa 100644
--- a/app/components/datatable/DataTable.vue
+++ b/app/components/datatable/DataTable.vue
@@ -158,6 +158,7 @@ function dynamicComponent(htmlString) {
         default: () => ({}),
       },
     },
+    emits: ["clickevent"],
   });
 }
 var timer = undefined;
@@ -264,10 +265,10 @@ const showField = async function (field) {
   showmodal.value = {
     vbind: {
       pagename: props.pagename,
-      field: field,
-      filters: filters,
-      filterData: filterData,
-      width: width,
+      field,
+      filters,
+      filterData,
+      width,
     },
     component: "datatable/ContextMenu",
     title: field.name,
diff --git a/app/components/datepicker/Datepicker.vue b/app/components/datepicker/Datepicker.vue
index 51b3293..76b7668 100644
--- a/app/components/datepicker/Datepicker.vue
+++ b/app/components/datepicker/Datepicker.vue
@@ -45,8 +45,8 @@ const props = defineProps({
   record: Object,
   attr: String,
   position: String,
-  mindate: String,
-  maxdate: String,
+  mindate: [Date, String],
+  maxdate: [Date, String],
   disabled: Boolean,
 });
 
diff --git a/app/components/datepicker/PickDay.vue b/app/components/datepicker/PickDay.vue
index 9ee71f2..7084589 100644
--- a/app/components/datepicker/PickDay.vue
+++ b/app/components/datepicker/PickDay.vue
@@ -1,50 +1,76 @@
 <template>
   <div
-    class="p-2"
+    class="px-2"
     style="width: 300px"
   >
-    <div class="field is-grouped">
-      <div class="control pl-2">
-        <a
-          class="mr-1"
-          @click="previousYear()"
+    <div class="is-flex is-gap-1 is-justify-content-space-between is-align-items-stretch h-8">
+      <div class="buttons is-gap-0.5 m-0 is-align-items-stretch">
+        <button
+          @click="previousYear"
+          class="button is-text rounded-full"
         >
-          <SvgIcon v-bind="{ name: 'doubleleft.svg', type: 'gray', size: 18 }"></SvgIcon>
-        </a>
-        <a
-          @click="previousMonth()"
+          <span class="icon">
+            <Icon
+              name="ic:baseline-keyboard-double-arrow-left"
+              :size="24"
+            />
+          </span>
+        </button>
+        <button
           v-if="type === 'days'"
+          @click="previousMonth"
+          class="button is-text rounded-full"
         >
-          <SvgIcon v-bind="{ name: 'left1.svg', type: 'gray', size: 18 }"></SvgIcon>
-        </a>
+          <span class="icon">
+            <Icon
+              name="ic:baseline-keyboard-arrow-left"
+              :size="24"
+            />
+          </span>
+        </button>
       </div>
-      <div class="control is-expanded has-text-centered">
-        <a
-          class="font-bold mr-2"
+      <div class="is-flex is-align-items-center is-gap-0">
+        <button
+          v-if="type === 'days'"
           @click="type = 'months'"
-          v-if="type === 'days'"
-          >{{ `T${month}` }}</a
+          class="button is-white p-2 has-text-primary font-bold h-full"
         >
-        <a
-          class="font-bold"
+          T{{ month }}
+        </button>
+        <button
           @click="type = 'years'"
-          >{{ caption || year }}</a
+          class="button is-white p-2 has-text-primary font-bold h-full"
         >
+          {{ caption || year }}
+        </button>
       </div>
-      <div class="control pr-2">
-        <a
-          class="mr-1"
-          @click="nextMonth()"
+      <div class="buttons is-gap-0.5 m-0 is-align-items-stretch">
+        <button
+          class="button is-text rounded-full"
+          @click="nextMonth"
           v-if="type === 'days'"
         >
-          <SvgIcon v-bind="{ name: 'right.svg', type: 'gray', size: 18 }"></SvgIcon>
-        </a>
-        <a @click="nextYear()">
-          <SvgIcon v-bind="{ name: 'doubleright.svg', type: 'gray', size: 18 }"></SvgIcon>
-        </a>
+          <span class="icon">
+            <Icon
+              name="ic:baseline-keyboard-arrow-right"
+              :size="24"
+            />
+          </span>
+        </button>
+        <button
+          @click="nextYear"
+          class="button is-text rounded-full"
+        >
+          <span class="icon">
+            <Icon
+              name="ic:baseline-keyboard-double-arrow-right"
+              :size="24"
+            />
+          </span>
+        </button>
       </div>
     </div>
-    <hr class="mt-0 mb-5" />
+    <hr class="mt-1 mb-5" />
     <div v-if="type === 'days'">
       <div class="columns is-mobile mx-0 mb-3">
         <div
@@ -80,9 +106,9 @@
             <span
               style="width: 25px; height: 25px"
               :class="[
-                'p-1 rounded-md is-flex is-justify-content-center is-align-items-center',
+                'p-1 rounded-full is-flex is-justify-content-center is-align-items-center',
                 {
-                  'has-background-primary-50 has-text-white': m.date === curdate,
+                  'has-background-primary has-text-white': m.date === curdate,
                   'has-background-success-50 has-text-white': m.date === today,
                   'has-text-grey-light': m.currentMonth !== m.monthCondition,
                 },
@@ -96,7 +122,7 @@
       <hr class="my-1" />
       <div class="mt-2 fs-14">
         <span class="ml-2">Hôm nay: </span>
-        <a @click="chooseToday()">{{ $dayjs(today).format("L") }}</a>
+        <a @click="chooseToday">{{ $dayjs(today).format("L") }}</a>
       </div>
     </div>
     <PickMonth
@@ -119,7 +145,7 @@ const { $id, $dayjs, $unique } = useNuxtApp();
 const emit = defineEmits(["date"]);
 const props = defineProps({
   date: String,
-  maxdate: String,
+  maxdate: [Date, String],
 });
 const dates = ref([]);
 const dateOfWeek = [
@@ -255,4 +281,9 @@ watch(
 a {
   color: var(--bulma-link-60);
 }
+.control.has-icons-left .icon,
+.control.has-icons-right .icon {
+  width: 100%;
+  height: 100%;
+}
 </style>
diff --git a/app/components/inventory/InventoryHighlightCard.vue b/app/components/inventory/InventoryHighlightCard.vue
index ce22ac2..9d56a13 100644
--- a/app/components/inventory/InventoryHighlightCard.vue
+++ b/app/components/inventory/InventoryHighlightCard.vue
@@ -1,7 +1,7 @@
 <script setup>
 const props = defineProps({
   name: String,
-  value: String,
+  value: [Number, String],
   unit: String,
   icon: String,
   color: String,
diff --git a/app/components/orders/OrderHighlightCard.vue b/app/components/orders/OrderHighlightCard.vue
index b517752..c1444b6 100644
--- a/app/components/orders/OrderHighlightCard.vue
+++ b/app/components/orders/OrderHighlightCard.vue
@@ -1,7 +1,7 @@
 <script setup>
 const props = defineProps({
   name: String,
-  value: Number,
+  value: [Number, String],
   icon: String,
   color: String,
   unit: String,
diff --git a/app/components/snackbar/Error.vue b/app/components/snackbar/Error.vue
index 053991b..7051ecc 100644
--- a/app/components/snackbar/Error.vue
+++ b/app/components/snackbar/Error.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="is-flex is-align-items-center is-gap-1">
-    <div style="width: 18px; height: 18px">
+    <span class="icon">
       <Icon
         name="material-symbols:cancel-rounded"
         :size="18"
         class="has-text-danger-80"
       />
-    </div>
+    </span>
     <p
       v-html="content"
       class="control is-expanded"
diff --git a/app/components/snackbar/SnackBar.vue b/app/components/snackbar/SnackBar.vue
index f9a87b9..89e1cff 100644
--- a/app/components/snackbar/SnackBar.vue
+++ b/app/components/snackbar/SnackBar.vue
@@ -1,5 +1,4 @@
 <script setup>
-import { defineAsyncComponent } from "vue";
 import { useStore } from "@/stores/index";
 import Info from "@/components/snackbar/Info.vue";
 import Success from "@/components/snackbar/Success.vue";
@@ -10,31 +9,7 @@ const props = defineProps({
 });
 
 const store = useStore();
-const componentFiles = import.meta.glob("@/components/**/*.vue");
-const resolvedComponent = shallowRef(null);
-
-function loadDynamicComponent() {
-  if (!props.component) {
-    resolvedComponent.value = null;
-    return;
-  }
-
-  const fullPath = `/components/snackbar/${props.component}.vue`;
-  const componentPath = Object.keys(componentFiles).find((path) => path.endsWith(fullPath));
-
-  if (componentPath) {
-    resolvedComponent.value = defineAsyncComponent(componentFiles[componentPath]);
-  } else {
-    console.error(`Không tìm thấy component tại: ${fullPath}`);
-    resolvedComponent.value = null;
-  }
-}
-
-// Theo dõi sự thay đổi của props.component để load lại nếu cần
-watchEffect(() => {
-  loadDynamicComponent();
-});
-// setTimeout(() => store.commit("snackbar", undefined), 3900);
+setTimeout(() => store.commit("snackbar", undefined), 3900);
 </script>
 
 <template>
diff --git a/app/components/snackbar/Success.vue b/app/components/snackbar/Success.vue
index f18b246..92e3394 100644
--- a/app/components/snackbar/Success.vue
+++ b/app/components/snackbar/Success.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="is-flex is-align-items-center is-gap-1">
-    <div style="width: 18px; height: 18px">
+    <span class="icon">
       <Icon
         name="material-symbols:check-circle-rounded"
         :size="18"
         class="has-text-success-70"
       />
-    </div>
+    </span>
     <p
       v-html="content"
       class="control is-expanded"