Initial commit

app/components/common/ActionInfo.vue

@@ -0,0 +1,251 @@
+<template>
+  <div class="field is-grouped">
+    <div class="control mr-6">
+      <div class="buttons has-addons">
+        <button
+          :class="`button ${v.code === tab ? 'is-primary is-selected has-text-white' : ''}`"
+          v-for="v in tabs"
+          @click="changeTab(v)"
+        >
+          {{ v.name }}
+        </button>
+      </div>
+    </div>
+    <div class="control">
+      <div class="buttons has-addons">
+        <button
+          :class="`button ${v.code === option ? 'is-dark is-selected has-text-white' : ''}`"
+          v-for="v in options"
+          @click="changeOption(v)"
+        >
+          {{ v.name }}
+        </button>
+      </div>
+    </div>
+  </div>
+  <template v-if="option === 'your'">
+    <template v-if="tab === 'message'">
+      <div class="field is-grouped" v-for="(v, i) in message">
+        <div class="control is-expanded">
+          <textarea class="textarea" placeholder="" rows="3" v-model="v.text"></textarea>
+        </div>
+        <div class="control">
+          <a class="mr-3" @click="add()">
+            <SvgIcon v-bind="{ name: 'add1.png', type: 'primary', size: 20 }"></SvgIcon>
+          </a>
+          <a @click="remove(v, i)">
+            <SvgIcon v-bind="{ name: 'bin1.svg', type: 'danger', size: 20 }"></SvgIcon>
+          </a>
+          <p class="mt-2">
+            <a @click="copyContent(v.text)">
+              <SvgIcon v-bind="{ name: 'copy.svg', type: 'primary', size: 22 }"></SvgIcon>
+            </a>
+          </p>
+        </div>
+      </div>
+      <div class="mt-5">
+        <button class="button is-primary has-text-white" @click="update()">Cập nhật</button>
+      </div>
+    </template>
+    <template v-else-if="tab === 'image'">
+      <div class="field is-grouped mb-0">
+        <div class="control is-expanded"></div>
+        <div class="control">
+          <FileUpload v-bind="{ position: 'left' }" @files="getImages"></FileUpload>
+        </div>
+      </div>
+      <div class="field is-grouped is-grouped-multiline" v-if="image.length > 0">
+        <div class="control mb-2" v-for="(v, i) in image">
+          <ChipImage
+            style="width: 128px"
+            @remove="removeImage(v, i)"
+            v-bind="{ show: ['copy', 'download', 'delete'], file: v, image: `${$getpath()}static/files/${v.file}` }"
+          >
+          </ChipImage>
+        </div>
+      </div>
+    </template>
+    <template v-else-if="tab === 'file'">
+      <div class="field is-grouped mb-0">
+        <div class="control is-expanded"></div>
+        <div class="control">
+          <FileUpload v-bind="{ position: 'left', type: 'file' }" @files="getFiles"></FileUpload>
+        </div>
+      </div>
+      <FileShow @remove="removeFile" v-bind="{ files: file, show: { delete: 1 } }"></FileShow>
+    </template>
+    <template v-else-if="tab === 'link'">
+      <div class="field is-grouped" v-for="(v, i) in link">
+        <div class="control is-expanded">
+          <input class="input" placeholder="" v-model="v.link" />
+        </div>
+        <div class="control">
+          <a class="mr-3" @click="copyContent(v.link)">
+            <SvgIcon v-bind="{ name: 'copy.svg', type: 'primary', size: 20 }"></SvgIcon>
+          </a>
+          <a class="mr-3" :href="v.link" target="_blank">
+            <SvgIcon v-bind="{ name: 'open.svg', type: 'primary', size: 20 }"></SvgIcon>
+          </a>
+          <a class="mr-3" @click="addLink()">
+            <SvgIcon v-bind="{ name: 'add1.png', type: 'primary', size: 18 }"></SvgIcon>
+          </a>
+          <a @click="removeLink(v, i)">
+            <SvgIcon v-bind="{ name: 'bin1.svg', type: 'danger', size: 18 }"></SvgIcon>
+          </a>
+        </div>
+      </div>
+      <div class="mt-5">
+        <button class="button is-primary has-text-white" @click="update()">Cập nhật</button>
+      </div>
+    </template>
+  </template>
+  <template v-else-if="option === 'system'">
+    <template v-if="tab === 'message'">
+      <div v-if="message">
+        <div class="px-2 py-2 mb-2" style="border: 1px solid #e8e8e8" v-for="(v, i) in message">
+          <span class="mr-3">{{ v.text }}</span>
+          <a @click="copyContent(v.text)">
+            <SvgIcon v-bind="{ name: 'copy.svg', type: 'primary', size: 20 }"></SvgIcon>
+          </a>
+        </div>
+      </div>
+    </template>
+    <template v-else-if="tab === 'image'">
+      <div class="field is-grouped is-grouped-multiline" v-if="image.length > 0">
+        <div class="control mb-2" v-for="(v, i) in image">
+          <ChipImage
+            style="width: 128px"
+            v-bind="{ show: ['copy', 'download'], file: v, image: `${$getpath()}static/files/${v.file}` }"
+          >
+          </ChipImage>
+        </div>
+      </div>
+    </template>
+    <template v-else-if="tab === 'file'">
+      <FileShow v-bind="{ files: file }"></FileShow>
+    </template>
+    <template v-else-if="tab === 'link'">
+      <div class="px-2 py-2 mb-2" style="border: 1px solid #e8e8e8" v-for="(v, i) in link">
+        <a :href="v.link" target="_blank" class="mr-3">{{ v.link }}</a>
+        <a @click="copyContent(v.link)">
+          <SvgIcon v-bind="{ name: 'copy.svg', type: 'primary', size: 20 }"></SvgIcon>
+        </a>
+      </div>
+    </template>
+  </template>
+</template>
+<script setup>
+const {
+  $id,
+  $copy,
+  $copyToClipboard,
+  $getdata,
+  $resetNull,
+  $findapi,
+  $insertapi,
+  $updateapi,
+  $remove,
+  $deleteapi,
+  $empty,
+} = useNuxtApp();
+import ChipImage from "~/components/media/ChipImage.vue";
+import FileShow from "~/components/media/FileShow.vue";
+const tabs = [
+  { code: "message", name: "Tin nhắn" },
+  { code: "image", name: "Hình ảnh" },
+  { code: "file", name: "Tài liệu" },
+  { code: "link", name: "Liên kết" },
+];
+const options = [
+  { code: "system", name: "Của hệ thống" },
+  { code: "your", name: "Của bạn" },
+];
+var 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", { user: 1, action: props.row.id }, undefined, true);
+var option = ref(record ? "your" : "system");
+function getValue() {
+  if (option.value === "your") {
+    message.value = record ? $copy(record.message || [{ code: $id() }]) : [{ code: $id() }];
+    image.value = record ? $copy(record.image) : [];
+    file.value = record ? $copy(record.file) : [];
+    link.value = record ? $copy(record.link || [{ code: $id() }]) : [{ code: $id() }];
+    return;
+  }
+  message.value = $copy(props.row.message || []);
+  image.value = $copy(props.row.image || []);
+  file.value = $copy(props.row.file || []);
+  link.value = $copy(props.row.link || []);
+}
+// get values
+getValue();
+// next
+function changeTab(v) {
+  tab.value = v.code;
+}
+function changeOption(v) {
+  option.value = v.code;
+  getValue();
+}
+function getFiles(files) {
+  let copy = $copy(file.value);
+  copy = copy.concat(files);
+  file.value = copy;
+  if (option.value === "your") update();
+}
+function getImages(images) {
+  let copy = $copy(image.value);
+  copy = copy.concat(images);
+  image.value = copy;
+  if (option.value === "your") update();
+}
+function copyContent(text) {
+  $copyToClipboard(text);
+}
+function add() {
+  message.value.push({ code: $id() });
+}
+function remove(i) {
+  message.value.splice(i, 1);
+}
+function addLink() {
+  link.value.push({ code: $id() });
+}
+function removeLink(i) {
+  link.value.splice(i, 1);
+}
+async function update() {
+  let data = record ? $resetNull(record) : null;
+  if (!data) data = { user: 1, action: props.row.id };
+  let arr = message.value.filter((v) => !$empty(v.text));
+  data.message = arr.length === 0 ? null : arr;
+  data.image = image.value;
+  data.file = file.value;
+  let arr1 = link.value.filter((v) => !$empty(v.link));
+  data.link = arr1.length === 0 ? null : arr1;
+  let api = $findapi("useraction");
+  record = data.id
+    ? await $updateapi("useraction", data, api.params.values)
+    : await $insertapi("useraction", data, api.params.values);
+  getValue();
+}
+async function removeImage(v, i) {
+  let rs = await $deleteapi("file", v.id);
+  $remove(image.value, i);
+  if (option.value === "your") update();
+}
+async function removeFile(data) {
+  let v = data.v;
+  let i = data.i;
+  let rs = await $deleteapi("file", v.id);
+  $remove(file.value, i);
+  if (option.value === "your") update();
+}
+</script>

