changes

2026-07-06 11:25:42 +07:00
parent f72af58d78
commit be0be49454
22 changed files with 301 additions and 391 deletions
--- a/app/components/Tooltip.vue
+++ b/app/components/Tooltip.vue
@@ -1,17 +0,0 @@
-<template>
-  <span class="tooltip">
-    <span v-html="props.html"></span>
-    <span
-      class="tooltiptext"
-      v-html="props.tooltip"
-    ></span>
-  </span>
-</template>
-<script setup>
-import { defineAsyncComponent } from "vue";
-var props = defineProps({
-  html: String,
-  tooltip: String,
-  width: Number,
-});
-</script>
--- a/app/components/common/ActionInfo.vue
+++ b/app/components/common/ActionInfo.vue
@@ -267,20 +267,20 @@ const options = [
  { code: "system", name: "Của hệ thống" },
  { code: "your", name: "Của bạn" },
 ];
-var props = defineProps({
+const props = defineProps({
  pagename: String,
  row: Object,
 });
-var message = ref();
-var image = ref();
-var file = ref();
-var link = ref();
-var tab = ref("message");
-var record = await $getdata("useraction", {
+const message = ref();
+const image = ref();
+const file = ref();
+const link = ref();
+const tab = ref("message");
+let record = await $getdata("useraction", {
  first: true,
  filter: { user: 1, action: props.row.id },
 });
-var option = ref(record ? "your" : "system");
+const option = ref(record ? "your" : "system");
 function getValue() {
  if (option.value === "your") {
    message.value = record ? $copy(record.message || [{ code: $id() }]) : [{ code: $id() }];
--- a/app/components/common/Editor.vue
+++ b/app/components/common/Editor.vue
@@ -1,63 +1,36 @@
-<template>
-  <ClientOnly>
-    <QuillEditor
-      v-model:content="content"
-      content-type="html"
-      theme="snow"
-      :toolbar="toolbarOptions"
-      @text-change="textChange"
-      :style="`font-size: 16px; height: ${props.height};`"
-    />
-  </ClientOnly>
-</template>
-
-<script setup>
+<script lang="ts" setup>
 import { QuillEditor } from "@vueup/vue-quill";
 import "@vueup/vue-quill/dist/vue-quill.snow.css";

-const emit = defineEmits(["content", "modalevent"]);
+const props = defineProps({ text: String });
+const emit = defineEmits(["content"]);

-const props = defineProps({
-  text: String,
-  row: Object,
-  pagename: String,
-  api: String,
-  height: {
-    type: String,
-    default: "450px",
-  },
-});
-
-// Custom toolbar options
 const toolbarOptions = [
-  // 🔤 Font chữ
  [{ font: [] }],
-
-  // 🔠 Cỡ chữ
  [{ header: [1, 2, 3, 4, 5, 6, false] }],
-
-  // ✍️ Định dạng cơ bản
-  ["bold", "italic", "underline", "strike"],
-
-  // 🎨 Màu chữ & nền
-  [{ color: [] }, { background: [] }],
-
-  // 📐 Căn lề
-  [{ align: [] }],
-
-  // 📋 Danh sách
+  ["bold", "italic", "underline", "strike"], // Định dạng cơ bản
+  ["blockquote", "code-block"],
+  [{ color: [] }, { background: [] }], // Màu chữ & nền
+  [{ align: [] }], // Căn lề
  [{ list: "ordered" }, { list: "bullet" }],
-
-  // 🔗 Media
-  ["link", "image", "video"],
-
+  ["link", "image", "video"], // Media
  ["clean"], // Xóa định dạng
 ];

-var content = props.text;
+const content = ref(props.text);

 function textChange() {
-  emit("content", content);
-  emit("modalevent", { name: "content", data: content });
+  console.log("content", content.value);
+  emit("content", content.value);
 }
 </script>
+<template>
+  <QuillEditor
+    v-model:content="content"
+    :toolbar="toolbarOptions"
+    @textChange="textChange"
+    content-type="html"
+    theme="snow"
+    style="height: 400px"
+  />
+</template>
--- a/app/components/customer/Company.vue
+++ b/app/components/customer/Company.vue
@@ -199,34 +199,36 @@
 import InputPhone from "~/components/common/InputPhone";
 import InputEmail from "~/components/common/InputEmail";
 import SearchBox from "~/components/SearchBox";
-var props = defineProps({
+
+const props = defineProps({
  pagename: String,
  row: Object,
 });
+
 const store = useStore();
 const { $find, $getdata, $patchapi, $insertapi, $findapi, $getapi, $empty, $errPhone, $resetNull, $snackbar } =
  useNuxtApp();
 const emit = defineEmits(["update", "dataevent"]);
-var viewport = store.viewport;
-var errors = ref({});
-var record = ref();
-var showmodal = undefined;
-var existedCustomer = undefined;
+const viewport = store.viewport;
+const errors = ref({});
+const record = ref();
+const showmodal = ref();
+let existedCustomer = undefined;
 async function initData() {
  if (props.row) {
-    let conn = $findapi("company");
+    const conn = $findapi("company");
    conn.params.filter = {
      id: props.row.company || props.row.customer__company || props.row.id,
    };
-    let rs = await $getapi([conn]);
-    let found = $find(rs, { name: "company" });
+    const rs = await $getapi([conn]);
+    const found = $find(rs, { name: "company" });
    if (found.data.rows.length > 0) record.value = found.data.rows[0];
  } else {
    record.value = {};
  }
 }
 function findLang(code) {
-  let found = $find(store.common, { code: code });
+  const found = $find(store.common, { code: code });
  return found ? found[store.lang] : "";
 }
 function showCustomer() {
@@ -269,13 +271,13 @@ async function update() {
  if (!record.value.creator) record.value.creator = store.login.id;
  record.value.updater = store.login.id;
  record.update_time = new Date();
-  let rs = record.value.id
+  const rs = record.value.id
    ? await $patchapi("company", { data: record.value })
    : await $insertapi("company", { data: record.value });
  if (rs === "error") return;
  if (!record.value.id) $snackbar(`Khách hàng đã được khởi tạo với mã <b>${rs.code}</b>`, "Success");
  record.value.id = rs.id;
-  let ele = await $getdata("company", {
+  const ele = await $getdata("company", {
    first: true,
    filter: { id: rs.id },
  });
--- a/app/components/customer/Customer.vue
+++ b/app/components/customer/Customer.vue
@@ -2,38 +2,21 @@
  <!-- Nội dung chính - chỉ hiển thị form cá nhân (màn hình chọn đã được xử lý ở SearchBox) -->
  <div class="columns mx-0 px-0 py-2">
    <div
-      :class="`column is-narrow p-0 pr-4 ${viewport === 1 ? 'px-0' : ''}`"
-      :style="`${viewport === 1 ? '' : 'border-right: 1px solid #B0B0B0;'}`"
+      :class="['column is-narrow p-0 pr-4', store.viewport === 1 && 'px-0']"
+      :style="{ borderRight: store.viewport > 1 ? '1px solid var(--bulma-border)' : 'initial' }"
    >
-      <template v-if="viewport > 1">
-        <div
+      <div :class="['buttons is-align-items-stretch', store.viewport > 1 && 'is-flex-direction-column']">
+        <button
          v-for="(v, i) in tabs"
          :key="i"
-          :class="['is-clickable p-3', i !== 0 && 'mt-2', getStyle(v)]"
-          style="width: 130px; border-radius: 4px"
+          :class="['button is-justify-content-flex-start', v.code === tab ? 'is-primary' : 'is-light']"
          @click="changeTab(v)"
        >
          {{ isVietnamese ? v.name : v.en }}
-        </div>
-      </template>
-      <div
-        v-else
-        class="field is-grouped is-grouped-multiline"
-      >
-        <div
-          class="control"
-          v-for="(v, i) in tabs"
-          @click="changeTab(v)"
-        >
-          <div style="width: 130px">
-            <div :class="`py-3 px-3 ${getStyle(v)}`">
-              {{ isVietnamese ? v.name : v.en }}
-            </div>
-          </div>
-        </div>
+        </button>
      </div>
    </div>
-    <div :class="['column', { 'px-0': viewport === 1 }]">
+    <div :class="['column', { 'px-0': store.viewport === 1 }]">
      <CustomerForm
        v-if="tab === 'info' && record !== undefined"
        v-bind="{ row: record, pagename, application }"
@@ -50,22 +33,21 @@
          }"
          @update="update"
          v-if="tab === 'image'"
-        ></ImageGallery>
+        />
        <CustomerView
          v-bind="{ row: record, pagename: pagename }"
          @update="update"
          @close="emit('close')"
          v-if="tab === 'print'"
-        ></CustomerView>
+        />
      </template>
    </div>
  </div>
-
  <Modal
-    @close="handleModalClose"
-    v-bind="showmodal"
    v-if="showmodal"
-  ></Modal>
+    v-bind="showmodal"
+    @close="showmodal.value = undefined"
+  />
 </template>
 <script setup>
 import CustomerForm from "~/components/customer/CustomerForm.vue";
@@ -85,24 +67,14 @@ const props = defineProps({

 const isVietnamese = computed(() => store.lang === "vi");
 const emit = defineEmits(["modalevent", "close"]);
-var viewport = 5;
-var tabs = [
+const tabs = [
  { code: "info", name: "1. Thông tin", en: "1. Information", active: true },
  { code: "image", name: "2. Hình ảnh", en: "2. Images", active: false },
  { code: "print", name: "3. Bản in", en: "3. Print", active: false },
 ];
-var tab = ref("info");
-var record = props.row || null;
-var showmodal = ref();
-
-function getStyle(v) {
-  let check = record ? record.id : false;
-  // let check = props.isEditMode;
-  if (v.tab === "info") check = true;
-  return v.code === tab.value
-    ? "has-background-primary has-text-white"
-    : `has-background-light ${check ? "" : "has-text-grey"}`;
-}
+const tab = ref("info");
+let record = props.row || null;
+const showmodal = ref();

 function changeTab(v) {
  if (tab.value === v.code) return;
@@ -110,10 +82,6 @@ function changeTab(v) {
  tab.value = v.code;
 }

-function handleModalClose() {
-  showmodal.value = undefined;
-}
-
 function update(v) {
  record = {
    ...v,
@@ -123,16 +91,3 @@ function update(v) {
  if (!props.isEditMode) emit("close");
 }
 </script>
-
-<style scoped>
-.title {
-  font-family: "Segoe UI", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
-}
-.button.is-large.is-fullwidth:hover {
-  color: white !important;
-  background-color: rgb(75, 114, 243) !important;
-  .title {
-    color: white !important;
-  }
-}
-</style>
--- a/app/components/datatable/ContextMenu.vue
+++ b/app/components/datatable/ContextMenu.vue
@@ -446,10 +446,10 @@ const store = useStore();
 const { colorchoice } = store;
 const errors = ref([]);
 const currentTab = ref("value");
-var pagedata = store[props.pagename];
-var fields = [];
-var currentField = $copy(props.field);
-var { label } = currentField;
+let pagedata = store[props.pagename];
+let fields = [];
+let currentField = $copy(props.field);
+let { label } = currentField;
 const showmodal = ref();
 const checkFilter = function () {};
 const getMenu = function () {
@@ -461,33 +461,33 @@ const getMenu = function () {
  return array;
 };
 var selectTab = getMenu()[0];
-var datatype = store.datatype;
-// var current = 1;
-// var value1 = undefined;
-// var value2 = undefined;
+let datatype = store.datatype;
+// let current = 1;
+// let value1 = undefined;
+// let value2 = undefined;
 const moneyunit = store.moneyunit;
 const radioType = store.datatype.find((v) => v.code === currentField.format);
-// var selectUnit = currentField.format === "number" ? moneyunit.find((v) => v.detail === currentField.unit) : undefined;
-// var bgcolor = undefined;
-// var radioBGcolor = colorchoice.find((v) => v.code === "none");
-// var color = undefined;
-// var radioColor = colorchoice.find((v) => v.code === "none");
-// var textsize = undefined;
-// var radioSize = colorchoice.find((v) => v.code === "none");
-var minwidth = undefined;
-var radioWidth = colorchoice.find((v) => v.code === "none");
-var radioMaxWidth = colorchoice.find((v) => v.code === "none");
-var maxwidth = undefined;
-// var selectAlign = undefined;
-// var radioAlign = colorchoice.find((v) => v.code === "none");
-var radioTemplate = ref(colorchoice.find((v) => v.code === (currentField.template ? "option" : "none"))["code"]);
-// var selectPlacement = store.placement.find((v) => v.code === "is-right");
-// var selectScheme = store.colorscheme.find((v) => v.code === "is-primary");
-// var radioTooltip = store.colorchoice.find((v) => v.code === "none");
-// var selectField = undefined;
-// var tags = currentField.tags ? currentField.tags.map((v) => fields.find((x) => x.name === v)) : [];
-// var formula = currentField.formula ? currentField.formula : undefined;
-var decimal = currentField.decimal;
+// let selectUnit = currentField.format === "number" ? moneyunit.find((v) => v.detail === currentField.unit) : undefined;
+// let bgcolor = undefined;
+// let radioBGcolor = colorchoice.find((v) => v.code === "none");
+// let color = undefined;
+// let radioColor = colorchoice.find((v) => v.code === "none");
+// let textsize = undefined;
+// let radioSize = colorchoice.find((v) => v.code === "none");
+let minwidth = undefined;
+let radioWidth = colorchoice.find((v) => v.code === "none");
+let radioMaxWidth = colorchoice.find((v) => v.code === "none");
+let maxwidth = undefined;
+// let selectAlign = undefined;
+// let radioAlign = colorchoice.find((v) => v.code === "none");
+let radioTemplate = ref(colorchoice.find((v) => v.code === (currentField.template ? "option" : "none"))["code"]);
+// let selectPlacement = store.placement.find((v) => v.code === "is-right");
+// let selectScheme = store.colorscheme.find((v) => v.code === "is-primary");
+// let radioTooltip = store.colorchoice.find((v) => v.code === "none");
+// let selectField = undefined;
+// let tags = currentField.tags ? currentField.tags.map((v) => fields.find((x) => x.name === v)) : [];
+// let formula = currentField.formula ? currentField.formula : undefined;
+let decimal = currentField.decimal;
 let shortmenu = store.menuchoice.filter((x) =>
  currentField.format === "number"
    ? currentField.formula
@@ -498,7 +498,7 @@ let shortmenu = store.menuchoice.filter((x) =>
 var selectTab = shortmenu.find((v) => selectTab.code === v.code)
  ? selectTab
  : menuchoice.find((v) => v.code === "value");
-var search = undefined;
+let search = undefined;
 // if(selectTab.code==='value') {
 //  let self = this
 //  setTimeout(function() {self.$refs[currentField.name]? self.$refs[currentField.name].focus() : false}, 50)
--- a/app/components/datatable/CreateTemplate.vue
+++ b/app/components/datatable/CreateTemplate.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="docid">
+  <div v-if="$id()">
    <div class="field is-horizontal">
      <div class="field-body">
        <div class="field">
@@ -74,17 +74,21 @@
          v-if="type.code !== 'tag'"
        >
          <label class="label">Outline</label>
-          <p class="control fs-14">
-            <b-radio
+          <div class="control fs-14 is-flex is-gap-2">
+            <label
              v-for="(v, i) in outlines"
              :key="i"
-              v-model="outline"
-              :native-value="v"
-              @input="changeType(v)"
+              class="radio"
            >
+              <input
+                v-model="outline"
+                @change="changeType(v)"
+                type="radio"
+                name="outline"
+              />
              {{ v.name }}
-            </b-radio>
-          </p>
+            </label>
+          </div>
        </div>
      </div>
    </div>
@@ -367,39 +371,41 @@
      </div>
    </template>
    <template v-else-if="tab.code === 'template'">
-      <div class="buttons has-addons mb-3">
-        <button
-          @click="copyContent()"
-          class="button is-primary is-light fs-14"
-        >
-          <span class="icon">
-            <Icon
-              name="material-symbols:content-copy-outline-rounded"
-              :size="18"
-            />
-          </span>
-          <span>Copy</span>
-        </button>
-        <button
-          @click="paste()"
-          class="button is-primary is-light fs-14"
-        >
-          <span class="icon">
-            <Icon
-              name="material-symbols:content-paste-rounded"
-              :size="18"
-            />
-          </span>
-          <span>Paste</span>
-        </button>
+      <div class="block">
+        <div class="buttons has-addons mb-3">
+          <button
+            @click="copyContent()"
+            class="button is-primary is-light fs-14"
+          >
+            <span class="icon">
+              <Icon
+                name="material-symbols:content-copy-outline-rounded"
+                :size="18"
+              />
+            </span>
+            <span>Copy</span>
+          </button>
+          <button
+            @click="paste()"
+            class="button is-primary is-light fs-14"
+          >
+            <span class="icon">
+              <Icon
+                name="material-symbols:content-paste-rounded"
+                :size="18"
+              />
+            </span>
+            <span>Paste</span>
+          </button>
+        </div>
+        <textarea
+          class="textarea fs-13 is-family-monospace"
+          rows="4"
+          v-model="text"
+          @dblclick="doCheck"
+        ></textarea>
      </div>
-      <textarea
-        class="textarea fs-13 is-family-monospace"
-        rows="4"
-        v-model="text"
-        @dblclick="doCheck"
-      ></textarea>
-      <p class="mt-5">
+      <div class="block">
        <span class="icon-text">
          <span class="fs-17 font-semibold">Replace</span>
          <span class="icon">
@@ -409,8 +415,8 @@
            />
          </span>
        </span>
-      </p>
-      <div class="field is-grouped mt-4">
+      </div>
+      <div class="field is-grouped">
        <div class="control">
          <label class="label">Đoạn text</label>
          <input
@@ -441,14 +447,12 @@
          </button>
        </div>
      </div>
-      <p class="mt-5">
-        <button
-          class="button is-primary has-text-white"
-          @click="changeTemplate()"
-        >
-          Áp dụng
-        </button>
-      </p>
+      <button
+        class="button is-primary has-text-white"
+        @click="changeTemplate()"
+      >
+        Áp dụng
+      </button>
    </template>
  </div>
 </template>
@@ -456,61 +460,61 @@
 import { ref } from "vue";
 const store = useStore();
 const { $id, $copy, $empty, $calc, $remove, $copyToClipboard } = useNuxtApp();
-var props = defineProps({
+const props = defineProps({
  pagename: String,
  field: Object,
 });
-var colorscheme = store.colorscheme;
-var colorchoice = store.colorchoice;
-var pageData = store[props.pagename];
-var field = props.field;
-var type = undefined;
-var size = undefined;
-var types = [
+let colorscheme = store.colorscheme;
+let colorchoice = store.colorchoice;
+let pageData = store[props.pagename];
+let field = props.field;
+let type = undefined;
+let size = undefined;
+const types = [
  { code: "span", name: "span" },
  { code: "tag", name: "tag" },
 ];
-var sizes = [
+const sizes = [
  { code: "is-small", name: "Nhỏ", value: "is-size-6" },
  { code: "is-normal", name: "Trung bình", value: "is-size-5" },
  { code: "is-medium", name: "Lớn", value: "is-size-4" },
 ];
-var shapes = [
+const shapes = [
  { code: "default", name: "Mặc định" },
  { code: "is-rounded", name: "Tròn góc" },
 ];
-var shape = undefined;
-var outlines = [
+let shape = undefined;
+const outlines = [
  { code: "default", name: "Mặc định" },
  { code: "is-outlined", name: "Outline" },
 ];
-var outline = undefined;
-var conditions = [
+let outline = undefined;
+const conditions = [
  { code: "no", name: "Không áp dụng" },
  { code: "yes", name: "Có áp dụng" },
 ];
-var condition = undefined;
+let condition = undefined;
 const tags = ref([]);
-var selected = undefined;
-var tabs = [
+let selected = undefined;
+const tabs = [
  { code: "selected", name: "Bước 1: Tạo nội dung" },
  { code: "condition", name: "Bước 2: Đặt điều kiện" },
  { code: "option", name: "Bước 3: Chọn màu, cỡ chữ" },
  { code: "template", name: "Bước 4: Mã lệnh & áp dụng" },
 ];
-var tab = ref(undefined);
-var tagsField = [];
-var errors = [];
-var expression = "";
-var text = ref(null);
-var radioBGcolor = undefined;
-var radioColor = undefined;
-var radioSize = undefined;
-var bgcolor = undefined;
-var color = undefined;
-var textsize = undefined;
-var source = undefined;
-var target = $copy(field.name);
+const tab = ref(undefined);
+let tagsField = [];
+let errors = [];
+let expression = "";
+const text = ref(null);
+let radioBGcolor = undefined;
+let radioColor = undefined;
+let radioSize = undefined;
+let bgcolor = undefined;
+let color = undefined;
+let textsize = undefined;
+let source = undefined;
+let target = $copy(field.name);

 const initData = function () {
  type = types.find((v) => v.code === "tag");
@@ -653,5 +657,4 @@ const getSpanClass = function (v) {
  return value;
 };
 initData();
-var docid = $id();
 </script>
--- a/app/components/datatable/DataTable.vue
+++ b/app/components/datatable/DataTable.vue
@@ -167,26 +167,26 @@ function dynamicComponent(htmlString) {
    },
  });
 }
-var timer = undefined;
-var showPaging = ref(false);
-var totalRows = ref(0);
-var currentPage = 1;
-var displayFields = ref([]);
-var displayData = [];
-var pagedata = store[props.pagename];
+let timer = undefined;
+const showPaging = ref(false);
+const totalRows = ref(0);
+let currentPage = 1;
+const displayFields = ref([]);
+let displayData = [];
+let pagedata = store[props.pagename];
 let tablesetting = $copy(isEmpty(pagedata.tablesetting) ? store.tablesetting : pagedata.tablesetting);
 if (!Array.isArray(tablesetting)) {
  tablesetting = Object.values(tablesetting);
 }
-var perPage = Number($find(tablesetting, { code: "per-page" }, "detail")) || 20;
-var filters = $copy(pagedata.filters || []);
-var currentField;
-var filterData = [];
-var currentsetting;
-var scrollbar;
-var fields;
-var currentRow;
-var data = $copy(pagedata.data);
+let perPage = Number($find(tablesetting, { code: "per-page" }, "detail")) || 20;
+let filters = $copy(pagedata.filters || []);
+let currentField;
+let filterData = [];
+let currentsetting;
+let scrollbar;
+let fields;
+let currentRow;
+let data = $copy(pagedata.data);
 const showmodal = ref();
 watch(
  () => store[props.pagename],
@@ -428,7 +428,7 @@ const frontendFilter = function (newVal) {
    }
  };
  newVal = $copy(newVal);
-  var data = $copy(pagedata.data);
+  let data = $copy(pagedata.data);
  newVal
    .filter((m) => m.select || m.filter)
    .map((v) => {
@@ -487,14 +487,14 @@ const doSelect = function (value) {
  updateShow();
 };
 const doubleScroll = function (element) {
-  var _scrollbar = document.createElement("div");
+  const _scrollbar = document.createElement("div");
  _scrollbar.appendChild(document.createElement("div"));
  _scrollbar.style.overflow = "auto";
  _scrollbar.style.overflowY = "hidden";
  _scrollbar.firstChild.style.width = element.scrollWidth + "px";
  _scrollbar.firstChild.style.height = "1px";
  _scrollbar.firstChild.appendChild(document.createTextNode("\xA0"));
-  var running = false;
+  let running = false;
  _scrollbar.onscroll = function () {
    if (running) {
      running = false;
--- a/app/components/datatable/FilterOption.vue
+++ b/app/components/datatable/FilterOption.vue
@@ -204,7 +204,7 @@ export default {
    changeStyle() {
      let check = this.field.format === "number" ? this.checkExpression() : this.checkCondition();
      if (!check) return;
-      var row =
+      const row =
        this.field.format === "number"
          ? {
              expression: this.expression,
--- a/app/components/datatable/FormatOption.vue
+++ b/app/components/datatable/FormatOption.vue
@@ -36,7 +36,7 @@
        />
        <p
          class="fs-14 mt-1"
-          :class="currentField.format === 'string' ? 'mb-1' : 'mb-2'"
+          :class="props.currentField.format === 'string' ? 'mb-1' : 'mb-2'"
        >
          <a
            class="has-text-primary mr-5"
@@ -74,7 +74,7 @@
        />
        <p
          class="fs-14 mt-1"
-          :class="currentField.format === 'string' ? 'mb-1' : 'mb-2'"
+          :class="props.currentField.format === 'string' ? 'mb-1' : 'mb-2'"
        >
          <a
            class="has-text-primary mr-5"
@@ -112,7 +112,7 @@
        />
        <p
          class="fs-14 mt-1"
-          :class="currentField.format === 'string' ? 'mb-1' : 'mb-2'"
+          :class="props.currentField.format === 'string' ? 'mb-1' : 'mb-2'"
        >
          <a
            class="has-text-primary mr-5"
@@ -148,7 +148,7 @@
        <span>Copy</span>
      </button>
      <button
-        @click="paste()"
+        @click="paste"
        class="button is-primary is-light fs-14"
      >
        <span class="icon">
@@ -164,7 +164,7 @@
      class="textarea fs-13 is-family-monospace"
      rows="4"
      v-model="script"
-      @change="checkScript()"
+      @change="checkScript"
      @dblclick="doCheck"
    ></textarea>
    <p class="mt-5">
@@ -193,19 +193,14 @@
        <input
          class="input"
          type="text"
-          placeholder=""
          v-model="target"
        />
      </div>
      <div class="control">
-        <label
-          class="label"
-          style="opacity: 0"
-          >Hidden</label
-        >
+        <label class="label is-sr-only">Hidden</label>
        <button
          class="button is-primary is-light"
-          @click="replace()"
+          @click="replace"
        >
          Replace
        </button>
@@ -225,22 +220,20 @@
    <p class="mt-4">
      <button
        class="button is-primary is-rounded"
-        @click="changeScript()"
+        @click="changeScript"
      >
        Cập nhật
      </button>
    </p>
  </template>
  <TableOption
-    v-bind="{ pagename }"
    v-else-if="sideBar === 'option'"
-  >
-  </TableOption>
+    v-bind="{ pagename }"
+  />
  <CreateTemplate
    v-else-if="sideBar === 'template'"
    v-bind="{ pagename, field: openField }"
-  >
-  </CreateTemplate>
+  />
 </template>
 <script setup>
 import CreateTemplate from "~/components/datatable/CreateTemplate";
@@ -252,21 +245,20 @@ const props = defineProps({
  currentField: Object,
  pagename: String,
 });
-var currentField = props.currentField;
-var openField = {};
-var bgcolorFilter = [];
-var colorFilter = [];
-var sizeFilter = [];
-var sideBar = ref();
-var script = undefined;
-var radio = undefined;
-var tabs = [
+let openField = {};
+let bgcolorFilter = [];
+let colorFilter = [];
+let sizeFilter = [];
+const sideBar = ref();
+let script = undefined;
+let radio = undefined;
+const tabs = [
  { code: "expression", name: "Biểu thức" },
  { code: "script", name: "Mã lệnh" },
 ];
 const tab = ref({ code: "expression", name: "Biểu thức" });
-var source = undefined;
-var target = $copy(currentField.name);
+let source = undefined;
+let target = $copy(props.currentField.name);

 const initData = function () {
  openField = props.event.field;
@@ -326,7 +318,7 @@ const changeScript = function () {
 };
 const doConditionFilter = function (v, type, id) {
  v.id = id;
-  let copy = $copy(currentField);
+  let copy = $copy(props.currentField);
  if (copy[type] ? Array.isArray(copy[type]) : false) {
    let idx = copy[type].findIndex((x) => x.id === id);
    idx >= 0 ? (copy[type][idx] = v) : copy[type].push(v);
--- a/app/components/datatable/NewField.vue
+++ b/app/components/datatable/NewField.vue
@@ -261,7 +261,7 @@ import { cloneDeep } from "es-toolkit";
 const emit = defineEmits(["modalevent"]);
 const store = useStore();
 const { $id, $copy, $empty, $stripHtml, $createField, $calc, $isNumber } = useNuxtApp();
-var props = defineProps({
+const props = defineProps({
  pagename: String,
  field: Object,
  filters: Object,
@@ -270,29 +270,29 @@ var props = defineProps({
 });
 const moneyunit = store.moneyunit || [];
 const datatype = store.datatype;
-var showmodal = ref();
-var pagedata = store[props.pagename];
-var selectUnit = moneyunit.find((v) => v.code === "one");
-var data = [];
-var current = 1;
-var filterData = [];
-var loading = false;
+const showmodal = ref();
+let pagedata = store[props.pagename];
+let selectUnit = moneyunit.find((v) => v.code === "one");
+let data = [];
+let current = 1;
+let filterData = [];
+let loading = false;
 const fieldTypes = [
  { code: "empty", name: "Tạo cột rỗng" },
  { code: "formula", name: "Tạo công thức" },
 ];
-var tags = [];
-var formula = undefined;
-var name = `f${$id().toLocaleLowerCase()}`;
-var label = undefined;
+let tags = [];
+let formula = undefined;
+let name = `f${$id().toLocaleLowerCase()}`;
+let label = undefined;
 const errors = ref([]);
-var selectType = fieldTypes.find((v) => v.code === "empty");
-var radioType = ref(datatype.find((v) => v.code === "string"));
-var fields = [];
-var options = undefined;
-var columns = $copy(pagedata.fields.filter((v) => v.format === "number"));
-var decimal = undefined;
-var choices = [
+const selectType = ref(fieldTypes.find((v) => v.code === "empty"));
+const radioType = ref(datatype.find((v) => v.code === "string"));
+let fields = [];
+let options = undefined;
+let columns = $copy(pagedata.fields.filter((v) => v.format === "number"));
+let decimal = undefined;
+const choices = [
  { code: "column", name: "Dùng cột dữ liệu" },
  { code: "function", name: "Dùng hàm số" },
 ];
@@ -303,10 +303,10 @@ const funcs = [
  { code: "min", name: "Min" },
  { code: "avg", name: "Avg" },
 ];
-var func = "sum";
-var placeholder = "Minh hoạ công thức: f10001 + f10002";
-var args = undefined;
-var operator = [
+let func = "sum";
+let placeholder = "Minh hoạ công thức: f10001 + f10002";
+let args = undefined;
+let operator = [
  { code: "+", name: "Cộng" },
  { code: "-", name: "Trừ" },
  { code: "*", name: "Nhân" },
--- a/app/components/datatable/TableSetting.vue
+++ b/app/components/datatable/TableSetting.vue
@@ -184,7 +184,7 @@ if (!Array.isArray(pagedata.tablesetting)) {
 const getDetail = (code) => tablesetting.find((v) => v.code === code)?.detail || "";
 const errors = ref([]);
 let radioNote = "no";
-var tablesetting = pagedata.tablesetting;
+let tablesetting = pagedata.tablesetting;
 let found = getDetail("note");
 if (found !== "@") radioNote = "yes";

--- a/app/components/datepicker/EventSummary.vue
+++ b/app/components/datepicker/EventSummary.vue
@@ -80,7 +80,8 @@
          class="column p-0.5 fs-14"
        >
          <a v-if="m.event && m.currentMonth === m.mothCondition">
-            <Tooltip v-bind="{ html: m.event.html, tooltip: m.event.tooltip }"></Tooltip>
+            <span>{{ m.event.html }}</span>
+            <span class="tooltiptext">{{ m.event.tooltip }}</span>
          </a>
          <span
            class="has-background-primary-soft p-1"
--- a/app/components/inventory/Inventory.vue
+++ b/app/components/inventory/Inventory.vue
@@ -1,6 +1,12 @@
 <script setup>
+import ActionInfo from "~/components/common/ActionInfo.vue";
+import Editor from "~/components/common/Editor.vue";
+import Company from "~/components/customer/Company.vue";
+import Customer from "~/components/customer/Customer.vue";
 import DataView from "~/components/datatable/DataView.vue";
 import InventoryHighlightCard from "~/components/inventory/InventoryHighlightCard.vue";
+import Common from "~/components/parameter/Common.vue";
+import PeopleInfo from "~/components/people/PeopleInfo.vue";

 const inventoryHighlights = [
  {
--- a/app/components/maintab/Configuration.vue
+++ b/app/components/maintab/Configuration.vue
@@ -34,7 +34,7 @@
  </div>
 </template>
 <script setup>
-var array = [
+const array = [
  {
    code: "transactionphase",
    name: "Giai đoạn giao dịch",
@@ -167,7 +167,7 @@ var array = [
    },
  },
 ];
-var current = ref(array[0]);
+const current = ref(array[0]);
 function changeTab(v) {
  current.value = null;
  setTimeout(() => (current.value = v));
--- a/app/components/marketing/email/forms/EmailForm1.vue
+++ b/app/components/marketing/email/forms/EmailForm1.vue
@@ -248,11 +248,9 @@
 </template>

 <script setup lang="ts">
-import { nextTick } from "vue";
 import { render } from "@vue-email/render";
 import Modal from "~/components/Modal.vue";
 import Template1 from "~/components/marketing/email/Template1.vue";
-import SvgIcon from "~/components/SvgIcon.vue";
 import Editor from "~/components/common/Editor.vue";

 const nuxtApp = useNuxtApp();
--- a/app/components/media/Camera.vue
+++ b/app/components/media/Camera.vue
@@ -72,7 +72,7 @@ export default {
    this.openCamera();
  },
  beforeDestroy() {
-    var vidTrack = this.video.srcObject.getVideoTracks();
+    const vidTrack = this.video.srcObject.getVideoTracks();
    vidTrack.forEach((track) => {
      track.stop();
      track.enabled = false;
--- a/app/components/parameter/CodeName.vue
+++ b/app/components/parameter/CodeName.vue
@@ -51,14 +51,14 @@
 <script setup>
 import { onMounted } from "vue";
 const { $copy, $resetNull, $insertrow, $updaterow, $snackbar } = useNuxtApp();
-var props = defineProps({
+const props = defineProps({
  api: String,
  pagename: String,
  row: Object,
  prefix: String,
 });
 const emit = defineEmits(["close", "modalevent"]);
-var record = $copy(props.row || {});
+const record = $copy(props.row || {});
 async function update() {
  let data = $resetNull(record);
  let rs = data.id
--- a/app/components/parameter/Common.vue
+++ b/app/components/parameter/Common.vue
@@ -212,24 +212,24 @@
    @texteditor="updateText"
    @update="updateAttr"
    v-if="showmodal"
-  ></Modal>
+  />
 </template>
 <script setup>
 const emit = defineEmits([]);
-var props = defineProps({
+const props = defineProps({
  pagename: String,
  row: Object,
  api: String,
 });
 const { $copy, $resetNull, $insertrow, $updaterow, $copyToClipboard, $empty } = useNuxtApp();
-var record = ref(props.row ? $copy(props.row) : {});
-var showmodal = ref();
-var vapi = props.api;
-var current;
-var updateText = function (content) {
+const record = ref(props.row ? $copy(props.row) : {});
+const showmodal = ref();
+const vapi = props.api;
+let current;
+function updateText(content) {
  record.value.vi = content;
-};
-var openEditor = function () {
+}
+function openEditor() {
  showmodal.value = {
    component: "common/TextEditor",
    vbind: { content: record.value.vi },
@@ -237,8 +237,8 @@ var openEditor = function () {
    width: "40%",
    height: "150px",
  };
-};
-var editDetail = function (attr) {
+}
+function editDetail(attr) {
  current = attr;
  let detail = record.value[attr] ? record.value[attr] : {};
  showmodal.value = {
@@ -248,10 +248,10 @@ var editDetail = function (attr) {
    width: "40%",
    height: "150px",
  };
-};
-var updateAttr = function (detail) {
+}
+function updateAttr(detail) {
  record.value[current] = detail;
-};
+}
 function copyDetail(attr) {
  if ($empty(record.value[attr])) return;
  let val = typeof record.value[attr] == "string" ? record.value[attr] : JSON.stringify(record.value[attr]);
@@ -262,7 +262,7 @@ async function pasteDetail(attr) {
  if ($empty(text)) return;
  record.value[attr] = JSON.parse(text);
 }
-var updateData = async function (isNew) {
+async function updateData(isNew) {
  let ele = record.value;
  if (ele.create_time === null) ele.create_time = new Date();
  ele = $resetNull(ele);
@@ -271,5 +271,5 @@ var updateData = async function (isNew) {
    ? await $updaterow(vapi, ele, undefined, props.pagename)
    : await $insertrow(vapi, ele, undefined, props.pagename);
  if (isNew) emit("close");
-};
+}
 </script>
--- a/app/components/people/PeopleInfo.vue
+++ b/app/components/people/PeopleInfo.vue
@@ -257,7 +257,7 @@ import InputEmail from "~/components/common/InputEmail";
 import SearchBox from "~/components/SearchBox";
 import Datepicker from "~/components/datepicker/Datepicker";

-var props = defineProps({
+const props = defineProps({
  pagename: String,
  row: Object,
 });
@@ -277,29 +277,28 @@ const {
  $updatepage,
 } = useNuxtApp();
 const emit = defineEmits(["update"]);
-var viewport = store.viewport;
-var companyAddon = {
+const companyAddon = {
  component: "customer/Company",
  with: "55%",
  height: "400px",
  title: findLang("company"),
 };
-var companyviewAddon = {
+const companyviewAddon = {
  component: "customer/Company",
  width: "50%",
  height: "400px",
  title: findLang("company"),
 };
-var errors = ref({});
-var record = ref();
-var showmodal = ref();
-var existedPeople = undefined;
+const errors = ref({});
+const record = ref();
+const showmodal = ref();
+let existedPeople = undefined;
 async function initData() {
  if (props.row) {
-    let conn = $findapi("people");
+    const conn = $findapi("people");
    conn.params.filter = { id: props.row.customer || props.row.id };
-    let rs = await $getapi([conn]);
-    let found = $find(rs, { name: "people" });
+    const rs = await $getapi([conn]);
+    const found = $find(rs, { name: "people" });
    if (found.data.rows.length > 0) record.value = found.data.rows[0];
  } else {
    // let code = await $getdata('getcodepeople')
@@ -307,7 +306,7 @@ async function initData() {
  }
 }
 function findLang(code) {
-  let found = $find(store.common, { code: code });
+  const found = $find(store.common, { code });
  return found ? found[store.lang] : "";
 }
 function showPeople() {