cortex-react-components 3.3.0 → 4.0.2

package/dist/components/{DigitalColleagues/colleague-card.js → Projects/GanttView.js}

@@ -1,5 +1,6 @@
 "use client";
 "use strict";
+"use client"
 
 "use strict";
 "use client";
@@ -31,18 +32,15 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/components/DigitalColleagues/colleague-card.tsx
-var colleague_card_exports = {};
-__export(colleague_card_exports, {
-  ColleagueCard: () => ColleagueCard
+// src/components/Projects/GanttView.tsx
+var GanttView_exports = {};
+__export(GanttView_exports, {
+  GanttView: () => GanttView
 });
-module.exports = __toCommonJS(colleague_card_exports);
-var import_react = require("react");
-var import_lucide_react = require("lucide-react");
-
-// src/components/ui/avatar.tsx
-var React = __toESM(require("react"));
-var AvatarPrimitive = __toESM(require("@radix-ui/react-avatar"));
+module.exports = __toCommonJS(GanttView_exports);
+var import_react4 = require("react");
+var import_date_fns = require("date-fns");
+var import_lucide_react2 = require("lucide-react");
 
 // src/utils/cn.ts
 var import_clsx = require("clsx");
@@ -2512,68 +2510,12 @@ function cn(...inputs) {
   return twMerge((0, import_clsx.clsx)(inputs));
 }
 
-// src/components/ui/avatar.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var Avatar = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-  AvatarPrimitive.Root,
-  {
-    ref,
-    className: cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className),
-    ...props
-  }
-));
-Avatar.displayName = AvatarPrimitive.Root.displayName;
-var AvatarImage = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-  AvatarPrimitive.Image,
-  {
-    ref,
-    className: cn("aspect-square h-full w-full", className),
-    ...props
-  }
-));
-AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-var AvatarFallback = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-  AvatarPrimitive.Fallback,
-  {
-    ref,
-    className: cn(
-      "flex h-full w-full items-center justify-center rounded-full bg-muted",
-      className
-    ),
-    ...props
-  }
-));
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
-
-// src/components/ui/badge.tsx
-var import_class_variance_authority = require("class-variance-authority");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var badgeVariants = (0, import_class_variance_authority.cva)(
-  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-  {
-    variants: {
-      variant: {
-        default: "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
-        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        destructive: "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
-        outline: "text-foreground"
-      }
-    },
-    defaultVariants: {
-      variant: "default"
-    }
-  }
-);
-function Badge({ className, variant, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: cn(badgeVariants({ variant }), className), ...props });
-}
-
 // src/components/ui/button.tsx
 var import_react_slot = require("@radix-ui/react-slot");
-var import_class_variance_authority2 = require("class-variance-authority");
-var React2 = __toESM(require("react"));
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var buttonVariants = (0, import_class_variance_authority2.cva)(
+var import_class_variance_authority = require("class-variance-authority");
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var buttonVariants = (0, import_class_variance_authority.cva)(
   "inline-flex items-center justify-center whitespace-nowrap rounded text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   {
     defaultVariants: {
@@ -2599,64 +2541,81 @@ var buttonVariants = (0, import_class_variance_authority2.cva)(
     }
   }
 );
-var Button = React2.forwardRef(
+var Button = React.forwardRef(
   ({ asChild = false, className, size, variant, ...props }, ref) => {
     const Comp = asChild ? import_react_slot.Slot : "button";
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Comp, { className: cn(buttonVariants({ className, size, variant })), ref, ...props });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Comp, { className: cn(buttonVariants({ className, size, variant })), ref, ...props });
   }
 );
 Button.displayName = "Button";
 
-// src/components/ui/card.tsx
-var React3 = __toESM(require("react"));
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var Card = React3.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    "div",
-    {
-      ref,
-      className: cn("rounded-xl border bg-card text-card-foreground shadow", className),
-      ...props
+// src/components/Heros/DashboardHero/DashboardHero.tsx
+var import_react2 = require("react");
+var import_react3 = require("motion/react");
+
+// src/components/ui/badge.tsx
+var import_class_variance_authority2 = require("class-variance-authority");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var badgeVariants = (0, import_class_variance_authority2.cva)(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive: "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        outline: "text-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
     }
-  )
-);
-Card.displayName = "Card";
-var CardHeader = React3.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref, className: cn("flex flex-col space-y-1.5 p-6", className), ...props })
+  }
 );
