changes

app/components/TopMenu.vue

@@ -7,7 +7,7 @@
     <div class="navbar-brand mr-5">
       <span class="navbar-item is-gap-1">
         <div class="size-4 has-background-primary rounded-full"></div>
-        <span class="fs-17 font-semibold has-text-primary">{{ $dayjs().format("DD/MM") }}</span>
+        <span class="fs-16 font-semibold has-text-primary">{{ $dayjs().format("DD/MM") }}</span>
       </span>
       <a
         class="navbar-item p-0 has-text-primary"

app/components/dashboard/Delivery.vue

@@ -32,7 +32,7 @@ const drivers = [
 <template>
   <div class="card">
     <div class="card-content">
-      <p class="fs-17 font-semibold mb-4">Giao nhận & Tài xế</p>
+      <p class="fs-16 font-semibold mb-4">Giao nhận & Tài xế</p>
       <div class="fixed-grid has-1-cols-mobile has-3-cols">
         <div class="grid">
           <div class="cell is-col-span-2">

app/components/dashboard/OrderStatus.vue

@@ -39,7 +39,7 @@ const statuses = [
 <template>
   <div class="card h-full">
     <div class="card-content">
-      <p class="fs-17 font-semibold mb-4">Trạng thái đơn hàng</p>
+      <p class="fs-16 font-semibold mb-4">Trạng thái đơn hàng</p>
       <div class="fixed-grid has-2-cols-mobile has-4-cols">
         <div class="grid">
           <OrderStatusCard

app/components/dashboard/RevenueChart.vue

@@ -49,7 +49,7 @@ const revenueChartOptions = {
   <div class="card">
     <div class="card-content">
       <div class="is-flex is-justify-content-space-between mb-2">
-        <p style="font-weight: 600; font-size: 18px">Doanh thu theo ngày</p>
+        <p class="fs-16 font-semibold">Doanh thu theo ngày</p>
         <div class="buttons">
           <button class="button is-primary fs-14">7 ngày</button>
           <button class="button is-white fs-14">30 ngày</button>

app/components/dashboard/TopCustomers.vue

@@ -32,7 +32,7 @@ const customers = [
 <template>
   <div class="card">
     <div class="card-content">
-      <p class="fs-17 font-semibold mb-4">Top khách hàng</p>
+      <p class="fs-16 font-semibold mb-4">Top khách hàng</p>
       <div class="is-flex is-flex-direction-column is-gap-1.5">
         <TopCustomer
           v-for="cus in customers"

app/components/dashboard/TopProducts.vue

@@ -32,7 +32,7 @@ const products = [
 <template>
   <div class="card">
     <div class="card-content">
-      <p class="fs-17 font-semibold mb-4">Top sản phẩm</p>
+      <p class="fs-16 font-semibold mb-4">Top sản phẩm</p>
       <div class="is-flex is-flex-direction-column is-gap-2">
         <TopProduct
           v-for="product in products"

app/components/dashboard/Warnings.vue

@@ -25,7 +25,7 @@ const warnings = [
 <template>
   <div class="card">
     <div class="card-content">
-      <p class="fs-17 font-semibold mb-4">Cảnh báo và thông báo</p>
+      <p class="fs-16 font-semibold mb-4">Cảnh báo và thông báo</p>
       <div class="is-flex is-flex-direction-column is-gap-1">
         <Warning
           v-for="warning in warnings"

app/components/datatable/ContextMenu.vue

@@ -149,8 +149,7 @@
     <p class="control">
       <button
         class="button"
-        :class="currentField.format !== 'number' && 'has-text-grey-light'"
-        @click="currentField.format === 'number' && $emit('modalevent', { name: 'copyfield', data: currentField })"
+        @click="$copyToClipboard(currentField.name)"
       >
         <span class="icon">
           <Icon
@@ -262,7 +261,7 @@
       <span>{{ currentField.name }}</span>
       <button
         class="button is-small size-8 is-primary is-light is-rounded"
-        @click="copyContent(currentField.name)"
+        @click="$copyToClipboard(currentField.name)"
       >
         <span class="icon">
           <Icon
@@ -430,23 +429,24 @@
 <script setup>
 import { useStore } from "@/stores/index";
 import ScrollBox from "@/components/datatable/ScrollBox.vue";
-const store = useStore();
-const { $copy, $stripHtml, $clone, $arrayMove, $snackbar, $copyToClipboard } = useNuxtApp();
-var props = defineProps({
+
+const props = defineProps({
   pagename: String,
   field: Object,
   filters: Object,
   filterData: Object,
   width: String,
 });
+const { $copy, $stripHtml, $clone, $arrayMove, $snackbar, $copyToClipboard } = useNuxtApp();
 const emit = defineEmits(["modalevent", "changepos", "close"]);
-var colorchoice = store.colorchoice;
+const store = useStore();
+const { colorchoice } = store;
 const errors = ref([]);
 const currentTab = ref("value");
-var currentField = $copy(props.field);
 var pagedata = store[props.pagename];
 var fields = [];
-var label = currentField.label;
+var currentField = $copy(props.field);
+var { label } = currentField;
 const showmodal = ref();
 const checkFilter = function () {};
 const getMenu = function () {
@@ -587,9 +587,6 @@ function createField() {
     height: "630px",
   };
 }
-function copyContent(value) {
-  $copyToClipboard(value);
-}
 function close() {
   showmodal.value = undefined;
 }

app/components/datatable/DataTable.vue

@@ -186,7 +186,7 @@ var scrollbar;
 var fields;
 var currentRow;
 var data = $copy(pagedata.data);
-var showmodal = ref();
+const showmodal = ref();
 watch(
   () => store[props.pagename],
   () => {
@@ -239,8 +239,8 @@ function confirmRemove() {
   $deleterow(pagedata.api.name, currentRow.id, props.pagename, true);
 }
 const clickEvent = function (event, row, field) {
-  let name = typeof event === "string" ? event : event.name;
-  let data = typeof event === "string" ? event : event.data;
+  const name = typeof event === "string" ? event : event.name;
+  const data = typeof event === "string" ? event : event.data;
   if (name === "remove") {
     currentRow = row;
     showmodal.value = {

app/components/datatable/Pagination.vue

@@ -18,7 +18,6 @@
         >
         <a
           v-else
-          href="#"
           class="pagination-link"
           :aria-label="`Goto page ${v}`"
           @click="changePage(v)"
@@ -26,45 +25,32 @@
         >
       </li>
       <a
-        @click="previous()"
+        @click="previous"
         class="pagination-previous ml-5"
       >
-        <SvgIcon
-          v-bind="{
-            name: 'left1.svg',
-            type: 'dark',
-            size: 20,
-            alt: 'Tìm kiếm',
-          }"
-        ></SvgIcon>
+        <Icon name="material-symbols:arrow-back-ios-new-rounded" />
       </a>
       <a
-        @click="next()"
+        @click="next"
         class="pagination-next"
       >
-        <SvgIcon
-          v-bind="{
-            name: 'right.svg',
-            type: 'dark',
-            size: 20,
-            alt: 'Tìm kiếm',
-          }"
-        ></SvgIcon>
+        <Icon name="material-symbols:arrow-forward-ios-rounded" />
       </a>
     </ul>
   </nav>
 </template>
 <script setup>
-const emit = defineEmits(["changepage"]);
-var props = defineProps({
+const props = defineProps({
   data: Array,
   perPage: Number,
 });
-var currentPage = 1;
-var totalRows = props.data.length;
-var lastPage = parseInt(totalRows / props.perPage);
+const emit = defineEmits(["changepage"]);
+let currentPage = 1;
+let totalRows = props.data.length;
+let lastPage = parseInt(totalRows / props.perPage);
 if (lastPage * props.perPage < totalRows) lastPage += 1;
-var pageInfo = ref();
+const pageInfo = ref();
+
 function pages(current_page, last_page, onSides = 2) {
   // pages
   let pages = [];
@@ -81,6 +67,7 @@ function pages(current_page, last_page, onSides = 2) {
   }
   return pages;
 }
+
 function changePage(page) {
   if (page === "...") return;
   currentPage = page;
@@ -90,7 +77,7 @@ function changePage(page) {
 pageInfo.value = pages(1, lastPage, 2);
 watch(
   () => props.data,
-  (newVal, oldVal) => {
+  () => {
     totalRows = props.data.length;
     lastPage = parseInt(totalRows / props.perPage);
     if (lastPage * props.perPage < totalRows) lastPage += 1;

app/components/imports/EditProductButton.vue

@@ -2,30 +2,32 @@
 const props = defineProps({
   variant: Object,
 });
+
+const showModal = ref(null);
+
+function displayModal() {
+  showModal.value = {
+    title: "Cập nhật sản phẩm",
+    width: "90%",
+    height: "400px",
+    component: "imports/EditProduct",
+    vbind: { variant: props.variant },
+  };
+}
 </script>
 
 <template>
-  <a
-    @click="
-      $emit('clickevent', {
-        name: 'dataevent',
-        data: {
-          modal: {
-            title: 'Cập nhật sản phẩm',
-            width: '90%',
-            height: '400px',
-            component: 'imports/EditProduct',
-            vbind: { variant: props.variant },
-          },
-        },
-      })
-    "
-  >
+  <a @click="displayModal">
     <span class="icon">
       <Icon
         name="material-symbols:edit-outline-rounded"
         :size="18"
       />
     </span>
+    <Modal
+      v-if="showModal"
+      v-bind="showModal"
+      @close="showModal = null"
+    />
   </a>
 </template>

app/components/imports/ProductForm.vue

@@ -62,10 +62,6 @@ onMounted(async () => {
   }
 });
 
-watch(body, (newVal) => {
-  console.dir("body changed", newVal);
-});
-
 const isDirty = computed(() => !isEqual(body.value, defaultBody.value));
 
 function selected(field, data) {

app/components/inventory/InventoryTable.vue

@@ -514,11 +514,11 @@ const selectedInvItem = ref(null);
       <div :class="['cell', selectedInvItem ? 'is-col-span-2' : 'is-col-span-3']">
         <div class="card is-clipped">
           <div class="card-content p-0">
-            <p class="p-5 icon-text fs-17 font-semibold w-full">
+            <p class="p-5 icon-text fs-16 font-semibold w-full">
               <span class="icon">
                 <Icon
                   name="material-symbols:deployed-code-outline"
-                  :size="22"
+                  :size="20"
                 />
               </span>
               <span>Danh sách tồn kho ({{ filteredInvItems.length }})</span>

app/components/inventory/SelectedInvItem.vue

@@ -27,7 +27,7 @@ const emit = defineEmits("unselect");
       </button>
       <div class="card-content is-clipped">
         <div class="py-3 sticky top-0">
-          <p class="fs-17 font-semibold">Chi tiết sản phẩm</p>
+          <p class="fs-16 font-semibold">Chi tiết sản phẩm</p>
         </div>
         <hr class="m-0" />
         <div style="max-height: 600px; overflow-y: scroll">

app/components/orders/OrderPipeline.vue

@@ -35,7 +35,7 @@ const phases = [
 <template>
   <div class="card">
     <div class="card-content">
-      <p class="fs-17 font-semibold mb-4">Pipeline đơn hàng</p>
+      <p class="fs-16 font-semibold mb-4">Pipeline đơn hàng</p>
       <div class="is-flex is-justify-content-space-evenly">
         <PipelinePhase
           v-for="phase in phases"

app/components/orders/OrdersTable.vue

@@ -575,7 +575,7 @@ function toggleStatus(id) {
           <div class="card is-clipped">
             <div class="card-content p-0">
               <template v-if="viewMode === 'list'">
-                <p class="p-5 icon-text fs-17 font-semibold w-full">
+                <p class="p-5 icon-text fs-16 font-semibold w-full">
                   <span class="icon">
                     <Icon
                       name="material-symbols:list-alt-outline-rounded"

app/components/parameter/ImportData.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="field is-grouped">
+  <div class="field is-grouped is-flex-wrap-wrap">
     <div class="file is-primary m-0">
       <label class="file-label">
         <input
@@ -21,6 +21,12 @@
               />
             </span>
             <span class="font-medium">Chọn file</span>
+            <span
+              v-if="fileInfo"
+              class="tag is-primary is-light ml-2"
+            >
+              {{ fileInfo.name }}
+            </span>
           </span>
         </span>
       </label>
@@ -50,67 +56,70 @@
       </span>
       <span>Xuất Excel</span>
     </button>
+    <template v-if="ready">
+      <button
+        v-if="countNew > 0"
+        :class="['button is-success', isloading && 'is-loading']"
+        @click="insert"
+      >
+        <span class="icon">
+          <Icon
+            name="material-symbols:add-rounded"
+            :size="18"
+          />
+        </span>
+        <span>Thêm mới ({{ countNew }}/{{ total }})</span>
+      </button>
+      <button
+        v-if="countUdt > 0"
+        :class="['button is-primary', isloading && 'is-loading']"
+        @click="update"
+      >
+        <span class="icon">
+          <Icon
+            name="material-symbols:edit-outline-rounded"
+            :size="18"
+          />
+        </span>
+        <span>Cập nhật ({{ countUdt }}/{{ total }})</span>
+      </button>
+    </template>
   </div>
   <div
-    class="fixed-grid has-12-cols"
+    class="block"
     v-if="msgInfo.length > 0"
   >
-    <div class="grid">
-      <div class="cell is-col-span-9">
-        <div class="notification fs-14">
-          <button
-            class="delete"
-            @click="msgInfo = []"
-          ></button>
-          <div
-            class="content"
-            style="max-height: 250px; overflow-y: auto"
-          >
-            <p
-              v-for="(ele, i) in msgInfo"
-              :key="i"
-              class="mb-2"
-            >
-              <span class="icon-text">
-                <span class="icon">
-                  <Icon
-                    :name="classinfo.find((v) => v.type === ele.type).icon"
-                    :size="18"
-                    :class="classinfo.find((v) => v.type === ele.type).color"
-                  />
-                </span>
-                <span v-html="ele.message"></span>
-              </span>
-            </p>
-          </div>
-        </div>
-        <p v-if="result">
-          <span class="has-text-primary fsb-18">Thành công: {{ result.success_count || 0 }} / {{ total || "" }}</span>
-          <span class="has-text-danger fsb-18 ml-5">{{ `Lỗi: ${result.error_count || 0}` }} / {{ total || "" }}</span>
+    <div class="notification fs-14">
+      <button
+        class="delete"
+        @click="msgInfo = []"
+      ></button>
+      <div
+        class="content"
+        style="max-height: 250px; overflow-y: auto"
+      >
+        <p
+          v-for="(ele, i) in msgInfo"
+          :key="i"
+          class="mb-2"
+        >
+          <span class="icon-text">
+            <span class="icon">
+              <Icon
+                :name="classinfo.find((v) => v.type === ele.type).icon"
+                :size="18"
+                :class="classinfo.find((v) => v.type === ele.type).color"
+              />
+            </span>
+            <span v-html="ele.message"></span>
+          </span>
         </p>
       </div>
-      <div
-        v-if="ready"
-        class="cell is-col-span-3"
-      >
-        <div class="buttons">
-          <button
-            v-if="countNew > 0"
-            :class="['button is-success', isloading && 'is-loading']"
-            @click="insert"
-          >
-            Thêm mới ({{ countNew }}/{{ total }})
-          </button>
-          <button
-            v-if="countUdt > 0"
-            :class="['button is-primary is-light', isloading && 'is-loading']"
-            @click="update"
-          >
-            Cập nhật ({{ countUdt }}/{{ total }})
-          </button>
-        </div>
-      </div>
     </div>
+    <p v-if="result">
+      <span class="has-text-primary fsb-18">Thành công: {{ result.success_count || 0 }} / {{ total || "" }}</span>
+      <span class="has-text-danger fsb-18 ml-5">{{ `Lỗi: ${result.error_count || 0}` }} / {{ total || "" }}</span>
+    </p>
   </div>
   <DataTable
     v-if="pagedata"

app/components/pos/POS.vue

@@ -43,7 +43,7 @@ const subtotal = computed(() => {
       <div class="cell is-col-span-8">
         <div class="card">
           <div class="card-content">
-            <p class="icon-text fs-17 font-semibold mb-4">
+            <p class="icon-text fs-16 font-semibold mb-4">
               <span class="icon">
                 <Icon
                   name="material-symbols:shopping-cart-outline-rounded"
@@ -74,7 +74,7 @@ const subtotal = computed(() => {
       <div class="cell is-col-span-4">
         <div class="card mb-3">
           <div class="card-content">
-            <p class="icon-text fs-17 font-semibold mb-4">
+            <p class="icon-text fs-16 font-semibold mb-4">
               <span class="icon">
                 <Icon
                   name="material-symbols:supervisor-account-outline-rounded"
@@ -130,7 +130,7 @@ const subtotal = computed(() => {
         </div>
         <div class="card mb-3">
           <div class="card-content">
-            <p class="icon-text fs-17 font-semibold mb-4">Tổng cộng</p>
+            <p class="icon-text fs-16 font-semibold mb-4">Tổng cộng</p>
             <div>
               <table class="table is-fullwidth fs-13">
                 <tbody>

app/components/pos/ProductCard.vue

@@ -23,7 +23,7 @@ function removeFromCart() {
             </figure>
           </div>
           <div class="media-content">
-            <p class="font-bold fs-15">{{ imei.variant__product__name }}</p>
+            <p class="font-semibold fs-15">{{ imei.variant__product__name }}</p>
             <p class="fs-13 has-text-grey">
               <span>{{ imei.variant__ram__code }}</span>
               <span> • </span>