app/components/common/Avatarbox.vue

@@ -0,0 +1,28 @@
+<template>  
+    <div :class="`cbox-${type}-${size} mx-0 px-0`" @click="$emit('justclick')" :style="image? 'border: none' : ''">
+      <figure class="image" v-if="image">
+      <img class="is-rounded" :src="`${$path()}download?name=${image}`">
+    </figure>
+    <div v-else>
+      <span>{{text}}</span>
+      </div>
+    </div>
+</template>
+<script>
+  export default {
+    props: ['text', 'image', 'type', 'size'] 
+  }
+</script>
+<style>
+.cbox-findata-two {
+  font-size: 16px;
+  font-weight: bold;
+  width: 34px;
+  height: 34px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #e4e4e4;
+  border-radius: 50%;
+}
+</style>

app/components/common/CountWithAdd.vue

@@ -0,0 +1,41 @@
+<template>
+  <div @click="handleClick()" class="is-clickable">
+    <template v-if="count > 0">
+      <span class="dot-primary">
+        {{ count }}
+      </span>
+    </template>
+    <template v-else>
+      <span class="dot-primary">
+        +
+      </span>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['row', 'countField', 'modalConfig'], 
+  
+  computed: {
+    count() {
+      return this.row[this.countField] || 0;
+    }
+  },
+  
+  methods: {
+    handleClick() {
+      if (!this.modalConfig) return;
+
+      let config = this.$copy(this.modalConfig);
+      
+      this.$emit('open', {
+        name: 'dataevent', 
+        data: {
+          modal: config
+        }
+      });
+    }
+  }
+}
+</script>