-CardHeader.displayName = "CardHeader";
-var CardTitle = React3.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    "div",
-    {
-      ref,
-      className: cn("font-semibold leading-none tracking-tight", className),
-      ...props
+function Badge({ className, variant, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: cn(badgeVariants({ variant }), className), ...props });
+}
+
+// src/hooks/use-local-storage.ts
+var import_react = require("react");
+function useLocalStorage(key, initialValue) {
+  const [storedValue, setStoredValue] = (0, import_react.useState)(() => {
+    if (typeof window === "undefined") return initialValue;
+    try {
+      const item = window.localStorage.getItem(key);
+      return item ? JSON.parse(item) : initialValue;
+    } catch (error) {
+      return initialValue;
     }
-  )
-);
-CardTitle.displayName = "CardTitle";
-var CardDescription = React3.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref, className: cn("text-sm text-muted-foreground", className), ...props })
-);
-CardDescription.displayName = "CardDescription";
-var CardContent = React3.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref, className: cn("p-6 pt-0", className), ...props })
-);
-CardContent.displayName = "CardContent";
-var CardFooter = React3.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref, className: cn("flex items-center p-6 pt-0", className), ...props })
-);
-CardFooter.displayName = "CardFooter";
+  });
+  const setValue = (0, import_react.useCallback)((value) => {
+    try {
+      const valueToStore = value instanceof Function ? value(storedValue) : value;
+      setStoredValue(valueToStore);
+      if (typeof window !== "undefined") {
+        window.localStorage.setItem(key, JSON.stringify(valueToStore));
+      }
+    } catch (error) {
+    }
+  }, [key, storedValue]);
+  (0, import_react.useEffect)(() => {
+    setValue(storedValue);
+  }, []);
+  return [storedValue, setValue];
+}
+
+// src/components/Heros/DashboardHero/DashboardHero.tsx
+var import_fa = require("react-icons/fa");
+var import_lucide_react = require("lucide-react");
 
 // src/components/ui/dropdown-menu.tsx
