@esic-lab/data-core-ui 0.0.80 → 0.0.82

package/dist/index.css

@@ -1145,6 +1145,10 @@
   .text-\[20px\] {
     font-size: 20px;
   }
+  .leading-3 {
+    --tw-leading: calc(var(--spacing) * 3);
+    line-height: calc(var(--spacing) * 3);
+  }
   .font-bold {
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
@@ -1643,6 +1647,11 @@
       margin-inline: calc(var(--spacing) * 0);
     }
   }
+  .\[\&_\.ant-collapse-content-box\]\:\!py-\[2px\] {
+    & .ant-collapse-content-box {
+      padding-block: 2px !important;
+    }
+  }
 }
 @layer base {
   *,
@@ -1880,6 +1889,7 @@
 @property --tw-space-y-reverse { syntax: "*"; inherits: false; initial-value: 0; }
 @property --tw-space-x-reverse { syntax: "*"; inherits: false; initial-value: 0; }
 @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }
+@property --tw-leading { syntax: "*"; inherits: false; }
 @property --tw-font-weight { syntax: "*"; inherits: false; }
 @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
 @property --tw-shadow-color { syntax: "*"; inherits: false; }
@@ -1935,6 +1945,7 @@
       --tw-space-y-reverse: 0;
       --tw-space-x-reverse: 0;
       --tw-border-style: solid;
+      --tw-leading: initial;
       --tw-font-weight: initial;
       --tw-shadow: 0 0 #0000;
       --tw-shadow-color: initial;

package/dist/index.d.mts

@@ -598,6 +598,7 @@ interface UserData {
     id: string;
     name: string;
     profile: string;
+    institute?: string;
 }
 interface ProfileSelectProp {
     allUser: UserData[];

package/dist/index.d.ts

@@ -598,6 +598,7 @@ interface UserData {
     id: string;
     name: string;
     profile: string;
+    institute?: string;
 }
 interface ProfileSelectProp {
     allUser: UserData[];

package/dist/index.js

@@ -4316,12 +4316,29 @@ function ProfileSelect({
   const extraCount = assignUser.length - (maxVisible - 1);
   const normalizedSearch = search.trim().toLowerCase();
   const filteredAssigned = normalizedSearch ? assignUser.filter((u) => u.name.toLowerCase().includes(normalizedSearch)) : assignUser;
-  const filteredUnassigned = normalizedSearch ? userNotAssign.filter(
-    (u) => u.name.toLowerCase().includes(normalizedSearch)
-  ) : userNotAssign;
+  const filteredUnassigned = (0, import_react19.useMemo)(() => {
+    const searchLower = search.trim().toLowerCase();
+    if (!searchLower) return userNotAssign;
+    return userNotAssign.filter(
+      (u) => u.name.toLowerCase().includes(searchLower)
+    );
+  }, [userNotAssign, search]);
   const isSearching = normalizedSearch.length > 0;
   const noResult = filteredAssigned.length === 0 && filteredUnassigned.length === 0;
   const noUserOption = allUser.length === 0 && !isSearching;
+  const groupedUsers = (0, import_react19.useMemo)(() => {
+    return filteredUnassigned.reduce(
+      (acc, user) => {
+        const groupName = user.institute || "\u0E44\u0E21\u0E48\u0E23\u0E30\u0E1A\u0E38\u0E2B\u0E19\u0E48\u0E27\u0E22\u0E07\u0E32\u0E19";
+        if (!acc[groupName]) {
+          acc[groupName] = [];
+        }
+        acc[groupName].push(user);
+        return acc;
+      },
+      {}
+    );
+  }, [filteredUnassigned]);
   return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { ref: containerRef, className: "relative body-1", children: [
     mode === "icon" ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       import_icons_react14.IconUsers,
@@ -4459,7 +4476,10 @@ function ProfileSelect({
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "ml-2", children: user.name })
+                    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex flex-col justify-start items-start", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "ml-2 body-3", children: user.name }),
+                      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "ml-2 body-3 text-gray-400", children: user.institute })
+                    ] })
                   ]
                 },
                 user.id
@@ -4467,30 +4487,79 @@ function ProfileSelect({
             ] }),
             filteredUnassigned.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
               /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "mt-2", children: "\u0E1C\u0E39\u0E49\u0E04\u0E19" }),