app/components/common/CountdownTimer.vue

@@ -0,0 +1,135 @@
+<!-- CountdownTimer.vue -->
+<template>
+  <div class="countdown-wrapper">
+    <span v-if="isExpired" class="tag is-danger">
+      {{ isVietnamese ? 'Hết giờ' : 'Expired' }}
+    </span>
+    <span v-else class="tag" :class="tagClass">
+      <span class="countdown-text">{{ formattedTime }}</span>
+    </span>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue'
+import { useStore } from '@/stores/index'
+
+const props = defineProps({
+  dateValue: {
+    type: [String, Date],
+    required: true
+  },
+  format: {
+    type: String,
+    default: 'HH:mm:ss'
+  }
+})
+
+const store = useStore()
+const { $dayjs } = useNuxtApp()
+
+const timeRemaining = ref({
+  days: 0,
+  hours: 0,
+  minutes: 0,
+  seconds: 0
+})
+
+const isExpired = ref(false)
+let intervalId = null
+
+const isVietnamese = computed(() => store.lang === 'vi')
+
+const tagClass = computed(() => {
+  const totalSeconds = timeRemaining.value.days * 86400 +
+                      timeRemaining.value.hours * 3600 +
+                      timeRemaining.value.minutes * 60 +
+                      timeRemaining.value.seconds
+
+  if (totalSeconds <= 0) return 'is-danger'
+  if (totalSeconds <= 3600) return 'is-warning' // <= 1 hour
+  if (totalSeconds <= 86400) return 'is-info' // <= 1 day
+  return 'is-primary' // > 1 day
+})
+
+const formattedTime = computed(() => {
+  const { days, hours, minutes, seconds } = timeRemaining.value
+
+  if (days > 0) {
+    return isVietnamese 
+      ? `${days}d ${hours}h ${minutes}m` 
+      : `${days}d ${hours}h ${minutes}m`
+  }
+  
+  if (hours > 0) {
+    return isVietnamese 
+      ? `${hours}h ${minutes}m ${seconds}s` 
+      : `${hours}h ${minutes}m ${seconds}s`
+  }
+
+  return isVietnamese 
+    ? `${minutes}m ${seconds}s` 
+    : `${minutes}m ${seconds}s`
+})
+
+const calculateTimeRemaining = () => {
+  try {
+    const targetDate = $dayjs(props.dateValue)
+    const now = $dayjs()
+
+    if (now.isAfter(targetDate)) {
+      isExpired.value = true
+      timeRemaining.value = { days: 0, hours: 0, minutes: 0, seconds: 0 }
+      return
+    }
+
+    isExpired.value = false
+    const diff = targetDate.diff(now, 'second')
+
+    const days = Math.floor(diff / 86400)
+    const hours = Math.floor((diff % 86400) / 3600)
+    const minutes = Math.floor((diff % 3600) / 60)
+    const seconds = diff % 60
+
+    timeRemaining.value = { days, hours, minutes, seconds }
+  } catch (error) {
+    console.error('Error calculating countdown:', error)
+    isExpired.value = true
+  }
+}
+
+const startCountdown = () => {
+  calculateTimeRemaining()
+
+  if (intervalId) clearInterval(intervalId)
+
+  intervalId = setInterval(() => {
+    calculateTimeRemaining()
+
+    if (isExpired.value && intervalId) {
+      clearInterval(intervalId)
+      intervalId = null
+    }
+  }, 1000)
+}
+
+watch(() => props.dateValue, () => {
+  startCountdown()
+}, { deep: true })
+
+onMounted(() => {
+  startCountdown()
+})
+
+onBeforeUnmount(() => {
+  if (intervalId) {
+    clearInterval(intervalId)
+  }
+})
+</script>
+
+<style scoped>
+.countdown-wrapper {
+  display: inline-block;
+}
+</style>