-var React4 = __toESM(require("react"));
+var React2 = __toESM(require("react"));
 var DropdownMenuPrimitive = __toESM(require("@radix-ui/react-dropdown-menu"));
 var import_react_icons = require("@radix-ui/react-icons");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var DropdownMenu = DropdownMenuPrimitive.Root;
 var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-var DropdownMenuSubTrigger = React4.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+var DropdownMenuSubTrigger = React2.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
   DropdownMenuPrimitive.SubTrigger,
   {
     ref,
@@ -2668,12 +2627,12 @@ var DropdownMenuSubTrigger = React4.forwardRef(({ className, inset, children, ..
     ...props,
     children: [
       children,
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_icons.ChevronRightIcon, { className: "ml-auto" })
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_icons.ChevronRightIcon, { className: "ml-auto" })
     ]
   }
 ));
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-var DropdownMenuSubContent = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+var DropdownMenuSubContent = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
   DropdownMenuPrimitive.SubContent,
   {
     ref,
@@ -2685,7 +2644,7 @@ var DropdownMenuSubContent = React4.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-var DropdownMenuContent = React4.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+var DropdownMenuContent = React2.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
   DropdownMenuPrimitive.Content,
   {
     ref,
@@ -2699,7 +2658,7 @@ var DropdownMenuContent = React4.forwardRef(({ className, sideOffset = 4, ...pro
   }
 ) }));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = React4.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+var DropdownMenuItem = React2.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
   DropdownMenuPrimitive.Item,
   {
     ref,
@@ -2712,7 +2671,7 @@ var DropdownMenuItem = React4.forwardRef(({ className, inset, ...props }, ref) =
   }
 ));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var DropdownMenuCheckboxItem = React4.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+var DropdownMenuCheckboxItem = React2.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
   DropdownMenuPrimitive.CheckboxItem,
   {
     ref,
@@ -2723,13 +2682,13 @@ var DropdownMenuCheckboxItem = React4.forwardRef(({ className, children, checked
     checked,
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_icons.CheckIcon, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_icons.CheckIcon, { className: "h-4 w-4" }) }) }),
       children
     ]
   }
 ));
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-var DropdownMenuRadioItem = React4.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+var DropdownMenuRadioItem = React2.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
   DropdownMenuPrimitive.RadioItem,
   {
     ref,
@@ -2739,13 +2698,13 @@ var DropdownMenuRadioItem = React4.forwardRef(({ className, children, ...props }
     ),
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_icons.DotFilledIcon, { className: "h-4 w-4 fill-current" }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_icons.DotFilledIcon, { className: "h-4 w-4 fill-current" }) }) }),
       children
     ]
   }
 ));
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-var DropdownMenuLabel = React4.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+var DropdownMenuLabel = React2.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
   DropdownMenuPrimitive.Label,
   {
     ref,
@@ -2754,7 +2713,7 @@ var DropdownMenuLabel = React4.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-var DropdownMenuSeparator = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+var DropdownMenuSeparator = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
   DropdownMenuPrimitive.Separator,
   {
     ref,
@@ -2764,162 +2723,502 @@ var DropdownMenuSeparator = React4.forwardRef(({ className, ...props }, ref) =>
 ));
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 var DropdownMenuShortcut = ({ className, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: cn("ml-auto text-xs tracking-widest opacity-60", className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: cn("ml-auto text-xs tracking-widest opacity-60", className), ...props });
 };
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 
-// src/components/DigitalColleagues/colleague-card.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-function ColleagueCard({
-  colleague,
-  onEdit,
-  onDelete,
-  onViewDetails,
-  showActions = true,
-  compact = false,
+// src/components/Heros/DashboardHero/DashboardHero.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function DashboardHero({
+  title,
+  description,
+  badge,
+  primaryAction,
+  secondaryAction,
+  tertiaryAction,
+  gradient,
+  children,
   className
 }) {
-  const [isExpanded, setIsExpanded] = (0, import_react.useState)(false);
-  const getStatusColor = (status) => {
-    switch (status) {
-      case "active":
-        return "bg-green-500";
-      case "inactive":
-        return "bg-gray-500";
-      default:
-        return "bg-gray-500";
-    }
-  };
-  const getStatusText = (status) => {
-    switch (status) {
-      case "active":
-        return "Active";
-      case "inactive":
-        return "Inactive";
-      default:
-        return "Unknown";
-    }
-  };
-  const formatLastActive = (date) => {
-    if (!date) return "Never";
-    const now = /* @__PURE__ */ new Date();
-    const diffInMinutes = Math.floor((now.getTime() - date.getTime()) / (1e3 * 60));
-    if (diffInMinutes < 1) return "Just now";
-    if (diffInMinutes < 60) return `${diffInMinutes}m ago`;
-    if (diffInMinutes < 1440) return `${Math.floor(diffInMinutes / 60)}h ago`;
-    return `${Math.floor(diffInMinutes / 1440)}d ago`;
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Card, { className: cn("hover:shadow-md transition-shadow", compact && "p-2", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CardHeader, { className: cn("pb-3", compact && "pb-2"), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-start justify-between", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Avatar, { className: cn("h-12 w-12", compact && "h-8 w-8"), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AvatarImage, { src: "/placeholder.svg", alt: colleague.name }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AvatarFallback, { children: colleague.name.split(" ").map((n) => n[0]).join("") })
-        ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex-1 min-w-0", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h3", { className: cn("font-semibold text-sm truncate", compact && "text-xs"), children: colleague.name }),
-            colleague.type === "digital" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react.Bot, { className: cn("h-4 w-4 text-blue-500", compact && "h-3 w-3") }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react.User, { className: cn("h-4 w-4 text-green-500", compact && "h-3 w-3") })
+  const [minimized, setMinimized] = useLocalStorage(
+    `hero-section-minimized-${title.replace(/\s+/g, "-").toLowerCase()}`,
+    !secondaryAction && !description ? true : false
+  );
+  const [actionsMenuOpen, setActionsMenuOpen] = (0, import_react2.useState)(false);
+  const shouldBeMinimized = !secondaryAction && !description || minimized;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    import_react3.motion.div,
+    {
+      initial: { opacity: 0, y: 20 },
+      animate: { opacity: 1, y: 0 },
+      transition: { duration: 0.5 },
+      className: `overflow-hidden rounded-3xl ${gradient} p-8 text-white ${className || ""}`,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center justify-between mb-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-3", children: [
+            badge && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Badge, { className: "bg-white/20 text-white hover:bg-white/30 rounded-xl", children: badge }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h2", { className: "text-3xl font-bold m-0", children: title })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: cn("text-sm text-muted-foreground truncate", compact && "text-xs"), children: colleague.type === "human" ? colleague.role : colleague.description }),
-          !compact && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center gap-2 mt-1", children: [
-            colleague.type === "human" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Badge, { variant: "secondary", className: "text-xs", children: colleague.department }),
-            colleague.type === "digital" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Badge, { variant: "secondary", className: "text-xs", children: [
-              "v",
-              colleague.version
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-3", children: [
+            shouldBeMinimized && primaryAction && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              Button,
+              {
+                className: "rounded-2xl bg-white text-indigo-700 hover:bg-white/90",
+                onClick: primaryAction.onClick,
+                children: primaryAction.label
+              }
+            ),
+            shouldBeMinimized && (secondaryAction || tertiaryAction) && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(DropdownMenu, { open: actionsMenuOpen, onOpenChange: setActionsMenuOpen, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  className: "rounded-2xl bg-white/20 text-white hover:bg-white/30 p-2",
+                  "aria-label": "More actions",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react.EllipsisVertical, { size: 20 })
+                }
+              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(DropdownMenuContent, { align: "end", className: "w-48", children: [
+                secondaryAction && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DropdownMenuItem, { onClick: secondaryAction.onClick, children: secondaryAction.label }),
+                tertiaryAction && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DropdownMenuItem, { onClick: tertiaryAction.onClick, children: tertiaryAction.label })
+              ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Badge, { variant: "outline", className: "text-xs", children: getStatusText(colleague.status) })
+            (secondaryAction || description) && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "button",
+              {
+                "aria-label": minimized ? "Expand hero section" : "Minimize hero section",
+                className: "rounded-full bg-white/20 hover:bg-white/30 p-1 text-white transition-colors",
+                onClick: () => setMinimized(!minimized),
+                style: { lineHeight: 0 },
+                children: minimized ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_fa.FaChevronDown, { size: 22 }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_fa.FaChevronUp, { size: 22 })
+              }
+            )
           ] })
