Initial commit

app/plugins/00-datatable.js

@@ -0,0 +1,433 @@
+
+import { useStore } from '~/stores/index'
+export default defineNuxtPlugin(() => {
+  const store = useStore()
+
+  //==========Find & filter=================
+  const find = function(arr, obj, attr) {
+    const keys = Object.keys(obj)
+    let found = arr.find(v=>{
+      let valid = true
+      keys.map(key=>{
+        let val = obj[key]
+        if(valid===false) return false
+        else if(Array.isArray(val)) {
+          if(val.findIndex(x=>x===v[key]) <0) valid = false
+        } else if(!(v[key]===val)) valid = false
+      })
+      return valid
+    })
+    return found? (attr? found[attr] : found) : undefined
+  }
+
+  const findIndex = function(arr, obj) {
+    const keys = Object.keys(obj)
+    return arr.findIndex(v=>{
+      let valid = true
+      keys.map(key=>{
+        let val = obj[key]
+        if(valid===false) return false
+        else if(Array.isArray(val)) {
+          if(val.findIndex(x=>x===v[key]) <0) valid = false
+        } else if(!(v[key]===val)) valid = false
+      })
+      return valid
+    })
+  }
+
+  const filter = function(arr, obj, attr) {
+    const keys = Object.keys(obj)
+    let rows = arr.filter(v=>{
+      let valid = true
+      keys.map(key=>{
+        let val = obj[key]
+        if(valid===false) return false
+        else if(Array.isArray(val)) {
+          if(val.findIndex(x=>x===v[key]) <0) valid = false
+        } else if(!(v[key]===val)) valid = false
+      })
+      return valid
+    })
+    return attr? rows.map(v=>v[attr]) : rows
+  }
+
+  //=========Empty & copy============
+  const id = function() {
+    return Math.random().toString(36).substring(2, 12).toUpperCase()
+  }
+
+  const empty = function(val) {
+    return val === undefined || val === null || val === ''
+  }
+
+  const copy = function(val) {
+    if (empty(val)) return val
+    return JSON.parse(JSON.stringify(val))
+  }
+
+  const clone = function(obj) {
+    if (obj === null || typeof (obj) !== 'object' || 'isActiveClone' in obj)
+      return obj;
+    if (obj instanceof Date)
+      var temp = new obj.constructor(); //or new Date(obj);
+    else
+      var temp = obj.constructor();
+    for (var key in obj) {
+      if (Object.prototype.hasOwnProperty.call(obj, key)) {
+        obj['isActiveClone'] = null;
+        temp[key] = clone(obj[key]);
+        delete obj['isActiveClone'];
+      }
+    }
+    return temp
+  }
+
+  const remove = function(arr, idx) {
+    arr.splice(idx, 1)
+  }
+
+  const stripHtml = function(html, length) {
+    if(!html) return null
+    else if(typeof html!=='string') return html
+    if(html? html.indexOf('<')<0 : false) {
+      return length? (html.length > length? html.substring(0, length) + '...' : html ) : html
+    }
+    var tmp = document.createElement("DIV")
+    tmp.innerHTML = html
+    var val = tmp.textContent || tmp.innerText || ""
+    return length? (val.length > length? val.substring(0, length) + '...' : val ) : val
+  }
+
+  //==========Convert=================
+  const isNumber = function(val) {
+    if(empty(val)) return false
+    val = val.toString().replace(/,/g, "")
+    return !isNaN(val)
+  }
+
+  const numtoString = function(val, config = undefined) {
+    if (empty(val)) return '0';
+    val = val.toString().replace(/,/g, "");
+    if (isNaN(val)) return;
+
+    const defaultConfig = { 
+      type: 'vi-VN', 
+      decimal: undefined,
+      mindecimal: undefined,
+      hasUnit: false 
+    };
+
+    const finalConfig = { ...defaultConfig, ...config };
+    const { type, decimal, mindecimal, hasUnit } = finalConfig;
+
+    const options = {};
+    if (typeof decimal === 'number') options.maximumFractionDigits = decimal || 0;
+    if (mindecimal) options.minimumFractionDigits = mindecimal;
+    const unit = hasUnit ? ' đ' : '';
+    return Number(val).toLocaleString(type, typeof decimal === 'number' ? options : undefined) + unit;
+  }
+
+  const formatNumber = function(val) {
+    if(empty(val)) return
+    val = val.toString().replace(/[,\.]/g, "")
+    if (val.indexOf('%') >0) {
+      val = val.replace(/%/g, "")
+      return isNaN(val)? undefined : Number(val)/100
+    }
+    return isNaN(val)? undefined : Number(val)
+  }
+
+  const formatUnit = function(val, unit, decimal, string, mindecimal) {
+    val = formatNumber(val)
+    if(val===undefined) return
+    let percentage = (unit===0.01 || unit==="0.01")? '%' : ''
+    val = unit? val/Number(unit) : val
+    let f = {maximumFractionDigits: decimal || 0}
+    if(mindecimal) f['minimumFractionDigits'] = mindecimal
+    return string? (val.toLocaleString('en-EN', f) + percentage) : (val).toFixed(decimal)
+  }
+
+//==========Calculate=================
+  const calc = function(fn) {
+    return new Function('return ' + fn)()
+  }
+
+  const calculate = function(row, tags, formula, decimal, unit) {
+    let val = this.$copy(formula)
+    let valid = 0
+    tags.forEach(v => {
+      let myRegExp = new RegExp(v, 'g')
+      let res = this.$formatNumber(row[v])
+      if(res) valid = 1
+      val = val.replace(myRegExp, `(${res || 0})`)
+    })
+    if(valid===0) return {success: false, value : undefined} //all values is null
+    //calculate
+    try {
+      let value = this.$calc(val)
+      if(isNaN(value) || value===Number.POSITIVE_INFINITY || value===Number.NEGATIVE_INFINITY) {
+        var result = {success: false, value : value}
+      } else {
+        value = (value===true || value===false)? value : formatUnit(value, unit, decimal, true, decimal)
+        var result = {success: true, value: value}
+      }
+    }
+    catch(err) {
+      var result = {success: false, value : undefined}
+    }
+    return result
+  }
+
+  const calculateFunc = function(row, cols, func, decimal, unit) { 
+    let value
+    let arr1 = cols.map(v=>this.$formatNumber(row[v]))
+    let arr = arr1.filter(v=>v)
+    if(arr.length===0) return {success: false, value : undefined}
+    if(func==='max') value = Math.max(...arr)
+    else if(func==='min') value = Math.min(...arr)
+    else if(func==='sum') value = arr.reduce((a, b) => a + b, 0)
+    else if(func==='avg') {
+      let total =  arr.reduce((a, b) => a + b, 0)
+      value = total / cols.length
+    }
+    if(!value) return {success: false, value: undefined}
+    value = formatUnit(value, unit, decimal, true, decimal)
+    return {success: true, value: value}
+  }
+
+  const calculateData = function(data, fields) {
+    let arr = this.$copy(fields.filter(h=>h.formula))
+    if(arr.length===0) return data
+    let arr1 = arr.filter(v=>v.func)
+    arr1.map(v=>{
+      if(v.vals.indexOf(':')>=0) {
+        let arr2 = v.vals.toLowerCase().replaceAll('c', '').split(':')
+        let cols = []
+        for (let i = parseInt(arr2[0]); i <= parseInt(arr2[1]); i++) {
+          let field = fields.length>i? fields[i] : undefined
+          if(field? (field.format==='number' && field.name!==v.name) : false) cols.push(field.name) 
+        }
+        v.cols = cols
+      } else {
+        let arr2 = v.vals.toLowerCase().replaceAll('c', '').split(',')
+        let cols = []
+        arr2.map(v=>{
+          let i = parseInt(v)
+          let field = fields.length>i? fields[i] : undefined
+          if(field? (field.format==='number' && field.name!==v.name) : false) cols.push(field.name) 
+        })
+        v.cols = cols
+      }
+    })
+    arr = multiSort(arr, {level: 'asc'})
+    let copy = data
+    copy.map(v=>{
+      arr.map(x=>{
+        if(x.func) {
+          let res = calculateFunc(v, x.cols, x.func, x.decimal, x.unit)
+          if(res? res.success : false) v[x.name] = res.value
+        } else {
+          let res = calculate(v, x.tags, x.formula, x.decimal, x.unit)
+          if(res? res.success : false) v[x.name] = res.value
+        }
+      })
+    })
+    return copy
+  }
+
+  const summary = function(arr, fields, type) {
+    let obj = {}
+    if(type==='total') {
+      fields.map(x=> obj[x] = arr.map(v=>v[x]? v[x] : 0).reduce((a, b) => a + b, 0))
+    } else if(type==='min') {
+      fields.map(x=>obj[x] = Math.min(...arr.map(v=>v[x])))
+    }
+    else if(type==='max') {
+      fields.map(x=>obj[x] = Math.max(...arr.map(v=>v[x])))
+    }
+    else if(type==='count') {
+      fields.map(x=>obj[x] = arr.map(v=>!empty(v[x])).length)
+    }
+    return obj
+  }
+
+//====================Array====================
+  const formatArray = function(data, fields) {
+    let args = fields.filter(v=>v.format==='number')
+    data.map(v=>{
+      args.map(x=>{
+        v[x.name] = empty(v[x.name])? undefined : formatUnit(v[x.name], x.unit, x.decimal, true, x.decimal)
+      })
+    })
+    return data
+  }
+
+  const unique = function(arr, keyProps) {
+    const kvArray = arr.map(entry => {
+    const key = keyProps.map(k => entry[k]).join('|');
+    return [key, entry];
+    });
+    const map = new Map(kvArray);
+    return Array.from(map.values());
+  }
+  
+  const arrayMove = function(arr, old_index, new_index) {
+    if (new_index >= arr.length) {
+      var k = new_index - arr.length + 1;
+      while (k--) {
+        arr.push(undefined);
+      }
+    }
+    arr.splice(new_index, 0, arr.splice(old_index, 1)[0]);
+    return arr; // for testing
+  }
+
+  const multiSort = function(array, sortObject = {}, format = {}) {
+    const sortKeys = Object.keys(sortObject)
+
+    // Return array if no sort object is supplied.
+    if (!sortKeys.length) return array
+
+    // Change the values of the sortObject keys to -1, 0, or 1.
+    for (let key in sortObject)
+        sortObject[key] = sortObject[key] === 'desc' || sortObject[key] === -1 ? -1 : (sortObject[key] === 'skip' || sortObject[key] === 0 ? 0 : 1)
+
+    const keySort = (a, b, direction) => {
+        direction = direction !== null ? direction : 1
+        if (a === b) return 0
+
+        // If b > a, multiply by -1 to get the reverse direction.
+        return a > b ? direction : -1 * direction;
+    }
+
+    return array.sort((a, b) => {
+      let sorted = 0, index = 0
+
+      // Loop until sorted (-1 or 1) or until the sort keys have been processed.
+      while (sorted === 0 && index < sortKeys.length) {
+        const key = sortKeys[index]
+        if (key) {
+          const direction = sortObject[key]
+          let val1 = format[key]==='number'? (empty(a[key])? 0 :  this.$formatNumber(a[key])) : a[key]
+          let val2 = format[key]==='number'? (empty(b[key])? 0 :  this.$formatNumber(b[key])) : b[key]
+            sorted = keySort(val1, val2, direction)
+            index++
+          }
+        }
+      return sorted
+    })
+  }
+
+  //======================Fields====================
+  const createField = function(name,label,format,show, minwidth) {
+    let field = {name: name, label: label, format: format, show: show, minwidth: minwidth}
+    if(format==='number') {
+      field.unit = '1'
+      field.textalign = 'right'
+    }
+    return field
+  }
+
+  const updateFields = function(pagename, field, action) {
+    let pagedata = store[pagename]
+    let copy = this.$copy(pagedata.fields)
+    let idx = this.$findIndex(copy, {name: field.name})
+    if(action==='delete') {
+      this.$delete(copy, idx)
+      if(pagedata.filters? pagedata.filters.length>0 : false) {
+        let index = this.$findIndex(pagedata.filters, {name: field.name})
+        if(index>=0) {
+          let copyFilter = this.$copy(this.pagedata.filters)
+          this.$delete(copyFilter, index)
+          this.$store.commit('updateState', {name: pagename, key: 'filterby', data: copyFilter})
+        }
+      }
+    } else {
+      idx>=0? copy[idx] = field : copy.push(field)
+    }
+    this.$store.commit("updateState", {name: pagename, key: "fields", data: copy})      
+  }
+
+  const updateSeriesFields = function(fields) {
+    if (!Array.isArray(fields)) {
+      fields = Object.values(fields);
+    }
+    
+    fields.filter(v=>v.series).map(field=>{
+      let obj = field.api==='finitem'? this.$findPeriod(field.series, 'period') : this.$findPeriod(field.series)
+      field.period = field.api==='finitem'? obj.code : obj
+      let idx = field.label.indexOf('[')
+      field.label = (idx>0? field.label.substring(0, idx) : field.label) + '[' + (field.api==='finitem'? obj.show : obj)  + ']'
+    })
+    return fields
+  }
+  
+  const updateSeriesFilters = function(filters, fields) {
+    if(fields.filter(v=>v.series).length===0) return filters
+    filters.map(v=>{
+      let found = fields.find(x=>x.name===v.name)
+      if(found? found.series : false) {
+        v.label = found.label
+      }
+    })
+    return filters
+  }
+
+  //======================Export=============================== 
+  const exportExcel = function(data, filename, fields) {
+    var _filename = filename + '.xlsx'
+    let list = []
+    data.map(v=>{
+      let ele = {}
+      fields.map(x=>{
+        let label = stripHtml(x.label)
+        ele[label] = v[x.name]
+      })
+      list.push(ele)
+    })
+    var XLSX = require('xlsx')
+    //workBook class
+    function Workbook() {
+      if(!(this instanceof Workbook)) return new Workbook()
+      this.SheetNames = []
+      this.Sheets = {}
+    }
+    var exportBook = new Workbook();
+    var worksheet =  XLSX.utils.json_to_sheet(list)
+    exportBook.SheetNames.push('sheet1')
+    exportBook.Sheets.sheet1 = worksheet
+    XLSX.writeFile(exportBook, _filename)        
+  }
+
+  return {
+    provide: {
+      find,
+      findIndex,
+      filter,
+      id,
+      empty,
+      copy,
+      clone,
+      remove,
+      stripHtml,
+      isNumber,
+      numtoString,
+      formatNumber,
+      formatUnit,
+      calc,
+      calculate,
+      calculateFunc,
+      calculateData,
+      summary,
+      formatArray,
+      unique,
+      arrayMove,
+      multiSort,
+      createField,
+      updateFields,
+      updateSeriesFields,
+      updateSeriesFilters,
+      exportExcel
+    }
+  }
+})

