@zenify-omni/chat-ui-react-js 0.1.0

package/store/settings-store/multi-channel/zalo-list-store.js

@@ -0,0 +1,22 @@
+import { create } from "../../index.js";
+import { devtools } from "../../devtools.js";
+const useZaloListStore = create(
+  devtools(
+    (set) => ({
+      page: 1,
+      pageSize: 10,
+      reloadTime: null,
+      sortBy: null,
+      setPage: (page) => set({ page }),
+      setPageSize: (pageSize) => set({ pageSize }),
+      setReloadTime: (reloadTime) => set({ reloadTime }),
+      setSort: (sortBy) => set({ sortBy, page: 1 })
+    }),
+    {
+      name: "zalo-list-store"
+    }
+  )
+);
+export {
+  useZaloListStore
+};

package/store/settings-store/multi-channel/zalo-user-list-store.js

@@ -0,0 +1,25 @@
+import { create } from "../../index.js";
+import { devtools } from "../../devtools.js";
+const useZaloUserListStore = create(
+  devtools(
+    (set) => ({
+      pageDomain: 1,
+      pageSizeDomain: 10,
+      sortBy: null,
+      setPageDomain: (pageDomain) => set({ pageDomain }),
+      setPageSizeDomain: (pageSizeDomain) => set({ pageSizeDomain }),
+      setSort: (sortBy) => set({ sortBy, pageDomain: 1 }),
+      lastReloadTime: Date.now(),
+      refreshLastReloadTime: () => set({
+        lastReloadTime: Date.now(),
+        pageDomain: 1
+      })
+    }),
+    {
+      name: "zalo-user-list-store"
+    }
+  )
+);
+export {
+  useZaloUserListStore
+};

package/store/smart-qc-store/smart-qc-list-filter-store.js

@@ -0,0 +1,70 @@
+import { create } from "../index.js";
+import { devtools } from "../devtools.js";
+import { subDays } from "date-fns";
+const initiateFilterState = {
+  name: "",
+  status: null,
+  range_date: {
+    from: subDays(/* @__PURE__ */ new Date(), 7),
+    to: /* @__PURE__ */ new Date()
+  }
+};
+const initialState = {
+  page: 1,
+  pageSize: 10,
+  filter: initiateFilterState,
+  lastRefreshTime: Date.now(),
+  // Sort explicit do user click vào header. Null = giữ thứ tự mặc định BE.
+  sortBy: null,
+  // List Auto QA và Manual QA dùng CHUNG store này. Ghi lại list đang xem để
+  // reset về trang 1 khi đổi menu (auto↔manual) — tránh đứng trang 3 của Auto
+  // rồi sang Manual vẫn ở trang 3. Vào lại cùng list (VD back từ chi tiết) thì
+  // KHÔNG reset, giữ nguyên trang đang xem.
+  listMode: null
+};
+const useSmartQcListFilterStore = create(
+  devtools(
+    (set) => ({
+      ...initialState,
+      setPage: (page) => set((state) => ({
+        ...state,
+        page
+      })),
+      setPageSize: (pageSize) => set((state) => ({
+        ...state,
+        pageSize
+      })),
+      setFilter: (filter) => set((state) => ({
+        ...state,
+        filter,
+        page: 1,
+        lastRefreshTime: Date.now()
+      })),
+      setSort: (sortBy) => set((state) => ({
+        ...state,
+        sortBy,
+        page: 1
+      })),
+      // Vào 1 list ('auto'|'manual'): đổi mode thì reset về mặc định (trang 1 +
+      // filter tên/trạng thái/ngày + sort) để list mới sạch; cùng mode thì giữ
+      // nguyên state (không nháy khi back từ chi tiết). Giữ pageSize (preference).
+      enterListMode: (mode) => set(
+        (state) => state.listMode === mode ? state : {
+          ...state,
+          listMode: mode,
+          page: 1,
+          filter: initiateFilterState,
+          sortBy: null,
+          lastRefreshTime: Date.now()
+        }
+      )
+    }),
+    {
+      name: "smart-qc-list-filter-store"
+    }
+  )
+);
+export {
+  initiateFilterState,
+  useSmartQcListFilterStore
+};

