@esic-lab/data-core-ui 0.0.56 → 0.0.58

package/dist/index.mjs

@@ -4053,7 +4053,8 @@ function ProfileSelect({
   assignUser,
   mode,
   className,
-  onUpdateAssignUser
+  onUpdateAssignUser,
+  placeholder
 }) {
   const [maxVisible, setMaxVisible] = useState18(4);
   const [userNotAssign, setUserNotAssign] = useState18([]);
@@ -4099,9 +4100,7 @@ function ProfileSelect({
   const visibleUsers = showPlus ? assignUser.slice(0, maxVisible - 1) : assignUser;
   const extraCount = assignUser.length - (maxVisible - 1);
   const normalizedSearch = search.trim().toLowerCase();
-  const filteredAssigned = normalizedSearch ? assignUser.filter(
-    (u) => u.name.toLowerCase().includes(normalizedSearch)
-  ) : assignUser;
+  const filteredAssigned = normalizedSearch ? assignUser.filter((u) => u.name.toLowerCase().includes(normalizedSearch)) : assignUser;
   const filteredUnassigned = normalizedSearch ? userNotAssign.filter(
     (u) => u.name.toLowerCase().includes(normalizedSearch)
   ) : userNotAssign;
@@ -4113,13 +4112,13 @@ function ProfileSelect({
         className: "p-2 border rounded cursor-pointer bg-white",
         onClick: () => setIsShowSelect(!isShowSelect)
       }
-    ) }) : mode === "showAssign" ? /* @__PURE__ */ jsxs36(
+    ) }) : mode === "showAssign" ? /* @__PURE__ */ jsx42(
       "div",
       {
-        className: `w-full h-[40px] flex -space-x-2 p-2 cursor-pointer ${className}`,
+        className: `w-full h-[40px] flex items-center p-2 cursor-pointer ${className}`,
         onClick: () => setIsShowSelect(!isShowSelect),
-        children: [
-          visibleUsers.map((user) => /* @__PURE__ */ jsx42("div", { className: "flex items-center cursor-point", children: /* @__PURE__ */ jsxs36("label", { className: "relative group cursor-pointer", children: [
+        children: visibleUsers.length === 0 ? placeholder ? /* @__PURE__ */ jsx42("span", { className: "body-1 text-gray-400 select-none", children: placeholder }) : null : /* @__PURE__ */ jsxs36(Fragment8, { children: [
+          /* @__PURE__ */ jsx42("div", { className: "flex -space-x-2", children: visibleUsers.map((user) => /* @__PURE__ */ jsx42("div", { className: "flex items-center", children: /* @__PURE__ */ jsxs36("label", { className: "relative group cursor-pointer", children: [
             /* @__PURE__ */ jsx42(
               "img",
               {
@@ -4136,16 +4135,19 @@ function ProfileSelect({
             /* @__PURE__ */ jsx42(
               "span",
               {
-                className: "absolute top-0 right-0 -translate-y-2 translate-x-2 \r\n               rounded-full bg-white opacity-0 group-hover:opacity-100 \r\n               border-3 z-10 border-red-500 flex items-center justify-center transition",
-                onClick: () => onUpdateAssignUser(user, "remove"),
+                className: "absolute top-0 right-0 -translate-y-2 translate-x-2 \r\n                  rounded-full bg-white opacity-0 group-hover:opacity-100 \r\n                  border-3 z-10 border-red-500 flex items-center justify-center transition",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onUpdateAssignUser(user, "remove");
+                },
                 children: /* @__PURE__ */ jsx42(IconX4, { className: "w-4 h-4 text-red-500" })
               }
             )
-          ] }) }, user.id)),
+          ] }) }, user.id)) }),
           showPlus && /* @__PURE__ */ jsxs36(
             "div",
             {
-              className: "border border-white flex items-center justify-center bg-gray-300 text-black text-sm",
+              className: "border border-white flex items-center justify-center bg-gray-300 text-black text-sm ml-2",
               style: {
                 width: avatarSize,
                 height: avatarSize,
@@ -4157,7 +4159,7 @@ function ProfileSelect({
               ]
             }
           )
-        ]
+        ] })
       }
     ) : /* @__PURE__ */ jsxs36("div", { className: `w-full h-[40px] flex -space-x-2 p-2 ${className}`, children: [
       visibleUsers.map((user) => /* @__PURE__ */ jsx42("div", { className: "flex items-center ", children: /* @__PURE__ */ jsx42("label", { className: "relative group ", children: /* @__PURE__ */ jsx42(
@@ -4288,7 +4290,7 @@ var QRCodeGenerator = ({
   fileBaseName = "qr-code"
 }) => {
   const canvasRef = useRef7(null);
-  const [format4, setFormat] = useState19("png");
+  const [format5, setFormat] = useState19("png");
   const [exportSize, setExportSize] = useState19(defaultExportSize);
   const sizeOption = [
     {
@@ -4342,7 +4344,7 @@ var QRCodeGenerator = ({
   }, [url, previewSize]);
   const download = async () => {
     try {
-      if (format4 === "svg") {
+      if (format5 === "svg") {
         const svgString = await QRCode.toString(url, {
           type: "svg",
           width: exportSize,
@@ -4358,9 +4360,9 @@ var QRCodeGenerator = ({
           width: exportSize,
           margin: 1
         });
-        const mime = format4 === "png" ? "image/png" : "image/jpeg";
-        const dataURL = format4 === "jpeg" ? offscreen.toDataURL(mime, 0.92) : offscreen.toDataURL(mime);
-        triggerDownload(dataURL, `${fileBaseName}.${format4}`);
+        const mime = format5 === "png" ? "image/png" : "image/jpeg";
+        const dataURL = format5 === "jpeg" ? offscreen.toDataURL(mime, 0.92) : offscreen.toDataURL(mime);
+        triggerDownload(dataURL, `${fileBaseName}.${format5}`);
       }
     } catch (err) {
       console.error("Failed to generate QR export:", err);
@@ -4393,7 +4395,7 @@ var QRCodeGenerator = ({
               SelectField,
               {
                 label: "\u0E23\u0E39\u0E1B\u0E41\u0E1A\u0E1A",
-                value: format4,
+                value: format5,
                 onChange: (e) => setFormat(e.target.value),
                 options: typeOption
               }
@@ -4531,11 +4533,32 @@ var BarChart = ({
       (enter) => enter.append("text").attr("class", "x-axis-label").attr("fill", "currentColor").attr("x", width).attr("y", height - margin.bottom).attr("text-anchor", "middle").style("font-size", "14px").style("font-family", "Arial").text((d) => d),
       (update) => update.text((d) => d).attr("x", width)
     );
-    const t = svg.transition().duration(400);
+    const t = d3.transition().duration(400);
     const bars = g.selectAll("rect.bar").data(data, (d) => d.x);
     bars.join(
-      (enter) => enter.append("rect").attr("class", "bar").attr("x", (d) => margin.left).attr("width", x.bandwidth()).attr("y", () => margin.top + y(0)).attr("height", () => innerH - y(0)).attr("rx", 5).attr("ry", 5).style("fill", (d, i) => colorPalette[i % colorPalette.length]).append("title").text((d) => `${d.x}: ${d.y}`).merge(bars).attr("width", x.bandwidth()).attr("y", (d) => y(d.y)).attr("height", (d) => innerH - y(d.y)).call((enter2) => enter2.raise()),
-      // Bring the new bars to the front
+      // (enter) =>
+      //   enter
+      //     .append("rect")
+      //     .attr("class", "bar")
+      //     .attr("x", (d) => margin.left)
+      //     .attr("width", x.bandwidth())
+      //     .attr("y", () => margin.top + y(0))
+      //     .attr("height", () => innerH - y(0))
+      //     .attr("rx", 5) // rounded corners
+      //     .attr("ry", 5) // rounded corners
+      //     .style("fill", (d, i) => colorPalette[i % colorPalette.length]) // Apply color based on index
+      //     .append("title")
+      //     .text((d) => `${d.x}: ${d.y}`)
+      //     .merge(bars) // merge the existing bars after joining
+      //     .attr("width", x.bandwidth())
+      //     .attr("y", (d) => y(d.y))
+      //     .attr("height", (d) => innerH - y(d.y))
+      //     .call((enter) => enter.raise()), // Bring the new bars to the front
+      (enter) => {
+        const rects = enter.append("rect").attr("class", "bar").attr("x", (d) => margin.left).attr("width", x.bandwidth()).attr("y", () => margin.top + y(0)).attr("height", () => innerH - y(0)).attr("rx", 5).attr("ry", 5).style("fill", (d, i) => colorPalette[i % colorPalette.length]);
+        rects.append("title").text((d) => `${d.x}: ${d.y}`);
+        return rects.merge(bars).attr("width", x.bandwidth()).attr("y", (d) => y(d.y)).attr("height", (d) => innerH - y(d.y)).call((g2) => g2.raise());
+      },
       (update) => update.call((update2) => update2.raise()).transition(t).attr("x", (d) => x(d.x) ?? 0).attr("width", x.bandwidth()).attr("y", (d) => y(d.y)).attr("height", (d) => innerH - y(d.y)).style("fill", (d, i) => colorPalette[i % colorPalette.length]),
       // Update color on update
       (exit) => exit.transition(t).attr("y", margin.top + y(0)).attr("height", innerH - y(0)).remove()
@@ -4606,6 +4629,466 @@ var PieChart = ({
     ] })
   ] });
 };
+
+// src/GanttChart/GanttChart.tsx
+import { useEffect as useEffect11, useRef as useRef10, useState as useState20 } from "react";
+import * as d33 from "d3";
+import {
+  format as format4,
+  getWeek,
+  eachWeekOfInterval,
+  startOfYear,
+  endOfYear,
+  startOfDay,
+  addDays,
+  eachHourOfInterval
+} from "date-fns";
+import { jsx as jsx47, jsxs as jsxs41 } from "react/jsx-runtime";
+var LAYOUT = {
+  barHeight: 40,
+  barSpacing: 10,
+  headersGroupLayer1Height: 30,
+  headersGroupLayer2Height: 35
+};
+var HEADER_FONTS = {
+  layer1: 16,
+  layer2: 12
+};
+var VIEW_MODE_SCALE = {
+  year: 0.5,
+  month: 2,
+  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."
+};
+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;
+  return localZero || utcZero;
+};
+var getAdjustedStart = (d) => {
+  if (!d.startDate && d.endDate) {
+    const endDate = d.endDate;
+    const quarter = Math.floor(endDate.getMonth() / 3);
+    const monthIndex = quarter * 3;
+    return startOfDay(new Date(endDate.getFullYear(), monthIndex, 1));
+  }
+  if (d.startDate) {
+    return isDateOnlyValue(d.startDate) ? startOfDay(d.startDate) : d.startDate;
+  }
+  return startOfDay(/* @__PURE__ */ new Date());
+};
+var getAdjustedEnd = (d) => {
+  if (!d.startDate && d.endDate) {
+    const endDate = d.endDate;
+    const quarter = Math.floor(endDate.getMonth() / 3);
+    const endMonth = (quarter + 1) * 3;
+    return startOfDay(addDays(new Date(endDate.getFullYear(), endMonth, 0), 1));
+  }
+  if (d.endDate) {
+    return isDateOnlyValue(d.endDate) ? startOfDay(addDays(d.endDate, 1)) : d.endDate;
+  }
+  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 }) => {
+  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);
+  return /* @__PURE__ */ jsxs41(
+    "div",
+    {
+      style: {
+        display: "grid",
+        gridTemplateColumns: "200px 100px 100px 100px",
+        alignItems: "center",
+        height: `${barHeight}px`,
+        fontSize: "12px",
+        marginBottom: `${barSpacing}px`
+      },
+      children: [
+        /* @__PURE__ */ jsxs41("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+          /* @__PURE__ */ jsx47(
+            "span",
+            {
+              style: {
+                display: "inline-block",
+                width: "10px",
+                height: "10px",
+                borderRadius: "50%",
+                backgroundColor: element.color || "#999"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx47("span", { style: { color: "#333" }, children: element.label })
+        ] }),
+        /* @__PURE__ */ jsx47("div", { style: { color: "#666" }, children: formatThaiDate(safeStartDate) }),
+        /* @__PURE__ */ jsx47("div", { style: { color: "#666" }, children: formatThaiDate(safeEndDate) }),
+        /* @__PURE__ */ jsx47(
+          "button",
+          {
+            style: {
+              height: `${barHeight}px`,
+              minWidth: "100%",
+              padding: "4px 8px",
+              borderRadius: "4px",
+              fontSize: "11px",
+              backgroundColor: statusColor,
+              color: "#000",
+              border: "none",
+              cursor: "pointer"
+            },
+            children: statusLabel
+          }
+        )
+      ]
+    },
+    element.id
+  );
+};
+var RowOverlay = ({ data, barHeight, barSpacing, totalHeaderHeight }) => /* @__PURE__ */ jsx47(
+  "div",
+  {
+    style: {
+      position: "absolute",
+      top: `${totalHeaderHeight + 10}px`,
+      left: 0,
+      right: 0,
+      height: `${data.length * (barHeight + barSpacing)}px`,
+      pointerEvents: "none",
+      zIndex: 5
+    },
+    children: data.map((d, i) => {
+      if (i === 0) return null;
+      const yPos = i * (barHeight + barSpacing) - barSpacing / 2;
+      return /* @__PURE__ */ jsx47(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            top: `${yPos}px`,
+            left: 0,
+            right: 0,
+            height: "1px",
+            backgroundColor: "#d0d0d0"
+          }
+        },
+        `row-line-${d.id}`
+      );
+    })
+  }
+);
+var GanttChart = ({ data, width, height }) => {
+  const svgRef = useRef10(null);
+  const leftPanelRef = useRef10(null);
+  const dataContainerRef = useRef10(null);
+  const [viewMode] = useState20("year");
+  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 borderRadius = 5;
+    if (leftPanelRef.current) {
+      leftPanelRef.current.style.height = `${containerHeight}px`;
+    }
+    if (dataContainerRef.current) {
+      dataContainerRef.current.style.marginTop = "0px";
+    }
+    const svg = d33.select(svgRef.current).attr("width", containerWidth).attr("height", containerHeight).style("background-color", "white");
+    svg.selectAll("*").remove();
+    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 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))) || []
+    });
+    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);
+      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}`);
+      const quarters2 = [];
+      buckets.uniqueYears.forEach((year) => {
+        for (let q = 0; q < 4; q++) {
+          quarters2.push(new Date(year.getFullYear(), q * 3, 1));
+        }
+      });
+      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));
+        return newXScale(nextQuarter) - newXScale(d);
+      }).attr("height", headersGroupLayer2Height).style("fill", "#fff").style("stroke", "#999").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));
+        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");
+      });
+    };
+    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);
+    };
+    const getGridlineData = (mode, buckets, domain) => {
+      if (mode === "year") return buckets.uniqueMonths;
+      if (mode === "month") return buckets.uniqueWeeks;
+      if (mode === "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);
+    };
+    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.lower();
+    };
+    const drawBarsAndLabels = (group, newXScale, getYPosition) => {
+      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);
+      });
+      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");
+      labelSelection.each(function(d) {
+        const barWidth = newXScale(getAdjustedEnd(d)) - newXScale(getAdjustedStart(d));
+        const headWidth = Math.min(barWidth * 0.5, 20);
+        const availableInsideWidth = barWidth - headWidth - labelPadding;
+        const insideX = newXScale(getAdjustedStart(d)) + headWidth + labelPadding;
+        const textElement = d33.select(this);
+        const textWidth = this.getComputedTextLength();
+        if (textWidth > availableInsideWidth) {
+          textElement.attr("x", newXScale(getAdjustedEnd(d)) + labelPadding).attr("data-label-position", "outside");
+        } else {
+          textElement.attr("x", insideX).attr("data-label-position", "inside");
+        }
+      });
+    };
+    const renderChart = (transform) => {
+      const headerMarginBottom = 10;
+      const getYPosition = (index) => headerMarginBottom + index * (barHeight + barSpacing);
+      const newXScale = transform.rescaleX(xScale);
+      chartGroup.selectAll("*").remove();
+      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());
+      drawGridlines(headersGroupLayer2, gridlineData, newXScale);
+      drawRowSeparators(chartGroup, getYPosition);
+      drawBarsAndLabels(chartGroup, newXScale, getYPosition);
+    };
+    const fixedScale = VIEW_MODE_SCALE[viewMode];
+    const dragBehavior = d33.zoom().scaleExtent([fixedScale, fixedScale]).on("zoom", (event) => {
+      const constrainedTransform = d33.zoomIdentity.translate(event.transform.x, event.transform.y).scale(fixedScale);
+      renderChart(constrainedTransform);
+    });
+    svg.call(dragBehavior);
+    const todayPosition = xScale(/* @__PURE__ */ new Date());
+    const translateX = width + leftPanelRef.current.offsetWidth * 1.5 - todayPosition * fixedScale;
+    const initialTransform = d33.zoomIdentity.translate(translateX, 0).scale(fixedScale);
+    svg.call(dragBehavior.transform, initialTransform);
+  }, [
+    data,
+    width,
+    height,
+    viewMode,
+    barHeight,
+    barSpacing,
+    totalHeaderHeight,
+    headersGroupLayer1Height,
+    headersGroupLayer2Height
+  ]);
+  return /* @__PURE__ */ jsx47(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        padding: "20px",
+        width: `${width}px`,
+        height: `${height}px`,
+        border: "1px solid #ccc",
+        borderRadius: "10px",
+        backgroundColor: "#fff",
+        overflow: "hidden"
+      },
+      children: /* @__PURE__ */ jsxs41(
+        "div",
+        {
+          style: {
+            display: "flex",
+            flex: 1,
+            overflow: "auto",
+            overflowX: "hidden",
+            position: "relative"
+          },
+          children: [
+            /* @__PURE__ */ jsx47(RowOverlay, { data, barHeight, barSpacing, totalHeaderHeight }),
+            /* @__PURE__ */ jsxs41(
+              "div",
+              {
+                ref: leftPanelRef,
+                style: {
+                  width: "520px",
+                  minWidth: "500px",
+                  display: "flex",
+                  flexDirection: "column",
+                  backgroundColor: "#fff",
+                  borderRight: "1px solid #ddd",
+                  zIndex: 2
+                },
+                children: [
+                  /* @__PURE__ */ jsxs41(
+                    "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"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx47("div", { children: "\u0E42\u0E04\u0E23\u0E07\u0E01\u0E32\u0E23" }),
+                        /* @__PURE__ */ jsx47("div", { children: "\u0E27\u0E31\u0E19\u0E40\u0E23\u0E34\u0E48\u0E21" }),
+                        /* @__PURE__ */ jsx47("div", { children: "\u0E01\u0E33\u0E2B\u0E19\u0E14\u0E2A\u0E48\u0E07" }),
+                        /* @__PURE__ */ jsx47("div", { children: "\u0E2A\u0E16\u0E32\u0E19\u0E30" })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx47("div", { ref: dataContainerRef, children: data.map((element) => /* @__PURE__ */ jsx47(ProjectRow, { element, barHeight, barSpacing }, element.id)) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx47(
+              "div",
+              {
+                style: {
+                  flex: 1,
+                  minWidth: 0,
+                  position: "relative",
+                  overflow: "visible"
+                },
+                children: /* @__PURE__ */ jsx47(
+                  "div",
+                  {
+                    style: {
+                      position: "absolute",
+                      right: 0,
+                      width: "max-content",
+                      zIndex: 1
+                    },
+                    children: /* @__PURE__ */ jsx47("svg", { ref: svgRef })
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
 export {
   AntDModal,
   AntDataTable,
@@ -4621,6 +5104,7 @@ export {
   DatePickerRange,
   FileUploader,
   FilterPopUp,
+  GanttChart,
   GhostButton,
   HeadingPage,
   Indicator,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@esic-lab/data-core-ui",
-  "version": "0.0.56",
+  "version": "0.0.58",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -41,8 +41,7 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "build": "tsup src/index.ts --format esm,cjs --out-dir dist && npm run copy-assets",
-    "build:dts": "tsup src/index.ts --dts --dts-resolve --out-dir dist",
+    "build": "tsup src/index.ts --dts --dts-resolve --format esm,cjs --out-dir dist && npm run copy-assets",
     "copy-assets": "xcopy src\\assets dist\\assets /E /I /Y",
     "type-check": "tsc --noEmit"
   },
@@ -56,6 +55,7 @@
   "description": "STO-core-UI",
   "dependencies": {
     "@ant-design/icons": "^5.6.1",
+    "date-fns": "^4.1.0",
     "@fortawesome/free-solid-svg-icons": "^7.0.1",
     "@fortawesome/react-fontawesome": "^3.0.2",
     "@fullcalendar/core": "^6.1.19",
@@ -68,7 +68,6 @@
     "classnames": "^2.5.1",
     "cuid": "^3.0.0",
     "d3": "^7.9.0",
-    "date-fns": "^4.1.0",
     "fullcalendar": "^6.1.19",
     "qrcode": "^1.5.4"
   },