@ngockhoale/ukit 1.1.6

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

@@ -0,0 +1,578 @@
+/**
+ * @file state.js
+ * @description Global reactive state — quản lý trạng thái toàn cục của ứng dụng.
+ * Auto-import, truy cập trực tiếp: state.username, state.loading, ...
+ *
+ * Gồm:
+ *   - state        → Reactive object chứa user info, loading, page header
+ *   - baseurl()    → URL gốc backend (tự phân biệt prd/qas/localhost)
+ *   - get_schema() → Schema database ("prd" hoặc "qas")
+ *   - menu_prd / menu_qas → Cấu trúc menu sidebar
+ *   - menu()       → Trả menu theo env hiện tại
+ *   - authorize_menu() → Kiểm tra quyền truy cập menu
+ */
+
+/**
+ * Global reactive state object
+ * @property {string} username - Username đang đăng nhập
+ * @property {string} fullname - Tên đầy đủ user
+ * @property {string} language - Ngôn ngữ hiện tại (mã lang)
+ * @property {string} usergroup - Nhóm quyền user
+ * @property {string} page_header - Tiêu đề trang hiện tại
+ * @property {string} homepage - Trang chủ mặc định
+ * @property {boolean} loading - Trạng thái loading toàn cục (managed bởi request())
+ * @property {number} loading_count - Đếm số request đang chạy đồng thời
+ * @property {number} screen_height - Chiều cao màn hình
+ * @property {boolean} is_update - Flag đang ở chế độ cập nhật (form)
+ * @property {Object} objToTranslate - Object chứa bản dịch { origin: local }
+ */
+export const state = reactive({
+  username: "",
+  fullname: "",
+  language: "",
+  usergroup: "",
+  page_header: "",
+  homepage: "/agreement/agreementtodo",
+  loading: false,
+  loading_count: 0,
+  screen_height: 0,
+  is_update: false,
+  objToTranslate: {},
+});
+
+/**
+ * Trả về base URL backend tương ứng với môi trường hiện tại.
+ * Tự detect dựa trên window.location.host:
+ *   - chứa "qas" hoặc "localhost" → https://qas.duraoneportal.com/
+ *   - production                  → https://duraoneportal.com/
+ * @returns {string} Base URL kèm trailing slash
+ */
+export const baseurl = () => {
+  var url = window.location.host;
+  if (url.includes("qas")) {
+    return "https://qas.duraoneportal.com/";
+  }
+  if (url.includes("localhost")) {
+    return "https://qas.duraoneportal.com/";
+    // return "https://duraoneportal.com/";
+    // return "http://localhost:7778/";
+  }
+  return "https://duraoneportal.com/";
+};
+/**
+ * Trả về schema database tương ứng với môi trường.
+ * Dùng kèm mọi API call: { schema: get_schema(), table: "..." }
+ * @returns {"prd"|"qas"} Schema name
+ */
+export const get_schema = () => {
+  var url = window.location.host;
+  if (url.includes("qas")) {
+    return "qas";
+  } 
+  if(url.includes("localhost")){
+    return "qas";
+    // return "prd";
+  }
+  return "prd";
+};
+
+/**
+ * Menu sidebar cho môi trường Production.
+ * Cấu trúc mỗi item:
+ * @typedef {Object} MenuItem
+ * @property {string} link - ID nhóm menu (dùng cho routing/collapse)
+ * @property {string} name - Tên hiển thị
+ * @property {string} icon - FontAwesome icon class
+ * @property {Array<SubMenuItem>} sub_menu - Danh sách menu con
+ *
+ * @typedef {Object} SubMenuItem
+ * @property {string} name - Tên hiển thị
+ * @property {string} link - Route path (vd: "/master/branch")
+ * @property {string} icon - FontAwesome icon class
+ * @property {Array<string>} [authorize] - Danh sách usergroup được phép truy cập (undefined = tất cả)
+ *
+ * @type {Array<MenuItem>}
+ */
+export const menu_prd = reactive([
+  {
+    link: "agreement_management",
+    name: "Agreement Management",
+    icon: "fas fa-file-signature",
+    sub_menu: [
+      {
+        name: "Todo Agreement",
+        link: "/agreement/agreementtodo",
+        icon: "fas fa-history",
+      },
+      {
+        name: "All Agreement",
+        link: "/agreement/agreementall",
+        icon: "fas fa-th-list",
+      },
+      {
+        name: "Pending Agreement",
+        link: "/agreement/agreementpending",
+        icon: "fas fa-spinner",
+      },
+      {
+        name: "Approved Agreement",
+        link: "/agreement/agreementapproved",
+        icon: "fas fa-check",
+      },
+      {
+        name: "Rejected Agreement",
+        link: "/agreement/agreementrejected",
+        icon: "fas fa-ban",
+      },
+    ],
+  },
+  {
+    link: "billing_management",
+    name: "Billing Management",
+    icon: "fas fa-file-invoice-dollar",
+    sub_menu: [
+      {
+        name: "Todo Billing",
+        link: "/billing/todo",
+        icon: "fas fa-history",
+      },
+      {
+        name: "All Billing",
+        link: "/billing/all",
+        icon: "fas fa-th-list",
+      },
+    ],
+  },
+  {
+    link: "collect_point_management",
+    name: "Collect Point",
+    icon: "fas fa-coins",
+    sub_menu: [
+      {
+        name: "Summary",
+        link: "/collect_point/summary",
+        icon: "fas fa-list",
+      },
+      {
+        name: "All Transactions",
+        link: "/collect_point/transactions",
+        icon: "fas fa-check",
+      },
+      {
+        name: "Review Transactions",
+        link: "/collect_point/reviewtransaction",
+        icon: "fas fa-search-location",
+      },
+      {
+        name: "Confirmed Transactions",
+        link: "/collect_point/reviewtransaction/confirm",
+        icon: "fas fa-check-double",
+      },
+      {
+        name: "Ineligible Transactions",
+        link: "/collect_point/reviewtransaction/not_eligible",
+        icon: "fas fa-times",
+      },
+      {
+        name: "BuzzeeBee Report",
+        link: "/collect_point/reviewtransaction/buzzeebee_report",
+        icon: "fab fa-hubspot",
+      },
+      {
+        name: "Report",
+        link: "/collect_point/report",
+        icon: "fas fa-server",
+      },
+    ],
+  },
+  {
+    link: "report",
+    name: "Report",
+    icon: "fas fa-chart-bar",
+    sub_menu: [
+      {
+        name: "Output Report",
+        link: "/report/master",
+        icon: "fas fa-server",
+      },
+      {
+        name: "Agreement",
+        link: "/report/agreement",
+        icon: "fas fa-file-signature",
+      },
+      {
+        name: "Billing",
+        link: "/report/billing",
+        icon: "fas fa-file-invoice-dollar",
+      },
+    ],
+  },
+  {
+    link: "master_data",
+    name: "Master Data",
+    icon: "fas fa-th",
+    sub_menu: [
+      {
+        name: "Agreement Period",
+        link: "/master/agreementperiod",
+        icon: "fas fa-clock",
+      },
+      {
+        name: "Type of Media",
+        link: "/master/typeofmedia",
+        icon: "fas fa-photo-video",
+      },
+      {
+        name: "Modern Trade",
+        link: "/master/moderntrade",
+        icon: "fas fa-exchange-alt",
+      },
+      {
+        name: "Branch",
+        link: "/master/branch",
+        icon: "fas fa-code-branch",
+      },
+      {
+        name: "User",
+        link: "/master/users",
+        icon: "fas fa-user",
+      },
+      {
+        name: "Permission",
+        link: "/master/permission",
+        icon: "fas fa-lock",
+      },
+      {
+        name: "Translation",
+        link: "/master/translation",
+        icon: "fas fa-language",
+      },
+      {
+        name: "Sub Dealer",
+        link: "/master/subdealer",
+        icon: "fas fa-users",
+      },
+      {
+        name: "Dealer",
+        link: "/master/dealer",
+        icon: "fas fa-users",
+      },
+      {
+        name: "Production Group",
+        link: "/master/productgroup",
+        icon: "fas fa-anchor",
+      },
+      {
+        name: "Product",
+        link: "/master/product",
+        icon: "fas fa-battery-full",
+      },
+      {
+        name: "Postal - Region",
+        link: "/master/postcode",
+        icon: "fas fa-map-marker-alt",
+      },
+    ],
+  },
+]);
+
+/**
+ * Menu sidebar cho môi trường QAS (có thêm Stock Clearance, Line Chat)
+ * @type {Array<MenuItem>}
+ */
+export const menu_qas = reactive([
+  {
+    link: "agreement_management",
+    name: "Agreement Management",
+    icon: "fas fa-file-signature",
+    sub_menu: [
+      {
+        name: "Todo Agreement",
+        link: "/agreement/agreementtodo",
+        icon: "fas fa-history",
+      },
+      {
+        name: "All Agreement",
+        link: "/agreement/agreementall",
+        icon: "fas fa-th-list",
+      },
+      {
+        name: "Pending Agreement",
+        link: "/agreement/agreementpending",
+        icon: "fas fa-spinner",
+      },
+      {
+        name: "Approved Agreement",
+        link: "/agreement/agreementapproved",
+        icon: "fas fa-check",
+      },
+      {
+        name: "Rejected Agreement",
+        link: "/agreement/agreementrejected",
+        icon: "fas fa-ban",
+      },
+    ],
+  },
+  {
+    link: "billing_management",
+    name: "Billing Management",
+    icon: "fas fa-file-invoice-dollar",
+    sub_menu: [
+      {
+        name: "Todo Billing",
+        link: "/billing/todo",
+        icon: "fas fa-history",
+      },
+      {
+        name: "All Billing",
+        link: "/billing/all",
+        icon: "fas fa-th-list",
+      },
+    ],
+  },
+  {
+    link: "collect_point_management",
+    name: "Collect Point",
+    icon: "fas fa-coins",
+    sub_menu: [
+      {
+        name: "Summary",
+        link: "/collect_point/summary",
+        icon: "fas fa-list",
+      },
+      {
+        name: "All Transactions",
+        link: "/collect_point/transactions",
+        icon: "fas fa-check",
+      },
+      {
+        name: "Review Transactions",
+        link: "/collect_point/reviewtransaction",
+        icon: "fas fa-search-location",
+      },
+      {
+        name: "Confirmed Transactions",
+        link: "/collect_point/reviewtransaction/confirm",
+        icon: "fas fa-check-double",
+      },
+      {
+        name: "Ineligible Transactions",
+        link: "/collect_point/reviewtransaction/not_eligible",
+        icon: "fas fa-times",
+      },
+      {
+        name: "BuzzeeBee Report",
+        link: "/collect_point/reviewtransaction/buzzeebee_report",
+        icon: "fab fa-hubspot",
+      },
+      {
+        name: "Report",
+        link: "/collect_point/report",
+        icon: "fas fa-server",
+      },
+    ],
+  },
+  {
+    link: "report",
+    name: "Report",
+    icon: "fas fa-chart-bar",
+    sub_menu: [
+      {
+        name: "Output Report",
+        link: "/report/master",
+        icon: "fas fa-server",
+      },
+      {
+        name: "Agreement",
+        link: "/report/agreement",
+        icon: "fas fa-file-signature",
+      },
+      {
+        name: "Billing",
+        link: "/report/billing",
+        icon: "fas fa-file-invoice-dollar",
+      },
+    ],
+  },
+  {
+    link: "master_data",
+    name: "Master Data",
+    icon: "fas fa-th",
+    sub_menu: [
+      {
+        name: "Agreement Period",
+        link: "/master/agreementperiod",
+        icon: "fas fa-clock",
+      },
+      {
+        name: "Type of Media",
+        link: "/master/typeofmedia",
+        icon: "fas fa-photo-video",
+      },
+      {
+        name: "Modern Trade",
+        link: "/master/moderntrade",
+        icon: "fas fa-exchange-alt",
+      },
+      {
+        name: "Branch",
+        link: "/master/branch",
+        icon: "fas fa-code-branch",
+      },
+      {
+        name: "User",
+        link: "/master/users",
+        icon: "fas fa-user",
+        authorize: ["Approver"],
+      },
+      {
+        name: "Permission",
+        link: "/master/permission",
+        icon: "fas fa-lock",
+        authorize: ["Approver"],
+      },
+      {
+        name: "Translation",
+        link: "/master/translation",
+        icon: "fas fa-language",
+        authorize: ["Approver"],
+      },
+      {
+        name: "Sub Dealer",
+        link: "/master/subdealer",
+        icon: "fas fa-users",
+      },
+      {
+        name: "Dealer",
+        link: "/master/dealer",
+        icon: "fas fa-users",
+      },
+      {
+        name: "Production Group",
+        link: "/master/productgroup",
+        icon: "fas fa-anchor",
+      },
+      {
+        name: "Product",
+        link: "/master/product",
+        icon: "fas fa-battery-full",
+      },
+      {
+        name: "Postal - Region",
+        link: "/master/postcode",
+        icon: "fas fa-map-marker-alt",
+      },
+    ],
+  },
+  {
+    link: "stockclearance",
+    name: "Stock Clearance",
+    icon: "fas fa-warehouse",
+    sub_menu: [
+      {
+        name: "Customer List",
+        link: "/stockclearance/customer",
+        icon: "fas fa-users",
+      },
+      {
+        name: "Product List",
+        link: "/stockclearance/product",
+        icon: "fas fa-box",
+      },
+      {
+        name: "Product Modern Trade",
+        link: "/stockclearance/productmoderntrade",
+        icon: "fas fa-store",
+      },
+      {
+        name: "Product View",
+        link: "/stockclearance/productview",
+        icon: "fas fa-list-alt",
+      }
+    ],
+  },
+  {
+    link: "linechat",
+    name: "Line Chat",
+    icon: "fab fa-line",
+    sub_menu: [
+      {
+        name: "Contact",
+        link: "/line/contact",
+        icon: "fas fa-address-book",
+      },
+      {
+        name: "Coupon",
+        link: "/line/coupon",
+        icon: "fas fa-ticket-alt",
+      },
+      {
+        name: "OA Config",
+        link: "/line/oaconfig",
+        icon: "fas fa-cogs",
+      },
+      {
+        name: "Membership",
+        link: "/line/membership",
+        icon: "fas fa-user-friends",
+      },
+      {
+        name: "Partner",
+        link: "/line/partner",
+        icon: "fas fa-handshake",
+      },
+      {
+        name: "Transaction",
+        link: "/line/transaction",
+        icon: "fas fa-exchange-alt",
+      },
+      {
+        name: "Line Account",
+        link: "/line/lineaccount",
+        icon: "fas fa-user-circle",
+      },
+    ],
+  },
+]);
+
+
+/**
+ * Trả về menu tương ứng với env hiện tại (prd hoặc qas)
+ * @returns {Array<MenuItem>} Menu sidebar
+ */
+export const menu = () => {
+  if (get_schema() === "prd") {
+    return menu_prd;
+  }
+  return menu_qas;
+};
+
+/**
+ * Kiểm tra user hiện tại có quyền truy cập menu_path không.
+ * Nếu sub_menu không có field authorize → cho phép tất cả.
+ * Nếu có authorize → kiểm tra usergroup của session có nằm trong danh sách không.
+ * @param {string} menu_path - Route path cần kiểm tra (vd: "/master/users")
+ * @returns {boolean} true nếu được phép truy cập
+ */
+export const authorize_menu = (menu_path) => {
+  const usergroup = getSession("usergroup");
+  
+  for (const item of menu()) {
+    if (!item.sub_menu) continue;
+    
+    for (const sub of item.sub_menu) {
+      if (sub.link === menu_path) {
+        if (typeof sub.authorize === "undefined" || sub.authorize === "undefined" || sub.authorize === undefined) {
+          return true;
+        }
+        if (usergroup && usergroup.some((role) => 
+          sub.authorize && sub.authorize.includes(role)
+        )) {
+          return true;
+        }
+        return false;
+      }
+    }
+  }
+  return false;
+};