package/store/tenant-config-store.js

@@ -0,0 +1,21 @@
+import { create } from "./index.js";
+import { devtools } from "./devtools.js";
+const useTenantConfigStore = create(
+  devtools(
+    (set) => ({
+      tenantConfig: null,
+      setTenantConfig: (tenantConfig) => set({ tenantConfig }),
+      chatConfig: null,
+      setChatConfig: (chatConfig) => set((state) => ({
+        chatConfig: { ...state.chatConfig, ...chatConfig }
+      }))
+    }),
+    {
+      name: "user-status-store"
+    }
+  )
+);
+var tenant_config_store_default = useTenantConfigStore;
+export {
+  tenant_config_store_default as default
+};

package/store/user-detail-store.js

@@ -0,0 +1,17 @@
+import { create } from "./index.js";
+import { devtools } from "./devtools.js";
+const useUserDetailStore = create(
+  devtools(
+    (set) => ({
+      toggleRightSide: false,
+      setToggleRightSide: (toggleRightSide) => set({ toggleRightSide })
+    }),
+    {
+      name: "use-user-detail-store"
+    }
+  )
+);
+var user_detail_store_default = useUserDetailStore;
+export {
+  user_detail_store_default as default
+};

package/store/user-status-store.js

@@ -0,0 +1,33 @@
+import { create } from "./index.js";
+import { devtools } from "./devtools.js";
+const useUserStatusStore = create(
+  devtools(
+    (set) => ({
+      active: true,
+      availableStatus: "NOACD",
+      chatStatus: "NOT AVAILABLE",
+      facebookStatus: "NOT AVAILABLE",
+      zaloStatus: "NOT AVAILABLE",
+      emailStatus: "NOT AVAILABLE",
+      tiktokStatus: "NOT AVAILABLE",
+      statusType: 1,
+      setActive: (status) => set({ active: status }),
+      toggleActive: () => set((state) => ({ active: !state.active })),
+      setAvailableStatus: (status) => set({ availableStatus: status }),
+      setStatusType: (type) => set({ statusType: type }),
+      setChatStatus: (status) => set({ chatStatus: status }),
+      setFacebookStatus: (status) => set({ facebookStatus: status }),
+      setZaloStatus: (status) => set({ zaloStatus: status }),
+      setEmailStatus: (status) => set({ emailStatus: status }),
+      setTiktokStatus: (status) => set({ tiktokStatus: status }),
+      setStatus: (data) => set((state) => ({ ...state, ...data }))
+    }),
+    {
+      name: "user-status-store"
+    }
+  )
+);
+var user_status_store_default = useUserStatusStore;
+export {
+  user_status_store_default as default
+};

package/store/workflow-store.js

@@ -0,0 +1,24 @@
+import { create } from "./index.js";
+import { devtools } from "./devtools.js";
+const useWorkflowStore = create(
+  devtools(
+    (set) => ({
+      page: 1,
+      pageSize: 10,
+      setPage: (page) => set({ page, lastReloadTime: Date.now() }),
+      setPageSize: (pageSize) => set({ pageSize, lastReloadTime: Date.now() }),
+      lastReloadTime: Date.now(),
+      // Sort explicit do user click vào header. Null = giữ thứ tự mặc định BE.
+      sortBy: null,
+      setSort: (sortBy) => set({ sortBy, page: 1 }),
+      resetLastReloadTime: () => set({
+        lastReloadTime: Date.now(),
+        page: 1
+      })
+    }),
+    { name: "workflow-store" }
+  )
+);
+export {
+  useWorkflowStore
+};

package/store/workspace-store.js