-              filteredUnassigned.map((user) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
-                "button",
-                {
-                  className: "flex items-center my-1 hover:bg-gray-100 w-full p-1 rounded",
-                  onClick: () => onUpdateAssignUser(user),
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-                      "img",
-                      {
-                        src: user.profile,
-                        alt: user.name,
-                        style: {
-                          width: avatarSize,
-                          height: avatarSize,
-                          borderRadius: "50%"
-                        },
-                        className: "border"
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "ml-2", children: user.name })
-                  ]
-                },
-                user.id
-              ))
+              isSearching ? (
+                // === โหมดค้นหา: แสดงเป็น List ธรรมดา ไม่มี Collapse ===
+                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "flex flex-col gap-1", children: filteredUnassigned.map((user) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+                  "button",
+                  {
+                    className: "flex items-center hover:bg-gray-100 w-full p-1 rounded transition-colors text-left",
+                    onClick: () => onUpdateAssignUser(user, "add"),
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                        "img",
+                        {
+                          src: user.profile,
+                          style: {
+                            width: avatarSize,
+                            height: avatarSize,
+                            borderRadius: "50%"
+                          },
+                          className: "border"
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex flex-col ml-2", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "body-3", children: user.name }),
+                        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "body-3 text-gray-400 leading-3", children: user.institute })
+                      ] })
+                    ]
+                  },
+                  user.id
+                )) })
+              ) : (
+                // === โหมดปกติ: แสดงเป็น Group ด้วย Collapse ===
+                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                  import_antd24.Collapse,
+                  {
+                    ghost: true,
+                    size: "small",
+                    className: "[&_.ant-collapse-content-box]:!py-[2px]",
+                    items: Object.entries(groupedUsers).map(
+                      ([company, users], index) => ({
+                        key: index.toString(),
+                        label: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("span", { className: "font-semibold body-3", children: [
+                          company,
+                          " (",
+                          users.length,
+                          ")"
+                        ] }),
+                        children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "flex flex-col gap-1 pl-2", children: users.map((user) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+                          "button",
+                          {
+                            className: "flex items-center hover:bg-gray-100 w-full p-1 rounded text-left",
+                            onClick: () => onUpdateAssignUser(user, "add"),
+                            children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                                "img",
+                                {
+                                  src: user.profile,
+                                  style: {
+                                    width: avatarSize,
+                                    height: avatarSize,
+                                    borderRadius: "50%"
+                                  },
+                                  className: "border"
+                                }
+                              ),
+                              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "ml-2 body-3", children: user.name })
+                            ]
+                          },
+                          user.id
+                        )) })
+                      })
+                    )
+                  }
+                )
+              )
             ] })
           ] }) })
         ]
@@ -5034,16 +5103,25 @@ var getAdjustedEnd = (d) => {
   }
   return (0, import_date_fns3.startOfDay)(/* @__PURE__ */ new Date());
 };
+var getMonthByQuarter = (quarter) => {
+  if (quarter === 1) {
+    return "\u0E21.\u0E04. - \u0E21\u0E35.\u0E04.";
+  } else if (quarter === 2) {
+    return "\u0E40\u0E21.\u0E22. - \u0E21\u0E34.\u0E22.";
+  } else if (quarter === 3) {
+    return "\u0E01.\u0E04. - \u0E01.\u0E22.";
+  } else {
+    return "\u0E15.\u0E04. - \u0E18.\u0E04.";
+  }
+};
 var getStatusColor = (status2) => STATUS_META[status2]?.color ?? STATUS_META.IN_PROGRESS.color;
 var getStatusLabel = (status2) => STATUS_META[status2]?.label ?? STATUS_META.IN_PROGRESS.label;