app/components/common/Editor.vue

@@ -0,0 +1,64 @@
+<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>
+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,
+  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
+  [{ list: 'ordered' }, { list: 'bullet' }],
+
+  // 🔗 Media
+  ['link', 'image', 'video'],
+
+  ['clean'], // Xóa định dạng
+]
+
+
+var content = props.text;
+
+function textChange() {
+  emit("content", content);
+  emit("modalevent", { name: "content", data: content });
+}
+</script>

app/components/common/InputEmail.vue

@@ -0,0 +1,37 @@
+<template>
+   <div class="control has-icons-left">
+  <input :class="`input ${error? 'is-danger' : ''} ${disabled? 'has-text-black' : ''}`" type="text" 
+  :placeholder="placeholder || ''" v-model="value" @keyup="doCheck" :disabled="disabled || false">
+  <span class="icon is-left">
+    <SvgIcon v-bind="{name: 'email.svg', type: 'gray', size: 21}"></SvgIcon>
+  </span>
+</div>
+</template>
+<script>
+export default {
+  props: ['record', 'attr', 'placeholder', 'disabled'],
+  data() {
+    return {
+      value: this.record[this.attr]? this.$copy(this.record[this.attr]) : undefined,
+      error: undefined
+    }
+  },
+  watch: {
+    record: function(newVal) {
+      this.value = this.record[this.attr]? this.$copy(this.record[this.attr]) : undefined
+    }
+  },
+  methods: {
+    doCheck() {
+      if(this.$empty(this.value)) {
+        this.value = undefined
+        this.error = false
+        return this.$emit('email', null)
+      }
+      let check = this.$errEmail(this.value)
+      this.error = check? true : false
+      this.$emit('email', this.value)
+    }
+  }
+}
+</script>