@@ -0,0 +1,32 @@
+import { create } from "./index.js";
+import { devtools } from "./devtools.js";
+const useWorkspaceStore = create(
+  devtools(
+    (set, get) => ({
+      workspaces: [],
+      activeWorkspaceId: null,
+      userRolePermissions: {},
+      // { [wsId]: string[] } from iam_role.permissions
+      // Flat list of the current user's EFFECTIVE permissions (role ± department
+      // overrides) from GET /v2/iam/me/permissions. Use for override-aware gating
+      // (e.g. customer menus); userRolePermissions above is the raw role map.
+      effectivePermissions: [],
+      setWorkspaces: (workspaces) => set({ workspaces }),
+      setUserRolePermissions: (perms) => set({ userRolePermissions: perms || {} }),
+      setEffectivePermissions: (perms) => set({ effectivePermissions: Array.isArray(perms) ? perms : [] }),
+      setActiveWorkspaceId: (id) => {
+        localStorage.setItem("activeWorkspaceId", id);
+        set({ activeWorkspaceId: id });
+      },
+      getActiveWorkspace: () => {
+        const { workspaces, activeWorkspaceId } = get();
+        return workspaces.find((w) => w._id === activeWorkspaceId) || null;
+      }
+    }),
+    { name: "workspace-store" }
+  )
+);
+var workspace_store_default = useWorkspaceStore;
+export {
+  workspace_store_default as default
+};

package/tailwind-preset.js