+var toBuddhistDate = (d) => new Date(d.getFullYear() + 543, d.getMonth(), d.getDate());
 var ProjectRow = ({ element, barHeight, barSpacing, mode }) => {
-  const safeStartDate = element.startDate instanceof Date ? element.startDate : null;
   const safeEndDate = element.endDate instanceof Date ? element.endDate : null;
-  const safeStatus = element.status || "pending";
-  const statusColor = getStatusColor(safeStatus);
+  const safeStatus = element.status || "IN_PROGRESS";
   const statusLabel = getStatusLabel(safeStatus);
   const statusIcon = STATUS_META[safeStatus]?.icon;
-  const toBuddhistDate = (d) => new Date(d.getFullYear() + 543, d.getMonth(), d.getDate());
   return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
     "div",
     {
@@ -5161,7 +5239,7 @@ var GanttChart = ({
         (0, import_date_fns3.startOfDay)((0, import_date_fns3.addDays)(domain[1], 1))
       ) || []
     });
-    const renderYearHeaders = (layer1, layer2, newXScale, buckets) => {
+    const renderYearHeaders = (layer1, layer2, layer3, newXScale, buckets) => {
       layer1.selectAll(".year-bg").data(buckets.uniqueYears).enter().append("rect").attr("class", "year-bg").attr("x", (d) => newXScale(d)).attr("y", -totalHeaderHeight).attr("width", (d) => {
         const nextYearStart = (0, import_date_fns3.startOfDay)(new Date(d.getFullYear() + 1, 0, 1));
         return newXScale(nextYearStart) - newXScale(d);
@@ -5188,9 +5266,15 @@ var GanttChart = ({
         );
         return newXScale(d) + (newXScale(nextQuarter) - newXScale(d)) / 2;
       }).attr("y", -headersGroupLayer2Height / 2).attr("dy", "0.35em").attr("text-anchor", "middle").style("font-size", `${HEADER_FONTS.layer2 + 3}px`).style("font-weight", "regular").style("fill", "#000").text((d) => `\u0E44\u0E15\u0E23\u0E21\u0E32\u0E2A ${Math.floor(d.getMonth() / 3) + 1}`);
+      layer3.selectAll(".quarter-label").data(quarters2).enter().append("text").attr("class", "quarter-label").attr("x", (d) => {
+        const nextQuarter = (0, import_date_fns3.startOfDay)(
+          new Date(d.getFullYear(), d.getMonth() + 3, 1)
+        );
+        return newXScale(d) + (newXScale(nextQuarter) - newXScale(d)) - 30;
+      }).attr("y", -headersGroupLayer2Height / 2 + 10).attr("dy", "0.35em").attr("text-anchor", "middle").style("font-size", `${HEADER_FONTS.layer2}px`).style("font-weight", "light").style("fill", "#b9b9b9").text((d) => `${getMonthByQuarter(Math.floor(d.getMonth() / 3) + 1)}`);
     };
-    const drawHeaders = (layer1, layer2, newXScale, buckets) => {
-      return renderYearHeaders(layer1, layer2, newXScale, buckets);
+    const drawHeaders = (layer1, layer2, layer3, newXScale, buckets) => {
+      return renderYearHeaders(layer1, layer2, layer3, newXScale, buckets);
     };
     const getGridlineData = (mode2, buckets, domain) => {
       if (mode2 === "year") return buckets.uniqueMonths;
@@ -5257,9 +5341,11 @@ var GanttChart = ({
       const timeBuckets = buildTimeBuckets(newXScale.domain());
       const headersGroupLayer1 = chartGroup.append("g");
       const headersGroupLayer2 = chartGroup.append("g");
+      const headersGroupLayer3 = chartGroup.append("g");
       drawHeaders(
         headersGroupLayer1,
         headersGroupLayer2,
+        headersGroupLayer3,
         newXScale,
         timeBuckets
       );
@@ -5463,14 +5549,14 @@ function CardKPI({
         /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "border-b", children: [
           /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "body-2 ", children: "\u0E01\u0E25\u0E38\u0E48\u0E21\u0E40\u0E1B\u0E49\u0E32\u0E2B\u0E21\u0E32\u0E22" }),
           indicator.filter((ind) => ind.indicatorType === "TARGET").map((item, index) => {
-            if (index === 2) return;
+            if (index >= 2) return;
             return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(KPIRow, { item });
           })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "pt-2", children: [
           /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "body-2 ", children: "\u0E15\u0E31\u0E27\u0E0A\u0E35\u0E49\u0E27\u0E31\u0E14\u0E1C\u0E25\u0E1C\u0E25\u0E34\u0E15" }),
           indicator.filter((ind) => ind.indicatorType === "OUTPUT").map((item, index) => {
-            if (index === 2) return;
+            if (index >= 2) return;
             return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(KPIRow, { item });
           })
         ] }),

package/dist/index.mjs

@@ -4193,9 +4193,9 @@ var FilterPopUp = (filter) => {
 };
 
 // src/ProfileSelect/ProfileSelect/ProfileSelect.tsx
-import { useEffect as useEffect7, useRef as useRef6, useState as useState17 } from "react";
+import { useEffect as useEffect7, useMemo as useMemo2, useRef as useRef6, useState as useState17 } from "react";
 import { IconSearch, IconUsers, IconX as IconX4 } from "@tabler/icons-react";
-import { Input as Input5 } from "antd";
+import { Collapse, Input as Input5 } from "antd";
 import { Fragment as Fragment8, jsx as jsx43, jsxs as jsxs34 } from "react/jsx-runtime";
 function ProfileSelect({
   allUser,
@@ -4250,12 +4250,29 @@ function ProfileSelect({
   const extraCount = assignUser.length - (maxVisible - 1);
   const normalizedSearch = search.trim().toLowerCase();
   const filteredAssigned = normalizedSearch ? assignUser.filter((u) => u.name.toLowerCase().includes(normalizedSearch)) : assignUser;
-  const filteredUnassigned = normalizedSearch ? userNotAssign.filter(
-    (u) => u.name.toLowerCase().includes(normalizedSearch)
-  ) : userNotAssign;
+  const filteredUnassigned = useMemo2(() => {
+    const searchLower = search.trim().toLowerCase();
+    if (!searchLower) return userNotAssign;
+    return userNotAssign.filter(
+      (u) => u.name.toLowerCase().includes(searchLower)
+    );
+  }, [userNotAssign, search]);
   const isSearching = normalizedSearch.length > 0;
   const noResult = filteredAssigned.length === 0 && filteredUnassigned.length === 0;
   const noUserOption = allUser.length === 0 && !isSearching;
+  const groupedUsers = useMemo2(() => {
+    return filteredUnassigned.reduce(
+      (acc, user) => {
+        const groupName = user.institute || "\u0E44\u0E21\u0E48\u0E23\u0E30\u0E1A\u0E38\u0E2B\u0E19\u0E48\u0E27\u0E22\u0E07\u0E32\u0E19";
+        if (!acc[groupName]) {
+          acc[groupName] = [];
+        }
+        acc[groupName].push(user);
+        return acc;
+      },
+      {}
+    );
+  }, [filteredUnassigned]);
   return /* @__PURE__ */ jsxs34("div", { ref: containerRef, className: "relative body-1", children: [
     mode === "icon" ? /* @__PURE__ */ jsx43("div", { children: /* @__PURE__ */ jsx43(
       IconUsers,
@@ -4393,7 +4410,10 @@ function ProfileSelect({
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ jsx43("span", { className: "ml-2", children: user.name })
+                    /* @__PURE__ */ jsxs34("div", { className: "flex flex-col justify-start items-start", children: [
+                      /* @__PURE__ */ jsx43("span", { className: "ml-2 body-3", children: user.name }),
+                      /* @__PURE__ */ jsx43("span", { className: "ml-2 body-3 text-gray-400", children: user.institute })
+                    ] })
                   ]
                 },
                 user.id
@@ -4401,30 +4421,79 @@ function ProfileSelect({
             ] }),
             filteredUnassigned.length > 0 && /* @__PURE__ */ jsxs34(Fragment8, { children: [
               /* @__PURE__ */ jsx43("div", { className: "mt-2", children: "\u0E1C\u0E39\u0E49\u0E04\u0E19" }),
-              filteredUnassigned.map((user) => /* @__PURE__ */ jsxs34(
-                "button",
-                {
-                  className: "flex items-center my-1 hover:bg-gray-100 w-full p-1 rounded",
-                  onClick: () => onUpdateAssignUser(user),
-                  children: [
-                    /* @__PURE__ */ jsx43(
-                      "img",
-                      {
-                        src: user.profile,
-                        alt: user.name,
-                        style: {
-                          width: avatarSize,
-                          height: avatarSize,
-                          borderRadius: "50%"
-                        },
-                        className: "border"
-                      }
-                    ),
-                    /* @__PURE__ */ jsx43("span", { className: "ml-2", children: user.name })
-                  ]
-                },
-                user.id
-              ))
+              isSearching ? (
+                // === โหมดค้นหา: แสดงเป็น List ธรรมดา ไม่มี Collapse ===
+                /* @__PURE__ */ jsx43("div", { className: "flex flex-col gap-1", children: filteredUnassigned.map((user) => /* @__PURE__ */ jsxs34(
+                  "button",
+                  {
+                    className: "flex items-center hover:bg-gray-100 w-full p-1 rounded transition-colors text-left",
+                    onClick: () => onUpdateAssignUser(user, "add"),
+                    children: [
+                      /* @__PURE__ */ jsx43(
+                        "img",
+                        {
+                          src: user.profile,
+                          style: {
+                            width: avatarSize,
+                            height: avatarSize,
+                            borderRadius: "50%"
+                          },
+                          className: "border"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs34("div", { className: "flex flex-col ml-2", children: [
+                        /* @__PURE__ */ jsx43("span", { className: "body-3", children: user.name }),
+                        /* @__PURE__ */ jsx43("span", { className: "body-3 text-gray-400 leading-3", children: user.institute })
+                      ] })
+                    ]
+                  },
+                  user.id
+                )) })
+              ) : (
+                // === โหมดปกติ: แสดงเป็น Group ด้วย Collapse ===
+                /* @__PURE__ */ jsx43(
+                  Collapse,
+                  {
+                    ghost: true,
+                    size: "small",
+                    className: "[&_.ant-collapse-content-box]:!py-[2px]",
+                    items: Object.entries(groupedUsers).map(
+                      ([company, users], index) => ({
+                        key: index.toString(),
+                        label: /* @__PURE__ */ jsxs34("span", { className: "font-semibold body-3", children: [
+                          company,
+                          " (",
+                          users.length,
+                          ")"
+                        ] }),
+                        children: /* @__PURE__ */ jsx43("div", { className: "flex flex-col gap-1 pl-2", children: users.map((user) => /* @__PURE__ */ jsxs34(
+                          "button",
+                          {
+                            className: "flex items-center hover:bg-gray-100 w-full p-1 rounded text-left",
+                            onClick: () => onUpdateAssignUser(user, "add"),
+                            children: [
+                              /* @__PURE__ */ jsx43(
+                                "img",
+                                {
+                                  src: user.profile,
+                                  style: {
+                                    width: avatarSize,
+                                    height: avatarSize,
+                                    borderRadius: "50%"
+                                  },
+                                  className: "border"
+                                }
+                              ),
+                              /* @__PURE__ */ jsx43("span", { className: "ml-2 body-3", children: user.name })
+                            ]
+                          },
+                          user.id
+                        )) })
+                      })
+                    )
+                  }
+                )
+              )
             ] })
           ] }) })
         ]
@@ -4637,7 +4706,7 @@ function TabProject({ tabOption, now, onChange }) {
 }
 
 // src/Chart/BarChart/BarChart.tsx
-import { useEffect as useEffect9, useMemo as useMemo2, useRef as useRef8 } from "react";
+import { useEffect as useEffect9, useMemo as useMemo3, useRef as useRef8 } from "react";
 import * as d3 from "d3";
 import { jsx as jsx46, jsxs as jsxs37 } from "react/jsx-runtime";
 var defaultMargin = { top: 30, right: 200, bottom: 36, left: 50 };
@@ -4697,8 +4766,8 @@ var BarChart = ({
     ro.observe(containerRef.current);
     return () => ro.disconnect();
   }, []);
-  const xDomain = useMemo2(() => data.map((d) => d.x), [data]);
-  const yDomain = useMemo2(() => {
+  const xDomain = useMemo3(() => data.map((d) => d.x), [data]);
+  const yDomain = useMemo3(() => {
     const maxY = d3.max(data, (d) => d.y);
     return [
       0,
@@ -4982,16 +5051,25 @@ var getAdjustedEnd = (d) => {
   }
   return startOfDay(/* @__PURE__ */ new Date());
 };
+var getMonthByQuarter = (quarter) => {
+  if (quarter === 1) {
+    return "\u0E21.\u0E04. - \u0E21\u0E35.\u0E04.";
+  } else if (quarter === 2) {
+    return "\u0E40\u0E21.\u0E22. - \u0E21\u0E34.\u0E22.";
+  } else if (quarter === 3) {
+    return "\u0E01.\u0E04. - \u0E01.\u0E22.";
+  } else {
+    return "\u0E15.\u0E04. - \u0E18.\u0E04.";
+  }
+};
 var getStatusColor = (status2) => STATUS_META[status2]?.color ?? STATUS_META.IN_PROGRESS.color;
 var getStatusLabel = (status2) => STATUS_META[status2]?.label ?? STATUS_META.IN_PROGRESS.label;
+var toBuddhistDate = (d) => new Date(d.getFullYear() + 543, d.getMonth(), d.getDate());
 var ProjectRow = ({ element, barHeight, barSpacing, mode }) => {
-  const safeStartDate = element.startDate instanceof Date ? element.startDate : null;
   const safeEndDate = element.endDate instanceof Date ? element.endDate : null;
-  const safeStatus = element.status || "pending";
-  const statusColor = getStatusColor(safeStatus);
+  const safeStatus = element.status || "IN_PROGRESS";
   const statusLabel = getStatusLabel(safeStatus);
   const statusIcon = STATUS_META[safeStatus]?.icon;
-  const toBuddhistDate = (d) => new Date(d.getFullYear() + 543, d.getMonth(), d.getDate());
   return /* @__PURE__ */ jsxs39(
     "div",
     {
@@ -5109,7 +5187,7 @@ var GanttChart = ({
         startOfDay(addDays(domain[1], 1))
       ) || []
     });
-    const renderYearHeaders = (layer1, layer2, newXScale, buckets) => {
+    const renderYearHeaders = (layer1, layer2, layer3, newXScale, buckets) => {
       layer1.selectAll(".year-bg").data(buckets.uniqueYears).enter().append("rect").attr("class", "year-bg").attr("x", (d) => newXScale(d)).attr("y", -totalHeaderHeight).attr("width", (d) => {
         const nextYearStart = startOfDay(new Date(d.getFullYear() + 1, 0, 1));
         return newXScale(nextYearStart) - newXScale(d);
@@ -5136,9 +5214,15 @@ var GanttChart = ({
         );
         return newXScale(d) + (newXScale(nextQuarter) - newXScale(d)) / 2;
       }).attr("y", -headersGroupLayer2Height / 2).attr("dy", "0.35em").attr("text-anchor", "middle").style("font-size", `${HEADER_FONTS.layer2 + 3}px`).style("font-weight", "regular").style("fill", "#000").text((d) => `\u0E44\u0E15\u0E23\u0E21\u0E32\u0E2A ${Math.floor(d.getMonth() / 3) + 1}`);
+      layer3.selectAll(".quarter-label").data(quarters2).enter().append("text").attr("class", "quarter-label").attr("x", (d) => {
+        const nextQuarter = startOfDay(
+          new Date(d.getFullYear(), d.getMonth() + 3, 1)
+        );
+        return newXScale(d) + (newXScale(nextQuarter) - newXScale(d)) - 30;
+      }).attr("y", -headersGroupLayer2Height / 2 + 10).attr("dy", "0.35em").attr("text-anchor", "middle").style("font-size", `${HEADER_FONTS.layer2}px`).style("font-weight", "light").style("fill", "#b9b9b9").text((d) => `${getMonthByQuarter(Math.floor(d.getMonth() / 3) + 1)}`);
     };
-    const drawHeaders = (layer1, layer2, newXScale, buckets) => {
-      return renderYearHeaders(layer1, layer2, newXScale, buckets);
+    const drawHeaders = (layer1, layer2, layer3, newXScale, buckets) => {
+      return renderYearHeaders(layer1, layer2, layer3, newXScale, buckets);
     };
     const getGridlineData = (mode2, buckets, domain) => {
       if (mode2 === "year") return buckets.uniqueMonths;
@@ -5205,9 +5289,11 @@ var GanttChart = ({
       const timeBuckets = buildTimeBuckets(newXScale.domain());
       const headersGroupLayer1 = chartGroup.append("g");
       const headersGroupLayer2 = chartGroup.append("g");
+      const headersGroupLayer3 = chartGroup.append("g");
       drawHeaders(
         headersGroupLayer1,
         headersGroupLayer2,
+        headersGroupLayer3,
         newXScale,
         timeBuckets
       );
@@ -5411,14 +5497,14 @@ function CardKPI({
         /* @__PURE__ */ jsxs40("div", { className: "border-b", children: [
           /* @__PURE__ */ jsx49("span", { className: "body-2 ", children: "\u0E01\u0E25\u0E38\u0E48\u0E21\u0E40\u0E1B\u0E49\u0E32\u0E2B\u0E21\u0E32\u0E22" }),
           indicator.filter((ind) => ind.indicatorType === "TARGET").map((item, index) => {
-            if (index === 2) return;
+            if (index >= 2) return;
             return /* @__PURE__ */ jsx49(KPIRow, { item });
           })
         ] }),
         /* @__PURE__ */ jsxs40("div", { className: "pt-2", children: [
           /* @__PURE__ */ jsx49("span", { className: "body-2 ", children: "\u0E15\u0E31\u0E27\u0E0A\u0E35\u0E49\u0E27\u0E31\u0E14\u0E1C\u0E25\u0E1C\u0E25\u0E34\u0E15" }),
           indicator.filter((ind) => ind.indicatorType === "OUTPUT").map((item, index) => {
-            if (index === 2) return;
+            if (index >= 2) return;
             return /* @__PURE__ */ jsx49(KPIRow, { item });
           })
         ] }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@esic-lab/data-core-ui",
-  "version": "0.0.80",
+  "version": "0.0.82",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",