app/components/common/InputNumber.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="control has-icons-left">
+    <input
+      :class="`input ${disabled ? 'has-text-black' : ''}`"
+      type="text"
+      :placeholder="placeholder || ''"
+      v-model="value"
+      @keyup="doCheck"
+      :disabled="disabled || false"
+    />
+    <span class="icon is-left">
+      <SvgIcon v-bind="{ name: 'calculator.svg', type: 'gray', size: 22 }"></SvgIcon>
+    </span>
+  </div>
+</template>
+<script>
+export default {
+  props: ["record", "attr", "placeholder", "disabled", "defaultValue"],
+  data() {
+    return {
+      value: this.getInitialValue(),
+      timer: undefined,
+    };
+  },
+  created() {
+    if (this.defaultValue) {
+      this.value = this.value !== undefined ? this.$numtoString(this.value) : this.$numtoString(0);
+    } else {
+      if (this.value !== undefined && this.value !== null) {
+        this.value = this.$numtoString(this.value);
+      } else {
+        this.value = "";
+      }
+    }
+  },
+  watch: {
+    record: function (newVal) {
+      this.value = this.$numtoString(this.record[this.attr]);
+    },
+  },
+  methods: {
+    getInitialValue() {
+      const recordValue = this.record ? this.record[this.attr] : undefined;
+
+      if (this.defaultValue) {
+        if (recordValue === null || recordValue === undefined || recordValue === "") {
+          return 0;
+        }
+        return this.$copy ? this.$copy(recordValue) : recordValue;
+      } else {
+        if (recordValue === null || recordValue === undefined || recordValue === "") {
+          return undefined;
+        }
+        return this.$copy ? this.$copy(recordValue) : recordValue;
+      }
+    },
+
+    getDisplayValue(recordValue) {
+      if (this.defaultValue) {
+        if (recordValue === null || recordValue === undefined || recordValue === "") {
+          return this.$numtoString(0);
+        }
+        return this.$numtoString(recordValue);
+      } else {
+        if (recordValue === null || recordValue === undefined || recordValue === "") {
+          return "";
+        }
+        return this.$numtoString(recordValue);
+      }
+    },
+    doCheck() {
+      if (this.timer) clearTimeout(this.timer);
+      this.timer = setTimeout(() => this.checkChange(), 500);
+    },
+    doChange() {
+      this.$emit("change", this.value);
+    },
+    checkChange() {
+      if (!this.$empty(this.value)) {
+        this.value = this.$numtoString(this.$formatNumber(this.value));
+        this.$emit("number", this.$formatNumber(this.value));
+      } else {
+        if (this.defaultValue) {
+          this.value = this.$numtoString(0);
+          this.$emit("number", 0);
+        } else {
+          this.value = "";
+          this.$emit("number", null);
+        }
+      }
+    },
+  },
+};
+</script>

app/components/common/InputPhone.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="control has-icons-left">
+    <input
+      class="input"
+      type="text"
+      :placeholder="placeholder || ''"
+      v-model="value"
+      :disabled="disabled || false"
+      inputmode="numeric"
+      autocomplete="tel"
+    />
+    <span class="icon is-left">
+      <SvgIcon v-bind="{name: 'phone.png', type: 'gray', size: 20}"></SvgIcon>
+    </span>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["record", "attr", "placeholder", "disabled"],
+
+  data() {
+    return {
+      value: "",
+    };
+  },
+
+  created() {
+    const initial = this.record?.[this.attr];
+    this.value = initial ? String(initial) : "";
+  },
+
+  watch: {
+    /** giống InputEmail.vue: watch value → emit ngay */
+    value(newVal) {
+      // giữ lại CHỈ chữ số
+      const digits = String(newVal).replace(/\D/g, "");
+
+      // sync lại UI nếu user nhập ký tự khác số
+      if (digits !== newVal) {
+        this.value = digits;
+        return;
+      }
+
+      // emit string số hoặc null
+      this.$emit("phone", digits.length ? digits : null);
+    },
+
+    record(newVal) {
+      const v = newVal?.[this.attr];
+      this.value = v ? String(v) : "";
+    },
+  },
+};
+</script>

app/components/common/Note.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="field">
+    <div class="control">
+      <textarea v-model="record.note" class="textarea" name="note" placeholder="" rows="8"></textarea>
+    </div>
+  </div>
+  <div class="mt-4">
+    <button class="button is-primary has-text-white" @click="save()">
+      {{ $store.lang==='vi'? 'Lưu lại' : 'Save' }}
+    </button>
+  </div>
+</template>
+<script setup>
+  const emit = defineEmits(["close"])
+  const { $store, $getdata, $updateapi, $updatepage } = useNuxtApp();
+  const props = defineProps({
+    row: Object,
+    pagename: String
+  })
+  var record = await $getdata('application', {id: props.row.id}, undefined, true)
+  async function save()  {
+    await $updateapi('application', record)
+    record = await $getdata('application', {id: props.row.id}, undefined, true)
+    $updatepage(props.pagename, record)
+    emit('close')
+  }
+</script>

app/components/common/NoteInfo.vue