-        ] })
-      ] }),
-      showActions && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(DropdownMenu, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Button, { variant: "ghost", size: "icon", className: cn("h-8 w-8", compact && "h-6 w-6"), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react.MoreHorizontal, { className: cn("h-4 w-4", compact && "h-3 w-3") }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(DropdownMenuContent, { align: "end", children: [
-          colleague.type === "digital" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(DropdownMenuItem, { onClick: () => onViewDetails?.(colleague), children: [
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react.Settings, { className: "h-4 w-4 mr-2" }),
-              "View Details"
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(DropdownMenuItem, { onClick: () => onEdit?.(colleague), children: [
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react.Edit, { className: "h-4 w-4 mr-2" }),
-              "Edit"
+        ] }),
+        !shouldBeMinimized && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-col gap-6 md:flex-row md:items-center md:justify-between", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "max-w-[600px] text-white/80", children: description }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-wrap gap-3", children: [
+              primaryAction && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                Button,
+                {
+                  className: "rounded-2xl bg-white text-indigo-700 hover:bg-white/90",
+                  onClick: primaryAction.onClick,
+                  children: primaryAction.label
+                }
+              ),
+              secondaryAction && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                Button,
+                {
+                  variant: "outline",
+                  className: "rounded-2xl bg-transparent border-white text-white hover:bg-white/10",
+                  onClick: secondaryAction.onClick,
+                  children: secondaryAction.label
+                }
+              ),
+              tertiaryAction && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                Button,
+                {
+                  variant: "outline",
+                  className: "rounded-2xl bg-transparent border-white text-white hover:bg-white/10",
+                  onClick: tertiaryAction.onClick,
+                  children: tertiaryAction.label
+                }
+              )
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-            DropdownMenuItem,
+          children && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "hidden lg:block", children })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/utils/extract-id.ts
+var extractId = (field) => {
+  if (!field) return 0;
+  if (typeof field === "number") return field;
+  if (typeof field === "object" && field && "id" in field) return field.id;
+  return 0;
+};
+
+// src/components/Projects/GanttView.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var PHASE_LABELS = {
+  1: "Plan",
+  2: "Dev",
+  3: "Test",
+  4: "Deploy",
+  5: "Review",
+  6: "Maint.",
+  7: "Complete",
+  8: "Archive",
+  9: "Legacy"
+};
+var ZOOM_LEVELS = [
+  { label: "Quarter", dayWidth: 3 },
+  { label: "Month", dayWidth: 7 },
+  { label: "Week", dayWidth: 14 },
+  { label: "Day", dayWidth: 40 }
+];
+var ROW_HEIGHT = 48;
+var TIME_HEADER_HEIGHT = 60;
+var GanttView = ({
+  tasks,
+  epics,
+  sprints,
+  onTaskClick
+}) => {
+  const [dayWidth, setDayWidth] = (0, import_react4.useState)(7);
+  const [isFullscreen, setIsFullscreen] = (0, import_react4.useState)(false);
+  const scrollRef = (0, import_react4.useRef)(null);
+  const heroRef = (0, import_react4.useRef)(null);
+  const [heroHeight, setHeroHeight] = (0, import_react4.useState)(0);
+  (0, import_react4.useEffect)(() => {
+    const measure = () => {
+      if (heroRef.current) setHeroHeight(heroRef.current.offsetHeight);
+    };
+    const observer = new ResizeObserver(measure);
+    if (heroRef.current) observer.observe(heroRef.current);
+    return () => observer.disconnect();
+  }, []);
+  const { timelineStart, timelineEnd, totalDays } = (0, import_react4.useMemo)(() => {
+    if (epics.length === 0) {
+      const today = /* @__PURE__ */ new Date();
+      const start = (0, import_date_fns.addDays)(today, -14);
+      const end = (0, import_date_fns.addDays)(today, 76);
+      return { timelineStart: start, timelineEnd: end, totalDays: 90 };
+    }
+    const allDates = epics.flatMap((e) => [new Date(e.startDate), new Date(e.endDate)]);
+    const minTime = Math.min(...allDates.map((d) => d.getTime()));
+    const maxTime = Math.max(...allDates.map((d) => d.getTime()));
+    const paddedStart = (0, import_date_fns.addDays)(new Date(minTime), -14);
+    const paddedEnd = (0, import_date_fns.addDays)(new Date(maxTime), 14);
+    return {
+      timelineStart: paddedStart,
+      timelineEnd: paddedEnd,
+      totalDays: (0, import_date_fns.differenceInDays)(paddedEnd, paddedStart)
+    };
+  }, [epics]);
+  const { groups, sortedKeys } = (0, import_react4.useMemo)(() => {
+    const groups2 = {};
+    epics.forEach((epic) => {
+      if (!groups2[epic.name]) groups2[epic.name] = [];
+      groups2[epic.name].push(epic);
+    });
+    Object.values(groups2).forEach((list) => list.sort((a, b) => a.phase - b.phase));
+    const sortedKeys2 = Object.keys(groups2).sort((a, b) => {
+      const aMin = Math.min(...groups2[a].map((e) => new Date(e.startDate).getTime()));
+      const bMin = Math.min(...groups2[b].map((e) => new Date(e.startDate).getTime()));
+      return aMin - bMin;
+    });
+    return { groups: groups2, sortedKeys: sortedKeys2 };
+  }, [epics]);
+  const realSprints = (0, import_react4.useMemo)(
+    () => sprints.filter((s) => {
+      const name = s.name.toLowerCase();
+      return name !== "backlog" && name !== "all tasks";
+    }),
+    [sprints]
+  );
+  const monthHeaders = (0, import_react4.useMemo)(
+    () => (0, import_date_fns.eachMonthOfInterval)({ start: timelineStart, end: timelineEnd }).map((month) => ({
+      month,
+      left: (0, import_date_fns.differenceInDays)(month, timelineStart) * dayWidth
+    })),
+    [timelineStart, timelineEnd, dayWidth]
+  );
+  const totalWidth = Math.max(totalDays * dayWidth, 600);
+  const scrollToToday = (0, import_react4.useCallback)(() => {
+    if (scrollRef.current) {
+      const todayOffset = (0, import_date_fns.differenceInDays)(/* @__PURE__ */ new Date(), timelineStart) * dayWidth;
+      scrollRef.current.scrollLeft = Math.max(0, todayOffset - 200);
+    }
+  }, [timelineStart, dayWidth]);
+  const todayLeft = (0, import_date_fns.differenceInDays)(/* @__PURE__ */ new Date(), timelineStart) * dayWidth;
+  const getEpicStats = (epic) => {
+    const epicTasks = tasks.filter((t) => extractId(t.epic) === epic.id);
+    const done = epicTasks.filter((t) => t.status === "done").length;
+    const pct = epicTasks.length > 0 ? Math.round(done / epicTasks.length * 100) : 0;
+    return { total: epicTasks.length, done, pct };
+  };
+  const getGroupStats = (epicList) => {
+    const allTasks = epicList.flatMap(
+      (e) => tasks.filter((t) => extractId(t.epic) === e.id)
+    );
+    const done = allTasks.filter((t) => t.status === "done").length;
+    const pct = allTasks.length > 0 ? Math.round(done / allTasks.length * 100) : 0;
+    return { total: allTasks.length, done, pct };
+  };
+  const isSprintActive = (sprint) => {
+    const today = /* @__PURE__ */ new Date();
+    try {
+      return (0, import_date_fns.isWithinInterval)(today, {
+        start: new Date(sprint.startDate),
+        end: new Date(sprint.endDate)
+      });
+    } catch {
+      return false;
+    }
+  };
+  const chartContent = /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-1 min-h-0 overflow-hidden", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "w-52 flex-shrink-0 border-r bg-background z-10 flex flex-col", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "div",
+        {
+          className: "border-b flex items-end pb-2 px-3 flex-shrink-0 bg-muted/20",
+          style: { height: TIME_HEADER_HEIGHT },
+          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-xs font-semibold text-muted-foreground tracking-wider uppercase", children: "Epic" })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "overflow-y-auto flex-1", children: [
+        sortedKeys.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex items-center justify-center h-24 text-sm text-muted-foreground", children: "No epics" }),
+        sortedKeys.map((name) => {
+          const stats = getGroupStats(groups[name]);
+          return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+            "div",
             {
-              onClick: () => onDelete?.(colleague.id),
-              className: "text-destructive focus:text-destructive",
+              className: "flex flex-col justify-center px-3 border-b",
+              style: { height: ROW_HEIGHT },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react.Trash2, { className: "h-4 w-4 mr-2" }),
-                colleague.type === "digital" ? "Delete" : "Remove from team"
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-sm font-medium truncate", title: name, children: name }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "text-xs text-muted-foreground", children: [
+                  stats.total,
+                  " task",
+                  stats.total !== 1 ? "s" : "",
+                  " \xB7 ",
+                  stats.pct,
+                  "%"
+                ] })
               ]
-            }
-          )
-        ] })
+            },
+            name
+          );
+        })
       ] })
