@ngockhoale/ukit 1.1.6

package/templates/.claude/skills/frontend-vue/composables/useRequest.js

@@ -0,0 +1,221 @@
+/**
+ * @file useRequest.js
+ * @description HTTP request composable — wrapper duy nhất cho mọi API call trong hệ thống.
+ * Tự động GZIP compress/decompress, quản lý loading state global (state.loading).
+ *
+ * ⚠️  QUAN TRỌNG: Không được dùng fetch() hay axios() trực tiếp. Luôn dùng 3 hàm chính:
+ *   - request()     → gọi API thông thường (JSON)
+ *   - requestForm() → upload file (multipart/form-data)
+ *   - request_origin() → gọi endpoint custom (không qua /api/ prefix)
+ *
+ * @requires pako - Thư viện GZIP compression
+ * @requires axios - HTTP client
+ */
+import axios from "axios";
+import pako from "pako";
+
+
+/**
+ * Giải nén dữ liệu GZIP từ base64 string → JSON string
+ * @param {string} compressedData - Dữ liệu đã nén dạng base64
+ * @returns {string} Chuỗi JSON đã giải nén
+ */
+export const decompressData = (compressedData) => {
+  // Convert the compressed data (base64 string) to a Uint8Array
+  const compressedUint8Array = Uint8Array.from(atob(compressedData), c => c.charCodeAt(0));
+  // Decompress the data using pako
+  const decompressedUint8Array = pako.ungzip(compressedUint8Array);
+  // Convert the decompressed data to a string
+  const decompressedString = new TextDecoder().decode(decompressedUint8Array);
+  // Now you can use decompressedString as needed
+  return decompressedString;
+};
+
+/**
+ * Nén dữ liệu thành GZIP base64 string
+ * @param {string} data - Chuỗi cần nén
+ * @returns {string} Dữ liệu đã nén dạng base64
+ */
+export const compressData = (data) => {
+  // Convert the string data to a Uint8Array
+  const inputUint8Array = new TextEncoder().encode(data);
+  // Compress the data using pako
+  const compressedUint8Array = pako.gzip(inputUint8Array);
+  // Convert the compressed data to a base64 string
+  const compressedData = btoa(String.fromCharCode(...new Uint8Array(compressedUint8Array.buffer)));
+  // Now you can use compressedData as needed
+  return compressedData;
+};
+/**
+ * Gọi API tới endpoint custom (baseURL gốc, KHÔNG qua /api/ prefix).
+ * Dùng khi cần gọi endpoint đặc biệt nằm ngoài cấu trúc /api/ chuẩn.
+ * Tự động decompress GZIP nếu response là string.
+ * @param {string} url - Đường dẫn endpoint (vd: "custom/report")
+ * @param {Object} data - Request body hoặc query params
+ * @param {"post"|"get"} [method="post"] - HTTP method
+ * @returns {Promise<Object|Array>} Response data đã parse, trả [] nếu lỗi
+ * @example
+ * const res = await request_origin("export/excel", { id: 123 })
+ */
+export const request_origin = async (url, data = {}, method = "post") => {
+  const ax = axios.create({
+    baseURL: baseurl() + "/",
+  });
+  if (method === "get") {
+    data = { params: data };
+  }
+  try {
+    state.loading_count += 1;
+    if (state.loading_count === 1) {
+      state.loading = true;
+    }
+    let response = await ax[method.toLowerCase()](url, data);
+    state.loading_count -= 1;
+    if (state.loading_count === 0) {
+      state.loading = false;
+    }
+    if(typeof response?.data === 'object'){
+      return response?.data;
+    } else {
+      const gzipBuffer = decompressData(response?.data);
+      return JSON.parse(gzipBuffer);
+    }
+  } catch {
+    return [];
+  }
+};
+/**
+ * Hàm gọi API chính — dùng cho mọi request JSON thông thường.
+ * BaseURL: baseurl() + "api/" → tự động nối prefix /api/.
+ * Tự động GZIP compress request, decompress response.
+ * Quản lý state.loading toàn cục (trừ khi with_loading=false).
+ * @param {string} url - API endpoint (vd: "/select", "/save", "/delete")
+ * @param {Object} [data={}] - Request body (POST) hoặc query params (GET)
+ * @param {"post"|"get"} [method="post"] - HTTP method
+ * @param {boolean} [with_loading=true] - Có hiển thị loading spinner không
+ * @returns {Promise<Object|Array>} Response data đã parse, trả [] nếu lỗi
+ * @example
+ * // GET danh sách
+ * const list = await request("/select", { schema: get_schema(), table: "branch" }, "get")
+ * // POST lưu dữ liệu
+ * const res = await request("/save", { schema: get_schema(), table: "branch", ...workingObj })
+ */
+export const request = async (url, data = {}, method = "post", with_loading=true) => {
+  const ax = axios.create({
+    baseURL: baseurl() + "api/",
+  });
+  const headers = { 'Content-Type': 'application/json', 'is_compress': 'true'};
+  if (method === "get") {
+    data = { params: data, headers: headers };
+  }
+  try {
+    if(with_loading){
+      state.loading_count += 1;
+      if (state.loading_count === 1) {
+        state.loading = true;
+      }
+    }
+    let response = null;
+    if(method === 'post'){
+      response = await ax[method.toLowerCase()](url, data, {headers: headers});
+    } else {
+      response = await ax[method.toLowerCase()](url,data );
+    }
+    let to_return = [];
+    if(typeof response?.data === 'object'){
+      to_return = response?.data;
+    } else {
+      const gzipBuffer = decompressData(response?.data);
+      to_return = JSON.parse(gzipBuffer);
+    }
+    if(with_loading){
+      state.loading_count -= 1;
+      if (state.loading_count === 0) {
+        state.loading = false;
+      }
+    }
+    return to_return;
+  } catch {
+    return [];
+  }
+};
+
+/**
+ * Gọi API upload file — dùng multipart/form-data.
+ * Dùng khi cần upload file (ảnh, excel, pdf...).
+ * @param {string} url - API endpoint (vd: "/upload")
+ * @param {FormData|Object} [data={}] - FormData chứa file và metadata
+ * @param {"post"} [method="post"] - Luôn là POST
+ * @param {boolean} [with_loading=true] - Có hiển thị loading spinner không
+ * @returns {Promise<Object|Array>} Response data đã parse, trả [] nếu lỗi
+ * @example
+ * const formData = new FormData()
+ * formData.append("file", file)
+ * formData.append("schema", get_schema())
+ * const res = await requestForm("/upload", formData)
+ */
+export const requestForm = async (url, data = {}, method = "post", with_loading=true) => {
+  const ax = axios.create({
+    baseURL: baseurl() + "api/",
+  });
+  const headers = { 'Content-Type': 'multipart/form-data' };
+  try {
+    if(with_loading){
+      state.loading_count += 1;
+      if (state.loading_count === 1) {
+        state.loading = true;
+      }
+    }
+    let response = await ax['post'](url, data, { headers: headers });
+    let to_return = [];
+    if(typeof response?.data === 'object'){
+      to_return = response?.data;
+    } else {
+      const gzipBuffer = decompressData(response?.data);
+      to_return = JSON.parse(gzipBuffer);
+    }
+    if(with_loading){
+      state.loading_count -= 1;
+      if (state.loading_count === 0) {
+        state.loading = false;
+      }
+    }
+    return to_return;
+  } catch {
+    return [];
+  }
+};
+
+/**
+ * Gọi API đăng nhập — endpoint riêng: baseurl() + "user/login"
+ * @param {Object} [data={}] - { username, password }
+ * @param {"post"} [method="post"] - HTTP method
+ * @returns {Promise<Object|Array>} User data hoặc [] nếu lỗi
+ */
+export const requestLogin = async (data = {}, method = "post") => {
+  const ax = axios.create({
+    baseURL: baseurl() + "user/login",
+  });
+  try {
+    let response = await ax[method.toLowerCase()]("", data);
+    return response?.data;
+  } catch {
+    return [];
+  }
+};
+/**
+ * Gửi email qua API — endpoint: baseurl() + "send_email/send_email"
+ * @param {Object} [data={}] - Nội dung email { to, subject, body, ... }
+ * @returns {Promise<Object|Array>} Kết quả gửi mail hoặc [] nếu lỗi
+ */
+export const requestSendmail = async (data = {}) => {
+  const ax = axios.create({
+    baseURL: baseurl() + "send_email/send_email",
+  });
+  try {
+    let response = await ax['post']("", data);
+    return response?.data;
+  } catch {
+    return [];
+  }
+};