@@ -0,0 +1,125 @@
+<template>
+  <div>
+    <template v-if="data">
+      <article class="message is-findata" v-if="data.length===0">
+        <div class="message-body py-2 fs-16">
+          Chưa có <b>ghi chú</b> nào được lưu
+        </div>
+      </article>
+      <template v-else>
+        <article class="media mt-0 mb-0" v-for="(v,i) in data">
+          <figure class="media-left">
+            <Avatarbox v-bind="{ 
+              text: v.user__fullname[0].toUpperCase(), 
+              size: 'two', 
+              type: 'primary' 
+            }" />
+          </figure>
+          <div class="media-content">
+            <div>
+              <p class="fs-15">
+                {{ v.detail }}
+              </p>
+              <p class="mt-1 fs-14 has-text-grey">
+                <span class="icon-text">
+                  <span>{{v.user__fullname}}</span>
+                  <span class="ml-3">{{ $dayjs(v['create_time']).fromNow(true) }}</span>
+                  <template v-if="login.id===v.user">
+                    <a class="ml-3" @click="edit(v)">
+                      <SvgIcon v-bind="{name: 'pen1.svg', type: 'gray', size: 20}"></SvgIcon>
+                    </a>
+                    <a class="ml-3" @click="askConfirm(v, i)">
+                      <SvgIcon v-bind="{name: 'bin.svg', type: 'gray', size: 20}"></SvgIcon>
+                    </a>
+                  </template>
+                </span>
+              </p>
+            </div>
+          </div>
+        </article>
+      </template>
+    </template>
+    <div v-if="$getEditRights()" class="field is-grouped mt-3">
+      <div class="control is-expanded">
+        <textarea class="textarea" rows="2" placeholder="Viết ghi chú tại đây" v-model="detail"></textarea>
+      </div>
+      <div class="control">
+        <button class="button is-primary has-text-white" @click="save()">Lưu</button>
+      </div>
+    </div>
+    <Modal @close="showmodal=undefined" v-bind="showmodal" v-if="showmodal" @confirm="confirm()"></Modal>
+  </div>
+</template>
+<script>
+export default {
+  props: ['row', 'api', 'pagename'],
+  data() {
+    return {
+      data: undefined,
+      detail: undefined,
+      vbind2: {image: undefined, text: 'ABC', size: 'two', type: 'findata'},
+      current: undefined,
+      showmodal: undefined,
+      obj: undefined
+    }
+  },
+  async created() {
+    if(!this.row) return 
+    this.data = await this.$getdata(this.api, {ref: this.row.id})
+  },
+  computed: {
+    login: {
+      get: function() {return this.$store.login},
+      set: function(val) {this.$store.commit("updateLogin", {login: val})}
+    }
+  },
+  methods: {
+    async save() {
+      if(this.$empty(this.detail)) return this.$snackbar('Chưa nhập nội dung ghi chú')
+      let data = {user: this.$store.login.id, detail: this.detail, ref: this.row.id}
+      if(this.current) {
+        data = this.$copy(this.current)
+        data.detail = this.detail
+      }
+      let rs = data.id? await this.$updateapi(this.api, data) : await this.$insertapi(this.api, data)  
+      if(!rs) return
+      this.detail = undefined
+      if(this.current) {
+        this.current = undefined
+        let idx = this.$findIndex(this.data, {id: rs.id})
+        this.$set(this.data, idx, rs)
+      } else {
+        this.data.push(rs)
+        let rows = this.$copy(this.$store[this.pagename].data)
+        let idx = this.$findIndex(rows, {id: this.row.id})
+        let copy = this.$copy(this.row)
+        copy.count_note += 1
+        rows[idx] = copy
+        this.$store.commit('updateState', {name: this.pagename, key: 'update', data: {data: rows}})
+      }
+    },
+    edit(v) {
+      this.current = this.$copy(v)
+      this.detail = v.detail
+    },
+    askConfirm(v, i) {
+      this.obj = {v: v, i: i}
+      this.showmodal = {component: `dialog/Confirm`,vbind: {content: 'Bạn có muốn xóa ghi chú này không?', duration: 10}, 
+      title: 'Xóa ghi chú', width: '500px', height: '100px'}
+    },
+    async confirm() {
+      let v = this.obj.v
+      let i = this.obj.i
+      let rs = await this.$deleteapi(this.api, v.id)
+      if(rs==='error') return
+      this.$delete(this.data, i)
+      let rows = this.$copy(this.$store[this.pagename].data)
+      let idx = this.$findIndex(rows, {id: this.row.id})
+      let copy = this.$copy(this.row)
+      copy.count_note -= 1
+      rows[idx] = copy
+      this.$store.commit('updateState', {name: this.pagename, key: 'update', data: {data: rows}})
+    }
+  }
+}
+</script>

app/components/common/Notebox.vue

@@ -0,0 +1,18 @@
+<template>
+  <span 
+    v-if="row.count_note || $getEditRights()" 
+    class="dot-primary" 
+    @click="doClick()"
+  >{{ row.count_note || '+' }}</span>
+</template>
+<script>
+export default {
+  props: ['row', 'api', 'pagename'],
+  methods: {
+    doClick() {
+      let obj = {component: 'common/NoteInfo', title: 'Ghi chú', width: '50%', vbind: {row: this.row, api: this.api, pagename: this.pagename}}
+      this.$emit('open', {name: 'dataevent',  data: {modal: obj}})
+    }
+  }
+}
+</script>