@@ -0,0 +1,129 @@
+const v = (name) => `hsl(var(--${name}))`;
+const sd = (mult) => `hsl(var(--shadow-color) / calc(var(--shadow-strength) * ${mult}))`;
+const rim = "0 0 0 1px hsl(var(--shadow-color) / var(--shadow-rim))";
+const pair = (name) => ({ DEFAULT: v(name), foreground: v(`${name}-foreground`) });
+var tailwind_preset_default = {
+  darkMode: ["class"],
+  theme: {
+    extend: {
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)"
+      },
+      /**
+       * Bóng đổ chạy qua token thay vì `rgb(0 0 0 / .1)` cứng của Tailwind.
+       *
+       * Lý do: trên nền tối, bóng ĐEN vô dụng — nền `--chat-thread-bg` đã ở
+       * độ sáng 7%, nên kể cả bóng đen đặc 100% cũng chỉ tạo tương phản
+       * 1.10:1. Không có cách nào "làm đậm" để thấy rõ hơn. Bản tối vì vậy
+       * đổi `--shadow-color` sang tông SÁNG (quầng sáng) và bật thêm lớp
+       * viền `0 0 0 1px` qua `--shadow-rim`.
+       *
+       * Bản sáng: `--shadow-color: 0 0% 0%`, `--shadow-strength: .1`,
+       * `--shadow-rim: 0`. Các hệ số nhân dưới đây tái lập ĐÚNG từng giá trị
+       * mặc định của Tailwind 3.4 (sm .05, md .1, 2xl .25), còn lớp rim với
+       * alpha 0 thì trong suốt hoàn toàn — giao diện sáng không đổi 1 pixel.
+       */
+      boxShadow: {
+        sm: `${rim}, 0 1px 2px 0 ${sd(0.5)}`,
+        DEFAULT: `${rim}, 0 1px 3px 0 ${sd(1)}, 0 1px 2px -1px ${sd(1)}`,
+        md: `${rim}, 0 4px 6px -1px ${sd(1)}, 0 2px 4px -2px ${sd(1)}`,
+        lg: `${rim}, 0 10px 15px -3px ${sd(1)}, 0 4px 6px -4px ${sd(1)}`,
+        xl: `${rim}, 0 20px 25px -5px ${sd(1)}, 0 8px 10px -6px ${sd(1)}`,
+        "2xl": `${rim}, 0 25px 50px -12px ${sd(2.5)}`,
+        inner: `inset 0 2px 4px 0 ${sd(0.5)}`
+      },
+      colors: {
+        background: v("background"),
+        foreground: v("foreground"),
+        card: pair("card"),
+        popover: pair("popover"),
+        primary: pair("primary"),
+        secondary: pair("secondary"),
+        muted: pair("muted"),
+        accent: pair("accent"),
+        destructive: pair("destructive"),
+        // `success` TRƯỚC ĐÂY chỉ có DEFAULT -> `text-success-foreground` không
+        // tồn tại, tooltip success mất màu chữ mà không ai biết.
+        success: pair("success"),
+        // Token MỚI, thay cho màu hex cứng rải trong components:
+        warning: pair("warning"),
+        // #f97316 #f59e0b #f37203
+        "foreground-secondary": v("foreground-secondary"),
+        // #5a6981 (12 chỗ)
+        "border-subtle": v("border-subtle"),
+        // cụm #e5e7eb #e8e9ee …
+        "surface-subtle": v("surface-subtle"),
+        // cụm #fafbfd #f8fafc …
+        // Mặt phẳng riêng của khung chat. Có token thì `config/theme.js` không
+        // còn phải đè class arbitrary bằng !important nữa.
+        chat: {
+          "own-bubble": v("chat-own-bubble"),
+          "own-bubble-foreground": v("chat-own-bubble-foreground"),
+          "thread-bg": v("chat-thread-bg")
+        },
+        border: v("border"),
+        input: v("input"),
+        ring: v("ring"),
+        // 11 chart, không phải 10: `--chart-11` có trong index.css.
+        chart: Object.fromEntries(
+          Array.from({ length: 11 }, (_, i) => [String(i + 1), v(`chart-${i + 1}`)])
+        ),
+        sidebar: {
+          DEFAULT: v("sidebar-background"),
+          foreground: v("sidebar-foreground"),
+          primary: v("sidebar-primary"),
+          "primary-foreground": v("sidebar-primary-foreground"),
+          accent: v("sidebar-accent"),
+          "accent-foreground": v("sidebar-accent-foreground"),
+          border: v("sidebar-border"),
+          ring: v("sidebar-ring")
+        }
+      },
+      keyframes: {
+        "collapsible-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-collapsible-content-height)" }
+        },
+        "collapsible-up": {
+          from: { height: "var(--radix-collapsible-content-height)" },
+          to: { height: "0" }
+        },
+        "progress-slide": {
+          "0%": { transform: "translateX(-100%)" },
+          "100%": { transform: "translateX(400%)" }
+        },
+        // Màu lấy từ --ring thay vì rgba(59,130,246) cứng -> vòng thông báo
+        // đổi theo theme.
+        "notification-ring": {
+          "0%": {
+            transform: "translateX(0)",
+            boxShadow: "0 0 0 0 hsl(var(--ring) / 0.7), 0 0 0 0 hsl(var(--ring) / 0.5)"
+          },
+          "30%": {
+            transform: "translateX(-1px)",
+            boxShadow: "0 0 0 10px hsl(var(--ring) / 0), 0 0 0 0 hsl(var(--ring) / 0.5)"
+          },
+          "60%": {
+            transform: "translateX(1px)",
+            boxShadow: "0 0 0 10px hsl(var(--ring) / 0), 0 0 0 15px hsl(var(--ring) / 0)"
+          },
+          "100%": {
+            transform: "translateX(0)",
+            boxShadow: "0 0 0 0 hsl(var(--ring) / 0), 0 0 0 15px hsl(var(--ring) / 0)"
+          }
+        }
+      },
+      animation: {
+        "collapsible-down": "collapsible-down 200ms ease-out",
+        "collapsible-up": "collapsible-up 200ms ease-out",
+        "notification-ring": "notification-ring 2s ease-in-out",
+        "progress-slide": "progress-slide 1.4s ease-in-out infinite"
+      }
+    }
+  }
+};
+export {
+  tailwind_preset_default as default
+};