package/templates/.claude/skills/frontend-vue/composables/useSession.js

@@ -0,0 +1,179 @@
+/**
+ * @file useSession.js
+ * @description Quản lý session user qua localStorage với cơ chế hết hạn + hash bảo vệ.
+ * Session lưu dưới key "unic_service", mặc định hết hạn sau 2 giờ.
+ *
+ * Exported functions:
+ *   - setSession(key, value)    → Lưu giá trị vào session
+ *   - getSession(key)           → Đọc giá trị từ session (kiểm tra hash + expiry)
+ *   - clearSession()            → Xóa toàn bộ session
+ *   - refreshSession()          → Gia hạn thời gian session
+ *   - encrypt_string(str)       → Hash chuỗi (dùng nội bộ cho integrity check)
+ */
+const SESSION_KEY = 'unic_service'
+const DEFAULT_EXPIRATION = 2 * 60 * 60 * 1000 // 2 hours in milliseconds
+const RANDOM_STRING = "3e23e8160039594a33894f6564e1b1348bbd7a0088d42c4acb73eeaed59c009d";
+
+/** @private Đọc session từ localStorage, kiểm tra expiry */
+const getStoredSession = () => {
+  if (process.client) {
+    try {
+      const storedSession = localStorage.getItem(SESSION_KEY)
+      if (storedSession) {
+        const { data, expiry } = JSON.parse(storedSession)
+        if (expiry > Date.now()) {
+          return data
+        }
+      }
+    } catch (error) {
+      console.error('Failed to get session from localStorage:', error)
+    }
+  }
+  return {}
+}
+
+/**
+ * Hash chuỗi — dùng nội bộ để tạo integrity hash cho session expiry.
+ * KHÔNG phải mã hóa bảo mật, chỉ dùng để detect tampering.
+ * @param {string} string - Chuỗi cần hash
+ * @returns {string} Chuỗi hash 64 ký tự lowercase
+ */
+export const encrypt_string = (string) => {
+  const hash = '';
+  const char = string.split('');
+  const len = char.length;
+  let a = 0x67452301;
+  let b = 0xefcdab89;
+  let c = 0x98badcfe;
+  let d = 0x10325476;
+
+  for (let i = 0; i < len; i += 16) {
+    const w = new Array(16);
+    for (let t = 0; t < 16; t++) {
+      w[t] = char[i + t] || 0;
+    }
+
+    let a1 = a;
+    let b1 = b;
+    let c1 = c;
+    let d1 = d;
+
+    for (let t = 0; t < 64; t++) {
+      const f = (t < 16) ? (b1 & c1 | ~b1 & d1) : ((t < 32) ? (b1 ^ c1 ^ d1) : (b1 & c1 | b1 & d1 | c1 & d1));
+      const g = (t < 16) ? t : ((t < 32) ? (5 * t + 1) : ((t < 48) ? (3 * t + 5) : (7 * t)));
+      const f4 = (a1 + f + w[g] + 0x5a827999).toString(16);
+      const a2 = d1;
+      const b2 = a1;
+      const c2 = b1 ^ f4;
+      const d2 = c1;
+
+      a1 = a2;
+      b1 = b2;
+      c1 = c2;
+      d1 = d2;
+    }
+
+    a = (a + a1).toString(16);
+    b = (b + b1).toString(16);
+    c = (c + c1).toString(16);
+    d = (d + d1).toString(16);
+  }
+  return (a + b + RANDOM_STRING + c + d).toLowerCase().substring(0, 64);
+}
+
+const session = ref(getStoredSession())
+
+/**
+ * Lưu giá trị vào session (localStorage) với expiration + hash
+ * @param {string} key - Tên key (vd: "username", "usergroup", "language")
+ * @param {*} value - Giá trị cần lưu
+ * @param {number} [expirationMs=7200000] - Thời gian hết hạn (ms), mặc định 2 giờ
+ * @example setSession("username", "admin@duraone.com")
+ */
+export const setSession = (key, value, expirationMs = DEFAULT_EXPIRATION) => {
+  session.value[key] = value
+  if (process.client) {
+    
+    try {
+      const expire_str = Date.now() + expirationMs;
+      const hash = encrypt_string(expire_str.toString());  
+      const sessionData = {
+        data: session.value,
+        expiry: expire_str,
+        hash: hash
+      }
+      localStorage.setItem(SESSION_KEY, JSON.stringify(sessionData))
+    } catch (error) {
+      console.error('Failed to save session to localStorage:', error)
+    }
+  }
+}
+
+/**
+ * Đọc giá trị từ session. Tự kiểm tra hash integrity + expiry.
+ * Nếu hash bị thay đổi hoặc hết hạn → tự xóa session.
+ * @param {string} key - Tên key cần đọc (vd: "username", "usergroup")
+ * @returns {*|undefined} Giá trị hoặc undefined nếu không tìm thấy / hết hạn
+ * @example const username = getSession("username")
+ */
+export const getSession = (key) => {
+  if (process.client) {
+    const storedSession = localStorage.getItem(SESSION_KEY)
+    if (storedSession) {
+      const { data, expiry, hash } = JSON.parse(storedSession)
+      // check hash
+      const check_hash = encrypt_string(expiry.toString());
+      if (hash !== check_hash) {
+        clearSession();
+        return undefined;
+      } else {
+        if (expiry > Date.now()) {
+          session.value = data
+          return session.value[key]
+        } else {
+          clearSession()
+        }
+      }
+    }
+  }
+  return undefined
+}
+
+/**
+ * Xóa toàn bộ session (logout)
+ */
+export const clearSession = () => {
+  session.value = {}
+  if (process.client) {
+    try {
+      localStorage.removeItem(SESSION_KEY)
+    } catch (error) {
+      console.error('Failed to clear session from localStorage:', error)
+    }
+  }
+}
+
+/**
+ * Gia hạn session — giữ nguyên data, cập nhật expiry mới
+ * @param {number} [expirationMs=7200000] - Thời gian gia hạn (ms), mặc định 2 giờ
+ */
+export const refreshSession = (expirationMs = DEFAULT_EXPIRATION) => {
+  if (process.client) {
+    try {
+      const storedSession = localStorage.getItem(SESSION_KEY)
+      if (storedSession) {
+        const { data } = JSON.parse(storedSession)
+        const expire_str = Date.now() + expirationMs;
+        const hash = encrypt_string(expire_str.toString());  
+        const sessionData = {
+          data,
+          expiry: expire_str,
+          hash: hash
+        }
+        localStorage.setItem(SESSION_KEY, JSON.stringify(sessionData))
+      }
+    } catch (error) {
+      console.error('Failed to refresh session:', error)
+    }
+  }
+}