app/components/common/Phone.vue

@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <p class="fsb-30">{{ text }}
+      <a class="ml-3" @click="copy()">
+        <SvgIcon v-bind="{name: 'copy.svg', type: 'primary', size: 24}"></SvgIcon>
+      </a>
+    </p>
+    <p class="buttons mt-4">
+      <button class="button is-primary" @click="call()">Call</button>
+      <button class="button is-primary" @click="sms()">SMS</button>
+      <button class="button is-primary" @click="openZalo()">Zalo</button>
+    </p>
+    <Modal @close="showmodal=undefined" v-bind="showmodal" v-if="showmodal"></Modal>
+  </div>
+</template>
+<script>
+export default {
+  props: ['row', 'pagename'],
+  data() {
+    return {
+      text: undefined,
+      phone: this.row.customer__phone || this.row.party__phone || this.row.phone,
+      showmodal: undefined
+    }
+  },
+  created() {
+    var format = function(s) {
+      return `${s.slice(0,3)} ${s.slice(3,6)} ${s.slice(6, 20)}`
+    }
+    this.text = format(this.phone)
+  },
+  methods: {
+    call() {
+      window.open(`tel:${this.phone}`)
+    },
+    sms() {
+      window.open(`sms:${this.phone}`)
+    },
+    sendSms() {
+      let api = this.row.code.indexOf('CN')>=0? 'customersms' : undefined
+      if(this.row.code.indexOf('LN')>=0) api = 'loansms'
+      else if(this.row.code.indexOf('TS')>=0) api = 'collateralsms'
+      this.showmodal = {component: 'user/Sms', title: 'Nhắn tin SMS', width: '50%', height: '400px', 
+      vbind: {row: this.row, pagename: this.pagename, api: api}}
+    },
+    copy() {
+      this.$copyToClipboard(this.phone)
+    },
+    openZalo() {
+      window.open(`https://zalo.me/${this.phone}`, '_blank')
+    }
+  }
+}
+</script>

app/components/common/ProductCountbox.vue

@@ -0,0 +1,25 @@
+
+<template>
+  <span class="dot-primary" @click="onClick()">{{ row.count_product }}</span>
+</template>
+<script>
+// use in Khách hàng -> Giao dịch (<DataView :setting='customer-all-transaction'/>)
+export default {
+  props: ['row', 'api', 'pagename'],
+  methods: {
+    onClick() {
+      const obj = {
+        component: 'common/ProductInfo', 
+        title: 'Sản phẩm',
+        width: '60%',
+        height: '400px',
+        vbind: {
+          row: this.row,
+          pagename: this.pagename
+        }
+      }
+      this.$emit('open', {name: 'dataevent',  data: { modal: obj }})
+    }
+  }
+}
+</script>

app/components/common/ProductInfo.vue

@@ -0,0 +1,21 @@
+<script setup>
+const props = defineProps({
+  row: Object,
+  pagename: String
+});
+const { $id } = useNuxtApp();
+</script>
+<template>
+  <div>
+    <DataView v-bind="{
+      setting: 'product-info',
+      pagename: $id(),
+      api: 'product',
+      params: {
+        filter: { prdbk__transaction__customer: props.row.id },
+        // copied from 02-connection.js
+        values: 'price_excluding_vat,prdbk__transaction__txncurrent__detail__status__name,locked_until,note,cart,cart__name,cart__code,cart__dealer,cart__dealer__code,cart__dealer__name,direction,type,zone_type,dealer,link,type__name,dealer__code,dealer__name,prdbk,prdbk__transaction__customer,prdbk__transaction,prdbk__transaction__policy__code,prdbk__transaction__sale_price,prdbk__transaction__discount_amount,prdbk__transaction__code,prdbk__transaction__customer__code,prdbk__transaction__customer__phone,prdbk__transaction__customer__fullname,prdbk__transaction__customer__legal_code,id,code,trade_code,land_lot_code,zone_code,zone_type__name,lot_area,building_area,total_built_area,number_of_floors,land_lot_size,origin_price,direction__name,villa_model,product_type,template_name,project,project__name,status,status__code,status__name,status__color,status__sale_status,status__sale_status__color,create_time,prdbk__transaction__amount_received,prdbk__transaction__amount_remain',
+      }
+    }" />
+  </div>
+</template>

