@esic-lab/data-core-ui 0.0.63 → 0.0.65

package/dist/index.mjs

@@ -358,7 +358,8 @@ function PrimaryButton({
   colorPrimary = "#4e61f6",
   colorPrimaryHover = "#8895f9",
   textColor = "#ffffff",
-  icon
+  icon,
+  className
 }) {
   const textClass = size === "large" ? "body-1" : "body-3";
   return /* @__PURE__ */ jsx(
@@ -377,7 +378,7 @@ function PrimaryButton({
           size,
           onClick,
           type: "primary",
-          className: textClass,
+          className: `${textClass} ${className ?? ""}`,
           disabled,
           icon,
           iconPosition: iconPlacement,
@@ -401,7 +402,8 @@ function SecondaryButton({
   defaultHoverBorderColor = "#7181f8",
   defaultHoverColor = "#7181f8",
   textColor = "rgba(0,0,0,0.88)",
-  icon
+  icon,
+  className
 }) {
   const textClass = size === "large" ? "body-1" : "body-3";
   return /* @__PURE__ */ jsx2(
@@ -425,7 +427,7 @@ function SecondaryButton({
           size,
           onClick,
           type: "default",
-          className: textClass,
+          className: `${textClass} ${className ?? ""}`,
           disabled,
           icon,
           iconPosition: iconPlacement,
@@ -483,7 +485,8 @@ function TertiaryButton({
   colorPrimary = "#000",
   colorPrimaryHover = "#4d5461",
   textColor = "white",
-  icon
+  icon,
+  className
 }) {
   const textClass = size === "large" ? "body-1" : "body-3";
   return /* @__PURE__ */ jsx5(
@@ -502,7 +505,7 @@ function TertiaryButton({
           size,
           onClick,
           type: "primary",
-          className: textClass,
+          className: `${textClass} ${className ?? ""}`,
           disabled,
           icon,
           iconPosition: iconPlacement,
@@ -552,9 +555,9 @@ function Checkbox({ label, checked, onChange, disabled }) {
         /* @__PURE__ */ jsx7(
           "div",
           {
-            className: `flex justify-center items-center border-[1px] border-black w-[24px] h-[24px] rounded-[8px] transition-colors duration-100
-          ${checked ? "bg-black text-white" : "bg-white text-black"} 
-          ${disabled ? "pointer-events-none" : ""}`,
+            className: `flex justify-center items-center border-[1px] border-gray-400 w-[24px] h-[24px] rounded-[8px] transition-colors duration-100
+          ${checked ? "bg-primary-500 text-white border-primary-500" : "bg-white text-black"} 
+          ${disabled ? "pointer-events-none !bg-gray-300" : ""}`,
             children: /* @__PURE__ */ jsx7(
               "span",
               {
@@ -1274,8 +1277,26 @@ function InputFieldNumber({
   size,
   changeOnWheel,
   formatter,
-  parser
+  parser,
+  decimal = false,
+  decimalScale = 2,
+  format: format5 = "number"
 }) {
+  const safeScale = Math.max(0, Math.min(decimalScale, 10));
+  const addComma = (s) => s.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  const defaultFormatter = (v) => {
+    if (v === void 0 || v === null || v === "") return "";
+    const num = Number(v);
+    if (Number.isNaN(num)) return "";
+    const base = !decimal ? Math.trunc(num).toString() : num.toFixed(safeScale);
+    return format5 === "currency" ? addComma(base) : base;
+  };
+  const defaultParser = (v) => {
+    if (!v) return "";
+    const raw = v.replace(/,/g, "").replace(/\s/g, "");
+    if (!decimal) return raw.split(".")[0];
+    return raw.replace(/[^\d.]/g, "");
+  };
   return /* @__PURE__ */ jsx23(
     ConfigProvider7,
     {
@@ -1306,17 +1327,9 @@ function InputFieldNumber({
             controls,
             size,
             changeOnWheel,
-            formatter: formatter ?? ((value2) => {
-              if (value2 === void 0 || value2 === null || value2 === "")
-                return "";
-              const num = Number(value2);
-              if (isNaN(num)) return "";
-              return num.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
-            }),
-            parser: parser ?? ((value2) => {
-              if (!value2) return "";
-              return value2.replace(/,/g, "");
-            })
+            formatter: formatter ?? defaultFormatter,
+            parser: parser ?? defaultParser,
+            precision: decimal ? safeScale : 0
           }
         ),
         error && /* @__PURE__ */ jsx23("p", { className: "text-red-500 caption-1", children: error })
@@ -3810,13 +3823,7 @@ function AntDModal({ children, isOpen, width, onCancel }) {
 }
 
 // src/Indicator/Indicator/Indicator.tsx
-import {
-  IconCheck as IconCheck3,
-  IconCirclePlus as IconCirclePlus2,
-  IconPencil as IconPencil2,
-  IconTrash as IconTrash4,
-  IconX as IconX3
-} from "@tabler/icons-react";
+import { IconCheck as IconCheck3, IconCirclePlus as IconCirclePlus2, IconTrash as IconTrash4, IconX as IconX3 } from "@tabler/icons-react";
 import { useState as useState16 } from "react";
 import { Input as Input4 } from "antd";
 import { Fragment as Fragment7, jsx as jsx41, jsxs as jsxs32 } from "react/jsx-runtime";
@@ -3893,7 +3900,6 @@ function Indicator({
       ...prev,
       [key]: value
     }));
-    console.log(cacheData);
   };
   const handleClick = (active) => {
     handleChangeCashData("inputType", active);
@@ -3945,7 +3951,6 @@ function Indicator({
       ...prev,
       [name]: value
     }));
-    console.log(cacheEditData);
   };
   return /* @__PURE__ */ jsxs32("div", { className: "w-full", children: [
     /* @__PURE__ */ jsxs32(
@@ -3953,27 +3958,18 @@ function Indicator({
       {
         className: `space-x-2 grid ${valueSwitch === "TEXT" ? `grid-cols-[140px_1fr_50px]` : `grid-cols-[140px_1fr_200px_200px_50px]`} items-start`,
         children: [
-          /* @__PURE__ */ jsx41(
-            SwitchSelect,
-            {
-              option,
-              onClick: handleClick,
-              value: valueSwitch,
-              label: "\u0E1B\u0E23\u0E30\u0E40\u0E20\u0E17",
-              required: true
-            }
-          ),
+          /* @__PURE__ */ jsx41(SwitchSelect, { option, onClick: handleClick, value: valueSwitch, label: "\u0E1B\u0E23\u0E30\u0E40\u0E20\u0E17", required: true }),
           /* @__PURE__ */ jsx41(
             InputField,
             {
-              label: `\u0E0A\u0E37\u0E48\u0E2D\u0E15\u0E31\u0E27\u0E0A\u0E35\u0E49\u0E27\u0E31\u0E14${type === "OUTPUT" ? "\u0E1C\u0E25\u0E1C\u0E25\u0E34\u0E15" : "\u0E1C\u0E25\u0E25\u0E31\u0E1E\u0E18\u0E4C"}`,
+              label: type === "TARGET" ? "\u0E0A\u0E37\u0E48\u0E2D\u0E01\u0E25\u0E38\u0E48\u0E21\u0E40\u0E1B\u0E49\u0E32\u0E2B\u0E21\u0E32\u0E22" : `\u0E0A\u0E37\u0E48\u0E2D\u0E15\u0E31\u0E27\u0E0A\u0E35\u0E49\u0E27\u0E31\u0E14${type === "OUTPUT" ? "\u0E1C\u0E25\u0E1C\u0E25\u0E34\u0E15" : "\u0E1C\u0E25\u0E25\u0E31\u0E1E\u0E18\u0E4C"}`,
               value: cacheData.textValue,
               className: "h-[32px]",
               onChange: (val) => {
                 handleChangeCashData("textValue", val ?? "");
                 setAddError((p) => ({ ...p, textValue: void 0 }));
               },
-              placeholder: `\u0E23\u0E30\u0E1A\u0E38\u0E0A\u0E37\u0E48\u0E2D\u0E15\u0E31\u0E27\u0E0A\u0E35\u0E49\u0E27\u0E31\u0E14${type === "OUTPUT" ? "\u0E1C\u0E25\u0E1C\u0E25\u0E34\u0E15" : "\u0E1C\u0E25\u0E25\u0E31\u0E1E\u0E18\u0E4C"}`,
+              placeholder: type === "TARGET" ? "\u0E23\u0E30\u0E1A\u0E38\u0E0A\u0E37\u0E48\u0E2D\u0E01\u0E25\u0E38\u0E48\u0E21\u0E40\u0E1B\u0E49\u0E32\u0E2B\u0E21\u0E32\u0E22" : `\u0E23\u0E30\u0E1A\u0E38\u0E0A\u0E37\u0E48\u0E2D\u0E15\u0E31\u0E27\u0E0A\u0E35\u0E49\u0E27\u0E31\u0E14${type === "OUTPUT" ? "\u0E1C\u0E25\u0E1C\u0E25\u0E34\u0E15" : "\u0E1C\u0E25\u0E25\u0E31\u0E1E\u0E18\u0E4C"}`,
               required: true,
               error: addError.textValue
             }
@@ -3982,7 +3978,7 @@ function Indicator({
             /* @__PURE__ */ jsx41(
               InputFieldNumber,
               {
-                label: `\u0E04\u0E48\u0E32\u0E40\u0E1B\u0E49\u0E32\u0E2B\u0E21\u0E32\u0E22${type === "OUTPUT" ? "\u0E1C\u0E25\u0E1C\u0E25\u0E34\u0E15" : "\u0E1C\u0E25\u0E25\u0E31\u0E1E\u0E18\u0E4C"}`,
+                label: type === "TARGET" ? "\u0E04\u0E48\u0E32\u0E40\u0E1B\u0E49\u0E32\u0E2B\u0E21\u0E32\u0E22" : `\u0E04\u0E48\u0E32\u0E40\u0E1B\u0E49\u0E32\u0E2B\u0E21\u0E32\u0E22${type === "OUTPUT" ? "\u0E1C\u0E25\u0E1C\u0E25\u0E34\u0E15" : "\u0E1C\u0E25\u0E25\u0E31\u0E1E\u0E18\u0E4C"}`,
                 value: cacheData.numberValue ?? 0,
                 className: "h-[32px]",
                 onChange: (val) => {
@@ -3990,7 +3986,7 @@ function Indicator({
                   setAddError((p) => ({ ...p, numberValue: void 0 }));
                 },
                 min: 0,
-                placeholder: `\u0E23\u0E30\u0E1A\u0E38\u0E04\u0E48\u0E32\u0E40\u0E1B\u0E49\u0E32\u0E2B\u0E21\u0E32\u0E22${type === "OUTPUT" ? "\u0E1C\u0E25\u0E1C\u0E25\u0E34\u0E15" : "\u0E1C\u0E25\u0E25\u0E31\u0E1E\u0E18\u0E4C"}`,
+                placeholder: type === "TARGET" ? "\u0E23\u0E30\u0E1A\u0E38\u0E04\u0E48\u0E32\u0E40\u0E1B\u0E49\u0E32\u0E2B\u0E21\u0E32\u0E22" : `\u0E23\u0E30\u0E1A\u0E38\u0E04\u0E48\u0E32\u0E40\u0E1B\u0E49\u0E32\u0E2B\u0E21\u0E32\u0E22${type === "OUTPUT" ? "\u0E1C\u0E25\u0E1C\u0E25\u0E34\u0E15" : "\u0E1C\u0E25\u0E25\u0E31\u0E1E\u0E18\u0E4C"}`,
                 required: true,
                 error: addError.numberValue
               }
@@ -4011,14 +4007,7 @@ function Indicator({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx41(
-            IconCirclePlus2,
-            {
-              onClick: handleAddIndicator,
-              className: "mt-8 cursor-pointer",
-              size: 32
-            }
-          )
+          /* @__PURE__ */ jsx41(IconCirclePlus2, { onClick: handleAddIndicator, className: "mt-8 cursor-pointer", size: 32 })
         ]
       }
     ),
@@ -4087,20 +4076,8 @@ function Indicator({
                 onClick: () => handleConfirmEditIndicator(index)
               }
             ),
-            /* @__PURE__ */ jsx41(
-              IconX3,
-              {
-                className: "cursor-pointer text-red-600",
-                onClick: handleCancelEditIndicator
-              }
-            )
-          ] }) : void 0 : canEdit && /* @__PURE__ */ jsx41(
-            IconPencil2,
-            {
-              className: "cursor-pointer",
-              onClick: () => handleEditIndicator(index)
-            }
-          ) }),
+            /* @__PURE__ */ jsx41(IconX3, { className: "cursor-pointer text-red-600", onClick: handleCancelEditIndicator })
+          ] }) : void 0 : false }),
           /* @__PURE__ */ jsx41("div", { className: "body-1 mt-2 cursor-pointer", children: /* @__PURE__ */ jsx41(
             IconTrash4,
             {
@@ -4756,14 +4733,21 @@ import { useEffect as useEffect11, useRef as useRef10, useState as useState20 }
 import * as d33 from "d3";
 import {
   format as format4,
-  getWeek,
   eachWeekOfInterval,
   startOfYear,
   endOfYear,
   startOfDay,
   addDays,
-  eachHourOfInterval
+  eachHourOfInterval,
+  getQuarter
 } from "date-fns";
+import { th } from "date-fns/locale";
+import {
+  IconCircleX,
+  IconClockExclamation,
+  IconHourglassEmpty,
+  IconRosetteDiscountCheck
+} from "@tabler/icons-react";
 import { jsx as jsx48, jsxs as jsxs39 } from "react/jsx-runtime";
 var LAYOUT = {
   barHeight: 40,
@@ -4781,31 +4765,33 @@ var VIEW_MODE_SCALE = {
   week: 10
 };
 var STATUS_META = {
-  pending: { color: "#F16965", label: "\u0E23\u0E2D\u0E14\u0E33\u0E40\u0E19\u0E34\u0E19\u0E01\u0E32\u0E23" },
-  "in-progress": { color: "#FFBB33", label: "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E14\u0E33\u0E40\u0E19\u0E34\u0E19\u0E01\u0E32\u0E23" },
-  completed: { color: "#69C57D", label: "\u0E40\u0E2A\u0E23\u0E47\u0E08\u0E2A\u0E34\u0E49\u0E19" }
-};
-var THAI_MONTHS = {
-  January: "\u0E21.\u0E04.",
-  February: "\u0E01.\u0E1E.",
-  March: "\u0E21\u0E35.\u0E04.",
-  April: "\u0E40\u0E21.\u0E22.",
-  May: "\u0E1E.\u0E04.",
-  June: "\u0E21\u0E34.\u0E22.",
-  July: "\u0E01.\u0E04.",
-  August: "\u0E2A.\u0E04.",
-  September: "\u0E01.\u0E22.",
-  October: "\u0E15.\u0E04.",
-  November: "\u0E1E.\u0E22.",
-  December: "\u0E18.\u0E04."
+  IN_PROGRESS: {
+    color: "#FFC654",
+    label: "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E14\u0E33\u0E40\u0E19\u0E34\u0E19\u0E01\u0E32\u0E23",
+    icon: /* @__PURE__ */ jsx48(IconHourglassEmpty, { className: "text-[#FFC654]" })
+  },
+  CANCEL: {
+    color: "#D2D5DB",
+    label: "\u0E22\u0E01\u0E40\u0E25\u0E34\u0E01",
+    icon: /* @__PURE__ */ jsx48(IconCircleX, { className: "text-[#D2D5DB]" })
+  },
+  SUCCESS: {
+    color: "#81CF92",
+    label: "\u0E14\u0E33\u0E40\u0E19\u0E34\u0E19\u0E01\u0E32\u0E23\u0E41\u0E25\u0E49\u0E27\u0E40\u0E2A\u0E23\u0E47\u0E08",
+    icon: /* @__PURE__ */ jsx48(IconRosetteDiscountCheck, { className: "text-[#81CF92]" })
+  },
+  COMPLETE: {
+    color: "#81CF92",
+    label: "\u0E40\u0E2A\u0E23\u0E47\u0E08\u0E2A\u0E34\u0E49\u0E19",
+    icon: /* @__PURE__ */ jsx48(IconRosetteDiscountCheck, { className: "text-[#81CF92]" })
+  },
+  DELAY: {
+    color: "#F4827E",
+    label: "\u0E25\u0E48\u0E32\u0E0A\u0E49\u0E32",
+    icon: /* @__PURE__ */ jsx48(IconClockExclamation, { className: "text-[#F4827E]" })
+  }
 };
-var THAI_DAYS = ["\u0E2D\u0E32.", "\u0E08.", "\u0E2D.", "\u0E1E.", "\u0E1E\u0E24.", "\u0E28.", "\u0E2A."];
 var roundedRectPath = (x, y, width, height, radius) => `M${x + radius},${y} H${x + width} V${y + height} H${x + radius} A${radius},${radius},0,0,1,${x},${y + height - radius} V${y + radius} A${radius},${radius},0,0,1,${x + radius},${y}`;
-var formatThaiMonth = (date) => {
-  const monthName = format4(date, "MMMM");
-  return THAI_MONTHS[monthName] || monthName;
-};
-var formatThaiDate = (date) => date ? date.toLocaleDateString("th-TH", { day: "numeric", month: "short" }) : "-";
 var isDateOnlyValue = (dt) => {
   const localZero = dt.getHours() === 0 && dt.getMinutes() === 0 && dt.getSeconds() === 0 && dt.getMilliseconds() === 0;
   const utcZero = dt.getUTCHours() === 0 && dt.getUTCMinutes() === 0 && dt.getUTCSeconds() === 0 && dt.getUTCMilliseconds() === 0;
@@ -4835,60 +4821,46 @@ var getAdjustedEnd = (d) => {
   }
   return startOfDay(/* @__PURE__ */ new Date());
 };
-var getStatusColor = (status2) => STATUS_META[status2]?.color ?? STATUS_META.pending.color;
-var getStatusLabel = (status2) => STATUS_META[status2]?.label ?? STATUS_META.pending.label;
-var ProjectRow = ({ element, barHeight, barSpacing }) => {
+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 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 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",
     {
       style: {
-        display: "grid",
-        gridTemplateColumns: "200px 100px 100px 100px",
         alignItems: "center",
         height: `${barHeight}px`,
-        fontSize: "12px",
-        marginBottom: `${barSpacing}px`
+        marginBottom: `${barSpacing}px`,
+        fontSize: "12px"
       },
+      className: "body-1 grid grid-cols-[1fr_100px_130px] px-8 gap-2",
       children: [
-        /* @__PURE__ */ jsxs39("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
-          /* @__PURE__ */ jsx48(
-            "span",
+        /* @__PURE__ */ jsxs39("div", { className: `grid ${mode === "project" ? "grid-cols-[10px_1fr]" : "grid-cols-[1fr]"} items-center gap-2`, children: [
+          mode === "project" && /* @__PURE__ */ jsx48(
+            "div",
             {
               style: {
-                display: "inline-block",
-                width: "10px",
-                height: "10px",
-                borderRadius: "50%",
-                backgroundColor: element.color || "#999"
-              }
+                backgroundColor: element.color || "#E9E9E9"
+              },
+              className: "w-[10px] h-[10px] rounded-full"
             }
           ),
-          /* @__PURE__ */ jsx48("span", { style: { color: "#333" }, children: element.label })
+          /* @__PURE__ */ jsx48("div", { className: "line-clamp-1 break-words text-[#333]", title: element.label, children: element.label })
         ] }),
-        /* @__PURE__ */ jsx48("div", { style: { color: "#666" }, children: formatThaiDate(safeStartDate) }),
-        /* @__PURE__ */ jsx48("div", { style: { color: "#666" }, children: formatThaiDate(safeEndDate) }),
-        /* @__PURE__ */ jsx48(
-          "button",
-          {
-            style: {
-              height: `${barHeight}px`,
-              minWidth: "100%",
-              padding: "4px 8px",
-              borderRadius: "4px",
-              fontSize: "11px",
-              backgroundColor: statusColor,
-              color: "#000",
-              border: "none",
-              cursor: "pointer"
-            },
-            children: statusLabel
-          }
-        )
+        mode === "project" ? /* @__PURE__ */ jsx48("div", { children: safeEndDate ? format4(toBuddhistDate(safeEndDate), "dd MMM yyyy", { locale: th }) : "-" }) : /* @__PURE__ */ jsx48("div", { children: `Q${getQuarter(
+          safeEndDate ?? /* @__PURE__ */ new Date()
+        )}/${(safeEndDate?.getFullYear() ?? 0) + 543}` }),
+        /* @__PURE__ */ jsxs39("button", { className: "rounded-md subtitile-1 flex gap-2 align-start", children: [
+          statusIcon,
+          statusLabel
+        ] })
       ]
     },
     element.id
@@ -4903,42 +4875,52 @@ var RowOverlay = ({ data, barHeight, barSpacing, totalHeaderHeight }) => /* @__P
       left: 0,
       right: 0,
       height: `${data.length * (barHeight + barSpacing)}px`,
-      pointerEvents: "none",
-      zIndex: 5
+      pointerEvents: "none"
     },
-    children: data.map((d, i) => {
+    children: data.map((_, i) => {
       if (i === 0) return null;
+      console.log("rendering row line", i);
       const yPos = i * (barHeight + barSpacing) - barSpacing / 2;
       return /* @__PURE__ */ jsx48(
         "div",
         {
+          className: "",
           style: {
             position: "absolute",
             top: `${yPos}px`,
             left: 0,
             right: 0,
             height: "1px",
-            backgroundColor: "#d0d0d0"
+            backgroundColor: "#E9E9E9"
           }
         },
-        `row-line-${d.id}`
+        `row-line-${i}`
       );
     })
   }
 );
-var GanttChart = ({ data, width, height }) => {
+var GanttChart = ({
+  data,
+  width,
+  mode
+}) => {
   const svgRef = useRef10(null);
   const leftPanelRef = useRef10(null);
   const dataContainerRef = useRef10(null);
   const [viewMode] = useState20("year");
-  const { barHeight, barSpacing, headersGroupLayer1Height, headersGroupLayer2Height } = LAYOUT;
+  const {
+    barHeight,
+    barSpacing,
+    headersGroupLayer1Height,
+    headersGroupLayer2Height
+  } = LAYOUT;
   const totalHeaderHeight = headersGroupLayer1Height + headersGroupLayer2Height;
   useEffect11(() => {
     if (!data || !svgRef.current) return;
     const margin = { top: 0, right: 20, bottom: 20, left: 20 };
     const chartHeight = data.length * (barHeight + barSpacing) + margin.top + margin.bottom;
     const containerWidth = width * 2;
-    const containerHeight = totalHeaderHeight + chartHeight;
+    const containerHeight = totalHeaderHeight + chartHeight > 590 ? totalHeaderHeight + chartHeight : 590;
     const borderRadius = 5;
     if (leftPanelRef.current) {
       leftPanelRef.current.style.height = `${containerHeight}px`;
@@ -4951,23 +4933,31 @@ var GanttChart = ({ data, width, height }) => {
     const chartGroup = svg.append("g").attr("transform", `translate(${margin.left}, ${totalHeaderHeight})`);
     const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
     const domainStart = startOfDay(startOfYear(new Date(currentYear, 0, 1)));
-    const domainEnd = startOfDay(addDays(endOfYear(new Date(currentYear, 0, 1)), 1));
+    const domainEnd = startOfDay(
+      addDays(endOfYear(new Date(currentYear, 0, 1)), 1)
+    );
     const xScale = d33.scaleTime().domain([domainStart, domainEnd]).range([0, containerWidth - margin.left - margin.right]);
     const buildTimeBuckets = (domain) => ({
       uniqueYears: d33.timeYear.every(1)?.range(domain[0], domain[1]) || [],
       uniqueMonths: d33.timeMonth.every(1)?.range(domain[0], domain[1]) || [],
-      uniqueWeeks: eachWeekOfInterval({ start: domain[0], end: domain[1] }, { weekStartsOn: 1 }),
-      uniqueDays: d33.timeDay.range(startOfDay(domain[0]), startOfDay(addDays(domain[1], 1))) || []
+      uniqueWeeks: eachWeekOfInterval(
+        { start: domain[0], end: domain[1] },
+        { weekStartsOn: 1 }
+      ),
+      uniqueDays: d33.timeDay.range(
+        startOfDay(domain[0]),
+        startOfDay(addDays(domain[1], 1))
+      ) || []
     });
     const renderYearHeaders = (layer1, layer2, 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);
-      }).attr("height", headersGroupLayer1Height).style("fill", "#fff").style("stroke", "#999").style("stroke-width", 1);
+      }).attr("height", headersGroupLayer1Height).style("fill", "#fff").style("stroke", "#E9E9E9").style("stroke-width", 1);
       layer1.selectAll(".year-label").data(buckets.uniqueYears).enter().append("text").attr("class", "year-label").attr("x", (d) => {
         const nextYear = new Date(d.getFullYear() + 1, 0, 1);
         return newXScale(d) + (newXScale(nextYear) - newXScale(d)) / 2;
-      }).attr("y", -totalHeaderHeight + headersGroupLayer1Height / 2).attr("dy", "0.35em").attr("text-anchor", "middle").style("font-size", `${HEADER_FONTS.layer1}px`).style("font-weight", "bold").style("fill", "#0066cc").text((d) => `${d.getFullYear() + 543}`);
+      }).attr("y", -totalHeaderHeight + headersGroupLayer1Height / 2).attr("dy", "0.35em").attr("text-anchor", "middle").style("font-size", `${HEADER_FONTS.layer1 + 2}px`).style("font-weight", "regular").style("fill", "#000").text((d) => `${d.getFullYear() + 543}`);
       const quarters2 = [];
       buckets.uniqueYears.forEach((year) => {
         for (let q = 0; q < 4; q++) {
@@ -4975,75 +4965,36 @@ var GanttChart = ({ data, width, height }) => {
         }
       });
       layer2.selectAll(".quarter-bg").data(quarters2).enter().append("rect").attr("class", "quarter-bg").attr("x", (d) => newXScale(d)).attr("y", -headersGroupLayer2Height).attr("width", (d) => {
-        const nextQuarter = startOfDay(new Date(d.getFullYear(), d.getMonth() + 3, 1));
+        const nextQuarter = startOfDay(
+          new Date(d.getFullYear(), d.getMonth() + 3, 1)
+        );
         return newXScale(nextQuarter) - newXScale(d);
-      }).attr("height", headersGroupLayer2Height).style("fill", "#fff").style("stroke", "#999").style("stroke-width", 1);
+      }).attr("height", headersGroupLayer2Height).style("fill", "#fff").style("stroke", "#E9E9E9").style("stroke-width", 1);
       layer2.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));
+        const nextQuarter = startOfDay(
+          new Date(d.getFullYear(), d.getMonth() + 3, 1)
+        );
         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}px`).style("font-weight", "bold").style("fill", "#0088cc").text((d) => `\u0E44\u0E15\u0E23\u0E21\u0E32\u0E2A ${Math.floor(d.getMonth() / 3) + 1}`);
-    };
-    const renderMonthHeaders = (layer1, layer2, newXScale, buckets) => {
-      layer1.selectAll(".month-bg").data(buckets.uniqueMonths).enter().append("rect").attr("class", "month-bg").attr("x", (d) => newXScale(d)).attr("y", -totalHeaderHeight).attr("width", (d) => {
-        const nextMonth = startOfDay(new Date(d.getFullYear(), d.getMonth() + 1, 1));
-        return newXScale(nextMonth) - newXScale(d) + 11;
-      }).attr("height", headersGroupLayer1Height).style("fill", "#fff").style("stroke", "#999").style("stroke-width", 1);
-      layer1.selectAll(".month-label").data(buckets.uniqueMonths).enter().append("text").attr("class", "month-label").attr("x", (d) => {
-        const nextMonth = startOfDay(new Date(d.getFullYear(), d.getMonth() + 1, 1));
-        return newXScale(d) + (newXScale(nextMonth) - newXScale(d)) / 2;
-      }).attr("y", -totalHeaderHeight + headersGroupLayer1Height / 2).attr("dy", "0.35em").attr("text-anchor", "middle").style("font-size", `${HEADER_FONTS.layer1}px`).style("font-weight", "bold").style("fill", "#0066cc").text((d) => `${formatThaiMonth(d)} ${d.getFullYear() + 543}`);
-      layer2.selectAll(".week-bg").data(buckets.uniqueWeeks).enter().append("rect").attr("class", "week-bg").attr("x", (d) => newXScale(d)).attr("y", -headersGroupLayer2Height).attr("width", (d) => {
-        const weekEnd = startOfDay(addDays(d, 7));
-        return newXScale(weekEnd) - newXScale(d) + 1;
-      }).attr("height", headersGroupLayer2Height).style("fill", "#fff").style("stroke", "#999").style("stroke-width", 1);
-      layer2.selectAll(".week-label").data(buckets.uniqueWeeks).enter().append("text").attr("class", "week-label").attr("x", (d) => {
-        const weekEnd = startOfDay(addDays(d, 7));
-        return newXScale(d) + (newXScale(weekEnd) - newXScale(d)) / 2;
-      }).attr("y", -headersGroupLayer2Height / 2).attr("dy", "0.35em").attr("text-anchor", "middle").style("font-size", `${HEADER_FONTS.layer2}px`).style("font-weight", "bold").style("fill", "#0088cc").text((d) => `\u0E2A\u0E31\u0E1B\u0E14\u0E32\u0E2B\u0E4C\u0E17\u0E35\u0E48 ${getWeek(d, { weekStartsOn: 1 })}`);
-    };
-    const renderWeekHeaders = (layer1, layer2, newXScale, buckets) => {
-      layer1.selectAll(".week-bg").data(buckets.uniqueWeeks).enter().append("rect").attr("class", "week-bg").attr("x", (d) => newXScale(d)).attr("y", -totalHeaderHeight).attr("width", (d) => {
-        const weekEnd = startOfDay(addDays(d, 7));
-        return newXScale(weekEnd) - newXScale(d);
-      }).attr("height", headersGroupLayer1Height).style("fill", "#fff").style("stroke", "#999").style("stroke-width", 1);
-      layer1.selectAll(".week-label").data(buckets.uniqueWeeks).enter().append("text").attr("class", "week-label").attr("x", (d) => {
-        const weekEnd = startOfDay(addDays(d, 7));
-        return newXScale(d) + (newXScale(weekEnd) - newXScale(d)) / 2;
-      }).attr("y", -totalHeaderHeight + headersGroupLayer1Height / 2).attr("dy", "0.35em").attr("text-anchor", "middle").style("font-size", `${HEADER_FONTS.layer1}px`).style("font-weight", "bold").style("fill", "#0066cc").text((d) => `\u0E2A\u0E31\u0E1B\u0E14\u0E32\u0E2B\u0E4C\u0E17\u0E35\u0E48 ${getWeek(d, { weekStartsOn: 1 })}`);
-      layer2.selectAll(".day-bg").data(buckets.uniqueDays).enter().append("rect").attr("class", "day-bg").attr("x", (d) => newXScale(d)).attr("y", -headersGroupLayer2Height).attr("width", (d) => {
-        const nextDay = startOfDay(addDays(d, 1));
-        return newXScale(nextDay) - newXScale(d);
-      }).attr("height", headersGroupLayer2Height).style("fill", "#fff").style("stroke", "#999").style("stroke-width", 1);
-      layer2.selectAll(".day-of-week").data(buckets.uniqueDays).enter().append("text").attr("class", "day-of-week").attr("x", (d) => {
-        const nextDay = startOfDay(addDays(d, 1));
-        return newXScale(d) + (newXScale(nextDay) - newXScale(d)) / 2;
-      }).attr("y", -headersGroupLayer2Height / 2).attr("text-anchor", "middle").style("font-size", `${HEADER_FONTS.layer2}px`).style("font-weight", "bold").style("fill", "#0088cc").each(function(d) {
-        const textElement = d33.select(this);
-        textElement.text("");
-        textElement.append("tspan").text(THAI_DAYS[d.getDay()]).attr("x", textElement.attr("x")).attr("dy", "-0.3em");
-        textElement.append("tspan").text(format4(d, "d")).attr("x", textElement.attr("x")).attr("dy", "1.2em");
-      });
+      }).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}`);
     };
     const drawHeaders = (layer1, layer2, newXScale, buckets) => {
-      if (viewMode === "year") return renderYearHeaders(layer1, layer2, newXScale, buckets);
-      if (viewMode === "month") return renderMonthHeaders(layer1, layer2, newXScale, buckets);
-      return renderWeekHeaders(layer1, layer2, newXScale, buckets);
+      return renderYearHeaders(layer1, layer2, newXScale, buckets);
     };
-    const getGridlineData = (mode, buckets, domain) => {
-      if (mode === "year") return buckets.uniqueMonths;
-      if (mode === "month") return buckets.uniqueWeeks;
-      if (mode === "week") return buckets.uniqueDays;
+    const getGridlineData = (mode2, buckets, domain) => {
+      if (mode2 === "year") return buckets.uniqueMonths;
+      if (mode2 === "month") return buckets.uniqueWeeks;
+      if (mode2 === "week") return buckets.uniqueDays;
       return eachHourOfInterval({ start: domain[0], end: domain[1] });
     };
     const drawGridlines = (group, gridlineData, newXScale) => {
-      group.selectAll(".gridline").data(gridlineData).enter().append("line").attr("class", "gridline").attr("x1", (d) => newXScale(d)).attr("x2", (d) => newXScale(d)).attr("y1", 0).attr("y2", chartHeight - margin.top - margin.bottom).attr("stroke", "#000").attr("stroke-width", 1).style("opacity", 0.3);
+      group.selectAll(".gridline").data(gridlineData).enter().append("line").attr("class", "gridline").attr("x1", (d) => newXScale(d)).attr("x2", (d) => newXScale(d)).attr("y1", 0).attr("y2", containerHeight).attr("stroke", "#E9E9E9").attr("stroke-width", 1);
     };
     const drawRowSeparators = (group, getYPosition) => {
       const rowSeparatorGroup = group.append("g").attr("class", "row-separators");
       data.forEach((_d, i) => {
         if (i === 0) return;
         const y = getYPosition(i) - barSpacing / 2;
-        rowSeparatorGroup.append("line").attr("x1", 0).attr("x2", containerWidth - margin.left - margin.right).attr("y1", y).attr("y2", y).attr("stroke", "#d0d0d0").attr("stroke-width", 1).style("pointer-events", "none");
+        rowSeparatorGroup.append("line").attr("x1", 0).attr("x2", containerWidth - margin.left - margin.right).attr("y1", y).attr("y2", y).attr("stroke", "#E9E9E9").attr("stroke-width", 1).style("pointer-events", "none");
       });
       rowSeparatorGroup.lower();
     };
@@ -5051,16 +5002,27 @@ var GanttChart = ({ data, width, height }) => {
       const barsGroup = group.append("g").attr("class", "bars-group");
       const renderBarHeight = barHeight;
       const labelPadding = 10;
-      barsGroup.selectAll(".bar-background").data(data).enter().append("rect").attr("class", "bar-background").attr("x", (d) => newXScale(getAdjustedStart(d))).attr("y", (_d, i) => getYPosition(i)).attr("height", renderBarHeight).attr("width", (d) => newXScale(getAdjustedEnd(d)) - newXScale(getAdjustedStart(d))).attr("fill", (d) => getStatusColor(d.status)).attr("rx", borderRadius).attr("ry", borderRadius);
-      barsGroup.selectAll(".bar-head").data(data).enter().append("path").attr("class", "bar-head").attr("fill", (d) => d.color).attr("d", (d, i) => {
-        const x = newXScale(getAdjustedStart(d));
-        const y = getYPosition(i);
-        const barWidth = newXScale(getAdjustedEnd(d)) - newXScale(getAdjustedStart(d));
-        const headWidth = Math.min(barWidth * 0.5, 20);
-        return roundedRectPath(x, y, headWidth, renderBarHeight, borderRadius);
-      });
+      barsGroup.selectAll(".bar-background").data(data).enter().append("rect").attr("class", "bar-background").attr("x", (d) => newXScale(getAdjustedStart(d))).attr("y", (_d, i) => getYPosition(i)).attr("height", renderBarHeight).attr(
+        "width",
+        (d) => newXScale(getAdjustedEnd(d)) - newXScale(getAdjustedStart(d))
+      ).attr("fill", (d) => getStatusColor(d.status)).attr("rx", borderRadius).attr("ry", borderRadius);
+      {
+        mode === "project" && barsGroup.selectAll(".bar-head").data(data).enter().append("path").attr("class", "bar-head").attr("fill", (d) => d.color).attr("d", (d, i) => {
+          const x = newXScale(getAdjustedStart(d));
+          const y = getYPosition(i);
+          const barWidth = newXScale(getAdjustedEnd(d)) - newXScale(getAdjustedStart(d));
+          const headWidth = Math.min(barWidth * 0.5, 20);
+          return roundedRectPath(
+            x,
+            y,
+            headWidth,
+            renderBarHeight,
+            borderRadius
+          );
+        });
+      }
       const labels = group.append("g").attr("class", "labels");
-      const labelSelection = labels.selectAll(".label").data(data).enter().append("text").attr("class", "label").attr("y", (_d, i) => getYPosition(i) + renderBarHeight / 2).attr("dy", "0.35em").text((d) => d.label).style("fill", "black").style("font-size", "12px").style("pointer-events", "none");
+      const labelSelection = labels.selectAll(".label").data(data).enter().append("text").attr("class", "label").attr("y", (_d, i) => getYPosition(i) + renderBarHeight / 2).attr("dy", "0.35em").text((d) => d.label).style("fill", "black").style("font-weight", "400").style("pointer-events", "none");
       labelSelection.each(function(d) {
         const barWidth = newXScale(getAdjustedEnd(d)) - newXScale(getAdjustedStart(d));
         const headWidth = Math.min(barWidth * 0.5, 20);
@@ -5083,8 +5045,17 @@ var GanttChart = ({ data, width, height }) => {
       const timeBuckets = buildTimeBuckets(newXScale.domain());
       const headersGroupLayer1 = chartGroup.append("g");
       const headersGroupLayer2 = chartGroup.append("g");
-      drawHeaders(headersGroupLayer1, headersGroupLayer2, newXScale, timeBuckets);
-      const gridlineData = getGridlineData(viewMode, timeBuckets, newXScale.domain());
+      drawHeaders(
+        headersGroupLayer1,
+        headersGroupLayer2,
+        newXScale,
+        timeBuckets
+      );
+      const gridlineData = getGridlineData(
+        viewMode,
+        timeBuckets,
+        newXScale.domain()
+      );
       drawGridlines(headersGroupLayer2, gridlineData, newXScale);
       drawRowSeparators(chartGroup, getYPosition);
       drawBarsAndLabels(chartGroup, newXScale, getYPosition);
@@ -5102,7 +5073,6 @@ var GanttChart = ({ data, width, height }) => {
   }, [
     data,
     width,
-    height,
     viewMode,
     barHeight,
     barSpacing,
@@ -5113,13 +5083,13 @@ var GanttChart = ({ data, width, height }) => {
   return /* @__PURE__ */ jsx48(
     "div",
     {
+      className: "body-1",
       style: {
         display: "flex",
         flexDirection: "column",
-        padding: "20px",
         width: `${width}px`,
-        height: `${height}px`,
-        border: "1px solid #ccc",
+        height: `590px`,
+        border: "1px solid #E9E9E9",
         borderRadius: "10px",
         backgroundColor: "#fff",
         overflow: "hidden"
@@ -5135,49 +5105,69 @@ var GanttChart = ({ data, width, height }) => {
             position: "relative"
           },
           children: [
-            /* @__PURE__ */ jsx48(RowOverlay, { data, barHeight, barSpacing, totalHeaderHeight }),
+            /* @__PURE__ */ jsx48("div", { className: "z-1", children: /* @__PURE__ */ jsx48(
+              RowOverlay,
+              {
+                data: data.length > 10 ? data : ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
+                barHeight,
+                barSpacing,
+                totalHeaderHeight
+              }
+            ) }),
             /* @__PURE__ */ jsxs39(
               "div",
               {
                 ref: leftPanelRef,
+                className: "border-r",
                 style: {
                   width: "520px",
                   minWidth: "500px",
                   display: "flex",
                   flexDirection: "column",
                   backgroundColor: "#fff",
-                  borderRight: "1px solid #ddd",
                   zIndex: 2
                 },
                 children: [
-                  /* @__PURE__ */ jsxs39(
-                    "div",
-                    {
-                      style: {
-                        display: "grid",
-                        gridTemplateColumns: "200px 100px 100px 100px",
-                        fontSize: "12px",
-                        fontWeight: "bold",
-                        color: "#666",
-                        backgroundColor: "#fafafa",
-                        borderBottom: "2px solid #ddd",
-                        padding: "0 8px",
-                        height: `${totalHeaderHeight}px`,
-                        marginBottom: "10px",
-                        position: "sticky",
-                        top: 0,
-                        alignItems: "center",
-                        boxSizing: "border-box"
+                  /* @__PURE__ */ jsxs39("div", { ref: dataContainerRef, children: [
+                    /* @__PURE__ */ jsxs39(
+                      "div",
+                      {
+                        className: "grid body-2 grid-cols-[1fr_100px_130px] gap-2 px-8 border-b bg-white",
+                        style: {
+                          height: `${totalHeaderHeight}px`,
+                          marginBottom: "10px",
+                          position: "sticky",
+                          top: 0,
+                          alignItems: "center",
+                          zIndex: 5
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx48("div", { children: "\u0E42\u0E04\u0E23\u0E07\u0E01\u0E32\u0E23" }),
+                          /* @__PURE__ */ jsx48("div", { children: "\u0E01\u0E33\u0E2B\u0E19\u0E14\u0E2A\u0E48\u0E07" }),
+                          /* @__PURE__ */ jsx48("div", { children: "\u0E2A\u0E16\u0E32\u0E19\u0E30" })
+                        ]
+                      }
+                    ),
+                    data.map((element) => /* @__PURE__ */ jsx48(
+                      ProjectRow,
+                      {
+                        mode,
+                        element,
+                        barHeight,
+                        barSpacing
                       },
-                      children: [
-                        /* @__PURE__ */ jsx48("div", { children: "\u0E42\u0E04\u0E23\u0E07\u0E01\u0E32\u0E23" }),
-                        /* @__PURE__ */ jsx48("div", { children: "\u0E27\u0E31\u0E19\u0E40\u0E23\u0E34\u0E48\u0E21" }),
-                        /* @__PURE__ */ jsx48("div", { children: "\u0E01\u0E33\u0E2B\u0E19\u0E14\u0E2A\u0E48\u0E07" }),
-                        /* @__PURE__ */ jsx48("div", { children: "\u0E2A\u0E16\u0E32\u0E19\u0E30" })
-                      ]
+                      element.id
+                    ))
+                  ] }),
+                  /* @__PURE__ */ jsx48("div", { className: "z-3", children: /* @__PURE__ */ jsx48(
+                    RowOverlay,
+                    {
+                      data,
+                      barHeight,
+                      barSpacing,
+                      totalHeaderHeight
                     }
-                  ),
-                  /* @__PURE__ */ jsx48("div", { ref: dataContainerRef, children: data.map((element) => /* @__PURE__ */ jsx48(ProjectRow, { element, barHeight, barSpacing }, element.id)) })
+                  ) })
                 ]
               }
             ),
@@ -5259,7 +5249,7 @@ function CardKPI({
           /* @__PURE__ */ jsx49(ProgressBar, { percent: overallPercent, type: "line", checkpoints: [0] })
         ] }),
         /* @__PURE__ */ jsxs40("div", { className: "border-b", children: [
-          /* @__PURE__ */ jsx49("span", { className: "body-2 ", children: "\u0E15\u0E31\u0E27\u0E0A\u0E35\u0E49\u0E27\u0E31\u0E14\u0E1C\u0E25\u0E25\u0E31\u0E1E\u0E18\u0E4C" }),
+          /* @__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;
             return /* @__PURE__ */ jsx49(KPIRow, { item });
@@ -5272,7 +5262,6 @@ function CardKPI({
             return /* @__PURE__ */ jsx49(KPIRow, { item });
           })
         ] }),
-        indicator.length === 0 && /* @__PURE__ */ jsx49("div", { className: "text-sm text-gray-500 italic", children: "\u0E44\u0E21\u0E48\u0E21\u0E35\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23\u0E42\u0E04\u0E23\u0E07\u0E01\u0E32\u0E23" }),
         indicator.filter((item) => item.indicatorType === "TARGET").length > 2 || indicator.filter((item) => item.indicatorType === "OUTPUT").length > 2 ? /* @__PURE__ */ jsx49("div", { className: "bottom-0 right-1/2 absolute text-gray-300", children: /* @__PURE__ */ jsx49(
           IconDots,
           {