app/plugins/01-common.js

@@ -0,0 +1,641 @@
+// nuxt 3 - plugins/my-plugin.ts
+import { useRoute } from 'vue-router';
+import { useStore } from '~/stores/index';
+import dayjs from 'dayjs';
+import weekday from 'dayjs/plugin/weekday';
+import weekOfYear from 'dayjs/plugin/weekOfYear';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import 'dayjs/locale/vi';
+dayjs.extend(weekday);
+dayjs.extend(weekOfYear);
+dayjs.extend(relativeTime);
+
+dayjs.locale('vi');
+
+export default defineNuxtPlugin(() => {
+  const route = useRoute();
+  const { $id, $empty } = useNuxtApp();
+  const store = useStore();
+  const dialog = function (content, title, type, duration, width, height, vbind) {
+    content = typeof content === 'string' ? content : JSON.stringify(content);
+    let vtitle = type === 'Success' ? `<span class="has-text-primary">${title}</span>` : title;
+    if (type === 'Error') vtitle = `<span class="has-text-danger">${title}</span>`;
+    let data = {
+      id: $id(),
+      component: `dialog/${type || 'Info'}`,
+      vbind: { content: content, duration: duration, vbind: vbind },
+      title: vtitle,
+      width: width || '600px',
+      height: height || '100px',
+    };
+    store.commit('showmodal', data);
+  };
+
+  const snackbar = function (content, title, type, width, height) {
+    content = typeof content == 'string' ? content : JSON.stringify(content);
+    let vtitle = type === 'Success' ? `<span class="has-text-primary">${title}</span>` : title;
+    if (type === 'Error') vtitle = `<span class="has-text-danger">${title}</span>`;
+    let data = {
+      id: $id(),
+      component: `snackbar/${type || 'Info'}`,
+      vbind: { content: content },
+      title: vtitle,
+      width: width || '600px',
+      height: height || '100px',
+    };
+    store.commit('snackbar', data);
+  };
+
+  const getLink = function (val) {
+    if (val === undefined || val === null || val === '' || val === '') return '';
+    let json = val.indexOf('{') >= 0 ? JSON.parse(val) : { path: val };
+    return json;
+  };
+
+  const errPhone = function (phone) {
+    var text = undefined;
+    if ($empty(phone)) {
+      text = 'Số điện thoại di động không được bỏ trống.';
+    } else if (isNaN(phone)) {
+      text = 'Số điện thoại di động không hợp lệ.';
+    } else if (phone.length < 9 || phone.length > 11) {
+      text = 'Số điện thoại di động phải từ 9-11 số.';
+    }
+    return text;
+  };
+
+  const errEmail = function (email) {
+    const re =
+      /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+    var text = undefined;
+    if ($empty(email)) {
+      text = 'Email không được bỏ trống.';
+    } else if (!re.test(String(email).toLowerCase())) {
+      text = 'Email không hợp lệ.';
+    }
+    return text;
+  };
+
+  const errPhoneEmail = function (contact) {
+    const re =
+      /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+    var text = undefined;
+
+    if ($empty(contact)) {
+      text = 'Số điện thoại di động hoặc Email không được bỏ trống.';
+    } else if (!(re.test(String(contact).toLowerCase()) || !isNaN(contact))) {
+      text = 'Số điện thoại di động hoặc Email không hợp lệ.';
+    } else if (!isNaN(contact) && (contact.length < 9 || contact.length > 11)) {
+      text = 'Số điện thoại di động không hợp lệ.';
+    }
+    return text;
+  };
+
+  const dummy = function (data, count) {
+    let list = this.$copy(data);
+    for (let index = 0; index < count; index++) {
+      if (data.length < index + 1) list.push({ dummy: true });
+    }
+    return list;
+  };
+
+  const upload = function (file, type, user, convert, quality) {
+    var fileFormat = [
+      { type: 'image', format: ['.png', '.jpg', 'jpeg', '.bmp', '.gif', '.svg', '.webp'] },
+      { type: 'video', format: ['.wmv', '.avi', '.mp4', '.flv', '.mov', '.mpg', '.amv', '.rm'] },
+    ];
+    var valid = undefined;
+    if (type === 'image' || type === 'video') {
+      valid = false;
+      let found = fileFormat.find((v) => v.type === type);
+      found.format.map((x) => {
+        if (file.name.toLowerCase().indexOf(x) >= 0) valid = true;
+      });
+    }
+    if (valid === false) return { name: file.name, error: true, text: 'Định dạng file không hợp lệ' };
+    if ((type === 'image' || type === 'file') && file.size > 500 * 1024 * 1024) {
+      return {
+        name: file.name,
+        error: true,
+        text: 'Kích thước ' + (type === 'image' ? 'hình ảnh' : 'tài liệu') + ' phải dưới 500MB',
+      };
+    } else if (type === 'video' && file.size > 1073741274) {
+      return { name: file.name, error: true, text: 'Kích thước video phải dưới 1GB' };
+    }
+    let data = new FormData();
+    let fileName = dayjs(new Date()).format('YYYYMMDDhhmmss') + '-' + file.name;
+    data.append('name', file.name);
+    data.append('filename', fileName);
+    data.append('file', file);
+    data.append('type', type);
+    data.append('size', file.size);
+    data.append('user', user);
+    data.append('convert', convert);
+    // Thêm quality nếu convert được bật và quality được cung cấp
+    if (convert && quality !== null && quality !== undefined) {
+      data.append('quality', quality);
+    }
+    return { form: data, type: type, size: file.size, file: file, name: file.name, filename: fileName };
+  };
+
+  const change = function (obj1, obj2, list) {
+    var change = false;
+    if (list) {
+      list.map((v) => {
+        if (obj1[v] !== obj2[v]) change = true;
+      });
+    } else {
+      for (var k in obj1) {
+        if (obj1[k] !== obj2[k]) change = true;
+      }
+    }
+    return change;
+  };
+
+  const resetNull = function (obj) {
+    for (const [key, value] of Object.entries(obj)) {
+      if (typeof value === 'string') {
+        let val = value.trim();
+        if (val === '' || val === '') val = null;
+        obj[key] = val;
+      }
+    }
+    return obj;
+  };
+
+  const copyToClipboard = function (text) {
+    snackbar('Copied to clipboard');
+    if (window.clipboardData && window.clipboardData.setData) {
+      // IE specific code path to prevent textarea being shown while dialog is visible.
+      return clipboardData.setData('Text', text);
+    } else if (document.queryCommandSupported && document.queryCommandSupported('copy')) {
+      var textarea = document.createElement('textarea');
+      textarea.textContent = text;
+      textarea.style.position = 'fixed'; // Prevent scrolling to bottom of page in MS Edge.
+      document.body.appendChild(textarea);
+      textarea.select();
+      try {
+        return document.execCommand('copy'); // Security exception may be thrown by some browsers.
+      } catch (ex) {
+        console.warn('Copy to clipboard failed.', ex);
+        return false;
+      } finally {
+        document.body.removeChild(textarea);
+      }
+    }
+  };
+
+  const nonAccent = function (str) {
+    if ($empty(str)) return null;
+    str = str.replaceAll('/', '-').replaceAll('%', '-').replaceAll('?', '-');
+    str = str.toLowerCase();
+    str = str.replace(/à|á|ạ|ả|ã|â|ầ|ấ|ậ|ẩ|ẫ|ă|ằ|ắ|ặ|ẳ|ẵ/g, 'a');
+    str = str.replace(/è|é|ẹ|ẻ|ẽ|ê|ề|ế|ệ|ể|ễ/g, 'e');
+    str = str.replace(/ì|í|ị|ỉ|ĩ/g, 'i');
+    str = str.replace(/ò|ó|ọ|ỏ|õ|ô|ồ|ố|ộ|ổ|ỗ|ơ|ờ|ớ|ợ|ở|ỡ/g, 'o');
+    str = str.replace(/ù|ú|ụ|ủ|ũ|ư|ừ|ứ|ự|ử|ữ/g, 'u');
+    str = str.replace(/ỳ|ý|ỵ|ỷ|ỹ/g, 'y');
+    str = str.replace(/đ/g, 'd');
+    // Some system encode vietnamese combining accent as individual utf-8 characters
+    str = str.replace(/\u0300|\u0301|\u0303|\u0309|\u0323/g, ''); // Huyền sắc hỏi ngã nặng
+    str = str.replace(/\u02C6|\u0306|\u031B/g, ''); // Â, Ê, Ă, Ơ, Ư
+    str = str
+      .split(' ')
+      .filter((s) => s)
+      .join('-');
+    return str;
+  };
+
+  const linkID = function (link) {
+    link = link ? link : route.params.slug;
+    if ($empty(link)) return;
+    let idx = link.lastIndexOf('-');
+    let id = idx > -1 && idx < link.length - 1 ? link.substring(idx + 1, link.length) : undefined;
+    return id;
+  };
+
+  const exportpdf = function (docid, name, size, orientation = 'portrait') {
+    var element = document.getElementById(docid);
+    let elms = element.querySelectorAll("[id='ignore']");
+    for (var i = 0; i < elms.length; i++) {
+      elms[i].style.setProperty('display', 'none', 'important');
+    }
+    // Xóa cache ảnh để lần export sau không bị lỗi
+    element.querySelectorAll('img').forEach((img) => {
+      img.src = `${img.src}`;
+    });
+    var opt = {
+      margin: 0.4,
+      filename: `${name || 'file'}-${dayjs().format('YYYYMMDDHHmmss')}.pdf`,
+      image: { type: 'jpeg', quality: 1 },
+      html2canvas: { scale: 3, useCORS: true },
+      jsPDF: { unit: 'in', format: size || 'a4', orientation },
+
+      pagebreak: {
+        mode: ['avoid-all', 'css', 'legacy'],
+        before: '.page-break-before',
+        after: '.page-break-after',
+        avoid: '.avoid-page-break',
+      },
+    };
+    setTimeout(() => html2pdf().set(opt).from(element).save(), 300);
+    setTimeout(() => {
+      for (var i = 0; i < elms.length; i++) {
+        elms[i].style.removeProperty('display');
+      }
+    }, 1000);
+    return opt.filename;
+  };
+
+  const exportImage = function (docid, name) {
+    var element = document.getElementById(docid);
+    let elms = element.querySelectorAll("[id='ignore']");
+    for (var i = 0; i < elms.length; i++) {
+      elms[i].style.display = 'none';
+    }
+    let filename = `${name}-${dayjs().format('YYYYMMDDHHmmss')}.png`;
+    html2canvas(element).then((canvas) => {
+      const link = document.createElement('a');
+      link.href = canvas.toDataURL('image/png');
+      link.download = filename;
+      link.click();
+      link.remove();
+    });
+    setTimeout(() => {
+      for (var i = 0; i < elms.length; i++) {
+        elms[i].style.display = 'block';
+      }
+    }, 1000);
+    return filename;
+  };
+
+  const download = async function (url, fileName) {
+    let name = dayjs(new Date()).format('YYYYMMDDhhmmss') + '-' + fileName;
+    const response = await fetch(url, { method: 'GET' });
+    const blob = await response.blob();
+    const urlDownload = window.URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = urlDownload;
+    link.setAttribute('download', name);
+    link.click();
+    link.remove();
+  };
+
+  const vnmoney = function (amount) {
+    var readGroup = function (group) {
+      let readDigit = [' Không', ' Một', ' Hai', ' Ba', ' Bốn', ' Năm', ' Sáu', ' Bảy', ' Tám', ' Chín'];
+      var temp = '';
+      if (group == '000') return '';
+      temp = readDigit[parseInt(group.substring(0, 1))] + ' Trăm';
+      if (group.substring(1, 2) == '0')
+        if (group.substring(2, 3) == '0') return temp;
+        else {
+          temp += ' Lẻ' + readDigit[parseInt(group.substring(2, 3))];
+          return temp;
+        }
+      else temp += readDigit[parseInt(group.substring(1, 2))] + ' Mươi';
+      if (group.substring(2, 3) == '5') temp += ' Lăm';
+      else if (group.substring(2, 3) != '0') temp += readDigit[parseInt(group.substring(2, 3))];
+      return temp;
+    };
+    var readMoney = function (num) {
+      if (num == null || num == '') return '';
+      let temp = '';
+      while (num.length < 18) {
+        num = '0' + num;
+      }
+      let g1 = num.substring(0, 3);
+      let g2 = num.substring(3, 6);
+      let g3 = num.substring(6, 9);
+      let g4 = num.substring(9, 12);
+      let g5 = num.substring(12, 15);
+      let g6 = num.substring(15, 18);
+      if (g1 != '000') {
+        temp = readGroup(g1);
+        temp += ' Triệu';
+      }
+      if (g2 != '000') {
+        temp += readGroup(g2);
+        temp += ' Nghìn';
+      }
+      if (g3 != '000') {
+        temp += readGroup(g3);
+        temp += ' Tỷ';
+      } else if ('' != temp) {
+        temp += ' Tỷ';
+      }
+      if (g4 != '000') {
+        temp += readGroup(g4);
+        temp += ' Triệu';
+      }
+      if (g5 != '000') {
+        temp += readGroup(g5);
+        temp += ' Nghìn';
+      }
+      temp = temp + readGroup(g6);
+      temp = temp.replaceAll('Một Mươi', 'Mười');
+      temp = temp.trim();
+      temp = temp.replaceAll('Không Trăm', '');
+      temp = temp.trim();
+      temp = temp.replaceAll('Mười Không', 'Mười');
+      temp = temp.trim();
+      temp = temp.replaceAll('Mươi Không', 'Mươi');
+      temp = temp.trim();
+      if (temp.indexOf('Lẻ') == 0) temp = temp.substring(2);
+      temp = temp.trim();
+      temp = temp.replaceAll('Mươi Một', 'Mươi Mốt');
+      temp = temp.trim();
+      let result = temp.substring(0, 1).toUpperCase() + temp.substring(1).toLowerCase();
+      return (result == '' ? 'Không' : result) + ' đồng chẵn';
+    };
+    return readMoney(amount.toString());
+  };
+
+  const lang = function (code) {
+    let field = store.common.find((v) => v.code === code);
+    return field ? field[store.lang] : '';
+  };
+
+  const createMeta = function (metainfo) {
+    return {
+      title: metainfo.title,
+      link: [
+        {
+          hid: 'canonical',
+          rel: 'canonical',
+          href: `https://bigdatatech.vn${route.path}`,
+        },
+      ],
+      meta: [
+        {
+          hid: 'description',
+          name: 'description',
+          content: metainfo.description || '',
+        },
+        {
+          hid: 'og:title',
+          property: 'og:title',
+          content: metainfo.title,
+        },
+        {
+          hid: 'og:description',
+          property: 'og:description',
+          content: metainfo.description || '',
+        },
+        {
+          hid: 'og:type',
+          property: 'og:type',
+          content: metainfo.type || '',
+        },
+        {
+          hid: 'og:image',
+          property: 'og:image',
+          content: metainfo.image || '',
+        },
+        {
+          hid: 'og:url',
+          property: 'og:url',
+          content: `https://bigdatatech.vn${route.path}`,
+        },
+        {
+          property: 'og:locale',
+          content: 'vi_VN',
+        },
+        {
+          hid: 'fb:app_id',
+          property: 'fb:app_id',
+          content: metainfo.app_id || '549555567061256',
+        },
+        {
+          hid: 'keywords',
+          name: 'keywords',
+          content: metainfo.keywords || '',
+        },
+      ],
+    };
+  };
+
+  const formatFileSize = (bytes) => {
+    if (bytes === 0) return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i];
+  };
+
+  const numberToVietnamese = (input) => {
+    if (input === null || input === undefined || input === '') return '';
+
+    var number = Number(input);
+    if (isNaN(number) || number < 0 || number % 1 !== 0) return '';
+
+    if (number === 0) return 'Không';
+
+    var units = ['không', 'một', 'hai', 'ba', 'bốn', 'năm', 'sáu', 'bảy', 'tám', 'chín'];
+
+    var scales = ['', 'nghìn', 'triệu', 'tỷ', 'nghìn tỷ', 'triệu tỷ'];
+
+    function readThreeDigits(num, isFull) {
+      var result = '';
+      var hundred = Math.floor(num / 100);
+      var ten = Math.floor((num % 100) / 10);
+      var unit = num % 10;
+
+      if (hundred > 0 || isFull) {
+        result += units[hundred] + ' trăm';
+        if (ten === 0 && unit > 0) result += ' lẻ';
+      }
+
+      if (ten > 1) {
+        result += ' ' + units[ten] + ' mươi';
+        if (unit === 1) result += ' mốt';
+        else if (unit === 5) result += ' lăm';
+        else if (unit > 0) result += ' ' + units[unit];
+      } else if (ten === 1) {
+        result += ' mười';
+        if (unit === 5) result += ' lăm';
+        else if (unit > 0) result += ' ' + units[unit];
+      } else if (ten === 0 && unit > 0 && hundred === 0 && !isFull) {
+        result += units[unit];
+      }
+
+      return result.trim();
+    }
+
+    var result = '';
+    var scaleIndex = 0;
+
+    while (number > 0) {
+      var chunk = number % 1000;
+
+      if (chunk > 0) {
+        var isFull = result !== '';
+        result =
+          readThreeDigits(chunk, isFull) +
+          (scales[scaleIndex] ? ' ' + scales[scaleIndex] : '') +
+          (result ? ' ' + result : '');
+      }
+
+      number = Math.floor(number / 1000);
+      scaleIndex++;
+    }
+
+    result = result.trim();
+    return result.charAt(0).toUpperCase() + result.slice(1);
+  };
+
+  const formatDateVN = (input, { withTime = false, withSeconds = false } = {}) => {
+    if (!input) return '';
+
+    const date = new Date(input);
+    if (isNaN(date.getTime())) return '';
+
+    const pad = (n) => String(n).padStart(2, '0');
+
+    const day = pad(date.getDate());
+    const month = pad(date.getMonth() + 1);
+    const year = date.getFullYear();
+
+    let result = `${day}/${month}/${year}`;
+
+    if (withTime) {
+      const hours = pad(date.getHours());
+      const minutes = pad(date.getMinutes());
+      result += ` ${hours}:${minutes}`;
+
+      if (withSeconds) {
+        const seconds = pad(date.getSeconds());
+        result += `:${seconds}`;
+      }
+    }
+
+    return result;
+  };
+
+  const numberToVietnameseCurrency = (amount) => {
+    if (amount === null || amount === undefined || amount === '') return '';
+
+    amount = Number(amount);
+    if (isNaN(amount)) return '';
+
+    const units = ['', 'một', 'hai', 'ba', 'bốn', 'năm', 'sáu', 'bảy', 'tám', 'chín'];
+    const scales = ['', 'nghìn', 'triệu', 'tỷ'];
+
+    function readThreeDigits(num) {
+      let result = '';
+      const hundred = Math.floor(num / 100);
+      const ten = Math.floor((num % 100) / 10);
+      const unit = num % 10;
+
+      if (hundred > 0) {
+        result += units[hundred] + ' trăm';
+        if (ten === 0 && unit > 0) result += ' lẻ';
+      }
+
+      if (ten > 1) {
+        result += ' ' + units[ten] + ' mươi';
+        if (unit === 1) result += ' mốt';
+        else if (unit === 5) result += ' lăm';
+        else if (unit > 0) result += ' ' + units[unit];
+      } else if (ten === 1) {
+        result += ' mười';
+        if (unit === 5) result += ' lăm';
+        else if (unit > 0) result += ' ' + units[unit];
+      } else if (ten === 0 && unit > 0 && hundred === 0) {
+        result += units[unit];
+      }
+
+      return result.trim();
+    }
+
+    let text = '';
+    let scaleIndex = 0;
+
+    while (amount > 0) {
+      const chunk = amount % 1000;
+      if (chunk > 0) {
+        text = `${readThreeDigits(chunk)} ${scales[scaleIndex]} ${text}`;
+      }
+      amount = Math.floor(amount / 1000);
+      scaleIndex++;
+    }
+
+    text = text.trim();
+    text = text.charAt(0).toUpperCase() + text.slice(1);
+
+    return text;
+  };
+
+  const getFirstAndLastName = (fullName, showDots) => {
+    if (!fullName) return '';
+
+    var parts = fullName.trim().replace(/\s+/g, ' ').split(' ');
+
+    if (parts.length === 1) return parts[0];
+
+    var first = parts[0];
+    var last = parts[parts.length - 1];
+
+    return showDots ? first + '...' + last : first + ' ' + last;
+  };
+
+  const paymentQR = (content = '', bankCode = 'MB', amount = 0) => {
+    const listBanks = [
+      {
+        bank: {
+          code: 'MB',
+          name: 'MB Bank',
+        },
+        account: {
+          number: '146768686868',
+          name: 'CONG TY CO PHAN BAT DONG SAN UTOPIA',
+        },
+        content: 'Thanh toán hóa đơn',
+      },
+    ];
+
+    let bankInfo = listBanks.find(
+      (item) => item.bank.code && bankCode && item.bank.code.toLowerCase() === bankCode.toLowerCase(),
+    );
+
+    if (!bankInfo) return;
+
+    const params = new URLSearchParams({
+      addInfo: content || bankInfo.content,
+      accountName: bankInfo.account.name || '',
+      amount: amount || 0,
+    });
+    return `https://img.vietqr.io/image/${bankInfo.bank.code}-${bankInfo.account.number}-print.png?${params.toString()}`;
+  };
+
+  return {
+    provide: {
+      dialog,
+      snackbar,
+      getLink,
+      errPhone,
+      errEmail,
+      errPhoneEmail,
+      dummy,
+      upload,
+      change,
+      resetNull,
+      copyToClipboard,
+      nonAccent,
+      linkID,
+      exportpdf,
+      exportImage,
+      vnmoney,
+      createMeta,
+      dayjs,
+      download,
+      lang,
+      formatFileSize,
+      numberToVietnamese,
+      numberToVietnameseCurrency,
+      formatDateVN,
+      getFirstAndLastName,
+      paymentQR,
+    },
+  };
+});