-    ] }) }),
-    !compact && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(CardContent, { className: "pt-0", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "space-y-2 text-sm", children: [
-        colleague.type === "human" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center gap-2 text-muted-foreground", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react.Mail, { className: "h-3 w-3" }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "truncate", children: colleague.email })
-        ] }),
-        colleague.type === "human" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-          colleague.phone && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center gap-2 text-muted-foreground", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react.Phone, { className: "h-3 w-3" }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: colleague.phone })
-          ] }),
-          colleague.location && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center gap-2 text-muted-foreground", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react.MapPin, { className: "h-3 w-3" }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: colleague.location })
-          ] })
-        ] }),
-        colleague.type === "digital" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center gap-2 text-muted-foreground", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react.Settings, { className: "h-3 w-3" }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { children: [
-            "v",
-            colleague.version
-          ] })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center gap-2 text-muted-foreground", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react.Clock, { className: "h-3 w-3" }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { children: [
-            "Last active: ",
-            formatLastActive(colleague.lastActive)
-          ] })
-        ] })
-      ] }),
-      colleague.type === "human" && colleague.skills && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "mt-3", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-wrap gap-1", children: [
-        colleague.skills.slice(0, isExpanded ? colleague.skills.length : 3).map((skill) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Badge, { variant: "outline", className: "text-xs", children: skill }, skill)),
-        colleague.skills.length > 3 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-          Button,
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex-1 overflow-x-auto overflow-y-auto", ref: scrollRef, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { width: totalWidth, position: "relative" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        "div",
+        {
+          className: "sticky top-0 border-b bg-muted/20 z-20 flex-shrink-0",
+          style: { height: TIME_HEADER_HEIGHT, width: totalWidth },
+          children: [
+            monthHeaders.map(({ month, left }) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "div",
+              {
+                className: "absolute top-2 text-xs font-semibold text-muted-foreground select-none",
+                style: { left: left + 4 },
+                children: (0, import_date_fns.format)(month, "MMM yyyy")
+              },
+              month.toISOString()
+            )),
+            realSprints.map((sprint) => {
+              const start = new Date(sprint.startDate);
+              const end = new Date(sprint.endDate);
+              if (start > timelineEnd || end < timelineStart) return null;
+              const left = Math.max(0, (0, import_date_fns.differenceInDays)(start, timelineStart) * dayWidth);
+              const right = Math.min(
+                totalWidth,
+                (0, import_date_fns.differenceInDays)(end, timelineStart) * dayWidth
+              );
+              const width = right - left;
+              if (width <= 0) return null;
+              const active = isSprintActive(sprint);
+              return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "div",
+                {
+                  className: `absolute bottom-0 border-l border-t text-xs px-1 overflow-hidden whitespace-nowrap select-none flex items-center ${active ? "border-primary/50 bg-primary/10 text-primary font-medium" : "border-border bg-muted/40 text-muted-foreground"}`,
+                  style: { left, width, height: 22 },
+                  title: sprint.name,
+                  children: sprint.name
+                },
+                `header-sprint-${sprint.id}`
+              );
+            })
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { position: "relative", width: totalWidth }, children: [
+        realSprints.map((sprint) => {
+          const start = new Date(sprint.startDate);
+          const end = new Date(sprint.endDate);
+          if (start > timelineEnd || end < timelineStart) return null;
+          const left = Math.max(0, (0, import_date_fns.differenceInDays)(start, timelineStart) * dayWidth);
+          const right = Math.min(
+            totalWidth,
+            (0, import_date_fns.differenceInDays)(end, timelineStart) * dayWidth
+          );
+          const width = right - left;
+          if (width <= 0 || !isSprintActive(sprint)) return null;
+          return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "div",
+            {
+              className: "absolute inset-y-0 bg-primary/5 pointer-events-none",
+              style: { left, width }
+            },
+            `bg-${sprint.id}`
+          );
+        }),
+        realSprints.map((sprint) => {
+          const left = (0, import_date_fns.differenceInDays)(new Date(sprint.startDate), timelineStart) * dayWidth;
+          if (left < 0 || left > totalWidth) return null;
+          const active = isSprintActive(sprint);
+          return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "div",
+            {
+              className: `absolute inset-y-0 pointer-events-none ${active ? "border-l border-primary/40" : "border-l border-dashed border-border/60"}`,
+              style: { left }
+            },
+            `line-${sprint.id}`
+          );
+        }),
+        todayLeft >= 0 && todayLeft <= totalWidth && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          "div",
           {
-            variant: "ghost",
-            size: "sm",
-            className: "h-5 px-2 text-xs",
-            onClick: () => setIsExpanded(!isExpanded),
-            children: isExpanded ? "Show less" : `+${colleague.skills.length - 3} more`
+            className: "absolute inset-y-0 pointer-events-none z-10",
+            style: { left: todayLeft },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "absolute inset-y-0 w-0.5 bg-destructive/50" }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "absolute top-1 -translate-x-1/2 w-2 h-2 rounded-full bg-destructive" })
+            ]
           }
