@almadar/ui 6.26.0 → 6.27.0

package/dist/runtime/index.js

@@ -31971,6 +31971,247 @@ var init_WizardNavigation = __esm({
     WizardNavigation.displayName = "WizardNavigation";
   }
 });
+function parseDay(value) {
+  if (value === void 0 || value === null || value === "") return null;
+  const d = value instanceof Date ? new Date(value.getTime()) : new Date(value);
+  if (Number.isNaN(d.getTime())) return null;
+  d.setHours(0, 0, 0, 0);
+  return d;
+}
+function Gantt({
+  tasks = [],
+  links = [],
+  titleField = "title",
+  startField = "start",
+  endField = "end",
+  durationField,
+  statusField = "status",
+  groupField = "",
+  rangeStart,
+  rangeEnd,
+  showToday = true,
+  dayWidth = 28,
+  barClickEvent,
+  className,
+  isLoading = false,
+  error = null
+}) {
+  const { t } = useTranslate();
+  const placed = useMemo(() => {
+    const rows = Array.isArray(tasks) ? tasks : tasks ? [tasks] : [];
+    const out = [];
+    rows.forEach((row, idx) => {
+      const start = parseDay(getNestedValue(row, startField));
+      if (!start) return;
+      let end = parseDay(getNestedValue(row, endField));
+      if (!end && durationField) {
+        const days2 = Number(getNestedValue(row, durationField));
+        if (Number.isFinite(days2) && days2 > 0) {
+          end = new Date(start.getTime() + days2 * DAY_MS);
+        }
+      }
+      if (!end || end.getTime() < start.getTime()) end = new Date(start.getTime() + DAY_MS);
+      out.push({
+        row,
+        id: String(row.id ?? idx),
+        label: String(getNestedValue(row, titleField) ?? ""),
+        status: String(getNestedValue(row, statusField) ?? "").toLowerCase(),
+        group: groupField ? String(getNestedValue(row, groupField) ?? "") : "",
+        start,
+        end
+      });
+    });
+    return out;
+  }, [tasks, titleField, startField, endField, durationField, statusField, groupField]);
+  const [axisStart, axisEnd] = useMemo(() => {
+    const lo = parseDay(rangeStart) ?? (placed.length ? new Date(Math.min(...placed.map((p) => p.start.getTime())) - 2 * DAY_MS) : new Date((/* @__PURE__ */ new Date()).setHours(0, 0, 0, 0)));
+    const hi = parseDay(rangeEnd) ?? (placed.length ? new Date(Math.max(...placed.map((p) => p.end.getTime())) + 2 * DAY_MS) : new Date(lo.getTime() + 30 * DAY_MS));
+    return hi.getTime() > lo.getTime() ? [lo, hi] : [lo, new Date(lo.getTime() + DAY_MS)];
+  }, [rangeStart, rangeEnd, placed]);
+  const totalDays = Math.round((axisEnd.getTime() - axisStart.getTime()) / DAY_MS);
+  const chartWidth = totalDays * dayWidth;
+  const dayOffset = (d) => (d.getTime() - axisStart.getTime()) / DAY_MS * dayWidth;
+  const displayItems = useMemo(() => {
+    if (!groupField) return placed.map((task) => ({ kind: "task", task }));
+    const items = [];
+    const seen = /* @__PURE__ */ new Set();
+    for (const task of placed) {
+      if (!seen.has(task.group)) {
+        seen.add(task.group);
+        items.push({ kind: "group", label: task.group || "\u2014" });
+      }
+      items.push({ kind: "task", task });
+    }
+    return items;
+  }, [placed, groupField]);
+  const barGeometry = useMemo(() => {
+    const offset = (d) => (d.getTime() - axisStart.getTime()) / DAY_MS * dayWidth;
+    const map = /* @__PURE__ */ new Map();
+    displayItems.forEach((item, idx) => {
+      if (item.kind !== "task") return;
+      const x0 = offset(item.task.start);
+      const x1 = Math.max(offset(item.task.end), x0 + dayWidth / 2);
+      map.set(item.task.id, { x0, x1, y: HEADER_HEIGHT + idx * ROW_HEIGHT + ROW_HEIGHT / 2 });
+    });
+    return map;
+  }, [displayItems, axisStart, dayWidth]);
+  const days = useMemo(() => {
+    const out = [];
+    for (let i = 0; i < totalDays; i++) out.push(new Date(axisStart.getTime() + i * DAY_MS));
+    return out;
+  }, [axisStart, totalDays]);
+  const todayOffset = useMemo(() => {
+    const today = parseDay(/* @__PURE__ */ new Date());
+    if (!today || today < axisStart || today > axisEnd) return null;
+    return (today.getTime() - axisStart.getTime()) / DAY_MS * dayWidth;
+  }, [axisStart, axisEnd, dayWidth]);
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(LoadingState, { message: t("common.loading"), className });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx(Box, { className: cn("p-4", className), children: /* @__PURE__ */ jsx(Typography, { variant: "body", color: "error", children: error.message }) });
+  }
+  if (placed.length === 0) {
+    return /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        title: t("empty.noData"),
+        className
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      className: cn("w-full overflow-auto rounded-md border border-border bg-card", className),
+      children: /* @__PURE__ */ jsxs(Box, { className: "relative", style: { width: LABEL_WIDTH + chartWidth, minWidth: "100%" }, children: [
+        /* @__PURE__ */ jsxs(HStack, { gap: "none", className: "sticky top-0 z-20 bg-card border-b border-border", style: { height: HEADER_HEIGHT }, children: [
+          /* @__PURE__ */ jsx(Box, { className: "sticky left-0 z-10 shrink-0 bg-card border-r border-border", style: { width: LABEL_WIDTH, height: HEADER_HEIGHT } }),
+          /* @__PURE__ */ jsx(Box, { className: "relative", style: { width: chartWidth, height: HEADER_HEIGHT }, children: days.map((day, i) => /* @__PURE__ */ jsx(
+            Box,
+            {
+              className: cn(
+                "absolute top-0 bottom-0 border-l border-border/50 flex items-end justify-center pb-1",
+                day.getDay() === 0 || day.getDay() === 6 ? "bg-muted/40" : void 0
+              ),
+              style: { left: i * dayWidth, width: dayWidth },
+              children: dayWidth >= 20 && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", children: day.getDate() })
+            },
+            i
+          )) })
+        ] }),
+        /* @__PURE__ */ jsxs(VStack, { gap: "none", className: "relative", children: [
+          displayItems.map(
+            (item, idx) => item.kind === "group" ? /* @__PURE__ */ jsxs(
+              HStack,
+              {
+                gap: "none",
+                className: "border-b border-border bg-muted/30",
+                style: { height: ROW_HEIGHT },
+                children: [
+                  /* @__PURE__ */ jsx(Box, { className: "sticky left-0 z-10 shrink-0 bg-muted/30 px-3 flex items-center border-r border-border", style: { width: LABEL_WIDTH, height: ROW_HEIGHT }, children: /* @__PURE__ */ jsx(Typography, { variant: "caption", weight: "semibold", children: item.label }) }),
+                  /* @__PURE__ */ jsx(Box, { style: { width: chartWidth, height: ROW_HEIGHT } })
+                ]
+              },
+              `g-${idx}`
+            ) : /* @__PURE__ */ jsxs(
+              HStack,
+              {
+                gap: "none",
+                className: "border-b border-border/50",
+                style: { height: ROW_HEIGHT },
+                children: [
+                  /* @__PURE__ */ jsx(Box, { className: "sticky left-0 z-10 shrink-0 bg-card px-3 flex items-center border-r border-border", style: { width: LABEL_WIDTH, height: ROW_HEIGHT }, children: /* @__PURE__ */ jsx(Typography, { variant: "small", className: "truncate", children: item.task.label }) }),
+                  /* @__PURE__ */ jsx(Box, { className: "relative", style: { width: chartWidth, height: ROW_HEIGHT }, children: /* @__PURE__ */ jsx(
+                    Box,
+                    {
+                      className: cn(
+                        "absolute top-1/2 -translate-y-1/2 h-4 rounded-sm transition-colors",
+                        STATUS_BAR[item.task.status] ?? "bg-primary/80 hover:bg-primary",
+                        barClickEvent ? "cursor-pointer" : void 0
+                      ),
+                      style: {
+                        left: dayOffset(item.task.start),
+                        width: Math.max(dayOffset(item.task.end) - dayOffset(item.task.start), dayWidth / 2)
+                      },
+                      action: barClickEvent,
+                      actionPayload: { id: item.task.id }
+                    }
+                  ) })
+                ]
+              },
+              item.task.id
+            )
+          ),
+          links.length > 0 && /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              className: "absolute pointer-events-none",
+              style: { left: LABEL_WIDTH, top: 0 },
+              width: chartWidth,
+              height: HEADER_HEIGHT + displayItems.length * ROW_HEIGHT,
+              children: [
+                /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("marker", { id: "gantt-arrow", markerWidth: "8", markerHeight: "8", refX: "7", refY: "4", orient: "auto", children: /* @__PURE__ */ jsx("path", { d: "M0,0 L8,4 L0,8 z", fill: "var(--muted-foreground, currentColor)" }) }) }),
+                links.map((link, i) => {
+                  const from = barGeometry.get(link.from);
+                  const to = barGeometry.get(link.to);
+                  if (!from || !to) return null;
+                  const midX = from.x1 + Math.max(8, (to.x0 - from.x1) / 2);
+                  return /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: `M ${from.x1} ${from.y} L ${midX} ${from.y} L ${midX} ${to.y} L ${to.x0} ${to.y}`,
+                      fill: "none",
+                      stroke: "var(--muted-foreground, currentColor)",
+                      strokeWidth: 1.5,
+                      markerEnd: "url(#gantt-arrow)"
+                    },
+                    i
+                  );
+                })
+              ]
+            }
+          ),
+          showToday && todayOffset !== null && /* @__PURE__ */ jsx(
+            Box,
+            {
+              className: "absolute top-0 bottom-0 w-0.5 bg-error/70 pointer-events-none",
+              style: { left: LABEL_WIDTH + todayOffset }
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+var DAY_MS, ROW_HEIGHT, HEADER_HEIGHT, LABEL_WIDTH, STATUS_BAR;
+var init_Gantt = __esm({
+  "components/core/molecules/Gantt.tsx"() {
+    "use client";
+    init_cn();
+    init_getNestedValue();
+    init_Box();
+    init_Stack();
+    init_Typography();
+    init_LoadingState();
+    init_EmptyState();
+    DAY_MS = 24 * 60 * 60 * 1e3;
+    ROW_HEIGHT = 36;
+    HEADER_HEIGHT = 44;
+    LABEL_WIDTH = 192;
+    STATUS_BAR = {
+      complete: "bg-success/80 hover:bg-success",
+      done: "bg-success/80 hover:bg-success",
+      active: "bg-primary/80 hover:bg-primary",
+      "in-progress": "bg-primary/80 hover:bg-primary",
+      blocked: "bg-error/80 hover:bg-error",
+      error: "bg-error/80 hover:bg-error",
+      "at-risk": "bg-warning/80 hover:bg-warning",
+      pending: "bg-muted-foreground/50 hover:bg-muted-foreground/70"
+    };
+    Gantt.displayName = "Gantt";
+  }
+});
 var RepeatableFormSection;
 var init_RepeatableFormSection = __esm({
   "components/core/molecules/RepeatableFormSection.tsx"() {
@@ -51399,6 +51640,7 @@ var init_component_registry_generated = __esm({
     init_GameIcon();
     init_GameMenu();
     init_GameShell();
+    init_Gantt();
     init_GenericAppTemplate();
     init_GeometricPattern();
     init_GradientDivider();
@@ -51678,6 +51920,7 @@ var init_component_registry_generated = __esm({
       "GameIcon": GameIcon,
       "GameMenu": GameMenu,
       "GameShell": GameShell,
+      "Gantt": Gantt,
       "GenericAppTemplate": GenericAppTemplate,
       "GeometricPattern": GeometricPattern,
       "GradientDivider": GradientDivider,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "6.26.0",
+  "version": "6.27.0",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [
@@ -118,11 +118,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@almadar/core": "^10.92.0",
-    "@almadar/evaluator": "^2.45.0",
+    "@almadar/core": "^10.93.0",
+    "@almadar/evaluator": "^2.46.0",
     "@almadar/logger": "^1.12.0",
-    "@almadar/runtime": "^6.79.0",
-    "@almadar/std": "^16.217.0",
+    "@almadar/runtime": "^6.81.0",
+    "@almadar/std": "^16.219.0",
     "@almadar/syntax": "^1.17.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",