app/plugins/03-api-loader.js

@@ -0,0 +1,8 @@
+export default defineNuxtPlugin(async (nuxtApp) => {
+  const { $getapi, $readyapi } = useNuxtApp()
+  let connlist = $readyapi(['moneyunit', 'datatype', 'filterchoice', 'colorchoice', 'textalign', 'placement', 'colorscheme', 
+    'filtertype', 'sorttype', 'tablesetting', 'settingchoice', 'sharechoice', 'menuchoice', 'settingtype', 'settingclass', 
+    'common', 'sex', 'legaltype', 'cart'])
+  let filter = connlist.filter(v=>!v.ready)
+  if(filter.length>0) await $getapi(filter)
+})

app/plugins/04-components.js

@@ -0,0 +1,135 @@
+import { defineNuxtPlugin } from "#app";
+import Notebox from "~/components/common/Notebox.vue";
+import ProductCountbox from "~/components/common/ProductCountbox.vue";
+import SvgIcon from "~/components/SvgIcon.vue";
+import DataView from "~/components/datatable/DataView.vue";
+import PivotDataView from "~/components/datatable/PivotDataView.vue";
+import PickDay from "~/components/datepicker/PickDay.vue";
+import Datepicker from "~/components/datepicker/Datepicker.vue";
+import ImageGallery from "~/components/media/ImageGallery.vue";
+import FileGallery from "~/components/media/FileGallery.vue";
+import FileUpload from "~/components/media/FileUpload.vue";
+import FileShow from "~/components/media/FileShow.vue";
+import ChipImage from "~/components/media/ChipImage.vue";
+import Avatarbox from "~/components/common/Avatarbox.vue";
+import Email from "~/components/marketing/email/Email.vue";
+import ViewList from "~/components/common/ViewList.vue";
+import InternalEntry from "~/components/modal/InternalEntry.vue"
+
+import Configuration from "~/components/maintab/Configuration.vue";
+import DebtView from "~/components/accounting/DebtView.vue";
+import ReportDaily from "~/components/report/Daily.vue";
+import ReportFormTo from "~/components/report/FromTo.vue";
+import ReportMonthly from "~/components/report/Monthly.vue";
+
+//format
+import FormatNumber from "~/components/datatable/format/FormatNumber.vue";
+import DataTable from "~/components/datatable/DataTable.vue";
+import DataModel from "~/components/datatable/DataModel.vue";
+import InputNumber from "~/components/common/InputNumber.vue";
+import ColorText from "~/components/datatable/format/ColorText.vue";
+
+//menu
+import MenuAction from "~/components/menu/MenuAction.vue";
+import MenuApp from "~/components/menu/MenuApp.vue";
+import MenuCust from "~/components/menu/MenuCust.vue";
+import MenuPhone from "~/components/menu/MenuPhone.vue";
+import MenuParam from "~/components/menu/MenuParam.vue";
+import MenuAdd from "~/components/menu/MenuAdd.vue";
+import MenuCollab from "~/components/menu/MenuCollab.vue";
+import MenuNote from "~/components/menu/MenuNote.vue";
+import MenuPayment from "~/components/menu/MenuPayment.vue";
+import ScrollBox from "~/components/datatable/ScrollBox.vue";
+import Viewer from "~/components/viewer/Viewer.vue";
+import Product from "~/components/product/Product.vue";
+import Reservation from "~/components/modal/Reservation.vue";
+import UserMainTab from "~/components/modal/UserMainTab.vue";
+import TransactionFiles from "~/components/transaction/TransactionFiles.vue";
+import PaymentSchedule from "~/components/application/PaymentSchedule.vue";
+import TransactionView from "~/components/transaction/TransactionView.vue";
+import ContractPaymentUpload from "~/components/application/ContractPaymentUpload.vue";
+import CountWithAdd from "~/components/common/CountWithAdd.vue";
+import CalculationView from "~/components/application/CalculationView.vue";
+import InternalAccount from "~/components/accounting/InternalAccount.vue";
+import MenuAccount from "~/components/menu/MenuAccount.vue";
+import PhaseAdvance from "~/components/application/PhaseAdvance.vue";
+import ImageLayout from '@/components/media/ImageLayout.vue';
+import ProjectDocuments from '~/components/product/ProjectDocuments.vue';
+import ProductEdit from '~/components/product/ProductEdit.vue';
+
+import Cart from '~/components/product/Cart.vue'
+import CountdownTimer from '~/components/common/CountdownTimer.vue'
+import CustomerInfo2 from '~/components/customer/CustomerInfo2.vue'
+import MenuFile from '~/components/menu/MenuFile.vue'
+import DebtProduct from '~/components/accounting/DebtProduct.vue'
+import DebtCustomer from '~/components/accounting/DebtCustomer.vue'
+import Due from '~/components/debt/Due.vue';
+import Overdue from '@/components/debt/Overdue.vue';
+
+const components = {
+  DebtView,
+  PivotDataView,
+  PaymentSchedule,
+  CustomerInfo2,
+  CountdownTimer,
+  PhaseAdvance,
+  InternalEntry,
+  ViewList,
+  ColorText,
+  CalculationView,
+  CountWithAdd,
+  ContractPaymentUpload,
+  TransactionView,
+  TransactionFiles,
+  Reservation,
+  Notebox,
+  ProductCountbox,
+  MenuAction,
+  Email,
+  SvgIcon,
+  Datepicker,
+  PickDay,
+  ImageGallery,
+  FileGallery,
+  FileUpload,
+  FileShow,
+  DataView,
+  ChipImage,
+  Avatarbox,
+  DataTable,
+  Configuration,
+  InputNumber,
+  MenuPhone,
+  MenuParam,
+  ScrollBox,
+  MenuPayment,
+  ReportDaily,
+  ReportFormTo,
+  ReportMonthly,
+  DataModel,
+  FormatNumber,
+  MenuApp,
+  MenuCust,
+  MenuAdd,
+  MenuCollab,
+  MenuNote,
+  Viewer,
+  Product,
+  UserMainTab,
+  InternalAccount,
+  MenuAccount,
+  ImageLayout,
+  ProjectDocuments,
+  Cart,
+  MenuFile,
+  DebtProduct,
+  DebtCustomer,
+  Due,
+  Overdue,
+};
+
+export default defineNuxtPlugin((nuxtApp) => {
+  Object.entries(components).forEach(([name, component]) => {
+    nuxtApp.vueApp.component(name, component);
+  });
+});

app/plugins/highcharts.client.js

@@ -0,0 +1,22 @@
+import Highcharts from "highcharts";
+import HighchartsVue from "highcharts-vue";
+
+export default defineNuxtPlugin(async (nuxtApp) => {
+  if (process.client) {
+    const ExportingModule = await import("highcharts/modules/exporting");
+    const ExportDataModule = await import("highcharts/modules/export-data");
+
+    const applyModule = (mod) => {
+      if (typeof mod === "function") {
+        mod(Highcharts);
+      } else if (mod?.default && typeof mod.default === "function") {
+        mod.default(Highcharts);
+      }
+    };
+
+    applyModule(ExportingModule);
+    applyModule(ExportDataModule);
+  }
+
+  nuxtApp.vueApp.use(HighchartsVue);
+});