app/components/common/QRcode.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="has-text-centered">
+    <div class="mb-4">
+      <p v-if="row && row.fullname"><b>{{row.fullname}}</b></p>
+    </div>
+    
+    <div class="mt-2 px-5 is-flex is-justify-content-center">
+      <ClientOnly>
+        <Qrcode
+          v-if="finalLink" 
+          :key="finalLink" 
+          id="qrcode"
+          :value="finalLink"
+          :size="300"
+        />
+      </ClientOnly>
+      <div v-if="!finalLink" style="width: 300px; height: 300px; border: 1px dashed #ccc; display: flex; align-items: center; justify-content: center; color: #888;">
+        Không có dữ liệu để tạo QR Code
+      </div>
+    </div>
+    
+    <div class="mt-2 is-flex is-justify-content-center is-gap-1">
+      <a 
+        @click="openLink()" 
+        class="button is-light is-link is-rounded"
+        :title="isVietnamese ? 'Mở đường dẫn liên kết' : 'Open external link'"
+        v-if="finalLink"
+      >
+        <span class="icon">
+          <SvgIcon v-bind="{ name: 'open.svg', type: 'primary', size: 24 }" />
+        </span>
+      </a>
+
+      <a 
+        @click="download()" 
+        class="button is-light is-link is-rounded"
+        :title="isVietnamese ? 'Tải Xuống QR Code' : 'Download QR Code'"
+        v-if="finalLink"
+      >
+        <span class="icon">
+          <SvgIcon v-bind="{ name: 'download.svg', type: 'primary', size: 24 }" />
+        </span>
+      </a>
+    </div>
+  </div>
+</template>
+<script setup>
+  import { computed } from 'vue'
+  import { useStore } from "@/stores/index";
+  
+  const store = useStore();
+  const isVietnamese = computed(() => store.lang === "vi") 
+
+  const { $getpath, $snackbar } = useNuxtApp()
+  const props = defineProps({
+    row: Object,
+    link: String
+  })
+
+  const finalLink = computed(() => {
+    if (props.link) {
+      return props.link
+    }
+    if (props.row && props.row.code) {
+      const path = $getpath()
+      const baseUrl = path ? path.replace('api.', '') : '';
+      return `${baseUrl}loan/${props.row.code}`
+    }
+    return ''
+  })
+
+  function openLink() {
+    if (finalLink.value) {
+      window.open(finalLink.value, "_blank")
+    }
+  }
+
+  function sleep(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+  }
+
+  async function download() {
+    if (!finalLink.value) return;
+
+    let svg = document.getElementById('qrcode');
+    let attempts = 0;
+    
+    while (!svg && attempts < 5) {
+        await sleep(100);
+        svg = document.getElementById('qrcode');
+        attempts++;
+    }
+
+    if (!svg) {
+        console.error("QR Code SVG element not found after waiting.");
+        $snackbar(isVietnamese.value ? 'Không tìm thấy mã QR để tải xuống.' : 'QR Code not found for download.', { type: 'is-danger' });
+        return;
+    }
+
+    const serializer = new XMLSerializer()
+    const svgData = serializer.serializeToString(svg)
+    const svgBlob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' })
+    const url = URL.createObjectURL(svgBlob)
+
+    const image = new Image()
+    image.onload = () => {
+      const canvas = document.createElement('canvas')
+      canvas.width = 300 
+      canvas.height = 300
+      const ctx = canvas.getContext('2d')
+      ctx.drawImage(image, 0, 0, 300, 300) 
+
+      const pngUrl = canvas.toDataURL('image/png')
+
+      const linkElement = document.createElement('a')
+      linkElement.href = pngUrl
+
+      const filename = props.row && props.row.code ? `qrcode-${props.row.code}.png` : 'qrcode.png'
+      linkElement.download = filename
+      linkElement.click()
+
+      URL.revokeObjectURL(url)
+      $snackbar(isVietnamese.value ? 'Đã tải xuống mã QR!' : 'QR Code downloaded!', { type: 'is-success' });
+    }
+    image.src = url
+  }
+</script>

app/components/common/ViewList.vue

@@ -0,0 +1,10 @@
+<template>
+  <div>
+    <DataView v-if="vbind" v-bind="vbind"></DataView>
+  </div>
+</template>
+<script>
+export default {
+  props: ['vbind']
+}
+</script>