-        )
-      ] }) }),
-      colleague.type === "digital" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "mt-3", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-wrap gap-1", children: [
-        colleague.capabilities.slice(0, isExpanded ? colleague.capabilities.length : 2).map((capability) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Badge, { variant: "outline", className: "text-xs", children: capability }, capability)),
-        colleague.capabilities.length > 2 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-          Button,
+        ),
+        monthHeaders.map(({ month, left }) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "div",
+          {
+            className: "absolute inset-y-0 border-l border-border/30 pointer-events-none",
+            style: { left }
+          },
+          `grid-${month.toISOString()}`
+        )),
+        sortedKeys.map((name) => {
+          const epicList = groups[name];
+          return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "div",
+            {
+              className: "border-b relative flex items-center",
+              style: { height: ROW_HEIGHT },
+              children: epicList.map((epic) => {
+                const start = new Date(epic.startDate);
+                const end = new Date(epic.endDate);
+                const left = (0, import_date_fns.differenceInDays)(start, timelineStart) * dayWidth;
+                const width = Math.max(8, (0, import_date_fns.differenceInDays)(end, start) * dayWidth);
+                const stats = getEpicStats(epic);
+                const phaseLabel = PHASE_LABELS[epic.phase] ?? `Phase ${epic.phase}`;
+                const showLabel = width >= 50;
+                const tooltip = [
+                  `${epic.name} \xB7 ${phaseLabel}`,
+                  epic.description ? epic.description : null,
+                  `${(0, import_date_fns.format)(start, "dd MMM yyyy")} \u2192 ${(0, import_date_fns.format)(end, "dd MMM yyyy")}`,
+                  `${stats.total} tasks \xB7 ${stats.pct}% complete`
+                ].filter(Boolean).join("\n");
+                return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                  "div",
+                  {
+                    className: "absolute rounded overflow-hidden cursor-pointer hover:ring-2 hover:ring-white/40 transition-all",
+                    style: { left, width, height: 32, top: 8 },
+                    title: tooltip,
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                        "div",
+                        {
+                          className: `absolute inset-0 ${epic.color}`,
+                          style: { opacity: 0.2 }
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                        "div",
+                        {
+                          className: `absolute inset-y-0 left-0 ${epic.color} transition-all`,
+                          style: { width: `${stats.pct}%`, opacity: 0.85 }
+                        }
+                      ),
+                      showLabel && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "absolute inset-0 flex items-center px-2 gap-1.5 z-10", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-xs font-semibold text-white drop-shadow truncate", children: phaseLabel }),
+                        stats.total > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "text-xs text-white/80 drop-shadow shrink-0", children: [
+                          stats.pct,
+                          "%"
+                        ] })
+                      ] })
+                    ]
+                  },
+                  epic.id
+                );
+              })
+            },
+            name
+          );
+        }),
+        sortedKeys.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "div",
           {
-            variant: "ghost",
-            size: "sm",
-            className: "h-5 px-2 text-xs",
-            onClick: () => setIsExpanded(!isExpanded),
-            children: isExpanded ? "Show less" : `+${colleague.capabilities.length - 2} more`
+            className: "flex items-center justify-center text-sm text-muted-foreground",
+            style: { height: 200 },
+            children: "No epics to display on the timeline"
           }
         )
