@antscorp/antsomi-ui 2.0.64-staging.6 → 2.0.64-staging.61

package/CHANGELOG.md

@@ -0,0 +1,84 @@
+### Changelog
+
+All notable changes to this project will be documented in this file. Dates are displayed in UTC.
+
+Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
+
+#### [v2.0.64-staging.60](https://bitbucket.org/git-vn/at.packages.frontend/compare/v2.0.64-staging.60..v2.0.64-staging.58)
+
+- feat: update message activity timeline [`7a3bc15`](https://bitbucket.org/git-vn/at.packages.frontend/commits/7a3bc15dd2e2eb7caf91e6bf064edd48e97dcdb2)
+- feat: add fallback scheme_code [`ecb8e67`](https://bitbucket.org/git-vn/at.packages.frontend/commits/ecb8e67a56b93610df913c2f7c37d89b8be98ad6)
+- feat: update extra keys [`da5b04e`](https://bitbucket.org/git-vn/at.packages.frontend/commits/da5b04e9e1c6b5d0c3584c4e08ffe70733ad4e77)
+
+#### [v2.0.64-staging.58](https://bitbucket.org/git-vn/at.packages.frontend/compare/v2.0.64-staging.58..v2.0.64-staging.54)
+
+> 17 March 2026
+
+- feat: add event tg [`3d5672b`](https://bitbucket.org/git-vn/at.packages.frontend/commits/3d5672bf798efc459cec8c2866692ecc48be1141)
+- feat: update message activity timeline leads [`3b1590e`](https://bitbucket.org/git-vn/at.packages.frontend/commits/3b1590ee8c5aa8a1d671082f6fd72d9d85b6414b)
+- feat: update message activity timeline leads [`8b4d22c`](https://bitbucket.org/git-vn/at.packages.frontend/commits/8b4d22cf8d1ad4a4cc0e7c36dcd8306ae9e2f7d7)
+
+#### [v2.0.64-staging.54](https://bitbucket.org/git-vn/at.packages.frontend/compare/v2.0.64-staging.54..v2.0.22)
+
+> 30 January 2026
+
+- fix: build search logic [`#27`](https://bitbucket.org/git-vn/at.packages.frontend/pull-requests/27)
+- feat: add report area chart [`4a0fad4`](https://bitbucket.org/git-vn/at.packages.frontend/commits/4a0fad4b405425ef03b9cf6038f6e9389f44a366)
+- chore: update storybook version [`d13f194`](https://bitbucket.org/git-vn/at.packages.frontend/commits/d13f19462c2fe117934df7fe2e09fd0aa95a0167)
+- feat: init antsomi-genai [`d898d07`](https://bitbucket.org/git-vn/at.packages.frontend/commits/d898d07f09cf6436ff9ba2a5430e08fc44190781)
+
+### [v2.0.22](https://bitbucket.org/git-vn/at.packages.frontend/compare/v2.0.22..v1.0.10)
+
+> 19 January 2023
+
+#### [v1.0.10](https://bitbucket.org/git-vn/at.packages.frontend/compare/v1.0.10..v1.0.9)
+
+> 20 June 2024
+
+#### [v1.0.9](https://bitbucket.org/git-vn/at.packages.frontend/compare/v1.0.9..v1.0.8)
+
+> 20 June 2024
+
+#### [v1.0.8](https://bitbucket.org/git-vn/at.packages.frontend/compare/v1.0.8..v1.0.3)
+
+> 20 June 2024
+
+- feat(SelectAccount): add component [`2f1dea0`](https://bitbucket.org/git-vn/at.packages.frontend/commits/2f1dea035af07a01a6be8da47b531d52d2977bbe)
+- fix: update style for calendar selection [`4347b91`](https://bitbucket.org/git-vn/at.packages.frontend/commits/4347b91f5bbe31caeb64478116c1822fe443f359)
+- feat(EditorTab): use modal async in onCloseTab [`76aece8`](https://bitbucket.org/git-vn/at.packages.frontend/commits/76aece8cc7a44385d63019058daa1f8477c8fbcb)
+
+#### [v1.0.3](https://bitbucket.org/git-vn/at.packages.frontend/compare/v1.0.3..v1.0.2)
+
+> 17 January 2023
+
+- update timeline package [`e198927`](https://bitbucket.org/git-vn/at.packages.frontend/commits/e198927d83931f9155e90ab9a1d9d3a5ac2989c4)
+- update-ticket-editor [`38dd7b0`](https://bitbucket.org/git-vn/at.packages.frontend/commits/38dd7b0a7b2b0b58a63e725419e9b057e053f44f)
+- update-upload-file-ticket-editor [`bb2f2ef`](https://bitbucket.org/git-vn/at.packages.frontend/commits/bb2f2ef1c46f4239ad716c897e53856a6368ea7d)
+
+#### v1.0.2
+
+> 4 January 2023
+
+- Sprint10/vinlt/feature/date advanced [`#24`](https://bitbucket.org/git-vn/at.packages.frontend/pull-requests/24)
+- Sprint10/sangndd/feature/extend value matches any [`#23`](https://bitbucket.org/git-vn/at.packages.frontend/pull-requests/23)
+- Sprint10/sangndd/feature/extend value matches any [`#22`](https://bitbucket.org/git-vn/at.packages.frontend/pull-requests/22)
+- [Scatter chart] Max X-axis giá trị bị lặp [`#20`](https://bitbucket.org/git-vn/at.packages.frontend/pull-requests/20)
+- Sprint8/vinlt/feature/show data label short [`#18`](https://bitbucket.org/git-vn/at.packages.frontend/pull-requests/18)
+- Fix duplicate axis max value [`#17`](https://bitbucket.org/git-vn/at.packages.frontend/pull-requests/17)
+- [Antalyser] Một số bug khi nhập axis giá trị thập phân [`#16`](https://bitbucket.org/git-vn/at.packages.frontend/pull-requests/16)
+- Sprint6/vinlt/fixbug/chart [`#15`](https://bitbucket.org/git-vn/at.packages.frontend/pull-requests/15)
+- - Axis allows input of decimal values [`#14`](https://bitbucket.org/git-vn/at.packages.frontend/pull-requests/14)
+- Sprint4/sangndd/feature/icons [`#12`](https://bitbucket.org/git-vn/at.packages.frontend/pull-requests/12)
+- Sprint4/sangndd/feature/icons [`#11`](https://bitbucket.org/git-vn/at.packages.frontend/pull-requests/11)
+- Sprint4/thanghn/fixbug/pivot alias border [`#10`](https://bitbucket.org/git-vn/at.packages.frontend/pull-requests/10)
+- fix scroll dimension and total column [`#9`](https://bitbucket.org/git-vn/at.packages.frontend/pull-requests/9)
+- [ANTALYSER][Filter][Khi filter filed có type date và semantic là "Month day" thì không load được danh sách các ngày trong tháng] [`#7`](https://bitbucket.org/git-vn/at.packages.frontend/pull-requests/7)
+- [ANTALYSER][Pivot chart][Tính năng Add border shadow chưa hoạt động] [`#8`](https://bitbucket.org/git-vn/at.packages.frontend/pull-requests/8)
+- Fix bug [ANTALYSER][Scatter chart][Label ở cột X và Y chưa đổi theo alias name đã change ở metric] [`#6`](https://bitbucket.org/git-vn/at.packages.frontend/pull-requests/6)
+- Fix bug [Pivot chart] Row color không hiển thị được khi chọn hiển thị data của metric là Bar [`#5`](https://bitbucket.org/git-vn/at.packages.frontend/pull-requests/5)
+- Fix bug package antscorp/charts [`#1`](https://bitbucket.org/git-vn/at.packages.frontend/pull-requests/1)
+- Fix bug package antscorp/chart [`#2`](https://bitbucket.org/git-vn/at.packages.frontend/pull-requests/2)
+- table component [`#1`](https://bitbucket.org/git-vn/at.packages.frontend/pull-requests/1)
+- Update map indonesia [`fc94208`](https://bitbucket.org/git-vn/at.packages.frontend/commits/fc9420838b3f4087a5763017e9bf7e72ee8c5e31)
+- Update geomap [`43f3098`](https://bitbucket.org/git-vn/at.packages.frontend/commits/43f3098506f30a215dc2b30734590e5c55f8b490)
+- sync package master [`7476118`](https://bitbucket.org/git-vn/at.packages.frontend/commits/7476118de2fcfa1bd6b0a9e3c0f887b29fd149b6)

package/es/__mocks__/sql-query.json

@@ -0,0 +1,56 @@
+{
+  "queries": [
+    {
+      "name": "Tìm nhân viên có mức lương cao thứ hai của mỗi phòng ban",
+      "description": "Sử dụng Window Function DENSE_RANK() để xếp hạng nhân viên theo lương trong mỗi phòng ban và lấy ra những người có thứ hạng là 2.",
+      "query": "-- Sử dụng Window Function DENSE_RANK() để xếp hạng nhân viên theo lương trong mỗi phòng ban.\n-- DENSE_RANK() sẽ gán cùng một thứ hạng cho các nhân viên có cùng mức lương.\n-- Sau đó, chúng ta chỉ cần chọn những nhân viên có thứ hạng là 2.\nSELECT \n    e.name,\n    d.name AS department_name,\n    e.salary\nFROM (\n    SELECT\n        e.name,\n        e.salary,\n        e.department_id,\n        d.name AS department_name,\n        -- Xếp hạng nhân viên theo mức lương giảm dần trong từng phòng ban.\n        -- PARTITION BY chia dữ liệu thành các nhóm theo department_id.\n        -- ORDER BY sắp xếp các dòng trong mỗi nhóm theo salary.\n        DENSE_RANK() OVER (PARTITION BY e.department_id ORDER BY e.salary DESC) as salary_rank\n    FROM \n        employees e\n    JOIN \n        departments d ON e.department_id = d.id\n) as ranked_employees\nWHERE \n    ranked_employees.salary_rank = 2;"
+    },
+    {
+      "name": "Tính tổng doanh số tích lũy của mỗi nhân viên theo thời gian",
+      "description": "Sử dụng Window Function SUM() với ORDER BY để tính tổng doanh số tích lũy (Running Total) cho từng nhân viên theo ngày bán hàng.",
+      "query": "-- Sử dụng Window Function SUM() với ORDER BY để tính tổng doanh số tích lũy (Running Total).\n-- Điều này cho phép chúng ta tính tổng của một cột trong một cửa sổ dữ liệu được sắp xếp.\nSELECT\n    s.employee_id,\n    s.sale_date,\n    s.amount,\n    -- Tính tổng doanh số tích lũy cho mỗi nhân viên.\n    -- PARTITION BY employee_id đảm bảo tổng chỉ tính trong phạm vi của từng nhân viên.\n    -- ORDER BY sale_date sắp xếp các giao dịch theo thời gian.\n    -- Cửa sổ mặc định sẽ là từ đầu partition đến dòng hiện tại.\n    SUM(s.amount) OVER (PARTITION BY s.employee_id ORDER BY s.sale_date) as cumulative_sales\nFROM\n    sales s\nORDER BY \n    s.employee_id, \n    s.sale_date;"
+    },
+    {
+      "name": "Tìm phòng ban có doanh số cao hơn mức trung bình của tất cả các phòng ban",
+      "description": "Kết hợp Common Table Expression (CTE) để tính tổng doanh số của mỗi phòng ban, sau đó dùng subquery để so sánh với mức trung bình chung.",
+      "query": "-- Sử dụng Common Table Expression (CTE) để tính tổng doanh số của mỗi phòng ban trước.\n-- Điều này giúp cho truy vấn chính trở nên gọn gàng và dễ hiểu hơn.\nWITH DepartmentSales AS (\n    -- Bước 1: Tính tổng doanh số của mỗi phòng ban.\n    SELECT \n        d.id AS department_id,\n        d.name AS department_name,\n        SUM(s.amount) as total_department_sales\n    FROM \n        departments d\n    JOIN \n        employees e ON d.id = e.department_id\n    JOIN \n        sales s ON e.id = s.employee_id\n    GROUP BY \n        d.id, d.name\n)\n-- Bước 2: Truy vấn chính. Lấy những phòng ban có tổng doanh số lớn hơn mức trung bình của tất cả các phòng ban.\nSELECT\n    department_name,\n    total_department_sales\nFROM \n    DepartmentSales\nWHERE\n    total_department_sales > (\n        -- Subquery: Tính mức trung bình của tổng doanh số của tất cả các phòng ban.\n        -- Chúng ta không thể sử dụng trực tiếp AVG() trên total_department_sales ở đây.\n        SELECT \n            AVG(total_department_sales)\n        FROM \n            DepartmentSales\n    );"
+    },
+    {
+      "name": "Tìm nhân viên không có giao dịch bán hàng trong 30 ngày gần nhất",
+      "description": "Sử dụng LEFT JOIN từ bảng nhân viên đến bảng doanh số và dùng HAVING cùng hàm DATEDIFF() để lọc ra những nhân viên không có giao dịch gần đây.",
+      "query": "-- Tìm nhân viên không có giao dịch nào trong 30 ngày gần nhất.\n-- Bước 1: LEFT JOIN từ bảng employees đến bảng sales.\n-- Điều này đảm bảo tất cả nhân viên đều được hiển thị, ngay cả khi họ không có giao dịch nào.\nSELECT \n    e.name,\n    e.department_id,\n    e.salary\nFROM \n    employees e\nLEFT JOIN \n    sales s ON e.id = s.employee_id\nGROUP BY \n    e.id, e.name, e.department_id, e.salary\n-- Bước 2: Sử dụng HAVING để lọc các nhóm (nhân viên)\n-- có giao dịch gần nhất (MAX(s.sale_date)) đã lâu hơn 30 ngày so với ngày hiện tại (CURDATE()).\n-- COALESCE() được sử dụng để xử lý trường hợp nhân viên chưa bao giờ có giao dịch nào,\n-- khi đó MAX(s.sale_date) sẽ là NULL. COALESCE sẽ thay thế NULL bằng một ngày rất xa trong quá khứ\n-- để đảm bảo điều kiện DATEDIFF() luôn đúng.\nHAVING \n    COALESCE(MAX(s.sale_date), '1900-01-01') < CURDATE() - INTERVAL 30 DAY;"
+    },
+    {
+      "name": "Phân loại nhân viên dựa trên mức lương so với trung bình của phòng ban",
+      "description": "Sử dụng Window Function AVG() OVER() để tính mức lương trung bình của từng phòng ban, sau đó dùng CASE statement để phân loại từng nhân viên.",
+      "query": "-- Phân loại nhân viên dựa trên mức lương của họ so với mức lương trung bình của phòng ban.\nSELECT \n    e.name,\n    d.name AS department_name,\n    e.salary,\n    -- Sử dụng CASE statement để tạo một phân loại mới.\n    -- Mức lương của từng nhân viên được so sánh với mức lương trung bình của phòng ban.\n    CASE\n        -- AVG(e.salary) OVER (PARTITION BY e.department_id) tính mức lương trung bình của mỗi phòng ban.\n        -- Đây là một Window Function, giúp chúng ta tính toán giá trị tổng hợp (AVG) mà không làm mất các dòng dữ liệu chi tiết.\n        WHEN e.salary > AVG(e.salary) OVER (PARTITION BY e.department_id) THEN 'Above Average'\n        WHEN e.salary < AVG(e.salary) OVER (PARTITION BY e.department_id) THEN 'Below Average'\n        ELSE 'Average'\n    END AS salary_category\nFROM \n    employees e\nJOIN \n    departments d ON e.department_id = d.id;"
+    }
+  ],
+  "queries_optimization": [
+    {
+      "name": "Query 1: Top 3 lương cao nhất mỗi phòng ban (Correlated Subquery)",
+      "description": "Đây là cách tiếp cận cổ điển nhưng kém hiệu quả nhất, sử dụng một subquery phụ thuộc vào truy vấn chính. Subquery này sẽ chạy lại cho mỗi dòng của bảng chính, gây tốn tài nguyên trên dữ liệu lớn.",
+      "query": "-- Sử dụng Correlated Subquery để tìm 3 nhân viên có lương cao nhất.\n-- Subquery bên trong sẽ đếm số lượng nhân viên trong cùng phòng ban\n-- có mức lương cao hơn hoặc bằng nhân viên hiện tại.\n-- Nếu số lượng đó nhỏ hơn 3, nhân viên hiện tại sẽ được chọn.\nSELECT\n\te1.name,\n\te1.salary,\n\td.name AS department_name\nFROM\n\temployees e1\nJOIN\n\tdepartments d ON e1.department_id = d.id\nWHERE\n\t3 > (SELECT\n\t\tCOUNT(DISTINCT e2.salary)\n\tFROM\n\t\temployees e2\n\tWHERE\n\t\te2.department_id = e1.department_id\n\t\tAND e2.salary > e1.salary\n\t);"
+    },
+    {
+      "name": "Query 2: Top 3 lương cao nhất mỗi phòng ban (Self-JOIN)",
+      "description": "Một cách tiếp cận cũ khác sử dụng Self-JOIN. Đây là một cải tiến nhỏ so với subquery nhưng vẫn phức tạp và khó đọc. Hiệu suất cũng không cao trên dữ liệu lớn.",
+      "query": "-- Sử dụng kỹ thuật Self-JOIN để so sánh mỗi nhân viên với những người khác\n-- trong cùng phòng ban có mức lương cao hơn.\n-- Sau đó, GROUP BY và COUNT() để lọc ra những nhân viên nằm trong top 3.\nSELECT\n\te1.name,\n\te1.salary,\n\td.name AS department_name\nFROM\n\temployees e1\nJOIN\n\tdepartments d ON e1.department_id = d.id\nLEFT JOIN\n\temployees e2 ON e1.department_id = e2.department_id AND e1.salary < e2.salary\nGROUP BY\n\te1.id, e1.name, e1.salary, d.name\nHAVING\n\tCOUNT(DISTINCT e2.salary) < 3\nORDER BY\n\td.name, e1.salary DESC;"
+    },
+    {
+      "name": "Query 3: Top 3 lương cao nhất mỗi phòng ban (Window Function: RANK())",
+      "description": "Đây là cách hiện đại và được khuyến nghị nhất. Sử dụng Window Function giúp truy vấn hiệu quả và dễ đọc hơn rất nhiều. RANK() sẽ xếp hạng các nhân viên và bỏ qua các số thứ tự nếu có các giá trị bằng nhau.",
+      "query": "-- Cách hiện đại và hiệu quả nhất dùng Window Function RANK() trong một CTE (Common Table Expression).\n-- CTE giúp truy vấn dễ đọc hơn bằng cách tạo một tập kết quả tạm thời có tên.\nWITH RankedEmployees AS (\n\tSELECT\n\t\te.name,\n\t\te.salary,\n\t\td.name AS department_name,\n\t\t-- RANK() xếp hạng nhân viên theo lương trong từng phòng ban.\n\t\t-- PARTITION BY chia dữ liệu thành các nhóm theo department_id.\n\t\t-- ORDER BY sắp xếp các dòng trong mỗi nhóm theo salary DESC.\n\t\tRANK() OVER (PARTITION BY e.department_id ORDER BY e.salary DESC) as rnk\n\tFROM\n\t\temployees e\n\tJOIN\n\t\tdepartments d ON e.department_id = d.id\n)\n-- Truy vấn chính sẽ chọn ra các nhân viên có thứ hạng <= 3 từ CTE.\nSELECT\n\tname,\n\tsalary,\n\tdepartment_name\nFROM\n\tRankedEmployees\nWHERE\n\trnk <= 3\nORDER BY\n\tdepartment_name, salary DESC;"
+    },
+    {
+      "name": "Query 4: Top 3 lương cao nhất mỗi phòng ban (Window Function: DENSE_RANK())",
+      "description": "Một biến thể của Query 3, sử dụng DENSE_RANK(). Chức năng này tương tự RANK() nhưng sẽ không bỏ qua các số thứ tự khi có các giá trị bằng nhau, phù hợp cho nhiều trường hợp phân tích hơn.",
+      "query": "-- Biến thể của cách trên, dùng DENSE_RANK() thay vì RANK().\n-- DENSE_RANK() sẽ không bỏ qua các số thứ tự khi có các giá trị bằng nhau.\nWITH RankedEmployees AS (\n\tSELECT\n\t\te.name,\n\t\te.salary,\n\t\td.name AS department_name,\n\t\t-- DENSE_RANK() xếp hạng nhân viên, không bỏ qua các số thứ tự.\n\t\tDENSE_RANK() OVER (PARTITION BY e.department_id ORDER BY e.salary DESC) as rnk\n\tFROM\n\t\temployees e\n\tJOIN\n\t\tdepartments d ON e.department_id = d.id\n)\n-- Truy vấn chính sẽ chọn ra các nhân viên có thứ hạng <= 3.\nSELECT\n\tname,\n\tsalary,\n\tdepartment_name\nFROM\n\tRankedEmployees\nWHERE\n\trnk <= 3\nORDER BY\n\tdepartment_name, salary DESC;"
+    },
+    {
+      "name": "Query 5: Top 3 lương cao nhất mỗi phòng ban (Với JSON output)",
+      "description": "Đây là một cách tiếp cận nâng cao hơn, kết hợp Window Function và các hàm JSON để nhóm dữ liệu thành một định dạng JSON duy nhất. Rất hữu ích cho việc tạo API hoặc xử lý dữ liệu phức tạp trên tầng ứng dụng.",
+      "query": "-- Kết hợp Window Function với hàm JSON để nhóm dữ liệu thành một định dạng JSON duy nhất.\n-- Rất hữu ích khi bạn muốn trả về dữ liệu có cấu trúc từ database mà không cần xử lý thêm ở tầng ứng dụng.\nWITH RankedEmployees AS (\n\tSELECT\n\t\te.name,\n\t\te.salary,\n\t\td.name AS department_name,\n\t\tROW_NUMBER() OVER (PARTITION BY e.department_id ORDER BY e.salary DESC) as rnk\n\tFROM\n\t\temployees e\n\tJOIN\n\t\tdepartments d ON e.department_id = d.id\n)\nSELECT\n\tdepartment_name,\n\t-- Sử dụng JSON_ARRAYAGG để tổng hợp các nhân viên vào một mảng JSON.\n\tJSON_ARRAYAGG(\n\t\tJSON_OBJECT('name', name, 'salary', salary)\n\t) AS top_employees\nFROM\n\tRankedEmployees\nWHERE\n\trnk <= 3\nGROUP BY\n\tdepartment_name\nORDER BY\n\tdepartment_name;"
+    }
+  ]
+}

package/es/assets/css/main.scss

@@ -1,6 +1,8 @@
+@use '../../components';
+
 :root {
   --primary-color: #005fb8;
   --text-base-color: #222222;
+  --antsomi-box-shadow-secondary: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
+    0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
 }
-
-

package/es/components/atoms/App/App.d.ts

@@ -0,0 +1,7 @@
+import { type AppProps as AntdAppProps } from 'antd';
+type AppProps = AntdAppProps;
+declare const App: {
+    (props: AppProps): import("react/jsx-runtime").JSX.Element;
+    useApp: () => import("antd/es/app/context").useAppProps;
+};
+export { App, type AppProps };

package/es/components/atoms/App/App.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { App as AntdApp } from 'antd';
+const App = (props) => (_jsx(AntdApp, { notification: { placement: 'bottomLeft', maxCount: 3 }, ...props }));
+App.useApp = AntdApp.useApp;
+export { App };

package/es/components/atoms/App/index.d.ts

@@ -0,0 +1 @@
+export * from './App';

package/es/components/atoms/App/index.js

@@ -0,0 +1 @@
+export * from './App';

package/es/components/atoms/Eyedropper/Eyedropper.d.ts

@@ -0,0 +1,2 @@
+import { EyedropperProps } from './types';
+export declare const Eyedropper: (props: EyedropperProps) => import("react/jsx-runtime").JSX.Element;

package/es/components/atoms/Eyedropper/Eyedropper.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Typography, message } from 'antd';
+import { BgColorsOutlined } from '@ant-design/icons'; // Icon hình giọt nước
+import { ColorSwatch, StyledButton, StyledColorTag, StyledEyedropperContainer } from './styled';
+import tinycolor from 'tinycolor2';
+import clsx from 'clsx';
+const { Text } = Typography;
+export const Eyedropper = (props) => {
+    const { defaultColor, onColorPick, className } = props;
+    const [pickedColor, setPickedColor] = useState(defaultColor);
+    const [isLoading, setIsLoading] = useState(false);
+    const apiSupported = 'EyeDropper' in window;
+    // Cập nhật màu mặc định nếu prop thay đổi
+    useEffect(() => {
+        setPickedColor(defaultColor);
+    }, [defaultColor]);
+    const handlePickColor = async () => {
+        if (!apiSupported) {
+            message.error('Trình duyệt của bạn không hỗ trợ EyeDropper API.');
+            return;
+        }
+        setIsLoading(true);
+        try {
+            const eyeDropper = new window.EyeDropper();
+            const { sRGBHex } = await eyeDropper.open();
+            setPickedColor(sRGBHex);
+            message.success(`Đã chọn màu: ${sRGBHex}`);
+            onColorPick?.(sRGBHex);
+        }
+        catch (e) {
+            if (e instanceof Error && e.name === 'AbortError') {
+                message.info('Người dùng đã hủy chọn màu.');
+            }
+            else if (e instanceof Error) {
+                message.error(`Đã xảy ra lỗi khi chọn màu: ${e.message}`);
+            }
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    const isCurrentColorLight = tinycolor(pickedColor).isLight();
+    return (_jsxs(StyledEyedropperContainer, { className: className, children: [_jsxs(Typography.Title, { level: 4, children: [_jsx(BgColorsOutlined, {}), " C\u00F4ng c\u1EE5 tr\u00EDch xu\u1EA5t m\u00E0u"] }), _jsx(Text, { type: "secondary", children: "B\u1EA5m n\u00FAt b\u00EAn d\u01B0\u1EDBi \u0111\u1EC3 k\u00EDch ho\u1EA1t c\u00F4ng c\u1EE5 Eyedropper c\u1EE7a tr\u00ECnh duy\u1EC7t v\u00E0 ch\u1ECDn m\u00E0u t\u1EEB b\u1EA5t k\u1EF3 \u0111\u00E2u tr\u00EAn m\u00E0n h\u00ECnh." }), _jsx(StyledButton, { type: "primary", icon: _jsx(BgColorsOutlined, {}), onClick: handlePickColor, loading: isLoading, disabled: isLoading || !apiSupported, size: "large", children: "Ch\u1ECDn M\u00E0u" }), pickedColor && (_jsxs("div", { style: {
+                    marginTop: '20px',
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    gap: '10px',
+                }, children: [_jsx(Text, { children: "M\u00E0u \u0111\u00E3 ch\u1ECDn:" }), _jsx(StyledColorTag, { color: pickedColor, className: clsx({
+                            'is-lightcolor': isCurrentColorLight,
+                        }), children: pickedColor }), _jsx(ColorSwatch, { "$color": pickedColor })] })), !apiSupported && (_jsx(Text, { type: "danger", style: { marginTop: '15px', display: 'block' }, children: "Tr\u00ECnh duy\u1EC7t hi\u1EC7n t\u1EA1i kh\u00F4ng h\u1ED7 tr\u1EE3 EyeDropper API. Vui l\u00F2ng s\u1EED d\u1EE5ng Chrome, Edge ho\u1EB7c c\u00E1c tr\u00ECnh duy\u1EC7t d\u1EF1a tr\u00EAn Chromium." }))] }));
+};

package/es/components/atoms/Eyedropper/index.js

@@ -0,0 +1 @@
+"use strict";

package/es/components/atoms/Eyedropper/styled.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const StyledEyedropperContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<HTMLElement>> & {
+    Group: import("react").FC<import("antd/es/button").ButtonGroupProps>;
+}, any, {}, never>;
+export declare const StyledColorTag: import("styled-components").StyledComponent<import("antd").TagType, any, {}, never>;
+export declare const ColorSwatch: import("styled-components").StyledComponent<"div", any, {
+    $color: string;
+}, never>;

package/es/components/atoms/Eyedropper/styled.js

@@ -0,0 +1,45 @@
+import { Button, Tag } from 'antd';
+import styled from 'styled-components';
+export const StyledEyedropperContainer = styled.div `
+  padding: 20px;
+  border: 1px solid #e8e8e8;
+  border-radius: 8px;
+  max-width: 450px;
+  margin: 20px auto;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
+  text-align: center; /* Căn giữa nội dung */
+
+  h4 {
+    margin-bottom: 15px;
+    color: #333;
+    display: flex;
+    align-items: center;
+    justify-content: center; /* Căn giữa icon và tiêu đề */
+    gap: 8px; /* Khoảng cách giữa icon và chữ */
+  }
+`;
+export const StyledButton = styled(Button) `
+  margin-top: 20px;
+  width: auto; /* Để nút không bị giãn full chiều rộng */
+`;
+export const StyledColorTag = styled(Tag) `
+  padding: 4px 8px;
+  font-size: 1em;
+  font-weight: bold;
+  min-width: 100px;
+  text-align: center;
+  border: none;
+  color: white;
+
+  &.is-lightcolor {
+    border: 1px solid #d9d9d9;
+    color: #333;
+  }
+`;
+export const ColorSwatch = styled.div `
+  width: 30px;
+  height: 30px;
+  background-color: ${props => props.$color || 'transparent'}; /* Nhận prop $color */
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+`;

package/es/components/atoms/Eyedropper/types.d.ts

@@ -0,0 +1,5 @@
+export type EyedropperProps = {
+    defaultColor?: string;
+    onColorPick?: (color: string) => void;
+    className?: string;
+};

package/es/components/atoms/Eyedropper/types.js

@@ -0,0 +1 @@
+export {};

package/es/components/atoms/Input/Input.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="hoist-non-react-statics" />
 import React, { ReactNode } from 'react';
-import { InputProps as AntdInputProps, Input as AntdInput, InputRef } from 'antd';
+import { InputProps as AntdInputProps, InputRef } from 'antd';
 export interface InputProps extends AntdInputProps {
     noborder?: 'true' | 'false' | boolean;
     debounce?: number;
@@ -16,20 +15,15 @@ export interface InputProps extends AntdInputProps {
     disableUndo?: boolean;
     withWrapper?: boolean;
 }
-export declare const Input: string & import("styled-components").StyledComponentBase<React.ForwardRefExoticComponent<AntdInputProps & React.RefAttributes<InputRef>> & {
-    Group: React.FC<import("antd/es/input").GroupProps>;
-    Search: React.ForwardRefExoticComponent<import("antd/es/input").SearchProps & React.RefAttributes<InputRef>>;
-    TextArea: React.ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & React.RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>;
-    Password: React.ForwardRefExoticComponent<import("antd/es/input").PasswordProps & React.RefAttributes<InputRef>>;
-}, any, InputProps, never> & import("hoist-non-react-statics").NonReactStatics<React.ForwardRefExoticComponent<AntdInputProps & React.RefAttributes<InputRef>> & {
-    Group: React.FC<import("antd/es/input").GroupProps>;
-    Search: React.ForwardRefExoticComponent<import("antd/es/input").SearchProps & React.RefAttributes<InputRef>>;
-    TextArea: React.ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & React.RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>;
-    Password: React.ForwardRefExoticComponent<import("antd/es/input").PasswordProps & React.RefAttributes<InputRef>>;
-}, {}> & {
-    DefaultInput: typeof AntdInput;
-    CustomSearch: typeof SearchInput;
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputRef>> & {
+    readonly DefaultInput: React.ForwardRefExoticComponent<AntdInputProps & React.RefAttributes<InputRef>> & {
+        Group: React.FC<import("antd/es/input").GroupProps>;
+        Search: React.ForwardRefExoticComponent<import("antd/es/input").SearchProps & React.RefAttributes<InputRef>>;
+        TextArea: React.ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & React.RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>;
+        Password: React.ForwardRefExoticComponent<import("antd/es/input").PasswordProps & React.RefAttributes<InputRef>>;
+    };
+    readonly CustomSearch: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputRef>>;
+    readonly TextArea: React.ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & React.RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>;
+    readonly Password: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputRef>>;
 };
-declare const SearchInput: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputRef>>;
 export declare const TextArea: React.ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & React.RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>;
-export {};

package/es/components/atoms/Input/Input.js

@@ -17,7 +17,7 @@ import { PreviewVisibilityEyeIcon, VisibilityOffEyeIcon } from '../../icons';
 const PATH = '@antscorp/antsomi-ui/es/components/atoms/Input/Input.tsx';
 const OriginInput = React.forwardRef((props, ref) => {
     // Props
-    const { withWrapper, debounce, errorArchive, required, labelColor, isReverseMask, isHideErrMessage, focused, label, onAfterChange, onChange, errorMsg, ...restProps } = props;
+    const { debounce = 400, isHideErrMessage = false, withWrapper = true, errorArchive, required, labelColor, isReverseMask, focused, label, onAfterChange, onChange, errorMsg, ...restProps } = props;
     // State
     const [value, setValue] = useState(props.value);
     const [isFocused, setFocused] = useState(false);
@@ -74,21 +74,20 @@ const OriginInput = React.forwardRef((props, ref) => {
                         setFocused(true);
                     }
                     restProps.onBlur && restProps.onBlur(e);
-                }, onChange: onChangeInput, ...getPreventKeyboardAction(listDisableActions) }), (restProps.status === 'error' || errorArchive || requiredMsg) && !isHideErrMessage ? (_jsx(Text, { color: "#ff4d4f", style: { marginLeft: 8, marginTop: 5 }, children: errorMsg || errorArchive || requiredMsg })) : null] }));
+                }, onChange: onChangeInput, ...getPreventKeyboardAction(listDisableActions, {
+                    onKeydown: restProps.onKeyDown,
+                    onKeyup: restProps.onKeyUp,
+                }) }), (restProps.status === 'error' || errorArchive || requiredMsg) && !isHideErrMessage ? (_jsx(Text, { color: "#ff4d4f", style: { marginLeft: 8, marginTop: 5 }, children: errorMsg || errorArchive || requiredMsg })) : null] }));
     if (!withWrapper)
         return content;
     return _jsx("div", { className: "input__wrapper", children: content });
 });
-OriginInput.defaultProps = {
-    debounce: 400,
-    isHideErrMessage: false,
-    withWrapper: true,
-};
-export const Input = OriginInput;
 const SearchInput = React.forwardRef((props, ref) => (_jsx(OriginInput, { bordered: false, autoFocus: true, suffix: _jsx(Icon, { type: "icon-ants-search-2", size: 24, color: globalToken?.bw8 }), ...props, ref: ref, className: `${props.className} antsomi-search-input` })));
 const PasswordInput = React.forwardRef((props, ref) => (_jsx(AntdInput.Password, { iconRender: visible => visible ? (_jsx(StyledIconWrapper, { type: "text", children: _jsx(PreviewVisibilityEyeIcon, {}) })) : (_jsx(StyledIconWrapper, { type: "text", children: _jsx(VisibilityOffEyeIcon, {}) })), ...props, ref: ref })));
-Input.CustomSearch = SearchInput;
-Input.TextArea = StyledInput.TextArea;
-Input.DefaultInput = AntdInput;
-Input.Password = PasswordInput;
+export const Input = Object.assign(OriginInput, {
+    DefaultInput: AntdInput,
+    CustomSearch: SearchInput,
+    TextArea: StyledInput.TextArea,
+    Password: PasswordInput,
+});
 export const { TextArea } = StyledInput;

package/es/components/atoms/List/List.d.ts

@@ -0,0 +1 @@
+export { List, type ListProps } from 'antd';

package/es/components/atoms/List/List.js

@@ -0,0 +1 @@
+export { List } from 'antd';

package/es/components/atoms/List/index.d.ts

@@ -0,0 +1 @@
+export { List, type ListProps } from './List';

package/es/components/atoms/List/index.js

@@ -0,0 +1 @@
+export { List } from './List';

package/es/components/atoms/NotificationStatus/NotificationStatus.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+type TNotification = {
+    title: string;
+    message?: string;
+    type: 'success' | 'error';
+    timeout?: number;
+};
+declare const useNotificationStatus: () => {
+    contextHolder: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    showNotification: ({ title, message, type, timeout, }: TNotification) => void;
+};
+export default useNotificationStatus;

package/es/components/atoms/NotificationStatus/NotificationStatus.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { notification } from 'antd';
+import { MAP_BY_TYPE, STYLE_NOTIFICATION } from './constants';
+import { Content, Title } from './styled';
+import { Icon } from '../Icon';
+const useNotificationStatus = () => {
+    const [api, contextHolder] = notification.useNotification();
+    const showNotification = ({ title = '', message = '', type = 'success', timeout = 4, }) => {
+        const info = MAP_BY_TYPE[type];
+        return api[type]({
+            message: _jsx(Title, { color: info.color, children: title }),
+            description: _jsx(Content, { children: message }),
+            duration: timeout,
+            style: {
+                ...STYLE_NOTIFICATION,
+                borderLeft: `4px solid ${info.color}`,
+            },
+            placement: 'bottomLeft',
+            closeIcon: _jsx(Icon, { size: 14, color: "#595959", type: "icon-ants-remove-slim" }),
+        });
+    };
+    return {
+        contextHolder,
+        showNotification,
+    };
+};
+export default useNotificationStatus;

package/es/components/atoms/NotificationStatus/constants/index.d.ts

@@ -0,0 +1,15 @@
+export declare const MAP_BY_TYPE: {
+    readonly success: {
+        readonly color: "#12B800";
+    };
+    readonly error: {
+        readonly color: "#ef3340";
+    };
+};
+export declare const STYLE_NOTIFICATION: {
+    display: string;
+    alignItems: string;
+    gap: string;
+    padding: string;
+    borderRadius: string;
+};

package/es/components/atoms/NotificationStatus/constants/index.js

@@ -0,0 +1,15 @@
+export const MAP_BY_TYPE = {
+    success: {
+        color: '#12B800',
+    },
+    error: {
+        color: '#ef3340',
+    },
+};
+export const STYLE_NOTIFICATION = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '10px',
+    padding: '15px',
+    borderRadius: '10px',
+};

package/es/components/atoms/NotificationStatus/index.d.ts

@@ -0,0 +1 @@
+export { default as useNotificationStatus } from './NotificationStatus';

package/es/components/atoms/NotificationStatus/index.js

@@ -0,0 +1 @@
+export { default as useNotificationStatus } from './NotificationStatus';

package/es/components/atoms/NotificationStatus/styled.d.ts

@@ -0,0 +1,3 @@
+export declare const Title: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WrapperIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Content: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/atoms/NotificationStatus/styled.js

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+export const Title = styled.div `
+  font-weight: bold;
+  font-size: 14px;
+  line-height: 20px;
+  color: ${props => props.color || '#000'};
+`;
+export const WrapperIcon = styled.div `
+  display: flex;
+  align-items: center;
+`;
+export const Content = styled.div `
+  color: #7f7f7f;
+`;

package/es/components/atoms/Scrollbars/Scrollbars.d.ts

@@ -1,5 +1,4 @@
 import { ScrollbarProps as CustomScrollbarProps } from 'react-custom-scrollbars';
-import React from 'react';
-export interface ScrollbarsProps extends CustomScrollbarProps {
-}
-export declare const Scrollbars: React.FC<ScrollbarsProps>;
+import { FC } from 'react';
+export type ScrollbarsProps = CustomScrollbarProps & {};
+export declare const Scrollbars: FC<ScrollbarsProps>;

package/es/components/atoms/Scrollbars/Scrollbars.js

@@ -40,7 +40,8 @@ export const Scrollbars = forwardRef((props, refProp) => {
             ref.current.thumbVertical.style.height = `${thumbHeight}px`;
             ref.current.thumbVertical.style.transform = `translateY(${thumbVerticalPosition}px)`;
             ref.current.thumbHorizontal.style.width = `${thumbWidth}px`;
-            ref.current.thumbHorizontal.style.transform = `translateX(${thumbHorizontalPosition}px)`;
+            ref.current.thumbHorizontal.style.transform =
+                `translateX(${thumbHorizontalPosition}px)`;
         }
         // Handle show hide track bar
         ref.current.trackVertical.style.visibility =

package/es/components/atoms/SlideBar/SlideBar.js

@@ -270,7 +270,7 @@ export const SlideBar = props => {
                                             if (!disabledDelete) {
                                                 handleDeleteSlide(state.cacheInfoClicked);
                                             }
-                                        }, children: t(translations.delete.title) }) })] }), arrow: false, children: _jsx(Icon, { type: "icon-ants-three-dot-vertical", color: activeId === item.value ? THEME.token?.colorPrimary : THEME.token?.colorText, size: "20px", onClick: (event) => handleClick(event, item), disabled: false }) }))] })) }, item.value));
+                                        }, children: t(translations.delete.title) }) })] }), arrow: false, children: _jsx(Icon, { type: "icon-ants-three-dot-vertical", color: activeId === item.value ? THEME.token?.colorPrimary : THEME.token?.colorText, size: 20, onClick: (event) => handleClick(event, item), disabled: false }) }))] })) }, item.value));
     });
     const renderSliderDragDrop = () => (_jsx(WrapperOverflow, { ref: wrapperOverflowRef, id: "wrapper-overflow", children: _jsx(DragDropContext, { onDragEnd: handleDragEnd, children: _jsx(Droppable, { droppableId: "droppable", direction: "horizontal", children: (providedDroppable, _snapshotDroppable) => (_jsx(MainContent, { ref: providedDroppable.innerRef, ...providedDroppable.droppableProps, children: renderMainContent() })) }) }) }));
     return (_jsxs(ContainerSlideBar, { children: [_jsxs(SliderWrapper, { size: size, isViewMode: isViewMode, className: classNames({ 'slider-wrapper--borderless': borderless }), children: [_jsx(Icon, { type: "icon-ants-angle-left", style: { fontSize: '16px', cursor: 'pointer', color: THEME.token?.colorPrimary }, className: "btn-arrow-left btn-action-slide-template", disabled: state.disabledPrev, onClick: (e) => {

package/es/components/atoms/Tag/Tag.js

@@ -10,7 +10,7 @@ import { CloseIcon } from '../../icons';
 import { Flex } from '../Flex';
 import { Button } from '../Button';
 import { Typography } from '../Typography';
-import { SearchPopover } from '../../molecules';
+import { SearchPopover } from '../../molecules/SearchPopover';
 // Constants
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 import { translate, translations } from '@antscorp/antsomi-ui/es/locales';

package/es/components/atoms/Upload/Upload.d.ts

@@ -0,0 +1,2 @@
+export { Upload } from 'antd';
+export type { UploadProps, UploadFile } from 'antd';

package/es/components/atoms/Upload/Upload.js

@@ -0,0 +1 @@
+export { Upload } from 'antd';

package/es/components/atoms/Upload/index.d.ts

@@ -0,0 +1 @@
+export * from './Upload';

package/es/components/atoms/Upload/index.js

@@ -0,0 +1 @@
+export * from './Upload';

package/es/components/atoms/index.d.ts

@@ -33,6 +33,7 @@ export { ContentEditable } from './ContentEditable';
 export { Image } from './Image';
 export { IconField } from './IconField';
 export { Suspense } from './Suspense';
+export { App } from './App';
 export { default as MobileBrandingBar } from './MobileBrandingBar';
 export { MobileFrameV3 } from './MobileFrameV3';
 export * from './Flex';
@@ -49,7 +50,11 @@ export * from './Popover';
 export * from './Iframe';
 export * from './Avatar';
 export * from './SelectAssociatedTag';
+export * from './List';
+export * from './Upload';
+export * from './NotificationStatus';
 export type { SliderProps } from './Slider';
 export type { PaginationProps } from './Pagination';
 export type { InputDynamicProps } from './InputDynamic';
 export type { ImageProps } from './Image';
+export type { AppProps } from './App';