package/templates/.claude/skills/frontend-vue/composables/useTranslation.js

@@ -0,0 +1,54 @@
+/**
+ * @file useTranslation.js
+ * @description Hệ thống đa ngôn ngữ (i18n). Load bản dịch từ DB, dịch text qua hàm t().
+ *
+ * Cách dùng:
+ *   1. Gọi translate() khi app init → load toàn bộ bản dịch vào state.objToTranslate
+ *   2. Dùng t("text gốc") ở bất kỳ đâu → trả về bản dịch hoặc text gốc nếu chưa có
+ *
+ * @requires request - từ useRequest.js
+ * @requires get_schema - từ state.js
+ * @requires getSession - từ useSession.js
+ */
+var objToTranslate = {};
+
+/**
+ * Load toàn bộ bản dịch từ DB vào state.objToTranslate.
+ * Dữ liệu lấy từ table "translation", filter theo ngôn ngữ hiện tại trong session.
+ * @param {string} [page=""] - (Chưa sử dụng) Filter theo trang cụ thể
+ * @returns {Promise<void>}
+ * @example await translate() // gọi khi app init
+ */
+export const translate = async (page = "") => {
+  const body = {
+    schema: get_schema(),
+    table: "translation",
+    columns: ["origin", "local"],
+    conditions: { "lang": getSession("language")},
+    order_by: ["page"],
+  };
+  let resp = await request("select", body);
+  state.objToTranslate = {};
+  if (resp?.length > 0) {
+    for (let i = 0; i < resp.length; i++) {
+      if(!(resp[i]['origin'] in objToTranslate)){
+        state.objToTranslate[resp[i]['origin']] = resp[i]['local'];
+      }
+    }
+  }
+};
+
+/**
+ * Dịch chuỗi text. Trả về bản dịch nếu có, nguyên gốc nếu chưa có.
+ * Dùng ở template: {{ t("Agreement") }} hoặc trong JS: t("Save")
+ * @param {string} str - Chuỗi gốc cần dịch
+ * @returns {string} Bản dịch hoặc chuỗi gốc
+ * @example t("Agreement") → "Hợp đồng" (nếu lang=vi)
+ */
+export const t = (str) => {
+  if(str in state.objToTranslate){
+    return state.objToTranslate[str];
+  } else {
+    return str;
+  }
+};