-      ] }) })
-    ] })
+      ] })
+    ] }) })
   ] });
-}
+  const inner = /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `flex flex-col ${isFullscreen ? "h-screen" : "h-full"} overflow-hidden`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref: heroRef, className: "flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      DashboardHero,
+      {
+        title: "Gantt Chart",
+        description: "Epic timeline with sprint alignment and phase-based grouping.",
+        gradient: "bg-gradient-to-r from-indigo-600 via-blue-600 to-cyan-600",
+        badge: `${sortedKeys.length} epic${sortedKeys.length !== 1 ? "s" : ""}`
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-2 px-4 py-2 border-b bg-background flex-shrink-0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.BarChart2, { className: "h-4 w-4 text-muted-foreground" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex items-center gap-1", children: ZOOM_LEVELS.map((z) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        Button,
+        {
+          variant: dayWidth === z.dayWidth ? "default" : "outline",
+          size: "sm",
+          className: "h-7 px-2 text-xs",
+          onClick: () => setDayWidth(z.dayWidth),
+          children: z.label
+        },
+        z.label
+      )) }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex-1" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          className: "h-7 px-2 text-xs",
+          onClick: scrollToToday,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.Calendar, { className: "h-3 w-3 mr-1" }),
+            "Today"
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          className: "h-7 w-7 p-0",
+          onClick: () => setIsFullscreen((v) => !v),
+          title: isFullscreen ? "Exit fullscreen" : "Fullscreen",
+          children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.Minimize2, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.Maximize2, { className: "h-3.5 w-3.5" })
+        }
+      )
+    ] }),
+    chartContent
+  ] });
+  if (isFullscreen) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "fixed inset-0 z-50 bg-background overflow-hidden", children: inner });
+  }
+  return inner;
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  ColleagueCard
+  GanttView
 });