@j3m-quantum/ui 1.12.1 → 2.1.0

package/dist/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var React29 = require('react');
+var React27 = require('react');
 var reactSlot = require('@radix-ui/react-slot');
 var classVarianceAuthority = require('class-variance-authority');
 var clsx = require('clsx');
@@ -73,7 +73,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React29__namespace = /*#__PURE__*/_interopNamespace(React29);
+var React27__namespace = /*#__PURE__*/_interopNamespace(React27);
 var SeparatorPrimitive__namespace = /*#__PURE__*/_interopNamespace(SeparatorPrimitive);
 var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimitive);
 var RadioGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(RadioGroupPrimitive);
@@ -108,8 +108,8 @@ var tunnel__default = /*#__PURE__*/_interopDefault(tunnel);
 // src/hooks/use-mobile.ts
 var MOBILE_BREAKPOINT = 768;
 function useIsMobile() {
-  const [isMobile, setIsMobile] = React29__namespace.useState(void 0);
-  React29__namespace.useEffect(() => {
+  const [isMobile, setIsMobile] = React27__namespace.useState(void 0);
+  React27__namespace.useEffect(() => {
     const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
     const onChange = () => {
       setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
@@ -123,6 +123,53 @@ function useIsMobile() {
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
+var statusCellFillClasses = {
+  // Green - complete/valid/ready state
+  complete: {
+    bg: "bg-green-50/50 dark:bg-green-950/30"},
+  ready: {
+    combined: "border-l-[3px] border-l-green-500 bg-green-50/50 dark:bg-green-950/30"
+  },
+  // Amber - warning/attention state
+  warning: {
+    bg: "bg-amber-50/50 dark:bg-amber-950/30"},
+  // Red - critical/risk state
+  critical: {
+    bg: "bg-red-50/50 dark:bg-red-950/30"},
+  risk: {
+    combined: "border-l-[3px] border-l-red-500 bg-red-50/50 dark:bg-red-950/30"
+  },
+  // Grey - normal/pending/neutral state (on track but not complete)
+  normal: {
+    combined: "border-l-[3px] border-l-muted-foreground/40 bg-muted/30 dark:bg-muted/20"
+  },
+  // Shipped - distinct muted state with green accent (greyed out + check)
+  shipped: {
+    combined: "border-l-[3px] border-l-green-500/50 bg-muted/50 dark:bg-muted/30"
+  }
+};
+var statusCellTextClasses = {
+  ready: {
+    title: "text-foreground",
+    subtitle: "text-green-700/80 dark:text-green-300/80",
+    icon: "text-green-600 dark:text-green-400"
+  },
+  risk: {
+    title: "text-foreground",
+    subtitle: "text-red-700/80 dark:text-red-300/80",
+    icon: "text-red-600 dark:text-red-400"
+  },
+  normal: {
+    title: "text-foreground",
+    subtitle: "text-muted-foreground",
+    icon: "text-muted-foreground"
+  },
+  shipped: {
+    title: "text-muted-foreground",
+    subtitle: "text-muted-foreground/70",
+    icon: "text-green-600/70 dark:text-green-400/70"
+  }
+};
 var buttonVariants = classVarianceAuthority.cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
@@ -150,7 +197,7 @@ var buttonVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Button = React29__namespace.forwardRef(
+var Button = React27__namespace.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? reactSlot.Slot : "button";
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -514,7 +561,7 @@ function Slider({
   max = 100,
   ...props
 }) {
-  const _values = React29__namespace.useMemo(
+  const _values = React27__namespace.useMemo(
     () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max],
     [value, defaultValue, min, max]
   );
@@ -800,7 +847,7 @@ function Toggle({
     }
   );
 }
-var ToggleGroupContext = React29__namespace.createContext({
+var ToggleGroupContext = React27__namespace.createContext({
   size: "default",
   variant: "default",
   spacing: 0
@@ -837,7 +884,7 @@ function ToggleGroupItem({
   size,
   ...props
 }) {
-  const context = React29__namespace.useContext(ToggleGroupContext);
+  const context = React27__namespace.useContext(ToggleGroupContext);
   return /* @__PURE__ */ jsxRuntime.jsx(
     ToggleGroupPrimitive__namespace.Item,
     {
@@ -867,7 +914,7 @@ function ThemeSwitch({
   className,
   size = "default"
 }) {
-  const [isChecked, setIsChecked] = React29__namespace.useState(defaultChecked);
+  const [isChecked, setIsChecked] = React27__namespace.useState(defaultChecked);
   const isControlled = checked !== void 0;
   const currentChecked = isControlled ? checked : isChecked;
   const handleClick = () => {
@@ -1287,7 +1334,7 @@ function Label2({
   );
 }
 var Form = reactHookForm.FormProvider;
-var FormFieldContext = React29__namespace.createContext(
+var FormFieldContext = React27__namespace.createContext(
   {}
 );
 var FormField = ({
@@ -1296,8 +1343,8 @@ var FormField = ({
   return /* @__PURE__ */ jsxRuntime.jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsxRuntime.jsx(reactHookForm.Controller, { ...props }) });
 };
 var useFormField = () => {
-  const fieldContext = React29__namespace.useContext(FormFieldContext);
-  const itemContext = React29__namespace.useContext(FormItemContext);
+  const fieldContext = React27__namespace.useContext(FormFieldContext);
+  const itemContext = React27__namespace.useContext(FormItemContext);
   const { getFieldState } = reactHookForm.useFormContext();
   const formState = reactHookForm.useFormState({ name: fieldContext.name });
   const fieldState = getFieldState(fieldContext.name, formState);
@@ -1314,11 +1361,11 @@ var useFormField = () => {
     ...fieldState
   };
 };
-var FormItemContext = React29__namespace.createContext(
+var FormItemContext = React27__namespace.createContext(
   {}
 );
 function FormItem({ className, ...props }) {
-  const id = React29__namespace.useId();
+  const id = React27__namespace.useId();
   return /* @__PURE__ */ jsxRuntime.jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -1566,7 +1613,7 @@ function FieldError({
   errors,
   ...props
 }) {
-  const content = React29.useMemo(() => {
+  const content = React27.useMemo(() => {
     if (children) {
       return children;
     }
@@ -1597,6 +1644,166 @@ function FieldError({
     }
   );
 }
+var iconMap = {
+  factory: lucideReact.Factory,
+  truck: lucideReact.Truck,
+  check: lucideReact.Check,
+  alert: lucideReact.AlertTriangle,
+  trending: lucideReact.TrendingUp
+};
+var statusColorMap = {
+  normal: "text-muted-foreground",
+  success: "text-green-600 dark:text-green-400",
+  warning: "text-amber-600 dark:text-amber-400",
+  critical: "text-red-600 dark:text-red-400"
+};
+function InsightBar({ metrics, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "insight-bar",
+      className: cn(
+        "flex flex-wrap items-center gap-6 px-4 py-3",
+        "border-b border-border bg-muted/20",
+        className
+      ),
+      children: metrics.map((metric) => {
+        const Icon2 = metric.icon ? iconMap[metric.icon] : null;
+        const statusColor = metric.status ? statusColorMap[metric.status] : "text-foreground";
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: "flex items-center gap-2",
+            children: [
+              Icon2 && /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: cn("h-4 w-4", statusColor) }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline gap-1.5", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
+                  "text-lg font-semibold tabular-nums",
+                  statusColor
+                ), children: metric.isPercentage ? `${Math.round(metric.value)}%` : metric.value.toLocaleString(void 0, { maximumFractionDigits: 1 }) }),
+                metric.unit && !metric.isPercentage && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: metric.unit }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: metric.label })
+              ] })
+            ]
+          },
+          metric.key
+        );
+      })
+    }
+  );
+}
+var iconMap2 = {
+  factory: lucideReact.Factory,
+  truck: lucideReact.Truck,
+  check: lucideReact.Check
+};
+var statusBgMap = {
+  normal: "bg-muted/30",
+  complete: statusCellFillClasses.complete.bg,
+  warning: statusCellFillClasses.warning.bg,
+  critical: statusCellFillClasses.critical.bg
+};
+var statusTextMap = {
+  normal: "text-muted-foreground",
+  complete: "text-green-700 dark:text-green-300",
+  warning: "text-amber-700 dark:text-amber-300",
+  critical: "text-red-700 dark:text-red-300"
+};
+function ColumnSummaryCell({
+  data,
+  widthClass = "min-w-[120px]",
+  className
+}) {
+  const status = data.status || "normal";
+  const bgClass = statusBgMap[status];
+  const textClass = statusTextMap[status];
+  const isClickable = !!data.onClick;
+  const PrimaryIcon = data.primary?.icon ? iconMap2[data.primary.icon] : null;
+  const SecondaryIcon = data.secondary?.icon ? iconMap2[data.secondary.icon] : null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: isClickable ? "button" : void 0,
+      tabIndex: isClickable ? 0 : void 0,
+      onClick: data.onClick,
+      onKeyDown: (e) => {
+        if (isClickable && (e.key === "Enter" || e.key === " ")) {
+          e.preventDefault();
+          data.onClick?.();
+        }
+      },
+      className: cn(
+        // Base sizing
+        widthClass,
+        "flex flex-col gap-0.5 px-2 py-1.5",
+        // Background based on status
+        bgClass,
+        // Clickable styles
+        isClickable && "cursor-pointer hover:brightness-95 transition-all",
+        isClickable && "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary",
+        className
+      ),
+      children: [
+        data.primary && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+          PrimaryIcon && /* @__PURE__ */ jsxRuntime.jsx(PrimaryIcon, { className: cn("h-3 w-3", textClass) }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-xs font-medium tabular-nums", textClass), children: data.primary.value.toLocaleString(void 0, { maximumFractionDigits: 1 }) }),
+          data.primary.unit && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-muted-foreground", children: data.primary.unit })
+        ] }),
+        data.secondary && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+          SecondaryIcon && /* @__PURE__ */ jsxRuntime.jsx(SecondaryIcon, { className: cn("h-3 w-3 text-muted-foreground") }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[10px] text-muted-foreground tabular-nums", children: [
+            data.secondary.value.toLocaleString(void 0, { maximumFractionDigits: 1 }),
+            data.secondary.unit && ` ${data.secondary.unit}`
+          ] })
+        ] }),
+        data.tertiary && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[10px] text-muted-foreground/70 tabular-nums", children: [
+          data.tertiary.value.toLocaleString(void 0, { maximumFractionDigits: 1 }),
+          data.tertiary.unit && ` ${data.tertiary.unit}`
+        ] }) })
+      ]
+    }
+  );
+}
+function ColumnSummaryStrip({
+  columns,
+  columnWidthClass = "min-w-[120px]",
+  rowHeaderLabel,
+  rowHeaderWidthClass = "min-w-[200px] w-[200px]",
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-slot": "column-summary-strip",
+      className: cn(
+        "flex border-b border-border",
+        className
+      ),
+      children: [
+        rowHeaderLabel !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "flex items-center px-3 py-1.5",
+              "bg-muted/30 border-r border-border",
+              "sticky left-0 z-10",
+              rowHeaderWidthClass
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium text-muted-foreground uppercase tracking-wide", children: rowHeaderLabel })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex", children: columns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(
+          ColumnSummaryCell,
+          {
+            data: column,
+            widthClass: columnWidthClass
+          },
+          column.columnKey
+        )) })
+      ]
+    }
+  );
+}
 var cardVariants = classVarianceAuthority.cva(
   "rounded-xl text-card-foreground",
   {
@@ -2420,8 +2627,8 @@ function CalendarDayButton({
   modifiers,
   ...props
 }) {
-  const ref = React29__namespace.useRef(null);
-  React29__namespace.useEffect(() => {
+  const ref = React27__namespace.useRef(null);
+  React27__namespace.useEffect(() => {
     if (modifiers.focused) ref.current?.focus();
   }, [modifiers.focused]);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2442,9 +2649,9 @@ function CalendarDayButton({
     }
   );
 }
-var CarouselContext = React29__namespace.createContext(null);
+var CarouselContext = React27__namespace.createContext(null);
 function useCarousel() {
-  const context = React29__namespace.useContext(CarouselContext);
+  const context = React27__namespace.useContext(CarouselContext);
   if (!context) {
     throw new Error("useCarousel must be used within a <Carousel />");
   }
@@ -2466,20 +2673,20 @@ function Carousel({
     },
     plugins
   );
-  const [canScrollPrev, setCanScrollPrev] = React29__namespace.useState(false);
-  const [canScrollNext, setCanScrollNext] = React29__namespace.useState(false);
-  const onSelect = React29__namespace.useCallback((api2) => {
+  const [canScrollPrev, setCanScrollPrev] = React27__namespace.useState(false);
+  const [canScrollNext, setCanScrollNext] = React27__namespace.useState(false);
+  const onSelect = React27__namespace.useCallback((api2) => {
     if (!api2) return;
     setCanScrollPrev(api2.canScrollPrev());
     setCanScrollNext(api2.canScrollNext());
   }, []);
-  const scrollPrev = React29__namespace.useCallback(() => {
+  const scrollPrev = React27__namespace.useCallback(() => {
     api?.scrollPrev();
   }, [api]);
-  const scrollNext = React29__namespace.useCallback(() => {
+  const scrollNext = React27__namespace.useCallback(() => {
     api?.scrollNext();
   }, [api]);
-  const handleKeyDown = React29__namespace.useCallback(
+  const handleKeyDown = React27__namespace.useCallback(
     (event) => {
       if (event.key === "ArrowLeft") {
         event.preventDefault();
@@ -2491,11 +2698,11 @@ function Carousel({
     },
     [scrollPrev, scrollNext]
   );
-  React29__namespace.useEffect(() => {
+  React27__namespace.useEffect(() => {
     if (!api || !setApi) return;
     setApi(api);
   }, [api, setApi]);
-  React29__namespace.useEffect(() => {
+  React27__namespace.useEffect(() => {
     if (!api) return;
     onSelect(api);
     api.on("reInit", onSelect);
@@ -2628,9 +2835,9 @@ function CarouselNext({
   );
 }
 var THEMES = { light: "", dark: ".dark" };
-var ChartContext = React29__namespace.createContext(null);
+var ChartContext = React27__namespace.createContext(null);
 function useChart() {
-  const context = React29__namespace.useContext(ChartContext);
+  const context = React27__namespace.useContext(ChartContext);
   if (!context) {
     throw new Error("useChart must be used within a <ChartContainer />");
   }
@@ -2643,7 +2850,7 @@ function ChartContainer({
   config,
   ...props
 }) {
-  const uniqueId = React29__namespace.useId();
+  const uniqueId = React27__namespace.useId();
   const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
   return /* @__PURE__ */ jsxRuntime.jsx(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -2704,7 +2911,7 @@ function ChartTooltipContent({
   labelKey
 }) {
   const { config } = useChart();
-  const tooltipLabel = React29__namespace.useMemo(() => {
+  const tooltipLabel = React27__namespace.useMemo(() => {
     if (hideLabel || !payload?.length) {
       return null;
     }
@@ -3539,7 +3746,7 @@ function StatusProgress({
   const resolvedVariant = variant ?? getVariantFromProgress(clampedValue);
   const colors = getStatusColors(resolvedVariant);
   const sizes = getSizeClasses(size);
-  const labelText = React29__namespace.useMemo(() => {
+  const labelText = React27__namespace.useMemo(() => {
     if (currentCount !== void 0 && totalCount !== void 0) {
       return `${currentCount} / ${totalCount} ${unitLabel}`;
     }
@@ -3644,8 +3851,8 @@ function TooltipContent({
   ) });
 }
 function useDetectTheme() {
-  const [theme, setTheme] = React29__namespace.useState("light");
-  React29__namespace.useEffect(() => {
+  const [theme, setTheme] = React27__namespace.useState("light");
+  React27__namespace.useEffect(() => {
     const isDark = document.documentElement.classList.contains("dark");
     setTheme(isDark ? "dark" : "light");
     const observer = new MutationObserver((mutations) => {
@@ -4294,7 +4501,7 @@ function CommandShortcut({
     }
   );
 }
-var SearchTrigger = React29__namespace.forwardRef(
+var SearchTrigger = React27__namespace.forwardRef(
   ({
     className,
     placeholder = "Search...",
@@ -4330,7 +4537,7 @@ var SearchTrigger = React29__namespace.forwardRef(
 );
 SearchTrigger.displayName = "SearchTrigger";
 function useSearchShortcut(onOpen, key = "k") {
-  React29__namespace.useEffect(() => {
+  React27__namespace.useEffect(() => {
     const down = (e) => {
       if (e.key.toLowerCase() === key.toLowerCase() && (e.metaKey || e.ctrlKey)) {
         e.preventDefault();
@@ -5305,9 +5512,9 @@ var SIDEBAR_WIDTH = "16rem";
 var SIDEBAR_WIDTH_MOBILE = "18rem";
 var SIDEBAR_WIDTH_ICON = "3rem";
 var SIDEBAR_KEYBOARD_SHORTCUT = "b";
-var SidebarContext = React29__namespace.createContext(null);
+var SidebarContext = React27__namespace.createContext(null);
 function useSidebar() {
-  const context = React29__namespace.useContext(SidebarContext);
+  const context = React27__namespace.useContext(SidebarContext);
   if (!context) {
     throw new Error("useSidebar must be used within a SidebarProvider.");
   }
@@ -5323,10 +5530,10 @@ function SidebarProvider({
   ...props
 }) {
   const isMobile = useIsMobile();
-  const [openMobile, setOpenMobile] = React29__namespace.useState(false);
-  const [_open, _setOpen] = React29__namespace.useState(defaultOpen);
+  const [openMobile, setOpenMobile] = React27__namespace.useState(false);
+  const [_open, _setOpen] = React27__namespace.useState(defaultOpen);
   const open = openProp ?? _open;
-  const setOpen = React29__namespace.useCallback(
+  const setOpen = React27__namespace.useCallback(
     (value) => {
       const openState = typeof value === "function" ? value(open) : value;
       if (setOpenProp) {
@@ -5338,10 +5545,10 @@ function SidebarProvider({
     },
     [setOpenProp, open]
   );
-  const toggleSidebar = React29__namespace.useCallback(() => {
+  const toggleSidebar = React27__namespace.useCallback(() => {
     return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
   }, [isMobile, setOpen, setOpenMobile]);
-  React29__namespace.useEffect(() => {
+  React27__namespace.useEffect(() => {
     const handleKeyDown = (event) => {
       if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
         event.preventDefault();
@@ -5352,7 +5559,7 @@ function SidebarProvider({
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [toggleSidebar]);
   const state = open ? "expanded" : "collapsed";
-  const contextValue = React29__namespace.useMemo(
+  const contextValue = React27__namespace.useMemo(
     () => ({
       state,
       open,
@@ -5810,7 +6017,7 @@ function SidebarMenuSkeleton({
   showIcon = false,
   ...props
 }) {
-  const width = React29__namespace.useMemo(() => {
+  const width = React27__namespace.useMemo(() => {
     return `${Math.floor(Math.random() * 40) + 50}%`;
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -5953,7 +6160,7 @@ var sectionVariants = classVarianceAuthority.cva(
   }
 );
 var isGlassVariant = (variant) => variant?.startsWith("glass-") ?? false;
-var Section = React29__namespace.forwardRef(
+var Section = React27__namespace.forwardRef(
   ({ className, variant, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "section",
     {
@@ -5965,7 +6172,7 @@ var Section = React29__namespace.forwardRef(
   )
 );
 Section.displayName = "Section";
-var SectionHeader = React29__namespace.forwardRef(
+var SectionHeader = React27__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -5980,7 +6187,7 @@ var SectionHeader = React29__namespace.forwardRef(
   )
 );
 SectionHeader.displayName = "SectionHeader";
-var SectionTitle = React29__namespace.forwardRef(
+var SectionTitle = React27__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "h2",
     {
@@ -5994,7 +6201,7 @@ var SectionTitle = React29__namespace.forwardRef(
   )
 );
 SectionTitle.displayName = "SectionTitle";
-var SectionDescription = React29__namespace.forwardRef(
+var SectionDescription = React27__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "p",
     {
@@ -6008,7 +6215,7 @@ var SectionDescription = React29__namespace.forwardRef(
   )
 );
 SectionDescription.displayName = "SectionDescription";
-var SectionContent = React29__namespace.forwardRef(
+var SectionContent = React27__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -6022,7 +6229,7 @@ var SectionContent = React29__namespace.forwardRef(
   )
 );
 SectionContent.displayName = "SectionContent";
-var SectionFooter = React29__namespace.forwardRef(
+var SectionFooter = React27__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -6330,7 +6537,7 @@ function SiteHeader({
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-[var(--header-height,3.5rem)] w-full items-center gap-[var(--j3m-spacing-s)] px-[var(--j3m-spacing-m)]", children: [
         trigger,
         trigger && /* @__PURE__ */ jsxRuntime.jsx(Separator, { orientation: "vertical", className: "mr-[var(--j3m-spacing-s)] h-4" }),
-        /* @__PURE__ */ jsxRuntime.jsx(Breadcrumb, { className: "hidden sm:block", children: /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbList, { children: breadcrumbs.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(React29__namespace.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Breadcrumb, { className: "hidden sm:block", children: /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbList, { children: breadcrumbs.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(React27__namespace.Fragment, { children: [
           index > 0 && /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbSeparator, {}),
           /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbItem, { children: item.href ? /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbLink, { href: item.href, children: item.label }) : /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbPage, { children: item.label }) })
         ] }, index)) }) }),
@@ -6951,11 +7158,11 @@ function PlanningWeekCommentPopover({
   open,
   onOpenChange
 }) {
-  const [newCommentText, setNewCommentText] = React29__namespace.useState("");
-  const [selectedLocationId, setSelectedLocationId] = React29__namespace.useState("");
-  const [viewCommentsOpen, setViewCommentsOpen] = React29__namespace.useState(true);
-  const [showAddForm, setShowAddForm] = React29__namespace.useState(false);
-  const selectedLocation = React29__namespace.useMemo(() => {
+  const [newCommentText, setNewCommentText] = React27__namespace.useState("");
+  const [selectedLocationId, setSelectedLocationId] = React27__namespace.useState("");
+  const [viewCommentsOpen, setViewCommentsOpen] = React27__namespace.useState(true);
+  const [showAddForm, setShowAddForm] = React27__namespace.useState(false);
+  const selectedLocation = React27__namespace.useMemo(() => {
     return locationOptions.find((opt) => opt.id === selectedLocationId);
   }, [locationOptions, selectedLocationId]);
   const handleSubmit = () => {
@@ -6999,8 +7206,8 @@ function PlanningWeekCommentPopover({
       minute: "2-digit"
     }).format(date);
   };
-  const prevOpenRef = React29__namespace.useRef(open);
-  React29__namespace.useEffect(() => {
+  const prevOpenRef = React27__namespace.useRef(open);
+  React27__namespace.useEffect(() => {
     const wasOpen = prevOpenRef.current;
     prevOpenRef.current = open;
     if (wasOpen && !open) {
@@ -7354,22 +7561,22 @@ function PlanningTable({
     stickySupplierColumn = true,
     maxHeight = "600px"
   } = config;
-  const weeks = React29__namespace.useMemo(
+  const weeks = React27__namespace.useMemo(
     () => generateWeeks(startDate, weekCount),
     [startDate, weekCount]
   );
-  const currentWeekKey = React29__namespace.useMemo(() => {
+  const currentWeekKey = React27__namespace.useMemo(() => {
     const currentWeek = weeks.find((w) => w.isCurrentWeek);
     return currentWeek ? getWeekKey(currentWeek.startDate) : null;
   }, [weeks]);
-  const columns = React29__namespace.useMemo(
+  const columns = React27__namespace.useMemo(
     () => generateColumns(weeks, config, suppliers),
     [weeks, config, suppliers]
   );
-  const [sorting, setSorting] = React29__namespace.useState([]);
-  const [columnFilters, setColumnFilters] = React29__namespace.useState([]);
-  const [columnVisibility, setColumnVisibility] = React29__namespace.useState({});
-  const [rowSelection, setRowSelection] = React29__namespace.useState({});
+  const [sorting, setSorting] = React27__namespace.useState([]);
+  const [columnFilters, setColumnFilters] = React27__namespace.useState([]);
+  const [columnVisibility, setColumnVisibility] = React27__namespace.useState({});
+  const [rowSelection, setRowSelection] = React27__namespace.useState({});
   const table = reactTable.useReactTable({
     data: suppliers,
     columns,
@@ -7393,12 +7600,95 @@ function PlanningTable({
       }
     }
   });
+  const insightMetrics = React27__namespace.useMemo(() => {
+    let totalProduced = 0;
+    let totalRequired = 0;
+    let totalDeliveries = 0;
+    for (const supplier of suppliers) {
+      for (const weekKey in supplier.weeks) {
+        const weekData = supplier.weeks[weekKey];
+        if (weekData.production) {
+          totalProduced += weekData.production.produced;
+          totalRequired += weekData.production.target;
+        }
+        totalDeliveries += weekData.deliveries?.length ?? 0;
+      }
+    }
+    const productionPercent = totalRequired > 0 ? totalProduced / totalRequired * 100 : 0;
+    return [
+      {
+        key: "produced",
+        label: "produced",
+        value: totalProduced,
+        unit: "tons",
+        icon: "factory",
+        status: productionPercent >= 100 ? "success" : "normal"
+      },
+      {
+        key: "deliveries",
+        label: "planned deliveries",
+        value: totalDeliveries,
+        icon: "truck",
+        status: "normal"
+      },
+      {
+        key: "progress",
+        label: "produced vs required",
+        value: productionPercent,
+        isPercentage: true,
+        icon: "trending",
+        status: productionPercent >= 100 ? "success" : productionPercent >= 50 ? "normal" : "warning"
+      }
+    ];
+  }, [suppliers]);
+  const columnSummaryData = React27__namespace.useMemo(() => {
+    return weeks.map((week) => {
+      const weekKey = getWeekKey(week.startDate);
+      let producedTons = 0;
+      let plannedDeliveries = 0;
+      let sentDeliveries = 0;
+      let hasWarning = false;
+      let hasCritical = false;
+      let allComplete = true;
+      for (const supplier of suppliers) {
+        const weekData = supplier.weeks[weekKey];
+        if (weekData) {
+          if (weekData.production) {
+            producedTons += weekData.production.produced;
+            if (weekData.production.progress !== void 0 && weekData.production.progress < 100) {
+              allComplete = false;
+            }
+          }
+          if (weekData.deliveries) {
+            plannedDeliveries += weekData.deliveries.length;
+            sentDeliveries += weekData.deliveries.filter(
+              (d) => d.status === "on-time" && (d.progress ?? 0) >= 100
+            ).length;
+          }
+          if (weekData.hasWarning) hasWarning = true;
+          if (weekData.deliveries?.some((d) => d.status === "critical")) hasCritical = true;
+        }
+      }
+      let status = "normal";
+      if (hasCritical) status = "critical";
+      else if (hasWarning) status = "warning";
+      else if (allComplete && producedTons > 0) status = "complete";
+      return {
+        weekKey,
+        producedTons,
+        plannedDeliveries,
+        sentDeliveries,
+        status
+      };
+    });
+  }, [weeks, suppliers]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       "data-slot": "planning-table",
       className: cn("flex flex-col gap-4", className),
       children: [
+        /* @__PURE__ */ jsxRuntime.jsx(InsightBar, { metrics: insightMetrics }),
         showToolbar && /* @__PURE__ */ jsxRuntime.jsx(PlanningTableToolbar, { table }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-xl border bg-background shadow-sm overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs(
           ScrollArea,
@@ -7407,37 +7697,80 @@ function PlanningTable({
             style: { maxHeight },
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full border-collapse", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "sticky top-0 z-20", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxRuntime.jsx(
-                  "tr",
-                  {
-                    children: headerGroup.headers.map((header, index) => {
-                      const isCurrentWeekColumn = header.id === currentWeekKey;
+                /* @__PURE__ */ jsxRuntime.jsxs("thead", { className: "sticky top-0 z-20", children: [
+                  table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxRuntime.jsx(
+                    "tr",
+                    {
+                      children: headerGroup.headers.map((header, index) => {
+                        const isCurrentWeekColumn = header.id === currentWeekKey;
+                        return /* @__PURE__ */ jsxRuntime.jsx(
+                          "th",
+                          {
+                            className: cn(
+                              "h-14 px-3 text-left align-middle font-semibold text-xs text-muted-foreground uppercase tracking-wide",
+                              "border-r border-b border-border last:border-r-0 bg-sidebar",
+                              // First column: sticky with right-edge shadow (Quantum token)
+                              index === 0 && stickySupplierColumn && [
+                                "sticky left-0 z-30 min-w-[200px]",
+                                "shadow-[var(--j3m-shadow-sticky-edge)]"
+                              ],
+                              index > 0 && "min-w-[140px]",
+                              // Current week: only highlight text/dot, not full background
+                              isCurrentWeekColumn && highlightCurrentWeek && "text-primary"
+                            ),
+                            children: header.isPlaceholder ? null : reactTable.flexRender(
+                              header.column.columnDef.header,
+                              header.getContext()
+                            )
+                          },
+                          header.id
+                        );
+                      })
+                    },
+                    headerGroup.id
+                  )),
+                  /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("th", { className: cn(
+                      "h-auto px-3 py-1.5 text-left align-middle",
+                      "border-r border-b border-border bg-muted/30",
+                      stickySupplierColumn && "sticky left-0 z-30 min-w-[200px]",
+                      stickySupplierColumn && "shadow-[var(--j3m-shadow-sticky-edge)]"
+                    ), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium text-muted-foreground uppercase tracking-wide", children: "Summary" }) }),
+                    columnSummaryData.map((summary) => {
+                      const statusBg = summary.status === "complete" ? "bg-green-50/50 dark:bg-green-950/30" : summary.status === "critical" ? "bg-red-50/50 dark:bg-red-950/30" : summary.status === "warning" ? "bg-amber-50/50 dark:bg-amber-950/30" : "bg-muted/30";
+                      const statusText = summary.status === "complete" ? "text-green-700 dark:text-green-300" : summary.status === "critical" ? "text-red-700 dark:text-red-300" : summary.status === "warning" ? "text-amber-700 dark:text-amber-300" : "text-muted-foreground";
                       return /* @__PURE__ */ jsxRuntime.jsx(
                         "th",
                         {
                           className: cn(
-                            "h-14 px-3 text-left align-middle font-semibold text-xs text-muted-foreground uppercase tracking-wide",
-                            "border-r border-b border-border last:border-r-0 bg-sidebar",
-                            // First column: sticky with right-edge shadow (Quantum token)
-                            index === 0 && stickySupplierColumn && [
-                              "sticky left-0 z-30 min-w-[200px]",
-                              "shadow-[var(--j3m-shadow-sticky-edge)]"
-                            ],
-                            index > 0 && "min-w-[140px]",
-                            // Current week: only highlight text/dot, not full background
-                            isCurrentWeekColumn && highlightCurrentWeek && "text-primary"
+                            "h-auto px-2 py-1.5 text-left align-middle",
+                            "border-r border-b border-border last:border-r-0 min-w-[140px]",
+                            statusBg
                           ),
-                          children: header.isPlaceholder ? null : reactTable.flexRender(
-                            header.column.columnDef.header,
-                            header.getContext()
-                          )
+                          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-0.5", children: [
+                            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Factory, { className: cn("h-3 w-3", statusText) }),
+                              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("text-xs font-medium tabular-nums", statusText), children: [
+                                summary.producedTons.toLocaleString(void 0, { maximumFractionDigits: 1 }),
+                                " t"
+                              ] })
+                            ] }),
+                            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Truck, { className: "h-3 w-3 text-muted-foreground" }),
+                              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[10px] text-muted-foreground tabular-nums", children: [
+                                summary.sentDeliveries,
+                                "/",
+                                summary.plannedDeliveries,
+                                " sent"
+                              ] })
+                            ] })
+                          ] })
                         },
-                        header.id
+                        summary.weekKey
                       );
                     })
-                  },
-                  headerGroup.id
-                )) }),
+                  ] })
+                ] }),
                 /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "bg-background", children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsxRuntime.jsx(
                   "tr",
                   {
@@ -7585,10 +7918,10 @@ function DeliveryCommentPopover({
   onAddComment,
   deliveryLabel
 }) {
-  const [open, setOpen] = React29__namespace.useState(false);
-  const [newCommentText, setNewCommentText] = React29__namespace.useState("");
-  const [viewCommentsOpen, setViewCommentsOpen] = React29__namespace.useState(true);
-  const [showAddForm, setShowAddForm] = React29__namespace.useState(false);
+  const [open, setOpen] = React27__namespace.useState(false);
+  const [newCommentText, setNewCommentText] = React27__namespace.useState("");
+  const [viewCommentsOpen, setViewCommentsOpen] = React27__namespace.useState(true);
+  const [showAddForm, setShowAddForm] = React27__namespace.useState(false);
   const handleSubmit = () => {
     if (newCommentText.trim() && onAddComment) {
       onAddComment(newCommentText.trim());
@@ -7615,8 +7948,8 @@ function DeliveryCommentPopover({
       minute: "2-digit"
     }).format(date);
   };
-  const prevOpenRef = React29__namespace.useRef(open);
-  React29__namespace.useEffect(() => {
+  const prevOpenRef = React27__namespace.useRef(open);
+  React27__namespace.useEffect(() => {
     const wasOpen = prevOpenRef.current;
     prevOpenRef.current = open;
     if (wasOpen && !open) {
@@ -7728,8 +8061,8 @@ function ProductionCommentSection({
   comments = [],
   onAddComment
 }) {
-  const [showAddForm, setShowAddForm] = React29__namespace.useState(false);
-  const [newComment, setNewComment] = React29__namespace.useState("");
+  const [showAddForm, setShowAddForm] = React27__namespace.useState(false);
+  const [newComment, setNewComment] = React27__namespace.useState("");
   const handleSubmit = () => {
     if (newComment.trim() && onAddComment) {
       onAddComment(newComment.trim());
@@ -7828,43 +8161,65 @@ function DeliveryListItem({
 }) {
   const hasComments = (delivery.comments?.length ?? 0) > 0;
   const isComplete = (delivery.progress ?? 0) >= 100;
-  const getIconStyles = () => {
+  const getCardStyles3 = () => {
     if (delivery.status === "critical") {
-      return { bg: "bg-red-100 dark:bg-red-950/50", icon: "text-red-600 dark:text-red-400" };
+      return {
+        card: "border-l-[3px] border-l-red-500 bg-red-50/50 dark:bg-red-950/30",
+        icon: "text-red-600 dark:text-red-400",
+        title: "text-foreground",
+        subtitle: "text-red-700/70 dark:text-red-300/70",
+        chevron: "text-red-600/60 dark:text-red-400/60"
+      };
     }
     if (delivery.status === "delayed") {
-      return { bg: "bg-amber-100 dark:bg-amber-950/50", icon: "text-amber-600 dark:text-amber-400" };
+      return {
+        card: "border-l-[3px] border-l-amber-500 bg-amber-50/50 dark:bg-amber-950/30",
+        icon: "text-amber-600 dark:text-amber-400",
+        title: "text-foreground",
+        subtitle: "text-amber-700/70 dark:text-amber-300/70",
+        chevron: "text-amber-600/60 dark:text-amber-400/60"
+      };
     }
     if (isComplete) {
-      return { bg: "bg-green-100 dark:bg-green-950/50", icon: "text-green-600 dark:text-green-400" };
+      return {
+        card: "border-l-[3px] border-l-green-500 bg-green-50/50 dark:bg-green-950/30",
+        icon: "text-green-600 dark:text-green-400",
+        title: "text-foreground",
+        subtitle: "text-green-700/70 dark:text-green-300/70",
+        chevron: "text-green-600/60 dark:text-green-400/60"
+      };
     }
-    return { bg: "bg-muted", icon: "text-muted-foreground" };
+    return {
+      card: "border-l-[3px] border-l-muted-foreground/40 bg-muted/30 dark:bg-muted/20",
+      icon: "text-muted-foreground",
+      title: "text-foreground",
+      subtitle: "text-muted-foreground",
+      chevron: "text-muted-foreground/60"
+    };
   };
-  const iconStyles = getIconStyles();
+  const styles = getCardStyles3();
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "button",
     {
       onClick,
       className: cn(
         "w-full flex items-center justify-between p-3 rounded-lg",
-        "bg-card border hover:bg-muted/50 transition-colors cursor-pointer",
-        "text-left"
+        "transition-all duration-200 ease-out cursor-pointer text-left",
+        "hover:-translate-y-0.5 hover:shadow-[var(--j3m-shadow-md)]",
+        styles.card
       ),
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
-            "flex items-center justify-center h-8 w-8 rounded-lg",
-            iconStyles.bg
-          ), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Truck, { className: cn("h-4 w-4", iconStyles.icon) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Truck, { className: cn("h-5 w-5 shrink-0", styles.icon) }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: delivery.label || `Delivery ${index + 1}` }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-sm font-medium", styles.title), children: delivery.label || `Delivery ${index + 1}` }),
               hasComments && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquare, { className: "h-3 w-3 text-muted-foreground" }),
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -top-0.5 -right-0.5 h-1.5 w-1.5 rounded-full bg-primary" })
               ] })
             ] }),
-            delivery.destination && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-muted-foreground", children: [
+            delivery.destination && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("text-xs", styles.subtitle), children: [
               "\u2192 ",
               delivery.destination
             ] })
@@ -7879,7 +8234,7 @@ function DeliveryListItem({
               children: getStatusLabel(delivery.status, isComplete)
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4 text-muted-foreground" })
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: cn("h-4 w-4", styles.chevron) })
         ] })
       ]
     }
@@ -7892,7 +8247,7 @@ function DeliveryDetailsView({
   onAddComment
 }) {
   const elements = delivery.elements ?? [];
-  const categorizedElements = React29__namespace.useMemo(() => {
+  const categorizedElements = React27__namespace.useMemo(() => {
     const sent = [];
     const notSent = [];
     const moved = [];
@@ -8260,15 +8615,15 @@ function WeekDetailDialog({
 }) {
   const production = data?.production;
   const initialProduced = production?.produced ?? 0;
-  const [producedValue, setProducedValue] = React29__namespace.useState(initialProduced.toString());
-  const [hasChanges, setHasChanges] = React29__namespace.useState(false);
-  const [selectedDelivery, setSelectedDelivery] = React29__namespace.useState(null);
-  React29__namespace.useEffect(() => {
+  const [producedValue, setProducedValue] = React27__namespace.useState(initialProduced.toString());
+  const [hasChanges, setHasChanges] = React27__namespace.useState(false);
+  const [selectedDelivery, setSelectedDelivery] = React27__namespace.useState(null);
+  React27__namespace.useEffect(() => {
     const newProduced = data?.production?.produced ?? 0;
     setProducedValue(newProduced.toString());
     setHasChanges(false);
   }, [data]);
-  React29__namespace.useEffect(() => {
+  React27__namespace.useEffect(() => {
     if (!open) {
       setSelectedDelivery(null);
     }
@@ -8399,24 +8754,24 @@ function ElementProductionDialog({
   elements,
   onSave
 }) {
-  const [searchQuery, setSearchQuery] = React29__namespace.useState("");
-  const [selectedIds, setSelectedIds] = React29__namespace.useState(
+  const [searchQuery, setSearchQuery] = React27__namespace.useState("");
+  const [selectedIds, setSelectedIds] = React27__namespace.useState(
     new Set(elements.filter((e) => e.isProduced).map((e) => e.id))
   );
-  React29__namespace.useEffect(() => {
+  React27__namespace.useEffect(() => {
     if (open) {
       setSelectedIds(new Set(elements.filter((e) => e.isProduced).map((e) => e.id)));
       setSearchQuery("");
     }
   }, [open, elements]);
-  const filteredElements = React29__namespace.useMemo(() => {
+  const filteredElements = React27__namespace.useMemo(() => {
     if (!searchQuery.trim()) return elements;
     const query = searchQuery.toLowerCase();
     return elements.filter(
       (e) => e.name.toLowerCase().includes(query) || e.prefix?.toLowerCase().includes(query) || e.type?.toLowerCase().includes(query)
     );
   }, [elements, searchQuery]);
-  React29__namespace.useMemo(() => {
+  React27__namespace.useMemo(() => {
     const prefixes = /* @__PURE__ */ new Set();
     elements.forEach((e) => {
       if (e.prefix) prefixes.add(e.prefix);
@@ -8602,10 +8957,10 @@ function DeliveryCommentPopover2({
   onAddComment,
   deliveryLabel
 }) {
-  const [open, setOpen] = React29__namespace.useState(false);
-  const [newCommentText, setNewCommentText] = React29__namespace.useState("");
-  const [viewCommentsOpen, setViewCommentsOpen] = React29__namespace.useState(true);
-  const [showAddForm, setShowAddForm] = React29__namespace.useState(false);
+  const [open, setOpen] = React27__namespace.useState(false);
+  const [newCommentText, setNewCommentText] = React27__namespace.useState("");
+  const [viewCommentsOpen, setViewCommentsOpen] = React27__namespace.useState(true);
+  const [showAddForm, setShowAddForm] = React27__namespace.useState(false);
   const handleSubmit = () => {
     if (newCommentText.trim() && onAddComment) {
       onAddComment(newCommentText.trim());
@@ -8632,7 +8987,7 @@ function DeliveryCommentPopover2({
       minute: "2-digit"
     }).format(date);
   };
-  React29__namespace.useEffect(() => {
+  React27__namespace.useEffect(() => {
     if (!open) {
       setShowAddForm(false);
       setNewCommentText("");
@@ -8742,8 +9097,8 @@ function ProductionCommentSection2({
   comments = [],
   onAddComment
 }) {
-  const [showAddForm, setShowAddForm] = React29__namespace.useState(false);
-  const [newComment, setNewComment] = React29__namespace.useState("");
+  const [showAddForm, setShowAddForm] = React27__namespace.useState(false);
+  const [newComment, setNewComment] = React27__namespace.useState("");
   const handleSubmit = () => {
     if (newComment.trim() && onAddComment) {
       onAddComment(newComment.trim());
@@ -8842,43 +9197,65 @@ function DeliveryListItem2({
 }) {
   const hasComments = (delivery.comments?.length ?? 0) > 0;
   const isComplete = (delivery.progress ?? 0) >= 100;
-  const getIconStyles = () => {
+  const getCardStyles3 = () => {
     if (delivery.status === "critical") {
-      return { bg: "bg-red-100 dark:bg-red-950/50", icon: "text-red-600 dark:text-red-400" };
+      return {
+        card: "border-l-[3px] border-l-red-500 bg-red-50/50 dark:bg-red-950/30",
+        icon: "text-red-600 dark:text-red-400",
+        title: "text-foreground",
+        subtitle: "text-red-700/70 dark:text-red-300/70",
+        chevron: "text-red-600/60 dark:text-red-400/60"
+      };
     }
     if (delivery.status === "delayed") {
-      return { bg: "bg-amber-100 dark:bg-amber-950/50", icon: "text-amber-600 dark:text-amber-400" };
+      return {
+        card: "border-l-[3px] border-l-amber-500 bg-amber-50/50 dark:bg-amber-950/30",
+        icon: "text-amber-600 dark:text-amber-400",
+        title: "text-foreground",
+        subtitle: "text-amber-700/70 dark:text-amber-300/70",
+        chevron: "text-amber-600/60 dark:text-amber-400/60"
+      };
     }
     if (isComplete) {
-      return { bg: "bg-green-100 dark:bg-green-950/50", icon: "text-green-600 dark:text-green-400" };
+      return {
+        card: "border-l-[3px] border-l-green-500 bg-green-50/50 dark:bg-green-950/30",
+        icon: "text-green-600 dark:text-green-400",
+        title: "text-foreground",
+        subtitle: "text-green-700/70 dark:text-green-300/70",
+        chevron: "text-green-600/60 dark:text-green-400/60"
+      };
     }
-    return { bg: "bg-muted", icon: "text-muted-foreground" };
+    return {
+      card: "border-l-[3px] border-l-muted-foreground/40 bg-muted/30 dark:bg-muted/20",
+      icon: "text-muted-foreground",
+      title: "text-foreground",
+      subtitle: "text-muted-foreground",
+      chevron: "text-muted-foreground/60"
+    };
   };
-  const iconStyles = getIconStyles();
+  const styles = getCardStyles3();
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "button",
     {
       onClick,
       className: cn(
         "w-full flex items-center justify-between p-3 rounded-lg",
-        "bg-card border hover:bg-muted/50 transition-colors cursor-pointer",
-        "text-left"
+        "transition-all duration-200 ease-out cursor-pointer text-left",
+        "hover:-translate-y-0.5 hover:shadow-[var(--j3m-shadow-md)]",
+        styles.card
       ),
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
-            "flex items-center justify-center h-8 w-8 rounded-lg",
-            iconStyles.bg
-          ), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Truck, { className: cn("h-4 w-4", iconStyles.icon) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Truck, { className: cn("h-5 w-5 shrink-0", styles.icon) }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: delivery.label || `Delivery ${index + 1}` }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-sm font-medium", styles.title), children: delivery.label || `Delivery ${index + 1}` }),
               hasComments && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquare, { className: "h-3 w-3 text-muted-foreground" }),
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -top-0.5 -right-0.5 h-1.5 w-1.5 rounded-full bg-primary" })
               ] })
             ] }),
-            delivery.destination && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-muted-foreground", children: [
+            delivery.destination && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("text-xs", styles.subtitle), children: [
               "\u2192 ",
               delivery.destination
             ] })
@@ -8893,7 +9270,7 @@ function DeliveryListItem2({
               children: getStatusLabel2(delivery.status, isComplete)
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4 text-muted-foreground" })
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: cn("h-4 w-4", styles.chevron) })
         ] })
       ]
     }
@@ -8906,7 +9283,7 @@ function DeliveryDetailsView2({
   onAddComment
 }) {
   const elements = delivery.elements ?? [];
-  const categorizedElements = React29__namespace.useMemo(() => {
+  const categorizedElements = React27__namespace.useMemo(() => {
     const sent = [];
     const notSent = [];
     const moved = [];
@@ -9240,10 +9617,10 @@ function WeekDetailSheet({
   onAddProductionComment,
   onAddDeliveryComment
 }) {
-  const [selectedDelivery, setSelectedDelivery] = React29__namespace.useState(null);
-  const [productionDialogOpen, setProductionDialogOpen] = React29__namespace.useState(false);
-  const [previousProducedCount, setPreviousProducedCount] = React29__namespace.useState(void 0);
-  const productionElements = React29__namespace.useMemo(() => {
+  const [selectedDelivery, setSelectedDelivery] = React27__namespace.useState(null);
+  const [productionDialogOpen, setProductionDialogOpen] = React27__namespace.useState(false);
+  const [previousProducedCount, setPreviousProducedCount] = React27__namespace.useState(void 0);
+  const productionElements = React27__namespace.useMemo(() => {
     if (!data?.deliveries) return [];
     const elements = [];
     const seenIds = /* @__PURE__ */ new Set();
@@ -9267,12 +9644,12 @@ function WeekDetailSheet({
     return elements;
   }, [data?.deliveries]);
   const currentProducedCount = productionElements.filter((e) => e.isProduced).length;
-  React29__namespace.useEffect(() => {
+  React27__namespace.useEffect(() => {
     if (open && data?.deliveries) {
       setPreviousProducedCount(currentProducedCount);
     }
   }, [open]);
-  React29__namespace.useEffect(() => {
+  React27__namespace.useEffect(() => {
     if (!open) {
       setSelectedDelivery(null);
       setProductionDialogOpen(false);
@@ -9505,13 +9882,13 @@ function CalibrationWeekCell({
   onAddClick,
   ...props
 }) {
-  const inputRef = React29__namespace.useRef(null);
-  const [localValue, setLocalValue] = React29__namespace.useState(
+  const inputRef = React27__namespace.useRef(null);
+  const [localValue, setLocalValue] = React27__namespace.useState(
     data.entered !== null ? String(data.entered) : ""
   );
-  const [isHovered, setIsHovered] = React29__namespace.useState(false);
-  const [isEditing, setIsEditing] = React29__namespace.useState(false);
-  React29__namespace.useEffect(() => {
+  const [isHovered, setIsHovered] = React27__namespace.useState(false);
+  const [isEditing, setIsEditing] = React27__namespace.useState(false);
+  React27__namespace.useEffect(() => {
     setLocalValue(data.entered !== null ? String(data.entered) : "");
   }, [data.entered]);
   const unitLabel = formatCalibrationUnit(unit);
@@ -9697,11 +10074,11 @@ function CommentPopover({
   open,
   onOpenChange
 }) {
-  const [newCommentText, setNewCommentText] = React29__namespace.useState("");
-  const [selectedPrefixId, setSelectedPrefixId] = React29__namespace.useState("");
-  const [viewCommentsOpen, setViewCommentsOpen] = React29__namespace.useState(true);
-  const [showAddForm, setShowAddForm] = React29__namespace.useState(false);
-  const selectedPrefixName = React29__namespace.useMemo(() => {
+  const [newCommentText, setNewCommentText] = React27__namespace.useState("");
+  const [selectedPrefixId, setSelectedPrefixId] = React27__namespace.useState("");
+  const [viewCommentsOpen, setViewCommentsOpen] = React27__namespace.useState(true);
+  const [showAddForm, setShowAddForm] = React27__namespace.useState(false);
+  const selectedPrefixName = React27__namespace.useMemo(() => {
     const prefix = availablePrefixes.find((p) => p.id === selectedPrefixId);
     return prefix?.name ?? "";
   }, [availablePrefixes, selectedPrefixId]);
@@ -9733,8 +10110,8 @@ function CommentPopover({
       minute: "2-digit"
     }).format(date);
   };
-  const prevOpenRef = React29__namespace.useRef(open);
-  React29__namespace.useEffect(() => {
+  const prevOpenRef = React27__namespace.useRef(open);
+  React27__namespace.useEffect(() => {
     const wasOpen = prevOpenRef.current;
     prevOpenRef.current = open;
     if (wasOpen && !open) {
@@ -9963,7 +10340,7 @@ function CalibrationTable({
     onAddComment,
     onAddEarlierWeek
   } = config;
-  const calculatedStartDate = React29__namespace.useMemo(() => {
+  const calculatedStartDate = React27__namespace.useMemo(() => {
     if (startDate) return startDate;
     let earliest = null;
     for (const prefix of prefixes) {
@@ -9984,31 +10361,31 @@ function CalibrationTable({
     }
     return earliest ?? /* @__PURE__ */ new Date();
   }, [startDate, prefixes]);
-  const [additionalWeeks, setAdditionalWeeks] = React29__namespace.useState(0);
-  const weeks = React29__namespace.useMemo(() => {
+  const [additionalWeeks, setAdditionalWeeks] = React27__namespace.useState(0);
+  const weeks = React27__namespace.useMemo(() => {
     const start = new Date(calculatedStartDate);
     start.setDate(start.getDate() - additionalWeeks * 7);
     return generateWeeks(start, weekCount + additionalWeeks);
   }, [calculatedStartDate, weekCount, additionalWeeks]);
-  React29__namespace.useMemo(() => {
+  React27__namespace.useMemo(() => {
     const currentWeek = weeks.find((w) => w.isCurrentWeek);
     return currentWeek ? getWeekKey(currentWeek.startDate) : null;
   }, [weeks]);
-  const [currentPage, setCurrentPage] = React29__namespace.useState(0);
-  const [pageSize, setPageSize] = React29__namespace.useState(defaultPageSize);
-  const [searchQuery, setSearchQuery] = React29__namespace.useState("");
-  const filteredPrefixes = React29__namespace.useMemo(() => {
+  const [currentPage, setCurrentPage] = React27__namespace.useState(0);
+  const [pageSize, setPageSize] = React27__namespace.useState(defaultPageSize);
+  const [searchQuery, setSearchQuery] = React27__namespace.useState("");
+  const filteredPrefixes = React27__namespace.useMemo(() => {
     if (!searchQuery) return prefixes;
     const query = searchQuery.toLowerCase();
     return prefixes.filter(
       (p) => p.name.toLowerCase().includes(query) || p.typeCode.toLowerCase().includes(query)
     );
   }, [prefixes, searchQuery]);
-  const paginatedPrefixes = React29__namespace.useMemo(() => {
+  const paginatedPrefixes = React27__namespace.useMemo(() => {
     const start = currentPage * pageSize;
     return filteredPrefixes.slice(start, start + pageSize);
   }, [filteredPrefixes, currentPage, pageSize]);
-  React29__namespace.useMemo(
+  React27__namespace.useMemo(
     () => canSubmitCalibration(prefixes),
     [prefixes]
   );
@@ -10032,10 +10409,88 @@ function CalibrationTable({
     }
     return allComments;
   };
-  const availablePrefixes = React29__namespace.useMemo(
+  const availablePrefixes = React27__namespace.useMemo(
     () => prefixes.map((p) => ({ id: p.id, name: p.name })),
     [prefixes]
   );
+  const insightMetrics = React27__namespace.useMemo(() => {
+    let totalCalibrated = 0;
+    let totalRequired = 0;
+    for (const prefix of prefixes) {
+      for (const weekKey in prefix.weeks) {
+        const cell = prefix.weeks[weekKey];
+        if (cell.planned > 0) {
+          totalRequired += cell.planned;
+          totalCalibrated += cell.entered ?? 0;
+        }
+      }
+    }
+    const completeness = totalRequired > 0 ? totalCalibrated / totalRequired * 100 : 0;
+    const remaining = Math.max(0, totalRequired - totalCalibrated);
+    return [
+      {
+        key: "calibrated",
+        label: "calibrated",
+        value: totalCalibrated,
+        unit: "tons",
+        icon: "factory",
+        status: completeness >= 100 ? "success" : "normal"
+      },
+      {
+        key: "remaining",
+        label: "remaining",
+        value: remaining,
+        unit: "tons",
+        icon: "factory",
+        status: remaining > 0 ? "warning" : "success"
+      },
+      {
+        key: "completeness",
+        label: "complete",
+        value: completeness,
+        isPercentage: true,
+        icon: "trending",
+        status: completeness >= 100 ? "success" : completeness >= 50 ? "normal" : "warning"
+      }
+    ];
+  }, [prefixes]);
+  const columnSummaryData = React27__namespace.useMemo(() => {
+    return weeks.map((week) => {
+      const weekKey = getWeekKey(week.startDate);
+      let calibratedTons = 0;
+      let requiredTons = 0;
+      let hasShortfall = false;
+      let allValid = true;
+      for (const prefix of prefixes) {
+        const cell = prefix.weeks[weekKey];
+        if (cell) {
+          requiredTons += cell.planned;
+          calibratedTons += cell.entered ?? 0;
+          if (cell.status === "shortfall") hasShortfall = true;
+          if (cell.status !== "valid" && cell.planned > 0) allValid = false;
+        }
+      }
+      let status2 = "normal";
+      if (hasShortfall) {
+        status2 = "critical";
+      } else if (allValid && requiredTons > 0) {
+        status2 = "complete";
+      }
+      return {
+        columnKey: weekKey,
+        primary: {
+          value: calibratedTons,
+          unit: "t",
+          icon: "factory"
+        },
+        secondary: {
+          value: requiredTons,
+          unit: "t req"
+        },
+        status: status2
+      };
+    });
+  }, [weeks, prefixes]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -10046,6 +10501,7 @@ function CalibrationTable({
           /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-semibold tracking-tight", children: "Weekly Production Calibration" }),
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: "Review required weekly production and confirm achievable output at the selected checkpoint." })
         ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(InsightBar, { metrics: insightMetrics }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
           showToolbar && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2", children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -10078,36 +10534,74 @@ function CalibrationTable({
               style: { maxHeight },
               children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full border-collapse", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "sticky top-0 z-20", children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("th", { className: cn(
-                      "h-14 px-3 text-left align-middle font-semibold text-xs text-muted-foreground uppercase tracking-wide",
-                      "border-r border-b border-border bg-sidebar",
-                      stickyRowHeader && "sticky left-0 z-30 min-w-[200px]",
-                      // Right shadow using Quantum token
-                      stickyRowHeader && "shadow-[var(--j3m-shadow-sticky-edge)]"
-                    ), children: "Supplier / Scope" }),
-                    weeks.map((week) => {
-                      const weekKey = getWeekKey(week.startDate);
-                      const weekComments = getWeekComments(weekKey);
-                      return /* @__PURE__ */ jsxRuntime.jsx(
-                        "th",
-                        {
-                          className: "h-14 px-2 text-left align-middle border-r border-b border-border last:border-r-0 min-w-[220px] bg-sidebar",
-                          children: /* @__PURE__ */ jsxRuntime.jsx(
-                            CalibrationWeekHeader,
-                            {
-                              week,
-                              comments: weekComments,
-                              showCommentButton: true,
-                              availablePrefixes,
-                              onAddComment: (text, prefixId, prefixName) => handleAddWeekComment(weekKey, text, prefixId)
-                            }
-                          )
-                        },
-                        weekKey
-                      );
-                    })
-                  ] }) }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("thead", { className: "sticky top-0 z-20", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("th", { className: cn(
+                        "h-14 px-3 text-left align-middle font-semibold text-xs text-muted-foreground uppercase tracking-wide",
+                        "border-r border-b border-border bg-sidebar",
+                        stickyRowHeader && "sticky left-0 z-30 min-w-[200px]",
+                        // Right shadow using Quantum token
+                        stickyRowHeader && "shadow-[var(--j3m-shadow-sticky-edge)]"
+                      ), children: "Supplier / Scope" }),
+                      weeks.map((week) => {
+                        const weekKey = getWeekKey(week.startDate);
+                        const weekComments = getWeekComments(weekKey);
+                        return /* @__PURE__ */ jsxRuntime.jsx(
+                          "th",
+                          {
+                            className: "h-14 px-2 text-left align-middle border-r border-b border-border last:border-r-0 min-w-[220px] bg-sidebar",
+                            children: /* @__PURE__ */ jsxRuntime.jsx(
+                              CalibrationWeekHeader,
+                              {
+                                week,
+                                comments: weekComments,
+                                showCommentButton: true,
+                                availablePrefixes,
+                                onAddComment: (text, prefixId, prefixName) => handleAddWeekComment(weekKey, text, prefixId)
+                              }
+                            )
+                          },
+                          weekKey
+                        );
+                      })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("th", { className: cn(
+                        "h-auto px-3 py-1.5 text-left align-middle",
+                        "border-r border-b border-border bg-muted/30",
+                        stickyRowHeader && "sticky left-0 z-30 min-w-[200px]",
+                        stickyRowHeader && "shadow-[var(--j3m-shadow-sticky-edge)]"
+                      ), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium text-muted-foreground uppercase tracking-wide", children: "Summary" }) }),
+                      columnSummaryData.map((summary) => {
+                        const statusBg = summary.status === "complete" ? "bg-green-50/50 dark:bg-green-950/30" : summary.status === "critical" ? "bg-red-50/50 dark:bg-red-950/30" : "bg-muted/30";
+                        const statusText = summary.status === "complete" ? "text-green-700 dark:text-green-300" : summary.status === "critical" ? "text-red-700 dark:text-red-300" : "text-muted-foreground";
+                        return /* @__PURE__ */ jsxRuntime.jsx(
+                          "th",
+                          {
+                            className: cn(
+                              "h-auto px-2 py-1.5 text-left align-middle",
+                              "border-r border-b border-border last:border-r-0 min-w-[220px]",
+                              statusBg
+                            ),
+                            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-0.5", children: [
+                              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+                                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Factory, { className: cn("h-3 w-3", statusText) }),
+                                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("text-xs font-medium tabular-nums", statusText), children: [
+                                  summary.primary?.value.toLocaleString(void 0, { maximumFractionDigits: 1 }),
+                                  " t"
+                                ] })
+                              ] }),
+                              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[10px] text-muted-foreground tabular-nums", children: [
+                                summary.secondary?.value.toLocaleString(void 0, { maximumFractionDigits: 1 }),
+                                " t req"
+                              ] })
+                            ] })
+                          },
+                          summary.columnKey
+                        );
+                      })
+                    ] })
+                  ] }),
                   /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "bg-background", children: paginatedPrefixes.length > 0 ? paginatedPrefixes.map((prefix) => {
                     const sortedWeekKeys = weeks.map((w) => getWeekKey(w.startDate));
                     let hasDeficit = false;
@@ -10269,14 +10763,14 @@ function CommentDialog({
   open,
   onOpenChange
 }) {
-  const [selectedPrefixId, setSelectedPrefixId] = React29__namespace.useState("");
-  const [selectedWeekKey, setSelectedWeekKey] = React29__namespace.useState("");
-  const [commentText, setCommentText] = React29__namespace.useState("");
-  const currentWeek = React29__namespace.useMemo(
+  const [selectedPrefixId, setSelectedPrefixId] = React27__namespace.useState("");
+  const [selectedWeekKey, setSelectedWeekKey] = React27__namespace.useState("");
+  const [commentText, setCommentText] = React27__namespace.useState("");
+  const currentWeek = React27__namespace.useMemo(
     () => weeks.find((w) => w.isCurrentWeek),
     [weeks]
   );
-  React29__namespace.useEffect(() => {
+  React27__namespace.useEffect(() => {
     if (open) {
       setSelectedPrefixId(prefixes[0]?.id ?? "");
       setSelectedWeekKey(currentWeek ? getWeekKey(currentWeek.startDate) : weeks[0] ? getWeekKey(weeks[0].startDate) : "");
@@ -10606,35 +11100,39 @@ function groupDeliveriesByPrefixAndDay(deliveries) {
   }
   return grouped;
 }
-function getCardStyles(state, hasRisk, isHovered) {
+function getCardStyles(state, hasRisk) {
   if (hasRisk) {
     return {
-      stroke: "border-l-[3px] border-l-red-500",
-      cardBg: "bg-background",
-      titleColor: "text-foreground",
+      fill: statusCellFillClasses.risk.combined,
+      titleColor: statusCellTextClasses.risk.title,
+      subtitleColor: statusCellTextClasses.risk.subtitle,
+      iconColor: statusCellTextClasses.risk.icon,
       opacity: ""
     };
   }
   switch (state) {
     case "sent":
       return {
-        stroke: "border-l-[3px] border-l-green-500/40",
-        cardBg: "bg-muted/40",
-        titleColor: "text-muted-foreground",
-        opacity: "opacity-60"
+        fill: statusCellFillClasses.shipped.combined,
+        titleColor: statusCellTextClasses.shipped.title,
+        subtitleColor: statusCellTextClasses.shipped.subtitle,
+        iconColor: statusCellTextClasses.shipped.icon,
+        opacity: "opacity-75"
       };
     case "ready":
       return {
-        stroke: "border-l-[4px] border-l-green-500",
-        cardBg: "bg-background",
-        titleColor: "text-foreground",
+        fill: statusCellFillClasses.ready.combined,
+        titleColor: statusCellTextClasses.ready.title,
+        subtitleColor: statusCellTextClasses.ready.subtitle,
+        iconColor: statusCellTextClasses.ready.icon,
         opacity: ""
       };
     default:
       return {
-        stroke: isHovered ? "border-l-[3px] border-l-primary/50" : "border-l-[3px] border-l-border",
-        cardBg: "bg-background",
-        titleColor: "text-foreground",
+        fill: statusCellFillClasses.normal.combined,
+        titleColor: statusCellTextClasses.normal.title,
+        subtitleColor: statusCellTextClasses.normal.subtitle,
+        iconColor: statusCellTextClasses.normal.icon,
         opacity: ""
       };
   }
@@ -10645,10 +11143,9 @@ function DeliveryBadge({
   onCommentClick,
   className
 }) {
-  const [isHovered, setIsHovered] = React29__namespace.useState(false);
   const hasComments = delivery.comments.length > 0;
   const visualState = getDeliveryVisualState(delivery);
-  const styles = getCardStyles(visualState, delivery.hasProductionRisk ?? false, isHovered);
+  const styles = getCardStyles(visualState, delivery.hasProductionRisk ?? false);
   const projectName = delivery.destination || delivery.label;
   const handleClick = (e) => {
     e.stopPropagation();
@@ -10671,16 +11168,14 @@ function DeliveryBadge({
       className: cn(
         // Position relative for comment button
         "relative",
-        // Full-width in cell, 90° corners (j3m.radius.none)
-        "w-full rounded-none",
+        // Full-width in cell, small radius (matching planning cards)
+        "w-full rounded-lg",
         // Compact sizing - min-h-[72px], p-4 (j3m.spacing.m)
         "min-h-[72px] p-4",
-        // Card base: dynamic background based on state
-        styles.cardBg,
-        "border border-border",
-        // Left stroke for status
-        styles.stroke,
-        // Opacity for shipped state only
+        // FULL-CARD STATUS FILL - uses shared calibration/planning tokens
+        // This is the key change: status fill on outermost container
+        styles.fill,
+        // Opacity for shipped state
         styles.opacity,
         // Interactive states (disabled hover lift for shipped)
         "transition-all duration-200 ease-out",
@@ -10699,6 +11194,8 @@ function DeliveryBadge({
               // 44px touch target for accessibility
               "h-11 w-11",
               "rounded-full",
+              // Subtle background for visibility on colored fills
+              "bg-background/50 hover:bg-background/80",
               hasComments && "text-primary"
             ),
             onClick: handleCommentClick,
@@ -10721,8 +11218,6 @@ function DeliveryBadge({
             type: "button",
             onClick: handleClick,
             onKeyDown: handleKeyDown,
-            onMouseEnter: () => setIsHovered(true),
-            onMouseLeave: () => setIsHovered(false),
             className: cn(
               // Full width, no background (inherits from parent)
               "w-full bg-transparent text-left",
@@ -10740,14 +11235,15 @@ function DeliveryBadge({
                   "text-sm font-semibold leading-tight line-clamp-2",
                   styles.titleColor
                 ), children: projectName }),
-                delivery.hasProductionRisk && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "h-4 w-4 text-red-500 shrink-0 mt-0.5" })
+                delivery.hasProductionRisk && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: cn("h-4 w-4 shrink-0 mt-0.5", styles.iconColor) })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 mt-2", children: [
                 visualState === "sent" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-3.5 w-3.5 text-green-600 dark:text-green-400 shrink-0" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium text-muted-foreground uppercase tracking-wide", children: "Shipped" })
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: cn("h-3.5 w-3.5 shrink-0", styles.iconColor) }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-[10px] font-medium uppercase tracking-wide", styles.subtitleColor), children: "Shipped" })
                 ] }),
-                visualState === "ready" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-semibold text-green-600 dark:text-green-400 uppercase tracking-wide", children: "Ready" })
+                visualState === "ready" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-[10px] font-semibold uppercase tracking-wide", styles.subtitleColor), children: "Ready" }),
+                delivery.hasProductionRisk && visualState !== "sent" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-[10px] font-semibold uppercase tracking-wide", styles.subtitleColor), children: "At Risk" })
               ] })
             ]
           }
@@ -10821,7 +11317,7 @@ function WeeklyLoadingView({
   showNavigation = true,
   className
 }) {
-  const [shippedOpenState, setShippedOpenState] = React29__namespace.useState({
+  const [shippedOpenState, setShippedOpenState] = React27__namespace.useState({
     1: false,
     // Monday
     2: false,
@@ -10839,7 +11335,7 @@ function WeeklyLoadingView({
       [dayOfWeek]: !prev[dayOfWeek]
     }));
   };
-  const weekDays = React29__namespace.useMemo(() => {
+  const weekDays = React27__namespace.useMemo(() => {
     const days = [];
     for (let i = 0; i < 5; i++) {
       const date = dateFns.addDays(week.startDate, i);
@@ -10851,7 +11347,7 @@ function WeeklyLoadingView({
     }
     return days;
   }, [week.startDate]);
-  const deliveriesByDay = React29__namespace.useMemo(() => {
+  const deliveriesByDay = React27__namespace.useMemo(() => {
     const grouped = /* @__PURE__ */ new Map();
     for (let i = 1; i <= 5; i++) {
       grouped.set(i, { pending: [], shipped: [] });
@@ -10871,6 +11367,19 @@ function WeeklyLoadingView({
   }, [deliveries]);
   const totalPendingDeliveries = deliveries.filter((d) => !isShippedDelivery(d)).length;
   const totalShippedDeliveries = deliveries.filter((d) => isShippedDelivery(d)).length;
+  const daySummaryData = React27__namespace.useMemo(() => {
+    const summaries = /* @__PURE__ */ new Map();
+    for (let i = 1; i <= 5; i++) {
+      const dayData = deliveriesByDay.get(i) ?? { pending: [], shipped: [] };
+      const allDayDeliveries = [...dayData.pending, ...dayData.shipped];
+      summaries.set(i, {
+        deliveries: allDayDeliveries.length,
+        tonsRequired: allDayDeliveries.reduce((sum, d) => sum + (d.totalTons ?? 0), 0),
+        tonsProduced: allDayDeliveries.reduce((sum, d) => sum + (d.producedTons ?? 0), 0)
+      });
+    }
+    return summaries;
+  }, [deliveriesByDay]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col", className), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 border-b border-border p-4 lg:flex-row lg:items-center lg:justify-between", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
@@ -10955,6 +11464,42 @@ function WeeklyLoadingView({
           },
           dayOfWeek
         )) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-5 border-b border-border", children: weekDays.map(({ dayOfWeek, isToday: dayIsToday }) => {
+          const summary = daySummaryData.get(dayOfWeek) ?? { deliveries: 0, tonsRequired: 0, tonsProduced: 0 };
+          const productionComplete = summary.tonsRequired > 0 && summary.tonsProduced >= summary.tonsRequired;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn(
+                "flex flex-col gap-0.5 py-1.5 px-2",
+                productionComplete ? "bg-green-50/50 dark:bg-green-950/30" : "bg-muted/20",
+                dayIsToday && "bg-primary/5"
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Truck, { className: "h-3 w-3 text-muted-foreground" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium tabular-nums text-muted-foreground", children: summary.deliveries })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Factory, { className: cn(
+                    "h-3 w-3",
+                    productionComplete ? "text-green-600 dark:text-green-400" : "text-muted-foreground"
+                  ) }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn(
+                    "text-[10px] tabular-nums",
+                    productionComplete ? "text-green-700 dark:text-green-300" : "text-muted-foreground"
+                  ), children: [
+                    summary.tonsProduced.toLocaleString(void 0, { maximumFractionDigits: 1 }),
+                    "/",
+                    summary.tonsRequired.toLocaleString(void 0, { maximumFractionDigits: 1 }),
+                    " t"
+                  ] })
+                ] })
+              ]
+            },
+            dayOfWeek
+          );
+        }) }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-5", children: weekDays.map(({ dayOfWeek, isToday: dayIsToday }) => {
           const dayData = deliveriesByDay.get(dayOfWeek) ?? { pending: [], shipped: [] };
           const hasPending = dayData.pending.length > 0;
@@ -11176,7 +11721,7 @@ function DeliveryTimeline({ timelineState }) {
     const state = getStateForStep(step.id);
     const styles = getStepStyles(state);
     const isLast = index === TIMELINE_STEPS.length - 1;
-    return /* @__PURE__ */ jsxRuntime.jsxs(React29__namespace.Fragment, { children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(React27__namespace.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
@@ -11311,7 +11856,7 @@ function AddCommentDialog({
   weekId,
   onAddComment
 }) {
-  const [commentText, setCommentText] = React29__namespace.useState("");
+  const [commentText, setCommentText] = React27__namespace.useState("");
   const handleSubmit = () => {
     if (commentText.trim() && onAddComment) {
       onAddComment({
@@ -11336,7 +11881,7 @@ function AddCommentDialog({
       handleSubmit();
     }
   };
-  React29__namespace.useEffect(() => {
+  React27__namespace.useEffect(() => {
     if (!open) {
       setCommentText("");
     }
@@ -11399,8 +11944,8 @@ function CommentsSection({
   weekId,
   onAddComment
 }) {
-  const [viewCommentsOpen, setViewCommentsOpen] = React29__namespace.useState(true);
-  const [addDialogOpen, setAddDialogOpen] = React29__namespace.useState(false);
+  const [viewCommentsOpen, setViewCommentsOpen] = React27__namespace.useState(true);
+  const [addDialogOpen, setAddDialogOpen] = React27__namespace.useState(false);
   const formatDate3 = (date) => {
     return new Intl.DateTimeFormat("en-US", {
       month: "short",
@@ -11474,7 +12019,7 @@ function DeliveryDetailPage({
   onConfirmLoad
 }) {
   const timelineState = getTimelineState(delivery);
-  const elementsByStatus = React29__namespace.useMemo(() => {
+  const elementsByStatus = React27__namespace.useMemo(() => {
     const loaded = delivery.elements.filter((e) => e.status === "loaded");
     const missing = delivery.elements.filter((e) => e.status === "missing");
     const moved = delivery.elements.filter((e) => e.status === "moved");
@@ -11661,11 +12206,11 @@ function SupplierWeeklyLoading({
   bordered = true,
   className
 }) {
-  const [selectedDelivery, setSelectedDelivery] = React29__namespace.useState(null);
-  const [sheetOpen, setSheetOpen] = React29__namespace.useState(false);
-  const [commentDelivery, setCommentDelivery] = React29__namespace.useState(null);
-  const [commentDialogOpen, setCommentDialogOpen] = React29__namespace.useState(false);
-  const [commentText, setCommentText] = React29__namespace.useState("");
+  const [selectedDelivery, setSelectedDelivery] = React27__namespace.useState(null);
+  const [sheetOpen, setSheetOpen] = React27__namespace.useState(false);
+  const [commentDelivery, setCommentDelivery] = React27__namespace.useState(null);
+  const [commentDialogOpen, setCommentDialogOpen] = React27__namespace.useState(false);
+  const [commentText, setCommentText] = React27__namespace.useState("");
   const handleDeliveryClick = (delivery) => {
     setSelectedDelivery(delivery);
     setSheetOpen(true);
@@ -11708,31 +12253,74 @@ function SupplierWeeklyLoading({
       handleCommentSubmit();
     }
   };
+  const insightMetrics = React27__namespace.useMemo(() => {
+    const totalDeliveries = deliveries.length;
+    const readyDeliveries = deliveries.filter((d) => d.isReadyToUnload).length;
+    deliveries.filter(
+      (d) => d.status === "shipped" || d.status === "delivered"
+    ).length;
+    const totalTonsRequired = deliveries.reduce((sum, d) => sum + (d.totalTons ?? 0), 0);
+    const producedTons = deliveries.reduce((sum, d) => sum + (d.producedTons ?? 0), 0);
+    return [
+      {
+        key: "deliveries",
+        label: "deliveries",
+        value: totalDeliveries,
+        icon: "truck",
+        status: "normal"
+      },
+      {
+        key: "ready",
+        label: "ready",
+        value: readyDeliveries,
+        icon: "check",
+        status: readyDeliveries > 0 ? "success" : "normal"
+      },
+      {
+        key: "required",
+        label: "tons required",
+        value: totalTonsRequired,
+        unit: "t",
+        icon: "factory",
+        status: "normal"
+      },
+      {
+        key: "produced",
+        label: "tons produced",
+        value: producedTons,
+        unit: "t",
+        icon: "factory",
+        status: producedTons >= totalTonsRequired ? "success" : producedTons >= totalTonsRequired * 0.5 ? "normal" : "warning"
+      }
+    ];
+  }, [deliveries]);
   const Wrapper = bordered ? Card : "div";
   const Content14 = bordered ? CardContent : "div";
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      Wrapper,
-      {
-        className: cn(
-          "flex flex-col overflow-hidden",
-          // Removed fixed min-height - content-driven sizing
-          !bordered && "border border-border bg-card rounded-lg",
-          className
-        ),
-        children: /* @__PURE__ */ jsxRuntime.jsx(Content14, { className: cn("flex-1 overflow-hidden p-0", !bordered && ""), children: /* @__PURE__ */ jsxRuntime.jsx(
-          WeeklyLoadingView,
-          {
-            week,
-            deliveries,
-            onDeliveryClick: handleDeliveryClick,
-            onDeliveryCommentClick: handleDeliveryCommentClick,
-            onWeekChange,
-            showNavigation
-          }
-        ) })
-      }
-    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-0", className), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(InsightBar, { metrics: insightMetrics, className: "rounded-t-lg border border-b-0" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Wrapper,
+        {
+          className: cn(
+            "flex flex-col overflow-hidden rounded-t-none",
+            // Removed fixed min-height - content-driven sizing
+            !bordered && "border border-border bg-card rounded-lg rounded-t-none"
+          ),
+          children: /* @__PURE__ */ jsxRuntime.jsx(Content14, { className: cn("flex-1 overflow-hidden p-0", !bordered && ""), children: /* @__PURE__ */ jsxRuntime.jsx(
+            WeeklyLoadingView,
+            {
+              week,
+              deliveries,
+              onDeliveryClick: handleDeliveryClick,
+              onDeliveryCommentClick: handleDeliveryCommentClick,
+              onWeekChange,
+              showNavigation
+            }
+          ) })
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsxRuntime.jsx(Sheet, { open: sheetOpen, onOpenChange: (open) => !open && handleSheetClose(), children: /* @__PURE__ */ jsxRuntime.jsxs(
       SheetContent,
       {
@@ -11809,35 +12397,39 @@ function SupplierWeeklyLoading({
     ] }) })
   ] });
 }
-function getCardStyles2(state, hasRisk, isHovered) {
+function getCardStyles2(state, hasRisk) {
   if (hasRisk) {
     return {
-      stroke: "border-l-[3px] border-l-red-500",
-      cardBg: "bg-background",
-      titleColor: "text-foreground",
+      fill: statusCellFillClasses.risk.combined,
+      titleColor: statusCellTextClasses.risk.title,
+      subtitleColor: statusCellTextClasses.risk.subtitle,
+      iconColor: statusCellTextClasses.risk.icon,
       opacity: ""
     };
   }
   switch (state) {
     case "sent":
       return {
-        stroke: "border-l-[3px] border-l-green-500/40",
-        cardBg: "bg-muted/40",
-        titleColor: "text-muted-foreground",
-        opacity: "opacity-60"
+        fill: statusCellFillClasses.shipped.combined,
+        titleColor: statusCellTextClasses.shipped.title,
+        subtitleColor: statusCellTextClasses.shipped.subtitle,
+        iconColor: statusCellTextClasses.shipped.icon,
+        opacity: "opacity-75"
       };
     case "ready":
       return {
-        stroke: "border-l-[4px] border-l-green-500",
-        cardBg: "bg-background",
-        titleColor: "text-foreground",
+        fill: statusCellFillClasses.ready.combined,
+        titleColor: statusCellTextClasses.ready.title,
+        subtitleColor: statusCellTextClasses.ready.subtitle,
+        iconColor: statusCellTextClasses.ready.icon,
         opacity: ""
       };
     default:
       return {
-        stroke: isHovered ? "border-l-[3px] border-l-primary/50" : "border-l-[3px] border-l-border",
-        cardBg: "bg-background",
-        titleColor: "text-foreground",
+        fill: statusCellFillClasses.normal.combined,
+        titleColor: statusCellTextClasses.normal.title,
+        subtitleColor: statusCellTextClasses.normal.subtitle,
+        iconColor: statusCellTextClasses.normal.icon,
         opacity: ""
       };
   }
@@ -11847,10 +12439,9 @@ function DeliveryCard({
   onTap,
   className
 }) {
-  const [isHovered, setIsHovered] = React29__namespace.useState(false);
   const hasComments = delivery.comments.length > 0;
   const visualState = getDeliveryVisualState(delivery);
-  const styles = getCardStyles2(visualState, delivery.hasProductionRisk ?? false, isHovered);
+  const styles = getCardStyles2(visualState, delivery.hasProductionRisk ?? false);
   const projectName = delivery.destination || delivery.label;
   const handleClick = () => {
     onTap?.();
@@ -11868,19 +12459,15 @@ function DeliveryCard({
       tabIndex: 0,
       onClick: handleClick,
       onKeyDown: handleKeyDown,
-      onMouseEnter: () => setIsHovered(true),
-      onMouseLeave: () => setIsHovered(false),
       className: cn(
-        // Full-width, 90° corners (j3m.radius.none)
-        "w-full rounded-none",
+        // Full-width, small radius (matching planning table cards)
+        "w-full rounded-lg",
         // Touch-friendly sizing - 56px min-height for iPad
         "min-h-[56px] p-4",
-        // Card styling: dynamic background based on state
-        styles.cardBg,
-        "border border-border",
-        // Left stroke for status
-        styles.stroke,
-        // Opacity for shipped state only
+        // FULL-CARD STATUS FILL - uses shared calibration/planning tokens
+        // This is the key change: status fill on outermost container
+        styles.fill,
+        // Opacity for shipped state
         styles.opacity,
         // Hover/tap state - lift effect (disabled for shipped)
         "cursor-pointer transition-all duration-200 ease-out",
@@ -11897,21 +12484,22 @@ function DeliveryCard({
               "text-sm font-semibold truncate",
               styles.titleColor
             ), children: projectName }),
-            delivery.hasProductionRisk && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "h-4 w-4 text-red-500 shrink-0" }),
-            hasComments && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative shrink-0", children: [
+            delivery.hasProductionRisk && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: cn("h-4 w-4 shrink-0", styles.iconColor) }),
+            hasComments && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative shrink-0 p-0.5 rounded bg-background/50", children: [
               /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquare, { className: "h-3.5 w-3.5 text-muted-foreground" }),
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -top-0.5 -right-0.5 h-2 w-2 rounded-full bg-primary" })
             ] })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
             visualState === "sent" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-3.5 w-3.5 text-green-600 dark:text-green-400 shrink-0" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium text-muted-foreground uppercase tracking-wide", children: "Shipped" })
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: cn("h-3.5 w-3.5 shrink-0", styles.iconColor) }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-[10px] font-medium uppercase tracking-wide", styles.subtitleColor), children: "Shipped" })
             ] }),
-            visualState === "ready" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-semibold text-green-600 dark:text-green-400 uppercase tracking-wide", children: "Ready" })
+            visualState === "ready" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-[10px] font-semibold uppercase tracking-wide", styles.subtitleColor), children: "Ready" }),
+            delivery.hasProductionRisk && visualState !== "sent" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-[10px] font-semibold uppercase tracking-wide", styles.subtitleColor), children: "At Risk" })
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4 text-muted-foreground shrink-0" })
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: cn("h-4 w-4 shrink-0", styles.iconColor) })
       ] })
     }
   );
@@ -11979,7 +12567,7 @@ var BADGE_VARIANT_LABELS = {
   colored: "Colored",
   mixed: "Mixed"
 };
-var CalendarContext = React29__namespace.createContext(null);
+var CalendarContext = React27__namespace.createContext(null);
 function EventCalendarProvider({
   children,
   events: initialEvents = [],
@@ -11994,38 +12582,38 @@ function EventCalendarProvider({
   onEventUpdate,
   onEventDelete
 }) {
-  const [selectedDate, setSelectedDate] = React29__namespace.useState(defaultDate);
-  const [selectedUserId, setSelectedUserId] = React29__namespace.useState(defaultUserId);
-  const [events, setEventsState] = React29__namespace.useState(initialEvents);
-  const [users] = React29__namespace.useState(initialUsers);
-  const [badgeVariant, setBadgeVariant] = React29__namespace.useState(defaultBadgeVariant);
-  const [view, setView] = React29__namespace.useState(defaultView);
-  const [workingHours, setWorkingHours] = React29__namespace.useState(defaultWorkingHours);
-  const [visibleHours, setVisibleHours] = React29__namespace.useState(defaultVisibleHours);
-  React29__namespace.useEffect(() => {
+  const [selectedDate, setSelectedDate] = React27__namespace.useState(defaultDate);
+  const [selectedUserId, setSelectedUserId] = React27__namespace.useState(defaultUserId);
+  const [events, setEventsState] = React27__namespace.useState(initialEvents);
+  const [users] = React27__namespace.useState(initialUsers);
+  const [badgeVariant, setBadgeVariant] = React27__namespace.useState(defaultBadgeVariant);
+  const [view, setView] = React27__namespace.useState(defaultView);
+  const [workingHours, setWorkingHours] = React27__namespace.useState(defaultWorkingHours);
+  const [visibleHours, setVisibleHours] = React27__namespace.useState(defaultVisibleHours);
+  React27__namespace.useEffect(() => {
     setEventsState(initialEvents);
   }, [initialEvents]);
-  const setEvents = React29__namespace.useCallback((newEvents) => {
+  const setEvents = React27__namespace.useCallback((newEvents) => {
     setEventsState(newEvents);
   }, []);
-  const addEvent = React29__namespace.useCallback((event) => {
+  const addEvent = React27__namespace.useCallback((event) => {
     setEventsState((prev) => [...prev, event]);
     onEventAdd?.(event);
   }, [onEventAdd]);
-  const updateEvent = React29__namespace.useCallback((event) => {
+  const updateEvent = React27__namespace.useCallback((event) => {
     setEventsState(
       (prev) => prev.map((e) => e.id === event.id ? event : e)
     );
     onEventUpdate?.(event);
   }, [onEventUpdate]);
-  const deleteEvent = React29__namespace.useCallback((eventId) => {
+  const deleteEvent = React27__namespace.useCallback((eventId) => {
     setEventsState((prev) => prev.filter((e) => e.id !== eventId));
     onEventDelete?.(eventId);
   }, [onEventDelete]);
-  const goToToday = React29__namespace.useCallback(() => {
+  const goToToday = React27__namespace.useCallback(() => {
     setSelectedDate(/* @__PURE__ */ new Date());
   }, []);
-  const goToPrevious = React29__namespace.useCallback(() => {
+  const goToPrevious = React27__namespace.useCallback(() => {
     setSelectedDate((current) => {
       switch (view) {
         case "day":
@@ -12043,7 +12631,7 @@ function EventCalendarProvider({
       }
     });
   }, [view]);
-  const goToNext = React29__namespace.useCallback(() => {
+  const goToNext = React27__namespace.useCallback(() => {
     setSelectedDate((current) => {
       switch (view) {
         case "day":
@@ -12061,7 +12649,7 @@ function EventCalendarProvider({
       }
     });
   }, [view]);
-  const contextValue = React29__namespace.useMemo(
+  const contextValue = React27__namespace.useMemo(
     () => ({
       // State
       selectedDate,
@@ -12108,7 +12696,7 @@ function EventCalendarProvider({
   return /* @__PURE__ */ jsxRuntime.jsx(CalendarContext.Provider, { value: contextValue, children });
 }
 function useEventCalendar() {
-  const context = React29__namespace.useContext(CalendarContext);
+  const context = React27__namespace.useContext(CalendarContext);
   if (!context) {
     throw new Error("useEventCalendar must be used within an EventCalendarProvider");
   }
@@ -12116,14 +12704,14 @@ function useEventCalendar() {
 }
 function useFilteredEvents() {
   const { events, selectedUserId } = useEventCalendar();
-  return React29__namespace.useMemo(() => {
+  return React27__namespace.useMemo(() => {
     if (!selectedUserId) return events;
     return events.filter((event) => event.user.id === selectedUserId);
   }, [events, selectedUserId]);
 }
 function useEventsInRange(startDate, endDate) {
   const filteredEvents = useFilteredEvents();
-  return React29__namespace.useMemo(() => {
+  return React27__namespace.useMemo(() => {
     return filteredEvents.filter((event) => {
       const eventStart = new Date(event.startDate);
       const eventEnd = new Date(event.endDate);
@@ -12681,8 +13269,8 @@ function MoreEvents({ count, onClick, className }) {
   );
 }
 function TimeIndicator({ className }) {
-  const [now, setNow] = React29__namespace.useState(/* @__PURE__ */ new Date());
-  React29__namespace.useEffect(() => {
+  const [now, setNow] = React27__namespace.useState(/* @__PURE__ */ new Date());
+  React27__namespace.useEffect(() => {
     const interval = setInterval(() => setNow(/* @__PURE__ */ new Date()), 6e4);
     return () => clearInterval(interval);
   }, []);
@@ -12719,24 +13307,24 @@ function DateBadge({ date, className }) {
     }
   );
 }
-var DragContext = React29__namespace.createContext(null);
+var DragContext = React27__namespace.createContext(null);
 function DragProvider({
   children,
   snapMinutes = 15,
   onDragStart,
   onDragEnd
 }) {
-  const [draggedEvent, setDraggedEventState] = React29__namespace.useState(null);
-  const [isDragging, setIsDragging] = React29__namespace.useState(false);
+  const [draggedEvent, setDraggedEventState] = React27__namespace.useState(null);
+  const [isDragging, setIsDragging] = React27__namespace.useState(false);
   const { updateEvent } = useEventCalendar();
-  const setDraggedEvent = React29__namespace.useCallback((event) => {
+  const setDraggedEvent = React27__namespace.useCallback((event) => {
     setDraggedEventState(event);
     setIsDragging(!!event);
     if (event) {
       onDragStart?.(event);
     }
   }, [onDragStart]);
-  const handleDrop = React29__namespace.useCallback((newStartDate) => {
+  const handleDrop = React27__namespace.useCallback((newStartDate) => {
     if (!draggedEvent) return;
     const snappedDate = snapToInterval(newStartDate, snapMinutes);
     const { startDate, endDate } = calculateDropDates(draggedEvent, snappedDate);
@@ -12749,7 +13337,7 @@ function DragProvider({
     onDragEnd?.(updatedEvent, new Date(startDate), new Date(endDate));
     setDraggedEvent(null);
   }, [draggedEvent, snapMinutes, updateEvent, onDragEnd, setDraggedEvent]);
-  const contextValue = React29__namespace.useMemo(
+  const contextValue = React27__namespace.useMemo(
     () => ({
       draggedEvent,
       setDraggedEvent,
@@ -12760,7 +13348,7 @@ function DragProvider({
   return /* @__PURE__ */ jsxRuntime.jsx(DragContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(DragDropHandler, { onDrop: handleDrop, children }) });
 }
 function useDrag() {
-  const context = React29__namespace.useContext(DragContext);
+  const context = React27__namespace.useContext(DragContext);
   if (!context) {
     throw new Error("useDrag must be used within a DragProvider");
   }
@@ -12805,7 +13393,7 @@ function DroppableZone({
 }) {
   const { draggedEvent, setDraggedEvent } = useDrag();
   const { updateEvent } = useEventCalendar();
-  const [isOver, setIsOver] = React29__namespace.useState(false);
+  const [isOver, setIsOver] = React27__namespace.useState(false);
   const handleDragOver = (e) => {
     e.preventDefault();
     e.dataTransfer.dropEffect = "move";
@@ -12843,23 +13431,23 @@ function DroppableZone({
 function useDroppable({ date, hour, minute = 0, onDrop }) {
   const { draggedEvent, setDraggedEvent } = useDrag();
   const { updateEvent } = useEventCalendar();
-  const [isOver, setIsOver] = React29__namespace.useState(false);
-  const dropTargetDate = React29__namespace.useMemo(() => {
+  const [isOver, setIsOver] = React27__namespace.useState(false);
+  const dropTargetDate = React27__namespace.useMemo(() => {
     const targetDate = new Date(date);
     if (hour !== void 0) {
       targetDate.setHours(hour, minute, 0, 0);
     }
     return targetDate;
   }, [date, hour, minute]);
-  const handleDragOver = React29__namespace.useCallback((e) => {
+  const handleDragOver = React27__namespace.useCallback((e) => {
     e.preventDefault();
     e.dataTransfer.dropEffect = "move";
     if (!isOver) setIsOver(true);
   }, [isOver]);
-  const handleDragLeave = React29__namespace.useCallback(() => {
+  const handleDragLeave = React27__namespace.useCallback(() => {
     setIsOver(false);
   }, []);
-  const handleDrop = React29__namespace.useCallback((e) => {
+  const handleDrop = React27__namespace.useCallback((e) => {
     e.preventDefault();
     setIsOver(false);
     if (!draggedEvent) return;
@@ -12886,13 +13474,13 @@ function useDroppable({ date, hour, minute = 0, onDrop }) {
 function useDraggable(event, disabled = false) {
   const { setDraggedEvent, draggedEvent } = useDrag();
   const isDragged = draggedEvent?.id === event.id;
-  const handleDragStart = React29__namespace.useCallback((e) => {
+  const handleDragStart = React27__namespace.useCallback((e) => {
     if (disabled) return;
     e.dataTransfer.effectAllowed = "move";
     e.dataTransfer.setData("text/plain", event.id);
     setDraggedEvent(event);
   }, [disabled, event, setDraggedEvent]);
-  const handleDragEnd = React29__namespace.useCallback(() => {
+  const handleDragEnd = React27__namespace.useCallback(() => {
     setDraggedEvent(null);
   }, [setDraggedEvent]);
   return {
@@ -12933,15 +13521,15 @@ function MonthView({
 }) {
   const { selectedDate, badgeVariant, setSelectedDate, setView } = useEventCalendar();
   const filteredEvents = useFilteredEvents();
-  const { singleDayEvents, multiDayEvents } = React29__namespace.useMemo(
+  const { singleDayEvents, multiDayEvents } = React27__namespace.useMemo(
     () => splitEventsByDuration(filteredEvents),
     [filteredEvents]
   );
-  const cells = React29__namespace.useMemo(
+  const cells = React27__namespace.useMemo(
     () => getCalendarCells(selectedDate),
     [selectedDate]
   );
-  const eventPositions = React29__namespace.useMemo(
+  const eventPositions = React27__namespace.useMemo(
     () => calculateMonthEventPositions(multiDayEvents, singleDayEvents, selectedDate),
     [multiDayEvents, singleDayEvents, selectedDate]
   );
@@ -13123,7 +13711,7 @@ function WeekView({
     visibleHours
   } = useEventCalendar();
   const filteredEvents = useFilteredEvents();
-  const { singleDayEvents, multiDayEvents } = React29__namespace.useMemo(
+  const { singleDayEvents, multiDayEvents } = React27__namespace.useMemo(
     () => splitEventsByDuration(filteredEvents),
     [filteredEvents]
   );
@@ -13329,8 +13917,8 @@ function CalendarTimeline({
   firstVisibleHour,
   lastVisibleHour
 }) {
-  const [currentTime, setCurrentTime] = React29__namespace.useState(/* @__PURE__ */ new Date());
-  React29__namespace.useEffect(() => {
+  const [currentTime, setCurrentTime] = React27__namespace.useState(/* @__PURE__ */ new Date());
+  React27__namespace.useEffect(() => {
     const interval = setInterval(() => {
       setCurrentTime(/* @__PURE__ */ new Date());
     }, 6e4);
@@ -13413,7 +14001,7 @@ function DayView({
     visibleHours
   } = useEventCalendar();
   const filteredEvents = useFilteredEvents();
-  const { singleDayEvents, multiDayEvents } = React29__namespace.useMemo(
+  const { singleDayEvents, multiDayEvents } = React27__namespace.useMemo(
     () => splitEventsByDuration(filteredEvents),
     [filteredEvents]
   );
@@ -13421,7 +14009,7 @@ function DayView({
     visibleHours,
     singleDayEvents
   );
-  const currentEvents = React29__namespace.useMemo(() => {
+  const currentEvents = React27__namespace.useMemo(() => {
     if (!dateFns.isToday(selectedDate)) return [];
     return getCurrentEvents(singleDayEvents);
   }, [singleDayEvents, selectedDate]);
@@ -13645,8 +14233,8 @@ function CalendarTimeline2({
   firstVisibleHour,
   lastVisibleHour
 }) {
-  const [currentTime, setCurrentTime] = React29__namespace.useState(/* @__PURE__ */ new Date());
-  React29__namespace.useEffect(() => {
+  const [currentTime, setCurrentTime] = React27__namespace.useState(/* @__PURE__ */ new Date());
+  React27__namespace.useEffect(() => {
     const interval = setInterval(() => {
       setCurrentTime(/* @__PURE__ */ new Date());
     }, 6e4);
@@ -13680,7 +14268,7 @@ function YearView({
 }) {
   const { selectedDate, setSelectedDate, setView } = useEventCalendar();
   const filteredEvents = useFilteredEvents();
-  const months = React29__namespace.useMemo(() => {
+  const months = React27__namespace.useMemo(() => {
     const yearStart = dateFns.startOfYear(selectedDate);
     return Array.from({ length: 12 }, (_, i) => dateFns.addMonths(yearStart, i));
   }, [selectedDate]);
@@ -13803,11 +14391,11 @@ function AgendaView({
 }) {
   const { selectedDate, setSelectedDate, setView } = useEventCalendar();
   const filteredEvents = useFilteredEvents();
-  const { singleDayEvents, multiDayEvents } = React29__namespace.useMemo(
+  const { singleDayEvents, multiDayEvents } = React27__namespace.useMemo(
     () => splitEventsByDuration(filteredEvents),
     [filteredEvents]
   );
-  const eventsByDay = React29__namespace.useMemo(() => {
+  const eventsByDay = React27__namespace.useMemo(() => {
     const allDates = /* @__PURE__ */ new Map();
     singleDayEvents.forEach((event) => {
       const eventDate = dateFns.parseISO(event.startDate);
@@ -14272,16 +14860,16 @@ function EventDialog({
   defaultUserId
 }) {
   const { addEvent, updateEvent, deleteEvent, users } = useEventCalendar();
-  const [title, setTitle] = React29__namespace.useState("");
-  const [description, setDescription] = React29__namespace.useState("");
-  const [startDate, setStartDate] = React29__namespace.useState("");
-  const [startTime, setStartTime] = React29__namespace.useState("");
-  const [endDate, setEndDate] = React29__namespace.useState("");
-  const [endTime, setEndTime] = React29__namespace.useState("");
-  const [color, setColor] = React29__namespace.useState("blue");
-  const [userId, setUserId] = React29__namespace.useState("");
-  const [isSubmitting, setIsSubmitting] = React29__namespace.useState(false);
-  React29__namespace.useEffect(() => {
+  const [title, setTitle] = React27__namespace.useState("");
+  const [description, setDescription] = React27__namespace.useState("");
+  const [startDate, setStartDate] = React27__namespace.useState("");
+  const [startTime, setStartTime] = React27__namespace.useState("");
+  const [endDate, setEndDate] = React27__namespace.useState("");
+  const [endTime, setEndTime] = React27__namespace.useState("");
+  const [color, setColor] = React27__namespace.useState("blue");
+  const [userId, setUserId] = React27__namespace.useState("");
+  const [isSubmitting, setIsSubmitting] = React27__namespace.useState(false);
+  React27__namespace.useEffect(() => {
     if (open) {
       if (mode === "edit" && event) {
         const start = dateFns.parseISO(event.startDate);
@@ -14504,7 +15092,7 @@ function QuickAddEvent({
   onOpenDialog,
   onClose
 }) {
-  const [title, setTitle] = React29__namespace.useState("");
+  const [title, setTitle] = React27__namespace.useState("");
   const { users } = useEventCalendar();
   const handleSubmit = (e) => {
     e.preventDefault();
@@ -14571,8 +15159,8 @@ var HOUR_OPTIONS = Array.from({ length: 25 }, (_, i) => {
 });
 function ChangeVisibleHoursInput() {
   const { visibleHours, setVisibleHours } = useEventCalendar();
-  const [from, setFrom] = React29__namespace.useState(visibleHours.from);
-  const [to, setTo] = React29__namespace.useState(visibleHours.to);
+  const [from, setFrom] = React27__namespace.useState(visibleHours.from);
+  const [to, setTo] = React27__namespace.useState(visibleHours.to);
   const handleApply = () => {
     const toHour = to === 0 ? 24 : to;
     setVisibleHours({ from, to: toHour });
@@ -14618,7 +15206,7 @@ var HOUR_OPTIONS2 = Array.from({ length: 25 }, (_, i) => {
 });
 function ChangeWorkingHoursInput() {
   const { workingHours, setWorkingHours } = useEventCalendar();
-  const [localWorkingHours, setLocalWorkingHours] = React29__namespace.useState({
+  const [localWorkingHours, setLocalWorkingHours] = React27__namespace.useState({
     ...workingHours
   });
   const handleToggleDay = (dayId) => {
@@ -14767,8 +15355,8 @@ function CalendarSettingsButton({
   );
 }
 function useMediaQuery(query) {
-  const [matches, setMatches] = React29__namespace.useState(false);
-  React29__namespace.useEffect(() => {
+  const [matches, setMatches] = React27__namespace.useState(false);
+  React27__namespace.useEffect(() => {
     const media = window.matchMedia(query);
     setMatches(media.matches);
     const listener = (event) => {
@@ -14820,11 +15408,11 @@ function BigCalendarInner({
   maxEventsPerDay
 }) {
   const { view, setView } = useEventCalendar();
-  const [dialogOpen, setDialogOpen] = React29__namespace.useState(false);
-  const [settingsDialogOpen, setSettingsDialogOpen] = React29__namespace.useState(false);
-  const [selectedEvent, setSelectedEvent] = React29__namespace.useState(null);
-  const [dialogMode, setDialogMode] = React29__namespace.useState("add");
-  const [defaultDate, setDefaultDate] = React29__namespace.useState(/* @__PURE__ */ new Date());
+  const [dialogOpen, setDialogOpen] = React27__namespace.useState(false);
+  const [settingsDialogOpen, setSettingsDialogOpen] = React27__namespace.useState(false);
+  const [selectedEvent, setSelectedEvent] = React27__namespace.useState(null);
+  const [dialogMode, setDialogMode] = React27__namespace.useState("add");
+  const [defaultDate, setDefaultDate] = React27__namespace.useState(/* @__PURE__ */ new Date());
   const isMobile = useMediaQuery("(max-width: 768px)");
   const isCompact = compact === "auto" ? isMobile : compact;
   const handleAddClick = () => {
@@ -15111,7 +15699,7 @@ var calculateInnerOffset = (date, range, columnWidth) => {
   const dayOfMonth = date.getDate();
   return dayOfMonth / totalRangeDays * columnWidth;
 };
-var GanttContext = React29.createContext({
+var GanttContext = React27.createContext({
   zoom: 100,
   range: "monthly",
   columnWidth: 50,
@@ -15132,7 +15720,7 @@ var GanttContentHeader = ({
   columns,
   renderHeaderItem
 }) => {
-  const id = React29.useId();
+  const id = React27.useId();
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -15180,8 +15768,8 @@ var getWeekStartDate = (year, weekNumber) => {
   return dateFns.addWeeks(week1Start, weekNumber - 1);
 };
 var WeeklyHeader = () => {
-  const gantt = React29.useContext(GanttContext);
-  const weeklyData = React29.useMemo(() => {
+  const gantt = React27.useContext(GanttContext);
+  const weeklyData = React27.useMemo(() => {
     const result = [];
     for (const yearData of gantt.timelineData) {
       const year = yearData.year;
@@ -15216,7 +15804,7 @@ var WeeklyHeader = () => {
   ] }, yearData.year));
 };
 var MonthlyHeader = () => {
-  const gantt = React29.useContext(GanttContext);
+  const gantt = React27.useContext(GanttContext);
   return gantt.timelineData.map((year) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-col", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       GanttContentHeader,
@@ -15235,7 +15823,7 @@ var MonthlyHeader = () => {
   ] }, year.year));
 };
 var QuarterlyHeader = () => {
-  const gantt = React29.useContext(GanttContext);
+  const gantt = React27.useContext(GanttContext);
   return gantt.timelineData.map(
     (year) => year.quarters.map((quarter, quarterIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -15263,7 +15851,7 @@ var headers = {
   quarterly: QuarterlyHeader
 };
 var GanttHeader = ({ className }) => {
-  const gantt = React29.useContext(GanttContext);
+  const gantt = React27.useContext(GanttContext);
   const Header2 = headers[gantt.range];
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -15281,7 +15869,7 @@ var GanttSidebarItem = ({
   onSelectItem,
   className
 }) => {
-  const gantt = React29.useContext(GanttContext);
+  const gantt = React27.useContext(GanttContext);
   const tempEndAt = feature.endAt && dateFns.isSameDay(feature.startAt, feature.endAt) ? dateFns.addDays(feature.endAt, 1) : feature.endAt;
   const duration = tempEndAt ? dateFns.formatDistance(feature.startAt, tempEndAt) : `${dateFns.formatDistance(feature.startAt, /* @__PURE__ */ new Date())} so far`;
   const handleClick = (event) => {
@@ -15357,24 +15945,24 @@ function computeGroupRange(features) {
   }
   return { start: minStart, end: maxEnd };
 }
-var GanttGroupSummaryBar = React29.memo(({
+var GanttGroupSummaryBar = React27.memo(({
   group,
   className
 }) => {
-  const gantt = React29.useContext(GanttContext);
-  const timelineStartDate = React29.useMemo(
+  const gantt = React27.useContext(GanttContext);
+  const timelineStartDate = React27.useMemo(
     () => new Date(gantt.timelineData.at(0)?.year ?? 0, 0, 1),
     [gantt.timelineData]
   );
-  const { start: groupStart, end: groupEnd } = React29.useMemo(
+  const { start: groupStart, end: groupEnd } = React27.useMemo(
     () => computeGroupRange(group.features),
     [group.features]
   );
-  const offset = React29.useMemo(() => {
+  const offset = React27.useMemo(() => {
     if (!groupStart) return 0;
     return Math.round(getOffset(groupStart, timelineStartDate, gantt));
   }, [groupStart, timelineStartDate, gantt]);
-  const width = React29.useMemo(() => {
+  const width = React27.useMemo(() => {
     if (!groupStart || !groupEnd) return 0;
     return Math.round(getWidth(groupStart, groupEnd, gantt));
   }, [groupStart, groupEnd, gantt]);
@@ -15414,13 +16002,13 @@ var GanttCollapsibleSidebarGroup = ({
   children,
   className
 }) => {
-  const gantt = React29.useContext(GanttContext);
+  const gantt = React27.useContext(GanttContext);
   const isExpanded = gantt.expandedGroups[group.id] ?? true;
-  const { start: groupStart, end: groupEnd } = React29.useMemo(
+  const { start: groupStart, end: groupEnd } = React27.useMemo(
     () => computeGroupRange(group.features),
     [group.features]
   );
-  const duration = React29.useMemo(() => {
+  const duration = React27.useMemo(() => {
     if (!groupStart || !groupEnd) return null;
     return dateFns.formatDistance(groupStart, groupEnd);
   }, [groupStart, groupEnd]);
@@ -15464,7 +16052,7 @@ var GanttCollapsibleTimelineGroup = ({
   children,
   className
 }) => {
-  const gantt = React29.useContext(GanttContext);
+  const gantt = React27.useContext(GanttContext);
   const isExpanded = gantt.expandedGroups[group.id] ?? true;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Collapsible,
@@ -15524,7 +16112,7 @@ var GanttAddFeatureHelper = ({
   className
 }) => {
   const [scrollX] = useGanttScrollX();
-  const gantt = React29.useContext(GanttContext);
+  const gantt = React27.useContext(GanttContext);
   const [mousePosition, mouseRef] = usehooks.useMouse();
   const handleClick = () => {
     const ganttRect = gantt.ref?.current?.getBoundingClientRect();
@@ -15563,10 +16151,10 @@ var GanttColumn = ({
   index,
   isColumnSecondary
 }) => {
-  const gantt = React29.useContext(GanttContext);
+  const gantt = React27.useContext(GanttContext);
   const [dragging] = useGanttDragging();
   const [mousePosition, mouseRef] = usehooks.useMouse();
-  const [hovering, setHovering] = React29.useState(false);
+  const [hovering, setHovering] = React27.useState(false);
   const [windowScroll] = usehooks.useWindowScroll();
   const handleMouseEnter = () => setHovering(true);
   const handleMouseLeave = () => setHovering(false);
@@ -15596,7 +16184,7 @@ var GanttColumns = ({
   columns,
   isColumnSecondary
 }) => {
-  const id = React29.useId();
+  const id = React27.useId();
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -15615,12 +16203,12 @@ var GanttColumns = ({
     }
   );
 };
-var GanttGridLines = React29.memo(({
+var GanttGridLines = React27.memo(({
   className
 }) => {
-  const gantt = React29.useContext(GanttContext);
-  const id = React29.useId();
-  const { columns, monthBoundaryIndices } = React29.useMemo(() => {
+  const gantt = React27.useContext(GanttContext);
+  const id = React27.useId();
+  const { columns, monthBoundaryIndices } = React27.useMemo(() => {
     let totalColumns = 0;
     const monthIndices = [];
     if (gantt.range === "weekly") {
@@ -15684,7 +16272,7 @@ var GanttCreateMarkerTrigger = ({
   onCreateMarker,
   className
 }) => {
-  const gantt = React29.useContext(GanttContext);
+  const gantt = React27.useContext(GanttContext);
   const [mousePosition, mouseRef] = usehooks.useMouse();
   const [windowScroll] = usehooks.useWindowScroll();
   const x = usehooks.useThrottle(
@@ -15733,7 +16321,7 @@ var GanttFeatureDragHelper = ({
     id: `feature-drag-helper-${featureId}`
   });
   const isPressed = Boolean(attributes["aria-pressed"]);
-  React29.useEffect(() => setDragging(isPressed), [isPressed, setDragging]);
+  React27.useEffect(() => setDragging(isPressed), [isPressed, setDragging]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -15779,7 +16367,7 @@ var GanttFeatureItemCard = ({
   const [, setDragging] = useGanttDragging();
   const { attributes, listeners, setNodeRef } = core.useDraggable({ id });
   const isPressed = Boolean(attributes["aria-pressed"]);
-  React29.useEffect(() => setDragging(isPressed), [isPressed, setDragging]);
+  React27.useEffect(() => setDragging(isPressed), [isPressed, setDragging]);
   return /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "h-full w-full rounded-sm border bg-background px-2 py-1.5 text-xs shadow-sm overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -15805,37 +16393,37 @@ var GanttFeatureItem = ({
   ...feature
 }) => {
   const [scrollX] = useGanttScrollX();
-  const gantt = React29.useContext(GanttContext);
-  const timelineStartDate = React29.useMemo(
+  const gantt = React27.useContext(GanttContext);
+  const timelineStartDate = React27.useMemo(
     () => new Date(gantt.timelineData.at(0)?.year ?? 0, 0, 1),
     [gantt.timelineData]
   );
-  const [startAt, setStartAt] = React29.useState(feature.startAt);
-  const [endAt, setEndAt] = React29.useState(feature.endAt);
-  const width = React29.useMemo(
+  const [startAt, setStartAt] = React27.useState(feature.startAt);
+  const [endAt, setEndAt] = React27.useState(feature.endAt);
+  const width = React27.useMemo(
     () => Math.round(getWidth(startAt, endAt, gantt)),
     [startAt, endAt, gantt]
   );
-  const offset = React29.useMemo(
+  const offset = React27.useMemo(
     () => Math.round(getOffset(startAt, timelineStartDate, gantt)),
     [startAt, timelineStartDate, gantt]
   );
-  const addRange = React29.useMemo(() => getAddRange(gantt.range), [gantt.range]);
+  const addRange = React27.useMemo(() => getAddRange(gantt.range), [gantt.range]);
   const [mousePosition] = usehooks.useMouse();
-  const [previousMouseX, setPreviousMouseX] = React29.useState(0);
-  const [previousStartAt, setPreviousStartAt] = React29.useState(startAt);
-  const [previousEndAt, setPreviousEndAt] = React29.useState(endAt);
+  const [previousMouseX, setPreviousMouseX] = React27.useState(0);
+  const [previousStartAt, setPreviousStartAt] = React27.useState(startAt);
+  const [previousEndAt, setPreviousEndAt] = React27.useState(endAt);
   const mouseSensor = core.useSensor(core.MouseSensor, {
     activationConstraint: {
       distance: 10
     }
   });
-  const handleItemDragStart = React29.useCallback(() => {
+  const handleItemDragStart = React27.useCallback(() => {
     setPreviousMouseX(mousePosition.x);
     setPreviousStartAt(startAt);
     setPreviousEndAt(endAt);
   }, [mousePosition.x, startAt, endAt]);
-  const handleItemDragMove = React29.useCallback(() => {
+  const handleItemDragMove = React27.useCallback(() => {
     const currentDate = getDateByMousePosition(gantt, mousePosition.x);
     const originalDate = getDateByMousePosition(gantt, previousMouseX);
     const delta = gantt.range === "weekly" ? dateFns.differenceInDays(currentDate, originalDate) : getInnerDifferenceIn(gantt.range)(currentDate, originalDate);
@@ -15844,17 +16432,17 @@ var GanttFeatureItem = ({
     setStartAt(newStartDate);
     setEndAt(newEndDate);
   }, [gantt, mousePosition.x, previousMouseX, previousStartAt, previousEndAt]);
-  const onDragEnd = React29.useCallback(
+  const onDragEnd = React27.useCallback(
     () => onMove?.(feature.id, startAt, endAt),
     [onMove, feature.id, startAt, endAt]
   );
-  const handleLeftDragMove = React29.useCallback(() => {
+  const handleLeftDragMove = React27.useCallback(() => {
     const ganttRect = gantt.ref?.current?.getBoundingClientRect();
     const x = mousePosition.x - (ganttRect?.left ?? 0) + scrollX - gantt.sidebarWidth;
     const newStartAt = getDateByMousePosition(gantt, x);
     setStartAt(newStartAt);
   }, [gantt, mousePosition.x, scrollX]);
-  const handleRightDragMove = React29.useCallback(() => {
+  const handleRightDragMove = React27.useCallback(() => {
     const ganttRect = gantt.ref?.current?.getBoundingClientRect();
     const x = mousePosition.x - (ganttRect?.left ?? 0) + scrollX - gantt.sidebarWidth;
     const newEndAt = getDateByMousePosition(gantt, x);
@@ -16050,21 +16638,21 @@ var GanttFeatureList = ({
     children
   }
 );
-var GanttMarker = React29.memo(({ label, date, id, onRemove, className }) => {
-  const gantt = React29.useContext(GanttContext);
-  const differenceIn = React29.useMemo(
+var GanttMarker = React27.memo(({ label, date, id, onRemove, className }) => {
+  const gantt = React27.useContext(GanttContext);
+  const differenceIn = React27.useMemo(
     () => getDifferenceIn(gantt.range),
     [gantt.range]
   );
-  const timelineStartDate = React29.useMemo(
+  const timelineStartDate = React27.useMemo(
     () => new Date(gantt.timelineData.at(0)?.year ?? 0, 0, 1),
     [gantt.timelineData]
   );
-  const offset = React29.useMemo(
+  const offset = React27.useMemo(
     () => differenceIn(date, timelineStartDate),
     [differenceIn, date, timelineStartDate]
   );
-  const innerOffset = React29.useMemo(
+  const innerOffset = React27.useMemo(
     () => calculateInnerOffset(
       date,
       gantt.range,
@@ -16072,7 +16660,7 @@ var GanttMarker = React29.memo(({ label, date, id, onRemove, className }) => {
     ),
     [date, gantt.range, gantt.columnWidth, gantt.zoom]
   );
-  const handleRemove = React29.useCallback(() => onRemove?.(id), [onRemove, id]);
+  const handleRemove = React27.useCallback(() => onRemove?.(id), [onRemove, id]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -16122,14 +16710,14 @@ var GanttProvider = ({
   className,
   defaultExpandedGroups = {}
 }) => {
-  const scrollRef = React29.useRef(null);
-  const [timelineData, setTimelineData] = React29.useState(
+  const scrollRef = React27.useRef(null);
+  const [timelineData, setTimelineData] = React27.useState(
     createInitialTimelineData(/* @__PURE__ */ new Date())
   );
   const [, setScrollX] = useGanttScrollX();
   const sidebarWidth = 280;
-  const [expandedGroups, setExpandedGroups] = React29.useState(defaultExpandedGroups);
-  const setGroupExpanded = React29.useCallback((groupId, expanded) => {
+  const [expandedGroups, setExpandedGroups] = React27.useState(defaultExpandedGroups);
+  const setGroupExpanded = React27.useCallback((groupId, expanded) => {
     setExpandedGroups((prev) => ({ ...prev, [groupId]: expanded }));
   }, []);
   const headerHeight = 60;
@@ -16140,7 +16728,7 @@ var GanttProvider = ({
   } else if (range === "quarterly") {
     columnWidth = 100;
   }
-  const cssVariables = React29.useMemo(
+  const cssVariables = React27.useMemo(
     () => ({
       "--gantt-zoom": `${zoom}`,
       "--gantt-column-width": `${zoom / 100 * columnWidth}px`,
@@ -16150,13 +16738,13 @@ var GanttProvider = ({
     }),
     [zoom, columnWidth, sidebarWidth]
   );
-  React29.useEffect(() => {
+  React27.useEffect(() => {
     if (scrollRef.current) {
       scrollRef.current.scrollLeft = scrollRef.current.scrollWidth / 2 - scrollRef.current.clientWidth / 2;
       setScrollX(scrollRef.current.scrollLeft);
     }
   }, [setScrollX]);
-  const handleScroll = React29.useCallback(
+  const handleScroll = React27.useCallback(
     throttle__default.default(() => {
       const scrollElement = scrollRef.current;
       if (!scrollElement) {
@@ -16208,7 +16796,7 @@ var GanttProvider = ({
     }, 100),
     []
   );
-  React29.useEffect(() => {
+  React27.useEffect(() => {
     const scrollElement = scrollRef.current;
     if (scrollElement) {
       scrollElement.addEventListener("scroll", handleScroll);
@@ -16219,7 +16807,7 @@ var GanttProvider = ({
       }
     };
   }, [handleScroll]);
-  const scrollToFeature = React29.useCallback(
+  const scrollToFeature = React27.useCallback(
     (feature) => {
       const scrollElement = scrollRef.current;
       if (!scrollElement) {
@@ -16299,21 +16887,21 @@ var GanttTimeline = ({
 );
 var GanttToday = ({ className }) => {
   const label = "Today";
-  const date = React29.useMemo(() => /* @__PURE__ */ new Date(), []);
-  const gantt = React29.useContext(GanttContext);
-  const differenceIn = React29.useMemo(
+  const date = React27.useMemo(() => /* @__PURE__ */ new Date(), []);
+  const gantt = React27.useContext(GanttContext);
+  const differenceIn = React27.useMemo(
     () => getDifferenceIn(gantt.range),
     [gantt.range]
   );
-  const timelineStartDate = React29.useMemo(
+  const timelineStartDate = React27.useMemo(
     () => new Date(gantt.timelineData.at(0)?.year ?? 0, 0, 1),
     [gantt.timelineData]
   );
-  const offset = React29.useMemo(
+  const offset = React27.useMemo(
     () => differenceIn(date, timelineStartDate),
     [differenceIn, date, timelineStartDate]
   );
-  const innerOffset = React29.useMemo(
+  const innerOffset = React27.useMemo(
     () => Math.round(calculateInnerOffset(
       date,
       gantt.range,
@@ -16349,7 +16937,7 @@ var GanttToday = ({ className }) => {
   );
 };
 var t = tunnel__default.default();
-var KanbanContext = React29.createContext({
+var KanbanContext = React27.createContext({
   columns: [],
   data: [],
   activeCardId: null
@@ -16387,7 +16975,7 @@ var KanbanCard = ({
   } = sortable.useSortable({
     id
   });
-  const { activeCardId } = React29.useContext(KanbanContext);
+  const { activeCardId } = React27.useContext(KanbanContext);
   const style = {
     transition,
     transform: utilities.CSS.Transform.toString(transform)
@@ -16422,7 +17010,7 @@ var KanbanCards = ({
   className,
   ...props
 }) => {
-  const { data } = React29.useContext(KanbanContext);
+  const { data } = React27.useContext(KanbanContext);
   const filteredData = data.filter((item) => item.column === props.id);
   const items = filteredData.map((item) => item.id);
   return /* @__PURE__ */ jsxRuntime.jsxs(ScrollArea, { className: "overflow-hidden", children: [
@@ -16449,7 +17037,7 @@ var KanbanProvider = ({
   onDataChange,
   ...props
 }) => {
-  const [activeCardId, setActiveCardId] = React29.useState(null);
+  const [activeCardId, setActiveCardId] = React27.useState(null);
   const sensors = core.useSensors(
     core.useSensor(core.MouseSensor),
     core.useSensor(core.TouchSensor),
@@ -16672,6 +17260,8 @@ exports.CircularProgress = CircularProgress;
 exports.Collapsible = Collapsible;
 exports.CollapsibleContent = CollapsibleContent2;
 exports.CollapsibleTrigger = CollapsibleTrigger2;
+exports.ColumnSummaryCell = ColumnSummaryCell;
+exports.ColumnSummaryStrip = ColumnSummaryStrip;
 exports.Command = Command;
 exports.CommandDialog = CommandDialog;
 exports.CommandEmpty = CommandEmpty;
@@ -16811,6 +17401,7 @@ exports.InputGroupButton = InputGroupButton;
 exports.InputGroupInput = InputGroupInput;
 exports.InputGroupText = InputGroupText;
 exports.InputGroupTextarea = InputGroupTextarea;
+exports.InsightBar = InsightBar;
 exports.Item = Item6;
 exports.ItemActions = ItemActions;
 exports.ItemContent = ItemContent;