@esic-lab/data-core-ui 0.0.64 → 0.0.66

package/dist/index.mjs

@@ -555,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",
               {
@@ -3823,7 +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";
@@ -4077,7 +4077,7 @@ function Indicator({
               }
             ),
             /* @__PURE__ */ jsx41(IconX3, { className: "cursor-pointer text-red-600", onClick: handleCancelEditIndicator })
-          ] }) : void 0 : canEdit && /* @__PURE__ */ jsx41(IconPencil2, { className: "cursor-pointer", onClick: () => handleEditIndicator(index) }) }),
+          ] }) : void 0 : false }),
           /* @__PURE__ */ jsx41("div", { className: "body-1 mt-2 cursor-pointer", children: /* @__PURE__ */ jsx41(
             IconTrash4,
             {
@@ -4733,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,
@@ -4758,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;
@@ -4812,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
@@ -4880,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 > 585 ? totalHeaderHeight + chartHeight : 585;
     const borderRadius = 5;
     if (leftPanelRef.current) {
       leftPanelRef.current.style.height = `${containerHeight}px`;
@@ -4928,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++) {
@@ -4952,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();
     };
@@ -5028,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);
@@ -5060,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);
@@ -5079,7 +5073,6 @@ var GanttChart = ({ data, width, height }) => {
   }, [
     data,
     width,
-    height,
     viewMode,
     barHeight,
     barSpacing,
@@ -5090,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: `587px`,
+        border: "1px solid #E9E9E9",
         borderRadius: "10px",
         backgroundColor: "#fff",
         overflow: "hidden"
@@ -5112,49 +5105,69 @@ var GanttChart = ({ data, width, height }) => {
             position: "relative"
           },
           children: [
-            /* @__PURE__ */ jsx48(RowOverlay, { data, barHeight, barSpacing, totalHeaderHeight }),
+            /* @__PURE__ */ jsx48("div", { className: "z-2", 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)) })
+                  ) })
                 ]
               }
             ),
@@ -5236,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 });
@@ -5249,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,
           {

package/package.json

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